Update dependencies including tailwind 2.0

.gitignore

@@ -16,8 +16,10 @@
 # misc
 .DS_Store
 Thumbs.db
-.env
 next-env.d.ts
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Dotenv files
+.env*.local

README.md

@@ -1,10 +1,10 @@
-# Next js Blog Boilerplate
+# Next js Blog Boilerplate with Tailwind CSS
 
 <p align="center">
   <a href="https://creativedesignsguru.com/demo/Nextjs-Blog-Boilerplate/"><img src="public/assets/images/nextjs-starter-banner.png?raw=true" alt="Nextjs starter banner"></a>
 </p>
 
-🚀 Next.js Blog Boilerplate is starter code for your blog based on Next.js framework. ⚡️ Made with [Next.js](https://nextjs.org), [TypeScript](https://www.typescriptlang.org), [ESLint](https://eslint.org), [Prettier](https://prettier.io), [PostCSS](https://postcss.org), [Tailwind CSS](https://tailwindcss.com).
+🚀 Next.js Blog Boilerplate is starter code for your blog based on Next.js 10+ framework with Tailwind CSS 2.0. ⚡️ Made with [Next.js](https://nextjs.org), [TypeScript](https://www.typescriptlang.org), [ESLint](https://eslint.org), [Prettier](https://prettier.io), [PostCSS](https://postcss.org), [Tailwind CSS](https://tailwindcss.com).
 
 Clone this project and use it to create your own [Next.js](https://nextjs.org) blog. You can check a [Next js blog templates demo](https://creativedesignsguru.com/demo/Nextjs-Blog-Boilerplate/).
 

package.json

@@ -15,36 +15,37 @@
     "@mapbox/rehype-prism": "^0.5.0",
     "date-fns": "^2.16.1",
     "gray-matter": "^4.0.2",
-    "next": "^10.0.1",
-    "next-seo": "^4.15.1",
+    "next": "^10.0.4",
+    "next-seo": "^4.17.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rehype-stringify": "^8.0.0",
+    "remark-gfm": "^1.0.0",
     "remark-parse": "^9.0.0",
     "remark-rehype": "^8.0.0",
-    "styled-jsx-plugin-postcss": "^3.0.2",
+    "styled-jsx-plugin-postcss": "^4.0.0",
     "unified": "^9.2.0"
   },
-  "license": "ISC",
   "devDependencies": {
-    "@next/bundle-analyzer": "^10.0.1",
-    "@types/node": "^14.14.6",
-    "@types/react": "^16.9.56",
-    "@typescript-eslint/eslint-plugin": "^4.6.1",
-    "eslint": "^7.13.0",
+    "@next/bundle-analyzer": "^10.0.4",
+    "@types/node": "^14.14.19",
+    "@types/react": "^17.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.11.1",
+    "autoprefixer": "^10.1.0",
+    "eslint": "^7.17.0",
     "eslint-config-airbnb-typescript": "^12.0.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^4.3.0",
-    "lint-staged": "^10.5.1",
+    "husky": "^4.3.6",
+    "lint-staged": "^10.5.3",
     "npm-run-all": "^4.1.5",
-    "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.1.2",
+    "postcss": "^8.2.2",
+    "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
-    "tailwindcss": "^1.9.6",
-    "typescript": "^4.0.5"
+    "tailwindcss": "^2.0.2",
+    "typescript": "^4.1.3"
   },
   "husky": {
     "hooks": {
@@ -60,5 +61,6 @@
     "*.json": [
       "prettier --write"
     ]
-  }
+  },
+  "license": "ISC"
 }

postcss.config.js

@@ -2,5 +2,5 @@
 // it will create an unexpected error: Invalid PostCSS Plugin found: [0]
 
 module.exports = {
-  plugins: { tailwindcss: {}, 'postcss-preset-env': {} },
+  plugins: { tailwindcss: {}, autoprefixer: {} },
 };

src/utils/Markdown.ts

@@ -2,13 +2,15 @@
 // @ts-ignore
 import rehypePrism from '@mapbox/rehype-prism';
 import html from 'rehype-stringify';
+import gfm from 'remark-gfm';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
 import unified from 'unified';
 
 export async function markdownToHtml(markdown: string) {
   const result = await unified()
     .use(remarkParse)
+    .use(gfm)
     .use(remarkRehype)
     .use(rehypePrism)
     .use(html)

tailwind.config.js

@@ -1,12 +1,46 @@
 module.exports = {
-  purge: ['./src/**/*.{js,ts,jsx,tsx}'],
+  purge: ['./src/**/*.{js,ts,jsx,tsx}', './_posts/**/*.md'],
+  darkMode: false,
   theme: {
-    extend: {},
+    fontSize: {
+      xs: '0.75rem',
+      sm: '0.875rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem',
+      '6xl': '4rem',
+    },
+    extend: {
+      colors: {
+        gray: {
+          100: '#f7fafc',
+          200: '#edf2f7',
+          300: '#e2e8f0',
+          400: '#cbd5e0',
+          500: '#a0aec0',
+          600: '#718096',
+          700: '#4a5568',
+          800: '#2d3748',
+          900: '#1a202c',
+        },
+        blue: {
+          100: '#ebf8ff',
+          200: '#bee3f8',
+          300: '#90cdf4',
+          400: '#63b3ed',
+          500: '#4299e1',
+          600: '#3182ce',
+          700: '#2b6cb0',
+          800: '#2c5282',
+          900: '#2a4365',
+        },
+      },
+    },
   },
   variants: {},
   plugins: [],
-  future: {
-    removeDeprecatedGapUtilities: true,
-    purgeLayersByDefault: true,
-  },
 };

tsconfig.json

@@ -1,28 +1,36 @@
 {
   "compilerOptions": {
-    "lib": ["es2017", "dom"],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "removeComments": true,
     "preserveConstEnums": true,
     "strict": true,
+    "alwaysStrict": true,
+    "strictNullChecks": true,
+    "noUncheckedIndexedAccess": true,
+
     "noImplicitAny": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "allowUnreachableCode": false,
+    "noFallthroughCasesInSwitch": true,
+
+    "target": "es5",
     "outDir": "dist",
-    "target": "es2017",
     "declaration": true,
     "sourceMap": true,
+
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "jsx": "preserve",
     "allowJs": false,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
+
+    "jsx": "preserve",
     "noEmit": true,
     "isolatedModules": true
   },