https://github.com/hideoo/astro-content-devtools
Browse Astro Content Collections, schemas and entry files in your browser
https://github.com/hideoo/astro-content-devtools
astro astro-component collections content devtools withastro
Last synced: 11 days ago
JSON representation
Browse Astro Content Collections, schemas and entry files in your browser
- Host: GitHub
- URL: https://github.com/hideoo/astro-content-devtools
- Owner: HiDeoo
- License: mit
- Created: 2023-03-16T13:55:14.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-04T17:38:36.000Z (over 1 year ago)
- Last Synced: 2024-04-14T12:58:18.825Z (about 1 year ago)
- Topics: astro, astro-component, collections, content, devtools, withastro
- Language: TypeScript
- Homepage:
- Size: 322 KB
- Stars: 15
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
astro-content-devtools 🔬
Browse Astro Content Collections, schemas and entry files in your browser.
## Features
Browsing [Astro Content Collections](https://docs.astro.build/en/guides/content-collections/) entry files can sometimes be a bit cumbersome, especially when you have a lot of them spread across multiple collections. Same goes for [collection schemas](https://docs.astro.build/en/guides/content-collections/#defining-a-collection-schema) which are written in TypeScript using [Zod](https://github.com/colinhacks/zod) and can be hard to read for non-developers.
The Astro Content Devtools are available through an Astro component using [SolidJS](https://www.solidjs.com) that you can add to your project and that will provide you with a UI to browse your content collections, schemas and entry files in your browser.
- 🎈 Floating UI togglable with a button in the corner of the screen to show and hide the devtools.
- 💾 Current state stored in localStorage to remember the toggle state, selected collection and entry file across reloads and navigation.
- 📄 Preview the content of a collection entry, including the frontmatter and the body.
- 🗜️ Filterable list of collection entry files.
- 📏 Responsive and resizable UI.
> [!WARNING]
> The Astro Content Devtools are not compatible with Astro data content collections.
> [!WARNING]
> Now that Astro 4.0 has a built-in [Dev Toolbar](https://astro.build/blog/astro-4/#the-astro-dev-toolbar), this package should be refactored to a Dev Toolbar App.
## Installation
Install the Astro Content Devtools package and its peer dependencies using your favorite package manager, e.g. with [pnpm](https://pnpm.io):
```shell
pnpm add -D astro-content-devtools @astrojs/solid-js solid-js
```
Update your [Astro configuration](https://docs.astro.build/en/guides/configuring-astro/#supported-config-file-types) to apply the SolidJS integration:
```diff
import { defineConfig } from 'astro/config'
+ import solid from '@astrojs/solid-js'
export default defineConfig({
// …
+ integrations: [solid()],
})
```
Temporarily load the Astro Content Devtools component, e.g. in a layout to make it available on all pages, and pass it the collections object from your [content collections configuration](https://docs.astro.build/en/guides/content-collections/#configuring-collections):
```diff
---
+ import { AstroContentDevtools } from 'astro-content-devtools'
+ import { collections } from '../content/config'
// …
---
+
```
## License
Licensed under the MIT License, Copyright © HiDeoo.
See [LICENSE](https://github.com/HiDeoo/astro-content-devtools/blob/main/LICENSE) for more information.