Updates to standardize template for Sanity's template init (#129)

Refactor to match the format of the other Sanity Clean Templates

* Updates to standardize template for Sanity's template init

* New validator syntax

* Update .env with SANITY_STUDIO_STUDIO_HOST

* Bump dependencies

.github/workflows/validate.yml

@@ -0,0 +1,12 @@
+name: Validate Template
+on: push
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Validate Sanity Template
+        uses: sanity-io/template-validator@v1
+        with:
+          repository: ${{ github.repository }}

.gitignore

@@ -1 +1,28 @@
-node_modules
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files
+.env
+.env.*
+!.env.example
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -1,79 +1,91 @@
-# A minimal Remix site with Sanity Studio
+# Clean Remix + Sanity app
 
-This starter uses [Remix](https://remix.run/) for the front end and [Sanity](https://sanity.io/) to handle its content.
+This template includes a [Remix](https://remix.run/) app with a [Sanity Studio](https://www.sanity.io/) – an open-source React application that connects to your Sanity project’s hosted dataset. The Studio is configured locally and can then be deployed for content collaboration.
 
-## Featuring
+## Features
 
-- 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)
+- Fetch content seamlessly with [Sanity Content Lake](https://www.sanity.io/docs/datastore).
+- Render beautiful block content using [Portable Text](https://www.sanity.io/docs/presenting-block-text).
+- Manage and create content with the intuitive [Sanity Studio](https://www.sanity.io/docs/sanity-studio).
+- Live visual editing through [Sanity's Presentation tools](https://www.sanity.io/docs/presentation).
+- Advanced image cropping and rendering via [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.
+## Demo
 
-## Prerequisities
+https://sanity-template-remix-clean.sanity.build
 
-- [Node.js](https://nodejs.org/en/) (v14.18 or later)
-- [Sanity CLI](https://www.sanity.io/docs/getting-started-with-sanity-cli) (optional)
+## Getting Started
 
-## Getting started
+### Install the template
 
-Run the following commands to prepare both applications:
+#### 1. Initialize template with Sanity CLI
 
-1. From the root of the repository, install dependencies
+Run the command in your Terminal to initialize this template on your local computer.
 
-```sh
-pnpm install
+See the documentation if you are [having issues with the CLI](https://www.sanity.io/help/cli-errors).
+
+```shell
+npm create sanity@latest -- --template sanity-template-remix-clean
 ```
 
-2. Select or create a Sanity project and dataset, and output the details to a `.env.local` file
+#### 2. Run the application and Sanity Studio
+
+Navigate to the template directory using `cd <your app name>`, and start the development servers by running the following command
 
-```sh
-cd studio && pnpm sanity init --env .env.local
+```shell
+npm run dev
 ```
 
-3. From the **root directory**, copy environment variables from the Studio folder to the Remix folder
+#### 3. Open the app and sign in to the Studio
 
-```sh
-cp ./studio/.env.local ./app/.env
-```
+Open the Remix app running locally in your browser on [http://localhost:3000](http://localhost:3000).
 
-4.  Start the development servers:
+Open the Studio running locally in your browser on [http://localhost:3333](http://localhost:3333). You should now see a screen prompting you to log in to the Studio. Use the same service (Google, GitHub, or email) that you used when you logged in to the CLI.
 
-```sh
-pnpm dev
-```
+### Adding content with Sanity
 
-- Your Remix app should now be running on [http://localhost:3000/](http://localhost:3000/)
-- Your Studio should now be running on [http://localhost:3333/](http://localhost:3333/).
+#### 1. Publish your first document
 
-_Feel free to move each of the folders to their own location and check them into version control._
+The template comes pre-defined with a schema containing a `Post` document type.
 
-### Enable Visual Editing in the Remix app
+From the Studio, click "+ Create" and select the `Post` document type. Go ahead and create and publish the document.
 
-Update the `.env` file in the `/app` directory to enable "stega", which is required for [Presentation](https://www.sanity.io/docs/presentation).
+Your content should now appear in your Remix app ([http://localhost:3000](http://localhost:3000)) as well as in the Studio on the "Presentation" Tab
 
+#### 2. Extending the Sanity schema
+
+The schema for the `Post` document type is defined in the `studio/src/schemaTypes/post.ts` file. You can [add more document types](https://www.sanity.io/docs/schema-types) to the schema to suit your needs.
+
+### Deploying your application and inviting editors
+
+#### 1. Deploy Sanity Studio
+
+Your Remix frontend (`/remix-app`) and Sanity Studio (`/studio`) are still only running on your local computer. It's time to deploy and get it into the hands of other content editors.
+
+Back in your Studio directory (`/studio`), run the following command to deploy your Sanity Studio.
+
+```shell
+npx sanity deploy
 ```
-# ./app/.env
-SANITY_STUDIO_STEGA_ENABLED="true"
-```
 
-### Add content in the Studio
+#### 2. Deploy Remix app to Vercel
+
+You have the freedom to deploy your Remix app to your hosting provider of choice. With Vercel and GitHub being a popular choice, we'll cover the basics of that approach.
 
-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
+1. Create a GitHub repository from this project. [Learn more](https://docs.github.com/en/migrations/importing-source-code/using-the-command-line-to-import-source-code/adding-locally-hosted-code-to-github).
+2. Create a new Vercel project and connect it to your Github repository.
+3. Set the `Root Directory` to your Remix app.
+4. Configure your Environment Variables.
 
-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.
+#### 3. Invite a collaborator
 
-## Deployments
+Now that you’ve deployed your Remix application and Sanity Studio, you can optionally invite a collaborator to your Studio. Open up [Manage](https://www.sanity.io/manage), select your project and click "Invite project members"
 
-The `/app` and `/studio` folders are meant to be deployed separately.
+They will be able to access the deployed Studio, where you can collaborate together on creating content.
 
-Make sure that after `/app` is deployed the `.env` file in `/studio` is updated with its deployment URL under `SANITY_STUDIO_PREVIEW_URL`.
+## Resources
 
-And `/app` has a `.env` file with `SANITY_STUDIO_URL` that points to the Studio's deployment URL.
+- [Sanity documentation](https://www.sanity.io/docs)
+- [Remix documentation](https://remix.run/docs/en/main)
+- [Join the Sanity Community](https://slack.sanity.io)
+- [Learn Sanity](https://www.sanity.io/learn)