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

package/styles/layout.css

@@ -0,0 +1,161 @@
+/* Light theme colors */
+:root {
+  --sp-primary: #023f84;
+  --sp-success: #00a400;
+  --sp-info: #54c7ec;
+  --sp-warning: #ffba00;
+  --sp-danger: #fa383e;
+  --sp-background: #f7faff;
+  --sp-shadow: #00000028;
+  --sp-code-background: #53535309;
+
+  /* Primary color variations (light) */
+  --sp-primary-dark: #023977;
+  --sp-primary-darker: #023670;
+  --sp-primary-darkest: #012c5c;
+  --sp-primary-light: #024591;
+  --sp-primary-lighter: #024898;
+  --sp-primary-lightest: #0352ac;
+
+  --sp-title-line: var(--sp-primary);
+}
+
+/* Dark theme colors */
+.dark {
+  --sp-primary: #6cace4;
+  --sp-success: #88e36b;
+  --sp-info: #5dccf0;
+  --sp-warning: #ffc93d;
+  --sp-danger: #ff6369;
+  --sp-background: #0d1117;
+  --sp-shadow: #ffffff28;
+  --sp-code-background: #01010213;
+
+  /* Primary color variations inverted (dark) */
+  --sp-primary-light: #5ea4e1;
+  --sp-primary-lighter: #509cdf;
+  --sp-primary-lightest: #338cda;
+  --sp-primary-dark: #88bce9;
+  --sp-primary-darker: #97c4ec;
+  --sp-primary-darkest: #c1dcf4;
+}
+
+/* Default styling for all layouts */
+.slidev-layout {
+  h1 {
+    color: var(--sp-primary-dark);
+    font-weight: bolder;
+    font-size: 2.75rem;
+  }
+
+  h2 {
+    /* color: var(--sp-primary-darker); */
+    font-weight: bold;
+    font-size: 2rem;
+  }
+
+  h3 {
+    /* color: var(--sp-primary-darkest); */
+    font-weight: bolder;
+    font-size: 1.55rem;
+  }
+
+  background: var(--sp-background);
+  padding: 1.5rem 2rem;
+  position: relative;
+
+  :not(pre) > code {
+    background: var(--sp-code-background);
+  }
+
+  /* blockquote {
+    display: flex;
+    align-items: center;
+    background: var(--sp-code-background);
+    color: var(--slidev-theme-color);
+    border-color: #f141a8;
+    border-left-width: 3px;
+    font-size: var(--slidev-theme-font-size, 1.1em);
+  } */
+}
+
+.banner-image {
+  background-image: url("../public/sp-banner-light.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.dark .banner-image {
+  background-image: url("../public/sp-banner-dark.svg");
+}
+
+.logo-image {
+  background-image: url("../public/sp-logo-light.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.dark .logo-image {
+  background-image: url("../public/sp-logo-dark.svg");
+}
+
+/* Global logo container and styling */
+.logo-container {
+  position: absolute;
+  z-index: 100; /* Using highest z-index from all layouts */
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+/* Default positioning for logo (will be overridden by specific layouts if needed) */
+.slidev-layout .logo-container:not([class*="custom-position"]) {
+  top: 1rem;
+  right: 1rem;
+}
+
+/* Global logo styling */
+.logo {
+  height: 100%;
+  width: 100%;
+}
+
+/* Multi-column layouts */
+.slidev-layout.two-cols,
+.slidev-layout.two-cols-header,
+.slidev-layout.three-cols,
+.slidev-layout.three-cols-header {
+  column-gap: 2rem;
+}
+
+.slidev-layout.three-cols .col-left,
+.slidev-layout.three-cols .col-middle,
+.slidev-layout.three-cols .col-right,
+.slidev-layout.three-cols-header .col-left,
+.slidev-layout.three-cols-header .col-middle,
+.slidev-layout.three-cols-header .col-right {
+  flex: 1;
+}
+
+/* Shared styles for cover and intro layouts */
+/* .slidev-layout.cover,
+.slidev-layout.intro {
+  height: 100%;
+
+  h1 {
+    font-size: 3.75rem;
+    line-height: 5rem;
+  }
+
+  h1 + p {
+    margin-top: -0.5rem;
+    opacity: 0.5;
+    margin-bottom: 1rem;
+  }
+
+  p + h2,
+  ul + h2,
+  table + h2 {
+    margin-top: 2.5rem;
+  }
+} */

package/uno.config.ts

@@ -0,0 +1,47 @@
+import { defineConfig } from 'unocss'
+import fs from 'fs'
+import { globSync } from 'glob'
+
+// Function to scan files for icon patterns
+function scanFilesForIcons() {
+    try {
+        // Find all markdown files in the project directory and all subdirectories
+        const slideFiles = globSync('**/*.md', { absolute: true })
+        
+        // Pattern to match icon references like ~i-vscode-icons:file-type-ansible~
+        const iconPattern = /~(i-[a-zA-Z0-9-]+:[a-zA-Z0-9-]+)~/g
+        
+        // Set to store unique icons
+        const icons = new Set(['i-vscode-icons:file-type-docker']) // Include default icon
+        
+        // Scan each file for icon patterns
+        slideFiles.forEach((file: string) => {
+            try {
+                const content = fs.readFileSync(file, 'utf-8')
+                let match
+                while ((match = iconPattern.exec(content)) !== null) {
+                    if (match[1]) {
+                        icons.add(match[1])
+                    }
+                }
+            } catch (err) {
+                console.warn(`Error reading file ${file}:`, err)
+            }
+        })
+        
+        return Array.from(icons)
+    } catch (err) {
+        console.warn('Error scanning files for icons:', err)
+        return ['i-vscode-icons:file-type-docker'] // Fallback to default icon
+    }
+}
+
+export default defineConfig({
+    safelist: [
+        // Static icons that should always be included
+        'i-vscode-icons:file-type-docker',
+        
+        // Dynamically scan for icons in slide files
+        () => scanFilesForIcons()
+    ],
+})

package/utils/headerContentSplitter.ts

@@ -0,0 +1,48 @@
+import { ref, Ref, onMounted } from 'vue'
+
+/**
+ * Utility to split slide content into header and main content sections
+ * It extracts the first H1 from content and moves it to a separate header element
+ * 
+ * @param headerRef Ref to the header element where H1 will be moved
+ * @param contentRef Ref to the content element containing the original content
+ * @returns An object with setup function
+ */
+export function useHeaderContentSplit(headerRef: Ref<HTMLElement | null>, contentRef: Ref<HTMLElement | null>) {
+  // Function to move H1 to header section
+  const moveH1ToHeader = () => {
+    if (!headerRef.value || !contentRef.value) return
+    
+    // Find the first H1 in content
+    const firstH1 = contentRef.value.querySelector('h1')
+    if (firstH1 && headerRef.value.children.length === 0) {
+      // Move it to the header
+      headerRef.value.appendChild(firstH1)
+    }
+  }
+
+  const setupHeaderSplit = () => {
+    // Initial move when component is mounted
+    moveH1ToHeader()
+    
+    // Also set up a MutationObserver to handle dynamically loaded content
+    const observer = new MutationObserver(() => {
+      // If header is empty and there's an H1 in content, move it
+      if (headerRef.value && headerRef.value.children.length === 0) {
+        moveH1ToHeader()
+      }
+    })
+    
+    if (contentRef.value) {
+      observer.observe(contentRef.value, { childList: true, subtree: true })
+    }
+    
+    return {
+      destroy: () => observer.disconnect()
+    }
+  }
+
+  return {
+    setupHeaderSplit
+  }
+}

package/utils/layoutHelper.ts

@@ -0,0 +1,172 @@
+import type { CSSProperties } from "vue";
+
+/**
+ * Simple function to resolve image paths
+ * Works for URLs, absolute paths, and relative paths
+ */
+export function getImageUrl(path?: string): string {
+  if (!path) return "";
+
+  // If it's a color, don't process it
+  if (path.startsWith("#") || path.startsWith("rgb")) return path;
+
+  // If it's a full URL, use it as is
+  if (path.match(/^https?:\/\//)) return path;
+
+  // If it's a root-relative path (starts with /), use it as is
+  if (path.startsWith("/")) return path;
+
+  // Otherwise, treat as relative path and add leading slash
+  return `/${path}`;
+}
+
+/**
+ * Generate background style object for image or color
+ * @param imagePath - Path to the image or color string
+ * @param scale - Optional scale factor for the image (e.g., '50%', '0.5')
+ * @param align - Optional alignment for the image (e.g., 'top', 'bottom', 'left', 'right')
+ */
+export function getImageStyle(
+  imagePath?: string,
+  scale?: string,
+  align?: string
+): CSSProperties {
+  if (!imagePath) return {};
+
+  // If it's a color, set as background color
+  if (imagePath.startsWith("#") || imagePath.startsWith("rgb")) {
+    return {
+      backgroundColor: imagePath,
+    };
+  }
+
+  // Parse alignment
+  let backgroundPosition = "center";
+  if (align) {
+    // Handle single-direction alignments
+    if (["top", "bottom", "left", "right"].includes(align)) {
+      backgroundPosition = align;
+    }
+    // Handle combined alignments (e.g., 'top left', 'bottom right')
+    else if (align.includes(" ")) {
+      backgroundPosition = align;
+    }
+  }
+
+  // Parse scale and convert to background-size
+  let backgroundSize = "contain"; // Default to 'contain' to prevent cropping
+  if (scale) {
+    // If scale is a percentage string
+    if (scale.endsWith("%")) {
+      // For 100%, use 'contain' to show the full image without cropping
+      if (scale === "100%") {
+        backgroundSize = "contain";
+      } else {
+        backgroundSize = scale;
+      }
+    }
+    // If scale is a decimal number
+    else if (!isNaN(Number(scale))) {
+      const scaleNum = Number(scale);
+      // For scale = 1.0 (100%), use 'contain' to show the full image
+      if (scaleNum === 1.0) {
+        backgroundSize = "contain";
+      } else {
+        backgroundSize = `${scaleNum * 100}%`;
+      }
+    }
+    // If scale is 'contain' or 'cover'
+    else if (["contain", "cover", "auto"].includes(scale)) {
+      backgroundSize = scale;
+    }
+  }
+
+  // Return combined style
+  return {
+    backgroundImage: `url("${getImageUrl(imagePath)}")`,
+    backgroundPosition,
+    backgroundSize,
+    backgroundRepeat: "no-repeat",
+  };
+}
+
+/**
+ * Generate style for a foreground image element (not background)
+ * @param scale - Optional scale factor for the image (e.g., '50%', '0.5')
+ * @param align - Optional alignment for the image container (e.g., 'center', 'flex-start', 'flex-end')
+ */
+export function getForegroundImageStyle(
+  scale?: string,
+  align?: string
+): CSSProperties {
+  const style: CSSProperties = {
+    maxWidth: "100%",
+    maxHeight: "100%",
+    objectFit: "contain",
+  };
+
+  // Apply scaling if specified
+  if (scale) {
+    // If scale is a percentage string
+    if (scale.endsWith("%")) {
+      style.width = scale;
+    }
+    // If scale is a decimal number
+    else if (!isNaN(Number(scale))) {
+      const scaleNum = Number(scale);
+      style.width = `${scaleNum * 100}%`;
+    }
+  }
+
+  return style;
+}
+
+/**
+ * Generate container style for image alignment
+ * @param align - Alignment direction ('center', 'top', 'bottom', 'left', 'right', etc)
+ */
+export function getImageContainerStyle(align?: string): CSSProperties {
+  const style: CSSProperties = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100%",
+    width: "100%",
+    overflow: "hidden",
+  };
+
+  if (align) {
+    switch (align) {
+      case "top":
+        style.alignItems = "flex-start";
+        break;
+      case "bottom":
+        style.alignItems = "flex-end";
+        break;
+      case "left":
+        style.justifyContent = "flex-start";
+        break;
+      case "right":
+        style.justifyContent = "flex-end";
+        break;
+      case "top-left":
+        style.alignItems = "flex-start";
+        style.justifyContent = "flex-start";
+        break;
+      case "top-right":
+        style.alignItems = "flex-start";
+        style.justifyContent = "flex-end";
+        break;
+      case "bottom-left":
+        style.alignItems = "flex-end";
+        style.justifyContent = "flex-start";
+        break;
+      case "bottom-right":
+        style.alignItems = "flex-end";
+        style.justifyContent = "flex-end";
+        break;
+    }
+  }
+
+  return style;
+}