feat: add social share buttons to footer

.github/workflows/ci.yml

@@ -55,3 +55,17 @@
           cache: 'npm'
       - run: npm ci
       - run: npm run build
+
+  e2e:
+    name: E2E Tests
+    runs-on: ubuntu-latest
+    needs: [build]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+      - run: npm ci
+      - run: npx playwright install --with-deps
+      - run: npm run e2e

.gitignore

@@ -1,2 +1,5 @@
 node_modules/
 dist/
+
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@chromatic-com/storybook",
+    "@storybook/addon-vitest",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding"
+  ],
+  "framework": "@storybook/react-vite"
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,21 @@
+import type { Preview } from '@storybook/react-vite';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo',
+    },
+  },
+};
+
+export default preview;

eslint.config.js

@@ -1,86 +1,83 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 import js from '@eslint/js';
 import typescript from '@typescript-eslint/eslint-plugin';
 import typescriptParser from '@typescript-eslint/parser';
 import reactRefresh from 'eslint-plugin-react-refresh';
 import globals from 'globals';
 
-export default [
-  js.configs.recommended,
-  {
-    ignores: ['dist/', 'node_modules/', 'vite.config.js'],
+export default [js.configs.recommended, {
+  ignores: ['dist/', 'node_modules/', 'vite.config.js'],
+}, {
+  files: ['*.config.ts', '*.config.js'],
+  languageOptions: {
+    parser: typescriptParser,
+    parserOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+    },
+    globals: {
+      ...globals.node,
+    },
   },
-  {
-    files: ['*.config.ts', '*.config.js'],
-    languageOptions: {
-      parser: typescriptParser,
-      parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module',
-      },
-      globals: {
-        ...globals.node,
+}, {
+  files: ['**/*.{js,jsx}'],
+  languageOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
       },
     },
+    globals: {
+      window: 'readonly',
+      document: 'readonly',
+      console: 'readonly',
+      localStorage: 'readonly',
+      navigator: 'readonly',
+      setTimeout: 'readonly',
+      File: 'readonly',
+      Element: 'readonly',
+      HTMLInputElement: 'readonly',
+      React: 'readonly',
+    },
+  },
+  rules: {
+    'no-unused-vars': 'warn',
   },
-  {
-    files: ['**/*.{js,jsx}'],
-    languageOptions: {
+}, {
+  files: ['**/*.{ts,tsx}'],
+  languageOptions: {
+    parser: typescriptParser,
+    parserOptions: {
       ecmaVersion: 'latest',
       sourceType: 'module',
-      parserOptions: {
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
-      globals: {
-        window: 'readonly',
-        document: 'readonly',
-        console: 'readonly',
-        localStorage: 'readonly',
-        navigator: 'readonly',
-        setTimeout: 'readonly',
-        File: 'readonly',
-        Element: 'readonly',
-        HTMLInputElement: 'readonly',
-        React: 'readonly',
+      ecmaFeatures: {
+        jsx: true,
       },
     },
-    rules: {
-      'no-unused-vars': 'warn',
+    globals: {
+      window: 'readonly',
+      document: 'readonly',
+      console: 'readonly',
+      localStorage: 'readonly',
+      navigator: 'readonly',
+      setTimeout: 'readonly',
+      File: 'readonly',
+      Element: 'readonly',
+      HTMLInputElement: 'readonly',
+      React: 'readonly',
     },
   },
-  {
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      parser: typescriptParser,
-      parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module',
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
-      globals: {
-        window: 'readonly',
-        document: 'readonly',
-        console: 'readonly',
-        localStorage: 'readonly',
-        navigator: 'readonly',
-        setTimeout: 'readonly',
-        File: 'readonly',
-        Element: 'readonly',
-        HTMLInputElement: 'readonly',
-        React: 'readonly',
-      },
-    },
-    plugins: {
-      '@typescript-eslint': typescript,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...typescript.configs.recommended.rules,
-      '@typescript-eslint/no-unused-vars': 'warn',
-      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
-    },
+  plugins: {
+    '@typescript-eslint': typescript,
+    'react-refresh': reactRefresh,
+  },
+  rules: {
+    ...typescript.configs.recommended.rules,
+    '@typescript-eslint/no-unused-vars': 'warn',
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
   },
-];
+}, ...storybook.configs["flat/recommended"]];

index.html

@@ -29,6 +29,12 @@
     />
   </head>
   <body class="bg-dark-950 text-dark-100 antialiased" style="scroll-padding-top: 80px">
+    <a
+      href="#main-content"
+      class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50 focus:px-4 focus:py-2 focus:bg-teal-600 focus:text-white focus:rounded-md focus:outline-none"
+    >
+      Skip to main content
+    </a>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>