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

package/templates/addon-resources/resources/sykehuspartner-theme/syntax-and-icons.mdx

@@ -0,0 +1,89 @@
+---
+title: Syntax Highlighting & Icons
+sidebar_position: 1
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+# Syntax Highlighting & Icons
+
+## Syntax Highlighting
+
+The theme includes built-in syntax highlighting for 30+ programming languages powered by Shiki.
+
+### Supported Languages
+
+- HTML, CSS, JavaScript, TypeScript, JSX, TSX, Vue, MDX
+- Python, Java, C#, Go, Rust, Ruby, PHP
+- Docker, Terraform, YAML, TOML, Shell Script, PowerShell
+- SQL, JSON, JSONC, CSV, GraphQL
+- Markdown, LaTeX, XML
+- NGINX, INI, .env, Git commit/rebase, CODEOWNERS
+- Lua, HCL, SCSS, Sass
+
+### Basic Usage
+
+Use standard 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
+```
+````
+
+## Icon Support
+
+The theme includes the VSCode Icons collection for technical presentations.
+
+### Icon Discovery
+
+Icons are automatically scanned from your markdown files and included in the build. Browse the full collection at [VSCode Icons](https://github.com/vscode-icons/vscode-icons).
+
+### Using VSCode Icons
+
+Use the tilde syntax to include icons inline:
+
+```markdown
+---
+layout: default
+---
+
+# Technologies Used
+
+~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-kubernetes~ Kubernetes
+```
+
+### 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 |
+

package/templates/addon-slidev/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "<%= projectName %>",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "slidev": "slidev",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@docusaurus/core": "^3.9.2",
+    "@docusaurus/preset-classic": "^3.9.2",
+    "@docusaurus/theme-mermaid": "^3.9.2",
+    "@mdx-js/react": "^3.0.0",
+    "@sp-days-framework/docusaurus-frontpage-collection": "^1.0.0",
+    "@sp-days-framework/docusaurus-plugin-interactive-tasks": "^1.0.0",
+    "@sp-days-framework/docusaurus-plugin-slidev": "^1.0.0",
+    "@sp-days-framework/slidev-theme-sykehuspartner": "^1.0.0",
+    "clsx": "^2.0.0",
+    "docusaurus-plugin-sass": "^0.2.6",
+    "prism-react-renderer": "^2.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "^3.9.2",
+    "@docusaurus/tsconfig": "^3.9.2",
+    "@docusaurus/types": "^3.9.2",
+    "typescript": "~5.6.2"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 3 chrome version",
+      "last 3 firefox version",
+      "last 5 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=20.0"
+  }
+}

package/templates/addon-slidev/slidev/creating-your-first-slidev.md

@@ -0,0 +1,301 @@
+---
+theme: "@sp-days-framework/slidev-theme-sykehuspartner"
+title: Creating Your First Slidev Presentation
+description: Learn essential Slidev features and how to create engaging presentations
+layout: cover
+---
+
+# Creating Your First Slidev Presentation
+
+## Essential Features and Best Practices
+
+---
+layout: two-cols-header
+---
+
+# Frontmatter Basics
+
+Every Slidev presentation starts with frontmatter configuration:
+
+::left::
+
+
+**Global Settings** (first slide):
+- `theme` - Which theme to use
+- `title` - Presentation title
+- `description` - Brief description
+- `author`, `keywords` - Metadata
+
+```yaml
+---
+theme: "@sp-days-framework/slidev-theme-sykehuspartner"
+title: My Presentation
+description: A brief description
+author: Your Name
+layout: cover
+---
+
+# First Slide
+```
+
+::right::
+
+
+**Per-Slide Settings** (subsequent slides):
+- `layout` - Layout for this slide
+- `logo` - Show/hide logo
+- Custom layout parameters
+
+```yaml
+---
+layout: default
+---
+
+# Subsequent Slide
+```
+
+---
+layout: two-cols-header
+---
+
+# Slide Separators
+
+Slides are separated by three dashes (`---`):
+
+::left::
+
+```markdown
+---
+# First Slide
+
+Content here
+
+---
+# Second Slide
+
+More content
+
+---
+layout: two-cols
+---
+
+# Third Slide with Layout
+```
+
+::right::
+
+**Tips:**
+
+- Always use `---` with blank lines around it
+- Frontmatter goes immediately after `---`
+- Leave blank line before content
+
+---
+layout: three-cols-header
+---
+
+# Markdown Support
+
+Slidev supports all standard Markdown features:
+
+::left::
+
+**Text Formatting:**
+- *Italic* with `*text*` or `_text_`
+- **Bold** with `**text**`
+- ***Bold italic*** with `***text***`
+- `Code` with backticks
+
+::middle::
+
+**Lists:**
+- Unordered lists with `-` or `*`
+- Ordered lists with `1.`, `2.`, etc.
+- Nested lists with indentation
+
+::right::
+
+**Links and Images:**
+- Links: `[text](url)`
+- Images: `![alt](path)`
+
+---
+
+# Code Highlighting
+
+Slidev provides powerful code highlighting:
+
+**Language Support:**
+```python
+# Specify language for syntax highlighting
+def hello():
+    return "Python works too!"
+```
+
+**Line Highlighting:**
+```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
+```
+
+---
+layout: two-cols-header
+---
+
+# Presenter Notes
+
+Add notes visible only in presenter mode
+
+::left::
+
+```markdown
+---
+# Slide Title
+
+Visible content for the audience
+
+<!--
+These are presenter notes.
+Only visible in presenter mode.
+
+Tips for this slide:
+- Emphasize the main point
+- Ask if there are questions
+- Time: 2 minutes
+-->
+```
+
+::right::
+
+**Access Presenter Mode:**
+
+- Press "Presenter Mode" button during presentation
+- Opens second window with notes, next slide, and timer
+- Perfect for rehearsing and presenting
+
+<!--
+These are presenter notes.
+Only visible in presenter mode (press 'o' to open).
+
+Tips for this slide:
+- Emphasize the main point
+- Ask if there are questions
+- Time: 2 minutes
+-->
+
+---
+layout: two-cols-header
+transition: slide-left
+---
+
+# Transitions
+
+Add smooth transitions between slides
+
+::left::
+
+**Available Transitions:**
+
+- `slide-left`, `slide-right`, `slide-up`, `slide-down`
+- `fade` - Fade in/out
+- `fade-out` - Only fade out
+- `zoom` - Zoom effect
+- `none` - No transition
+
+::right::
+
+```yaml
+---
+transition: slide-left
+---
+
+# This Slide
+
+Will slide in from the right
+```
+
+You can also set a global transition in the first slide's frontmatter.
+
+---
+layout: two-cols-header
+---
+
+# Icons with UnoCSS
+
+The theme includes icon support based on Iconify [VSCode Icons](https://icon-sets.iconify.design/vscode-icons/)
+
+::left::
+
+````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
+  ```
+````
+
+::right::
+
+```docker [dockerfile ~i-vscode-icons:file-type-docker~]
+FROM python:3.13
+```
+
+```python [hello_world.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
+```
+
+---
+layout: three-cols-header
+---
+
+# Best Practices
+
+::left::
+
+**Content:**
+
+- One main idea per slide
+- Use bullet points sparingly (3-5 max)
+- Images and code over text walls
+- Consistent terminology
+
+::middle::
+
+**Design:**
+
+- Choose appropriate layouts
+- Maintain visual hierarchy
+- Use animations purposefully
+- Test in both light and dark modes
+
+::right::
+
+**Technical:**
+- Keep code examples short
+- Use syntax highlighting
+- Test all transitions
+
+---
+layout: end
+---
+
+# Happy Presenting!