Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pawcoding/astro-integration-pocketbase
A integration for Astro adding a toolbar for users of astro-loader-pocketbase
https://github.com/pawcoding/astro-integration-pocketbase
astro astro-integration astro-integration-pocketbase pocketbase withastro
Last synced: 2 months ago
JSON representation
A integration for Astro adding a toolbar for users of astro-loader-pocketbase
- Host: GitHub
- URL: https://github.com/pawcoding/astro-integration-pocketbase
- Owner: pawcoding
- License: mit
- Created: 2024-10-05T16:25:44.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-10-20T09:17:24.000Z (4 months ago)
- Last Synced: 2024-10-20T13:52:00.379Z (4 months ago)
- Topics: astro, astro-integration, astro-integration-pocketbase, pocketbase, withastro
- Language: TypeScript
- Homepage:
- Size: 165 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# astro-integration-pocketbase
[](https://www.npmjs.com/package/astro-integration-pocketbase)
[](https://www.npmjs.com/package/astro-integration-pocketbase)
[](https://github.com/pawcoding/astro-integration-pocketbase/blob/master/LICENSE)
[](https://discord.gg/GzgTh4hxrx)
This package provides an Astro toolbar for users of [astro-loader-pocketbase](https://github.com/pawcoding/astro-loader-pocketbase) to view PocketBase data directly in the Astro dev server.
> [!WARNING]
> This package is still under development.
> Until the first stable 1.0 release **breaking changes can occur at any time**.
## Basic usage
_For the toolbar to work, you need to have the [`astro-loader-pocketbase`](https://www.npmjs.com/package/astro-loader-pocketbase) package installed and configured in your project._
To use the toolbar, you need to import the `pocketbaseIntegration` function and add it to the `integrations` array in your Astro config file.
```ts
import { pocketbaseIntegration } from "astro-integration-pocketbase";
import { defineConfig } from "astro/config";
export default defineConfig({
integrations: [
pocketbaseIntegration({
// Make sure to use the same URL as in your pocketbaseLoader configuration
url: "https://"
})
]
});
```
After adding the integration to your Astro config, you can start the dev server and see the PocketBase icon in the toolbar.
If you click on the icon, you can see the PocketBase entity viewer.
If a loader is found, the viewer will show a refresh button to reload all entries from the loaders.
## Entity viewer
To view the PocketBase entries inside the entity viewer, you need to use `Astro.props` to pass the entries to your page (and thus to the toolbar).
Example page with PocketBase entries from a collection
```astro
---
import { render, getCollection } from "astro:content";
import type { CollectionEntry } from "astro:content";
interface Props {
entry: CollectionEntry<"
}
export async function getStaticPaths() {
const entries = await getCollection("");
return entries.map((entry) => ({
params: { id: entry.id },
props: { entry },
}));
}
const { entry } = Astro.props;
const { Content } = await render(entry);
---
{entry.data.title}
```
The integration will automatically detect PocketBase entries in the props and display them in the entity viewer.
## All options
| Option | Type | Required | Description |
| ------ | -------- | -------- | ------------------------------------ |
| `url` | `string` | x | The URL of your PocketBase instance. |