- Notifications
You must be signed in to change notification settings - Fork2
Browse Astro Content Collections, schemas and entry files in your browser
License
HiDeoo/astro-content-devtools
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
BrowsingAstro Content Collections entry files can sometimes be a bit cumbersome, especially when you have a lot of them spread across multiple collections. Same goes forcollection schemas which are written in TypeScript usingZod and can be hard to read for non-developers.
The Astro Content Devtools are available through an Astro component usingSolidJS 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-inDev Toolbar, this package should be refactored to a Dev Toolbar App.
Install the Astro Content Devtools package and its peer dependencies using your favorite package manager, e.g. withpnpm:
pnpm add -D astro-content-devtools @astrojs/solid-js solid-js
Update yourAstro configuration to apply the SolidJS integration:
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 yourcontent collections configuration:
---+ import { AstroContentDevtools } from 'astro-content-devtools'+ import { collections } from '../content/config' // … --- <!DOCTYPE html> <html lang="en"> <head> <!-- … --> </head> <body> <slot />+ <AstroContentDevtools collections={collections} /> </body> </html>
Licensed under the MIT License, Copyright © HiDeoo.
SeeLICENSE for more information.
About
Browse Astro Content Collections, schemas and entry files in your browser
Topics
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.