Documentation of Setup

Next.js with Typescript

2021-01-07

npx create-react-app gitcms
touch tsconfig.js
npm i -D typescript @types/react @types/node
mkdir ./src
tsconfig.json: add baseUrl: './src'
mv styles src/
mv pages src/
rm src/styles/*
src/pages/_app.js > _app.tsx
src/pages/index.js > index.tsx
remove all content create empty functional component with react snippet: rafce IndexPage
git init
adding types to index.tsx and _app.tsx

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

Eslint, Prettier

2021-01-07

npm i -D 
    "@types/webpack-env": "^1.16.0",
    "@typescript-eslint/eslint-plugin": "^4.12.0",
    "@typescript-eslint/parser": "^4.12.0",
    "eslint": "^7.17.0",
    "eslint-config-prettier": "^7.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^4.3.7",
    "lint-staged": "^10.5.3",
    "prettier": "^2.2.1",
    "pretty-quick": "^3.1.0",
    "typescript": "^4.1.3"

package.json

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint --ext .ts,.tsx",
    "lint:fix": "eslint --ext .ts,.tsx --fix"
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged && npm run lint"
    }
  },

.prettierrc

{
  "semi": true,
  "singleQuote": true
}

.eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["@typescript-eslint", "react", "react-hooks", "prettier"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "react/prop-types": "off",
    "react-hooks/rules-of-hooks": "warn",
    "react-hooks/exhaustive-deps": "warn"
  },
  "globals": {
    "React": "writable"
  }
}

PostCSS Autoprefixer

2021-01-07

npm i -D
    "postcss": "^8.2.3",
    "autoprefixer": "^10.2.0",

package.json

  "browserslist": [
    "> 1%"
  ],

TailwindCSS

2021-07-01

npm i -D tailwindcss@latest
npx tailwindcss init -p --full
npm i -D
    "tailwindcss": "^2.0.2",
    "tailwindcss-children": "^2.1.0",
    "@tailwindcss/aspect-ratio": "^0.2.0",
    "@tailwindcss/forms": "^0.2.1",
    "@tailwindcss/typography": "^0.3.1",
    "@headlessui/react": "^0.2.0"
npm i -D @fullhuman/postcss-purgecss postcss-import postcss-preset-env
npm i -D cssnano

it automatically generates:

• tailwind.config.js
• postcss.config.js

tailwind.config.json

  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('tailwindcss-children'),
  ],

src/styles/tailwind.css

/* purgecss start ignore */
@import 'tailwindcss/base';
/* purgecss end ignore */
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

src/pages/_app.js

import 'styles/tailwind.css';

postcss.config.js

const purgecss = [
  '@fullhuman/postcss-purgecss',
  {
    content: ['./components/**/*.js', './pages/**/*.js'],
    defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
  },
];

module.exports = {
  plugins: [
    'tailwindcss',
    ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
    'postcss-preset-env',
  ],
};

Next-Auth Prisma

2021-01-07

• Login with Github OAuth
• Login with Google OAuth
• Login with Email Verification

npm i next-auth nodemailer @prisma/client
npm i -D @prisma/cli

.env

NEXTAUTH_URL=
AUTH_SECRET=
JWT_SECRET=
DATABASE_URL="postgresql:..."
EMAIL_SERVER=
EMAIL_FROM=
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GITHUB_PERSONAL_ACCESS_TOKEN=
GITHUB_USER=
GITHUB_REPO=
GOOGLE_ID=
GOOGLE_SECRET=
CMS_CONTENT_FOLDER=
CMS_CONTENT_TYPE_FILE=

src/pages/_app.tsx src/pages/api/auth/[...next_auth].tsx lib/emails/verification-emails.tsx

npx @prisma/cli init

generates prisma/prisma.schema

Copy the SQL commands from next-auth docu into new PostgreSQL Database and execute

npx @client/cli generate

Writing to Github

2021-01-07

npm i @octokit/rest
npm i slugify
npm i react-query

src/pages/api/github/publish.ts src/components/post.ts src/pages/_app.tsx src/lib/helpers.ts

Create Site

2021-01-08

Schema Enhancements:

• Site
• Maintainer

Create a new site and assign owner /api/site/create

List sites for a owner (maintainer) /api/site/index

Get all Repos /api/github/repos

Check if a repo already exists /api/github/repoexists

Show one Site in Admin mode /pages/site/[id].tsx

Form for Site Creation /components/site/create.tsx

List for Sites of User /components/site/list.tsx

Proxy for react-form-hooks /hooks/use-form.ts

Proxy for useSWR /hooks/use-swr.ts

Proxy for useSession /hooks/use-session.ts

Style Lint

2021-01-09

Had some issues with css styling with tailwindcss: .vscode/settings.json

  "scss.validate": false
  "less.validate": false
  "css.validate": false,

npm install --save-dev stylelint stylelint-config-standard npx stylelint "**/*.css" --fix

Storybook

2021-01-09

Storybook relies still on Postcss 7 as Tailwind 2.0 on PostCss 8 had to to use compat 7 mode: Tailwind 2.0 Compatibility Mode

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Adding...

npx sb init
    "@babel/core": "^7.12.10",
    "@storybook/addon-actions": "^6.1.11",
    "@storybook/addon-essentials": "^6.1.11",
    "@storybook/addon-links": "^6.1.11",
    "@storybook/cli": "^6.1.11",
    "@storybook/react": "^6.1.11",
    "babel-loader": "^8.2.2",
npm i -D css-loader style-loader

rm yarn.lock
npm i

cp tsconfig.json > .storybook adjust the paths with ../ adjust .storybook/main.ts adjust .storybook/preview.ts to import the tailwind.css

Invite

2021-01-11

src/components/sites/invite src/pages/api/site/invite

Post Form updated

2021-01-11

src/components/sites/post src/pages/api/github/publish

Content Type, Heroicons as React Components

2021-01-16 2021-01-17

Added Content Type Definition Added Content Type Fields Definition CRUD content types on Github

src/pages/site/[siteId]/type

src/components/ui/... select link image icon tree src/components/icons/...