feat: Add embedded studio and simplify structure (#22)

* upgrade to Astro 3

* Add View Transitions

* rename folder

* Add embedded Studio

* simplify structure

* correct CLI command

* fix path

* ignore build and deployment folders

* install dependencies

* ignore build folders

* change to vercel adapter

* Adjust remove ts script

.env.example

@@ -0,0 +1,3 @@
+# Remember to add PUBLIC_ if generated by npx sanity init --env
+PUBLIC_SANITY_STUDIO_PROJECT_ID="r0z1eifg"
+PUBLIC_SANITY_STUDIO_DATASET="clean-dev"

app/.gitignore → .gitignore

@@ -3,7 +3,7 @@ dist/
 
 # generated types
 .astro/
-
+.vercel
 # dependencies
 node_modules/
 

README.md

@@ -7,45 +7,72 @@ This starter uses [Astro](https://astro.build/) for the front end and [Sanity](h
 - 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
-- How to crop and render images with [Sanity Image URLs]Prerequisites
+- How to crop and render images with [Sanity Image URLs](https://www.sanity.io/docs/presenting-images)
+
+## Prerequisites
 
 - [Node.js](https://nodejs.org/en/) (v16.12 or later)
-- [Sanity CLI](https://www.sanity.io/docs/getting-started-with-sanity-cli) (optional)
 
 ## Getting started
 
-The following commands are meant to be run in **both** the `/app` and `/studio` folders.
+Run the following commands
 
 1. `npm install` to install dependencies
-2. `npm create sanity@latest init --env`, this will:
+2. `npx sanity@latest init --env`, this will:
 
    - ask you to select or create a Sanity project and dataset
    - output a `.env` file with appropriate variables
    - _(or use `sanity init --env` if you have the CLI installed)_
 
-3. `npm run dev` to start the development server
+3. Rename the variables in the .env file:
+
+   - ~~SANITY_STUDIO_PROJECT_ID~~ → PUBLIC_SANITY_STUDIO_PROJECT_ID
+   - ~~SANITY_STUDIO_DATASET~~ → PUBLIC_SANITY_STUDIO_DATASET
 
-Your Astro app should now be running on [http://localhost:3000/](http://localhost:3000/) and Studio on [http://localhost:3333/](http://localhost:3333/).
+4. `npm run dev` to start the development server
 
-_Feel free to move each of the folders to dedicated locations and check them into version control._
+Your Astro app should now be running on [http://localhost:4321/](http://localhost:4321/) and Studio on [http://localhost:4321/admin](http://localhost:4321/).
 
 ### Add content
 
 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
+2. Visit the homepage 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.
+The schema for the `Post` document is defined in the `/schema` folder. You can [add more document types](https://www.sanity.io/docs/schema-types) to the Studio to suit your needs.
 
 ## Removing TypeScript
 
-If you do not wish to use TypeScript, we've included a `remove-typescript.mjs` file in the root of this repository. You can run this file with `node remove-typescript.mjs` to strip all types from both the `/app` and `/studio` folders. Please run this before tampering with any code to ensure that all types are properly removed.
+If you do not wish to use TypeScript, we've included a `remove-typescript.mjs` file in the root of this repository. You can run this file with `node remove-typescript.mjs` to strip all types from this project. Please run this before tampering with any code to ensure that all types are properly removed.
 
 If you intend to use TypeScript, you can safely remove the `remove-typescript.mjs` file.
 
+## Removing the embedded Studio
+
+If you wish to manage and host the Studio separately, you remove the `studioBasePath` property for the `sanity` configuration in `astro.config.mjs`. You can also remove the following dependencies:
+
+- `output` in `astro.config.mjs`…
+  - …and `adapter` in `astro.config.mjs`
+- `react()` in `astro.config.mjs`
+- `@sanity/vision` `react` `react-dom` `@types/react` `@types/react-dom` from `package.json`
+- `schema` folder (you might want to copy this to the new Studio location)
+- `sanity.config.ts` (you might want to copy this to the new Studio location)
+
 ## Deployments
 
-The `/app` and `/studio` folders are meant to be deployed separately.
+Feel free to deploy the App to whichever hosting provider you prefer ([Vercel](https://vercel.com/), [Netlify](https://netlify.com), [Cloudflare](https://pages.cloudflare.com/), etc). Remember [to change the adapter](https://docs.astro.build/en/guides/server-side-rendering/#adding-an-adapter) in the `astro.config.mjs` file to match your hosting provider.
+
+### Deploying the Studio on \*\.sanity.studio
+
+You can also deploy the Sanity Studio on its own URL by running `npx sanity deploy`, provided you have added a [`sanity.cli.ts` configuration file](https://www.sanity.io/docs/cli):
 
-Feel free to deploy the App to whichever hosting provider you prefer. We recommend [Vercel](https://vercel.com/).
+```ts
+// sanity.cli.ts
+import { defineCliConfig } from "sanity/cli";
 
-You can deploy the Sanity Studio by running `sanity deploy` in the `/studio` repository, provided you have the `@sanity/cli` installed globally.
+export default defineCliConfig({
+  api: {
+    projectId: "<your-project-id>",
+    dataset: "<your-dataset-name>",
+  },
+});
+```