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

package/docs/index.mdx

@@ -0,0 +1,94 @@
+---
+title: Sykehuspartner Slidev Theme
+hide_title: true
+sidebar_class_name: title-logo-sidebar-slidev
+sidebar_label: "SP Slidev Theme"
+sidebar_position: 0
+---
+
+import LogoSlidev from './logo-slidev.svg';
+
+<div align="center">
+  <div style={{ display: 'flex', justifyContent: 'center', margin: '1rem' }}>
+    <LogoSlidev width="110" height="110"/>
+  </div>
+  <div align="center">
+    # Sykehuspartner Slidev Theme
+  </div>
+  <div align="center">
+    <p>
+      *Create professional presentations using Sykehuspartner theme for Slidev!*
+    </p>
+    <h4>
+      <a href="./sykehuspartner-theme/install">🔧 Setup</a> · 
+      <a href="https://www.npmjs.com/package/@sp-days-framework/slidev-theme-sykehuspartner">📦 NPM Package</a> · 
+      <a href="https://github.com/helse-sorost/sp-days-framework">💻 Source Code</a>
+    </h4>
+  </div>
+</div>
+---
+
+## Features
+
+- **18 Professional Layouts** - From cover slides to multi-column content, image layouts, and special-purpose slides
+- **Consistent Branding** - Sykehuspartner colors, logos, and styling throughout
+- **Dark Mode Support** - Automatic light/dark theme switching with optimized colors
+- **Syntax Highlighting** - Support for 30+ programming languages powered by Shiki
+- **VSCode Icons** - Built-in icon support for technical content with automatic scanning
+- **Responsive Design** - Looks great on any screen size
+
+:::tip Related Packages
+Use with the **Slidev Integration** plugin to seamlessly embed your presentations in Docusaurus sites.
+:::
+
+## Getting Started
+
+Configure the theme and start creating slides:
+
+```markdown title="slidev/presentation.md"
+---
+theme: "@sp-days-framework/slidev-theme-sykehuspartner"
+title: My Presentation
+layout: cover
+---
+
+# My Presentation Title
+## Subtitle Goes Here
+
+---
+layout: default
+---
+
+# First Content Slide
+
+- Point 1
+- Point 2
+- Point 3
+```
+
+See [Install](./install.mdx) for installation and configuration.
+
+## Available Layouts
+
+The theme includes 18 specialized layouts for different presentation needs:
+
+| Layout | Use Case | Category |
+|--------|----------|----------|
+| [cover](./section/cover.mdx) | Title slide with banner | Section |
+| [intro](./section/intro.mdx) | Introduction with optional side image | Section |
+| [section](./section/section.mdx) | Section divider with optional image | Section |
+| [end](./section/end.mdx) | Closing slide with centered banner | Section |
+| [default](./content/default.mdx) | Standard content with header extraction | Content |
+| [center](./content/center.mdx) | Vertically centered content | Content |
+| [full](./content/full.mdx) | Full-screen with no padding | Content |
+| [two-cols](./multi-column/two-cols.mdx) | Two equal columns | Multi-Column |
+| [two-cols-header](./multi-column/two-cols-header.mdx) | Two columns with header | Multi-Column |
+| [three-cols](./multi-column/three-cols.mdx) | Three equal columns | Multi-Column |
+| [three-cols-header](./multi-column/three-cols-header.mdx) | Three columns with header | Multi-Column |
+| [image](./image/image.mdx) | Background or foreground image | Image |
+| [image-left](./image/image-left.mdx) | Content with left-aligned image | Image |
+| [image-right](./image/image-right.mdx) | Content with right-aligned image | Image |
+| [fact](./special/fact.mdx) | Emphasize key facts | Special |
+| [statement](./special/statement.mdx) | Bold statement slide | Special |
+| [quote](./special/quote.mdx) | Quote with attribution | Special |
+| [about-me](./special/about-me.mdx) | Profile introduction | Special |

package/docs/install.mdx

@@ -0,0 +1,105 @@
+---
+sidebar_position: 1.1
+sidebar_custom_props:
+  section: "Setup"
+  section_position: 1
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+# Installation
+
+:::tip[Already Included]
+If you're using `@sp-days-framework/create-sp-days`, the Sykehuspartner Slidev Theme is already installed and configured. You can start creating presentations right away!
+:::
+
+Install the theme using your preferred package manager:
+
+<Tabs>
+  <TabItem value="npm" label="npm" default>
+    ```bash
+    npm install @sp-days-framework/slidev-theme-sykehuspartner
+    ```
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+    ```bash
+    yarn add @sp-days-framework/slidev-theme-sykehuspartner
+    ```
+  </TabItem>
+</Tabs>
+
+Configure the theme in your presentation's frontmatter:
+
+```markdown title="slidev/presentation.md"
+---
+theme: "@sp-days-framework/slidev-theme-sykehuspartner"
+title: My Presentation
+layout: cover
+---
+
+# My Presentation Title
+## Subtitle Goes Here
+
+---
+
+# First Content Slide
+Your content here...
+```
+
+The theme is now active and all 18 layouts are available.
+
+## Configuration
+
+### Basic Theme Setup
+
+Configure the theme in your presentation's frontmatter:
+
+```markdown title="slidev/presentation.md"
+---
+theme: "@sp-days-framework/slidev-theme-sykehuspartner"
+title: My Presentation
+layout: cover
+---
+
+# My Presentation
+## Subtitle
+```
+
+### Using with Docusaurus Plugin
+
+When using with `@sp-days-framework/docusaurus-plugin-slidev`, set the theme globally or per-presentation:
+
+**Global Theme:**
+
+```js title="docusaurus.config.js"
+module.exports = {
+  plugins: [
+    [
+      "@sp-days-framework/docusaurus-plugin-slidev",
+      {
+        theme: "@sp-days-framework/slidev-theme-sykehuspartner",
+      },
+    ],
+  ],
+};
+```
+
+**Per-Presentation Override:**
+
+```markdown title="slidev/my-presentation.md"
+---
+theme: "@sp-days-framework/slidev-theme-sykehuspartner"
+title: My Presentation
+---
+```
+
+See the Slidev Integration plugin documentation for information about integrating presentations into Docusaurus.
+
+### Running Development Server
+
+Run Slidev to preview your presentation with hot-reload:
+
+```bash
+npm run slidev ./slidev/presentation.md
+```

package/docs/logo-slidev.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
+	<defs>
+		<linearGradient id="SVGLbJVEdqe" x1="0%" x2="100%" y1="-8.889%" y2="100%">
+			<stop offset="0%" stop-color="#3acbd4" />
+			<stop offset="100%" stop-color="#2988b1" />
+		</linearGradient>
+		<linearGradient id="SVGjd5pfbnr" x1="-10.556%" x2="84.536%" y1="-12.222%" y2="100%">
+			<stop offset="0%" stop-color="#95f0cf" />
+			<stop offset="100%" stop-color="#3ab9d5" />
+		</linearGradient>
+		<linearGradient id="SVGMdS59dLY" x1="-.132%" x2="12.361%" y1="-8.073%" y2="104.495%">
+			<stop offset="0%" stop-color="#ffeb83" />
+			<stop offset=".01%" stop-color="#ffeb83" />
+			<stop offset="8.333%" stop-color="#ffdd35" />
+			<stop offset="60.177%" stop-color="#ffbb13" />
+			<stop offset="100%" stop-color="#ffa800" />
+		</linearGradient>
+	</defs>
+	<path fill="url(#SVGLbJVEdqe)" d="M71.385 34.462h147.692c20.392 0 36.923 16.53 36.923 36.923v147.692C256 239.469 239.469 256 219.077 256H71.385c-20.392 0-36.923-16.531-36.923-36.923V71.385c0-20.392 16.53-36.923 36.923-36.923" />
+	<path fill="url(#SVGjd5pfbnr)" d="M110.77 0c61.175 0 110.768 49.593 110.768 110.77c0 61.175-49.593 110.768-110.769 110.768S0 171.945 0 110.77S49.593 0 110.77 0" />
+	<path fill="url(#SVGMdS59dLY)" d="M138.159 157.354c-2.897-10.812-4.346-16.218-2.912-19.951a12.3 12.3 0 0 1 7.079-7.08c3.733-1.433 9.14.016 19.95 2.913l53.74 14.399c10.811 2.897 16.217 4.345 18.734 7.453a12.3 12.3 0 0 1 2.59 9.671c-.625 3.95-4.582 7.907-12.497 15.822l-39.34 39.34c-7.914 7.914-11.871 11.871-15.821 12.497a12.3 12.3 0 0 1-9.67-2.592c-3.109-2.516-4.557-7.922-7.454-18.734z" />
+</svg>

package/docs/multi-column/_category_.yml

@@ -0,0 +1,5 @@
+position: 3.3
+label: "Multi-Column"
+customProps:
+  section: "Layouts"
+  section_position: 3

package/docs/multi-column/three-cols-header.mdx

@@ -0,0 +1,49 @@
+---
+title: Three Cols Header
+description: Three columns with spanning header
+---
+
+# Three Cols Header Layout
+
+Three equal columns with a header spanning all three.
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `logo` | boolean | `true` | Show/hide logo |
+| `textAlignment` | string | `'center'` | Content vertical alignment |
+
+## Basic Example
+
+```markdown
+---
+layout: three-cols-header
+---
+
+# DevOps Pipeline Stages
+
+::left::
+
+## Build
+- Compile code
+- Run tests
+- Security scan
+- Create artifacts
+
+::middle::
+
+## Deploy
+- Container build
+- Push to registry
+- Update services
+- Health checks
+
+::right::
+
+## Monitor
+- Metrics collection
+- Log aggregation
+- Alerting
+- Dashboards
+```

package/docs/multi-column/three-cols.mdx

@@ -0,0 +1,47 @@
+---
+title: Three Cols
+description: Three equal-width columns
+---
+
+# Three Cols Layout
+
+Organize content across three equal columns.
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `logo` | boolean | `false` | Show/hide logo |
+
+## Basic Example
+
+```markdown
+---
+layout: three-cols
+---
+
+# Development
+
+- Local Docker
+- Hot reload
+- Debug mode
+- Test data
+
+::middle::
+
+# Staging
+
+- Integration tests
+- UAT environment
+- Performance tests
+- Security scans
+
+::right::
+
+# Production
+
+- Auto-scaling
+- Monitoring
+- Logging
+- Backups
+```

package/docs/multi-column/two-cols-header.mdx

@@ -0,0 +1,43 @@
+---
+title: Two Cols Header
+description: Two columns with spanning header
+---
+
+# Two Cols Header Layout
+
+Two equal columns with a header that spans both columns.
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `logo` | boolean | `true` | Show/hide logo |
+| `textAlignment` | string | `'center'` | Content vertical alignment |
+
+## Basic Example
+
+```markdown
+---
+layout: two-cols-header
+---
+
+# Deployment Comparison
+
+::left::
+
+## Manual Process
+- SSH into servers
+- Copy files manually
+- Restart services
+- Hope for the best
+- Rollback is hard
+
+::right::
+
+## Automated CI/CD
+- Git push triggers pipeline
+- Automated tests
+- Container builds
+- Zero-downtime deploy
+- Easy rollback
+```

package/docs/multi-column/two-cols.mdx

@@ -0,0 +1,38 @@
+---
+title: Two Cols
+description: Two equal-width columns
+---
+
+# Two Cols Layout
+
+Split content into two equal columns for comparisons, lists, or parallel information.
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `logo` | boolean | `false` | Show/hide logo |
+
+## Basic Example
+
+```markdown
+---
+layout: two-cols
+---
+
+# Traditional VMs
+
+- Heavy resource usage
+- Slow boot times
+- OS overhead
+- Complex management
+
+::right::
+
+# Containers
+
+- Lightweight
+- Fast startup
+- Shared OS kernel
+- Simple orchestration
+```

package/docs/section/_category_.yml

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

package/docs/section/cover.mdx

@@ -0,0 +1,43 @@
+---
+title: Cover
+description: Title slide layout with banner for starting presentations
+---
+
+# Cover Layout
+
+The `cover` layout is designed for the title slide of your presentation. It features centered content with the Sykehuspartner banner at the bottom.
+
+## When to Use
+
+- First slide of your presentation
+- Major presentation milestones
+- Conference or workshop title slides
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `logo` | boolean | `true` | Show/hide the banner at the bottom |
+
+## Basic Example
+
+```markdown
+---
+layout: cover
+---
+
+# Docker Fundamentals
+## A Hands-on Workshop
+```
+
+## With Banner Hidden
+
+```markdown
+---
+layout: cover
+logo: false
+---
+
+# Minimalist Title
+## No banner version
+```

package/docs/section/end.mdx

@@ -0,0 +1,33 @@
+---
+title: End
+description: Closing slide layout with centered banner
+---
+
+# End Layout
+
+The `end` layout is designed for the final slide of your presentation. It features centered content with the Sykehuspartner banner positioned in the center.
+
+## When to Use
+
+- Final slide of presentation
+- Thank you slides
+- Q&A slides
+- Closing remarks
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `logo` | boolean | `true` | Show/hide the banner |
+
+## Basic Example
+
+```markdown
+---
+layout: end
+---
+
+# Thank You!
+
+## Questions?
+```

package/docs/section/intro.mdx

@@ -0,0 +1,49 @@
+---
+title: Intro
+description: Introduction slide with optional side image
+---
+
+# Intro Layout
+
+The `intro` layout is designed for introduction slides with an optional side image and banner at the bottom.
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `imageSrc` | string | - | Image URL or path |
+| `imagePosition` | string | `'right'` | Position: `'left'` or `'right'` |
+| `imageRatio` | string | `'40%'` | Image width percentage |
+| `imageSize` | string | `'80%'` | Image scale |
+| `enableLogo` | boolean | `true` | Show/hide banner |
+
+## Basic Example
+
+```markdown
+---
+layout: intro
+imageSrc: /logo.png
+imagePosition: right
+imageRatio: 40%
+---
+
+# Module Introduction
+
+## What You'll Learn
+
+An overview of this section
+```
+
+## Without Image
+
+```markdown
+---
+layout: intro
+---
+
+# Welcome
+
+## Getting Started with Containers
+
+Your journey begins here
+```

package/docs/section/section.mdx

@@ -0,0 +1,41 @@
+---
+title: Section
+description: Section divider with logo and optional image
+---
+
+# Section Layout
+
+The `section` layout is used to divide your presentation into distinct sections, similar to chapter breaks.
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `image` | string | - | Optional background/side image |
+| `logo` | boolean | `true` | Show/hide logo |
+| `titleLine` | boolean | `true` | Show/hide decorative underline |
+
+## Basic Example
+
+```markdown
+---
+layout: section
+---
+
+# Module 2
+## Advanced Docker Concepts
+
+Networking, volumes, and multi-stage builds
+```
+
+## With Image
+
+```markdown
+---
+layout: section
+image: /docker-logo.png
+---
+
+# Container Orchestration
+## Scaling Your Applications
+```

package/docs/special/_category_.yml

@@ -0,0 +1,5 @@
+position: 3.5
+label: "Special Purpose"
+customProps:
+  section: "Layouts"
+  section_position: 3

package/docs/special/about-me.mdx

@@ -0,0 +1,95 @@
+---
+title: About Me
+description: Personal introduction and profile layout
+sidebar_custom_props:
+  section: "Layout and Features"
+  section_position: 2
+---
+
+# About Me Layout
+
+The `about-me` layout is designed for introducing speakers, instructors, or team members. It supports profile images and detailed information in a professional format.
+
+## When to Use
+
+- Speaker introductions
+- Instructor profiles
+- Team member presentations
+- Personal bio slides
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `name` | string | - | Person's full name |
+| `jobTitle` | string | - | Job title or role |
+| `department` | string | - | Department or team (optional) |
+| `description` | string | - | Brief bio or description |
+| `email` | string | - | Email address (optional) |
+| `linkedin` | string | - | LinkedIn username (optional) |
+| `imageSrc` | string | - | Profile photo URL |
+| `imageShape` | string | `'rectangle'` | Shape: `'circle'` or `'rectangle'` |
+| `imageSize` | string | `'100%'` | Image size percentage |
+| `imagePosition` | string | `'right'` | Position: `'left'` or `'right'` |
+| `logo` | boolean | `false` | Show/hide logo |
+
+## Basic Example (Image Right)
+
+```markdown
+---
+layout: about-me
+name: Jane Developer
+jobTitle: "Senior DevOps Engineer"
+department: "Cloud Platform Team"
+description: "Specialist in container technologies with 10 years of experience in cloud-native solutions"
+email: "jane.developer@example.com"
+linkedin: "janedev"
+imageSrc: /jane-profile.jpg
+imageShape: circle
+imagePosition: right
+---
+```
+
+## Image on Left
+
+```markdown
+---
+layout: about-me
+name: John Smith
+jobTitle: "Docker Expert"
+department: "Infrastructure Team"
+description: "Passionate about automation and infrastructure as code"
+email: "john.smith@example.com"
+imageSrc: /john-profile.jpg
+imageShape: circle
+imagePosition: left
+---
+```
+
+## Without Image
+
+```markdown
+---
+layout: about-me
+name: Alex Johnson
+jobTitle: "Kubernetes Architect"
+description: "Cloud native enthusiast and open source contributor"
+email: "alex@example.com"
+linkedin: "alexj"
+---
+```
+
+## Rectangle Image
+
+```markdown
+---
+layout: about-me
+name: Maria Garcia
+jobTitle: "DevOps Lead"
+description: "Leading teams to adopt containerization and modern deployment practices"
+imageSrc: /maria.jpg
+imageShape: rectangle
+imageSize: 85%
+imagePosition: left
+---
+```