sanity-io / sanity-template-vercel-visual-editing Goto Github PK

View Code? Open in Web Editor NEW

36.0 16.0 14.0 1.52 MB

Home Page: https://sanity-template-vercel-visual-editing-git-preview.sanity.build

TypeScript 97.79% JavaScript 1.69% CSS 0.52%

team-ecosystem

sanity-template-vercel-visual-editing's Introduction

Vercel Visual Editing Demo

Live demo

Note

Vercel Visual Editing is available on Vercel's Pro and Enterprise plans and on all Sanity plans.

This starter is preconfigured to support Visual Editing, a new feature that enables you to make changes using Vercel's draft mode and new edit functionality. It is a statically generated personal website that uses Next.js for the frontend and Sanity to handle its content.

It comes with a native Sanity Studio that offers features like real-time collaboration, instant side-by-side content previews, and intuitive editing.

The Studio connects to Sanity Content Lake, which gives you hosted content APIs with a flexible query language, on-demand image transformations, powerful patching, and more.

You can use this starter to kick-start a personal website to learn more about Visual Editing or other awesome Sanity features.

Features

A performant, static personal personal website with editable projects
A native and customizable authoring environment, accessible on yourpersonalwebsite.com/studio
Real-time and collaborative content editing with fine-grained revision history
Support for block content and the most advanced custom fields capability in the industry
Free Sanity project with unlimited admin users, free content updates, and pay-as-you-go for API overages
A project with starter-friendly and not too heavy-handed TypeScript and Tailwind.css

Features
Table of Contents
Project Overview
- Important files and folders
Configuration
Questions and Answers
- It doesn't work! Where can I get help?
- How can I remove the "Next steps" block from my personal site?
Next steps

Project Overview

Personal Website	Studio

Important files and folders

File(s)	Description
`sanity.config.ts`	Config file for Sanity Studio
`sanity.cli.ts`	Config file for Sanity CLI
`/pages/studio/[[...index]]/page.tsx`	Where Sanity Studio is mounted
`/schemas`	Where Sanity Studio gets its content types from
`/plugins`	Where the advanced Sanity Studio customization is setup
`/lib/sanity.api.ts`,`/lib/sanity.image.ts`	Configuration for the Sanity Content Lake client

Configuration

Step 1. Set up the environment

Use the Deploy Button below. It will let you deploy the starter using Vercel as well as connect it to your Sanity Content Lake using the Sanity Vercel Integration.

Step 2. Set up the project locally

Clone the repository that was created for you on your GitHub account. Once cloned, run the following command from the project's root directory:

npx vercel link

Download the environment variables needed to connect Next.js and the Studio to your Sanity project:

npx vercel env pull

Step 3. Run Next.js locally in development mode

npm install && npm run dev

When you run this development server, the changes you make in your frontend and studio configuration will be applied live using hot reloading.

Your personal website should be up and running on http://localhost:3000! You can create and edit content on http://localhost:3000/studio.

Step 4. Deploy to production

To deploy your changes to production you use git:

git add .
git commit
git push

Alternatively, you can deploy without a git hosting provider using the Vercel CLI:

npx vercel --prod

Questions and Answers

How do I enable Visual Editing on my own Vercel project?

Read our guide.

It doesn't work! Where can I get help?

In case of any issues or questions, you can post:

How can I remove the "Next steps" block from my personal website?

You can remove it by deleting the IntroTemplate component in /components/shared/Layout.tsx and the /intro-template directory.

Next steps

sanity-template-vercel-visual-editing's People

Contributors

Stargazers

Watchers

Forkers

dopaminedriven creativewebmatrixsolutions marraleks fulldev12345 fabiolacerdapro unitof usmanasif1997 starmarketpros pixel-panda obsfeil jdot274 thucvu97 noumanjavaid96 ernestoho

sanity-template-vercel-visual-editing's Issues

Bug: Fresh install from Vercel throws error Module not found: Can't resolve '@floating-ui/react-dom'

Steps to reproduce the behavior:

Go to Vercel's Starter Projects
Click on Visual Editing with Sanity
Click Deploy
After connecting, it begins building
Error below while installing dependencies

[09:32:25.349] Cloning github.com/DanielHirunrusme/ctk-next-sanity (Branch: main, Commit: 384d6b5)
[09:32:26.411] Previous build cache not available
[09:32:26.606] Cloning completed: 1.257s
[09:32:27.403] Running "vercel build"
[09:32:27.908] Vercel CLI 32.6.1
[09:32:28.290] Installing dependencies...
[09:32:33.563] npm WARN deprecated [email protected]: As of Next.js 10.2, Google Fonts are automatically optimized! For more info, see https://github.com/joe-bell/next-google-fonts
[09:32:56.351] 
[09:32:56.352] added 895 packages in 28s
[09:32:56.353] 
[09:32:56.353] 195 packages are looking for funding
[09:32:56.353]   run `npm fund` for details
[09:32:56.379] Detected Next.js version: 14.0.3
[09:32:56.386] Detected `package-lock.json` generated by npm 7+
[09:32:56.387] Running "npm run build"
[09:32:56.931] 
[09:32:56.931] > build
[09:32:56.932] > next build
[09:32:56.933] 
[09:32:57.524] Attention: Next.js now collects completely anonymous telemetry regarding usage.
[09:32:57.525] This information is used to shape Next.js' roadmap and prioritize features.
[09:32:57.525] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
[09:32:57.525] https://nextjs.org/telemetry
[09:32:57.526] 
[09:32:57.628]    ▲ Next.js 14.0.3
[09:32:57.629] 
[09:32:57.629]    Creating an optimized production build ...
[09:33:47.144] Failed to compile.
[09:33:47.144] 
[09:33:47.145] ./node_modules/@sanity/overlays/dist/_chunks/Overlays-yIeqf3KO.js
[09:33:47.145] Module not found: Can't resolve '@floating-ui/react-dom'
[09:33:47.145] 
[09:33:47.146] https://nextjs.org/docs/messages/module-not-found
[09:33:47.146] 
[09:33:47.146] Import trace for requested module:
[09:33:47.146] ./node_modules/@sanity/overlays/dist/_chunks/index-JtjVptJR.js
[09:33:47.146] ./node_modules/@sanity/overlays/dist/index.js
[09:33:47.146] ./components/preview/SanityVisualEditing.tsx
[09:33:47.147] ./pages/_app.tsx
[09:33:47.147] 
[09:33:47.147] 
[09:33:47.147] > Build failed because of webpack errors
[09:33:47.235] Error: Command "npm run build" exited with 1
[09:33:47.683]  ```

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Using a curated preset maintained by

Sanity: The Composable Content Cloud

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
github-actions	`tibdex/github-app-token`
npm	`next-google-fonts`

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

chore(deps): update non-major (@portabletext/react, @sanity/client, @sanity/icons, @sanity/preview-url-secret, @sanity/vision, @sanity/visual-editing, @tailwindcss/typography, @types/react, autoprefixer, eslint-config-next, eslint-plugin-simple-import-sort, next, next-sanity, peter-evans/create-pull-request, postcss, prettier, prettier-plugin-packagejson, prettier-plugin-tailwindcss, react, react-dom, react-is, sanity, styled-components, tailwindcss, tibdex/github-app-token, typescript)
chore(deps): update dependency @sanity/icons to v3
chore(deps): update dependency @sanity/visual-editing to v2
chore(deps): update dependency next-sanity to v9
chore(deps): update dependency sanity-plugin-asset-source-unsplash to v2
chore(deps): update dependency sanity-plugin-asset-source-unsplash to v3
chore(deps): lock file maintenance
🔐 Create all pending approval PRs at once 🔐

Detected dependencies

github-actions

.github/workflows/ci.yml

actions/checkout v4

actions/setup-node v4

.github/workflows/lock.yml

dessant/lock-threads v5@1bf7ec25051fe7c00bdd17e6a7cf3d7bfb7dc771

.github/workflows/prettier.yml

actions/checkout v4

actions/setup-node v4

actions/cache v4

tibdex/github-app-token v2@3beb63f4bd073e61482598c45c71c1019b59b73a

peter-evans/create-pull-request v6@a4f52f8033a6168103c2538976c07b467e8163bc

.github/workflows/preview.yml

actions/checkout v4

tibdex/github-app-token v2@3beb63f4bd073e61482598c45c71c1019b59b73a

connor-baer/action-sync-branch main

npm

package.json

@portabletext/react 3.0.11

@sanity/client 6.15.1

@sanity/demo 2.0.0

@sanity/icons 2.10.3

@sanity/image-url 1.0.2

@sanity/preview-url-secret 1.6.4

@sanity/vision 3.31.0

@sanity/visual-editing 1.6.0

@tailwindcss/typography 0.5.10

@vercel/og 0.6.2

classnames 2.5.1

get-youtube-id 1.0.1

intl-segmenter-polyfill 0.4.4

next 14.1.2

next-google-fonts 2.2.0

next-sanity 8.1.3

react 18.2.0

react-dom 18.2.0

react-is 18.2.0

react-lite-youtube-embed 2.4.0

sanity 3.31.0

sanity-plugin-asset-source-unsplash 1.1.2

styled-components 6.1.8

@types/react 18.2.63

autoprefixer 10.4.18

eslint 8.57.0

eslint-config-next 14.1.2

eslint-plugin-simple-import-sort 12.0.0

postcss 8.4.35

prettier 3.2.5

prettier-plugin-packagejson 2.4.12

prettier-plugin-tailwindcss 0.5.11

tailwindcss 3.4.1

typescript 5.3.3

Check this box to trigger a request for Renovate to run again on this repository

Deprecate this demo in favor of the personal website starter

Describe the solution you'd like
Pretty straightforward request. I just started with this repo after finding it in the vercel starter repo, but found that it's actually a less-up-to-date version of the nextjs-personal-website starter.

TBH I only used this one because I thought it was the only starter supporting visual editing, but the other seems to support it.