astro-downloadchecklist

astro-downloadchecklist allows users to download a checklist wrapped with this component as a CSV file.

One use case is a blog post (Markdown or MDX), where you can download a checklist directly from the page.

Installation

npm install @rgglez/astro-downloadchecklist

Usage

Import the component:

import DownloadChecklist from "@/components/DownloadChecklist.astro";

Usage in .mdx files

Wrap a checklist with the component in your MD/MDX files:

<DownloadChecklist filename="initial-setup-checklist.csv" label="Download">
- [ ] I identified my critical accounts.
- [ ] I installed Google Authenticator on the primary device.
- [ ] I installed Google Authenticator on the secondary device.
- [ ] I enabled strong locks on both devices.
- [ ] I decided whether to use Google account synchronization.
- [ ] I copied the TOTP accounts to the second device.
- [ ] I compared codes on both devices.
- [ ] I tested a real login with the second device.
- [ ] I downloaded or printed backup codes for each critical service.
- [ ] I stored backup codes outside the main phone.
- [ ] I reviewed my Google account recovery methods.
- [ ] I reviewed active sessions and connected devices.
- [ ] I registered passkeys or physical keys where possible.
- [ ] I documented the date of the last test.
</DownloadChecklist>

Now, when you view the rendered MDX or Markdown in the browser, you'll see a download button. Clicking it will download the checklist in CSV format.

Usage in .astro files

The component also works in .astro pages, layouts, and other Astro components, as long as the slot contains a <ul> or <ol> with <li> items:

<DownloadChecklist filename="my-checklist.csv" label="Download CSV">
  <ul>
    <li>First task</li>
    <li>Second task</li>
    <li>Third task</li>
  </ul>
</DownloadChecklist>

Requirements

• The slot must contain a list (<ul> or <ol>) with <li> items. The CSV is built by reading the rendered DOM, not the source Markdown.
• Works in .astro, .md, .mdx, layouts, pages, and other Astro components.

Limitations

• Does not work inside React/Vue/Svelte/Solid islands — .astro components cannot be embedded in framework components.
• The CSV-building script runs once on page load. Lists injected into the DOM later by client-side JavaScript will not be picked up.

Properties

| Name | Value | |------|------| | filename | The default name of the file to download | | label | The text for the download button (Default: "Download checklist") |

Development

| Target | Description | |--------|-------------| | make tags | List git tags sorted by semver (descending) | | make latest-tag | Show the latest git tag | | make patch | Bump PATCH version in package.json, commit, tag, and push | | make publish | Publish current version to npm |

Typical release flow: make patch publish.

License

Copyright (C) 2026 Rodolfo González González.

Licensed under the Apache v2.0. Read the LICENSE file.