---
sidebar_position: 1
task_section_name: "Demo Module 1"
---

# Basic Task Page

See interactive tasks in action with real-world examples. This page demonstrates how tasks work in a documentation environment.

<TaskProgression path="."/>

---

::::task[Install the SP Days Package]

Follow these steps to create a SP Days instance in your repo:

1. Open your terminal in the project root directory
2. Run the installation `npx @sp-days-framework/create-sp-day`

:::hint

All packages and plugins will be installed and pre-configured!

:::

:::output

```terminal user="ubuntu" host="server" directory="~/"
// command "npx @sp-days-framework/create-sp-days"
{cyan}[INFO]{/cyan} Creating a new SP-Days site...
{green}[SUCCESS]{/green} Base template copied
{green}[SUCCESS]{/green} Slidev addon installed
{green}[SUCCESS]{/green} Resources addon installed
{green}[SUCCESS]{/green} Configuration processed
{cyan}[INFO]{/cyan} Installing dependencies with npm...
{green}[SUCCESS]{/green} Dependencies installed
{green}[SUCCESS]{/green} Created example-repo at "docs".
{cyan}[INFO]{/cyan} Inside that directory, you can run several commands:

  {cyan}`npm start`{/cyan}
    Starts the development server.

  {cyan}`npm run build`{/cyan}
    Bundles your website into static files for production.

  {cyan}`npm run serve`{/cyan}
    Serves the built website locally.

  {cyan}`npm run slidev`{/cyan}
    Launches Slidev presentation server.

We suggest that you begin by typing:

  {cyan}`cd docs`{/cyan}
  {cyan}`npm start`{/cyan}

Happy days! 📚
```

:::

::::

---

::::task[Configure Docusaurus]

Add the plugin and remark plugin to your Docusaurus configuration:

1. Open `docusaurus.config.js` in your project root
2. Add the plugin to the `plugins` array
3. Add the remark plugin to your preset's docs configuration
4. Save the file

:::solution

The plugin needs to be registered in two places: the `plugins` array for the main functionality, and the `remarkPlugins` array to transform task directives in your markdown files.

**Verify Configuration:**

- The file should have both entries as shown below
- No syntax errors when running `npm run start`

Add to your `docusaurus.config.js`:

```js title="docusaurus.config.js"
module.exports = {
  plugins: ["@sp-days-framework/docusaurus-plugin-interactive-tasks"],

  presets: [
    [
      "classic",
      {
        docs: {
          remarkPlugins: [
            require("@sp-days-framework/docusaurus-plugin-interactive-tasks")
              .remarkTaskDirective,
          ],
        },
      },
    ],
  ],
};
```

:::

::::

---

::::task[Add Progress Tracking]

Display task completion progress on your documentation pages:

1. Import the `TaskProgression` component in your MDX file
2. Add the component where you want to show progress
3. Provide the path to the document you want to track

Add to your MDX file:

```mdx
import TaskProgression from "@theme/TaskProgression";

<TaskProgression path="." />
```

Reference other pages:

```mdx
<TaskProgression path="/docs/tutorial/first-task" />
<TaskProgression path="../module-02/introduction" />
```

:::hint

Use `path="."` to reference the current page, or provide an absolute/relative path to track other pages. The component shows a visual progress bar and completion count.

:::

::::

---

::::task[Test Auto-Collapse Feature]

Learn how the auto-collapse feature helps you focus on incomplete tasks:

1. Complete at least one task on this page by clicking "Mark as Done"
2. Look for the collapse icon button in the navbar
3. Click the collapse icon to enable auto-collapse mode
4. Observe how completed tasks automatically collapse
5. Click the collapse icon again to disable the feature

:::hint

The auto-collapse setting is saved to your browser's localStorage and syncs across all tabs. This feature is especially useful when working through long tutorial pages with many tasks.

:::

::::