@sp-days-framework/create-sp-days 1.0.3 → 1.1.0-beta1

package/templates/addon-resources/resources/slidev-integration/setup/index.mdx

@@ -1,200 +0,0 @@
----
-sidebar_position: 1
----
-
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-
-# Setup
-
-:::tip[Already Included]
-If you're using `@sp-days-framework/create-sp-days`, the Slidev Docusaurus Plugin is already installed and configured. You can start creating presentations right away!
-:::
-
-## Installation
-
-Install the Docusaurus plugin using your preferred package manager:
-
-<Tabs>
-  <TabItem value="npm" label="npm" default>
-    ```bash
-    npm install @sp-days-framework/docusaurus-plugin-slidev
-    ```
-  </TabItem>
-  <TabItem value="yarn" label="Yarn">
-    ```bash
-    yarn add @sp-days-framework/docusaurus-plugin-slidev
-    ```
-  </TabItem>
-</Tabs>
-
-Install Slidev dependencies:
-
-<Tabs>
-  <TabItem value="sp-theme" label="Sykehuspartner Theme" default>
-    ```bash
-    npm install @sp-days-framework/slidev-theme-sykehuspartner
-    ```
-
-    Includes everything needed for Sykehuspartner branded presentations.
-  </TabItem>
-  <TabItem value="default" label="Default Theme">
-    ```bash
-    npm install @slidev/theme-default
-    ```
-  </TabItem>
-</Tabs>
-
-Add the plugin to your `docusaurus.config.js`:
-
-```js title="docusaurus.config.js" {2,4}
-module.exports = {
-  staticDirectories: ["static"],
-  
-  plugins: ["@sp-days-framework/docusaurus-plugin-slidev"],
-};
-```
-
-:::note
-The `static` directory is required for serving built presentations.
-:::
-
-**Optional:** Add the `slidev` script for live preview during development:
-
-```json title="package.json" {4}
-{
-  "scripts": {
-    "docusaurus": "docusaurus",
-    "slidev": "slidev"
-  }
-}
-```
-
-## Configuration
-
-### Basic Plugin Setup
-
-The plugin works with default settings:
-
-```js title="docusaurus.config.js"
-module.exports = {
-  staticDirectories: ["static"],
-  plugins: ["@sp-days-framework/docusaurus-plugin-slidev"],
-};
-```
-
-### Plugin Options
-
-Customize the plugin behavior:
-
-```js title="docusaurus.config.js"
-module.exports = {
-  plugins: [
-    [
-      "@sp-days-framework/docusaurus-plugin-slidev",
-      {
-        sourceDir: "./slidev",
-        outputDir: "slides",
-        theme: "@sp-days-framework/slidev-theme-sykehuspartner",
-        overviewPath: "/presentations",
-      },
-    ],
-  ],
-};
-```
-
-Common options:
-
-| Option            | Type      | Default                               | Description                                                        |
-| ----------------- | --------- | ------------------------------------- | ------------------------------------------------------------------ |
-| `sourceDir`       | `string`  | `'./slidev'`                          | Directory to scan for Slidev markdown files                        |
-| `outputDir`       | `string`  | `'slides'`                            | Output directory inside `static/` for built presentations          |
-| `theme`           | `string`  | `undefined`                           | Global theme override for all presentations                        |
-| `overviewPath`    | `string`  | `'/slidev'`                           | URL path for the auto-generated overview page                      |
-| `overviewTitle`   | `string`  | `'Slidev Presentations'`              | Title for the overview page                                        |
-
-See [Advanced Configuration](./advanced-configuration.mdx) for all options.
-
-### Frontmatter Configuration
-
-Configure individual presentations:
-
-```markdown title="slidev/introduction.md"
----
-theme: "@sp-days-framework/slidev-theme-sykehuspartner"
-title: Introduction to Docker
-description: Learn containerization fundamentals
-author: Your Name
-layout: cover
----
-
-# Introduction to Docker
-## Containerization Made Simple
-```
-
-Common frontmatter options:
-
-| Option        | Description                                    |
-| ------------- | ---------------------------------------------- |
-| `theme`       | Theme to use (overrides plugin global theme)   |
-| `title`       | Presentation title                             |
-| `description` | Brief description for overview page            |
-| `author`      | Author name(s)                                 |
-| `layout`      | Layout for the slide (e.g., `cover`, `intro`)  |
-
-## Development vs Production Modes
-
-The plugin operates differently in development and production modes due to technical limitations:
-
-**Why no live preview in development?**
-- Slidev's CLI can only run one presentation at a time
-- Building presentations takes 5-10+ seconds each
-- Running builds during development would significantly slow down the dev server
-
-This design choice prioritizes developer experience by keeping the documentation development workflow fast.
-
-### Development Mode (`npm run start`)
-
-- Presentations are **not built** automatically
-- Overview page shows "Build Required" badges
-- Much faster startup time
-
-**Use for:** Active documentation development
-
-### Production Mode (`npm run build`)
-
-- All presentations are **automatically built**
-- Overview page shows interactive preview thumbnails
-- Presentations are fully functional
-
-**Use for:** Deploying to production or testing integration
-
-### Recommended Workflow
-
-<Tabs>
-  <TabItem value="slides" label="Working on Slides" default>
-    ```bash
-    # Live preview with hot-reload
-    npm run slidev ./slidev/your-presentation.md
-    ```
-    
-    Edit your presentation and see changes instantly.
-  </TabItem>
-  <TabItem value="verify" label="Verify Integration">
-    ```bash
-    # Build and serve to see final result
-    npm run build
-    npm run serve
-    ```
-    
-    Navigate to `/slidev` to see the overview page.
-  </TabItem>
-  <TabItem value="docs" label="Working on Docs">
-    ```bash
-    # Fast development server (slides not built)
-    npm run start
-    ```
-    
-    Focus on documentation without waiting for slide builds.
-  </TabItem>
-</Tabs>

package/templates/addon-resources/resources/sykehuspartner-theme/index.mdx

@@ -1,105 +0,0 @@
----
-title: Sykehuspartner Theme
-sidebar_class_name: sidebar-logo-slidev
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import ThemedImage from '@theme/ThemedImage';
-import { Iconify } from "@sp-days-framework/docusaurus-frontpage-collection";
-
-<div align="center">
-  <div className="resourceLandingPage">
-    <Iconify icon="logos:slidev" width="105px"/>
-    <Iconify icon="mdi:plus-thick" width="50px" iconColors={{ light: "#000000", dark: "#ffffff" }} />
-    <ThemedImage
-    style={{ width: '95px'}}
-    sources={{
-        light: useBaseUrl('/img/favicon-navbar/sorost-logo-light.svg'),
-        dark: useBaseUrl('/img/favicon-navbar/sorost-logo-dark.svg'),
-    }}
-    />
-  </div>
-  <div align="center">
-    # Sykehuspartner Slidev Theme
-  </div>
-  <div align="center">
-    <p>
-        *Create professional presentations using Sykehuspartner theme for Slidev!*
-    </p>
-    <h4>
-        [Setup](./setup/index.mdx)
-        ·
-        [NPM Package](https://www.npmjs.com/package/@sp-days-framework/slidev-theme-sykehuspartner)
-        ·
-        [Source Code](https://github.com/helse-sorost/sp-days-framework)
-    </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
-
-## 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 [Setup](./setup/index.mdx) for installation and configuration.
-
-## Available Layouts
-
-The theme includes 18 specialized layouts for different presentation needs:
-
-| Layout | Use Case | Category |
-|--------|----------|----------|
-| [cover](./layouts/section/cover.mdx) | Title slide with banner | Section |
-| [intro](./layouts/section/intro.mdx) | Introduction with optional side image | Section |
-| [section](./layouts/section/section.mdx) | Section divider with optional image | Section |
-| [end](./layouts/section/end.mdx) | Closing slide with centered banner | Section |
-| [default](./layouts/content/default.mdx) | Standard content with header extraction | Content |
-| [center](./layouts/content/center.mdx) | Vertically centered content | Content |
-| [full](./layouts/content/full.mdx) | Full-screen with no padding | Content |
-| [two-cols](./layouts/multi-column/two-cols.mdx) | Two equal columns | Multi-Column |
-| [two-cols-header](./layouts/multi-column/two-cols-header.mdx) | Two columns with header | Multi-Column |
-| [three-cols](./layouts/multi-column/three-cols.mdx) | Three equal columns | Multi-Column |
-| [three-cols-header](./layouts/multi-column/three-cols-header.mdx) | Three columns with header | Multi-Column |
-| [image](./layouts/image/image.mdx) | Background or foreground image | Image |
-| [image-left](./layouts/image/image-left.mdx) | Content with left-aligned image | Image |
-| [image-right](./layouts/image/image-right.mdx) | Content with right-aligned image | Image |
-| [fact](./layouts/special/fact.mdx) | Emphasize key facts | Special |
-| [statement](./layouts/special/statement.mdx) | Bold statement slide | Special |
-| [quote](./layouts/special/quote.mdx) | Quote with attribution | Special |
-| [about-me](./layouts/special/about-me.mdx) | Profile introduction | Special |
-
-## Documentation
-
-- **[Syntax Highlighting & Icons](./syntax-and-icons.mdx)** - Code highlighting and icon usage
-- **[Advanced Configuration](./setup/advanced-configuration.mdx)** - Layout parameters and customization

package/templates/addon-resources/resources/sykehuspartner-theme/layouts/_category_.yml

@@ -1,2 +0,0 @@
-position: 2
-label: 'Layouts'

package/templates/addon-resources/resources/sykehuspartner-theme/layouts/content/_category_.yml

@@ -1,2 +0,0 @@
-position: 1
-label: 'Content Layouts'

package/templates/addon-resources/resources/sykehuspartner-theme/layouts/content/center.mdx

@@ -1,33 +0,0 @@
----
-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/templates/addon-resources/resources/sykehuspartner-theme/layouts/content/default.mdx

@@ -1,59 +0,0 @@
----
-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/templates/addon-resources/resources/sykehuspartner-theme/layouts/content/full.mdx

@@ -1,49 +0,0 @@
----
-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/templates/addon-resources/resources/sykehuspartner-theme/layouts/image/_category_.yml

@@ -1,2 +0,0 @@
-position: 4
-label: 'Image Layouts'

package/templates/addon-resources/resources/sykehuspartner-theme/layouts/image/image-left.mdx

@@ -1,37 +0,0 @@
----
-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/templates/addon-resources/resources/sykehuspartner-theme/layouts/image/image-right.mdx

@@ -1,37 +0,0 @@
----
-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/templates/addon-resources/resources/sykehuspartner-theme/layouts/image/image.mdx

@@ -1,56 +0,0 @@
----
-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
-```

package/templates/addon-resources/resources/sykehuspartner-theme/layouts/multi-column/_category_.yml

@@ -1,2 +0,0 @@
-position: 3
-label: 'Multi-Column Layouts'

package/templates/addon-resources/resources/sykehuspartner-theme/layouts/multi-column/three-cols-header.mdx

@@ -1,49 +0,0 @@
----
-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/templates/addon-resources/resources/sykehuspartner-theme/layouts/multi-column/three-cols.mdx

@@ -1,47 +0,0 @@
----
-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
-```