https://github.com/stephane-vanraes/sveltekit-sanity-starter

https://github.com/stephane-vanraes/sveltekit-sanity-starter

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/stephane-vanraes/sveltekit-sanity-starter
• Owner: stephane-vanraes
• Created: 2022-11-23T20:13:27.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-12-19T10:02:51.000Z (about 1 year ago)
• Last Synced: 2023-12-20T14:52:22.265Z (about 1 year ago)
• Language: Svelte
• Size: 245 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Starter Kit for SvelteKit && Sanity (with Typescript)

## Environment Variables

Create a .env file (or equivalent for production) with

```

PUBLIC_SANITY_PROJECT_ID=

PUBLIC_SANITY_DATASET=

SANITY_TOKEN=

PREVIEW_TOKEN=

```


## Previewing your content

You can get a preview of unpublished content using the preview token (just add `?preview_token=`) provided in the environment variables, while previewing a boolean `isPreviewMode` is set on the top layout data, this is used to show a small bar indicating preview mode.

## Using the Sanity Client

`lib/sanity/client.server.ts` creates two clients: one with the `SANITY TOKEN` and one without, the first gives you an authorized connection that can be used for previewing, the other one is a general public one. In `hooks.server.ts` the app will check if a valid preview token is provided and populate `event.locals` accordingly with either the authorized or the normal connection.

In _any_ server side script related to pages/endpoints (`+server.ts`, `+layout.server.ts` and `+page.server.ts`) you can grab this client from the locals and use it to request the desired data from Sanity.

## Images

`lib/sanity/imageUrl` provides a helper function to handle images from Sanity, it effectively is a wrapper around [@sanity/image-url](https://www.sanity.io/docs/image-url). The most basic use would be:

```html



```

## Styling

It's SVELTE! There is no strict way of doing the styling do whatever you want, included is the most heavy handed reset in existence, use at your own risk.