Added a blog example, complete with sample content. Use the Readme in…

… the blog folder to go through steps of setting it up. The entire repo has been updated to recent Sanity and Astro versions, to avoid recent problems and those with mixed app requirements. So be sure to build the package first, as it is used by blog and others rather than the published package. The fix is included from PR sanity-io#210.

apps/blog/.env_example

@@ -0,0 +1,12 @@
+# these you arrange on your sanity.io/manage login
+PUBLIC_SANITY_PROJECT_ID='your-projrctId'
+PUBLIC_SANITY_DATASET='your-dataset'
+PUBLIC_SANITY_VIEWER_TOKEN='your-viewer-token'
+
+# this is the single url for this app where you're running it, dev or deploy
+PUBLIC_SANITY_STUDIO_PREVIEW_URL='your-dev-or-deployment-url'
+PUBLIC_SANITY_API_VERSION='v2024-05-25'
+
+# choose settings here
+PUBLIC_SANITY_STUDIO_BASE_PATH='/admin'
+PUBLIC_SANITY_VISUAL_EDITING='true'

apps/blog/.gitignore

@@ -0,0 +1,25 @@
+# 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
+.vercel
+.env*.local
+
+.vercel

apps/blog/README.md

@@ -0,0 +1,90 @@
+
+# Presentation-editing blog example
+
+This is a visually-featured simple blog, derived from improvements made on the past sanity-astro-template-clean project.
+
+It implements full Presentation content editing, using the fresh expansion of abilities in @sanity/astro version 3.1
+
+A set of example content is included, so you can easily bring up the site,see how it operates.
+
+And there's also a Media Browser and Unsplash access added, so that when you Click-to-Edit, and feel you'd like to change a look, a lot of variety is going to be right there, to discover and choose.
+
+## Notes for this stage
+
+Extensions and modifications have been added to the components and utilities basis, to achieve this.
+
+These should be considered to be at a beta stage, as how they're done has a chance to improve, or as beginnings on useful features become completed.
+
+Once there's stable enough design and experience, this blog example wil lbe PRed to the official @sanity/astro repo.
+
+### Using the sample content
+
+What's included for you is the same content that's appeared in a demo movie or two, and it's easily added from the /content folder.
+
+1. To add the content for use, first prepare your Sanity.io project, so that you habe a projectId and dataset.
+
+2. Put these into your own /.env file, acording to eh /.env_example
+
+3. If you haven't done so, install the Sanity CLI with: `npm install -g sanity'`
+
+5. Go to the /apps/blog folder, and make the upload there, with this command: `sanity dataset import content/contentable.tar.gz`
+
+6. The upload will take a few minutes, depending on your internet speed, and give you two working pages including their images.
+
+### Building your site
+
+The repository you cloned is a monorepo, which has its conveniences, but the thing you nered to remember while developoing with it is that the @sanity/astro package will be operating locally. 
+So you'll want to build that, even if you are doing the rest of your work in dev -- and you'll need to do so before you can run any of the apps.
+1. Go to your /packages/sanity-astro folder
+2. Enter `npm run build` on your command line, and return.
+3. The package should build, anf inform you.
+
+Once that's done, return to your /apps/blog which will use it. 
+
+- be sure you've filled in all the environmental variables in your .env, with .env_example to guide values.
+- There you can type 'npm run dev' in the usual way and on clicking the link it offers, you'll get your first view of this blog example website.
+- Presentation will be operating, so you'll see blue outlines as you hover over content areas.
+- On this page, each blue outline will have a Edit tab. Click on this, and your Studio will launch...and you'll be in Presentation, ready to make live changes, and see what happens when you do.
+
+### Operating 'presentationally'
+
+Once you're up and running, you'll find there's actually a lot to explore.
+
+For example, each of those dropdowns and tiny icons on the Studio screen has its use, and often a very handy one.
+- you can check what your site adjustments look like in a phone view, as well as regular screen
+- you can find out -- and navigate to -- wherever a piece of content is used. 
+  - This comes with the small dropdown menu, 'Used on page/s', that you find near the top of the editor. 
+  - it's set up by the `locate` configuration in the /structure folder
+  - When you're looking at content in the Structure editor, that's the way to go to Presentation on it
+- You can navigate by click, usually, on either editor or the visible page
+- you can turn of navigation if you need to use a button, for example on the page
+
+### Patience is a virtue...
+
+Once you get used to it, you'll find there are many facets of Presentation to appreciate. 
+
+The ability to crop and hotspot images as you see the results, to get that the exactly expressed idea, or to adjust text so that it 'looks right', or safely handles page resizing, are real boons to be sure.
+
+Is it perfect? It isn't. But it's very useful, and always improving.
+
+As you might expect, things can occur. It's probably not possible to always click the content you want entirely into view. But it will be visible, and you can just scroll a little, to get the full portion you'd like to see.
+
+A known problem at the moment is that a click may not register at times. You have all the moves you need, though, to keep working smoothly. 
+
+Two particular recoveries are:
+- click on another element of the content, or another content area, to gain back clickability.
+- or just manually scroll to see what you wanted -- you'll find the editing itself is always live, always reliable once there.
+
+If a page has a particular problem, as some in development may, there's a handy small circle-arrow page refresh, just like in a browser, which can clear such matters.
+
+You can pull the center divider around, to set page view and editor sharing as you'd like. This tends to fight back a bit, but it won't if you move your mouse up higher on the page, while you adjust.
+
+Presentation is a powerful and inviting toolset, and it's worth getting familiar with it, so those tools feel they're yours.
+
+## Basis learning and documentation
+
+The nearby /apps/example and example-ssr projects will give fundamental views of how @sanity/astro can be used.
+
+This blog app begins with the SSR pattern you'll find there, though in future it can be easily arranged to offer both visual content editing, and a full speed static production website, from the same source repository. You'd select how it acts by setting environmental variables.
+
+You can find the complete documentation for @sanity/astro in the /packages folder here.

apps/blog/astro.config.mjs

@@ -0,0 +1,44 @@
+import sanityIntegration from "@sanity/astro";
+import { defineConfig } from "astro/config";
+import vercel from "@astrojs/vercel/serverless";
+import react from "@astrojs/react";
+import { loadEnv } from 'vite'
+
+const env = {
+  ...process.env,
+  ...loadEnv(process.env.NODE_ENV, process.cwd(), [
+    'PUBLIC_SANITY_', // can add others
+  ])}
+
+// 'sanity' check...
+if (!(env.PUBLIC_SANITY_PROJECT_ID && env.PUBLIC_SANITY_DATASET
+  && env.PUBLIC_SANITY_VIEWER_TOKEN && env.PUBLIC_SANITY_API_VERSION)) {
+  throw new Error ('You have to fill in all your /.env environmental variables, ' +
+      'from the example in /.env_example, before you can run this site...'
+  )
+}
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    sanityIntegration({
+      projectId: env.PUBLIC_SANITY_PROJECT_ID,
+      dataset: env.PUBLIC_SANITY_DATASET,
+      apiVersion: env.PUBLIC_SANITY_API_VERSION,
+      useCdn: false,
+      perspective: 'previewDrafts',
+      token: env.PUBLIC_SANITY_VIEWER_TOKEN,
+      stega: {
+        enabled:true,
+        studioUrl: env.PUBLIC_SANITY_STUDIO_PREVIEW_URL
+            + env.PUBLIC_SANITY_STUDIO_BASE_PATH,
+      },
+      studioBasePath: /*env.PUBLIC_SANITY_STUDIO_PREVIEW_URL +*/ env.PUBLIC_SANITY_STUDIO_BASE_PATH,
+    }),
+    react(),
+  ],
+  output: "server",
+  adapter: vercel({
+    edgeMiddleware: true,
+  }),
+});

apps/blog/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "blog",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "clean": "rimraf .turbo && rimraf .vercel && rimraf node_modules",
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astro-community/astro-embed-youtube": "^0.5.2",
+    "@astrojs/prism": "^3.1.0",
+    "@astrojs/react": "^3.6.1",
+    "@astrojs/vercel": "^7.7.2",
+    "@sanity/astro": "workspace:^",
+    "@sanity/client": "^6.21.1",
+    "@sanity/image-url": "^1.0.2",
+    "@sanity/vision": "^3.53.0",
+    "@sanity/visual-editing": "^2.1.8",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "astro": "^4.13.1",
+    "astro-portabletext": "^0.10.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rxjs": "^7.8.1",
+    "sanity": "^3.53.0",
+    "sanity-plugin-asset-source-unsplash": "^3.0.1",
+    "sanity-plugin-media": "^2.3.2",
+    "styled-components": "^6.1.12",
+    "vite": "^5.4.0"
+  }
+}

apps/blog/sanity.cli.ts

@@ -0,0 +1,9 @@
+// sanity.cli.js
+import { defineCliConfig } from "sanity/cli";
+
+export default defineCliConfig({
+  api: {
+    projectId: process.env.PUBLIC_SANITY_PROJECT_ID,
+    dataset: process.env.PUBLIC_SANITY_DATASET,
+  }
+});

apps/blog/sanity.config.ts

@@ -0,0 +1,49 @@
+import { defineConfig } from "sanity";
+
+import { structureTool} from "sanity/structure";
+import { visionTool } from "@sanity/vision";
+import { defineDocuments, presentationTool } from 'sanity/presentation'
+import { media } from 'sanity-plugin-media'
+import { unsplashImageAsset } from 'sanity-plugin-asset-source-unsplash'
+
+import { schemaTypes } from "./schemas";
+import { locate } from './src/structure/locate.ts'
+
+export const projectId =
+   import.meta.env.PUBLIC_SANITY_PROJECT_ID
+export const dataset = import.meta.env.PUBLIC_SANITY_DATASET
+
+const SANITY_STUDIO_PREVIEW_URL = (
+  import.meta.env.PUBLIC_SANITY_STUDIO_PREVIEW_URL
+  || 'http://localhost:4321'
+)
+
+export default defineConfig({
+  name: "sanity-astro",
+  title: "Sanity Astro",
+  projectId,
+  dataset,
+  plugins: [
+    structureTool(),
+    visionTool(),
+    presentationTool({
+      previewUrl: SANITY_STUDIO_PREVIEW_URL,
+      title: 'Presentation',
+      resolve:  {
+        // *todo* apparently non-functional as yet
+        mainDocuments: defineDocuments([
+          {
+            route: '/posts/:slug',
+            filter: `_type == "post" && slug.current == $slug`,
+          },
+        ]),
+        locations: locate,
+      },
+    }),
+    media(),
+    unsplashImageAsset(),
+  ],
+  schema: {
+    types: schemaTypes,
+  },
+});

apps/blog/schemas/blockContent.ts

@@ -0,0 +1,65 @@
+import { defineType, defineArrayMember } from "sanity";
+/**
+ * This is the schemas definition for the rich text fields used for
+ * for this blog-simple 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",
+              },
+            ],
+          },
+        ],
+      },
+    }),
+    defineArrayMember({
+      type: "ptImage",
+      // options: {
+      //   hotspot: true,
+      // },
+    }),
+  ],
+});

apps/blog/schemas/index.ts

@@ -0,0 +1,4 @@
+import blockContent from "./blockContent";
+import post from "./post";
+import ptImage from './ptImage'
+export const schemaTypes = [post, blockContent, ptImage ];