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: 2 months 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 (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-07T17:59:44.000Z (6 months ago)
• Last Synced: 2024-03-06T19:54:41.663Z (4 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: 102
• Watchers: 1
• Forks: 10
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• 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)