@sp-days-framework/docusaurus-plugin-interactive-tasks 1.0.5-rc2 → 1.1.0-beta2
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.
- package/docs/advanced-configuration.mdx +275 -0
- package/docs/changelog.mdx +192 -0
- package/docs/example-advanced-usage.mdx +308 -0
- package/docs/example-basic-usage.mdx +132 -0
- package/docs/index.mdx +159 -0
- package/docs/install.mdx +121 -0
- package/docs/known-issues.mdx +164 -0
- package/docs/logo-docusaurus.svg +17 -0
- package/docs/progression.mdx +153 -0
- package/docs/tasks.mdx +433 -0
- package/package.json +5 -2
- package/publish-package-docs.js +20 -0
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
---
|
|
2
|
+
toc_max_heading_level: 2
|
|
3
|
+
sidebar_position: 4.2
|
|
4
|
+
sidebar_custom_props:
|
|
5
|
+
section: "Releases"
|
|
6
|
+
section_position: 4
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# Known Issues
|
|
10
|
+
|
|
11
|
+
## Theme Resolution Chain Breaking
|
|
12
|
+
|
|
13
|
+
### Overview
|
|
14
|
+
|
|
15
|
+
The Interactive Tasks plugin does not follow Docusaurus best practices for theme swizzling. The current implementation swizzles `DocRoot` using direct imports from `@docusaurus/theme-classic`, which bypasses Docusaurus's theme resolution system. This causes compatibility issues when used alongside other plugins that also swizzle MDX components.
|
|
16
|
+
|
|
17
|
+
### Technical Explanation
|
|
18
|
+
|
|
19
|
+
#### How Docusaurus Theme Resolution Works
|
|
20
|
+
|
|
21
|
+
Docusaurus uses webpack aliases (`@theme/*` and `@theme-original/*`) to create a resolution chain when multiple plugins swizzle the same component:
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
User Site
|
|
25
|
+
↓ @theme/MDXComponents
|
|
26
|
+
Plugin A's MDXComponents
|
|
27
|
+
↓ @theme-original/MDXComponents
|
|
28
|
+
Plugin B's MDXComponents
|
|
29
|
+
↓ @theme-original/MDXComponents
|
|
30
|
+
Theme-Classic Base Components
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Each plugin receives the previous plugin's components and can add or modify them, creating a merged component set.
|
|
34
|
+
|
|
35
|
+
#### Why This Plugin Breaks the Chain
|
|
36
|
+
|
|
37
|
+
The Interactive Tasks plugin swizzles `DocRoot` to provide the `TaskProvider` context that wraps the entire docs layout:
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
// This direct import bypasses theme resolution
|
|
41
|
+
import OriginalDocRoot from '@docusaurus/theme-classic/lib/theme/DocRoot';
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
**Why we use direct imports:**
|
|
45
|
+
- Importing via `@theme-original/DocRoot` would create infinite recursion if we're the only plugin swizzling DocRoot
|
|
46
|
+
- DocRoot needs to wrap both sidebar and content for task progress tracking
|
|
47
|
+
- Alternative components like `Root` don't provide access to docs-specific context
|
|
48
|
+
|
|
49
|
+
**Side effects:**
|
|
50
|
+
- Direct imports bypass webpack's theme alias system
|
|
51
|
+
- This creates inconsistencies in the module resolution graph
|
|
52
|
+
- Subsequent `@theme-original/*` imports in other plugins may fail to resolve correctly
|
|
53
|
+
- Standard MDX components may not propagate through the theme chain
|
|
54
|
+
|
|
55
|
+
#### Current Workaround
|
|
56
|
+
|
|
57
|
+
To compensate for breaking the theme chain, this plugin's `MDXComponents.tsx` explicitly imports and re-exports all standard components:
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
// Defensive imports to maintain component availability
|
|
61
|
+
import MDXCode from '@docusaurus/theme-classic/lib/theme/MDXComponents/Code';
|
|
62
|
+
import MDXDetails from '@docusaurus/theme-classic/lib/theme/MDXComponents/Details';
|
|
63
|
+
// ... etc
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
This ensures that standard components (`Details`, `Code`, `Pre`, etc.) plus task components (`Task`, `Hint`, `Solution`, etc.) are available in MDX files.
|
|
67
|
+
|
|
68
|
+
### Impact on Other Plugins
|
|
69
|
+
|
|
70
|
+
When another plugin loads after Interactive Tasks and tries to swizzle `MDXComponents`:
|
|
71
|
+
|
|
72
|
+
1. The other plugin imports `@theme-original/MDXComponents`
|
|
73
|
+
2. Due to the broken chain, it may not receive all expected components
|
|
74
|
+
3. Standard components like `Details` might be missing
|
|
75
|
+
4. Task components might not be available
|
|
76
|
+
|
|
77
|
+
**Workaround for compatible plugins:** Other plugins must adopt the same defensive pattern of explicitly importing standard components from theme-classic.
|
|
78
|
+
|
|
79
|
+
### Affected Scenarios
|
|
80
|
+
|
|
81
|
+
This issue manifests when:
|
|
82
|
+
|
|
83
|
+
- Multiple plugins swizzle `MDXComponents`
|
|
84
|
+
- Pages use standard MDX components (`<details>`, code blocks, etc.)
|
|
85
|
+
- Pages use Interactive Tasks components (`<Task>`, `<Hint>`, etc.)
|
|
86
|
+
|
|
87
|
+
**Symptoms:**
|
|
88
|
+
- Build failures with "Expected component to be defined" errors
|
|
89
|
+
- Components missing at runtime
|
|
90
|
+
- Inconsistent component availability across different pages
|
|
91
|
+
|
|
92
|
+
### Future Plans
|
|
93
|
+
|
|
94
|
+
#### Short-term
|
|
95
|
+
We're maintaining the current implementation because:
|
|
96
|
+
- It works reliably when plugins follow the defensive pattern
|
|
97
|
+
- The functionality (task progress tracking across sidebar and content) requires this scope
|
|
98
|
+
- Migration would be a breaking change for existing users
|
|
99
|
+
|
|
100
|
+
#### Long-term (Docusaurus 4.0+)
|
|
101
|
+
We plan to refactor the plugin to follow best practices:
|
|
102
|
+
|
|
103
|
+
**Option 1: Site-level Root Component**
|
|
104
|
+
Remove `DocRoot` swizzle and require users to add `TaskProvider` in their site's `src/theme/Root.tsx`:
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
import React from 'react';
|
|
108
|
+
import { TaskProvider } from '@sp-days-framework/docusaurus-plugin-interactive-tasks';
|
|
109
|
+
|
|
110
|
+
export default function Root({ children }) {
|
|
111
|
+
return <TaskProvider>{children}</TaskProvider>;
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
**Pros:**
|
|
116
|
+
- Restores proper theme resolution
|
|
117
|
+
- Eliminates direct imports
|
|
118
|
+
- More maintainable
|
|
119
|
+
|
|
120
|
+
**Cons:**
|
|
121
|
+
- Breaking change
|
|
122
|
+
- Additional setup for users
|
|
123
|
+
- May not have docs-specific context
|
|
124
|
+
|
|
125
|
+
**Option 2: Docusaurus 4.0 APIs**
|
|
126
|
+
Wait for Docusaurus 4.0 which may provide:
|
|
127
|
+
- Better support for context providers
|
|
128
|
+
- Dedicated hooks for global context
|
|
129
|
+
- Clearer theme composition boundaries
|
|
130
|
+
|
|
131
|
+
### Compatibility Guidelines
|
|
132
|
+
|
|
133
|
+
If you're developing plugins that work alongside Interactive Tasks:
|
|
134
|
+
|
|
135
|
+
1. **Import standard components explicitly** in your `MDXComponents.tsx`:
|
|
136
|
+
```tsx
|
|
137
|
+
import MDXDetails from '@docusaurus/theme-classic/lib/theme/MDXComponents/Details';
|
|
138
|
+
import MDXCode from '@docusaurus/theme-classic/lib/theme/MDXComponents/Code';
|
|
139
|
+
// ... other standard components
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
2. **Re-export all components** including those from `@theme-original`:
|
|
143
|
+
```tsx
|
|
144
|
+
export default {
|
|
145
|
+
...MDXComponents,
|
|
146
|
+
details: MDXDetails,
|
|
147
|
+
code: MDXCode,
|
|
148
|
+
// Your custom components
|
|
149
|
+
};
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
3. **Test with Interactive Tasks** enabled to ensure compatibility
|
|
153
|
+
|
|
154
|
+
### Related Documentation
|
|
155
|
+
|
|
156
|
+
- [Docusaurus Swizzling Guide](https://docusaurus.io/docs/swizzling)
|
|
157
|
+
- [Wrapping your site with Root](https://docusaurus.io/docs/swizzling#wrapper-your-site-with-root)
|
|
158
|
+
- See `/PLUGIN-ISSUES.md` in the repository root for detailed technical analysis
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
162
|
+
**Last Updated:** December 9, 2025
|
|
163
|
+
**Status:** No immediate fix planned, monitoring Docusaurus 4.0 development
|
|
164
|
+
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="218" viewBox="0 0 256 218">
|
|
2
|
+
<path fill="#fff" d="M126.031 45.949h110.277v44.636H126.031z" />
|
|
3
|
+
<path fill="#3ecc5f" d="M26.256 191.672c-9.712 0-18.173-5.287-22.715-13.128A26.1 26.1 0 0 0 0 191.672c0 14.501 11.755 26.256 26.256 26.256h26.257v-26.256z" />
|
|
4
|
+
<path fill="#3ecc5f" d="m144.385 53.006l91.923-5.744V34.133c0-14.501-11.756-26.256-26.256-26.256H91.898l-3.282-5.685c-1.46-2.527-5.106-2.527-6.564 0L78.77 7.877l-3.282-5.685c-1.46-2.527-5.106-2.527-6.564 0l-3.282 5.685l-3.282-5.685c-1.46-2.527-5.106-2.527-6.564 0l-3.283 5.685l-.085.004l-5.438-5.437c-2.062-2.062-5.583-1.12-6.34 1.7l-1.795 6.7l-6.818-1.828c-2.818-.754-5.397 1.824-4.64 4.643l1.826 6.817l-6.7 1.795c-2.818.756-3.762 4.278-1.7 6.34l5.437 5.438l-.003.084l-5.686 3.282c-2.526 1.459-2.526 5.106 0 6.564l5.686 3.283l-5.686 3.282c-2.526 1.458-2.526 5.105 0 6.564l5.686 3.282l-5.686 3.282c-2.526 1.458-2.526 5.105 0 6.564l5.686 3.282l-5.686 3.282c-2.526 1.459-2.526 5.106 0 6.564l5.686 3.282l-5.686 3.282c-2.526 1.459-2.526 5.106 0 6.564l5.686 3.282l-5.686 3.282c-2.526 1.459-2.526 5.106 0 6.565l5.686 3.282l-5.686 3.282c-2.526 1.458-2.526 5.105 0 6.564l5.686 3.282l-5.686 3.282c-2.526 1.458-2.526 5.105 0 6.564l5.686 3.282l-5.686 3.282c-2.526 1.459-2.526 5.106 0 6.564l5.686 3.282l-5.686 3.282c-2.526 1.459-2.526 5.106 0 6.564l5.686 3.282l-5.686 3.282c-2.526 1.459-2.526 5.106 0 6.565l5.686 3.282l-5.686 3.282c-2.526 1.458-2.526 5.105 0 6.564l5.686 3.282c0 14.501 11.755 26.256 26.256 26.256h157.539c14.5 0 26.256-11.755 26.256-26.256V86.646l-91.923-5.745c-7.365-.46-13.102-6.568-13.102-13.947c0-7.38 5.737-13.487 13.102-13.948" />
|
|
5
|
+
<path fill="#3ecc5f" d="M183.795 217.928h39.384v-52.513h-39.384z" />
|
|
6
|
+
<path fill="#44d860" d="M249.436 185.108c-.288 0-.562.048-.839.084c-.05-.197-.097-.395-.152-.592a6.563 6.563 0 0 0-2.527-12.62c-1.494 0-2.856.52-3.96 1.36a35 35 0 0 0-.44-.442a6.5 6.5 0 0 0 1.328-3.92a6.563 6.563 0 0 0-12.602-2.573c-.195-.055-.39-.1-.584-.15c.035-.278.084-.552.084-.84a6.563 6.563 0 0 0-6.565-6.564a6.563 6.563 0 0 0-6.564 6.564c0 .288.049.562.084.84c-.194.05-.39.095-.584.15a6.563 6.563 0 0 0-12.602 2.572c0 1.477.505 2.824 1.328 3.921c-4.88 4.769-7.918 11.413-7.918 18.774c0 14.501 11.755 26.256 26.256 26.256c12.26 0 22.528-8.415 25.418-19.776c.277.035.551.084.839.084a6.563 6.563 0 0 0 6.564-6.564a6.563 6.563 0 0 0-6.564-6.564" />
|
|
7
|
+
<path fill="#3ecc5f" d="M196.923 139.159h39.385v-26.256h-39.385z" />
|
|
8
|
+
<path fill="#44d860" d="M249.436 129.313a3.282 3.282 0 1 0 0-6.564c-.143 0-.281.025-.419.042c-.026-.099-.048-.197-.076-.296a3.283 3.283 0 0 0-1.264-6.31c-.747 0-1.429.258-1.98.68a9 9 0 0 0-.22-.22a3.25 3.25 0 0 0 .664-1.962a3.282 3.282 0 0 0-6.302-1.286a13 13 0 0 0-3.531-.494c-7.25 0-13.129 5.878-13.129 13.128s5.88 13.128 13.129 13.128c1.226 0 2.406-.181 3.531-.495a3.282 3.282 0 0 0 6.302-1.285c0-.74-.252-1.414-.665-1.962q.113-.108.221-.22c.551.421 1.233.68 1.98.68a3.282 3.282 0 0 0 1.264-6.31c.028-.098.05-.198.076-.296c.138.017.276.042.419.042" />
|
|
9
|
+
<path d="M78.77 50.544a3.28 3.28 0 0 1-3.283-3.282c0-5.43-4.416-9.847-9.846-9.847s-9.846 4.417-9.846 9.847a3.282 3.282 0 1 1-6.564 0c0-9.05 7.36-16.41 16.41-16.41s16.41 7.36 16.41 16.41a3.28 3.28 0 0 1-3.282 3.282" />
|
|
10
|
+
<path fill="#ffff50" d="M131.282 217.928h78.77c14.5 0 26.256-11.755 26.256-26.256V99.774h-78.77c-14.501 0-26.256 11.755-26.256 26.257z" />
|
|
11
|
+
<path d="M216.641 140.472h-65.692a1.312 1.312 0 1 1 0-2.626h65.692a1.312 1.312 0 1 1 0 2.626m0 26.256h-65.692a1.312 1.312 0 1 1 0-2.625h65.692a1.312 1.312 0 1 1 0 2.625m0 26.257h-65.692a1.312 1.312 0 1 1 0-2.626h65.692a1.312 1.312 0 1 1 0 2.626m0-65.398h-65.692a1.312 1.312 0 1 1 0-2.626h65.692a1.312 1.312 0 1 1 0 2.626m0 26.013h-65.692a1.312 1.312 0 1 1 0-2.626h65.692a1.312 1.312 0 1 1 0 2.626m0 26.256h-65.692a1.312 1.312 0 1 1 0-2.625h65.692a1.312 1.312 0 1 1 0 2.625m19.667-121.289c-.016 0-.03-.008-.045-.007c-4.057.138-5.976 4.196-7.67 7.776c-1.766 3.74-3.133 6.174-5.373 6.1c-2.48-.089-3.898-2.89-5.4-5.856c-1.724-3.404-3.694-7.266-7.828-7.122c-3.999.137-5.925 3.668-7.623 6.783c-1.808 3.32-3.038 5.337-5.41 5.244c-2.53-.092-3.875-2.37-5.43-5.006c-1.735-2.935-3.74-6.236-7.793-6.123c-3.93.135-5.862 3.131-7.566 5.776c-1.802 2.797-3.065 4.5-5.468 4.4c-2.59-.094-3.928-1.983-5.476-4.171c-1.738-2.46-3.697-5.242-7.739-5.107c-3.844.131-5.775 2.585-7.478 4.75c-1.617 2.053-2.88 3.678-5.551 3.576a1.314 1.314 0 0 0-.095 2.626c3.96.132 5.967-2.365 7.709-4.578c1.545-1.964 2.879-3.66 5.505-3.748c2.528-.108 3.714 1.463 5.507 3.997c1.703 2.408 3.635 5.139 7.524 5.279c4.073.137 6.033-2.908 7.769-5.602c1.552-2.408 2.89-4.486 5.448-4.574c2.354-.088 3.635 1.773 5.442 4.833c1.702 2.884 3.631 6.152 7.597 6.296c4.103.142 6.084-3.44 7.81-6.61c1.495-2.741 2.907-5.331 5.407-5.417c2.354-.055 3.582 2.094 5.397 5.685c1.697 3.352 3.62 7.148 7.648 7.294q.111.004.222.004c4.022 0 5.93-4.037 7.62-7.607c1.496-3.164 2.911-6.145 5.34-6.266z" />
|
|
12
|
+
<path fill="#3ecc5f" d="M105.026 217.928h52.512v-52.513h-52.512z" />
|
|
13
|
+
<path fill="#44d860" d="M183.795 185.108c-.288 0-.562.048-.839.084c-.05-.197-.097-.395-.152-.592a6.563 6.563 0 0 0-2.527-12.62c-1.494 0-2.856.52-3.96 1.36a35 35 0 0 0-.44-.442a6.5 6.5 0 0 0 1.328-3.92a6.563 6.563 0 0 0-12.602-2.573c-.195-.055-.39-.1-.584-.15c.035-.278.084-.552.084-.84a6.563 6.563 0 0 0-6.565-6.564a6.563 6.563 0 0 0-6.564 6.564c0 .288.049.562.084.84c-.194.05-.39.095-.584.15a6.563 6.563 0 0 0-12.602 2.572c0 1.477.505 2.824 1.328 3.921c-4.88 4.769-7.918 11.413-7.918 18.774c0 14.501 11.755 26.256 26.256 26.256c12.26 0 22.528-8.415 25.418-19.776c.277.035.551.084.839.084a6.563 6.563 0 0 0 6.564-6.564a6.563 6.563 0 0 0-6.564-6.564" />
|
|
14
|
+
<path fill="#3ecc5f" d="M105.026 139.159h52.512v-26.256h-52.512z" />
|
|
15
|
+
<path fill="#44d860" d="M170.667 129.313a3.282 3.282 0 1 0 0-6.564c-.143 0-.281.025-.42.042q-.036-.148-.075-.296a3.283 3.283 0 0 0-1.265-6.31c-.747 0-1.428.258-1.98.68a9 9 0 0 0-.22-.22a3.25 3.25 0 0 0 .664-1.962a3.282 3.282 0 0 0-6.301-1.286a13 13 0 0 0-3.532-.494c-7.249 0-13.128 5.878-13.128 13.128s5.88 13.128 13.128 13.128a13 13 0 0 0 3.532-.495a3.282 3.282 0 0 0 6.301-1.285a3.25 3.25 0 0 0-.664-1.962q.113-.108.22-.22c.552.421 1.233.68 1.98.68a3.282 3.282 0 0 0 1.265-6.31l.076-.296c.138.017.276.042.419.042" />
|
|
16
|
+
<path d="M183.795 32.492c-.21 0-.433-.026-.643-.065a3.3 3.3 0 0 1-.617-.184a3.4 3.4 0 0 1-.566-.302a5 5 0 0 1-.5-.407c-.142-.158-.287-.315-.405-.499a3.5 3.5 0 0 1-.303-.564a3.4 3.4 0 0 1-.248-1.26c0-.21.026-.434.065-.644s.105-.407.183-.617c.08-.197.185-.38.303-.565c.118-.17.263-.34.406-.498c.159-.145.328-.29.499-.407a3.2 3.2 0 0 1 1.183-.486a3 3 0 0 1 1.286 0c.209.04.42.105.617.184c.196.078.38.183.565.302c.17.118.34.262.499.407c.144.157.288.328.407.498c.118.184.223.368.301.565c.08.21.145.407.184.617c.038.21.066.433.066.643a3.33 3.33 0 0 1-.958 2.324a5 5 0 0 1-.5.407a3.4 3.4 0 0 1-.564.302a3.4 3.4 0 0 1-.617.184c-.21.04-.433.065-.643.065m26.256-1.641a3.35 3.35 0 0 1-2.325-.958a5 5 0 0 1-.405-.499a3.5 3.5 0 0 1-.304-.564a3.4 3.4 0 0 1-.248-1.26c0-.867.355-1.707.957-2.324c.16-.145.328-.29.5-.407a3.2 3.2 0 0 1 1.182-.486c.42-.092.866-.092 1.287 0c.208.04.42.105.617.184c.195.078.38.183.564.302c.17.118.34.262.499.407c.603.617.958 1.457.958 2.323a3.4 3.4 0 0 1-.249 1.261c-.092.196-.184.38-.302.564c-.118.17-.263.341-.407.499a5 5 0 0 1-.499.407a3.4 3.4 0 0 1-.564.302a3.4 3.4 0 0 1-.617.184c-.21.039-.434.065-.644.065" />
|
|
17
|
+
</svg>
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
---
|
|
2
|
+
sidebar_position: 2.2
|
|
3
|
+
sidebar_label: "Progress"
|
|
4
|
+
sidebar_custom_props:
|
|
5
|
+
section: "Components"
|
|
6
|
+
section_position: 2
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
import Tabs from "@theme/Tabs";
|
|
10
|
+
import TabItem from "@theme/TabItem";
|
|
11
|
+
|
|
12
|
+
# Progress Components
|
|
13
|
+
|
|
14
|
+
Display task completion progress using the `TaskProgression` and `TaskProgressionOverview` components.
|
|
15
|
+
|
|
16
|
+
## Basic Usage
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
<Tabs>
|
|
20
|
+
<TabItem value="single" label="Single Page" default>
|
|
21
|
+
Display progress for a specific document with a visual progress indicator.
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
```mdx
|
|
25
|
+
<TaskProgression path="./task-component/basic-usage.mdx" />
|
|
26
|
+
```
|
|
27
|
+
<div style={{ position: 'relative', marginTop: '2rem', display: 'flex', justifyContent: 'center' }}>
|
|
28
|
+
<div style={{ position: 'absolute', left: '50%', marginTop: '4px', transform: 'translateX(-50%)', fontWeight: 500, color: 'var(--ifm-color-emphasis-600)' }}>
|
|
29
|
+
Preview
|
|
30
|
+
</div>
|
|
31
|
+
<div style={{ borderRadius: '12px', padding: '2rem 1.7rem 0.4rem', width: '-webkit-fill-available', background: 'var(--ifm-color-emphasis-200)' }}>
|
|
32
|
+
<TaskProgression path="./task-component/basic-usage.mdx" />
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</TabItem>
|
|
36
|
+
<TabItem value="current" label="Current Page">
|
|
37
|
+
Reference the current page using `.` as the path:
|
|
38
|
+
|
|
39
|
+
```mdx
|
|
40
|
+
<TaskProgression path="." />
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
<div style={{ position: 'relative', marginTop: '2rem', display: 'flex', justifyContent: 'center' }}>
|
|
44
|
+
<div style={{ position: 'absolute', left: '50%', marginTop: '4px', transform: 'translateX(-50%)', fontWeight: 500, color: 'var(--ifm-color-emphasis-600)' }}>
|
|
45
|
+
Preview
|
|
46
|
+
</div>
|
|
47
|
+
<div style={{ borderRadius: '12px', padding: '2rem 1.7rem 0.4rem', width: '-webkit-fill-available', background: 'var(--ifm-color-emphasis-200)' }}>
|
|
48
|
+
<TaskProgression path="." />
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
<br/>
|
|
52
|
+
|
|
53
|
+
:::note
|
|
54
|
+
If no tasks is found on the page the Task Progression will show a error.
|
|
55
|
+
:::
|
|
56
|
+
</TabItem>
|
|
57
|
+
<TabItem value="result" label="Overview">
|
|
58
|
+
Display progress across all documents in the docs plugin instance.
|
|
59
|
+
|
|
60
|
+
```mdx
|
|
61
|
+
<TaskProgressionOverview />
|
|
62
|
+
```
|
|
63
|
+
<div style={{ position: 'relative', marginTop: '2rem', display: 'flex', justifyContent: 'center' }}>
|
|
64
|
+
<div style={{ position: 'absolute', left: '50%', marginTop: '4px', transform: 'translateX(-50%)', fontWeight: 500, color: 'var(--ifm-color-emphasis-600)' }}>
|
|
65
|
+
Preview
|
|
66
|
+
</div>
|
|
67
|
+
<div style={{ borderRadius: '12px', padding: '2rem 1rem 1rem', width: '-webkit-fill-available', background: 'var(--ifm-color-emphasis-200)' }}>
|
|
68
|
+
<TaskProgressionOverview />
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
</TabItem>
|
|
72
|
+
</Tabs>
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
## Path Formats
|
|
77
|
+
|
|
78
|
+
The component supports multiple path formats:
|
|
79
|
+
|
|
80
|
+
```mdx
|
|
81
|
+
<!-- Current page -->
|
|
82
|
+
<TaskProgression path="." />
|
|
83
|
+
|
|
84
|
+
<!-- Absolute path -->
|
|
85
|
+
<TaskProgression path="/docs/tasks/creating-tasks" />
|
|
86
|
+
|
|
87
|
+
<!-- Relative to current page -->
|
|
88
|
+
<TaskProgression path="./sibling-page" />
|
|
89
|
+
<TaskProgression path="../parent-page" />
|
|
90
|
+
|
|
91
|
+
<!-- With file extension -->
|
|
92
|
+
<TaskProgression path="/docs/tasks/tasks-showcase.mdx" />
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
## Examples
|
|
98
|
+
|
|
99
|
+
### Learning Module Overview
|
|
100
|
+
|
|
101
|
+
Create an overview page showing progress across all modules:
|
|
102
|
+
|
|
103
|
+
```mdx
|
|
104
|
+
---
|
|
105
|
+
title: Course Overview
|
|
106
|
+
---
|
|
107
|
+
|
|
108
|
+
# Welcome to the Course
|
|
109
|
+
|
|
110
|
+
Track your progress across all modules:
|
|
111
|
+
|
|
112
|
+
<TaskProgressionOverview />
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
### Module Navigation
|
|
116
|
+
|
|
117
|
+
Link between related modules with progress indicators:
|
|
118
|
+
|
|
119
|
+
```mdx
|
|
120
|
+
## Prerequisites
|
|
121
|
+
|
|
122
|
+
Make sure you've completed the previous module:
|
|
123
|
+
|
|
124
|
+
<TaskProgression path="../module-01/index" />
|
|
125
|
+
|
|
126
|
+
## Current Module
|
|
127
|
+
|
|
128
|
+
Your progress in this module:
|
|
129
|
+
|
|
130
|
+
<TaskProgression path="." />
|
|
131
|
+
|
|
132
|
+
## Next Steps
|
|
133
|
+
|
|
134
|
+
Continue to the next module:
|
|
135
|
+
|
|
136
|
+
<TaskProgression path="../module-03/index" />
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
### Section Summary
|
|
140
|
+
|
|
141
|
+
Show progress for the current page at the top:
|
|
142
|
+
|
|
143
|
+
```mdx
|
|
144
|
+
# Introduction to React
|
|
145
|
+
|
|
146
|
+
<TaskProgression path="." />
|
|
147
|
+
|
|
148
|
+
Complete the tasks below to learn React fundamentals.
|
|
149
|
+
|
|
150
|
+
::::task[Setup React Project]
|
|
151
|
+
...
|
|
152
|
+
::::
|
|
153
|
+
```
|