generated from sanity-io/sanity-template-nextjs-app-router-personal-website
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit c7af979
Showing
75 changed files
with
13,914 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
# Defaults, used by ./intro-template and can be deleted if the component is removed | ||
NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER="sanity-io" | ||
NEXT_PUBLIC_VERCEL_GIT_PROVIDER="github" | ||
NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG="nextjs-personal-website-cms-sanity-v3" | ||
|
||
# Required, find them on https://manage.sanity.io | ||
NEXT_PUBLIC_SANITY_PROJECT_ID= | ||
NEXT_PUBLIC_SANITY_DATASET= | ||
SANITY_API_READ_TOKEN= | ||
# Optional, useful if you plan to add API functions that can write to your dataset | ||
SANITY_API_WRITE_TOKEN= | ||
|
||
# Optional, can be used to change the Studio title in the navbar and differentiate between production and staging environments for your editors | ||
NEXT_PUBLIC_SANITY_PROJECT_TITLE="Next.js Personal Website with Sanity.io" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
{ | ||
"extends": "next", | ||
"plugins": ["simple-import-sort"], | ||
"rules": { | ||
"simple-import-sort/imports": "warn", | ||
"simple-import-sort/exports": "warn", | ||
"react-hooks/exhaustive-deps": "error" | ||
} | ||
} |
Validating CODEOWNERS rules …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
* @sanity-io/ecosystem |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
{ | ||
"description": "Check the readme: https://github.com/sanity-io/renovate-config#readme", | ||
"$schema": "https://docs.renovatebot.com/renovate-schema.json", | ||
"extends": ["github>sanity-io/renovate-config:starter-template"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
name: CI | ||
|
||
on: | ||
merge_group: | ||
pull_request: | ||
push: | ||
branches: [main] | ||
workflow_dispatch: | ||
|
||
concurrency: | ||
group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }} | ||
cancel-in-progress: true | ||
|
||
jobs: | ||
build: | ||
runs-on: ubuntu-latest | ||
steps: | ||
- uses: actions/checkout@v4 | ||
- uses: actions/setup-node@v3 | ||
with: | ||
cache: npm | ||
node-version: lts/* | ||
- run: npm ci | ||
- run: npm run type-check | ||
- run: npm run lint -- --max-warnings 0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
--- | ||
name: 'Lock Threads' | ||
|
||
on: | ||
schedule: | ||
- cron: '0 0 * * *' | ||
workflow_dispatch: | ||
|
||
permissions: | ||
issues: write | ||
pull-requests: write | ||
|
||
concurrency: | ||
group: ${{ github.workflow }} | ||
cancel-in-progress: true | ||
|
||
jobs: | ||
action: | ||
runs-on: ubuntu-latest | ||
steps: | ||
- uses: dessant/lock-threads@be8aa5be94131386884a6da4189effda9b14aa21 # v4 | ||
with: | ||
issue-inactive-days: 0 | ||
pr-inactive-days: 0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
--- | ||
name: Prettier | ||
|
||
on: | ||
push: | ||
branches: [main] | ||
workflow_dispatch: | ||
|
||
concurrency: | ||
group: ${{ github.workflow }}-${{ github.ref_name }} | ||
cancel-in-progress: true | ||
|
||
permissions: | ||
contents: read | ||
|
||
jobs: | ||
run: | ||
name: Can the code be prettier? 🤔 | ||
runs-on: ubuntu-latest | ||
# workflow_dispatch always lets you select the branch ref, even though in this case we only ever want to run the action on `main` this we need an if check | ||
if: ${{ github.ref_name == 'main' }} | ||
steps: | ||
- uses: actions/checkout@v4 | ||
- uses: actions/setup-node@v3 | ||
with: | ||
cache: npm | ||
node-version: lts/* | ||
- run: npm ci --ignore-scripts --only-dev | ||
- uses: actions/cache@v3 | ||
with: | ||
path: node_modules/.cache/prettier/.prettier-cache | ||
key: prettier-${{ hashFiles('package-lock.json') }}-${{ hashFiles('.gitignore') }} | ||
- run: npm run format | ||
- run: git restore .github/workflows | ||
- uses: tibdex/github-app-token@3beb63f4bd073e61482598c45c71c1019b59b73a # v2 | ||
id: generate-token | ||
with: | ||
app_id: ${{ secrets.ECOSPARK_APP_ID }} | ||
private_key: ${{ secrets.ECOSPARK_APP_PRIVATE_KEY }} | ||
- uses: peter-evans/create-pull-request@153407881ec5c347639a548ade7d8ad1d6740e38 # v5 | ||
with: | ||
author: github-actions <41898282+github-actions[bot]@users.noreply.github.com> | ||
body: I ran `npm run format` 🧑💻 | ||
branch: actions/prettier-if-needed | ||
commit-message: 'chore(prettier): 🤖 ✨' | ||
labels: 🤖 bot | ||
title: 'chore(prettier): 🤖 ✨' | ||
token: ${{ steps.generate-token.outputs.token }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
||
# dependencies | ||
/node_modules | ||
/studio/node_modules | ||
/.pnp | ||
.pnp.js | ||
|
||
# testing | ||
/coverage | ||
|
||
# next.js | ||
/.next/ | ||
/out/ | ||
|
||
# production | ||
/build | ||
/studio/dist | ||
|
||
# misc | ||
.DS_Store | ||
*.pem | ||
.vscode | ||
.idea/ | ||
*.iml | ||
|
||
# debug | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
.pnpm-debug.log* | ||
|
||
# local env files | ||
.env*.local | ||
|
||
# vercel | ||
.vercel | ||
|
||
# typescript | ||
*.tsbuildinfo | ||
|
||
# Env files created by scripts for working locally | ||
.env | ||
studio/.env.development |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
legacy-peer-deps=true |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,148 @@ | ||
# A Next.js Personal Website with a Native Authoring Experience<!-- omit in toc --> | ||
|
||
This starter is a statically generated personal website that uses [Next.js][nextjs] for the frontend and [Sanity][sanity-homepage] 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 or learn these technologies. | ||
|
||
> **Note** | ||
> | ||
> This repo uses the `app-router`. | ||
> | ||
> For a `pages-router` alternative, use [template-nextjs-personal-website][personal-website-pages]. | ||
[![Deploy with Vercel](https://vercel.com/button)][vercel-deploy] | ||
|
||
## Features | ||
|
||
- A performant, static 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 | ||
- Side-by-side instant content preview that works across your whole site | ||
- Support for block content and the most advanced custom fields capability in the industry | ||
- Webhook-triggered Incremental Static Revalidation; no need to wait for a rebuild to publish new content | ||
- 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 | ||
|
||
## Table of Contents | ||
|
||
- [Features](#features) | ||
- [Table of Contents](#table-of-contents) | ||
- [Project Overview](#project-overview) | ||
- [Important files and folders](#important-files-and-folders) | ||
- [Configuration](#configuration) | ||
- [Step 1. Set up the environment](#step-1-set-up-the-environment) | ||
- [Step 2. Set up the project locally](#step-2-set-up-the-project-locally) | ||
- [Step 3. Run Next.js locally in development mode](#step-3-run-nextjs-locally-in-development-mode) | ||
- [Step 4. Deploy to production](#step-4-deploy-to-production) | ||
- [Questions and Answers](#questions-and-answers) | ||
- [It doesn't work! Where can I get help?](#it-doesnt-work-where-can-i-get-help) | ||
- [How can I remove the "Next steps" block from my personal site?](#how-can-i-remove-the-next-steps-block-from-my-personal-website) | ||
- [Next steps](#next-steps) | ||
|
||
## Project Overview | ||
|
||
| [Personal Website](https://template-nextjs-app-router-personal-website.sanity.build/) | [Studio](https://template-nextjs-app-router-personal-website.sanity.build/studio) | | ||
| ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | ||
| ![Personal Website](https://user-images.githubusercontent.com/6951139/206395107-e58a796d-13a9-400a-94b6-31cb5df054ab.png) | ![Sanity Studio](https://user-images.githubusercontent.com/6951139/206395521-8a5f103d-4a0c-4da8-aff5-d2a1961fb2c0.png) | | ||
|
||
### Important files and folders | ||
|
||
| File(s) | Description | | ||
| ------------------------------------------- | ------------------------------------------------------- | | ||
| `sanity.config.ts` | Config file for Sanity Studio | | ||
| `sanity.cli.ts` | Config file for Sanity CLI | | ||
| `/app/studio/[[...index]]/page.tsx` | Where Sanity Studio is mounted | | ||
| `/app/api/revalidate/route.ts` | Serverless route for triggering ISR | | ||
| `/app/api/draft/route.ts` | Serverless route for triggering Draft mode | | ||
| `/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](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-sanity-example) as well as connect it to your Sanity Content Lake using [the Sanity Vercel Integration][integration]. | ||
|
||
[![Deploy with Vercel](https://vercel.com/button)][vercel-deploy] | ||
|
||
### Step 2. Set up the project locally | ||
|
||
[Clone the repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) that was created for you on your GitHub account. Once cloned, run the following command from the project's root directory: | ||
|
||
```bash | ||
npx vercel link | ||
``` | ||
|
||
Download the environment variables needed to connect Next.js and the Studio to your Sanity project: | ||
|
||
```bash | ||
npx vercel env pull | ||
``` | ||
|
||
### Step 3. Run Next.js locally in development mode | ||
|
||
```bash | ||
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][localhost-3000]! You can create and edit content on [http://localhost:3000/studio][localhost-3000-studio]. | ||
|
||
### Step 4. Deploy to production | ||
|
||
To deploy your changes to production you use `git`: | ||
|
||
```bash | ||
git add . | ||
git commit | ||
git push | ||
``` | ||
|
||
Alternatively, you can deploy without a `git` hosting provider using the Vercel CLI: | ||
|
||
```bash | ||
npx vercel --prod | ||
``` | ||
|
||
## Questions and Answers | ||
|
||
### It doesn't work! Where can I get help? | ||
|
||
In case of any issues or questions, you can post: | ||
|
||
- [GitHub Discussions for Next.js][vercel-github] | ||
- [Sanity's GitHub Discussions][sanity-github] | ||
- [Sanity's Community Slack][sanity-community] | ||
|
||
### How can I remove the "Next steps" block from my personal website? | ||
|
||
You can remove it by deleting the `IntroTemplate` component in `/app/(personal)/layout.tsx`. | ||
|
||
## Next steps | ||
|
||
- [Join our Slack community to ask questions and get help][sanity-community] | ||
- [How to edit my content structure?][sanity-schema-types] | ||
- [How to query content?][sanity-groq] | ||
- [What is content modelling?][sanity-content-modelling] | ||
|
||
[vercel-deploy]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsanity-io%2Fsanity-template-nextjs-app-router-personal-website&project-name=nextjs-personal-website&repository-name=nextjs-personal-website&demo-title=Personal+Website+with+Built-in+Content+Editing&demo-description=A+Sanity-powered+personal+website+with+built-in+content+editing+and+instant+previews.+Uses+App+Router.&demo-url=https%3A%2F%2Ftemplate-nextjs-app-router-personal-website.sanity.build%2F&demo-image=https%3A%2F%2Fuser-images.githubusercontent.com%2F6951139%2F206395107-e58a796d-13a9-400a-94b6-31cb5df054ab.png&integration-ids=oac_hb2LITYajhRQ0i4QznmKH7gx&external-id=nextjs%3Btemplate%3Dsanity-template-nextjs-app-router-personal-website | ||
[integration]: https://www.sanity.io/docs/vercel-integration?utm_source=github.com&utm_medium=referral&utm_campaign=nextjs-v3vercelstarter | ||
[`.env.local.example`]: .env.local.example | ||
[nextjs]: https://github.com/vercel/next.js | ||
[sanity-create]: https://www.sanity.io/get-started/create-project?utm_source=github.com&utm_medium=referral&utm_campaign=nextjs-v3vercelstarter | ||
[sanity-deployment]: https://www.sanity.io/docs/deployment?utm_source=github.com&utm_medium=referral&utm_campaign=nextjs-v3vercelstarter | ||
[sanity-homepage]: https://www.sanity.io?utm_source=github.com&utm_medium=referral&utm_campaign=nextjs-v3vercelstarter | ||
[sanity-community]: https://slack.sanity.io/ | ||
[sanity-schema-types]: https://www.sanity.io/docs/schema-types?utm_source=github.com&utm_medium=referral&utm_campaign=nextjs-v3vercelstarter | ||
[sanity-github]: https://github.com/sanity-io/sanity/discussions | ||
[sanity-groq]: https://www.sanity.io/docs/groq?utm_source=github.com&utm_medium=referral&utm_campaign=nextjs-v3vercelstarter | ||
[sanity-content-modelling]: https://www.sanity.io/docs/content-modelling?utm_source=github.com&utm_medium=referral&utm_campaign=nextjs-v3vercelstarter | ||
[sanity-webhooks]: https://www.sanity.io/docs/webhooks?utm_source=github.com&utm_medium=referral&utm_campaign=nextjs-v3vercelstarter | ||
[localhost-3000]: http://localhost:3000 | ||
[localhost-3000-studio]: http://localhost:3000/studio | ||
[vercel]: https://vercel.com | ||
[vercel-github]: https://github.com/vercel/next.js/discussions | ||
[personal-website-pages]: https://github.com/sanity-io/template-nextjs-personal-website | ||
[app-dir]: https://beta.nextjs.org/docs/routing/fundamentals#the-app-directory |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
import { toPlainText } from '@portabletext/react' | ||
import { Page } from 'components/pages/page/Page' | ||
import PagePreview from 'components/pages/page/PagePreview' | ||
import { | ||
getHomePageTitle, | ||
getPageBySlug, | ||
getPagesPaths, | ||
getSettings, | ||
} from 'lib/sanity.fetch' | ||
import { pagesBySlugQuery } from 'lib/sanity.queries' | ||
import { defineMetadata } from 'lib/utils.metadata' | ||
import { Metadata } from 'next' | ||
import { draftMode } from 'next/headers' | ||
import { notFound } from 'next/navigation' | ||
import { LiveQuery } from 'next-sanity/preview/live-query' | ||
|
||
export const runtime = 'edge' | ||
|
||
type Props = { | ||
params: { slug: string } | ||
} | ||
|
||
export async function generateMetadata({ params }: Props): Promise<Metadata> { | ||
const { slug } = params | ||
|
||
const [settings, page, homePageTitle] = await Promise.all([ | ||
getSettings(), | ||
getPageBySlug(slug), | ||
getHomePageTitle(), | ||
]) | ||
|
||
return defineMetadata({ | ||
baseTitle: homePageTitle ?? undefined, | ||
description: page?.overview ? toPlainText(page.overview) : '', | ||
image: settings?.ogImage, | ||
title: page?.title, | ||
}) | ||
} | ||
|
||
export async function generateStaticParams() { | ||
const slugs = await getPagesPaths() | ||
return slugs.map((slug) => ({ slug })) | ||
} | ||
|
||
export default async function PageSlugRoute({ params }: Props) { | ||
const data = await getPageBySlug(params.slug) | ||
|
||
if (!data && !draftMode().isEnabled) { | ||
notFound() | ||
} | ||
|
||
return ( | ||
<LiveQuery | ||
enabled={draftMode().isEnabled} | ||
query={pagesBySlugQuery} | ||
params={params} | ||
initialData={data} | ||
as={PagePreview} | ||
> | ||
<Page data={data} /> | ||
</LiveQuery> | ||
) | ||
} |
Oops, something went wrong.