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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Helse Sør-Øst
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,622 @@
+# Slidev Theme Sykehuspartner
+
+A professional Slidev theme for creating presentations with a consistent Sykehuspartner brand identity.
+
+## Features
+
+- 18 customizable layouts for various presentation needs
+- Built-in syntax highlighting for 30+ programming languages
+- VSCode icon support with automatic scanning
+- Dark mode support across all layouts
+- Responsive design with configurable alignment and spacing
+
+## Installation
+
+```bash
+npm install @sp-days-framework/slidev-theme-sykehuspartner
+```
+
+## Quick Start
+
+```md
+---
+theme: "@sp-days-framework/slidev-theme-sykehuspartner"
+layout: cover
+---
+# Your Presentation Title
+
+## Subtitle
+```
+
+- Add the theme to your slide deck's frontmatter
+- Choose from 18 available layouts
+- Customize with layout-specific parameters
+
+## Usage
+
+### Global Features
+
+**Syntax Highlighting**: The theme includes syntax highlighting for 30+ programming languages including C#, Python, JavaScript, TypeScript, Docker, Terraform, SQL, and more.
+
+**Icon Support**: Use VSCode icons in your slides with the `~i-vscode-icons:icon-name~` syntax. The theme automatically scans your markdown files and includes the icons you use.
+
+**Dark Mode**: All layouts support automatic dark/light mode switching.
+
+### Available Layouts
+
+The theme provides 18 specialized layouts for different presentation needs:
+
+- **[about-me](#about-me)** - Profile introduction slide with optional image
+- **[center](#center)** - Centered content with logo
+- **[cover](#cover)** - Title slide with banner
+- **[default](#default)** - Standard content slide with header extraction
+- **[end](#end)** - Closing slide with centered banner
+- **[fact](#fact)** - Emphasis slide for key facts
+- **[full](#full)** - Full-screen content without padding
+- **[image](#image)** - Background or foreground image slide
+- **[image-left](#image-left)** - Content with left-aligned image
+- **[image-right](#image-right)** - Content with right-aligned image
+- **[intro](#intro)** - Introduction slide with optional side image
+- **[quote](#quote)** - Quote display with attribution
+- **[section](#section)** - Section divider with optional image
+- **[statement](#statement)** - Bold statement slide
+- **[three-cols](#three-cols)** - Three-column layout
+- **[three-cols-header](#three-cols-header)** - Three columns with header
+- **[two-cols](#two-cols)** - Two-column layout
+- **[two-cols-header](#two-cols-header)** - Two columns with header
+
+### Layout Parameters
+
+Each layout supports specific configuration options through frontmatter parameters. Common parameters include:
+
+- `logo` - Controls logo visibility (varies by layout)
+- `textAlignment` - Content alignment: `'top'`, `'center'`, or `'bottom'`
+- `imageSrc` - Path to image files
+- `imageScale` - Image size adjustments
+- `imagePosition` - Image positioning options
+
+See individual layout documentation below for detailed parameter options.
+
+---
+
+## Layout Reference
+
+## about-me
+
+Profile introduction slide with image, contact information, and optional logo.
+
+**When to use**: Introduce a speaker or team member with professional details and contact information.
+
+### Parameters
+
+| Parameter       | Type      | Default       | Description                              |
+| --------------- | --------- | ------------- | ---------------------------------------- |
+| `imageSrc`      | `string`  | -             | Path to profile image                    |
+| `imageShape`    | `string`  | `'rectangle'` | Image shape: `'rectangle'` or `'circle'` |
+| `imageSize`     | `string`  | `'100%'`      | Image size as percentage or decimal      |
+| `imagePosition` | `string`  | `'left'`      | Image position: `'left'` or `'right'`    |
+| `name`          | `string`  | -             | Person's name                            |
+| `jobTitle`      | `string`  | -             | Job title                                |
+| `department`    | `string`  | -             | Department name                          |
+| `description`   | `string`  | -             | Brief description or bio                 |
+| `email`         | `string`  | -             | Email address                            |
+| `linkedin`      | `string`  | -             | LinkedIn profile URL or handle           |
+| `logo`          | `boolean` | `true`        | Show logo banner                         |
+
+### Example
+
+```md
+---
+layout: about-me
+imageSrc: ./profile.jpg
+imageShape: circle
+imagePosition: left
+name: John Doe
+jobTitle: Senior Developer
+department: IT Department
+email: john.doe@example.com
+linkedin: johndoe
+---
+```
+
+---
+
+## center
+
+Centered content with optional logo.
+
+**When to use**: Display content that benefits from centered alignment, such as key messages or simple statements.
+
+### Parameters
+
+| Parameter | Type      | Default | Description                   |
+| --------- | --------- | ------- | ----------------------------- |
+| `logo`    | `boolean` | `true`  | Show logo in top-right corner |
+
+### Example
+
+```md
+---
+layout: center
+---
+# Centered Title
+
+Centered content goes here.
+```
+
+---
+
+## cover
+
+Title slide with centered content and bottom banner.
+
+**When to use**: Opening slide for your presentation with main title and subtitle.
+
+### Parameters
+
+| Parameter | Type      | Default | Description           |
+| --------- | --------- | ------- | --------------------- |
+| `logo`    | `boolean` | `true`  | Show banner at bottom |
+
+### Example
+
+```md
+---
+layout: cover
+---
+# Presentation Title
+
+## Subtitle
+```
+
+---
+
+## default
+
+Standard content layout that automatically extracts the first heading to a header area.
+
+**When to use**: General-purpose content slides with a title and body content.
+
+### Parameters
+
+| Parameter       | Type      | Default    | Description                                           |
+| --------------- | --------- | ---------- | ----------------------------------------------------- |
+| `logo`          | `boolean` | `true`     | Show logo in top-right corner                         |
+| `textAlignment` | `string`  | `'center'` | Content alignment: `'top'`, `'center'`, or `'bottom'` |
+
+### Example
+
+```md
+---
+layout: default
+textAlignment: top
+---
+# Slide Title
+
+Content will appear below the title.
+```
+
+---
+
+## end
+
+Closing slide with centered banner and content.
+
+**When to use**: Final slide of your presentation with closing message or call-to-action.
+
+### Parameters
+
+| Parameter | Type      | Default | Description                  |
+| --------- | --------- | ------- | ---------------------------- |
+| `logo`    | `boolean` | `true`  | Show banner at bottom center |
+
+### Example
+
+```md
+---
+layout: end
+---
+# Thank You
+
+Questions?
+```
+
+---
+
+## fact
+
+Vertically centered content for emphasizing key facts.
+
+**When to use**: Highlight important statistics, metrics, or key takeaways.
+
+### Parameters
+
+| Parameter | Type      | Default | Description                   |
+| --------- | --------- | ------- | ----------------------------- |
+| `logo`    | `boolean` | `true`  | Show logo in top-right corner |
+
+### Example
+
+```md
+---
+layout: fact
+---
+# 95%
+
+User satisfaction rating
+```
+
+---
+
+## full
+
+Full-screen layout with no padding, logo optional.
+
+**When to use**: Custom full-screen content like diagrams, videos, or interactive elements.
+
+### Parameters
+
+| Parameter | Type      | Default | Description                   |
+| --------- | --------- | ------- | ----------------------------- |
+| `logo`    | `boolean` | `false` | Show logo in top-right corner |
+
+### Example
+
+```md
+---
+layout: full
+---
+
+<div style="height: 100%; background: gradient">
+  Custom full-screen content
+</div>
+```
+
+---
+
+## image
+
+Display an image as background or foreground with optional content overlay.
+
+**When to use**: Showcase images with or without overlaid text content.
+
+### Parameters
+
+| Parameter             | Type      | Default    | Description                                                           |
+| --------------------- | --------- | ---------- | --------------------------------------------------------------------- |
+| `imageSrc`            | `string`  | -          | Path to image                                                         |
+| `imageScale`          | `string`  | `'70%'`    | Image scale (foreground mode)                                         |
+| `imageAlign`          | `string`  | `'center'` | Image alignment: `'center'`, `'top'`, `'bottom'`, `'left'`, `'right'` |
+| `imageBackgroundMode` | `boolean` | `true`     | If `true`, image is background; if `false`, image is foreground       |
+| `logo`                | `boolean` | `false`    | Show logo in top-right corner                                         |
+
+### Example
+
+```md
+---
+layout: image
+imageSrc: ./background.jpg
+imageBackgroundMode: true
+---
+# Title on Image
+```
+
+---
+
+## image-left
+
+Split layout with image on the left, content on the right.
+
+**When to use**: Present visual content alongside explanatory text, with emphasis on the image.
+
+### Parameters
+
+| Parameter       | Type      | Default    | Description                                               |
+| --------------- | --------- | ---------- | --------------------------------------------------------- |
+| `imageSrc`      | `string`  | -          | Path to image                                             |
+| `imageScale`    | `string`  | `'100%'`   | Image scale percentage                                    |
+| `imageAlign`    | `string`  | `'center'` | Image vertical alignment: `'top'`, `'center'`, `'bottom'` |
+| `imageRatio`    | `string`  | `'50%'`    | Width ratio for image (remaining goes to content)         |
+| `logo`          | `boolean` | `true`     | Show logo in top-right corner                             |
+| `textAlignment` | `string`  | `'center'` | Content alignment: `'top'`, `'center'`, or `'bottom'`     |
+
+### Example
+
+```md
+---
+layout: image-left
+imageSrc: ./diagram.png
+imageRatio: 40%
+textAlignment: center
+---
+# Title
+
+Content appears on the right side.
+```
+
+---
+
+## image-right
+
+Split layout with content on the left, image on the right.
+
+**When to use**: Present visual content alongside explanatory text, with emphasis on the text.
+
+### Parameters
+
+| Parameter       | Type      | Default    | Description                                               |
+| --------------- | --------- | ---------- | --------------------------------------------------------- |
+| `imageSrc`      | `string`  | -          | Path to image                                             |
+| `imageScale`    | `string`  | `'100%'`   | Image scale percentage                                    |
+| `imageAlign`    | `string`  | `'center'` | Image vertical alignment: `'top'`, `'center'`, `'bottom'` |
+| `imageRatio`    | `string`  | `'50%'`    | Width ratio for image (remaining goes to content)         |
+| `logo`          | `boolean` | `false`    | Show logo in bottom-left corner                           |
+| `textAlignment` | `string`  | `'center'` | Content alignment: `'top'`, `'center'`, or `'bottom'`     |
+
+### Example
+
+```md
+---
+layout: image-right
+imageSrc: ./chart.png
+imageRatio: 45%
+---
+# Analysis
+
+Content appears on the left side.
+```
+
+---
+
+## intro
+
+Introduction slide with optional side image and banner.
+
+**When to use**: Start a new section or introduce a topic with supporting imagery.
+
+### Parameters
+
+| Parameter       | Type      | Default   | Description                             |
+| --------------- | --------- | --------- | --------------------------------------- |
+| `bannerEnabled` | `boolean` | `true`    | Show banner logo                        |
+| `imageSrc`      | `string`  | -         | Path to side image                      |
+| `imageSize`     | `string`  | `'100%'`  | Image size as percentage                |
+| `imagePosition` | `string`  | `'right'` | Image position: `'left'` or `'right'`   |
+| `imageRatio`    | `string`  | `'33%'`   | Width ratio for image                   |
+| `enableLogo`    | `boolean` | `true`    | Show banner (alias for `bannerEnabled`) |
+
+### Example
+
+```md
+---
+layout: intro
+imageSrc: ./intro-graphic.png
+imagePosition: right
+imageRatio: 40%
+---
+# Welcome
+
+Introduction to the presentation.
+```
+
+---
+
+## quote
+
+Display a quote with attribution.
+
+**When to use**: Feature an impactful quote or testimonial.
+
+### Parameters
+
+| Parameter | Type      | Default | Description                   |
+| --------- | --------- | ------- | ----------------------------- |
+| `logo`    | `boolean` | `false` | Show logo in top-right corner |
+
+### Example
+
+```md
+---
+layout: quote
+---
+# "The best way to predict the future is to create it."
+
+## Alan Kay
+### Computer Scientist
+```
+
+---
+
+## section
+
+Section divider with centered text and optional side image.
+
+**When to use**: Mark transitions between major sections of your presentation.
+
+### Parameters
+
+| Parameter   | Type      | Default | Description                          |
+| ----------- | --------- | ------- | ------------------------------------ |
+| `logo`      | `boolean` | `true`  | Show logo in top-right corner        |
+| `image`     | `string`  | -       | Path to side image (via frontmatter) |
+| `titleLine` | `boolean` | `true`  | Show decorative line under title     |
+
+### Example
+
+```md
+---
+layout: section
+image: ./section-image.png
+titleLine: true
+---
+# Section Title
+
+## Section subtitle
+```
+
+---
+
+## statement
+
+Bold, centered statement for emphasis.
+
+**When to use**: Emphasize a key message, mission statement, or core principle.
+
+### Parameters
+
+| Parameter | Type      | Default | Description                   |
+| --------- | --------- | ------- | ----------------------------- |
+| `logo`    | `boolean` | `true`  | Show logo in top-right corner |
+
+### Example
+
+```md
+---
+layout: statement
+---
+# Our Mission
+
+Delivering excellence in healthcare technology.
+```
+
+---
+
+## three-cols
+
+Three-column layout with optional logo.
+
+**When to use**: Compare three items or present information in three parallel streams.
+
+### Parameters
+
+| Parameter | Type      | Default | Description                   |
+| --------- | --------- | ------- | ----------------------------- |
+| `logo`    | `boolean` | `false` | Show logo in top-right corner |
+
+### Example
+
+```md
+---
+layout: three-cols
+---
+
+# Left Column
+
+Content for left
+
+::middle::
+
+# Middle Column
+
+Content for middle
+
+::right::
+
+# Right Column
+
+Content for right
+```
+
+---
+
+## three-cols-header
+
+Three-column layout with dedicated header section.
+
+**When to use**: Present three-way comparisons or parallel concepts with a shared title.
+
+### Parameters
+
+| Parameter       | Type      | Default    | Description                                                  |
+| --------------- | --------- | ---------- | ------------------------------------------------------------ |
+| `logo`          | `boolean` | `true`     | Show logo in top-right corner                                |
+| `textAlignment` | `string`  | `'center'` | Column content alignment: `'top'`, `'center'`, or `'bottom'` |
+
+### Example
+
+```md
+---
+layout: three-cols-header
+textAlignment: top
+---
+
+# Header Title
+
+::left::
+
+Left content
+
+::middle::
+
+Middle content
+
+::right::
+
+Right content
+```
+
+---
+
+## two-cols
+
+Two-column layout with optional logo.
+
+**When to use**: Compare two items or present complementary information side-by-side.
+
+### Parameters
+
+| Parameter | Type      | Default | Description                   |
+| --------- | --------- | ------- | ----------------------------- |
+| `logo`    | `boolean` | `false` | Show logo in top-right corner |
+
+### Example
+
+```md
+---
+layout: two-cols
+---
+
+# Left Column
+
+Content for left side
+
+::right::
+
+# Right Column
+
+Content for right side
+```
+
+---
+
+## two-cols-header
+
+Two-column layout with dedicated header section.
+
+**When to use**: Present two-way comparisons or parallel concepts with a shared title.
+
+### Parameters
+
+| Parameter       | Type      | Default    | Description                                                  |
+| --------------- | --------- | ---------- | ------------------------------------------------------------ |
+| `logo`          | `boolean` | `true`     | Show logo in top-right corner                                |
+| `textAlignment` | `string`  | `'center'` | Column content alignment: `'top'`, `'center'`, or `'bottom'` |
+
+### Example
+
+```md
+---
+layout: two-cols-header
+textAlignment: center
+---
+
+# Header Title
+
+::left::
+
+Left column content
+
+::right::
+
+Right column content
+```