Codemanufacture Website

The code base for the Codemanufacture

Table of Contents

• Features
• Files structure
• Development
  • Prerequisites
  • Installation
  • Running locally
  • Available Scripts

Features

• Gatsby - a static site generator with following plugins:
  • Canonical urls
  • Copy linked files
  • Google Tag Manager
  • Robots.txt
  • Sitemap
  • Styled Components - CSS in JS
  • Tailwindcss - Utility first css framework
  • Twin.macro - Bridge between Styled components and Tailwindcss
  • Typescript
• Development, QA Tools and automation
  • CircleCI - a deployment pipeline
  • Commitlint - commit message linter
  • GraphQL Code Generator
  • Husky - git hook management
  • Jest - Jest testing framework
  • Lint staged - lint runner against staged git files
  • Prettier - an opinionated code formatter
  • Renovate - automated dependency updates
  • Stylelint - a modern linter for styles
  • Typescript - a typed superset of JavaScript
  • tslint - linter for TypeScript
• Marketing & SEO
  • Canonical urls
  • Google Tag Manager
  • Helmet
  • Robots.txt
  • Sitemap

Files structure

 .
 ├── .circleci                     // CircleCI automated deployment configuration
 ├── .huskyrc                      // husky configuration
 ├── .lintstagedrc                 // lint-staged configuration
 ├── .nvmrc                        // Node Version Manager configuration
 ├── .prettierignore               // prettier ignored files configuration
 ├── .prettierrc                   // prettier configuration
 ├── .stylelintrc                  // stylelint configuration
 ├── codegen.yml                   // GraphQL code generator configuration
 ├── content                       // content
 │   ├── blog                      // markdown blog posts
 │   └── pages                     // markdown pages
 ├── gatsby                        // gatsby node api hooks
 ├── gatsby-config.ts              // gatsby configuration
 ├── gatsby-node.ts                // gatsby node hooks
 ├── gatsby-ssr.tsx                 // gatsby server-side rendering api
 ├── package.json                  // node.js application manifest
 ├── public                        // output folder (in .gitignore)
 ├── README.md                     // this file
 ├── src                           // sources
 │   ├── components                // all react components
 │   ├── declarations.d.ts         // declarations for no typescript modules/files
 │   ├── gatsby-types.d.ts         // gatsby types
 │   └── pages                     // pages
 ├── static                        // static files automatically copied to output folder
 ├── renovate.json                 // renovate configuration
 ├── tailwind.config.js            // tailwind configuration
 ├── tsconfig.json                 // typescript configuration
 ├── tslint.json                   // tslint configuration
 └── yarn.lock                     // yarn lock file

Development

Prerequisites

1. Git
2. Node.js 10.x
3. Yarn
4. A fork this repo (for any contributions)

Installation

1. Clone the repo git clone git@github.com:codemanufacture/codemanufacture.com.git
2. cd codemanufacture.com to go into the project root directory
3. Run yarn to install dependencies

Running locally

1. Run yarn develop to start the hot-reloading development server
2. open http://localhost:8000 to view the site in your the browser

Available scripts

In the project directory, you can run:

yarn build

Generates HTML, JavaScript and other static files used for the site in production.

yarn ci-check

Runs linters and formatters to verify make sure code follows standards.

yarn clean

Wipes the local environment including built assets and cache

yarn develop

Runs the site in the development mode.

Open http://localhost:8000 to view the site in the browser.

Open http://localhost:8000/___graphql to view the interactive GraphQL editor.

yarn format:source

Reformats code

yarn graphql-types

Generates types for GraphQL queries

yarn lint-staged

Runs linters against staged files

yarn lint:css

Runs stylelint on source files

yarn lint:source

Runs tslint on source files

yarn nit:markdown

Runs prettier on markdown files to print differences from formatting standards

yarn nit:source

Runs prettier on source files to print differences from formatting standards

yarn serve

Runs previously built site in the production mode.

yarn test

Runs tests

yarn test:coverage

Shows test coverage

yarn test:update

Update test snapshots

yarn test:watch

Watch files for changes and rerun tests related to changed files

yarn type-check

Runs type check against source files