Rewrite app using Vite and Tailwind

.github/workflows/main.yml

@@ -35,5 +35,5 @@ jobs:
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           BRANCH: gh-pages # The branch the action should deploy to.
-          FOLDER: build # The folder the action should deploy.
+          FOLDER: dist # The folder the action should deploy.
           CLEAN: true # Automatically remove deleted files from the deploy branch

.github/workflows/pull-request.yml

@@ -1,12 +1,9 @@
 name: Tests for pull requests
 
-# Controls when the action will run. Triggers the workflow on push or pull request
-# events but only for the master branch
 on:
   pull_request:
     branches:
-      - "**" # matches every branch
-      - "!master" # but excludes master
+      - '**' # every branch
 
 jobs:
   visual-regression:
@@ -27,6 +24,8 @@ jobs:
         run: npm run loki:ci
 
       - uses: actions/upload-artifact@v3
+        if: always()
         with:
+          include-hidden-files: true
           name: Handle Loki artifacts
           path: .loki/

.gitignore

@@ -1,23 +1,19 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
 /.idea
 /.vscode
 
-# dependencies
+# Dependencies
 /node_modules
 
-# testing
+# Test coverage
 /coverage
 
-# production
-/build
+# Prod build
+/dist
+
+# Storybook build
+/dist-storybook
 
-# misc
+# Misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-.eslintcache
 
 npm-debug.log*

.loki/.gitignore

@@ -0,0 +1,2 @@
+current
+difference

.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "arrowParens": "avoid",
+  "jsxBracketSameLine": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

.storybook/main.ts

@@ -0,0 +1,31 @@
+import { StorybookConfig } from '@storybook/react-vite';
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.tsx'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    '@storybook/addon-styling-webpack',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  viteFinal: async config => {
+    // Extend Vite's config to include PostCSS and Tailwind
+    config.css = config.css || {};
+    config.css.postcss = {
+      plugins: [tailwindcss, autoprefixer],
+    };
+    return config;
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react';
+import '../src/index.css';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

CONFIGURATION.md

@@ -9,14 +9,14 @@ All CV information is stored in [src/config.json](src/config.json). This documen
 | forenames           | string, required                      | One or more of your first names.                                                                              |
 | surname             | string, required                      | Your surname.                                                                                                 |
 | profession          | string, required                      | How you would describe your profession or expertise.                                                          |
-| dob                 | string, optional                      | Your date of birth.                                                                                            |
+| dob                 | string, optional                      | Your date of birth.                                                                                           |
 | gender              | string, optional                      | Your gender.                                                                                                  |
 | location            | string, required                      | Where you are located.                                                                                        |
 | citizenship         | string, required                      | Your citizenship.                                                                                             |
 | telephone           | string, optional                      | Your telephone number. A string so you can freely format the number.                                          |
 | email               | string, optional                      | Your email address. This does not render as a link because viewers rarely will use this to generate an email. |
 | social              | [Social](#Social)[], required         | An array of social links, such as LinkedIn.                                                                   |
-| githubRibbonUrl     | string, optional                      | Displays a Github ribbon motif with the given link to your source code.                                       |
+| githubUrl           | string, optional                      | Displays a Github ribbon motif with the given link to your source code.                                       |
 | introductions       | string[], required                    | An array of paragraphs that introduce you as a potential employee.                                            |
 | skills              | string[], required                    | An array of your core skills.                                                                                 |
 | complimentarySkills | string[], optional                    | Additional non-core skills you bring to the table.                                                            |

eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);

index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>