@sp-days-framework/slidev-theme-sykehuspartner 1.0.0

package/layouts/about-me.vue

@@ -0,0 +1,410 @@
+<template>
+  <div class="slidev-layout about-me">
+    <!-- When no image, show content aligned to the left -->
+    <div v-if="!props.imageSrc" class="content-no-image">
+      <div class="text-content text-left">
+        <!-- Banner logo -->
+        <div v-if="props.logo" class="banner-container">
+          <div class="banner-image banner"></div>
+        </div>
+        <h1 v-if="props.name" class="name">{{ props.name }}</h1>
+        <div v-if="props.jobTitle || props.department" class="job-info">
+          <p v-if="props.jobTitle" class="job-title">{{ props.jobTitle }}</p>
+          <p v-if="props.department" class="department">{{ props.department }}</p>
+        </div>
+        <p v-if="props.description" class="description">{{ props.description }}</p>
+        <div v-if="props.email || props.linkedin" class="contact-info">
+          <div v-if="props.email" class="contact-item">
+            <!-- SVG Email icon that changes with dark/light mode -->
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="contact-icon email-icon">
+              <path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2zm-2 0l-8 5l-8-5zm0 12H4V8l8 5l8-5z"/>
+            </svg>
+            <span class="email">{{ props.email }}</span>
+          </div>
+          <div v-if="props.linkedin" class="contact-item">
+            <!-- SVG LinkedIn icon that changes with dark/light mode -->
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="contact-icon linkedin-icon">
+              <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z"/>
+            </svg>
+            <span class="linkedin">{{ props.linkedin }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Split layout with image -->
+    <div v-else class="split-layout" :class="layoutClass">
+      <!-- Balanced split layout with equal halves -->
+      <div class="half-container image-half">
+        <div class="image-container" :style="containerStyle">
+          <div class="image-wrapper" :class="{ 'circle': props.imageShape === 'circle' }" :style="containerStyle">
+            <img 
+              :src="getImageUrl(props.imageSrc)" 
+              :style="imageStyle" 
+              class="profile-image" 
+              :class="{ 'circle': props.imageShape === 'circle' }"
+              alt="Profile image"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="half-container content-half">
+        <div class="text-container" :class="textAlignClass">
+          <div class="text-content">
+            <!-- Banner logo -->
+            <div v-if="props.logo" class="banner-container">
+              <div class="banner-image banner"></div>
+            </div>
+            <h1 v-if="props.name" class="name">{{ props.name }}</h1>
+            <div v-if="props.jobTitle || props.department" class="job-info">
+              <p v-if="props.jobTitle" class="job-title">{{ props.jobTitle }}</p>
+              <p v-if="props.department" class="department">{{ props.department }}</p>
+            </div>
+            <p v-if="props.description" class="description">{{ props.description }}</p>
+            <div v-if="props.email || props.linkedin" class="contact-info">
+              <div v-if="props.email" class="contact-item">
+                <!-- SVG Email icon that changes with dark/light mode -->
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="contact-icon email-icon">
+                  <path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2zm-2 0l-8 5l-8-5zm0 12H4V8l8 5l8-5z"/>
+                </svg>
+                <span class="email">{{ props.email }}</span>
+              </div>
+              <div v-if="props.linkedin" class="contact-item">
+                <!-- SVG LinkedIn icon that changes with dark/light mode -->
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="contact-icon linkedin-icon">
+                  <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z"/>
+                </svg>
+                <span class="linkedin">{{ props.linkedin }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { getImageUrl } from '../utils/layoutHelper'
+
+const props = defineProps({
+  // Image options
+  imageSrc: String,
+  imageShape: {
+    type: String,
+    default: 'rectangle',
+    validator: (value) => ['rectangle', 'circle'].includes(value)
+  },
+  imageSize: {
+    type: String,
+    default: '100%'
+  },
+  imagePosition: {
+    type: String,
+    default: 'left',
+    validator: (value) => ['left', 'right'].includes(value)
+  },
+  
+  // Content options
+  name: String,
+  jobTitle: String,
+  department: String,
+  description: String,
+  email: String,
+  linkedin: String,
+  
+  // Logo options
+  logo: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// Compute layout class based on image position
+const layoutClass = computed(() => {
+  return props.imagePosition === 'left' ? 'image-left' : 'image-right';
+});
+
+// Compute text alignment based on image position
+const textAlignClass = computed(() => {
+  return props.imagePosition === 'left' ? 'text-left' : 'text-right';
+});
+
+// Calculate if we have an image
+const hasImage = computed(() => Boolean(props.imageSrc));
+
+// Calculate image style
+const imageStyle = computed(() => {
+  const style = {
+    maxWidth: '100%',
+    maxHeight: '100%',
+    objectFit: 'cover'
+  };
+  
+  return style;
+});
+
+// Calculate container style based on image size
+const containerStyle = computed(() => {
+  const style = {};
+  
+  if (props.imageSize) {
+    if (props.imageSize.endsWith('%')) {
+      style.width = props.imageSize;
+      style.height = props.imageSize;
+    } else if (!isNaN(Number(props.imageSize))) {
+      style.width = `${parseFloat(props.imageSize) * 100}%`;
+      style.height = `${parseFloat(props.imageSize) * 100}%`;
+    }
+  }
+  
+  return style;
+});
+</script>
+
+<style scoped>
+.about-me {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Split layout styling */
+.split-layout {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+}
+
+.image-left {
+  flex-direction: row;
+}
+
+.image-right {
+  flex-direction: row-reverse;
+}
+
+/* Half container for equal balance */
+.half-container {
+  width: 50%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.image-half {
+  justify-content: flex-end;
+  padding-right: 2rem;
+}
+
+.content-half {
+  justify-content: flex-start;
+  padding-left: 2rem;
+}
+
+.image-right .image-half {
+  /* justify-content: flex-start; */
+  padding-right: 0;
+  padding-left: 2rem;
+}
+
+.image-right .content-half {
+  /* justify-content: flex-start; */
+  padding-left: 0;
+  padding-right: 2rem;
+}
+
+/* Image container */
+.image-container {
+  height: 80%;
+  width: 80%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-left .image-container {
+  justify-content: flex-end; /* Align to the right when image is on left */
+}
+
+.image-right .image-container {
+  justify-content: flex-start; /* Align to the left when image is on right */
+}
+
+.image-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 1px solid var(--sp-primary-darkest);
+  box-shadow: 0 4px 12px var(--sp-shadow);
+}
+
+.image-wrapper.circle {
+  border-radius: 50%;
+  overflow: hidden;
+  max-width: 20em;
+  max-height: 20em;
+  aspect-ratio: 1 / 1;
+}
+
+.profile-image {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.profile-image.circle {
+  width: 100%;
+  height: 100%;
+}
+
+/* Text container */
+.text-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.text-left .text-content {
+  text-align: left;
+  width: 100%;
+}
+
+.text-right .text-content {
+  text-align: right;
+  width: 100%;
+}
+
+/* Content when no image - left aligned */
+.content-no-image {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-left: 4rem;
+}
+
+.content-no-image .text-content {
+  width: 100%;
+}
+
+/* Text styling */
+.name {
+  color: inherit;
+  margin-bottom: 0.5rem;
+}
+
+.name::after {
+  content: '';
+  display: block;
+  width: 50%;
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+  height: 4px;
+  background-color: var(--sp-title-line);
+}
+
+.text-right .name::after {
+  margin-left: auto;
+}
+
+.job-info {
+  margin-bottom: 1rem;
+}
+
+.job-title {
+  color: var(--sp-primary-lighter);
+  margin: 0;
+  font-weight: 700;
+  font-size: 1.3em;
+}
+
+.department {
+  color: var(--sp-primary-lighter);
+  margin: 0;
+  font-weight: 500;
+  font-size: 1em;
+}
+
+.description {
+  margin-bottom: 1.5rem;
+  font-style: italic;
+}
+
+.contact-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.contact-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.text-right .contact-item {
+  justify-content: flex-end;
+}
+
+.email {
+  color: var(--sp-primary-light);
+}
+
+.linkedin {
+  color: var(--sp-primary-lighter);
+}
+
+/* SVG icons */
+.contact-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.email-icon path {
+  fill: var(--sp-primary-lighter);
+}
+
+.linkedin-icon path {
+  fill: var(--sp-primary-lighter);
+}
+
+.dark .email-icon path {
+  fill: var(--sp-primary-darker);
+}
+
+.dark .linkedin-icon path {
+  fill: var(--sp-primary-darker);
+}
+
+/* Banner styles */
+.banner-container {
+  width: auto;
+  margin-bottom: 1rem;
+  max-width: 150px;
+  height: 2rem;
+}
+
+.banner {
+  width: 100%;
+  height: 100%;
+}
+
+.image-left .banner-container {
+  margin-left: -0rem; /* Move the banner to the left beyond the border */
+}
+
+.text-right .banner-container {
+  margin-left: auto; /* Push the banner container to the right */
+}
+
+/* Banner styling handled by global CSS */
+</style>

package/layouts/center.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="slidev-layout center">
+    <div v-if="showLogo" class="logo-container">
+      <div class="logo-image logo"></div>
+    </div>
+    <div class="my-auto">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  logo: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const showLogo = computed(() => {
+  if ($slidev?.configs?.frontmatter?.logo !== undefined) {
+    return $slidev.configs.frontmatter.logo
+  }
+  return props.logo
+})
+</script>
+
+<style scoped>
+.center {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/layouts/cover.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="slidev-layout cover">
+    <div v-if="showBanner" class="banner-container">
+      <div class="banner-image banner"></div>
+    </div>
+    <div class="my-auto w-full flex flex-col items-center justify-center text-center">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  logo: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const showBanner = computed(() => {
+  if ($slidev?.configs?.frontmatter?.logo !== undefined) {
+    return $slidev.configs.frontmatter.logo
+  }
+  return props.logo
+})
+</script>
+
+<style scoped>
+.cover {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Using :deep to target elements inside the slot */
+:deep(h1) {
+  color: inherit;
+  /* Use clamp for responsive sizing between 3rem and 4rem */
+  font-size: clamp(3rem, 4rem - 0.5rem * var(--slidev-content-size, 1), 4rem);
+  line-height: 1.25; /* Proportional line-height */
+  /* Prevent overflow with ellipsis */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* Ensure words don't overflow */
+  word-wrap: break-word;
+  /* Helps with long single words */
+  overflow-wrap: break-word;
+  /* Maximum of 2 lines before wrapping */
+  max-height: calc(2.5 * 4rem);
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* Show max 2 lines */
+  line-clamp: 2; /* Standard property for compatibility */
+  -webkit-box-orient: vertical;
+}
+
+:deep(h1)::after {
+  content: '';
+  display: block;
+  width: 50%;
+  margin: 0.5rem auto 1.5rem;
+  height: 4px;
+  background-color: var(--sp-title-line);
+}
+
+:deep(h2) {
+  color: var(--sp-primary-darkest);
+}
+
+.banner-container {
+  position: absolute;
+  bottom: 0%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  width: 80%;
+  max-width: 200px;
+  height: 3rem;
+}
+
+.banner {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/layouts/default.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="slidev-layout default">
+    <div v-if="showLogo" class="logo-container">
+      <div class="logo-image logo"></div>
+    </div>
+    <div ref="headerRef" class="header"></div>
+    <div ref="contentRef" class="content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, onBeforeUnmount } from 'vue'
+import { useHeaderContentSplit } from '../utils/headerContentSplitter'
+
+const props = defineProps({
+  logo: {
+    type: Boolean,
+    default: true
+  },
+  textAlignment: {
+    type: String,
+    default: 'center',
+    validator: (value) => ['top', 'center', 'bottom'].includes(value)
+  }
+})
+
+const headerRef = ref(null)
+const contentRef = ref(null)
+
+const showLogo = computed(() => {
+  if ($slidev?.configs?.frontmatter?.logo !== undefined) {
+    return $slidev.configs.frontmatter.logo
+  }
+  return props.logo
+})
+
+// Compute content alignment style based on textAlignment prop
+const contentAlignmentStyle = computed(() => {
+  switch (props.textAlignment) {
+    case 'top':
+      return 'flex-start'
+    case 'bottom':
+      return 'flex-end'
+    case 'center':
+    default:
+      return 'center'
+  }
+})
+
+// Use our utility to handle the header/content split
+const { setupHeaderSplit } = useHeaderContentSplit(headerRef, contentRef)
+let headerSplitter
+
+onMounted(() => {
+  // Setup the header splitter when component is mounted
+  headerSplitter = setupHeaderSplit()
+})
+
+onBeforeUnmount(() => {
+  // Clean up when component is unmounted
+  if (headerSplitter) {
+    headerSplitter.destroy()
+  }
+})
+</script>
+
+<style scoped>
+.default {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+}
+
+.header {
+  margin-bottom: 2rem;
+}
+
+.header:empty {
+  display: none;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: v-bind(contentAlignmentStyle);
+}
+
+:deep(h1) {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+</style>

package/layouts/end.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="slidev-layout end">
+    <div v-if="showBanner" class="banner-container">
+      <div class="banner-image banner"></div>
+    </div>
+    <div class="my-auto">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  logo: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const showBanner = computed(() => {
+  if ($slidev?.configs?.frontmatter?.logo !== undefined) {
+    return $slidev.configs.frontmatter.logo;
+  }
+  return props.logo;
+});
+</script>
+
+<style scoped>
+.end {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.banner-container {
+  position: absolute;
+  bottom: 0%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  width: 60%;
+  max-width: 300px;
+  height: 3rem;
+}
+
+.banner {
+  width: 100%;
+  height: 100%;
+}
+</style>