Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/treefarmstudio/astro-sanity
This is a helper package to integrate Astro and Sanity
https://github.com/treefarmstudio/astro-sanity
astro astro-integration sanity sanity-io sanitycms sanityio
Last synced: 8 days ago
JSON representation
This is a helper package to integrate Astro and Sanity
- Host: GitHub
- URL: https://github.com/treefarmstudio/astro-sanity
- Owner: treefarmstudio
- License: mit
- Archived: true
- Created: 2022-08-26T18:09:03.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-07T17:59:44.000Z (10 months ago)
- Last Synced: 2024-05-20T05:05:51.975Z (6 months ago)
- Topics: astro, astro-integration, sanity, sanity-io, sanitycms, sanityio
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/astro-sanity
- Size: 92.8 KB
- Stars: 101
- Watchers: 1
- Forks: 10
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-astro - astro-sanity - Astro integration for [Sanity](https://www.sanity.io/) (What Do I Use... / If I want to add a CMS?)
README
# ⚠️ Astro + Sanity Integration
This plugin has been deprecated. Please refer to [the official Sanity + Astro Plugin](https://www.sanity.io/plugins/sanity-astro) going forward.
---
##
This is a helper package for integrating [Sanity](https://www.sanity.io/) with [Astro](https://astro.build/). It is not officially from Sanity but it is architected in the same way their official packages for frameworks like NextJS are.
## Installation
```bash
npx astro add astro-sanity
```
Follow the prompts and once it's finished you should have something like the following in your `astro.config.mjs` file:
```js
import sanity from 'astro-sanity'
...
export default defineConfig({
integrations: [sanity()],
});
```
Update the sanity config to match your Sanity Client Config like so:
```js
export default defineConfig({
integrations: [
sanity({
projectId: 'YOUR_PROJECT_ID',
dataset: 'production',
apiVersion: '2021-03-25',
useCdn: true,
})],
});
```
## Usage
Please see the [`/demo`](https://github.com/littlesticks/astro-sanity/tree/main/demo) for a full example. However, this package was designed to give you the building blocks to integrate with Sanity but the flexibility to implement it how you want with the helper function names and behavior you want.
### Using the Client
You can globally use the Sanity Client from the config with the following import
```js
import { useSanityClient } from 'astro-sanity';
```
### Querying Sanity with your Client
Here is an example using the client to query Sanity:
```js
import { useSanityClient, groq } from 'astro-sanity';
export async function getFirstBlogPost() {
const query = groq`*[_type == "post"]`;
const firstPost = await useSanityClient().fetch(query);
return firstPost;
}
```
### Create Your own Image Builder Helper
You can learn more about Sanity's image builder [here](https://www.sanity.io/docs/image-url). Here is an example of how you can create your own helper function to use in your components:
```js
import { useSanityClient } from 'astro-sanity';
import { createImageBuilder } from 'astro-sanity';
export const imageBuilder = createImageBuilder(useSanityClient());
export function urlForImage(source) {
return imageBuilder.image(source);
}
```
### Create a Custom portableTextToHtml Serializer
You can learn more about the @portabletext/to-html package [here](https://github.com/portabletext/to-html)
```js
import { portableTextToHtml } from 'astro-sanity';
import { urlForImage } from './urlForImage';
const customComponents = {
/* your custom components here */
};
export function sanityPortableText(portabletext) {
return portableTextToHtml(portabletext, customComponents);
}
```
### Create a PortableText Astro Component
```astro
---
import { sanityPortableText } from '../sanity/portableText'
const {portableText} = Astro.props;
---
```
This can then be used in your Astro files and convert portable text to HTML automatically.
```astro
```
## Support
Please feel free to reach out to us on our Discord if you have questions or file an issue on the repo.
[Join Little Sticks Discord](https://littlesticks.dev/discord)