Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
leog committed Jun 24, 2023
0 parents commit 1f175e4
Show file tree
Hide file tree
Showing 86 changed files with 21,446 additions and 0 deletions.
24 changes: 24 additions & 0 deletions .env.local.example
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# 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-blog-cms-sanity-v3"

# Required, find them on https://manage.sanity.io
NEXT_PUBLIC_SANITY_PROJECT_ID=
NEXT_PUBLIC_SANITY_DATASET=
# see https://www.sanity.io/docs/api-versioning for how versioning works
NEXT_PUBLIC_SANITY_API_VERSION="2022-11-15"
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 Blog with Sanity.io"

# Optional, check the comments in pages/api/revalidate.ts for instructions on how to set it up
SANITY_REVALIDATE_SECRET=

# If `/api/preview?slug` URLs don't have a `secret` search parameter then static rendering will still be optimistically enabled but without
# a `token` set. Instead, it'll check if the user have a valid Sanity session and have access to the project and dataset before any draft content is queried.
# You can turn this off by setting this env var to "true" and only valid secrets will be allowed to bypass static rendering and harden the security.
SANITY_REQUIRE_PREVIEW_SECRET=
9 changes: 9 additions & 0 deletions .eslintrc.json
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"
}
}
1 change: 1 addition & 0 deletions .github/CODEOWNERS
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
* @sanity-io/ecosystem
8 changes: 8 additions & 0 deletions .github/renovate.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"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",
"github>sanity-io/renovate-config:studio-v3"
]
}
24 changes: 24 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
name: CI

on:
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@v3
- 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
24 changes: 24 additions & 0 deletions .github/workflows/lock.yml
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
48 changes: 48 additions & 0 deletions .github/workflows/prettier.yml
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@v3
- 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@b62528385c34dbc9f38e5f4225ac829252d1ea92 # v1
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 }}
44 changes: 44 additions & 0 deletions .gitignore
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
*.iml
.idea

# 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
155 changes: 155 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
# A Next.js Blog with a Native Authoring Experience<!-- omit in toc -->

This starter is a statically generated blog 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 blog or learn these technologies.

[![Deploy with Vercel](https://vercel.com/button)][vercel-deploy]

> **Note**
>
> This starter uses the `/pages` directory for Next.js routing.
>
> The template will be migrated to the currently experimental [/app][app-dir] directory
> when Vercel announce that it is production ready.
## Features

- A performant, static blog with editable posts, authors, and site settings
- A native and customizable authoring environment, accessible on `yourblog.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 and boosted 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 blog?](#how-can-i-remove-the-next-steps-block-from-my-blog)
- [How can I set up Incremental Static Revalidation?](#how-can-i-set-up-incremental-static-revalidation)
- [Next steps](#next-steps)

## Project Overview

| [Blog](https://nextjs-blog.sanity.build) | [Studio](https://nextjs-blog.sanity.build/studio) |
| -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| ![Blog](https://user-images.githubusercontent.com/44635000/197511913-94ea36dd-099d-4dbf-b71f-3335879621c9.png) | ![Sanity Studio](https://user-images.githubusercontent.com/44635000/197511725-b2a2e2e5-287b-41a9-84c6-ec90d37ca480.png) |

### 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]].tsx` |  Where Sanity Studio is mounted |
| `/pages/api/revalidate.ts` |  Serverless route for triggering ISR |
| `/pages/api/preview.ts` |  Serverless route for triggering Preview 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 |
| `/lib/sanity.preview.ts` | Configuration for the live Preview Mode |

## 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 blog 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 blog?

You can remove it by deleting the `IntroTemplate` component in `/components/IndexPage.tsx`.

### How can I set up Incremental Static Revalidation?

Go to the serverless function code in `/pages/api/revalidate.ts`. In the code comments, you'll find instructions for how to set up [ISR][vercel-isr].

## 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%2Fnextjs-blog-cms-sanity-v3&repository-name=blog-nextjs-sanity&project-name=blog-nextjs-sanity&demo-title=Blog%20with%20Built-in%20Content%20Editing&demo-description=A%20Sanity-powered%20blog%20with%20built-in%20content%20editing%20%26%20instant%20previews&demo-url=https%3A%2F%2Fnextjs-blog.sanity.build%2F%3Futm_source%3Dvercel%26utm_medium%3Dreferral&demo-image=https%3A%2F%2Fuser-images.githubusercontent.com%2F81981%2F197501516-c7c8092d-0305-4abe-afb7-1e896ef7b90a.png&integration-ids=oac_hb2LITYajhRQ0i4QznmKH7gx&external-id=nextjs;template=nextjs-blog-cms-sanity-v3
[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-isr]: https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta
[vercel]: https://vercel.com
[vercel-github]: https://github.com/vercel/next.js/discussions
[app-dir]: https://beta.nextjs.org/docs/routing/fundamentals#the-app-directory
29 changes: 29 additions & 0 deletions components/AlertBanner.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/* eslint-disable @next/next/no-html-link-for-pages */
import Container from 'components/BlogContainer'

export default function Alert({
preview,
loading,
}: {
preview?: boolean
loading?: boolean
}) {
if (!preview) return null

return (
<div className="border-b border-accent-7 bg-accent-7 text-white">
<Container>
<div className="py-2 text-center text-sm">
{loading ? 'Loading... ' : 'This page is a preview. '}
<a
href="/api/exit-preview"
className="underline transition-colors duration-200 hover:text-cyan"
>
Click here
</a>{' '}
to exit preview mode.
</div>
</Container>
</div>
)
}
Loading

0 comments on commit 1f175e4

Please sign in to comment.