{"id":13417814,"url":"https://github.com/treefarmstudio/astro-sanity","last_synced_at":"2025-03-15T02:31:43.874Z","repository":{"id":59145021,"uuid":"529360557","full_name":"treefarmstudio/astro-sanity","owner":"treefarmstudio","description":"This is a helper package to integrate Astro and Sanity","archived":true,"fork":false,"pushed_at":"2024-01-07T17:59:44.000Z","size":95,"stargazers_count":101,"open_issues_count":9,"forks_count":10,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-20T05:05:51.975Z","etag":null,"topics":["astro","astro-integration","sanity","sanity-io","sanitycms","sanityio"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/astro-sanity","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/treefarmstudio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-08-26T18:09:03.000Z","updated_at":"2024-04-04T19:24:04.000Z","dependencies_parsed_at":"2023-02-17T14:46:02.153Z","dependency_job_id":"a007d37f-a3e4-4074-841c-f1774857f814","html_url":"https://github.com/treefarmstudio/astro-sanity","commit_stats":{"total_commits":47,"total_committers":4,"mean_commits":11.75,"dds":0.2978723404255319,"last_synced_commit":"afc94bc3a63077b4e9d0a0ab384e36081befadd7"},"previous_names":["bywhitepine/astro-sanity","littlesticks/astro-sanity","treefarmstudio/astro-sanity"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treefarmstudio%2Fastro-sanity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treefarmstudio%2Fastro-sanity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treefarmstudio%2Fastro-sanity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treefarmstudio%2Fastro-sanity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/treefarmstudio","download_url":"https://codeload.github.com/treefarmstudio/astro-sanity/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243674982,"owners_count":20329182,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astro","astro-integration","sanity","sanity-io","sanitycms","sanityio"],"created_at":"2024-07-30T22:00:53.309Z","updated_at":"2025-03-15T02:31:43.605Z","avatar_url":"https://github.com/treefarmstudio.png","language":"TypeScript","funding_links":[],"categories":["What Do I Use...","TypeScript"],"sub_categories":["If I want to add a CMS?"],"readme":"# ⚠️ Astro + Sanity Integration\n\nThis plugin has been deprecated. Please refer to [the official Sanity + Astro Plugin](https://www.sanity.io/plugins/sanity-astro) going forward.\n\n---\n\n## \n\nThis 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.\n\n## Installation\n\n```bash\nnpx astro add astro-sanity\n```\n\nFollow the prompts and once it's finished you should have something like the following in your `astro.config.mjs` file:\n\n```js\nimport sanity from 'astro-sanity'\n\n...\n\nexport default defineConfig({\n  integrations: [sanity()],\n});\n```\n\nUpdate the sanity config to match your Sanity Client Config like so:\n\n```js\nexport default defineConfig({\n  integrations: [\n    sanity({\n    projectId: 'YOUR_PROJECT_ID',\n    dataset: 'production',\n    apiVersion: '2021-03-25',\n    useCdn: true,\n  })],\n});\n```\n\n## Usage\n\nPlease 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.\n\n### Using the Client\n\nYou can globally use the Sanity Client from the config with the following import\n\n```js\nimport { useSanityClient } from 'astro-sanity';\n```\n\n### Querying Sanity with your Client\n\nHere is an example using the client to query Sanity:\n\n```js\nimport { useSanityClient, groq } from 'astro-sanity';\n\nexport async function getFirstBlogPost() {\n  const query = groq`*[_type == \"post\"]`;\n  const firstPost = await useSanityClient().fetch(query);\n  return firstPost;\n}\n```\n\n### Create Your own Image Builder Helper\n\nYou 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:\n\n```js\nimport { useSanityClient } from 'astro-sanity';\nimport { createImageBuilder } from 'astro-sanity';\n\nexport const imageBuilder = createImageBuilder(useSanityClient());\n\nexport function urlForImage(source) {\n  return imageBuilder.image(source);\n}\n```\n\n### Create a Custom portableTextToHtml Serializer\n\nYou can learn more about the @portabletext/to-html package [here](https://github.com/portabletext/to-html)\n\n```js\nimport { portableTextToHtml } from 'astro-sanity';\nimport { urlForImage } from './urlForImage';\n\nconst customComponents = {\n  /* your custom components here */\n};\n\nexport function sanityPortableText(portabletext) {\n  return portableTextToHtml(portabletext, customComponents);\n}\n```\n\n### Create a PortableText Astro Component\n\n```astro\n---\nimport { sanityPortableText } from '../sanity/portableText'\n\nconst {portableText} = Astro.props;\n---\n\n\u003cFragment set:html={sanityPortableText(portableText)} /\u003e\n```\n\nThis can then be used in your Astro files and convert portable text to HTML automatically.\n\n```astro\n\u003cPortableText portableText={myPortableText}/\u003e\n```\n\n## Support\n\nPlease feel free to reach out to us on our Discord if you have questions or file an issue on the repo.\n\n[Join Little Sticks Discord](https://littlesticks.dev/discord)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftreefarmstudio%2Fastro-sanity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftreefarmstudio%2Fastro-sanity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftreefarmstudio%2Fastro-sanity/lists"}