feat: add visual editing (#35)

* feat: add visual editing

* chore(deps): update

* style: env whitespace

* chore: remove svelte-check

* docs: update readme

* chore: cleanup

* chore: improve styles

* chore: add preview toggle

* chore: improve app .env example

* docs: update readme

* chore: improve env examples

* chore: update default api version

README.md

@@ -7,13 +7,14 @@ This starter uses [SvelteKit](https://kit.svelte.dev/) for the frontend and [San
 - How to fetch content as data from [the Sanity Content Lake](https://www.sanity.io/docs/datastore)
 - How to render block content with [Portable Text](https://www.sanity.io/docs/presenting-block-text)
 - A [Sanity Studio](https://www.sanity.io/docs/sanity-studio) to create and edit content
+- Visual editing with live updates through [Presentation](https://www.sanity.io/docs/presentation)
 - How to crop and render images with [Sanity Image URLs](https://www.sanity.io/docs/image-url)
 
 > **Note**
 >
 > This starter features an `/app` and a `/studio` folder. The `/app` folder contains the frontend code, and the `/studio` folder contains the Sanity Studio code.
 >
-> This is **not** a monorepo setup. We put them both in one repository for the sake of simplicity. You might want to have separate repositories for each of the folders, to make it easier to deploy the app and the studio separately.
+> It is configured as a monorepo using [pnpm workspaces](https://pnpm.io/workspaces), but you can treat these directories as separate projects if you prefer.
 
 ## Prerequisities
 
@@ -22,44 +23,52 @@ This starter uses [SvelteKit](https://kit.svelte.dev/) for the frontend and [San
 
 ## Getting started
 
-The following commands are meant to be run in **both** the `/app` and `/studio` folders.
+Run the following commands to prepare both applications, each step should be executed from the **root directory**:
 
-1. `npm install` to install dependencies
-2. `npx -y sanity@latest init --env`, this will:
+1. Install dependencies.
 
-- ask you to select or create a Sanity project and dataset, use the same Sanity project and dataset in both folders.
-- output a `.env` file with appropriate variables
-- _(or use `sanity init --env` if you have the CLI installed)_
+```sh
+pnpm install
+```
 
-4. Prefix your environment variables in the SvelteKit `/app` folder with `PUBLIC_`, they should be `PUBLIC_SANITY_DATASET` and `PUBLIC_SANITY_PROJECT_ID`.
-3. `npm run dev` to start the development server
+2. Select or create a Sanity project and dataset, and output the details to a `.env` file.
 
-Your SvelteKit app should now be running on [http://localhost:5173/](http://localhost:5173/) and Studio on [http://localhost:3333/](http://localhost:3333/).
+```sh
+cd studio && pnpm sanity init --env .env
+```
 
-_Feel free to move each of the folders to their own location and check them into version control._
+3. [Generate a token](https://www.sanity.io/docs/http-auth#4c21d7b829fe) with read permissions for use in the next step.
 
-### Add content
+```sh
+pnpm sanity manage
+```
 
-1. Visit the Studio and create and publish a new `Post` document
-2. Visit the App and refresh the page to see your content rendered on the page
+4. Copy the example app `.env` file and populate it with the required values.
 
-The schema for the `Post` document is defined in the `/studio/schemas` folder. You can add more documents and schemas to the Studio to suit your needs.
+```sh
+cp ./app/.env.example ./app/.env
+```
 
-## Removing TypeScript
+5.  Start the development servers:
 
-If you do not wish to use TypeScript, we've included a `remove-typescript.mjs` file in the root of this repository.
+```sh
+pnpm dev
+```
 
-To run this file, you must:
+- Your SvelteKit app should now be running on [http://localhost:5173/](http://localhost:5173/).
+- Your Studio should now be running on [http://localhost:3333/](http://localhost:3333/).
 
-1. Run `npm install` in the repository root to install dependencies
-2. Run `node remove-typescript.mjs` to strip all types from both the `/app` and `/studio` folders
+### Add content
 
-If you intend to use TypeScript or have stripped TypeScript, you can safely delete all files in the repository root that isn't `/studio` or `/app`.
+1. Visit the Studio and create and publish a new `Post` document
+2. Visit the App and refresh the page to see your content rendered on the page
+
+The schema for the `Post` document is defined in the `/studio/schemas` folder. You can add more documents and schemas to the Studio to suit your needs.
 
 ## Deployments
 
 The `/app` and `/studio` folders are meant to be deployed separately.
 
-Feel free to deploy the App to whichever hosting provider you prefer. We recommend [Vercel](https://vercel.com/).
+Make sure that after `/app` is deployed the `.env` file in `/studio` is updated with its deployment URL under `SANITY_STUDIO_PREVIEW_URL`.
 
-You can deploy the Sanity Studio by running `sanity deploy` in the `/studio` repository, provided you have the `@sanity/cli` installed globally.
+And `/app` has a `.env` file with `PUBLIC_SANITY_STUDIO_URL` that points to the Studio's deployment URL.

app/.env.example

@@ -1,2 +1,10 @@
+# Required - The ID of your Sanity project
 PUBLIC_SANITY_PROJECT_ID=""
+# Required - The dataset of your Sanity project
 PUBLIC_SANITY_DATASET=""
+# Required - The generated read token, used to fetch data on the server
+SANITY_API_READ_TOKEN=""
+# Optional - The Sanity API version to use
+PUBLIC_SANITY_API_VERSION=""
+# Optional - The URL of your Sanity Studio
+PUBLIC_SANITY_STUDIO_URL=""