chore(release): 1.3.4 [skip ci]

.babelrc.json

@@ -1,3 +1,14 @@
 {
-  "presets": ["next/babel"]
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-env": {
+          "targets": {
+            "browsers": ">1%, not ie 11, not dead"
+          }
+        }
+      }
+    ]
+  ]
 }

.dockerignore

@@ -9,3 +9,4 @@ tmp
 temp
 .DS_Store
 .lighthouseci
+.vercel

.eslintignore

@@ -4,3 +4,4 @@ node_modules
 next-env.d.ts
 **/workbox-*.js
 **/sw.js
+.vercel

.eslintrc.json

@@ -5,7 +5,7 @@
     "next/core-web-vitals",
     "prettier"
   ],
-  "plugins": ["prettier"],
+  "plugins": ["unicorn", "prettier"],
   "parserOptions": {
     "project": "./tsconfig.json"
   },
@@ -15,6 +15,17 @@
     "jest": true
   },
   "rules": {
-    "prettier/prettier": "error"
+    "prettier/prettier": "error",
+    "unicorn/prefer-node-protocol": "error",
+    "unicorn/prevent-abbreviations": [
+      "error",
+      {
+        "replacements": {
+          "props": {
+            "properties": false
+          }
+        }
+      }
+    ]
   }
 }

.github/workflows/Divlo.yml

@@ -32,7 +32,7 @@ jobs:
       - uses: 'actions/checkout@v2.3.4'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.3.0'
+        uses: 'actions/setup-node@v2.4.0'
         with:
           node-version: '16.x'
           cache: 'npm'
@@ -52,7 +52,7 @@ jobs:
       - uses: 'actions/checkout@v2.3.4'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.3.0'
+        uses: 'actions/setup-node@v2.4.0'
         with:
           node-version: '16.x'
           cache: 'npm'
@@ -74,7 +74,7 @@ jobs:
       - uses: 'actions/checkout@v2.3.4'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.3.0'
+        uses: 'actions/setup-node@v2.4.0'
         with:
           node-version: '16.x'
           cache: 'npm'
@@ -91,9 +91,19 @@ jobs:
     runs-on: 'ubuntu-latest'
     steps:
       - uses: 'actions/checkout@v2.3.4'
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+
+      - name: 'Import GPG key'
+        uses: 'crazy-max/ghaction-import-gpg@v3.2.0'
+        with:
+          gpg-private-key: ${{ secrets.GPG_PRIVATE_KEY }}
+          git-user-signingkey: true
+          git-commit-gpgsign: true
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.3.0'
+        uses: 'actions/setup-node@v2.4.0'
         with:
           node-version: '16.x'
           cache: 'npm'
@@ -104,4 +114,13 @@ jobs:
       - name: 'Release'
         run: 'npm run release'
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+          GIT_COMMITTER_NAME: ${{ secrets.GIT_NAME }}
+          GIT_COMMITTER_EMAIL: ${{ secrets.GIT_EMAIL }}
+
+      - name: 'Deploy to Vercel'
+        run: 'npm run deploy -- --token="${VERCEL_TOKEN}" --prod'
+        env:
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}

.gitignore

@@ -45,3 +45,4 @@ npm-debug.log*
 # misc
 .DS_Store
 .lighthouseci
+.vercel

.lighthouserc.json

@@ -11,7 +11,6 @@
       "preset": "lighthouse:recommended",
       "assertions": {
         "csp-xss": "warning",
-        "non-composited-animations": "warning",
         "uses-responsive-images": "warning"
       }
     },

.prettierignore

@@ -6,3 +6,4 @@ package.json
 package-lock.json
 **/workbox-*.js
 **/sw.js
+.vercel

.releaserc.json

@@ -13,7 +13,25 @@
         "preset": "conventionalcommits"
       }
     ],
+    [
       "@semantic-release/npm",
-    "@semantic-release/github"
+      {
+        "npmPublish": false
+      }
+    ],
+    [
+      "@semantic-release/git",
+      {
+        "assets": ["package.json", "package-lock.json"],
+        "message": "chore(release): ${nextRelease.version} [skip ci]"
+      }
+    ],
+    "@semantic-release/github",
+    [
+      "@saithodev/semantic-release-backmerge",
+      {
+        "backmergeStrategy": "merge"
+      }
+    ]
   ]
 }

.vscode/settings.json

@@ -1,9 +1,48 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "prettier.configPath": ".prettierrc.json",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": true
+  },
+  "[css]": {
+    "editor.autoClosingBrackets": "always",
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[sass]": {
+    "editor.autoClosingBrackets": "always",
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.autoClosingBrackets": "always",
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.autoClosingBrackets": "always",
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.autoClosingBrackets": "always",
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.autoClosingBrackets": "always",
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.autoClosingBrackets": "always",
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.autoClosingBrackets": "always",
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.autoClosingBrackets": "always",
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.autoClosingBrackets": "always",
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

Dockerfile

@@ -1,15 +1,15 @@
-FROM node:16.5.0 AS dependencies
+FROM node:16.6.1 AS dependencies
 WORKDIR /usr/src/app
 COPY ./package*.json ./
 RUN npm clean-install
 
-FROM node:16.5.0 AS builder
+FROM node:16.6.1 AS builder
 WORKDIR /usr/src/app
 COPY ./ ./
 COPY --from=dependencies /usr/src/app/node_modules ./node_modules
 RUN npm run build
 
-FROM node:16.5.0 AS runner
+FROM node:16.6.1 AS runner
 WORKDIR /usr/src/app
 ENV NODE_ENV=production
 COPY --from=builder /usr/src/app/next.config.js ./next.config.js

components/Footer.tsx

@@ -11,10 +11,7 @@ export const Footer: React.FC<FooterProps> = (props) => {
   const { version } = props
 
   const versionLink = useMemo(() => {
-    if (version !== '0.0.0-development') {
     return `https://github.com/Divlo/Divlo/releases/tag/v${version}`
-    }
-    return 'https://github.com/Divlo/Divlo/tree/develop'
   }, [version])
 
   return (

components/OpenSource/Repository.tsx

@@ -15,9 +15,7 @@ export const Repository: React.FC<RepositoryProps> = (props) => {
       <a href={href} target='_blank' rel='noopener noreferrer'>
         <div className='flex'>
           <GitHubIcon className='h-6 mr-2' />
-          <span className='text-yellow dark:text-yellow-dark hover:underline'>
-            {name}
-          </span>
+          <span className='text-yellow dark:text-yellow-dark'>{name}</span>
         </div>
         <p className='my-4'>{description}</p>
       </a>

components/Profile/ProfileInfo.tsx

@@ -1,10 +1,9 @@
 import useTranslation from 'next-translate/useTranslation'
 
-export const ProfileInfo: React.FC = () => {
+export const ProfileInformation: React.FC = () => {
   const { t } = useTranslation()
 
   return (
-    <>
     <div className='pb-2 mb-6 border-b-2 font-headline border-gray-600 dark:border-gray-400'>
       <h1 className='text-4xl mb-2'>
         {t('home:about.IAm')}{' '}
@@ -14,31 +13,5 @@ export const ProfileInfo: React.FC = () => {
       </h1>
       <h2 className='text-base mb-3'>{t('home:about.description')}</h2>
     </div>
-
-      <style jsx>
-        {`
-          .profile-info {
-            padding-bottom: 25px;
-            margin-bottom: 25px;
-            border-bottom: 1px solid #dedede;
-          }
-          .profile-title {
-            font-size: 36px;
-            line-height: 1.1;
-            font-weight: 300;
-            margin-bottom: 10px;
-          }
-          .profile-title > strong {
-            font-weight: 600;
-          }
-          .profile-description {
-            font-size: 17.4px;
-            font-weight: 400;
-            line-height: 1.1;
-            margin: 0;
-          }
-        `}
-      </style>
-    </>
   )
 }

components/Profile/ProfileLogo.tsx

@@ -1,14 +1,11 @@
 import Image from 'next/image'
 
+import DivloLogo from 'public/images/divlo_logo.png'
+
 export const ProfileLogo: React.FC = () => {
   return (
-    <div className='px-2 py-6'>
-      <Image
-        width={370}
-        height={370}
-        src='/images/divlo_logo.png'
-        alt='Divlo'
-      />
+    <div className='px-2 py-6 max-w-[370px] max-h-[370px]'>
+      <Image src={DivloLogo} alt='Divlo' />
     </div>
   )
 }

components/Profile/index.tsx

@@ -1,14 +1,14 @@
 import { ProfileDescriptionBottom } from './ProfileDescriptionBottom'
-import { ProfileInfo } from './ProfileInfo'
+import { ProfileInformation } from './ProfileInfo'
 import { ProfileList } from './ProfileList'
 import { ProfileLogo } from './ProfileLogo'
 
 export const Profile: React.FC = () => {
   return (
-    <div className='flex flex-col justify-center items-center px-10 pt-2 md:pt-10 xl:pt-0 md:flex-row'>
+    <div className='flex flex-col justify-center items-center px-10 pt-2 md:pt-10 md:flex-row'>
       <ProfileLogo />
       <div>
-        <ProfileInfo />
+        <ProfileInformation />
         <ProfileList />
         <ProfileDescriptionBottom />
       </div>

components/__test__/Footer.test.tsx

@@ -3,25 +3,10 @@ import { render } from '@testing-library/react'
 import { Footer } from '../Footer'
 
 describe('<Footer />', () => {
-  it('should render the version link pointing to the GitHub release', async () => {
+  it('should render', async () => {
     const version = '1.0.0'
     const { getByText } = render(<Footer version={version} />)
-    const versionLink = getByText(version) as HTMLAnchorElement
     expect(getByText('Divlo')).toBeInTheDocument()
-    expect(versionLink).toBeInTheDocument()
-    expect(versionLink.href).toEqual(
-      `https://github.com/Divlo/Divlo/releases/tag/v${version}`
-    )
-  })
-
-  it('should render the version link pointing to the `develop` branch', async () => {
-    const version = '0.0.0-development'
-    const { getByText } = render(<Footer version={version} />)
-    const versionLink = getByText(version) as HTMLAnchorElement
-    expect(getByText('Divlo')).toBeInTheDocument()
-    expect(versionLink).toBeInTheDocument()
-    expect(versionLink.href).toEqual(
-      'https://github.com/Divlo/Divlo/tree/develop'
-    )
+    expect(getByText(version)).toBeInTheDocument()
   })
 })

next-env.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -1,11 +1,35 @@
 const nextPWA = require('next-pwa')
 const nextTranslate = require('next-translate')
+const { createSecureHeaders } = require('next-secure-headers')
 
+/** @type {import("next").NextConfig} */
 module.exports = nextTranslate(
   nextPWA({
     pwa: {
       disable: process.env.NODE_ENV !== 'production',
       dest: 'public'
+    },
+    async headers() {
+      return [
+        {
+          source: '/:path*',
+          headers: createSecureHeaders({
+            contentSecurityPolicy: {
+              directives: {
+                defaultSrc: ["'self'"],
+                scriptSrc: ["'self'", "'unsafe-eval'", "'unsafe-inline'"],
+                styleSrc: ["'self'", "'unsafe-inline'"],
+                imgSrc: ['*', 'data:', 'blob:'],
+                mediaSrc: "'none'",
+                connectSrc: '*',
+                objectSrc: "'none'",
+                fontSrc: "'self'",
+                baseURI: "'none'"
+              }
+            }
+          })
+        }
+      ]
     }
   })
 )

package.json

@@ -1,6 +1,6 @@
 {
   "name": "divlo",
-  "version": "0.0.0-development",
+  "version": "1.3.4",
   "private": true,
   "repository": {
     "type": "git",
@@ -24,17 +24,18 @@
     "lighthouse": "lhci autorun",
     "test": "jest",
     "release": "semantic-release",
+    "deploy": "vercel",
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@fontsource/montserrat": "4.5.0",
-    "@fortawesome/fontawesome-svg-core": "1.2.35",
-    "@fortawesome/free-brands-svg-icons": "5.15.3",
-    "@fortawesome/free-solid-svg-icons": "5.15.3",
-    "@fortawesome/react-fontawesome": "0.1.14",
+    "@fontsource/montserrat": "4.5.1",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/react-fontawesome": "0.1.15",
     "classnames": "2.3.1",
     "html-react-parser": "1.2.7",
-    "next": "11.0.1",
+    "next": "11.1.0",
     "next-pwa": "5.2.24",
     "next-themes": "0.0.15",
     "next-translate": "1.0.7",
@@ -47,33 +48,38 @@
     "@commitlint/cli": "13.1.0",
     "@commitlint/config-conventional": "13.1.0",
     "@lhci/cli": "0.8.0",
+    "@saithodev/semantic-release-backmerge": "1.5.3",
+    "@semantic-release/git": "9.0.0",
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/react": "12.0.0",
-    "@types/jest": "26.0.24",
-    "@types/node": "16.4.3",
-    "@types/react": "17.0.15",
+    "@types/jest": "27.0.0",
+    "@types/node": "16.6.0",
+    "@types/react": "17.0.17",
     "@types/styled-jsx": "2.2.9",
-    "@typescript-eslint/eslint-plugin": "4.28.5",
+    "@typescript-eslint/eslint-plugin": "4.29.1",
     "autoprefixer": "10.3.1",
     "babel-jest": "27.0.6",
     "dockerfilelint": "1.8.0",
     "editorconfig-checker": "4.0.2",
-    "eslint": "7.31.0",
-    "eslint-config-next": "11.0.1",
+    "eslint": "7.32.0",
+    "eslint-config-next": "11.1.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-config-standard-with-typescript": "20.0.0",
-    "eslint-plugin-import": "2.23.4",
+    "eslint-plugin-import": "2.24.0",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-prettier": "3.4.0",
     "eslint-plugin-promise": "5.1.0",
+    "eslint-plugin-unicorn": "35.0.0",
     "husky": "7.0.1",
     "jest": "27.0.6",
-    "lint-staged": "11.1.1",
+    "lint-staged": "11.1.2",
     "markdownlint-cli": "0.28.1",
+    "next-secure-headers": "2.2.0",
     "postcss": "8.3.6",
     "prettier": "2.3.2",
     "semantic-release": "17.4.4",
     "tailwindcss": "2.2.7",
-    "typescript": "4.3.5"
+    "typescript": "4.3.5",
+    "vercel": "23.1.2"
   }
 }

pages/_app.tsx

@@ -8,7 +8,6 @@ import 'tailwindcss/tailwind.css'
 import '@fontsource/montserrat/400.css'
 import '@fontsource/montserrat/500.css'
 import '@fontsource/montserrat/600.css'
-import '@fontsource/montserrat/700.css'
 
 const universalCookie = new UniversalCookie()
 

pages/_document.tsx

@@ -9,9 +9,9 @@ import Document, {
 
 class MyDocument extends Document {
   static async getInitialProps(
-    ctx: DocumentContext
+    context: DocumentContext
   ): Promise<DocumentInitialProps> {
-    const initialProps = await Document.getInitialProps(ctx)
+    const initialProps = await Document.getInitialProps(context)
     return initialProps
   }
 

vercel.json

@@ -0,0 +1,5 @@
+{
+  "github": {
+    "enabled": false
+  }
+}