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

package/layouts/intro.vue

@@ -0,0 +1,315 @@
+<template>
+  <div class="slidev-layout intro">
+    <!-- Standard layout when no image is provided -->
+    <div v-if="!hasImage" class="content-wrapper-no-image">
+      <div class="text-content-full">
+        <div v-if="showBanner" class="banner-container">
+          <div class="banner-image banner"></div>
+        </div>
+        <div class="content-container">
+          <slot />
+        </div>
+      </div>
+    </div>
+
+    <!-- Split layout with image -->
+    <div v-else class="content-wrapper" :class="layoutClass">
+      <!-- Text content section -->
+      <div class="text-content" :style="textContentStyle">
+        <div v-if="showBanner" class="banner-container">
+          <div class="banner-image banner"></div>
+        </div>
+        <div class="content-container">
+          <slot />
+        </div>
+      </div>
+
+      <!-- Image content section -->
+      <div class="image-content" :style="imageContentStyle">
+        <div class="image-container" :class="imageAlignClass">
+          <img 
+            :src="getImageUrl(props.imageSrc)" 
+            :style="imageStyle" 
+            alt="Slide Image"
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { getImageUrl } from '../utils/layoutHelper'
+
+const props = defineProps({
+  bannerEnabled: {
+    type: Boolean,
+    default: true
+  },
+  // Image options
+  imageSrc: String,
+  imageSize: {
+    type: String,
+    default: '100%'
+  },
+  imagePosition: {
+    type: String,
+    default: 'right',
+    validator: (value) => ['left', 'right'].includes(value)
+  },
+  imageRatio: {
+    type: String,
+    default: '33%'
+  },
+  // Logo/banner option
+  enableLogo: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// Check if image is provided in frontmatter or props
+const hasImage = computed(() => {
+  // First check frontmatter (for backward compatibility)
+  if ($slidev?.configs?.frontmatter?.imageSrc) {
+    props.imageSrc = $slidev.configs.frontmatter.imageSrc
+    return true
+  }
+  // Then check props
+  return Boolean(props.imageSrc)
+})
+
+// Determine if banner should be shown
+const showBanner = computed(() => {
+  // First check frontmatter (for backward compatibility)
+  if ($slidev?.configs?.frontmatter?.enableLogo !== undefined) {
+    return $slidev.configs.frontmatter.enableLogo
+  }
+  // Then check props
+  return props.enableLogo !== undefined ? props.enableLogo : props.bannerEnabled
+})
+
+// Calculate layout class based on image position
+const layoutClass = computed(() => {
+  // First check frontmatter (for backward compatibility)
+  const position = $slidev?.configs?.frontmatter?.imagePosition || props.imagePosition
+  return position === 'right' ? 'image-right' : 'image-left'
+})
+
+// Calculate image alignment class based on image position
+const imageAlignClass = computed(() => {
+  // First check frontmatter (for backward compatibility)
+  const position = $slidev?.configs?.frontmatter?.imagePosition || props.imagePosition
+  return position === 'right' ? 'align-left' : 'align-right'
+})
+
+// Parse image ratio from frontmatter or props
+const imageRatio = computed(() => {
+  // First check frontmatter (for backward compatibility)
+  const ratio = $slidev?.configs?.frontmatter?.imageRatio || props.imageRatio || '33%'
+  // Remove % sign and parse as number
+  return parseFloat(ratio.toString().replace('%', ''))
+})
+
+// Calculate text content width style
+const textContentStyle = computed(() => {
+  const textWidth = 100 - imageRatio.value
+  return {
+    width: `${textWidth}%`,
+  }
+})
+
+// Calculate image content width style
+const imageContentStyle = computed(() => {
+  return {
+    width: `${imageRatio.value}%`,
+  }
+})
+
+// Calculate image size and scaling
+const imageSize = computed(() => {
+  return $slidev?.configs?.frontmatter?.imageSize || props.imageSize || '100%'
+})
+
+// Calculate image style
+const imageStyle = computed(() => {
+  const size = imageSize.value
+  const style = {
+    maxWidth: '100%',
+    maxHeight: '100%',
+    objectFit: 'contain',
+  }
+  
+  if (size) {
+    if (size.toString().endsWith('%')) {
+      const sizeValue = parseFloat(size.toString().replace('%', '')) / 100
+      style.maxWidth = `${sizeValue * 100}%`
+      style.maxHeight = `${sizeValue * 100}%`
+    } else if (!isNaN(Number(size))) {
+      style.maxWidth = `${parseFloat(size) * 100}%`
+      style.maxHeight = `${parseFloat(size) * 100}%`
+    }
+  }
+  
+  return style
+})
+
+// Using onMounted to handle font sizing after DOM is ready
+import { onMounted, nextTick } from 'vue'
+
+// Dynamic font sizing logic
+onMounted(async () => {
+  // Wait for content to be rendered
+  await nextTick()
+  
+  // Find the h1 element
+  const h1 = document.querySelector('.slidev-layout.intro h1')
+  if (!h1) return
+  
+  const textLength = h1.textContent?.length || 0
+  
+  // Apply font sizing based on text length
+  if (textLength > 30) {
+    h1.style.fontSize = '2.5rem'
+  } else if (textLength > 20) {
+    h1.style.fontSize = '3rem'
+  } else {
+    h1.style.fontSize = '3.5rem'
+  }
+})
+</script>
+
+<style scoped>
+.intro {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+/* Layout when no image */
+.content-wrapper-no-image {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.text-content-full {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 2rem;
+  min-width: 0;
+}
+
+/* Split layout with image */
+.content-wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  overflow: hidden;
+}
+
+.image-left {
+  flex-direction: row-reverse; /* Image on left, text on right */
+}
+
+.image-right {
+  flex-direction: row; /* Text on left, image on right */
+}
+
+/* Text content styling */
+.text-content {
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 2rem;
+  overflow: hidden;
+  text-align: left;
+}
+
+/* Image content styling */
+.image-content {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  overflow: hidden;
+}
+
+.image-container {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  max-width: 100%;
+}
+
+.align-left {
+  justify-content: flex-start;
+}
+
+.align-right {
+  justify-content: flex-end;
+}
+
+/* Banner styles */
+.banner-container {
+  width: 100%;
+  margin-bottom: 0.5rem;
+  display: flex; /* Using flexbox for better control */
+  justify-content: flex-start; /* Always align content to the left for intro */
+  margin-left: -0rem;
+  max-width: 200px;
+  height: 3rem;
+}
+
+.banner {
+  width: 100%;
+  height: 100%;
+}
+
+/* Banner styling handled by global CSS */
+
+.content-container {
+  position: relative;
+  z-index: 5;
+}
+
+/* Typography adjustments for headers */
+:deep(h1) {
+  color: inherit;
+  font-size: 4rem; /* Default size that will be overridden by JS */
+  line-height: 1.25;
+  margin-top: 0;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  max-width: 100%;
+  transition: font-size 0.3s ease;
+}
+
+:deep(h1)::after {
+  content: '';
+  display: block;
+  width: 20%;
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+  height: 4px;
+  background-color: var(--sp-primary);
+}
+
+:deep(h2) {
+  color: var(--sp-primary-darkest);
+}
+</style>

package/layouts/quote.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="slidev-layout quote">
+    <div v-if="showLogo" class="logo-container">
+      <div class="logo-image logo"></div>
+    </div>
+    <div class="my-auto quote-container">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  logo: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const showLogo = computed(() => {
+  if ($slidev?.configs?.frontmatter?.logo !== undefined) {
+    return $slidev.configs.frontmatter.logo
+  }
+  return props.logo
+})
+</script>
+
+<style scoped>
+.quote {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.quote-container {
+  max-width: 80%;
+}
+
+:deep(h1) {
+  font-size: 2rem;
+  color: inherit;
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+:deep(h2) {
+  color: var(--sp-primary);
+  font-weight: 600;
+  text-align: right;
+  max-width: 100%;
+  margin-top: 0.5rem;
+}
+
+:deep(h3) {
+  color: var(--sp-primary-lightest);
+  text-align: right;
+  max-width: 100%;
+  margin-top: 0.25rem;
+}
+
+.logo-container {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 10;
+}
+
+/* Logo styling moved to global layout.css */
+</style>

package/layouts/section.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="slidev-layout section">
+    <div v-if="showLogo" class="logo-container">
+      <div class="logo-image logo"></div>
+    </div>
+    <div class="content-wrapper">
+      <div class="text-content">
+        <div class="content-container" :class="{ 'with-title-line': showTitleLine }">
+          <slot />
+        </div>
+      </div>
+      <div v-if="hasImage" class="image-content">
+        <img :src="imageUrl" alt="Slide Image">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { getImageUrl } from '../utils/layoutHelper'
+
+const props = defineProps({
+  logo: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const hasImage = computed(() => {
+  return Boolean($slidev?.configs?.frontmatter?.image)
+})
+
+const imageUrl = computed(() => {
+  const image = $slidev?.configs?.frontmatter?.image
+  if (!image) return ''
+  return getImageUrl(image)
+})
+
+const showLogo = computed(() => {
+  if ($slidev?.configs?.frontmatter?.logo !== undefined) {
+    return $slidev.configs.frontmatter.logo
+  }
+  return props.logo
+})
+
+const showTitleLine = computed(() => {
+  if ($slidev?.configs?.frontmatter?.titleLine !== undefined) {
+    return $slidev.configs.frontmatter.titleLine
+  }
+  return true // Default to showing the line if not specified
+})
+</script>
+
+<style scoped>
+.section {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.content-wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden; /* Ensure no overflow */
+}
+
+.text-content {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 0 2rem;
+  min-width: 0; /* Ensure flexbox can shrink if needed */
+}
+
+.content-container {
+  position: relative;
+  z-index: 5;
+}
+
+.image-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  max-width: 50%; /* Limit to half the width */
+}
+
+.image-content img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 4px; /* Optional: slightly round the corners */
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: add a subtle shadow */
+}
+
+
+:deep(h1) {
+  color: inherit;
+  font-size: 2.75rem; 
+  line-height: 3rem;
+  margin-top: 0;
+}
+
+
+:deep(h1) {
+  position: relative;
+  display: inline-block;
+}
+
+:deep(.with-title-line h1)::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -2rem;
+  width: 4rem;
+  height: 3px;
+  margin-bottom: 1.5rem;
+  background-color: var(--sp-primary);
+}
+
+:deep(h2) {
+  color: var(--sp-primary);
+}
+
+.logo-container {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 10;
+}
+
+/* Logo styling moved to global layout.css */
+</style>

package/layouts/statement.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="slidev-layout statement">
+    <div v-if="showLogo" class="logo-container">
+      <div class="logo-image logo"></div>
+    </div>
+    <div class="content">
+      <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>
+.statement {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.content {
+  max-width: 80%;
+}
+
+.statement h1 {
+  font-size: 3rem;
+}
+
+.statement h2 {
+  font-size: 2rem;
+}
+
+.logo-container {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 10;
+}
+
+/* Logo styling moved to global layout.css */
+</style>

package/layouts/three-cols-header.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="slidev-layout three-cols-header">
+    <div v-if="showLogo" class="logo-container">
+      <div class="logo-image logo"></div>
+    </div>
+    <div class="header">
+      <slot />
+    </div>
+    <div class="cols-container">
+      <div class="col left">
+        <slot name="left" />
+      </div>
+      <div class="col middle">
+        <slot name="middle" />
+      </div>
+      <div class="col right">
+        <slot name="right" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  logo: {
+    type: Boolean,
+    default: true
+  },
+  textAlignment: {
+    type: String,
+    default: 'center',
+    validator: (value) => ['top', 'center', 'bottom'].includes(value)
+  }
+})
+
+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'
+  }
+})
+</script>
+
+<style scoped>
+.three-cols-header {
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  margin-bottom: 1rem;
+}
+
+.cols-container {
+  display: flex;
+  flex-grow: 1;
+  column-gap: 2rem;
+}
+
+.col {
+  display: flex;
+  flex-direction: column;
+  width: 33.33%;
+  justify-content: v-bind(contentAlignmentStyle);
+}
+
+.left {
+  padding-right: 0.5rem;
+}
+
+.middle {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.right {
+  padding-left: 0.5rem;
+}
+
+.logo-container {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 10;
+}
+
+/* Logo styling moved to global layout.css */
+</style>