chore: add new example app with visual editing enabled (#188)

The example app uses a new movies Sanity project so we can freely play around
with the data.

apps/example-ssr/package.json

@@ -6,9 +6,9 @@
     "astro": "astro",
     "build": "astro build",
     "clean": "rimraf .astro && rimraf .turbo && rimraf .vercel && rimraf node_modules",
-    "dev": "astro dev",
+    "dev": "astro dev --port 4323",
     "preview": "astro preview",
-    "start": "astro dev"
+    "start": "astro dev --port 4323"
   },
   "dependencies": {
     "@astro-community/astro-embed-youtube": "^0.5.2",

apps/example/package.json

@@ -6,9 +6,9 @@
     "astro": "astro",
     "build": "astro build",
     "clean": "rimraf .astro rimraf dist && rimraf .turbo && rimraf node_modules",
-    "dev": "astro dev",
+    "dev": "astro dev --port 4322",
     "preview": "astro preview",
-    "start": "astro dev"
+    "start": "astro dev --port 4322"
   },
   "dependencies": {
     "@astro-community/astro-embed-youtube": "^0.5.2",

apps/movies/.gitignore

@@ -0,0 +1,26 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
+.vercel
+.env*.local

apps/movies/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

apps/movies/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

apps/movies/README.md

@@ -0,0 +1 @@
+# Movies Example App

apps/movies/astro.config.mjs

@@ -0,0 +1,23 @@
+import {defineConfig} from 'astro/config'
+
+import react from '@astrojs/react'
+import vercel from '@astrojs/vercel/serverless'
+import sanity from '@sanity/astro'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    sanity({
+      projectId: '4j2qnyob',
+      dataset: 'production',
+      useCdn: true,
+      studioBasePath: '/admin',
+      stega: {
+        studioUrl: '/admin',
+      },
+    }),
+    react(),
+  ],
+  output: 'server',
+  adapter: vercel(),
+})

apps/movies/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "movies",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "astro": "astro",
+    "build": "astro check && astro build",
+    "dev": "astro dev --port 4321",
+    "preview": "astro preview",
+    "start": "astro dev --port 4321"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.7.0",
+    "@astrojs/react": "^3.4.0",
+    "@astrojs/vercel": "^7.3.4",
+    "@sanity/astro": "workspace:^",
+    "@sanity/client": "^6.19.1",
+    "@sanity/visual-editing": "^2.1.3",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "astro": "^4.9.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
+    "sanity": "^3.44.0",
+    "typescript": "^5.4.5"
+  }
+}

apps/movies/sanity.cli.ts

@@ -0,0 +1,8 @@
+import {defineCliConfig} from 'sanity/cli'
+
+export default defineCliConfig({
+  api: {
+    projectId: '4j2qnyob',
+    dataset: 'production',
+  },
+})

apps/movies/sanity.config.ts

@@ -0,0 +1,27 @@
+import {defineConfig} from 'sanity'
+import {structureTool} from 'sanity/structure'
+import {schemaTypes} from './schemaTypes'
+import {presentationTool} from 'sanity/presentation'
+
+export default defineConfig({
+  name: 'default',
+  title: 'sanity-astro-movies',
+
+  projectId: '4j2qnyob',
+  dataset: 'production',
+
+  plugins: [
+    presentationTool({
+      previewUrl: process.env.VERCEL_BRANCH_URL
+        ? `https://${process.env.VERCEL_BRANCH_URL}`
+        : process.env.VERCEL_PROJECT_PRODUCTION_URL
+          ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
+          : 'http://localhost:4321',
+    }),
+    structureTool(),
+  ],
+
+  schema: {
+    types: schemaTypes,
+  },
+})

apps/movies/schemaTypes/blockContent.ts

@@ -0,0 +1,67 @@
+import {defineArrayMember, defineType} from 'sanity'
+
+/**
+ * This is the schema definition for the rich text fields used for
+ * for this blog studio. When you import it in schemas.js it can be
+ * reused in other parts of the studio with:
+ *  {
+ *    name: 'someName',
+ *    title: 'Some title',
+ *    type: 'blockContent'
+ *  }
+ */
+export default defineType({
+  title: 'Block Content',
+  name: 'blockContent',
+  type: 'array',
+  of: [
+    defineArrayMember({
+      title: 'Block',
+      type: 'block',
+      // Styles let you set what your user can mark up blocks with. These
+      // correspond with HTML tags, but you can set any title or value
+      // you want and decide how you want to deal with it where you want to
+      // use your content.
+      styles: [
+        {title: 'Normal', value: 'normal'},
+        {title: 'H1', value: 'h1'},
+        {title: 'H2', value: 'h2'},
+        {title: 'H3', value: 'h3'},
+        {title: 'H4', value: 'h4'},
+        {title: 'Quote', value: 'blockquote'},
+      ],
+      lists: [{title: 'Bullet', value: 'bullet'}],
+      // Marks let you mark up inline text in the block editor.
+      marks: {
+        // Decorators usually describe a single property – e.g. a typographic
+        // preference or highlighting by editors.
+        decorators: [
+          {title: 'Strong', value: 'strong'},
+          {title: 'Emphasis', value: 'em'},
+        ],
+        // Annotations can be any object structure – e.g. a link or a footnote.
+        annotations: [
+          {
+            title: 'URL',
+            name: 'link',
+            type: 'object',
+            fields: [
+              {
+                title: 'URL',
+                name: 'href',
+                type: 'url',
+              },
+            ],
+          },
+        ],
+      },
+    }),
+    // You can add additional types here. Note that you can't use
+    // primitive types such as 'string' and 'number' in the same array
+    // as a block type.
+    defineArrayMember({
+      type: 'image',
+      options: {hotspot: true},
+    }),
+  ],
+})

apps/movies/schemaTypes/castMember.ts

@@ -0,0 +1,37 @@
+import {defineField, defineType} from 'sanity'
+
+export default defineType({
+  name: 'castMember',
+  title: 'Cast Member',
+  type: 'object',
+  fields: [
+    defineField({
+      name: 'characterName',
+      title: 'Character Name',
+      type: 'string',
+    }),
+    defineField({
+      name: 'person',
+      title: 'Actor',
+      type: 'reference',
+      to: [{type: 'person'}],
+    }),
+    defineField({
+      name: 'externalId',
+      title: 'External ID',
+      type: 'number',
+    }),
+    defineField({
+      name: 'externalCreditId',
+      title: 'External Credit ID',
+      type: 'string',
+    }),
+  ],
+  preview: {
+    select: {
+      subtitle: 'characterName',
+      title: 'person.name',
+      media: 'person.image',
+    },
+  },
+})

apps/movies/schemaTypes/crewMember.ts

@@ -0,0 +1,52 @@
+// @ts-check
+import {defineField, defineType} from 'sanity'
+
+export default defineType({
+  name: 'crewMember',
+  title: 'Crew Member',
+  type: 'object',
+  fields: [
+    defineField({
+      name: 'department',
+      title: 'Department',
+      type: 'string',
+    }),
+    defineField({
+      name: 'job',
+      title: 'Job',
+      type: 'string',
+    }),
+    defineField({
+      name: 'person',
+      title: 'Person',
+      type: 'reference',
+      to: [{type: 'person'}],
+    }),
+    defineField({
+      name: 'externalId',
+      title: 'External ID',
+      type: 'number',
+    }),
+    defineField({
+      name: 'externalCreditId',
+      title: 'External Credit ID',
+      type: 'string',
+    }),
+  ],
+  preview: {
+    select: {
+      name: 'person.name',
+      job: 'job',
+      department: 'department',
+      media: 'person.image',
+    },
+    prepare(selection) {
+      const {name, job, department, media} = selection
+      return {
+        title: name,
+        subtitle: `${job} [${department}]`,
+        media,
+      }
+    },
+  },
+})

apps/movies/schemaTypes/index.ts

@@ -0,0 +1,22 @@
+import blockContent from './blockContent'
+import crewMember from './crewMember'
+import castMember from './castMember'
+import movie from './movie'
+import person from './person'
+import screening from './screening'
+import plotSummary from './plotSummary'
+import plotSummaries from './plotSummaries'
+
+export const schemaTypes = [
+  // Document types
+  movie,
+  person,
+  screening,
+
+  // Other types
+  blockContent,
+  plotSummary,
+  plotSummaries,
+  castMember,
+  crewMember,
+]