@sp-days-framework/create-sp-days 1.0.0

package/templates/addon-slidev/slidev/slidev-theme-sykehuspartner.md

@@ -0,0 +1,403 @@
+---
+theme: "@sp-days-framework/slidev-theme-sykehuspartner"
+title: Sykehuspartner Slidev Theme
+description: A professional Slidev theme for creating presentations with consistent Sykehuspartner branding
+layout: intro
+---
+
+# Sykehuspartner Slidev Theme
+
+## Professional Presentations Made Simple
+
+---
+
+# What is Slidev?
+
+Slidev is a presentation framework for developers built on web technologies:
+
+- **Markdown-based** - Write slides in Markdown with frontmatter
+- **Developer-friendly** - Syntax highlighting, live coding, and diagrams
+- **Themeable** - Customizable layouts and styling
+- **Interactive** - Vue components, animations, and transitions
+- **Exportable** - PDF, PNG, or hostable SPA
+
+Perfect for technical presentations, workshops, and training sessions.
+
+---
+
+# Sykehuspartner Theme
+
+This theme provides a complete presentation solution with:
+
+- **18 Professional Layouts** - From cover slides to multi-column content
+- **Consistent Branding** - Sykehuspartner colors, logos, and styling
+- **Syntax Highlighting** - Support for 30+ programming languages
+- **Dark Mode Support** - Automatic light/dark theme switching
+- **VSCode Icons** - Built-in icon support for technical content
+- **Responsive Design** - Looks great on any screen size
+
+---
+
+# Getting Started
+
+Create your presentation file:
+
+```markdown [./slidev/your-slides.md]
+---
+theme: "@sp-days-framework/slidev-theme-sykehuspartner"
+layout: cover
+---
+
+# Your Presentation Title
+## Subtitle Goes Here
+```
+
+Start the development server:
+
+```bash
+npm run slidev ./slidev/your-slides.md
+```
+
+---
+
+# Frontmatter Configuration
+
+Configure your entire presentation in the opening frontmatter:
+
+```markdown [./slidev/your-slides.md]
+---
+theme: "@sp-days-framework/slidev-theme-sykehuspartner"
+title: My Presentation
+description: A great presentation
+layout: cover
+---
+
+# First Slide
+
+...
+
+```
+
+---
+layout: two-cols-header
+---
+
+# Frontmatter Options
+
+
+::left::
+
+```markdown [./slidev/your-slides.md]
+...
+
+# First Slide
+
+---
+layout: two-cols
+logo: false
+---
+
+# Subsequent Slide
+
+```
+
+::right::
+
+Common frontmatter options:
+- `layout` - Choose the slide layout
+- `logo` - Show/hide the logo (varies by layout)
+- `image`, `imageSrc` - Add images to layouts
+
+---
+zoom: 0.8
+layout: two-cols-header
+---
+
+# Available Layouts - Content
+
+::left::
+
+| **Layout** | **Description** |
+| --- | --- |
+| `default` | Standard content with header extraction |
+| `center` | Vertically centered content |
+| `full` | Full-screen with no padding |
+| `cover` | Title slide with banner |
+| `intro` | Introduction with optional side image |
+| `two-cols` | Two equal columns |
+| `two-cols-header` | Two columns with header |
+| `three-cols` | Three equal columns |
+| `three-cols-header` | Three columns with header |
+
+::right::
+
+| **Layout** | **Description** |
+| --- | --- |
+| `section` | Section divider with optional image |
+| `end` | Closing slide with centered banner |
+| `image` | Background or foreground image |
+| `image-left` | Content with left-aligned image |
+| `image-right` | Content with right-aligned image |
+| `fact` | Emphasize key facts |
+| `statement` | Bold statement slide |
+| `quote` | Quote with attribution |
+| `about-me` | Profile introduction |
+
+---
+layout: cover
+---
+
+# Layout Examples
+## Showcasing All Available Layouts
+
+---
+layout: intro
+imageSrc: https://sli.dev/logo-title.png
+imagePosition: right
+imageRatio: 40%
+imageSize: 80%
+---
+
+# Intro Layout
+
+## Introduce new topics
+
+This layout is perfect for introductions with optional side images
+
+---
+layout: default
+
+---
+
+# Default Layout
+
+## Features
+
+- Clean and simple design
+- Logo in top right corner
+- Perfect for general content
+- Supports all markdown features
+
+```javascript
+// Code blocks work great
+const hello = "world";
+```
+
+---
+layout: center
+---
+
+# Center Layout
+
+Perfect for emphasizing important points
+
+---
+layout: full
+---
+
+<div class="flex items-center justify-center h-full flex-col">
+  <h1 class="text-4xl font-bold mb-4">Full Layout</h1>
+  <p class="text-2xl">No padding, no logo - complete creative freedom</p>
+  <div class="bg-blue-500 text-white p-6 rounded-lg mt-8">
+    Perfect for custom content
+  </div>
+</div>
+
+---
+layout: section
+---
+
+# Section Layout
+
+## Introduce New Sections
+
+Use this to divide your presentation into logical parts
+
+---
+layout: fact
+---
+
+# Fact Layout
+
+## Perfect for bringing the title and content together
+
+---
+layout: statement
+---
+
+# Statement Layout
+
+## Code is the Future of Operations
+
+Bold statements centered for maximum impact
+
+---
+layout: quote
+---
+
+# "The best way to predict the future is to create it."
+
+## Alan Kay
+
+### Quote Layout
+
+---
+layout: two-cols
+---
+
+# Left Column
+
+Content for the left side:
+
+- Point 1
+- Point 2
+- Point 3
+
+::right::
+
+# Right Column
+
+Content for the right side:
+
+- Feature A
+- Feature B
+- Feature C
+
+---
+layout: two-cols-header
+---
+
+# Header Spanning Both Columns
+
+::left::
+
+## Left Side
+- Comparison A
+- Before state
+- Old approach
+
+::right::
+
+## Right Side  
+- Comparison B
+- After state
+- New approach
+
+---
+layout: three-cols
+---
+
+# Column 1
+
+First third of content
+
+::middle::
+
+# Column 2
+
+Second third of content
+
+::right::
+
+# Column 3
+
+Final third of content
+
+---
+layout: three-cols-header
+---
+
+# Organizing Information Across Three Sections
+
+::left::
+
+## Development
+- Local setup
+- Testing
+- Version control
+
+::middle::
+
+## Staging
+- Integration tests
+- UAT
+- Performance
+
+::right::
+
+## Production
+- Deployment
+- Monitoring
+- Scaling
+
+---
+layout: image
+imageSrc: https://sli.dev/demo-cover.png
+imageScale: 100%
+imageBackgroundMode: true
+---
+
+# Image Layout (Background)
+
+Text overlays on background images
+
+---
+layout: image
+imageSrc: https://sli.dev/logo.png
+imageBackgroundMode: false
+imageScale: 70%
+imageAlign: center
+---
+
+# Image Layout (Foreground)
+
+Content at the top, image displayed below
+
+Perfect for explaining diagrams
+
+---
+layout: image-left
+imageSrc: https://sli.dev/demo-cover.png
+imageRatio: 40%
+---
+
+# Image Left Layout
+
+Image on the left, content on the right
+
+- Adjustable image ratio
+- Customizable alignment
+- Automatic scaling
+
+---
+layout: image-right
+imageSrc: https://sli.dev/demo-cover.png
+imageRatio: 40%
+---
+
+# Image Right Layout
+
+Content on the left, image on the right
+
+- Perfect for screenshots
+- Code examples with visuals
+- Architecture diagrams
+
+---
+layout: about-me
+name: John Doe
+jobTitle: "Senior DevOps Engineer"
+department: "Cloud Platform Team"
+description: "Specialist in container technologies and cloud-native solutions"
+email: "john.doe@example.com"
+linkedin: "johndoe"
+imageSrc: https://sli.dev/logo.png
+imageShape: "circle"
+imagePosition: "left"
+---
+
+---
+layout: end
+---
+
+# Ending Layout

package/templates/page-course/README.md

@@ -0,0 +1,152 @@
+# <%= title %>
+
+<%= tagline %>
+
+This course website was created with [@sp-days-framework/create-sp-days](https://github.com/helse-sorost/sp-days-framework).
+
+## Getting Started
+
+### Development
+
+Start the development server:
+
+```bash
+npm start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+Build the website for production:
+
+```bash
+npm run build
+```
+
+This command generates static content into the `build` directory and can be served using any static hosting service.
+
+### Serve
+
+Test the production build locally:
+
+```bash
+npm run serve
+```
+
+Serves the production build from the `build` directory.
+
+<% if (addonSlidev) { %>
+
+### Slidev Presentations
+
+Launch the Slidev presentation server:
+
+```bash
+npm run slidev ./slidev/filename.md
+```
+
+This opens the Slidev presentation interface where you can view and edit your slides.
+
+<% } %>
+
+## Project Structure
+
+```
+<%= directoryName %>/
+├── course/                 # Course content (MDX files)
+│   ├── index.mdx          # Course overview
+│   └── ...                # Add your course modules here
+├── src/
+│   ├── css/
+│   │   └── sp-days-theme.scss  # Custom styling
+│   └── pages/
+│       └── index.mdx      # Landing page
+├── static/
+│   └── img/               # Static assets (logos, images)
+<% if (addonSlidev) { %>├── slidev/                # Slidev presentations
+│   ├── creating-your-first-slidev.md
+│   └── ...                # Add your presentations here
+<% } %><% if (addonResources) { %>├── resources/             # Additional documentation
+│   └── ...                # Reference materials
+<% } %>├── docusaurus.config.ts   # Site configuration
+├── package.json           # Dependencies and scripts
+└── tsconfig.json          # TypeScript configuration
+```
+
+## Adding Course Content
+
+### Creating Course Modules
+
+1. Create MDX files in the `/course` directory
+2. Use frontmatter to configure each page:
+
+```markdown
+---
+sidebar_position: 1
+title: Module 1
+---
+
+# Module 1: Getting Started
+
+Your content here...
+```
+
+### Using Interactive Tasks
+
+The course includes the interactive tasks plugin. Create tasks like this:
+
+````markdown
+:::task{title="Your Task Title"}
+
+::text
+
+Your task description and requirements here.
+
+::
+
+::hint
+
+Helpful hints for learners.
+
+::
+
+::solution
+
+The complete solution with explanations.
+
+::
+
+:::
+````
+
+See the [Interactive Tasks documentation](https://helse-sorost.github.io/sp-days-framework/resources/interactive-tasks) for more details.
+
+<% if (addonSlidev) { %>
+
+## Creating Presentations
+
+Slidev presentations are Markdown files in the `/slidev` directory:
+
+1. Create a new `.md` file in `/slidev`
+2. Use Slidev syntax for slides:
+
+```markdown
+---
+theme: sykehuspartner
+---
+
+# Slide Title
+
+Content for your slide
+
+---
+
+# Another Slide
+
+More content
+```
+
+See the [Slidev documentation](https://sli.dev/) for the full syntax.
+
+<% } %>

package/templates/page-course/course/index.mdx

@@ -0,0 +1,7 @@
+---
+sidebar_position: 0
+---
+
+# Course Overview
+
+<TaskProgressionOverview />