Merge pull request #81 from webdevhome/jump-links-sidebar

Jump links sidebar

Author: alinnert

.eslintrc

@@ -9,14 +9,14 @@
 # the `language` matrix defined below to confirm you have the correct set of
 # supported CodeQL languages.
 #
-name: "CodeQL"
+name: 'CodeQL'
 
 on:
   push:
-    branches: [ develop ]
+    branches: [develop]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ develop ]
+    branches: [develop]
   schedule:
     - cron: '37 7 * * 4'
 
@@ -28,40 +28,40 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript' ]
+        language: ['javascript']
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
         # Learn more:
         # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
+      - name: Checkout repository
+        uses: actions/checkout@v2
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v1
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+          # queries: ./path/to/local/query, your-org/your-repo/queries@main
 
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v1
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 https://git.io/JvXDl
 
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language
 
-    #- run: |
-    #   make bootstrap
-    #   make release
+      #- run: |
+      #   make bootstrap
+      #   make release
 
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1

.github/workflows/codeql-analysis.yml

@@ -1,5 +1,6 @@
 {
   "semi": false,
   "singleQuote": true,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

.prettierrc

@@ -5,4 +5,4 @@
     "comments": false,
     "strings": true
   }
-}
+}

.vscode/settings.json

@@ -19,15 +19,15 @@ This is a collection of links I, as a web developer, use very frequently. Maybe
 
 To start WebdevHome locally run:
 
-~~~
+```shell
 npm ci
-~~~
+```
 
 and then:
 
-~~~
+```shell
 npm run dev
-~~~
+```
 
 This starts a watcher that builds the project every time you make some changes. Also, the local version of your app (running on localhost:3000) gets opened in your default browser automatically.
 
@@ -37,19 +37,19 @@ End the watcher script by pressing `[Ctrl]` + `[C]` in your terminal.
 
 If you want to run this app in your own Docker environment run the following commands from inside the project root directory:
 
-~~~
+```shell
 docker-compose build
-~~~
+```
 
 and then:
 
-~~~
+```shell
 docker-compose up
-~~~
+```
 
-*Or `docker-compose up -d` to run in detached mode.*
+_Or `docker-compose up -d` to run in detached mode._
 
-*Halt the app in detached mode by running `docker-compose down`.*
+_Halt the app in detached mode by running `docker-compose down`._
 
 If you make any changes, start again at `docker-compose build`.
 

README.md

@@ -1,4 +1,4 @@
-version: "3.1"
+version: '3.1'
 
 services:
   wdh:

docker-compose.yml

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+// TypeScript
+import tseslint from 'typescript-eslint'
+// React
+import reactPlugin from 'eslint-plugin-react'
+import reactHooksPlugin from 'eslint-plugin-react-hooks'
+
+export default tseslint.config(
+  { ignores: ['dist/**/*'] },
+  js.configs.recommended,
+  {
+    files: ['src/**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      globals: { ...globals.browser },
+    },
+  },
+
+  // TypeScript
+  ...tseslint.configs.recommended,
+
+  // React
+  {
+    ...reactPlugin.configs.flat.recommended,
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+  reactPlugin.configs.flat['jsx-runtime'],
+  {
+    files: ['src/**/*.{ts,tsx}'],
+    plugins: {
+      'react-hooks': reactHooksPlugin,
+    },
+  },
+)

eslint.config.js

@@ -3,13 +3,21 @@
 @tailwind utilities;
 
 @layer base {
-  svg {
-    @apply align-middle fill-current;
-  }
+    svg {
+        @apply fill-current align-middle;
+    }
 }
 
 @layer components {
-  .px-page {
-    @apply px-2 sm:px-4 lg:px-6;
-  }
-}
+    .px-page {
+        @apply px-2 sm:px-4 lg:px-6;
+    }
+
+    .py-page {
+        @apply py-2 sm:py-4 lg:py-6;
+    }
+
+    .p-page {
+        @apply p-2 sm:p-4 lg:p-6;
+    }
+}

index.css

@@ -1,5 +1,5 @@
-<!DOCTYPE html>
-<html lang="en" class="h-full">
+<!doctype html>
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
@@ -12,6 +12,7 @@
     <title>&lt;WebdevHome /&gt;</title>
 
     <link rel="stylesheet" href="./index.css" />
+
     <style>
       @media (prefers-color-scheme: dark) {
         :root {
@@ -20,8 +21,8 @@
       }
     </style>
   </head>
-  <body class="m-0 min-h-full bg-white dark:bg-gray-700">
-    <div id="root" class="h-full"></div>
+  <body class="bg-white dark:bg-gray-700">
+    <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>