📦 theme-task-list
A Docusaurus theme that converts plain lists into beautiful, interactive task lists.
Try It Out
In the right-docked Toolbar, open the "Task List" tab to track your progress!
See plain list
- Drink a glass of water.
- Stretch your wrists for 30 seconds.
- Look out at nature.
Common Use Cases
Use this when you need developers to follow a series of steps, such as how to use your library or set up a development environment. Your developers can track their progress even while jumping around the page.
Installation
If you use the preset @docupotamus/docusaurus-preset-classic, you can skip
this step. You don't need to install as a standalone dependency because the
theme is already included in the preset.
The preset is recommended over installing the standalone dependency.
- npm
- Yarn
Then register it in your site's docusaurus.config.js:
Example Usage
Task lists must be formatted without empty newlines. If you are using VS Code, try using "File: Save without Formatting." This is a known limitation.
Customizing
Configuration
Accepted fields:
| Name | Type | Default | Description |
|---|---|---|---|
checkbox.color | React.CSSProperties['color'] | 'var(--ifm-color-primary)' | Checkbox color. |
checkbox.shape | 'circle' | 'square' | 'square' | Checkbox shape. |
checkbox.size | 'small' | 'medium' | 'medium' | Checkbox size. |
content.hoverColor | React.CSSProperties['color'] | 'var(--ifm-color-primary)' | Content color on hover. |
content.hoverColorBackground | React.CSSProperties['color'] | 'var(--ifm-hover-overlay)' | Content background color on hover. |
progressBar.isEnabled | boolean | true | Whether to include a progress bar above the task list. |
progressBar.color | React.CSSProperties['color'] | 'var(--ifm-color-primary)' | Progress bar color. |
Example Configuration
Styling
Styling through theme class names is an advanced approach.
It's appropriate when you need complete control over fine-grained details such as spacing. Otherwise, we recommended preferring to style through custom properties and configuration.
We provide some stable CSS class names for robust and maintainable global layout styling. These names are theme-agnostic and meant to be targeted by custom CSS.
.DocupotamusTaskList.DocupotamusTaskList_layout
Example Styling
Open your DevTools Console panel with Command+Option+J and try it out!
- JavaScript
- CSS
Workbench Integration
State Synchronization: Task list state is synchronized between the page and the workbench. You can track your progress even while jumping around the page.
Quick Navigation: If a page contains multiple task lists, the buttons allow you to quickly navigate between the task lists.
What's Next?
The roadmap includes some important feature requests such as fixing the
bothersome "rendering non-text nodes in a task list is not yet supported" error.
If you have comments, questions, or are looking to contribute, please start a conversation over a GitHub issue!
Please remember to ⭐ give us a star on GitHub! ⭐