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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/README.md +14 -0
  2. package/bin/index.js +2 -0
  3. package/docs/advanced-config.mdx +387 -0
  4. package/docs/changelog.mdx +106 -0
  5. package/docs/index.mdx +205 -0
  6. package/docs/install.mdx +199 -0
  7. package/docs/sidebar-sections.mdx +268 -0
  8. package/docs/sp-days-plugin-color-light.svg +53 -0
  9. package/lib/.tsbuildinfo +1 -0
  10. package/lib/.tsbuildinfo-build +1 -0
  11. package/lib/index.d.ts +1 -0
  12. package/lib/index.js +36 -7
  13. package/package.json +31 -7
  14. package/publish-package-docs.js +12 -0
  15. package/templates/addon-resources/resources/api-reference.mdx +132 -0
  16. package/templates/addon-resources/resources/best-practice.mdx +407 -0
  17. package/templates/addon-resources/resources/cheat-sheet.mdx +120 -0
  18. package/templates/addon-resources/resources/cli-reference.mdx +280 -0
  19. package/templates/addon-resources/resources/configuration-guide.mdx +211 -0
  20. package/templates/addon-resources/resources/environment-setup.mdx +317 -0
  21. package/templates/addon-resources/resources/faq.mdx +146 -0
  22. package/templates/addon-resources/resources/glossary.mdx +78 -0
  23. package/templates/addon-resources/resources/index.mdx +67 -16
  24. package/templates/addon-resources/resources/quick-start.mdx +193 -0
  25. package/templates/addon-resources/resources/troubleshooting.mdx +263 -0
  26. package/templates/addon-resources/resources/useful-links.mdx +61 -0
  27. package/templates/page-course/README.md +62 -0
  28. package/templates/page-course/docusaurus.config.ts +59 -11
  29. package/templates/page-course/package.json +12 -2
  30. package/templates/page-course/sidebarSections.js +118 -0
  31. package/tsconfig.base.client.json +10 -0
  32. package/tsconfig.base.json +71 -0
  33. package/tsconfig.build.json +9 -0
  34. package/sp-days-framework-create-sp-days-1.0.3.tgz +0 -0
  35. package/templates/addon-resources/resources/interactive-tasks/creating-tasks.mdx +0 -254
  36. package/templates/addon-resources/resources/interactive-tasks/examples/_category_.yml +0 -3
  37. package/templates/addon-resources/resources/interactive-tasks/examples/advanced-usage.mdx +0 -304
  38. package/templates/addon-resources/resources/interactive-tasks/examples/basic-usage.mdx +0 -128
  39. package/templates/addon-resources/resources/interactive-tasks/index.mdx +0 -93
  40. package/templates/addon-resources/resources/interactive-tasks/setup/advanced-configuration.mdx +0 -273
  41. package/templates/addon-resources/resources/interactive-tasks/setup/index.mdx +0 -120
  42. package/templates/addon-resources/resources/interactive-tasks/task-progression.mdx +0 -140
  43. package/templates/addon-resources/resources/slidev-integration/index.mdx +0 -106
  44. package/templates/addon-resources/resources/slidev-integration/setup/advanced-configuration.mdx +0 -144
  45. package/templates/addon-resources/resources/slidev-integration/setup/index.mdx +0 -200
  46. package/templates/addon-resources/resources/sykehuspartner-theme/index.mdx +0 -105
  47. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/_category_.yml +0 -2
  48. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/content/_category_.yml +0 -2
  49. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/content/center.mdx +0 -33
  50. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/content/default.mdx +0 -59
  51. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/content/full.mdx +0 -49
  52. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/image/_category_.yml +0 -2
  53. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/image/image-left.mdx +0 -37
  54. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/image/image-right.mdx +0 -37
  55. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/image/image.mdx +0 -56
  56. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/multi-column/_category_.yml +0 -2
  57. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/multi-column/three-cols-header.mdx +0 -49
  58. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/multi-column/three-cols.mdx +0 -47
  59. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/multi-column/two-cols-header.mdx +0 -43
  60. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/multi-column/two-cols.mdx +0 -38
  61. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/section/_category_.yml +0 -2
  62. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/section/cover.mdx +0 -43
  63. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/section/end.mdx +0 -33
  64. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/section/intro.mdx +0 -49
  65. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/section/section.mdx +0 -41
  66. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/special/_category_.yml +0 -2
  67. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/special/about-me.mdx +0 -92
  68. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/special/fact.mdx +0 -47
  69. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/special/quote.mdx +0 -27
  70. package/templates/addon-resources/resources/sykehuspartner-theme/layouts/special/statement.mdx +0 -28
  71. package/templates/addon-resources/resources/sykehuspartner-theme/setup/advanced-configuration.mdx +0 -79
  72. package/templates/addon-resources/resources/sykehuspartner-theme/setup/index.mdx +0 -104
  73. package/templates/addon-resources/resources/sykehuspartner-theme/syntax-and-icons.mdx +0 -89
  74. package/templates/addon-slidev/package.json +0 -54
@@ -1,144 +0,0 @@
1
- ---
2
- title: Advanced
3
- sidebar_position: 2
4
- ---
5
-
6
- import Tabs from "@theme/Tabs";
7
- import TabItem from "@theme/TabItem";
8
-
9
- # Advanced Configuration
10
-
11
- ## All Plugin Options
12
-
13
- | Option | Type | Default | Description |
14
- | ----------------- | --------- | ------------------------------------- | ------------------------------------------------------------------ |
15
- | `sourceDir` | `string` | `'./slidev'` | Directory to scan for Slidev markdown files |
16
- | `outputDir` | `string` | `'slides'` | Output directory inside `static/` for built presentations |
17
- | `theme` | `string` | `undefined` | Global theme override for all presentations |
18
- | `download` | `boolean` | `false` | Enable PDF download functionality |
19
- | `overviewPath` | `string` | `'/slidev'` | URL path for the auto-generated overview page |
20
- | `overviewTitle` | `string` | `'Slidev Presentations'` | Custom title for the overview page |
21
- | `overviewTagline` | `string` | `'Interactive presentation overview'` | Custom tagline/description for the overview page |
22
- | `id` | `string` | `'default'` | Plugin ID for multiple instances |
23
- | `buildTimeout` | `number` | `60` | Timeout in seconds for building each presentation (10-600) |
24
- | `verbose` | `boolean` | `false` | Enable verbose logging for Slidev build output |
25
-
26
- ## All Frontmatter Options
27
-
28
- Configure individual presentations using frontmatter:
29
-
30
- | Option | Type | Description |
31
- | ------------- | -------- | ---------------------------------------------- |
32
- | `theme` | `string` | Theme to use (overrides plugin global theme) |
33
- | `title` | `string` | Presentation title |
34
- | `description` | `string` | Brief description for overview page |
35
- | `author` | `string` | Author name(s) |
36
- | `layout` | `string` | Layout for the slide (e.g., `cover`, `intro`) |
37
-
38
- See [Slidev documentation](https://sli.dev/guide/syntax.html#frontmatter) for all available frontmatter options.
39
-
40
- ## Multiple Plugin Instances
41
-
42
- Run multiple instances with different configurations:
43
-
44
- ```js title="docusaurus.config.js"
45
- module.exports = {
46
- staticDirectories: ["static"],
47
-
48
- plugins: [
49
- [
50
- "@sp-days-framework/docusaurus-plugin-slidev",
51
- {
52
- id: "workshops",
53
- sourceDir: "./slidev/workshops",
54
- overviewPath: "/workshops/slides",
55
- overviewTitle: "Workshop Presentations",
56
- },
57
- ],
58
- [
59
- "@sp-days-framework/docusaurus-plugin-slidev",
60
- {
61
- id: "training",
62
- sourceDir: "./slidev/training",
63
- overviewPath: "/training/slides",
64
- overviewTitle: "Training Materials",
65
- },
66
- ],
67
- ],
68
- };
69
- ```
70
-
71
- This allows you to organize different types of presentations separately.
72
-
73
- ## Global Theme Configuration
74
-
75
- Set a default theme for all presentations:
76
-
77
- ```js title="docusaurus.config.js"
78
- module.exports = {
79
- plugins: [
80
- [
81
- "@sp-days-framework/docusaurus-plugin-slidev",
82
- {
83
- theme: "@sp-days-framework/slidev-theme-sykehuspartner",
84
- },
85
- ],
86
- ],
87
- };
88
- ```
89
-
90
- Individual presentations can override this by specifying a theme in their frontmatter.
91
-
92
- ## Custom Overview Page
93
-
94
- Customize the presentation overview page appearance:
95
-
96
- ```js title="docusaurus.config.js"
97
- module.exports = {
98
- plugins: [
99
- [
100
- "@sp-days-framework/docusaurus-plugin-slidev",
101
- {
102
- overviewPath: "/presentations",
103
- overviewTitle: "Our Presentations",
104
- overviewTagline: "Explore our collection of learning materials",
105
- },
106
- ],
107
- ],
108
- };
109
- ```
110
-
111
- ## Build Timeout Configuration
112
-
113
- For large presentations, increase the build timeout:
114
-
115
- ```js title="docusaurus.config.js"
116
- module.exports = {
117
- plugins: [
118
- [
119
- "@sp-days-framework/docusaurus-plugin-slidev",
120
- {
121
- buildTimeout: 120, // 2 minutes per presentation
122
- verbose: true, // Enable verbose logging
123
- },
124
- ],
125
- ],
126
- };
127
- ```
128
-
129
- ## PDF Download Support
130
-
131
- Enable PDF download functionality for presentations:
132
-
133
- ```js title="docusaurus.config.js"
134
- module.exports = {
135
- plugins: [
136
- [
137
- "@sp-days-framework/docusaurus-plugin-slidev",
138
- {
139
- download: true,
140
- },
141
- ],
142
- ],
143
- };
144
- ```
@@ -1,200 +0,0 @@
1
- ---
2
- sidebar_position: 1
3
- ---
4
-
5
- import Tabs from "@theme/Tabs";
6
- import TabItem from "@theme/TabItem";
7
-
8
- # Setup
9
-
10
- :::tip[Already Included]
11
- 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!
12
- :::
13
-
14
- ## Installation
15
-
16
- Install the Docusaurus plugin using your preferred package manager:
17
-
18
- <Tabs>
19
- <TabItem value="npm" label="npm" default>
20
- ```bash
21
- npm install @sp-days-framework/docusaurus-plugin-slidev
22
- ```
23
- </TabItem>
24
- <TabItem value="yarn" label="Yarn">
25
- ```bash
26
- yarn add @sp-days-framework/docusaurus-plugin-slidev
27
- ```
28
- </TabItem>
29
- </Tabs>
30
-
31
- Install Slidev dependencies:
32
-
33
- <Tabs>
34
- <TabItem value="sp-theme" label="Sykehuspartner Theme" default>
35
- ```bash
36
- npm install @sp-days-framework/slidev-theme-sykehuspartner
37
- ```
38
-
39
- Includes everything needed for Sykehuspartner branded presentations.
40
- </TabItem>
41
- <TabItem value="default" label="Default Theme">
42
- ```bash
43
- npm install @slidev/theme-default
44
- ```
45
- </TabItem>
46
- </Tabs>
47
-
48
- Add the plugin to your `docusaurus.config.js`:
49
-
50
- ```js title="docusaurus.config.js" {2,4}
51
- module.exports = {
52
- staticDirectories: ["static"],
53
-
54
- plugins: ["@sp-days-framework/docusaurus-plugin-slidev"],
55
- };
56
- ```
57
-
58
- :::note
59
- The `static` directory is required for serving built presentations.
60
- :::
61
-
62
- **Optional:** Add the `slidev` script for live preview during development:
63
-
64
- ```json title="package.json" {4}
65
- {
66
- "scripts": {
67
- "docusaurus": "docusaurus",
68
- "slidev": "slidev"
69
- }
70
- }
71
- ```
72
-
73
- ## Configuration
74
-
75
- ### Basic Plugin Setup
76
-
77
- The plugin works with default settings:
78
-
79
- ```js title="docusaurus.config.js"
80
- module.exports = {
81
- staticDirectories: ["static"],
82
- plugins: ["@sp-days-framework/docusaurus-plugin-slidev"],
83
- };
84
- ```
85
-
86
- ### Plugin Options
87
-
88
- Customize the plugin behavior:
89
-
90
- ```js title="docusaurus.config.js"
91
- module.exports = {
92
- plugins: [
93
- [
94
- "@sp-days-framework/docusaurus-plugin-slidev",
95
- {
96
- sourceDir: "./slidev",
97
- outputDir: "slides",
98
- theme: "@sp-days-framework/slidev-theme-sykehuspartner",
99
- overviewPath: "/presentations",
100
- },
101
- ],
102
- ],
103
- };
104
- ```
105
-
106
- Common options:
107
-
108
- | Option | Type | Default | Description |
109
- | ----------------- | --------- | ------------------------------------- | ------------------------------------------------------------------ |
110
- | `sourceDir` | `string` | `'./slidev'` | Directory to scan for Slidev markdown files |
111
- | `outputDir` | `string` | `'slides'` | Output directory inside `static/` for built presentations |
112
- | `theme` | `string` | `undefined` | Global theme override for all presentations |
113
- | `overviewPath` | `string` | `'/slidev'` | URL path for the auto-generated overview page |
114
- | `overviewTitle` | `string` | `'Slidev Presentations'` | Title for the overview page |
115
-
116
- See [Advanced Configuration](./advanced-configuration.mdx) for all options.
117
-
118
- ### Frontmatter Configuration
119
-
120
- Configure individual presentations:
121
-
122
- ```markdown title="slidev/introduction.md"
123
- ---
124
- theme: "@sp-days-framework/slidev-theme-sykehuspartner"
125
- title: Introduction to Docker
126
- description: Learn containerization fundamentals
127
- author: Your Name
128
- layout: cover
129
- ---
130
-
131
- # Introduction to Docker
132
- ## Containerization Made Simple
133
- ```
134
-
135
- Common frontmatter options:
136
-
137
- | Option | Description |
138
- | ------------- | ---------------------------------------------- |
139
- | `theme` | Theme to use (overrides plugin global theme) |
140
- | `title` | Presentation title |
141
- | `description` | Brief description for overview page |
142
- | `author` | Author name(s) |
143
- | `layout` | Layout for the slide (e.g., `cover`, `intro`) |
144
-
145
- ## Development vs Production Modes
146
-
147
- The plugin operates differently in development and production modes due to technical limitations:
148
-
149
- **Why no live preview in development?**
150
- - Slidev's CLI can only run one presentation at a time
151
- - Building presentations takes 5-10+ seconds each
152
- - Running builds during development would significantly slow down the dev server
153
-
154
- This design choice prioritizes developer experience by keeping the documentation development workflow fast.
155
-
156
- ### Development Mode (`npm run start`)
157
-
158
- - Presentations are **not built** automatically
159
- - Overview page shows "Build Required" badges
160
- - Much faster startup time
161
-
162
- **Use for:** Active documentation development
163
-
164
- ### Production Mode (`npm run build`)
165
-
166
- - All presentations are **automatically built**
167
- - Overview page shows interactive preview thumbnails
168
- - Presentations are fully functional
169
-
170
- **Use for:** Deploying to production or testing integration
171
-
172
- ### Recommended Workflow
173
-
174
- <Tabs>
175
- <TabItem value="slides" label="Working on Slides" default>
176
- ```bash
177
- # Live preview with hot-reload
178
- npm run slidev ./slidev/your-presentation.md
179
- ```
180
-
181
- Edit your presentation and see changes instantly.
182
- </TabItem>
183
- <TabItem value="verify" label="Verify Integration">
184
- ```bash
185
- # Build and serve to see final result
186
- npm run build
187
- npm run serve
188
- ```
189
-
190
- Navigate to `/slidev` to see the overview page.
191
- </TabItem>
192
- <TabItem value="docs" label="Working on Docs">
193
- ```bash
194
- # Fast development server (slides not built)
195
- npm run start
196
- ```
197
-
198
- Focus on documentation without waiting for slide builds.
199
- </TabItem>
200
- </Tabs>
@@ -1,105 +0,0 @@
1
- ---
2
- title: Sykehuspartner Theme
3
- sidebar_class_name: sidebar-logo-slidev
4
- ---
5
-
6
- import useBaseUrl from '@docusaurus/useBaseUrl';
7
- import ThemedImage from '@theme/ThemedImage';
8
- import { Iconify } from "@sp-days-framework/docusaurus-frontpage-collection";
9
-
10
- <div align="center">
11
- <div className="resourceLandingPage">
12
- <Iconify icon="logos:slidev" width="105px"/>
13
- <Iconify icon="mdi:plus-thick" width="50px" iconColors={{ light: "#000000", dark: "#ffffff" }} />
14
- <ThemedImage
15
- style={{ width: '95px'}}
16
- sources={{
17
- light: useBaseUrl('/img/favicon-navbar/sorost-logo-light.svg'),
18
- dark: useBaseUrl('/img/favicon-navbar/sorost-logo-dark.svg'),
19
- }}
20
- />
21
- </div>
22
- <div align="center">
23
- # Sykehuspartner Slidev Theme
24
- </div>
25
- <div align="center">
26
- <p>
27
- *Create professional presentations using Sykehuspartner theme for Slidev!*
28
- </p>
29
- <h4>
30
- [Setup](./setup/index.mdx)
31
- ·
32
- [NPM Package](https://www.npmjs.com/package/@sp-days-framework/slidev-theme-sykehuspartner)
33
- ·
34
- [Source Code](https://github.com/helse-sorost/sp-days-framework)
35
- </h4>
36
- </div>
37
- </div>
38
-
39
- ---
40
-
41
- ## Features
42
-
43
- - **18 Professional Layouts** - From cover slides to multi-column content, image layouts, and special-purpose slides
44
- - **Consistent Branding** - Sykehuspartner colors, logos, and styling throughout
45
- - **Dark Mode Support** - Automatic light/dark theme switching with optimized colors
46
- - **Syntax Highlighting** - Support for 30+ programming languages powered by Shiki
47
- - **VSCode Icons** - Built-in icon support for technical content with automatic scanning
48
- - **Responsive Design** - Looks great on any screen size
49
-
50
- ## Getting Started
51
-
52
- Configure the theme and start creating slides:
53
-
54
- ```markdown title="slidev/presentation.md"
55
- ---
56
- theme: "@sp-days-framework/slidev-theme-sykehuspartner"
57
- title: My Presentation
58
- layout: cover
59
- ---
60
-
61
- # My Presentation Title
62
- ## Subtitle Goes Here
63
-
64
- ---
65
- layout: default
66
- ---
67
-
68
- # First Content Slide
69
-
70
- - Point 1
71
- - Point 2
72
- - Point 3
73
- ```
74
-
75
- See [Setup](./setup/index.mdx) for installation and configuration.
76
-
77
- ## Available Layouts
78
-
79
- The theme includes 18 specialized layouts for different presentation needs:
80
-
81
- | Layout | Use Case | Category |
82
- |--------|----------|----------|
83
- | [cover](./layouts/section/cover.mdx) | Title slide with banner | Section |
84
- | [intro](./layouts/section/intro.mdx) | Introduction with optional side image | Section |
85
- | [section](./layouts/section/section.mdx) | Section divider with optional image | Section |
86
- | [end](./layouts/section/end.mdx) | Closing slide with centered banner | Section |
87
- | [default](./layouts/content/default.mdx) | Standard content with header extraction | Content |
88
- | [center](./layouts/content/center.mdx) | Vertically centered content | Content |
89
- | [full](./layouts/content/full.mdx) | Full-screen with no padding | Content |
90
- | [two-cols](./layouts/multi-column/two-cols.mdx) | Two equal columns | Multi-Column |
91
- | [two-cols-header](./layouts/multi-column/two-cols-header.mdx) | Two columns with header | Multi-Column |
92
- | [three-cols](./layouts/multi-column/three-cols.mdx) | Three equal columns | Multi-Column |
93
- | [three-cols-header](./layouts/multi-column/three-cols-header.mdx) | Three columns with header | Multi-Column |
94
- | [image](./layouts/image/image.mdx) | Background or foreground image | Image |
95
- | [image-left](./layouts/image/image-left.mdx) | Content with left-aligned image | Image |
96
- | [image-right](./layouts/image/image-right.mdx) | Content with right-aligned image | Image |
97
- | [fact](./layouts/special/fact.mdx) | Emphasize key facts | Special |
98
- | [statement](./layouts/special/statement.mdx) | Bold statement slide | Special |
99
- | [quote](./layouts/special/quote.mdx) | Quote with attribution | Special |
100
- | [about-me](./layouts/special/about-me.mdx) | Profile introduction | Special |
101
-
102
- ## Documentation
103
-
104
- - **[Syntax Highlighting & Icons](./syntax-and-icons.mdx)** - Code highlighting and icon usage
105
- - **[Advanced Configuration](./setup/advanced-configuration.mdx)** - Layout parameters and customization
@@ -1,2 +0,0 @@
1
- position: 2
2
- label: 'Layouts'
@@ -1,2 +0,0 @@
1
- position: 1
2
- label: 'Content Layouts'
@@ -1,33 +0,0 @@
1
- ---
2
- title: Center
3
- description: Vertically and horizontally centered content layout
4
- ---
5
-
6
- # Center Layout
7
-
8
- The `center` layout centers all content both vertically and horizontally on the slide. Perfect for emphasizing short, important messages.
9
-
10
- ## When to Use
11
-
12
- - Emphasizing key points
13
- - Short important messages
14
- - Transition slides
15
- - Single concept slides
16
-
17
- ## Parameters
18
-
19
- | Parameter | Type | Default | Description |
20
- |-----------|------|---------|-------------|
21
- | `logo` | boolean | `true` | Show/hide the logo in top right |
22
-
23
- ## Basic Example
24
-
25
- ```markdown
26
- ---
27
- layout: center
28
- ---
29
-
30
- # Main Message
31
-
32
- Supporting text that reinforces the point
33
- ```
@@ -1,59 +0,0 @@
1
- ---
2
- title: Default
3
- description: Standard content layout with automatic header extraction
4
- ---
5
-
6
- # Default Layout
7
-
8
- 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.
9
-
10
- ## When to Use
11
-
12
- - Regular content slides
13
- - Bullet point lists
14
- - General information
15
- - Most standard slides
16
-
17
- ## Parameters
18
-
19
- | Parameter | Type | Default | Description |
20
- |-----------|------|---------|-------------|
21
- | `logo` | boolean | `true` | Show/hide the logo |
22
- | `textAlignment` | string | `'center'` | Vertical alignment: `'top'`, `'center'`, `'bottom'` |
23
-
24
- ## Basic Example
25
-
26
- ```markdown
27
- ---
28
- layout: default
29
- ---
30
-
31
- # Introduction to Docker
32
-
33
- Docker is a platform for developing and running applications in containers.
34
-
35
- ## Key Benefits
36
-
37
- - Consistency across environments
38
- - Fast deployment
39
- - Resource efficiency
40
- - Isolation
41
- ```
42
-
43
- ## With Top Alignment
44
-
45
- ```markdown
46
- ---
47
- layout: default
48
- textAlignment: top
49
- ---
50
-
51
- # Lots of Content
52
-
53
- When you have extensive content, align to top for better readability.
54
-
55
- - Point 1
56
- - Point 2
57
- - Point 3
58
- - (many more points)
59
- ```
@@ -1,49 +0,0 @@
1
- ---
2
- title: Full
3
- description: Full-screen layout with no padding or logo
4
- ---
5
-
6
- # Full Layout
7
-
8
- The `full` layout provides a completely blank canvas with no padding, margin, or logo. Perfect for custom content that needs maximum space.
9
-
10
- ## When to Use
11
-
12
- - Custom HTML/CSS layouts
13
- - Full-screen graphics or visualizations
14
- - Interactive demos
15
- - Maximum creative control needed
16
-
17
- ## Parameters
18
-
19
- | Parameter | Type | Default | Description |
20
- |-----------|------|---------|-------------|
21
- | `logo` | boolean | `false` | Show/hide logo (default is hidden) |
22
-
23
- ## Basic Example
24
-
25
- ```markdown
26
- ---
27
- layout: full
28
- ---
29
-
30
- <div class="flex items-center justify-center h-full flex-col">
31
- <h1 class="text-4xl font-bold mb-4">Full Screen</h1>
32
- <p class="text-2xl">Complete creative freedom</p>
33
- </div>
34
- ```
35
-
36
- ## With Custom Styling
37
-
38
- ```markdown
39
- ---
40
- layout: full
41
- ---
42
-
43
- <div class="h-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
44
- <div class="text-white text-center">
45
- <h1 class="text-6xl font-bold">Amazing</h1>
46
- <p class="text-3xl mt-4">Custom Design</p>
47
- </div>
48
- </div>
49
- ```
@@ -1,2 +0,0 @@
1
- position: 4
2
- label: 'Image Layouts'
@@ -1,37 +0,0 @@
1
- ---
2
- title: Image Left
3
- description: Image on left with content on right
4
- ---
5
-
6
- # Image Left Layout
7
-
8
- Display an image on the left side with content on the right.
9
-
10
- ## Parameters
11
-
12
- | Parameter | Type | Default | Description |
13
- |-----------|------|---------|-------------|
14
- | `imageSrc` | string | - | Image URL or path |
15
- | `imageRatio` | string | `'50%'` | Image width percentage |
16
- | `imageScale` | string | `'100%'` | Image size within container |
17
- | `imageAlign` | string | `'center'` | Image alignment |
18
- | `logo` | boolean | `true` | Show/hide logo |
19
- | `textAlignment` | string | `'center'` | Content vertical alignment |
20
-
21
- ## Basic Example
22
-
23
- ```markdown
24
- ---
25
- layout: image-left
26
- imageSrc: /screenshot.png
27
- imageRatio: 40%
28
- ---
29
-
30
- # Feature Overview
31
-
32
- The image shows our new dashboard with:
33
-
34
- - Real-time metrics
35
- - Custom alerts
36
- - Team collaboration
37
- ```
@@ -1,37 +0,0 @@
1
- ---
2
- title: Image Right
3
- description: Content on left with image on right
4
- ---
5
-
6
- # Image Right Layout
7
-
8
- Display content on the left with an image on the right.
9
-
10
- ## Parameters
11
-
12
- | Parameter | Type | Default | Description |
13
- |-----------|------|---------|-------------|
14
- | `imageSrc` | string | - | Image URL or path |
15
- | `imageRatio` | string | `'50%'` | Image width percentage |
16
- | `imageScale` | string | `'100%'` | Image size within container |
17
- | `imageAlign` | string | `'center'` | Image alignment |
18
- | `logo` | boolean | `false` | Show/hide logo |
19
- | `textAlignment` | string | `'center'` | Content vertical alignment |
20
-
21
- ## Basic Example
22
-
23
- ```markdown
24
- ---
25
- layout: image-right
26
- imageSrc: /code-example.png
27
- imageRatio: 45%
28
- ---
29
-
30
- # Code Explanation
31
-
32
- This example demonstrates:
33
-
34
- - Dependency injection
35
- - Error handling
36
- - Async/await pattern
37
- ```