Skip to content
This repository was archived by the owner on Sep 9, 2024. It is now read-only.

Commit

Permalink
Redo template
Browse files Browse the repository at this point in the history
  • Loading branch information
KaneFreeman committed May 16, 2023
1 parent afa43c3 commit 917b3c9
Show file tree
Hide file tree
Showing 63 changed files with 1,618 additions and 5,613 deletions.
3 changes: 3 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": "next/core-web-vitals"
}
3 changes: 0 additions & 3 deletions .gitattributes

This file was deleted.

15 changes: 8 additions & 7 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,19 @@

# misc
.DS_Store
.env*
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# dist
/dist
# local env files
.env*.local

# mdx
.mdx-data
# vercel
.vercel

# ide
.vscode
# typescript
*.tsbuildinfo
next-env.d.ts
16 changes: 16 additions & 0 deletions .vscode/tasks.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "dev",
"problemMatcher": [],
"label": "npm: dev",
"detail": "next dev",
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
8 changes: 0 additions & 8 deletions LICENSE

This file was deleted.

75 changes: 11 additions & 64 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
![Next.js blogging template for Static CMS on Vercel](https://user-images.githubusercontent.com/1388138/197867836-58de8783-9712-4196-937f-4101b1327612.png)

[![Netlify Status](https://api.netlify.com/api/v1/badges/c6f44d34-0570-4ca0-9d3d-cabdaa2b3afb/deploy-status)](https://app.netlify.com/sites/nextjs-netlify-template/deploys)
[![MADE BY Next.js](https://img.shields.io/badge/MADE%20BY%20Next.js-000000.svg?style=flat&logo=Next.js&labelColor=000)](https://nextjs.org/)

Next.js blogging template for Netlify is a boilerplate for building blogs with only Netlify stacks.
Next.js blogging template for Vercel is a boilerplate for building blogs with only Vercel stacks.

There are some boilerplate or tutorials for the combination of Next.js and Netlify on GitHub. These resources have documentation and good tutorial to get started Next.js and Netlify quickly, but they are too simple to build blogs with standard features like tagging.
There are some boilerplate or tutorials for the combination of Next.js and Vercel on GitHub. These resources have documentation and good tutorial to get started Next.js and Vercel quickly, but they are too simple to build blogs with standard features like tagging.

Next.js blogging template for Netlify has already implemented these standard features for building blogs with only using Next.js and Netlify stacks.
Next.js blogging template for Vercel has already implemented these standard features for building blogs with only using Next.js and Vercel stacks.

## Demo

Deploy on your environment by clicking here:

[Next.js blog template for Vercel](https://static-cms-next.netlify.app/)
[Next.js blog template for Vercel](https://static-cms-next-vercel-template.vercel.app/)

## Features

Expand All @@ -28,7 +27,7 @@ Deploy on your environment by clicking here:

- [TypeScript](https://www.typescriptlang.org/)
- [Next.js](https://nextjs.org/)
- [Netlify](https://www.netlify.com/)
- [Vercel](https://vercel.com/)
- [MDX](https://mdxjs.com/)

## Getting started
Expand All @@ -37,72 +36,20 @@ To create your blog using the template, open your terminal, `cd` into the direct
and run the following command:

```
npx create-next-app your-blog --example "https://github.com/StaticJsCMS/static-cms-next-netlify-template"
npx create-next-app your-blog --example "https://github.com/StaticJsCMS/static-cms-next-vercel-template"
```

After that, set up your project as following the Netlify blog:
After that, set up your project, following the Vercel documentation:

[A Step-by-Step Guide: Deploying on Netlify](https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/)
[Creating & Deploying Your Project](https://vercel.com/docs/concepts/get-started/deploy)

## Customization
### Static CMS Config

This template is just a template and a boilerplate in which users can customize anything after the project was cloned and started.
The following instructions introduce common customization points like adding new metadata or applying a new design theme.

### Styling pages by a customized theme

All source codes related to the blog are under [components](/src/components) and [pages](/src/pages) directory.
You can modify it freely if you want to apply your design theme.
All components use [styled-jsx](https://github.com/vercel/styled-jsx) and [css-modules](https://github.com/css-modules/css-modules) to define their styles, but you can choose any styling libraries for designing your theme.

The directory tree containing the blog source code are described below:

```
meta: yaml files defining metadata like authors or tags
public: images, favicons and other static assets
src
├── assets: other assets using inside of components
├── components: pieces of components consisting of pages
├── content: mdx files for each post page
├── lib: project libraries like data fetching or pagination
└── pages: page components managing by Next.js
```

### Organizing content by categories

The category metadata that associates with content have the same relationship with the authors' one.
Then reference these implementations for adding new metadata:

- [public/admin/config.yml](/public/admin/config.yml#L51): author metadata definition for Static CMS
- [src/lib/authors.tsx](/src/lib/authors.ts): fetches metadata and defines utility functions for components
- [meta/authors.yml](/src/meta/authors.yml): author content managed by Static CMS
- [src/components/PostLayout.tsx](/src/components/PostLayout.tsx): displays author content for each page

You understood they have four steps to add the category metadata on your project after you read the above source codes:

1. Define the category metadata on the above Static CMS config file
2. Create an empty file named with `categories.yml` under [meta](/src/meta/) directory
3. Create a new module for fetching category metadata
4. Display the category metadata on [src/components/PostLayout.tsx](/src/components/PostLayout.tsx#L75) or other components you want

It is all you have to do. After that, you can access Static CMS and create new categories at any time.

### Locale settings for Static CMS

Modify [config.yml](/public/admin/config.yml) and
[index.html](/public/admin/index.html) under [public/admin](/public/admin/) directory
as following instructions:

[Static CMS - Configuration Options #Locale](https://staticjscms.netlify.app/docs/configuration-options/#locale)
[config.yml](src/config.ts)

## References

- [Static CMS Documentation](https://staticjscms.netlify.app/docs/intro/)
- [Building a Markdown blog with Next 9.4 and Netlify](https://www.netlify.com/blog/2020/05/04/building-a-markdown-blog-with-next-9.4-and-netlify/)
- [Hugo Theme - Codex](https://github.com/jakewies/hugo-theme-codex)
- [Next.js Starter Template for TypeScript](https://github.com/vercel/next-learn-starter/tree/master/typescript-final)
- [Building Blog with NextJS and Static CMS](https://dev.to/mefaba/building-blog-with-nextjs-and-netlify-cms-fom)
- [Unicons](https://github.com/Iconscout/unicons)
- [Static CMS Documentation](https://staticcms.org/docs/intro/)

## License

Expand Down
17 changes: 2 additions & 15 deletions config.json → content/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,8 @@
"base_url": "https://next-template.staticcms.org",
"site_title": "Next.js Static CMS Blog",
"site_description": "Next.js blog template for Static CMS on Vercel",
"site_keywords": [
{
"keyword": "Next.js"
},
{
"keyword": "Static CMS"
},
{
"keyword": "Vercel"
},
{
"keyword": "React"
}
],
"site_keywords": ["Next.js", "Static CMS", "Vercel", "React"],
"posts_per_page": 5,
"twitter_account": "@my-account",
"github_account": "myaccount"
}
}
File renamed without changes.
File renamed without changes.
7 changes: 1 addition & 6 deletions content/posts/references.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,4 @@ tags:
- document
---

- [Static CMS Documentation](https://staticjscms.netlify.app/docs/intro/)
- [Building a Markdown blog with Next 9.4 and Netlify](https://www.netlify.com/blog/2020/05/04/building-a-markdown-blog-with-next-9.4-and-netlify/)
- [Hugo Theme - Codex](https://github.com/jakewies/hugo-theme-codex)
- [Next.js Starter Template for TypeScript](https://github.com/vercel/next-learn-starter/tree/master/typescript-final)
- [Building Blog with NextJS and Static CMS](https://dev.to/mefaba/building-blog-with-nextjs-and-netlify-cms-fom)
- [Unicons](https://github.com/Iconscout/unicons)
- [Static CMS Documentation](https://staticcms.org/docs/intro/)
6 changes: 0 additions & 6 deletions content/works/en/test-1.md

This file was deleted.

6 changes: 0 additions & 6 deletions content/works/en/test.md

This file was deleted.

6 changes: 0 additions & 6 deletions content/works/fr/test-1.md

This file was deleted.

6 changes: 0 additions & 6 deletions content/works/fr/test.md

This file was deleted.

12 changes: 0 additions & 12 deletions jest.config.js

This file was deleted.

10 changes: 6 additions & 4 deletions next.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
module.exports = ({
pageExtensions: ["tsx"],
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config) => {
config.module.rules.push(
...[
{
Expand All @@ -15,4 +15,6 @@ module.exports = ({
);
return config;
},
});
};

module.exports = nextConfig;
44 changes: 16 additions & 28 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,50 +1,38 @@
{
"name": "static-cms-next-vercel-template",
"version": "1.0.0-beta.0",
"license": "MIT",
"description": "A starter for a blog powered by Next and Static CMS",
"repository": "https://github.com/StaticJsCMS/static-cms-next-vercel-template",
"bugs": "https://github.com/StaticJsCMS/static-cms-next-vercel-template/issues",
"keywords": [
"next",
"static",
"cms",
"vercel"
],
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"export": "next build && next export -o ./dist",
"test": "jest"
"lint": "next lint"
},
"dependencies": {
"@staticcms/core": "2.3.3",
"crypto": "1.0.1",
"date-fns": "2.29.3",
"autoprefixer": "10.4.14",
"date-fns": "2.30.0",
"gray-matter": "4.0.3",
"js-yaml": "4.1.0",
"next": "13.1.6",
"next": "13.4.2",
"next-mdx-remote": "4.4.1",
"normalize.css": "8.0.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-schemaorg": "2.0.0",
"schema-dts": "1.1.2",
"simple-oauth2": "2.5.2",
"vercel": "29.3.0"
"tailwindcss": "3.3.2"
},
"devDependencies": {
"@svgr/webpack": "6.5.1",
"@types/jest": "29.4.0",
"@svgr/webpack": "8.0.1",
"@types/js-yaml": "4.0.5",
"@types/node": "18.14.5",
"@types/react": "18.0.28",
"cypress": "12.7.0",
"eslint-config-next": "13.2.3",
"jest": "29.4.3",
"@types/node": "20.1.5",
"@types/react": "18.2.6",
"@types/react-dom": "18.2.4",
"cypress": "12.12.0",
"eslint": "8.40.0",
"eslint-config-next": "13.4.2",
"js-yaml-loader": "1.2.2",
"ts-jest": "29.0.5",
"typescript": "4.9.5"
"typescript": "5.0.4"
}
}
6 changes: 6 additions & 0 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
33 changes: 0 additions & 33 deletions renovate.json

This file was deleted.

Loading

0 comments on commit 917b3c9

Please sign in to comment.