Skip to content

Commit 7f4a617

Browse files
joshbermansswjoshbermanssw
committed
restart with nextjs starter
1 parent b47f7f7 commit 7f4a617

File tree

101 files changed

+7115
-1434
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

101 files changed

+7115
-1434
lines changed

‎.env.example

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,6 @@ NEXT_PUBLIC_TINA_CLIENT_ID=***
33
TINA_TOKEN=***
44

55
# This is set by default CI with Netlify/Vercel/Github, but can be overriden
6-
NEXT_PUBLIC_TINA_BRANCH=***
6+
NEXT_PUBLIC_TINA_BRANCH=***
7+
# To see the preview functionality
8+
VERCEL_ENV=preview

‎.eslintrc.json

-11
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,6 @@
11
{
2-
"env": {
3-
"browser": true,
4-
"node": true
5-
},
62
"extends": [
73
"eslint:recommended",
84
"next"
9-
],
10-
"rules": {
11-
"padding-line-between-statements": [
12-
"error",
13-
{ "blankLine": "always", "prev": "import", "next": "*" },
14-
{ "blankLine": "any", "prev": "import", "next": "import" }
155
]
16-
}
176
}

‎.github/workflows/build-and-deploy.yml

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
# Sample workflow for building and deploying a Next.js site to GitHub Pages
2+
#
3+
# To get started with Next.js see: https://nextjs.org/docs/getting-started
4+
#
5+
name: Deploy Next.js site to Pages
6+
7+
on:
8+
# Runs on pushes targeting the default branch
9+
push:
10+
branches: [main]
11+
12+
# Allows you to run this workflow manually from the Actions tab
13+
workflow_dispatch:
14+
15+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
16+
permissions:
17+
contents: read
18+
pages: write
19+
id-token: write
20+
21+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
22+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
23+
concurrency:
24+
group: "pages"
25+
cancel-in-progress: false
26+
27+
jobs:
28+
# Build job
29+
build:
30+
runs-on: ubuntu-latest
31+
steps:
32+
- name: Checkout
33+
uses: actions/checkout@v4
34+
35+
- name: Detect package manager
36+
id: detect-package-manager
37+
run: |
38+
if [ -f "${{ github.workspace }}/yarn.lock" ]; then
39+
echo "✅ Detected yarn"
40+
echo "manager=yarn" >> $GITHUB_OUTPUT
41+
echo "command=install" >> $GITHUB_OUTPUT
42+
echo "runner=yarn" >> $GITHUB_OUTPUT
43+
exit 0
44+
elif [ -f "${{ github.workspace }}/pnpm-lock.yaml" ]; then
45+
echo "✅ Detected pnpm"
46+
echo "manager=pnpm" >> $GITHUB_OUTPUT
47+
echo "command=install" >> $GITHUB_OUTPUT
48+
echo "runner=pnpm" >> $GITHUB_OUTPUT
49+
exit 0
50+
elif [ -f "${{ github.workspace }}/package.json" ]; then
51+
echo "✅ Detected npm"
52+
echo "manager=npm" >> $GITHUB_OUTPUT
53+
echo "command=ci" >> $GITHUB_OUTPUT
54+
echo "runner=npx --no-install" >> $GITHUB_OUTPUT
55+
exit 0
56+
else
57+
echo "❌ Unable to determine package manager"
58+
exit 1
59+
fi
60+
61+
- name: Setup pnpm
62+
if: steps.detect-package-manager.outputs.manager == 'pnpm'
63+
uses: pnpm/action-setup@v4
64+
with:
65+
version: 9
66+
67+
- name: Setup Node
68+
uses: actions/setup-node@v4
69+
with:
70+
node-version-file: .nvmrc
71+
cache: ${{ steps.detect-package-manager.outputs.manager }}
72+
73+
- name: "Setup Pages #1"
74+
run: |
75+
touch public/.nojekyll
76+
- name: "Setup Pages #2"
77+
uses: actions/configure-pages@v5
78+
with:
79+
# Automatically inject basePath in your Next.js configuration file and disable
80+
# server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
81+
#
82+
# You may remove this line if you want to manage the configuration yourself.
83+
static_site_generator: next
84+
85+
- name: Restore cache
86+
uses: actions/cache@v4
87+
with:
88+
path: |
89+
.next/cache
90+
# Generate a new cache whenever packages or source files change.
91+
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/pnpm-lock.yaml', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
92+
# If source files changed but packages didn't, rebuild from a prior cache.
93+
restore-keys: |
94+
${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/pnpm-lock.yaml', '**/yarn.lock') }}-
95+
96+
- name: Install dependencies
97+
run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
98+
99+
- name: Build with Next.js
100+
run: ${{ steps.detect-package-manager.outputs.runner }} build
101+
env:
102+
NEXT_PUBLIC_TINA_CLIENT_ID: ${{ secrets.NEXT_PUBLIC_TINA_CLIENT_ID }}
103+
NEXT_PUBLIC_TINA_BRANCH: ${{ github.ref_name }}
104+
TINA_TOKEN: ${{ secrets.TINA_TOKEN }}
105+
106+
- name: Upload artifact
107+
uses: actions/upload-pages-artifact@v3
108+
with:
109+
path: ./out
110+
111+
# Deployment job
112+
deploy:
113+
environment:
114+
name: github-pages
115+
url: ${{ steps.deployment.outputs.page_url }}
116+
runs-on: ubuntu-latest
117+
needs: build
118+
steps:
119+
- name: Deploy to GitHub Pages
120+
id: deployment
121+
uses: actions/deploy-pages@v4

‎.github/workflows/pr-open.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,4 +42,4 @@ jobs:
4242
run: pnpm install
4343

4444
- name: Build
45-
run: pnpm build
45+
run: pnpm build

‎.github/workflows/update-dependabot-pr.yml

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
name: Update TinaCMS Dependencies
2+
on:
3+
push:
4+
branches:
5+
- dependabot/npm_and_yarn/**
6+
7+
jobs:
8+
update-tinacms:
9+
runs-on: ubuntu-latest
10+
steps:
11+
# Clone repo
12+
- name: Check out repo to update
13+
uses: actions/checkout@v2
14+
- name: Setup node
15+
uses: actions/setup-node@v3
16+
with:
17+
node-version: 18
18+
# Install deps, update Tina packages, update schema
19+
- name: Install dependencies
20+
run: yarn install
21+
- name: Update Tina packages
22+
run: yarn upgrade tinacms@latest @tinacms/cli@latest
23+
- name: Update Schema
24+
run: yarn tinacms audit
25+
# Commit changes
26+
- name: Commit changes back to branch
27+
uses: EndBug/add-and-commit@v9
28+
with:
29+
message: "Update TinaCMS generated files"
30+
branch: ${{ github.ref }}
31+
committer_name: GitHub Actions
32+
committer_email: [email protected]

‎.gitignore

+4-13
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
21

32
# dependencies
43
/node_modules
@@ -17,21 +16,13 @@
1716

1817
# misc
1918
.DS_Store
20-
*.pem
19+
.env
20+
.env.local
21+
.idea
2122

2223
# debug
2324
npm-debug.log*
2425
yarn-debug.log*
2526
yarn-error.log*
2627

27-
# local env files
28-
.env
29-
.env.local
30-
.env.development.local
31-
.env.test.local
32-
.env.production.local
33-
34-
# vercel
35-
.vercel
36-
37-
.yarn
28+
.tina/__generated__

‎.nvmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v22

‎.vscode/extensions.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"recommendations": [
3+
"graphql.vscode-graphql",
4+
]
5+
}

‎NOTICE

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Tina Cloud Starter
2+
Copyright 2024 SSW
3+
4+
This product includes software developed at SSW (http://www.ssw.com.au/).

‎README.md

+68-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,21 @@
1-
This is a [Tina CMS](https://tina.io/) project.
1+
# Tina Starter 🦙
2+
3+
![tina-cloud-starter-demo](https://user-images.githubusercontent.com/103008/130587027-995ccc45-a852-4f90-b658-13e8e0517339.gif)
4+
5+
This Next.js starter is powered by [TinaCMS](https://app.tina.io) for you and your team to visually live edit the structured content of your website. ✨
6+
7+
The content is managed through Markdown and JSON files stored in your GitHub repository, and queried through Tina GraphQL API.
8+
9+
### Features
10+
11+
- [Tina Headless CMS](https://app.tina.io) for authentication, content modeling, visual editing and team management.
12+
- [Vercel](https://vercel.com) deployment to visually edit your site from the `/admin` route.
13+
- Local development workflow from the filesystem with a local GraqhQL server.
14+
15+
## Requirements
16+
17+
- Git, [Node.js Active LTS](https://nodejs.org/en/about/releases/), pnpm installed for local development.
18+
- A [TinaCMS](https://app.tina.io) account for live editing.
219

320
## Local Development
421

@@ -7,6 +24,7 @@ Install the project's dependencies:
724
> [!NOTE]
825
> [Do you know the best package manager for Node.js?](https://www.ssw.com.au/rules/best-package-manager-for-node/) Using the right package manager can greatly enhance your development workflow. We recommend using pnpm for its speed and efficient handling of dependencies. Learn more about why pnpm might be the best choice for your projects by checking out this rule from SSW.
926
27+
1028
```
1129
pnpm install
1230
```
@@ -17,7 +35,33 @@ Run the project locally:
1735
pnpm dev
1836
```
1937

20-
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
38+
### Local URLs
39+
40+
- http://localhost:3000 : browse the website
41+
- http://localhost:3000/admin : connect to Tina Cloud and go in edit mode
42+
- http://localhost:3000/exit-admin : log out of Tina Cloud
43+
- http://localhost:4001/altair/ : GraphQL playground to test queries and browse the API documentation
44+
45+
## Deployment
46+
47+
### GitHub Pages
48+
49+
This starter can be deployed to GitHub Pages. A GitHub Actions workflow is included that handles the build and deployment process.
50+
51+
To deploy to GitHub Pages:
52+
53+
1. In your repository settings, ensure GitHub Pages is enabled and set to deploy from the `gh-pages` branch
54+
2. Push changes to your main branch - the workflow will automatically build and deploy the site
55+
56+
> [!NOTE]
57+
> When deploying to GitHub Pages, you'll need to update your secrets in Settings | Secrets and variables | Actions to include:
58+
> - `NEXT_PUBLIC_TINA_CLIENT_ID`
59+
> - `TINA_TOKEN`
60+
>
61+
> You get these from your TinaCloud project - [read the docs](https://tina.io/docs/tina-cloud/deployment-options/github-pages)
62+
63+
> [!IMPORTANT]
64+
> GitHub Pages does not support server side code, so this will run as a static site. If you don't want to deploy to GitHub pages, just delete `.github/workflows/build-and-deploy.yml`
2165
2266
### Building the Starter Locally (Using the hosted content API)
2367

@@ -35,13 +79,29 @@ Build the project:
3579
pnpm build
3680
```
3781

38-
## Learn More
82+
## Getting Help
83+
84+
To get help with any TinaCMS challenges you may have:
85+
86+
- Visit the [documentation](https://tina.io/docs/) to learn about Tina.
87+
- [Join our Discord](https://discord.gg/zumN63Ybpf) to share feedback.
88+
- Visit the [community forum](https://community.tinacms.org/) to ask questions.
89+
- Get support through the chat widget on the TinaCMS Dashboard
90+
- [Email us](mailto:[email protected]) to schedule a call with our team and share more about your context and what you're trying to achieve.
91+
- [Search or open an issue](https://github.com/tinacms/tinacms/issues) if something is not working.
92+
- Reach out on Twitter at [@tina_cms](https://twitter.com/tina_cms).
93+
94+
## Development tips
95+
96+
### Visual Studio Code GraphQL extension
97+
98+
[Install the GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) to benefit from type auto-completion.
3999

40-
To learn more about Tina, take a look at the following resources:
100+
### Typescript
41101

42-
- [Tina Docs](https://tina.io/docs)
43-
- [Getting started](https://tina.io/docs/setup-overview/)
102+
A good way to ensure your components match the shape of your data is to leverage the auto-generated TypeScript types.
103+
These are rebuilt when your `tina` config changes.
44104

45-
You can check out [Tina Github repository](https://github.com/tinacms/tinacms) - your feedback and contributions are welcome!
105+
## LICENSE
46106

47-
## [Deploy on Vercel](https://tina.io/guides/tina-cloud/add-tinacms-to-existing-site/deployment/)
107+
Licensed under the [Apache 2.0 license](./LICENSE).

‎app/[...filename]/client-page.tsx

+10-19
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,19 @@
11
"use client";
2-
import { TinaMarkdown } from "tinacms/dist/rich-text";
3-
import { tinaField, useTina } from "tinacms/dist/react";
4-
import type { PageQuery } from "../../tina/__generated__/types";
2+
import { useTina } from "tinacms/dist/react";
3+
import { Blocks } from "@/components/blocks";
4+
import { PageQuery } from "@/tina/__generated__/types";
55

6-
interface ClientPageProps {
7-
query: string;
6+
export interface ClientPageProps {
7+
data: {
8+
page: PageQuery["page"];
9+
};
810
variables: {
911
relativePath: string;
1012
};
11-
data: { page: PageQuery["page"] };
13+
query: string;
1214
}
1315

1416
export default function ClientPage(props: ClientPageProps) {
15-
// data passes though in production mode and data is updated to the sidebar data in edit-mode
16-
const { data } = useTina({
17-
query: props.query,
18-
variables: props.variables,
19-
data: props.data,
20-
});
21-
22-
const content = data.page.body;
23-
return (
24-
<div data-tina-field={tinaField(data.page, "body")}>
25-
<TinaMarkdown content={content} />
26-
</div>
27-
);
17+
const { data } = useTina({...props});
18+
return <Blocks {...data?.page} />;
2819
}

0 commit comments

Comments
 (0)