Skip to content

Commit 929b0ff

Browse files
mrkaluznymrkaluzny
authored
Merge pull request #25 from clean-commit/next
Release v1.0.0
2 parents 8b0be7a + 38d2832 commit 929b0ff

Some content is hidden

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

94 files changed

+7553
-5526
lines changed

‎.env.development

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
GATSBY_APP_URL="http://localhost:8000"

‎.env.example

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
GATSBY_APP_URL=""

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ public/
77
static/admin/*.bundle.*
88
.DS_Store
99
yarn-error.log
10+
.env.*
11+
!.env.example
12+
!.env.development
1013

1114
# Local Netlify folder
1215
.netlify

‎README.md

+154-95
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,32 @@
1-
# Henlo (v0.6.0)
1+
![Henlo Starter](https://repository-images.githubusercontent.com/270961687/4085d990-9083-451d-b39b-5316579adf09)
2+
3+
# Gatsby Starter Henlo (v1.0.0)
24

35
[![Netlify Status](https://api.netlify.com/api/v1/badges/43532afb-3488-432b-8185-a745645a90d8/deploy-status)](https://app.netlify.com/sites/henlo/deploys)
46

5-
[Official Website / Demo](https://henlo.netlify.app/)
7+
[Official Website / Demo](http://henlo.cleancommit.io)
68

7-
**Note:** This starter uses [Gatsby v4](https://www.gatsbyjs.com/blog/gatsby-v4/) with updated `gatsby-plugin-image`.
9+
Gatsby Starter Henlo is the most advanced Netlify CMS starter for Gatsby.js. We built it with Page Builder setup in mind. All pages are created out of programmable blocks, aiming to provide the best DX & admin UX possible.
810

9-
This repo contains an example business website that is built with [Gatsby](https://www.gatsbyjs.com/docs/), and [Netlify CMS](https://www.netlifycms.org).
11+
This repo contains an example website that is built with [Gatsby](https://www.gatsbyjs.com/docs/), and [Netlify CMS](https://www.netlifycms.org).
1012

1113
It follows the [JAMstack architecture](https://jamstack.org) by using Git as a single source of truth, and [Netlify](https://www.netlify.com) for continuous deployment, and CDN distribution.
1214

1315
## Features
1416

15-
- Battle-tested starting point for small & large web projects
16-
- Starter for pages and collections CMS configuration with Netlify CMS
17-
- Easy Netlify CMS configuration using [Manual Initialization](https://www.netlifycms.org/docs/beta-features/#manual-initialization)
18-
- Built in Tailwind with SCSS and `purge-css-plugin`
19-
- Built in sitemaps
20-
- Blazing fast loading times thanks to pre-rendered HTML and automatic chunk loading of JS files
21-
- Uses `gatsby-plugin-image`
17+
- 💪 Battle-tested starting point for small & large web projects
18+
- 📄 Form Builder that enables Admins to create multiple forms with ease & Netlify Forms integration.
19+
- 🌗 Darkmode support
20+
- 🗺 Sitemaps using `gatsby-plugin-sitemap`
21+
- 🔥 Perfect score on Lighthouse for SEO, Accessibility and Performance
22+
- 💇‍♀️ TailwindCSS support with PostCSS processing & PurgeCSS
23+
- 🔌 Support for Gatsby API functions
24+
- 🎇 Crazy fast images with `gatsby-plugin-image`
25+
- 🕵️‍♂️ Complete SEO configuration with graphql fragment and reusable components
2226
- Netlify deploy configuration
23-
- Netlify function support, see `lambda` folder
24-
- Support for async Netlify forms
25-
- Complete SEO configuration with graphql fragment and reusable components
26-
- Perfect score on Lighthouse for SEO, Accessibility and Performance (wip:PWA)
27+
- Example pages, collections, CMS configuration with Netlify CMS & hooks
2728
- Readme template for custom projects
29+
- Easy Netlify CMS configuration using [Manual Initialization](https://www.netlifycms.org/docs/beta-features/#manual-initialization)
2830
- ..and more
2931

3032
## Prerequisites
@@ -35,7 +37,7 @@ It follows the [JAMstack architecture](https://jamstack.org) by using Git as a s
3537

3638
## Getting Started (Recommended)
3739

38-
Netlify CMS can run in any frontend web environment, but the quickest way to try it out is by running it on a pre-configured starter site with Netlify. The example here is the Kaldi coffee company template (adapted from [Gatsby Starter Netlify CMS](https://github.com/netlify-templates/gatsby-starter-netlify-cms)). Use the button below to build and deploy your own copy of the repository:
40+
Netlify CMS can run in any frontend web environment, but the quickest way to try it out is by running it on a pre-configured starter site with Netlify. Use the button below to build and deploy your own copy of the repository:
3941

4042
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/clean-commit/gatsby-starter-henlo"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify"></a>
4143

@@ -56,19 +58,18 @@ Pulldown a local copy of the Github repository Netlify created for you, with the
5658
```
5759
$ git clone https://github.com/[GITHUB_USERNAME]/[REPO_NAME].git
5860
$ cd [REPO_NAME]
59-
$ yarn
60-
$ netlify dev
61+
$ yarn && yarn start
6162
```
6263

63-
This uses the new [Netlify Dev](https://www.netlify.com/products/dev/?utm_source=blog&utm_medium=netlifycms&utm_campaign=devex) CLI feature to serve any functions you have in the `lambda` folder.
64-
65-
To test the CMS locally, you'll need run a production build of the site:
64+
To test the CMS locally, you'll need run a production build of the site & [run local instance of Netlify CMS](https://www.netlifycms.org/docs/beta-features/#working-with-a-local-git-repository)
6665

6766
```
68-
$ yarn build
69-
$ netlify dev # or ntl dev
67+
$ yarn start
68+
$ npx netlify-cms-proxy-server
7069
```
7170

71+
Your admin configuration will be available at http://localhost:8000/admin
72+
7273
### Deployment
7374

7475
We've added additional commands for quick deployments with Netlify CLI. To deploy the website to netlify cms simply run.
@@ -79,93 +80,165 @@ $ yarn deploy:prod
7980

8081
The website will build locally and then deploy to production.
8182

83+
### Folder structure
84+
85+
```
86+
├── cms # Netlify CMS configuration
87+
│ ├── blocks
88+
│ ├── collections
89+
│ ├── fields
90+
│ ├── previews
91+
│ └── cms.js
92+
├── content # Your content lives here
93+
│ ├── authors
94+
│ ├── blog
95+
│ ├── forms
96+
│ ├── pages
97+
│ └── dont-remove.md
98+
├── public
99+
├── src
100+
│ ├── api # Gatsby functions should be placed here
101+
│ ├── blocks # Blocks that create sections
102+
│ ├── components # Reusable components
103+
│ ├── hooks # Hooks used in the project
104+
│ ├── lib # misc
105+
│ ├── pages
106+
│ ├── resolvers
107+
│ │ ├── Image.js # Required for previews
108+
│ │ └── Link.js # Resolves links to gatsby and outside links
109+
│ ├── settings # Place for theme settings
110+
│ ├── styles
111+
│ └── templates # Templates used to render page types
112+
│ ├── page-builder.js
113+
│ └── post.js
114+
├── static
115+
├── _headers
116+
├── gatsby-config.js # Config files for gatsby
117+
├── gatsby-node.js # Page generation setup
118+
└── tailwind.config.js # Tailwind configuration
119+
```
120+
82121
### Setting up the CMS
83122

84123
Follow the [Netlify CMS Quick Start Guide](https://www.netlifycms.org/docs/quick-start/#authentication) to set up authentication, and hosting.
85124

125+
CMS configuration was placed within `cms` directory in the root of the project. This allows us to work efficiently on fields and collections without mixing CMS config with Gatsby code.
126+
86127
Henlo uses Manual Initialization to take advantage of componetized approach to managing configuration for Netlify CMS. Thanks to that you don't have to control the CMS from centralized YAML file.
87128

129+
To ensure best experience we use 2 custom widgets that are maintained by us -> [ID Widget](https://github.com/clean-commit/netlify-cms-widget-id) that provides unmutable IDs for content items and [Permalink Widget](https://github.com/clean-commit/netlify-cms-widget-permalink) that enables you to create custom permalinks with ease.
130+
88131
```javascript
89132
import CMS from 'netlify-cms-app';
90-
import pages from '@/cms/pages';
91-
import posts from '@/cms/collections/posts';
133+
import { Widget as UuidWidget } from 'netlify-cms-widget-id';
134+
import { Widget as PermalinkWidget } from 'netlify-cms-widget-permalink';
135+
136+
import pages from './collections/pages';
137+
import posts from './collections/posts';
138+
import authors from './collections/authors';
139+
import settings from './collections/settings';
140+
import PagePreview from './previews/Page'; // Preview for all PageBuilder based pages
92141

93142
window.CMS_MANUAL_INIT = true;
94143

95-
CMS.init({
144+
const config = {
96145
config: {
97146
load_config_file: false,
147+
display_url: process.env.GATSBY_APP_URL, // Enables urls based on env variable
148+
local_backend: true,
98149
backend: {
99150
name: 'git-gateway',
100-
branch: 'master',
151+
},
152+
slug: {
153+
encoding: 'ascii',
154+
clean_accents: true,
101155
},
102156
media_folder: '/static/img',
103157
public_folder: '/img',
104-
collections: [pages, posts],
158+
collections: [pages, posts, authors, settings],
105159
},
106-
});
160+
};
161+
162+
CMS.registerPreviewStyle('../commons.css');
163+
CMS.registerPreviewTemplate('pages', PagePreview);
164+
165+
CMS.registerWidget(UuidWidget);
166+
CMS.registerWidget(PermalinkWidget);
167+
168+
CMS.init(config);
107169
```
108170

109-
#### Example configuration for Home Page
171+
#### Adding blocks
172+
173+
Blocks are defined in `cms/blocks/index.js` file. We're leveraging use of exported functions and variables from other fields to avoid repetition within the code.
174+
175+
This is extremely important due to the way GraphQL works with Markdown based files. Each field will have to be present on all page queries -> we can't differetiate between different sections.
176+
177+
That's why it's important to reuse names of fields, hence usage of imports.
110178

111179
```javascript
112-
import seo from '@/cms/partials/seo';
180+
import { Buttons, Title, Content, VariantField, ImageField } from '../fields';
113181

114-
const page = {
115-
file: 'content/pages/home.md',
116-
label: 'Home',
117-
name: 'Home',
118-
fields: [
119-
{
120-
label: 'Layout',
121-
name: 'layout',
122-
widget: 'hidden',
123-
default: 'index',
124-
},
125-
{
126-
label: 'Type',
127-
name: 'type',
128-
widget: 'hidden',
129-
default: 'page',
130-
},
182+
const Config = {
183+
label: 'Blocks',
184+
name: 'blocks',
185+
widget: 'list',
186+
types: [
131187
{
132-
label: 'Title',
133-
name: 'title',
134-
widget: 'string',
135-
default: '',
136-
required: false,
137-
},
138-
{
139-
label: 'Links',
140-
name: 'links',
141-
widget: 'list',
188+
label: 'Hero',
189+
name: 'hero',
190+
widget: 'object',
142191
fields: [
143-
{
144-
label: 'Link',
145-
name: 'link',
146-
widget: 'object',
147-
fields: [
148-
{
149-
label: 'Content',
150-
name: 'content',
151-
widget: 'string',
152-
required: false,
153-
},
154-
{
155-
label: 'URL',
156-
name: 'url',
157-
widget: 'string',
158-
required: false,
159-
},
160-
],
161-
},
192+
Title,
193+
Content,
194+
Buttons,
195+
VariantField('default', ['default', 'centered', 'full']),
162196
],
163197
},
164-
seo,
165-
],
166-
};
198+
...
199+
```
200+
201+
To add new block you have tp add new `Type` to `cms/blocks/index.js` file, and modify `Blocks` fragment located in `src/components/PageBuilder.js`
167202
168-
export default page;
203+
As you can see below we're adding all fields used by all sections. This causes issues with Gatsby's [Schema Inference](https://www.gatsbyjs.com/docs/schema-inference/). Gatsby needs an example of the field to know what type of field it is.
204+
205+
That's why we rely on `dont-remove.md` this file contains all possible fields used in the starter, so you're never encounter a problem with types inference!
206+
207+
```
208+
export const query = graphql`
209+
fragment Blocks on MarkdownRemarkFrontmatter {
210+
blocks {
211+
type
212+
title
213+
content
214+
columns {
215+
title
216+
content
217+
}
218+
photo {
219+
image {
220+
childImageSharp {
221+
gatsbyImageData(
222+
width: 800
223+
quality: 72
224+
placeholder: DOMINANT_COLOR
225+
formats: [AUTO, WEBP, AVIF]
226+
)
227+
}
228+
}
229+
alt
230+
}
231+
variant
232+
buttons {
233+
button {
234+
content
235+
url
236+
variant
237+
}
238+
}
239+
}
240+
}
241+
`
169242
```
170243
171244
### Adding Favicons
@@ -185,20 +258,6 @@ yarn preload-fonts
185258
186259
Gatsby tends to add a lot of polyfills to support older browser versions. In package.json file you can adjust which sites your project should support. As default Henlo will use `defaults` setting. If you want to learn more about the browser support visit official [Gatsby How-To Guide on this subject](https://www.gatsbyjs.com/docs/how-to/custom-configuration/browser-support/)
187260
188-
## Debugging
189-
190-
Windows users might encounter `node-gyp` errors when trying to npm install.
191-
To resolve, make sure that you have both Python 2.7 and the Visual C++ build environment installed.
192-
193-
```
194-
npm config set python python2.7
195-
npm install --global --production windows-build-tools
196-
```
197-
198-
[Full details here](https://www.npmjs.com/package/node-gyp 'NPM node-gyp page')
199-
200-
MacOS users might also encounter some errors, for more info check [node-gyp](https://github.com/nodejs/node-gyp). We recommend using the latest stable node version.
201-
202261
## PurgeCSS
203262
204263
This plugin uses [gatsby-plugin-purgecss](https://www.gatsbyjs.org/packages/gatsby-plugin-purgecss/) and [Tailwind](https://tailwindcss.com/). The builds are usually ~780K but reduced 98% by purgecss. Normally our websites won't cross 30Kb of CSS.

0 commit comments

Comments
 (0)