@sp-days-framework/docusaurus-plugin-interactive-tasks 1.0.0

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 (173) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +339 -0
  3. package/lib/contexts/DocTaskCounterContext.d.ts +15 -0
  4. package/lib/contexts/DocTaskCounterContext.d.ts.map +1 -0
  5. package/lib/contexts/DocTaskCounterContext.js +7 -0
  6. package/lib/contexts/DocTaskCounterContext.js.map +1 -0
  7. package/lib/contexts/TaskContext.d.ts +72 -0
  8. package/lib/contexts/TaskContext.d.ts.map +1 -0
  9. package/lib/contexts/TaskContext.js +6 -0
  10. package/lib/contexts/TaskContext.js.map +1 -0
  11. package/lib/index.d.ts +14 -0
  12. package/lib/index.d.ts.map +1 -0
  13. package/lib/index.js +59 -0
  14. package/lib/index.js.map +1 -0
  15. package/lib/plugin/TaskRegistryPlugin.d.ts +27 -0
  16. package/lib/plugin/TaskRegistryPlugin.d.ts.map +1 -0
  17. package/lib/plugin/TaskRegistryPlugin.js +328 -0
  18. package/lib/plugin/TaskRegistryPlugin.js.map +1 -0
  19. package/lib/plugin/remarkTaskDirective.d.ts +29 -0
  20. package/lib/plugin/remarkTaskDirective.d.ts.map +1 -0
  21. package/lib/plugin/remarkTaskDirective.js +277 -0
  22. package/lib/plugin/remarkTaskDirective.js.map +1 -0
  23. package/lib/theme/DocRoot/Layout/index.d.ts +14 -0
  24. package/lib/theme/DocRoot/Layout/index.d.ts.map +1 -0
  25. package/lib/theme/DocRoot/Layout/index.js +27 -0
  26. package/lib/theme/DocRoot/Layout/index.js.map +1 -0
  27. package/lib/theme/DocRoot/index.d.ts +22 -0
  28. package/lib/theme/DocRoot/index.d.ts.map +1 -0
  29. package/lib/theme/DocRoot/index.js +33 -0
  30. package/lib/theme/DocRoot/index.js.map +1 -0
  31. package/lib/theme/DocSidebar/Desktop/CollapseButton/index.d.ts +4 -0
  32. package/lib/theme/DocSidebar/Desktop/CollapseButton/index.d.ts.map +1 -0
  33. package/lib/theme/DocSidebar/Desktop/CollapseButton/index.js +24 -0
  34. package/lib/theme/DocSidebar/Desktop/CollapseButton/index.js.map +1 -0
  35. package/lib/theme/DocSidebar/Desktop/CollapseButton/styles.module.css +40 -0
  36. package/lib/theme/DocSidebar/Desktop/Content/index.d.ts +4 -0
  37. package/lib/theme/DocSidebar/Desktop/Content/index.d.ts.map +1 -0
  38. package/lib/theme/DocSidebar/Desktop/Content/index.js +67 -0
  39. package/lib/theme/DocSidebar/Desktop/Content/index.js.map +1 -0
  40. package/lib/theme/DocSidebar/Desktop/Content/styles.module.css +16 -0
  41. package/lib/theme/DocSidebar/Desktop/index.d.ts +6 -0
  42. package/lib/theme/DocSidebar/Desktop/index.d.ts.map +1 -0
  43. package/lib/theme/DocSidebar/Desktop/index.js +21 -0
  44. package/lib/theme/DocSidebar/Desktop/index.js.map +1 -0
  45. package/lib/theme/DocSidebar/Desktop/styles.module.css +37 -0
  46. package/lib/theme/DocSidebar/Mobile/index.d.ts +6 -0
  47. package/lib/theme/DocSidebar/Mobile/index.d.ts.map +1 -0
  48. package/lib/theme/DocSidebar/Mobile/index.js +29 -0
  49. package/lib/theme/DocSidebar/Mobile/index.js.map +1 -0
  50. package/lib/theme/DocSidebar/index.d.ts +4 -0
  51. package/lib/theme/DocSidebar/index.d.ts.map +1 -0
  52. package/lib/theme/DocSidebar/index.js +21 -0
  53. package/lib/theme/DocSidebar/index.js.map +1 -0
  54. package/lib/theme/DocSidebarItem/Category/index.d.ts +4 -0
  55. package/lib/theme/DocSidebarItem/Category/index.d.ts.map +1 -0
  56. package/lib/theme/DocSidebarItem/Category/index.js +316 -0
  57. package/lib/theme/DocSidebarItem/Category/index.js.map +1 -0
  58. package/lib/theme/DocSidebarItem/Category/styles.module.css +187 -0
  59. package/lib/theme/DocSidebarItem/Html/index.d.ts +4 -0
  60. package/lib/theme/DocSidebarItem/Html/index.d.ts.map +1 -0
  61. package/lib/theme/DocSidebarItem/Html/index.js +17 -0
  62. package/lib/theme/DocSidebarItem/Html/index.js.map +1 -0
  63. package/lib/theme/DocSidebarItem/Html/styles.module.css +6 -0
  64. package/lib/theme/DocSidebarItem/Link/index.d.ts +6 -0
  65. package/lib/theme/DocSidebarItem/Link/index.d.ts.map +1 -0
  66. package/lib/theme/DocSidebarItem/Link/index.js +149 -0
  67. package/lib/theme/DocSidebarItem/Link/index.js.map +1 -0
  68. package/lib/theme/DocSidebarItem/Link/styles.module.css +197 -0
  69. package/lib/theme/DocSidebarItem/index.d.ts +4 -0
  70. package/lib/theme/DocSidebarItem/index.d.ts.map +1 -0
  71. package/lib/theme/DocSidebarItem/index.js +22 -0
  72. package/lib/theme/DocSidebarItem/index.js.map +1 -0
  73. package/lib/theme/DocSidebarItems/index.d.ts +6 -0
  74. package/lib/theme/DocSidebarItems/index.d.ts.map +1 -0
  75. package/lib/theme/DocSidebarItems/index.js +48 -0
  76. package/lib/theme/DocSidebarItems/index.js.map +1 -0
  77. package/lib/theme/DocTaskCounterProvider/index.d.ts +20 -0
  78. package/lib/theme/DocTaskCounterProvider/index.d.ts.map +1 -0
  79. package/lib/theme/DocTaskCounterProvider/index.js +105 -0
  80. package/lib/theme/DocTaskCounterProvider/index.js.map +1 -0
  81. package/lib/theme/MDXComponents.d.ts +19 -0
  82. package/lib/theme/MDXComponents.d.ts.map +1 -0
  83. package/lib/theme/MDXComponents.js +52 -0
  84. package/lib/theme/MDXComponents.js.map +1 -0
  85. package/lib/theme/Root.d.ts +9 -0
  86. package/lib/theme/Root.d.ts.map +1 -0
  87. package/lib/theme/Root.js +105 -0
  88. package/lib/theme/Root.js.map +1 -0
  89. package/lib/theme/Task/Hint/index.d.ts +14 -0
  90. package/lib/theme/Task/Hint/index.d.ts.map +1 -0
  91. package/lib/theme/Task/Hint/index.js +23 -0
  92. package/lib/theme/Task/Hint/index.js.map +1 -0
  93. package/lib/theme/Task/Hint/styles.module.css +72 -0
  94. package/lib/theme/Task/Solution/index.d.ts +14 -0
  95. package/lib/theme/Task/Solution/index.d.ts.map +1 -0
  96. package/lib/theme/Task/Solution/index.js +23 -0
  97. package/lib/theme/Task/Solution/index.js.map +1 -0
  98. package/lib/theme/Task/Solution/styles.module.css +71 -0
  99. package/lib/theme/Task/Text/index.d.ts +14 -0
  100. package/lib/theme/Task/Text/index.d.ts.map +1 -0
  101. package/lib/theme/Task/Text/index.js +18 -0
  102. package/lib/theme/Task/Text/index.js.map +1 -0
  103. package/lib/theme/Task/Text/styles.module.css +39 -0
  104. package/lib/theme/Task/index.d.ts +11 -0
  105. package/lib/theme/Task/index.d.ts.map +1 -0
  106. package/lib/theme/Task/index.js +286 -0
  107. package/lib/theme/Task/index.js.map +1 -0
  108. package/lib/theme/Task/styles.module.css +529 -0
  109. package/lib/theme/TaskAutoHideToggle/index.d.ts +10 -0
  110. package/lib/theme/TaskAutoHideToggle/index.d.ts.map +1 -0
  111. package/lib/theme/TaskAutoHideToggle/index.js +79 -0
  112. package/lib/theme/TaskAutoHideToggle/index.js.map +1 -0
  113. package/lib/theme/TaskAutoHideToggle/styles.module.css +41 -0
  114. package/lib/theme/TaskExample/index.d.ts +16 -0
  115. package/lib/theme/TaskExample/index.d.ts.map +1 -0
  116. package/lib/theme/TaskExample/index.js +249 -0
  117. package/lib/theme/TaskExample/index.js.map +1 -0
  118. package/lib/theme/TaskPlaceholder/README.md +119 -0
  119. package/lib/theme/TaskPlaceholder/index.d.ts +23 -0
  120. package/lib/theme/TaskPlaceholder/index.d.ts.map +1 -0
  121. package/lib/theme/TaskPlaceholder/index.js +293 -0
  122. package/lib/theme/TaskPlaceholder/index.js.map +1 -0
  123. package/lib/theme/TaskProgression/index.d.ts +11 -0
  124. package/lib/theme/TaskProgression/index.d.ts.map +1 -0
  125. package/lib/theme/TaskProgression/index.js +131 -0
  126. package/lib/theme/TaskProgression/index.js.map +1 -0
  127. package/lib/theme/TaskProgression/styles.module.css +162 -0
  128. package/lib/theme/TaskProgressionOverview/index.d.ts +10 -0
  129. package/lib/theme/TaskProgressionOverview/index.d.ts.map +1 -0
  130. package/lib/theme/TaskProgressionOverview/index.js +123 -0
  131. package/lib/theme/TaskProgressionOverview/index.js.map +1 -0
  132. package/lib/theme/TaskProgressionOverview/styles.module.css +159 -0
  133. package/lib/theme/TaskProvider/index.d.ts +15 -0
  134. package/lib/theme/TaskProvider/index.d.ts.map +1 -0
  135. package/lib/theme/TaskProvider/index.js +134 -0
  136. package/lib/theme/TaskProvider/index.js.map +1 -0
  137. package/lib/utils/badgeStyles.d.ts +29 -0
  138. package/lib/utils/badgeStyles.d.ts.map +1 -0
  139. package/lib/utils/badgeStyles.js +60 -0
  140. package/lib/utils/badgeStyles.js.map +1 -0
  141. package/lib/utils/icons.d.ts +38 -0
  142. package/lib/utils/icons.d.ts.map +1 -0
  143. package/lib/utils/icons.js +53 -0
  144. package/lib/utils/icons.js.map +1 -0
  145. package/lib/utils/logger.d.ts +38 -0
  146. package/lib/utils/logger.d.ts.map +1 -0
  147. package/lib/utils/logger.js +72 -0
  148. package/lib/utils/logger.js.map +1 -0
  149. package/lib/utils/storage.d.ts +33 -0
  150. package/lib/utils/storage.d.ts.map +1 -0
  151. package/lib/utils/storage.js +105 -0
  152. package/lib/utils/storage.js.map +1 -0
  153. package/lib/utils/useDocTaskStats.d.ts +58 -0
  154. package/lib/utils/useDocTaskStats.d.ts.map +1 -0
  155. package/lib/utils/useDocTaskStats.js +206 -0
  156. package/lib/utils/useDocTaskStats.js.map +1 -0
  157. package/lib/utils/usePluginId.d.ts +24 -0
  158. package/lib/utils/usePluginId.d.ts.map +1 -0
  159. package/lib/utils/usePluginId.js +61 -0
  160. package/lib/utils/usePluginId.js.map +1 -0
  161. package/lib/utils/useResolveDocPath.d.ts +33 -0
  162. package/lib/utils/useResolveDocPath.d.ts.map +1 -0
  163. package/lib/utils/useResolveDocPath.js +122 -0
  164. package/lib/utils/useResolveDocPath.js.map +1 -0
  165. package/lib/utils/useTaskBadgeAnimation.d.ts +16 -0
  166. package/lib/utils/useTaskBadgeAnimation.d.ts.map +1 -0
  167. package/lib/utils/useTaskBadgeAnimation.js +51 -0
  168. package/lib/utils/useTaskBadgeAnimation.js.map +1 -0
  169. package/lib/validateThemeConfig.d.ts +8 -0
  170. package/lib/validateThemeConfig.d.ts.map +1 -0
  171. package/lib/validateThemeConfig.js +15 -0
  172. package/lib/validateThemeConfig.js.map +1 -0
  173. package/package.json +82 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Helse Sør-Øst
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,339 @@
1
+ # Docusaurus Interactive Tasks Plugin
2
+
3
+ A Docusaurus plugin that transforms documentation into interactive learning experiences with tasks, hints, solutions, and automatic progress tracking.
4
+
5
+ ## Features
6
+
7
+ - **Interactive Tasks** - Collapsible task components with completion tracking
8
+ - **Hints & Solutions** - Optional toggleable hints and solutions for each task
9
+ - **Auto-Numbering** - Automatic task numbering per page
10
+ - **Persistent Progress** - Completion status saved to localStorage
11
+ - **Progress Tracking** - Visual progress indicators in sidebar and task progression components
12
+ - **Sidebar Badges** - Automatic completion badges (e.g., "2/5") in sidebar navigation
13
+ - **Auto-Collapse Toggle** - Navbar button to enable/disable auto-collapsing of completed tasks
14
+ - **Task Examples** - Non-persistent example tasks for demonstrations
15
+ - **Standard Markdown Support** - Full support for Docusaurus admonitions and markdown features within tasks
16
+
17
+ ## Installation
18
+
19
+ ```bash
20
+ npm install @sp-days-framework/docusaurus-plugin-interactive-tasks
21
+ ```
22
+
23
+ ## Quick Start
24
+
25
+ ### 1. Configure Docusaurus
26
+
27
+ Add the plugin and remark plugin to your `docusaurus.config.js`:
28
+
29
+ ```js
30
+ module.exports = {
31
+ plugins: ["@sp-days-framework/docusaurus-plugin-interactive-tasks"],
32
+
33
+ presets: [
34
+ [
35
+ "classic",
36
+ {
37
+ docs: {
38
+ remarkPlugins: [
39
+ require("@sp-days-framework/docusaurus-plugin-interactive-tasks")
40
+ .remarkTaskDirective,
41
+ ],
42
+ },
43
+ },
44
+ ],
45
+ ],
46
+ };
47
+ ```
48
+
49
+ ### 2. Create Your First Task
50
+
51
+ Use directive syntax in your MDX files:
52
+
53
+ ```mdx
54
+ ::::task[Setup Your Environment]
55
+
56
+ Install Node.js and npm. Verify the installation:
57
+
58
+ - `node --version`
59
+ - `npm --version`
60
+
61
+ :::hint
62
+ Check the official Node.js website for installation instructions.
63
+ :::
64
+
65
+ :::solution
66
+ Download from https://nodejs.org/. npm is included with Node.js.
67
+ :::
68
+
69
+ ::::
70
+ ```
71
+
72
+ **Syntax Rules:**
73
+
74
+ - Use **4 colons** (`::::`) for task containers
75
+ - Use **3 colons** (`:::`) for hint and solution blocks
76
+ - Tasks are automatically numbered within each page
77
+ - Completion state persists across sessions
78
+
79
+ ## Usage
80
+
81
+ ### Basic Task
82
+
83
+ A simple task without hints or solutions:
84
+
85
+ ```mdx
86
+ ::::task[Create a Component]
87
+
88
+ Create a new React component in `src/components/MyComponent.tsx`.
89
+
90
+ ::::
91
+ ```
92
+
93
+ ### Task with Hint
94
+
95
+ Add a hint to guide users:
96
+
97
+ ```mdx
98
+ ::::task[Configure TypeScript]
99
+
100
+ Set up TypeScript configuration for strict mode.
101
+
102
+ :::hint
103
+ Look for the `tsconfig.json` file in your project root.
104
+ :::
105
+
106
+ ::::
107
+ ```
108
+
109
+ ### Task with Hint and Solution
110
+
111
+ Provide both a hint and complete solution:
112
+
113
+ ```mdx
114
+ ::::task[Add API Route]
115
+
116
+ Create a new API endpoint for user authentication.
117
+
118
+ :::hint
119
+ API routes in Next.js go in the `app/api` directory.
120
+ :::
121
+
122
+ :::solution
123
+ Create `app/api/auth/route.ts`:
124
+
125
+ \`\`\`typescript
126
+ export async function POST(request: Request) {
127
+ const body = await request.json();
128
+ // Authentication logic here
129
+ return Response.json({ success: true });
130
+ }
131
+ \`\`\`
132
+ :::
133
+
134
+ ::::
135
+ ```
136
+
137
+ ### Task Examples (Non-Persistent)
138
+
139
+ For demonstration purposes, use task examples that don't save completion state:
140
+
141
+ ```mdx
142
+ ::::task-example[Optional Task]
143
+
144
+ This task won't save its completion state to localStorage.
145
+
146
+ :::hint
147
+ Perfect for examples or optional exercises.
148
+ :::
149
+
150
+ ::::
151
+ ```
152
+
153
+ **Key Differences from Regular Tasks:**
154
+ - Uses `::::task-example` instead of `::::task`
155
+ - Displays "Example N" numbering instead of "Task N"
156
+ - Completion state is not persisted to localStorage
157
+ - Not included in task registry or progress tracking
158
+ - Ideal for demonstrations, tutorials, or non-critical exercises
159
+
160
+ ### Using Docusaurus Features Inside Tasks
161
+
162
+ Tasks fully support standard Docusaurus markdown features and admonitions. You can use code blocks, tables, images, and Docusaurus admonitions (note, tip, info, warning, danger, caution, important) within task content.
163
+
164
+ ```mdx
165
+ ::::task[Setup Environment]
166
+
167
+ Follow these steps to configure your development environment.
168
+
169
+ :::note
170
+ Make sure you have Node.js 18+ installed before proceeding.
171
+ :::
172
+
173
+ \`\`\`bash
174
+ npm install
175
+ npm run dev
176
+ \`\`\`
177
+
178
+ :::
179
+
180
+ ::::
181
+ ```
182
+
183
+ ### Progress Tracking Components
184
+
185
+ #### TaskProgression
186
+
187
+ Display progress for a specific document:
188
+
189
+ ```mdx
190
+ import TaskProgression from "@theme/TaskProgression";
191
+
192
+ <TaskProgression path="/docs/module1" pluginId="default" />
193
+ ```
194
+
195
+ **Props:**
196
+
197
+ - `path` (string, required) - Path to the document (absolute or relative)
198
+ - Absolute: `"/docs/module1"` or `"/docs/module1.mdx"`
199
+ - Relative: `"./sibling-doc"` or `"../parent-doc"`
200
+ - Current page: `"."`
201
+ - `pluginId` (string, optional) - Used for [Docs Multi-instance](https://docusaurus.io/docs/docs-multi-instance) ID (default: `"default"`)
202
+
203
+ #### TaskProgressionOverview
204
+
205
+ Display progress across all documents:
206
+
207
+ ```mdx
208
+ import TaskProgressionOverview from "@theme/TaskProgressionOverview";
209
+
210
+ <TaskProgressionOverview pluginId="default" />
211
+ ```
212
+
213
+ **Props:**
214
+
215
+ - `pluginId` (string, optional) - Used for [Docs Multi-instance](https://docusaurus.io/docs/docs-multi-instance) ID (default: `"default"`)
216
+
217
+ ### Auto-Collapse Toggle
218
+
219
+ A navbar button is automatically injected that allows users to toggle auto-collapsing of completed tasks. When enabled, completed tasks automatically collapse to reduce visual clutter.
220
+
221
+ The toggle state persists across sessions and syncs across browser tabs in real-time.
222
+
223
+ ### Sidebar Badges
224
+
225
+ Task completion badges are automatically displayed in the sidebar navigation, showing progress like "2/5" for documents containing tasks. These badges:
226
+
227
+ - Update in real-time as tasks are completed
228
+ - Only appear on documents that contain tasks
229
+ - Support both individual documents and category aggregation
230
+
231
+ ## Configuration
232
+
233
+ ### Plugin Installation
234
+
235
+ The plugin requires **no configuration options** - it automatically discovers all Docusaurus docs instances:
236
+
237
+ ```js
238
+ module.exports = {
239
+ plugins: ["@sp-days-framework/docusaurus-plugin-interactive-tasks"],
240
+ };
241
+ ```
242
+
243
+ ### Remark Plugin Configuration
244
+
245
+ You must add the `remarkTaskDirective` to each docs instance's `remarkPlugins` array:
246
+
247
+ ```js
248
+ module.exports = {
249
+ presets: [
250
+ [
251
+ '@docusaurus/preset-classic',
252
+ {
253
+ docs: {
254
+ // Default docs instance
255
+ remarkPlugins: [
256
+ require('@sp-days-framework/docusaurus-plugin-interactive-tasks').remarkTaskDirective,
257
+ ],
258
+ },
259
+ },
260
+ ],
261
+ ],
262
+ plugins: [
263
+ '@sp-days-framework/docusaurus-plugin-interactive-tasks',
264
+ [
265
+ '@docusaurus/plugin-content-docs',
266
+ {
267
+ id: 'community',
268
+ path: 'community',
269
+ // Community docs instance
270
+ remarkPlugins: [
271
+ require('@sp-days-framework/docusaurus-plugin-interactive-tasks').remarkTaskDirective,
272
+ ],
273
+ },
274
+ ],
275
+ ],
276
+ };
277
+ ```
278
+
279
+ ### Multi-Instance Support
280
+
281
+ The plugin **fully supports** [Docusaurus multi-instance docs](https://docusaurus.io/docs/docs-multi-instance):
282
+
283
+ - Automatically discovers all docs plugin instances
284
+ - Task completion state is isolated per instance
285
+ - `TaskProgression` and `TaskProgressionOverview` auto-detect the parent doc's instance
286
+ - Sidebar badges work across all instances
287
+
288
+ **Example:** If you use `<TaskProgression path="./intro.mdx" />` in a `community` docs instance, it automatically uses `pluginId="community"`. To reference tasks from a different instance, specify `pluginId` explicitly:
289
+
290
+ ```mdx
291
+ <!-- In community docs, but showing tasks from default -->
292
+ <TaskProgression path="/docs/intro.mdx" pluginId="default" />
293
+ ```
294
+
295
+ ## How It Works
296
+
297
+ ### Task Persistence
298
+
299
+ - Task completion status is saved to `localStorage` with a unique key per task
300
+ - Keys are generated using: `task-{pluginId}-{docId}-{taskNumber}-{encodedName}`
301
+ - Progress syncs across browser tabs via storage events
302
+ - Task examples use `task-example` directive and don't persist state
303
+
304
+ ### Task Registry
305
+
306
+ During build, a webpack plugin scans all MDX files for task directives and generates a registry (`task-registry.json`) containing:
307
+
308
+ - Total task count per document
309
+ - Task names and numbers
310
+ - Document metadata (title, section, permalink)
311
+
312
+ This registry powers:
313
+
314
+ - Sidebar badges showing task completion (e.g., "2/5")
315
+ - TaskProgression components
316
+ - TaskProgressionOverview component
317
+
318
+ ### Path Resolution
319
+
320
+ The `TaskProgression` component supports multiple path formats:
321
+
322
+ ```mdx
323
+ <!-- Absolute path -->
324
+
325
+ <TaskProgression path="/docs/module1" />
326
+
327
+ <!-- Relative to current page -->
328
+
329
+ <TaskProgression path="./sibling-page" />
330
+ <TaskProgression path="../parent-page" />
331
+
332
+ <!-- Current page -->
333
+
334
+ <TaskProgression path="." />
335
+
336
+ <!-- With file extension -->
337
+
338
+ <TaskProgression path="/docs/module1.mdx" />
339
+ ```
@@ -0,0 +1,15 @@
1
+ /**
2
+ * Doc Task Counter Context
3
+ * Provides auto-incrementing task numbers for each doc page
4
+ */
5
+ export interface DocTaskCounterContextValue {
6
+ /**
7
+ * Get the next task number and increment the counter
8
+ */
9
+ getNextTaskNumber: () => number;
10
+ /**
11
+ * Reset the counter (called when navigating to a new page)
12
+ */
13
+ resetCounter: () => void;
14
+ }
15
+ //# sourceMappingURL=DocTaskCounterContext.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DocTaskCounterContext.d.ts","sourceRoot":"","sources":["../../src/contexts/DocTaskCounterContext.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,iBAAiB,EAAE,MAAM,MAAM,CAAC;IAEhC;;OAEG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B"}
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ /**
3
+ * Doc Task Counter Context
4
+ * Provides auto-incrementing task numbers for each doc page
5
+ */
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ //# sourceMappingURL=DocTaskCounterContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DocTaskCounterContext.js","sourceRoot":"","sources":["../../src/contexts/DocTaskCounterContext.ts"],"names":[],"mappings":";AAAA;;;GAGG"}
@@ -0,0 +1,72 @@
1
+ /**
2
+ * Task Context Types
3
+ */
4
+ export interface TaskState {
5
+ completed: boolean;
6
+ pluginId?: string;
7
+ docId?: string;
8
+ taskNumber?: number;
9
+ name?: string;
10
+ }
11
+ export interface TasksState {
12
+ [taskKey: string]: TaskState;
13
+ }
14
+ /**
15
+ * Badge color configuration for a specific state (completed/incomplete)
16
+ */
17
+ export interface BadgeColorConfig {
18
+ lightmode?: string;
19
+ darkmode?: string;
20
+ }
21
+ /**
22
+ * Badge configuration for customizing task progress display
23
+ */
24
+ export interface BadgeConfig {
25
+ /** Hide the progress badge completely */
26
+ hide?: boolean;
27
+ /** Disable the checkmark icon (always show numbers) */
28
+ disableIcon?: boolean;
29
+ /** Badge colors configuration */
30
+ colors?: {
31
+ completed?: BadgeColorConfig;
32
+ incomplete?: BadgeColorConfig;
33
+ font?: BadgeColorConfig;
34
+ };
35
+ }
36
+ export interface DocPageRegistry {
37
+ id: string;
38
+ pluginId: string;
39
+ title: string;
40
+ description: string;
41
+ sectionName: string;
42
+ permalink: string;
43
+ source: string;
44
+ sidebarPosition?: number;
45
+ totalTasks: number;
46
+ tasks: Record<string, {
47
+ number: number;
48
+ name: string;
49
+ }>;
50
+ badgeConfig?: BadgeConfig;
51
+ }
52
+ /**
53
+ * Category metadata from sidebar structure
54
+ */
55
+ export interface CategoryRegistry {
56
+ label: string;
57
+ path: string;
58
+ customProps?: Record<string, any>;
59
+ badgeConfig?: BadgeConfig;
60
+ }
61
+ export interface TaskRegistry {
62
+ docPages: Record<string, DocPageRegistry>;
63
+ categories: Record<string, CategoryRegistry>;
64
+ }
65
+ export interface TaskContextValue {
66
+ tasks: TasksState;
67
+ autoCollapseCompletedTasks: boolean;
68
+ setTaskCompleted: (taskKey: string, completed: boolean, pluginId?: string, docId?: string, taskNumber?: number, name?: string) => void;
69
+ setAutoCollapseCompletedTasks: (autoCollapse: boolean) => void;
70
+ taskRegistry: TaskRegistry | null;
71
+ }
72
+ //# sourceMappingURL=TaskContext.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TaskContext.d.ts","sourceRoot":"","sources":["../../src/contexts/TaskContext.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,UAAU;IACzB,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,yCAAyC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,uDAAuD;IACvD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,iCAAiC;IACjC,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,gBAAgB,CAAC;QAC7B,UAAU,CAAC,EAAE,gBAAgB,CAAC;QAC9B,IAAI,CAAC,EAAE,gBAAgB,CAAC;KACzB,CAAC;CACH;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACxD,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAC1C,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;CAC9C;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,UAAU,CAAC;IAClB,0BAA0B,EAAE,OAAO,CAAC;IACpC,gBAAgB,EAAE,CAChB,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,OAAO,EAClB,QAAQ,CAAC,EAAE,MAAM,EACjB,KAAK,CAAC,EAAE,MAAM,EACd,UAAU,CAAC,EAAE,MAAM,EACnB,IAAI,CAAC,EAAE,MAAM,KACV,IAAI,CAAC;IACV,6BAA6B,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/D,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;CACnC"}
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ /**
3
+ * Task Context Types
4
+ */
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ //# sourceMappingURL=TaskContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TaskContext.js","sourceRoot":"","sources":["../../src/contexts/TaskContext.ts"],"names":[],"mappings":";AAAA;;GAEG"}
package/lib/index.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ /**
2
+ * Docusaurus Interactive Tasks Plugin
3
+ * A plugin providing interactive task components with progress tracking
4
+ */
5
+ import type { LoadContext, Plugin } from "@docusaurus/types";
6
+ export interface PluginOptions {
7
+ }
8
+ export default function interactiveTasksPlugin(context: LoadContext, options: PluginOptions): Plugin;
9
+ export declare function getSwizzleComponentList(): string[];
10
+ export { validateThemeConfig } from "./validateThemeConfig";
11
+ export { useDocTaskStats, useCategoryTaskStats } from "./utils/useDocTaskStats";
12
+ export type { DocTaskStats } from "./utils/useDocTaskStats";
13
+ export { remarkTaskDirective } from "./plugin/remarkTaskDirective";
14
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAK7D,MAAM,WAAW,aAAa;CAE7B;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,aAAa,GACrB,MAAM,CAoCR;AAGD,wBAAgB,uBAAuB,IAAI,MAAM,EAAE,CAElD;AAED,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAChF,YAAY,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAK5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC"}
package/lib/index.js ADDED
@@ -0,0 +1,59 @@
1
+ "use strict";
2
+ /**
3
+ * Docusaurus Interactive Tasks Plugin
4
+ * A plugin providing interactive task components with progress tracking
5
+ */
6
+ var __importDefault = (this && this.__importDefault) || function (mod) {
7
+ return (mod && mod.__esModule) ? mod : { "default": mod };
8
+ };
9
+ Object.defineProperty(exports, "__esModule", { value: true });
10
+ exports.remarkTaskDirective = exports.useCategoryTaskStats = exports.useDocTaskStats = exports.validateThemeConfig = void 0;
11
+ exports.default = interactiveTasksPlugin;
12
+ exports.getSwizzleComponentList = getSwizzleComponentList;
13
+ const path_1 = __importDefault(require("path"));
14
+ const TaskRegistryPlugin_1 = require("./plugin/TaskRegistryPlugin");
15
+ function interactiveTasksPlugin(context, options) {
16
+ const { siteDir } = context;
17
+ return {
18
+ name: "@sp-days-framework/docusaurus-plugin-interactive-tasks",
19
+ getThemePath() {
20
+ return path_1.default.resolve(__dirname, "./theme");
21
+ },
22
+ getTypeScriptThemePath() {
23
+ return path_1.default.resolve(__dirname, "../src/theme");
24
+ },
25
+ getClientModules() {
26
+ return [];
27
+ },
28
+ configureWebpack(config, isServer) {
29
+ const plugins = [];
30
+ // Only run on client build to generate task-registry.json
31
+ if (!isServer) {
32
+ plugins.push(new TaskRegistryPlugin_1.TaskRegistryPlugin(siteDir));
33
+ }
34
+ return {
35
+ plugins,
36
+ };
37
+ },
38
+ // Export for compatibility with Docusaurus plugin system
39
+ getDefaultCodeTranslationMessages() {
40
+ return {};
41
+ },
42
+ };
43
+ }
44
+ // Override the docs plugin preset to add our remark plugin
45
+ function getSwizzleComponentList() {
46
+ return [];
47
+ }
48
+ var validateThemeConfig_1 = require("./validateThemeConfig");
49
+ Object.defineProperty(exports, "validateThemeConfig", { enumerable: true, get: function () { return validateThemeConfig_1.validateThemeConfig; } });
50
+ // Export utility hooks for custom components
51
+ var useDocTaskStats_1 = require("./utils/useDocTaskStats");
52
+ Object.defineProperty(exports, "useDocTaskStats", { enumerable: true, get: function () { return useDocTaskStats_1.useDocTaskStats; } });
53
+ Object.defineProperty(exports, "useCategoryTaskStats", { enumerable: true, get: function () { return useDocTaskStats_1.useCategoryTaskStats; } });
54
+ // Note: usePluginId is available from theme components, not exported from plugin entry
55
+ // Users can import it directly from the theme: import { usePluginId } from '@theme/...';
56
+ // Export the remark plugin so users can add it to their docusaurus.config.js
57
+ var remarkTaskDirective_1 = require("./plugin/remarkTaskDirective");
58
+ Object.defineProperty(exports, "remarkTaskDirective", { enumerable: true, get: function () { return remarkTaskDirective_1.remarkTaskDirective; } });
59
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA;;;GAGG;;;;;;AAYH,yCAuCC;AAGD,0DAEC;AAtDD,gDAAwB;AAGxB,oEAAiE;AAOjE,SAAwB,sBAAsB,CAC5C,OAAoB,EACpB,OAAsB;IAEtB,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;IAE5B,OAAO;QACL,IAAI,EAAE,wDAAwD;QAE9D,YAAY;YACV,OAAO,cAAI,CAAC,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAC5C,CAAC;QAED,sBAAsB;YACpB,OAAO,cAAI,CAAC,OAAO,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;QACjD,CAAC;QAED,gBAAgB;YACd,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,gBAAgB,CAAC,MAAqB,EAAE,QAAiB;YACvD,MAAM,OAAO,GAAU,EAAE,CAAC;YAE1B,0DAA0D;YAC1D,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,OAAO,CAAC,IAAI,CAAC,IAAI,uCAAkB,CAAC,OAAO,CAAC,CAAC,CAAC;YAChD,CAAC;YAED,OAAO;gBACL,OAAO;aACR,CAAC;QACJ,CAAC;QAED,yDAAyD;QACzD,iCAAiC;YAC/B,OAAO,EAAE,CAAC;QACZ,CAAC;KACF,CAAC;AACJ,CAAC;AAED,2DAA2D;AAC3D,SAAgB,uBAAuB;IACrC,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,6DAA4D;AAAnD,0HAAA,mBAAmB,OAAA;AAE5B,6CAA6C;AAC7C,2DAAgF;AAAvE,kHAAA,eAAe,OAAA;AAAE,uHAAA,oBAAoB,OAAA;AAE9C,uFAAuF;AACvF,yFAAyF;AAEzF,6EAA6E;AAC7E,oEAAmE;AAA1D,0HAAA,mBAAmB,OAAA"}
@@ -0,0 +1,27 @@
1
+ /**
2
+ * Webpack plugin that scans Docusaurus metadata for Task directives and generates a registry
3
+ *
4
+ * Scans for ::::task[Name] directives (4 colons) in MDX files
5
+ */
6
+ import type { Compiler } from "webpack";
7
+ export declare class TaskRegistryPlugin {
8
+ private siteDir;
9
+ private hasLoggedSuccess;
10
+ private loggedWarnings;
11
+ private missingFiles;
12
+ private hasLoggedStaleCache;
13
+ constructor(siteDir: string);
14
+ apply(compiler: Compiler): void;
15
+ private scanForTasks;
16
+ private scanPluginInstance;
17
+ private processDoc;
18
+ private extractTasksFromFile;
19
+ /**
20
+ * Detect stale cache and notify user once
21
+ *
22
+ * Checks if missing files indicate a stale .docusaurus cache
23
+ * and provides helpful recommendation to clear it
24
+ */
25
+ private detectAndNotifyStaleCacheOnce;
26
+ }
27
+ //# sourceMappingURL=TaskRegistryPlugin.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TaskRegistryPlugin.d.ts","sourceRoot":"","sources":["../../src/plugin/TaskRegistryPlugin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAiJxC,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,gBAAgB,CAAkB;IAC1C,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,YAAY,CAAgB;IACpC,OAAO,CAAC,mBAAmB,CAAkB;gBAEjC,OAAO,EAAE,MAAM;IAI3B,KAAK,CAAC,QAAQ,EAAE,QAAQ;YAgDV,YAAY;YAiCZ,kBAAkB;YA+BlB,UAAU;YAgEV,oBAAoB;IAkDlC;;;;;OAKG;IACH,OAAO,CAAC,6BAA6B;CAkDtC"}