@sp-days-framework/slidev-theme-sykehuspartner 1.0.4 → 1.1.0-beta2

package/docs/advanced-configuration.mdx

@@ -0,0 +1,81 @@
+---
+sidebar_position: 1.2
+sidebar_custom_props:
+  section: "Setup"
+  section_position: 1
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+# Advanced Configuration
+
+## Common Layout Parameters
+
+Most layouts support these common parameters:
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `logo` | boolean | varies | Show/hide the logo |
+| `textAlignment` | string | `'center'` | Vertical alignment: `'top'`, `'center'`, `'bottom'` |
+
+## Image Configuration Parameters
+
+Layouts with images support:
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `imageSrc` | string | - | Image URL or path |
+| `imageRatio` | string | `'50%'` | Image width percentage |
+| `imageScale` | string | `'100%'` | Image size within container |
+| `imageAlign` | string | `'center'` | Image alignment |
+| `imagePosition` | string | varies | Position: `'left'` or `'right'` |
+| `imageBackgroundMode` | boolean | varies | Background vs foreground mode |
+
+## Global Theme Configuration
+
+Configure theme-wide settings in your presentation frontmatter:
+
+```markdown title="slidev/presentation.md"
+---
+theme: "@sp-days-framework/slidev-theme-sykehuspartner"
+title: My Presentation
+highlighter: shiki
+lineNumbers: true
+drawings:
+  persist: false
+transition: slide-left
+---
+```
+
+### Available Global Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `highlighter` | string | `'shiki'` | Code highlighter: `'shiki'` or `'prism'` |
+| `lineNumbers` | boolean | `false` | Show line numbers in code blocks |
+| `drawings` | object | - | Drawing/annotation settings |
+| `transition` | string | `'fade'` | Slide transition effect |
+| `colorSchema` | string | `'auto'` | Color scheme: `'auto'`, `'dark'`, `'light'` |
+
+See [Slidev configuration](https://sli.dev/custom/#frontmatter-configures) for all options.
+
+## Custom Styling
+
+Override theme styles with custom CSS:
+
+```markdown title="slidev/presentation.md"
+---
+theme: "@sp-days-framework/slidev-theme-sykehuspartner"
+---
+
+<style>
+.slidev-layout.cover {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+h1 {
+  font-size: 3rem !important;
+}
+</style>
+```

package/docs/changelog.mdx

@@ -0,0 +1,63 @@
+---
+sidebar_position: 4
+sidebar_label: "Change Logs"
+toc_max_heading_level: 2
+sidebar_custom_props:
+  section: "Releases"
+  section_position: 4
+---
+
+# Changelog
+
+## `@sp-days-framework/slidev-theme-sykehuspartner`
+
+[![npm version](https://img.shields.io/npm/v/@sp-days-framework/slidev-theme-sykehuspartner?logo=nodedotjs)](https://www.npmjs.com/package/@sp-days-framework/slidev-theme-sykehuspartner)
+
+:::note
+All packages within `@sp-days-framework` use the same version number. In some cases, a package might just be "bumped" to match the rest without any functional changes.
+:::
+
+---
+
+## Version 1.1.0-beta2 ![Sync](https://img.shields.io/badge/sync-version--bump-lightgrey)
+
+Version bump to match other packages in the framework with minor documentation improvements
+
+---
+
+## Version 1.1.0-beta1 ![Sync](https://img.shields.io/badge/sync-version--bump-lightgrey)
+
+Version bump to match other packages in the framework. Documentation is now bundled with the npm package for easier reference during development.
+
+---
+
+## Version 1.0.4 ![Sync](https://img.shields.io/badge/sync-version--bump-lightgrey)
+
+Version bump to match other packages in the framework
+
+---
+
+## Version 1.0.3 ![Sync](https://img.shields.io/badge/sync-version--bump-lightgrey)
+
+Version bump to match other packages in the framework
+
+---
+
+## Version 1.0.2 ![Sync](https://img.shields.io/badge/sync-version--bump-lightgrey)
+
+Version bump to match other packages in the framework
+
+---
+
+## Version 1.0.0 ![Release](https://img.shields.io/badge/release-production-blue)
+
+Initial release of the Slidev Theme Sykehuspartner
+
+<details>
+<summary><strong>Details</strong> (2025 November 24)</summary>
+
+### New Features
+
+- Initial release with Sykehuspartner theme for Slidev
+
+</details>

package/docs/code-block-icons.mdx

@@ -0,0 +1,93 @@
+---
+title: "Code Block Icons"
+sidebar_position: 2.1
+sidebar_custom_props:
+  section: "Features"
+  section_position: 2
+---
+
+# Code Block Icons
+
+Add visual context to your code blocks with file-type icons from the VSCode Icons collection.
+
+## Overview
+
+The theme includes automatic icon support for code blocks using UnoCSS and Iconify. Icons are scanned from your markdown files and automatically included in the build.
+
+## Basic Usage
+
+Add icons to code blocks using the tilde syntax in the code block label:
+
+````markdown
+```docker [dockerfile ~i-vscode-icons:file-type-docker~]
+FROM python:3.13
+```
+
+```python [hello.py ~i-vscode-icons:file-type-python~]
+print('Hello, world!')
+```
+
+```yaml [play.yml ~i-vscode-icons:file-type-ansible~]
+- name: Update web servers
+  hosts: webservers
+  remote_user: root
+```
+````
+
+## Common VSCode Icons
+
+| Icon Syntax | Description |
+|-------------|-------------|
+| `~i-vscode-icons:file-type-docker~` | Docker |
+| `~i-vscode-icons:file-type-python~` | Python |
+| `~i-vscode-icons:file-type-typescript-official~` | TypeScript |
+| `~i-vscode-icons:file-type-javascript-official~` | JavaScript |
+| `~i-vscode-icons:file-type-vue~` | Vue.js |
+| `~i-vscode-icons:file-type-react~` | React |
+| `~i-vscode-icons:file-type-kubernetes~` | Kubernetes |
+| `~i-vscode-icons:file-type-terraform~` | Terraform |
+| `~i-vscode-icons:file-type-yaml~` | YAML |
+| `~i-vscode-icons:file-type-json~` | JSON |
+| `~i-vscode-icons:file-type-markdown~` | Markdown |
+| `~i-vscode-icons:file-type-git~` | Git |
+
+## Finding More Icons
+
+Browse the full VSCode Icons collection at [icon-sets.iconify.design/vscode-icons](https://icon-sets.iconify.design/vscode-icons/).
+
+All icons follow the pattern: `~i-vscode-icons:file-type-{name}~`
+
+## How It Works
+
+The theme uses UnoCSS to automatically scan your markdown files for icon patterns and includes them in the build:
+
+1. During build, `uno.config.ts` scans all `.md` files in your project
+2. It extracts icon references matching the pattern `~i-vscode-icons:*~`
+3. Only the icons you use are included in the final bundle
+4. Icons are rendered inline with your code block labels
+
+This automatic scanning means you can use any VSCode icon without manual configuration!
+
+## Technical Details
+
+The icon scanning is configured in `uno.config.ts`:
+
+```typescript
+function scanFilesForIcons() {
+  const slideFiles = globSync('**/*.md', { absolute: true })
+  const iconPattern = /~(i-[a-zA-Z0-9-]+:[a-zA-Z0-9-]+)~/g
+  const icons = new Set()
+  
+  slideFiles.forEach((file: string) => {
+    const content = fs.readFileSync(file, 'utf-8')
+    let match
+    while ((match = iconPattern.exec(content)) !== null) {
+      icons.add(match[1])
+    }
+  })
+  
+  return Array.from(icons)
+}
+```
+
+This ensures optimal bundle size by including only the icons you actually use in your presentation.

package/docs/code-highlighting.mdx

@@ -0,0 +1,88 @@
+---
+title: "Code Highlighting"
+sidebar_position: 2.0
+sidebar_custom_props:
+  section: "Features"
+  section_position: 2
+---
+
+# Code Highlighting
+
+The theme includes built-in syntax highlighting for 30+ programming languages powered by Shiki.
+
+## Supported Languages
+
+The theme supports syntax highlighting for the following languages:
+
+- **Web**: HTML, CSS, JavaScript, TypeScript, JSX, TSX, Vue, MDX
+- **Backend**: Python, Java, C#, Go, Rust, Ruby, PHP
+- **DevOps**: Docker, Terraform, YAML, TOML, Shell Script, PowerShell
+- **Data**: SQL, JSON, JSONC, CSV, GraphQL
+- **Documentation**: Markdown, LaTeX, XML
+- **Configuration**: NGINX, INI, .env, Git commit/rebase, CODEOWNERS
+- **Other**: Lua, HCL, SCSS, Sass
+
+## Basic Usage
+
+Use standard fenced code blocks with language identifiers:
+
+````markdown
+```python
+def hello_world():
+    print("Hello, Slidev!")
+```
+
+```javascript
+const greeting = "Hello, World!";
+console.log(greeting);
+```
+
+```bash
+docker run -d -p 8080:80 nginx
+```
+````
+
+## Line Highlighting
+
+Highlight specific lines to draw attention to important code:
+
+````markdown
+```javascript {2,4-6}
+const a = 1
+const b = 2  // highlighted
+const c = 3
+const d = 4  // highlighted
+const e = 5  // highlighted
+const f = 6  // highlighted
+```
+````
+
+## Theme Configuration
+
+The syntax highlighting uses different themes for light and dark modes:
+
+- **Dark mode**: One Dark Pro
+- **Light mode**: One Light
+
+These themes are configured in `setup/shiki.ts` and automatically switch based on the presentation mode.
+
+## Adding Custom Languages
+
+To add support for additional languages, modify `setup/shiki.ts`:
+
+```typescript
+export default defineShikiSetup((): ShikiSetupReturn => {
+  return {
+    themes: {
+      dark: "one-dark-pro",
+      light: "one-light",
+    },
+    langs: [
+      // Add your language here
+      "kotlin",
+      "swift",
+      // ... existing languages
+    ],
+  };
+});
+```

package/docs/content/_category_.yml

@@ -0,0 +1,5 @@
+position: 3.1
+label: "Content"
+customProps:
+  section: "Layouts"
+  section_position: 3

package/docs/content/center.mdx

@@ -0,0 +1,33 @@
+---
+title: Center
+description: Vertically and horizontally centered content layout
+---
+
+# Center Layout
+
+The `center` layout centers all content both vertically and horizontally on the slide. Perfect for emphasizing short, important messages.
+
+## When to Use
+
+- Emphasizing key points
+- Short important messages
+- Transition slides
+- Single concept slides
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `logo` | boolean | `true` | Show/hide the logo in top right |
+
+## Basic Example
+
+```markdown
+---
+layout: center
+---
+
+# Main Message
+
+Supporting text that reinforces the point
+```

package/docs/content/default.mdx

@@ -0,0 +1,59 @@
+---
+title: Default
+description: Standard content layout with automatic header extraction
+---
+
+# Default Layout
+
+The `default` layout is the most commonly used layout for regular content slides. It automatically extracts the first H1 as a header and includes a logo in the top right.
+
+## When to Use
+
+- Regular content slides
+- Bullet point lists
+- General information
+- Most standard slides
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `logo` | boolean | `true` | Show/hide the logo |
+| `textAlignment` | string | `'center'` | Vertical alignment: `'top'`, `'center'`, `'bottom'` |
+
+## Basic Example
+
+```markdown
+---
+layout: default
+---
+
+# Introduction to Docker
+
+Docker is a platform for developing and running applications in containers.
+
+## Key Benefits
+
+- Consistency across environments
+- Fast deployment
+- Resource efficiency
+- Isolation
+```
+
+## With Top Alignment
+
+```markdown
+---
+layout: default
+textAlignment: top
+---
+
+# Lots of Content
+
+When you have extensive content, align to top for better readability.
+
+- Point 1
+- Point 2
+- Point 3
+- (many more points)
+```

package/docs/content/full.mdx

@@ -0,0 +1,49 @@
+---
+title: Full
+description: Full-screen layout with no padding or logo
+---
+
+# Full Layout
+
+The `full` layout provides a completely blank canvas with no padding, margin, or logo. Perfect for custom content that needs maximum space.
+
+## When to Use
+
+- Custom HTML/CSS layouts
+- Full-screen graphics or visualizations
+- Interactive demos
+- Maximum creative control needed
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `logo` | boolean | `false` | Show/hide logo (default is hidden) |
+
+## Basic Example
+
+```markdown
+---
+layout: full
+---
+
+<div class="flex items-center justify-center h-full flex-col">
+  <h1 class="text-4xl font-bold mb-4">Full Screen</h1>
+  <p class="text-2xl">Complete creative freedom</p>
+</div>
+```
+
+## With Custom Styling
+
+```markdown
+---
+layout: full
+---
+
+<div class="h-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
+  <div class="text-white text-center">
+    <h1 class="text-6xl font-bold">Amazing</h1>
+    <p class="text-3xl mt-4">Custom Design</p>
+  </div>
+</div>
+```

package/docs/image/_category_.yml

@@ -0,0 +1,5 @@
+position: 3.4
+label: "Image"
+customProps:
+  section: "Layouts"
+  section_position: 3

package/docs/image/image-left.mdx

@@ -0,0 +1,37 @@
+---
+title: Image Left
+description: Image on left with content on right
+---
+
+# Image Left Layout
+
+Display an image on the left side with content on the right.
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `imageSrc` | string | - | Image URL or path |
+| `imageRatio` | string | `'50%'` | Image width percentage |
+| `imageScale` | string | `'100%'` | Image size within container |
+| `imageAlign` | string | `'center'` | Image alignment |
+| `logo` | boolean | `true` | Show/hide logo |
+| `textAlignment` | string | `'center'` | Content vertical alignment |
+
+## Basic Example
+
+```markdown
+---
+layout: image-left
+imageSrc: /screenshot.png
+imageRatio: 40%
+---
+
+# Feature Overview
+
+The image shows our new dashboard with:
+
+- Real-time metrics
+- Custom alerts
+- Team collaboration
+```

package/docs/image/image-right.mdx

@@ -0,0 +1,37 @@
+---
+title: Image Right
+description: Content on left with image on right
+---
+
+# Image Right Layout
+
+Display content on the left with an image on the right.
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `imageSrc` | string | - | Image URL or path |
+| `imageRatio` | string | `'50%'` | Image width percentage |
+| `imageScale` | string | `'100%'` | Image size within container |
+| `imageAlign` | string | `'center'` | Image alignment |
+| `logo` | boolean | `false` | Show/hide logo |
+| `textAlignment` | string | `'center'` | Content vertical alignment |
+
+## Basic Example
+
+```markdown
+---
+layout: image-right
+imageSrc: /code-example.png
+imageRatio: 45%
+---
+
+# Code Explanation
+
+This example demonstrates:
+
+- Dependency injection
+- Error handling
+- Async/await pattern
+```

package/docs/image/image.mdx

@@ -0,0 +1,56 @@
+---
+title: Image
+description: Full background or foreground image layout
+---
+
+# Image Layout
+
+The `image` layout displays images either as full-screen backgrounds or as foreground elements with content above.
+
+## When to Use
+
+- Full-screen visual slides
+- Explaining diagrams or screenshots
+- Visual breaks in presentation
+- Architectural overviews
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `imageSrc` | string | - | Image URL or path |
+| `imageScale` | string | `'70%'` | Image size (foreground mode) |
+| `imageAlign` | string | `'center'` | Image alignment |
+| `imageBackgroundMode` | boolean | `true` | Background (true) or foreground (false) |
+| `logo` | boolean | `false` | Show/hide logo |
+
+## Background Mode
+
+```markdown
+---
+layout: image
+imageSrc: https://example.com/hero.jpg
+imageBackgroundMode: true
+imageScale: 100%
+---
+
+# Text Over Image
+
+Content overlays the background
+```
+
+## Foreground Mode
+
+```markdown
+---
+layout: image
+imageSrc: /diagram.png
+imageBackgroundMode: false
+imageScale: 80%
+imageAlign: center
+---
+
+# Architecture Diagram
+
+Content above, image below
+```