From 1a74e1236dfa5e0b395109b5bd3761a536c64f47 Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Mon, 31 Jul 2023 13:02:13 +0200 Subject: [PATCH 01/18] refactor: use accessible header hierarchy --- src/lib/components/ProjectCard.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/ProjectCard.svelte b/src/lib/components/ProjectCard.svelte index 81cd4fd..3edf534 100644 --- a/src/lib/components/ProjectCard.svelte +++ b/src/lib/components/ProjectCard.svelte @@ -19,8 +19,8 @@ Post
-
{headerSubTitle}
-

{title}

+
{headerSubTitle}
+ {title}

{description} From 4b1259bc6fd03be732f180ed91d53daab11395c2 Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Mon, 31 Jul 2023 13:03:30 +0200 Subject: [PATCH 02/18] refactor: reformat and add screenreader label --- src/lib/components/Header.svelte | 30 ++++++++++++++++++++++++------ 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index 7c699e1..056f6ce 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -13,29 +13,47 @@ - - Logo -

hellob.art

+ Logo +

+ hellob.art +

LinkedIn Profile of Bart van der BraakLinkedIn Profile of Bart van der Braak GitHub Profile of Bart van der BraakGitHub Profile of Bart van der Braak - \ No newline at end of file +Loading Progress + From 6fab5b64b53c9ab4cf93c55fcd83cdeea22035ff Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Mon, 31 Jul 2023 13:27:38 +0200 Subject: [PATCH 03/18] feat: added gradient for logo text --- src/app.postcss | 19 ++++++- src/lib/components/Header.svelte | 2 +- src/theme.postcss | 98 -------------------------------- tailwind.config.cjs | 20 ++++++- 4 files changed, 38 insertions(+), 101 deletions(-) delete mode 100644 src/theme.postcss diff --git a/src/app.postcss b/src/app.postcss index a9da514..d78b61d 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -1,4 +1,21 @@ html, body { @apply h-full overflow-hidden -} \ No newline at end of file +} + +.dark .logo-text-gradient-dark { + @apply from-logo-blue-start-dark to-logo-blue-stop-dark; +} + +.logo-text-gradient-light { + @apply from-logo-blue-start-light to-logo-blue-stop-light; +} + +.logo-text-gradient { + @apply bg-clip-text text-transparent box-decoration-clone; + /* Direction */ + @apply bg-gradient-to-br; + /* Color Stops */ + @apply logo-text-gradient-light logo-text-gradient-dark; +} + diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index 056f6ce..1150eda 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -25,7 +25,7 @@ Logo

hellob.art

diff --git a/src/theme.postcss b/src/theme.postcss deleted file mode 100644 index 0ce6f86..0000000 --- a/src/theme.postcss +++ /dev/null @@ -1,98 +0,0 @@ - -:root { - /* =~= Theme Properties =~= */ - --theme-font-family-base: system-ui; - --theme-font-family-heading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --theme-font-color-base: 0 0 0; - --theme-font-color-dark: 255 255 255; - --theme-rounded-base: 4px; - --theme-rounded-container: 12px; - --theme-border-base: 2px; - /* =~= Theme On-X Colors =~= */ - --on-primary: 0 0 0; - --on-secondary: 255 255 255; - --on-tertiary: 0 0 0; - --on-success: 0 0 0; - --on-warning: 0 0 0; - --on-error: 255 255 255; - --on-surface: 255 255 255; - /* =~= Theme Colors =~= */ - /* primary | #67a1ba */ - --color-primary-50: 232 241 245; /* ⬅ #e8f1f5 */ - --color-primary-100: 225 236 241; /* ⬅ #e1ecf1 */ - --color-primary-200: 217 232 238; /* ⬅ #d9e8ee */ - --color-primary-300: 194 217 227; /* ⬅ #c2d9e3 */ - --color-primary-400: 149 189 207; /* ⬅ #95bdcf */ - --color-primary-500: 103 161 186; /* ⬅ #67a1ba */ - --color-primary-600: 93 145 167; /* ⬅ #5d91a7 */ - --color-primary-700: 77 121 140; /* ⬅ #4d798c */ - --color-primary-800: 62 97 112; /* ⬅ #3e6170 */ - --color-primary-900: 50 79 91; /* ⬅ #324f5b */ - /* secondary | #4F46E5 */ - --color-secondary-50: 229 227 251; /* ⬅ #e5e3fb */ - --color-secondary-100: 220 218 250; /* ⬅ #dcdafa */ - --color-secondary-200: 211 209 249; /* ⬅ #d3d1f9 */ - --color-secondary-300: 185 181 245; /* ⬅ #b9b5f5 */ - --color-secondary-400: 132 126 237; /* ⬅ #847eed */ - --color-secondary-500: 79 70 229; /* ⬅ #4F46E5 */ - --color-secondary-600: 71 63 206; /* ⬅ #473fce */ - --color-secondary-700: 59 53 172; /* ⬅ #3b35ac */ - --color-secondary-800: 47 42 137; /* ⬅ #2f2a89 */ - --color-secondary-900: 39 34 112; /* ⬅ #272270 */ - /* tertiary | #0EA5E9 */ - --color-tertiary-50: 219 242 252; /* ⬅ #dbf2fc */ - --color-tertiary-100: 207 237 251; /* ⬅ #cfedfb */ - --color-tertiary-200: 195 233 250; /* ⬅ #c3e9fa */ - --color-tertiary-300: 159 219 246; /* ⬅ #9fdbf6 */ - --color-tertiary-400: 86 192 240; /* ⬅ #56c0f0 */ - --color-tertiary-500: 14 165 233; /* ⬅ #0EA5E9 */ - --color-tertiary-600: 13 149 210; /* ⬅ #0d95d2 */ - --color-tertiary-700: 11 124 175; /* ⬅ #0b7caf */ - --color-tertiary-800: 8 99 140; /* ⬅ #08638c */ - --color-tertiary-900: 7 81 114; /* ⬅ #075172 */ - /* success | #84cc16 */ - --color-success-50: 237 247 220; /* ⬅ #edf7dc */ - --color-success-100: 230 245 208; /* ⬅ #e6f5d0 */ - --color-success-200: 224 242 197; /* ⬅ #e0f2c5 */ - --color-success-300: 206 235 162; /* ⬅ #ceeba2 */ - --color-success-400: 169 219 92; /* ⬅ #a9db5c */ - --color-success-500: 132 204 22; /* ⬅ #84cc16 */ - --color-success-600: 119 184 20; /* ⬅ #77b814 */ - --color-success-700: 99 153 17; /* ⬅ #639911 */ - --color-success-800: 79 122 13; /* ⬅ #4f7a0d */ - --color-success-900: 65 100 11; /* ⬅ #41640b */ - /* warning | #EAB308 */ - --color-warning-50: 252 244 218; /* ⬅ #fcf4da */ - --color-warning-100: 251 240 206; /* ⬅ #fbf0ce */ - --color-warning-200: 250 236 193; /* ⬅ #faecc1 */ - --color-warning-300: 247 225 156; /* ⬅ #f7e19c */ - --color-warning-400: 240 202 82; /* ⬅ #f0ca52 */ - --color-warning-500: 234 179 8; /* ⬅ #EAB308 */ - --color-warning-600: 211 161 7; /* ⬅ #d3a107 */ - --color-warning-700: 176 134 6; /* ⬅ #b08606 */ - --color-warning-800: 140 107 5; /* ⬅ #8c6b05 */ - --color-warning-900: 115 88 4; /* ⬅ #735804 */ - /* error | #d31922 */ - --color-error-50: 248 221 222; /* ⬅ #f8ddde */ - --color-error-100: 246 209 211; /* ⬅ #f6d1d3 */ - --color-error-200: 244 198 200; /* ⬅ #f4c6c8 */ - --color-error-300: 237 163 167; /* ⬅ #eda3a7 */ - --color-error-400: 224 94 100; /* ⬅ #e05e64 */ - --color-error-500: 211 25 34; /* ⬅ #d31922 */ - --color-error-600: 190 23 31; /* ⬅ #be171f */ - --color-error-700: 158 19 26; /* ⬅ #9e131a */ - --color-error-800: 127 15 20; /* ⬅ #7f0f14 */ - --color-error-900: 103 12 17; /* ⬅ #670c11 */ - /* surface | #063142 */ - --color-surface-50: 218 224 227; /* ⬅ #dae0e3 */ - --color-surface-100: 205 214 217; /* ⬅ #cdd6d9 */ - --color-surface-200: 193 204 208; /* ⬅ #c1ccd0 */ - --color-surface-300: 155 173 179; /* ⬅ #9badb3 */ - --color-surface-400: 81 111 123; /* ⬅ #516f7b */ - --color-surface-500: 6 49 66; /* ⬅ #063142 */ - --color-surface-600: 5 44 59; /* ⬅ #052c3b */ - --color-surface-700: 5 37 50; /* ⬅ #052532 */ - --color-surface-800: 4 29 40; /* ⬅ #041d28 */ - --color-surface-900: 3 24 32; /* ⬅ #031820 */ - -} \ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 235d328..4e1bc3e 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -10,7 +10,25 @@ module.exports = { ) ], theme: { - extend: {}, + extend: { + colors: { + 'logo-blue-start': { + light: '#314755', + DEFAULT: '#314755', + dark: '#7196AD', + }, + 'logo-blue-stop': { + light: '#26a0da', + DEFAULT: '#26a0da', + dark: '#7CC6E9', + }, + }, + dark: { // <-- Add this section for dark mode classes + 'logo-text-gradient-dark': { + '@apply': 'from-logo-blue-start-dark to-logo-blue-stop-dark', + }, + }, + }, }, plugins: [ ...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')() From 6ba0de4c6087b6003e7f3da9c54df9969b41f956 Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Mon, 31 Jul 2023 22:30:50 +0200 Subject: [PATCH 04/18] feat: add workflow for unlighthouse reports --- .github/workflows/unlighthouse-report.yaml | 125 +++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 .github/workflows/unlighthouse-report.yaml diff --git a/.github/workflows/unlighthouse-report.yaml b/.github/workflows/unlighthouse-report.yaml new file mode 100644 index 0000000..243a11b --- /dev/null +++ b/.github/workflows/unlighthouse-report.yaml @@ -0,0 +1,125 @@ +name: Unlighthouse report + +on: [ pull_request ] + +jobs: + unlighthouse: + runs-on: ubuntu-latest + env: + COMMENT_ID: unlighthouse-node${{matrix.node-version}} + PORT: 8000 + strategy: + matrix: + node-version: [18] + steps: + - name: Create initial comment + uses: marocchino/sticky-pull-request-comment@v2.7.0 + with: + header: ${{ env.COMMENT_ID }} + message: | + ⚡️ Lighthouse report + + ![loading](https://github.com/bartvdbraak/hellob.art/assets/3996360/0e00b3fc-d5f9-490b-9aa7-07cb4b59f85f) + + - name: Checkout repository + uses: actions/checkout@v3.5.3 + + - name: Setup pnpm + uses: pnpm/action-setup@v2.2.4 + with: + version: 8.6.11 + + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v3.7.0 + with: + node-version: ${{ matrix.node-version }} + cache: 'pnpm' + + - name: Install dependencies + run: pnpm install + + - name: Build production + run: pnpm run build + + - name: Preview production + run: pnpm run preview --port ${{ env.PORT }} + + - name: Start Preview and Get Preview URL + run: | + pnpm run preview --port ${{ env.PORT }} & echo $! > preview_pid + sleep 3 + PREVIEW_URL="http://localhost:${{ env.PORT }}" + echo "PREVIEW_URL=$PREVIEW_URL" >> $GITHUB_ENV + + - name: Run unlighthouse + run: | + npx unlighthouse \ + --site "${{ env.PREVIEW_URL }}" \ + --reporter jsonExpanded \ + --build-static + + - name: Upload report as artifact + uses: actions/upload-artifact@v3 + with: + name: lighthouse-report + path: ./.unlighthouse + + - name: Create result content + id: create_result_content + uses: actions/github-script@v6.4.1 + with: + github-token: ${{secrets.GITHUB_TOKEN}} + script: | + const fs = require('fs'); + + const result = JSON.parse(fs.readFileSync('.unlighthouse/ci-result.json', 'utf8')); + + const formatScore = score => `${Math.round(score * 100)} (${score})`; + const getEmoji = score => score >= 0.9 ? '🟢' : score >= 0.5 ? '🟠' : '🔴'; + + const score = res => `${getEmoji(res)} ${formatScore(res)}`; + + const reportUrl = `https://api.github.com/repos/${{ github.repository_owner }}/${{ github.event.repository.name }}/actions/artifacts/${{ github.run_id }}/lighthouse-report`; + + const comment = [ + `⚡️ Lighthouse report for the changes in this PR:`, + '| Category | Score |', + '| --- | --- |', + `| Performance | ${score(result.summary.categories.performance.averageScore)} |`, + `| Accessibility | ${score(result.summary.categories.accessibility.averageScore)} |`, + `| Best practices | ${score(result.summary.categories['best-practices'].averageScore)} |`, + `| SEO | ${score(result.summary.categories.seo.averageScore)} |`, + `| *Overall* | ${score(result.summary.score)} |`, + '', + '*Lighthouse scores for individual routes:*', + '', + '| Path | Performance | Accessibility | Best practices | SEO | Overall |', + '| --- | --- | --- | --- | --- | --- |', + `${result.routes.map(route => `| ${route.path} | ${score(route.categories.performance.score)} | ${score(route.categories.accessibility.score)} | ${score(route.categories['best-practices'].score)} | ${score(route.categories.seo.score)} | ${score(route.score)} |`).join('\n')}`, + '', + '*Lighthouse metrics:*', + '', + '| Metric | Average Value |', + '| --- | --- |', + `${Object.entries(result.summary.metrics).map(([metric, { averageNumericValue }]) => `| ${metric} | ${averageNumericValue} |`).join('\n')}`, + '', + `View the full Lighthouse report [here](${reportUrl}).`, + ].join('\n'); + + core.setOutput("comment", comment); + + - name: Update comment with result + uses: marocchino/sticky-pull-request-comment@v2.7.0 + with: + header: ${{ env.COMMENT_ID }} + message: ${{ steps.create_result_content.outputs.comment }} + + - name: Update comment on failure + uses: marocchino/sticky-pull-request-comment@v2.7.0 + if: ${{ failure() }} + with: + header: ${{ env.COMMENT_ID }} + message: | + ⚡️ Lighthouse report failed + + See deployment for any errors From eeb5062159c34b6c313eff13ea196b05c96cb410 Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Mon, 31 Jul 2023 22:32:24 +0200 Subject: [PATCH 05/18] fix: add appropriate permissions to write to pr --- .github/workflows/unlighthouse-report.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/workflows/unlighthouse-report.yaml b/.github/workflows/unlighthouse-report.yaml index 243a11b..b073789 100644 --- a/.github/workflows/unlighthouse-report.yaml +++ b/.github/workflows/unlighthouse-report.yaml @@ -2,6 +2,9 @@ name: Unlighthouse report on: [ pull_request ] +permissions: + pull-requests: write + jobs: unlighthouse: runs-on: ubuntu-latest From c060973dd22323c36e28eb5a0b6ec3741ab9b905 Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Mon, 31 Jul 2023 22:44:38 +0200 Subject: [PATCH 06/18] feat: add cancel comment and remove continuous run --- .github/workflows/unlighthouse-report.yaml | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/.github/workflows/unlighthouse-report.yaml b/.github/workflows/unlighthouse-report.yaml index b073789..7810f4c 100644 --- a/.github/workflows/unlighthouse-report.yaml +++ b/.github/workflows/unlighthouse-report.yaml @@ -43,9 +43,6 @@ jobs: - name: Build production run: pnpm run build - - - name: Preview production - run: pnpm run preview --port ${{ env.PORT }} - name: Start Preview and Get Preview URL run: | @@ -126,3 +123,11 @@ jobs: ⚡️ Lighthouse report failed See deployment for any errors + + - name: Update comment on cancel + uses: marocchino/sticky-pull-request-comment@v2.7.0 + if: ${{ cancelled() }} + with: + header: ${{ env.COMMENT_ID }} + message: | + ⚡️ Lighthouse report cancelled From 6fb01d6ae7fa0357a7d20c833818c6a15f2214e0 Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Mon, 31 Jul 2023 23:04:53 +0200 Subject: [PATCH 07/18] feat: add `.unlighthouse` directory --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 6635cf5..5471422 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,4 @@ node_modules !.env.example vite.config.js.timestamp-* vite.config.ts.timestamp-* +.unlighthouse \ No newline at end of file From a3ec7c167c3503892da3b60932803eaebb53a990 Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Mon, 31 Jul 2023 23:05:21 +0200 Subject: [PATCH 08/18] fix: use `unlighthouse-ci` instead --- .github/workflows/unlighthouse-report.yaml | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/.github/workflows/unlighthouse-report.yaml b/.github/workflows/unlighthouse-report.yaml index 7810f4c..320e17b 100644 --- a/.github/workflows/unlighthouse-report.yaml +++ b/.github/workflows/unlighthouse-report.yaml @@ -47,14 +47,14 @@ jobs: - name: Start Preview and Get Preview URL run: | pnpm run preview --port ${{ env.PORT }} & echo $! > preview_pid - sleep 3 - PREVIEW_URL="http://localhost:${{ env.PORT }}" - echo "PREVIEW_URL=$PREVIEW_URL" >> $GITHUB_ENV - - name: Run unlighthouse + - name: Install Dependencies + run: pnpm add -g @unlighthouse/cli puppeteer + + - name: Run Unlighthouse run: | - npx unlighthouse \ - --site "${{ env.PREVIEW_URL }}" \ + unlighthouse-ci \ + --site "http://localhost:${{ env.PORT }}" \ --reporter jsonExpanded \ --build-static @@ -68,7 +68,7 @@ jobs: id: create_result_content uses: actions/github-script@v6.4.1 with: - github-token: ${{secrets.GITHUB_TOKEN}} + github-token: ${{ secrets.GITHUB_TOKEN }} script: | const fs = require('fs'); From 3d59b68a17e363caa97dadebfe620741ccdcac07 Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Mon, 31 Jul 2023 23:08:27 +0200 Subject: [PATCH 09/18] feat: add default reviewer --- .github/renovate.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/renovate.json b/.github/renovate.json index 92e884a..2088054 100644 --- a/.github/renovate.json +++ b/.github/renovate.json @@ -1,4 +1,5 @@ { "$schema": "https://docs.renovatebot.com/renovate-schema.json", - "extends": ["config:base"] + "extends": ["config:base"], + "reviewers": ["bartvdbraak"] } \ No newline at end of file From 8f7f09b82638a15e4a611260cc712df412cbb754 Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Mon, 31 Jul 2023 23:43:14 +0200 Subject: [PATCH 10/18] feat: upload report to cloudflare pages --- .github/workflows/unlighthouse-report.yaml | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/.github/workflows/unlighthouse-report.yaml b/.github/workflows/unlighthouse-report.yaml index 320e17b..e4d7ddf 100644 --- a/.github/workflows/unlighthouse-report.yaml +++ b/.github/workflows/unlighthouse-report.yaml @@ -58,11 +58,10 @@ jobs: --reporter jsonExpanded \ --build-static - - name: Upload report as artifact - uses: actions/upload-artifact@v3 - with: - name: lighthouse-report - path: ./.unlighthouse + - name: Upload report to Cloudflare pages + run: | + wrangler init + wrangler pages publish .unlighthouse --site pr${{ github.event.pull_request.number }} - name: Create result content id: create_result_content @@ -79,7 +78,7 @@ jobs: const score = res => `${getEmoji(res)} ${formatScore(res)}`; - const reportUrl = `https://api.github.com/repos/${{ github.repository_owner }}/${{ github.event.repository.name }}/actions/artifacts/${{ github.run_id }}/lighthouse-report`; + const reportUrl = ``; const comment = [ `⚡️ Lighthouse report for the changes in this PR:`, From 3ce3198b62a8620fe578fb3fc5ff4aa0efcd8807 Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Mon, 31 Jul 2023 23:52:54 +0200 Subject: [PATCH 11/18] fix: publish cloudflare pages native action --- .github/workflows/unlighthouse-report.yaml | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/.github/workflows/unlighthouse-report.yaml b/.github/workflows/unlighthouse-report.yaml index e4d7ddf..c6871bc 100644 --- a/.github/workflows/unlighthouse-report.yaml +++ b/.github/workflows/unlighthouse-report.yaml @@ -59,9 +59,10 @@ jobs: --build-static - name: Upload report to Cloudflare pages - run: | - wrangler init - wrangler pages publish .unlighthouse --site pr${{ github.event.pull_request.number }} + uses: cloudflare/wrangler-action@2.0.0 + with: + apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} + command: pages publish .unlighthouse --branch=pull-${{ github.event.pull_request.number }} - name: Create result content id: create_result_content From 3df46b240bdd019543d98f1697e614e887a3849e Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Tue, 1 Aug 2023 00:28:44 +0200 Subject: [PATCH 12/18] feat: add cloudflare project and branch notation --- .github/workflows/unlighthouse-report.yaml | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/.github/workflows/unlighthouse-report.yaml b/.github/workflows/unlighthouse-report.yaml index c6871bc..788c796 100644 --- a/.github/workflows/unlighthouse-report.yaml +++ b/.github/workflows/unlighthouse-report.yaml @@ -11,6 +11,8 @@ jobs: env: COMMENT_ID: unlighthouse-node${{matrix.node-version}} PORT: 8000 + CLOUDFLARE_PROJECT: hellobart-unlighthouse + CLOUDFLARE_BRANCH: pull-${{ github.event.pull_request.number }} strategy: matrix: node-version: [18] @@ -62,7 +64,7 @@ jobs: uses: cloudflare/wrangler-action@2.0.0 with: apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} - command: pages publish .unlighthouse --branch=pull-${{ github.event.pull_request.number }} + command: pages deploy .unlighthouse --project-name="${{ env.CLOUDFLARE_PROJECT }}" --branch=${{ env.CLOUDFLARE_BRANCH }} - name: Create result content id: create_result_content @@ -79,7 +81,7 @@ jobs: const score = res => `${getEmoji(res)} ${formatScore(res)}`; - const reportUrl = ``; + const reportUrl = `https://${{ env.CLOUDFLARE_BRANCH }}.${{ env.CLOUDFLARE_PROJECT }}.pages.dev`; const comment = [ `⚡️ Lighthouse report for the changes in this PR:`, From 3807145c1d430fcc01a9b69092b237fbc2e5f3ae Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Wed, 2 Aug 2023 01:37:54 +0200 Subject: [PATCH 13/18] refactor: linting and formatting changes --- .github/dependabot.yml | 8 ++-- .github/renovate.json | 8 ++-- .github/workflows/unlighthouse-report.yaml | 4 +- README.md | 2 +- postcss.config.cjs | 5 +-- src/app.html | 34 +++++++-------- src/app.postcss | 3 +- src/lib/calculate-age.ts | 18 ++++---- src/lib/components/Navigation.svelte | 3 +- src/lib/components/ProjectCard.svelte | 6 ++- src/lib/components/icons/GitHub.svelte | 16 ++++++- src/lib/components/icons/Hamburger.svelte | 19 +++++++- src/lib/components/icons/LinkedIn.svelte | 13 +++++- src/lib/components/icons/Svelte.svelte | 15 ++++++- src/lib/components/icons/Vercel.svelte | 14 +++++- src/routes/+layout.svelte | 17 +++----- src/routes/+page.svelte | 25 +++++++---- src/routes/blog/[slug]/+page.svelte | 6 +-- src/routes/projects/+page.svelte | 5 ++- src/routes/tools/+page.svelte | 16 +++---- src/routes/tools/models/Github.svelte | 28 ++++++------ src/routes/tools/models/Kubernetes.svelte | 46 ++++++++++---------- src/routes/tools/models/TerraformFlat.svelte | 34 +++++++-------- src/routes/tools/models/Warp.svelte | 38 +++++++++------- static/site.webmanifest | 34 +++++++-------- tailwind.config.cjs | 28 +++++------- vite.config.ts | 6 +-- 27 files changed, 262 insertions(+), 189 deletions(-) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index ac85d1a..7c6f570 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -1,8 +1,8 @@ version: 2 updates: - - package-ecosystem: "github-actions" - directory: "/" + - package-ecosystem: 'github-actions' + directory: '/' schedule: - interval: "weekly" + interval: 'weekly' reviewers: - - "bartvdbraak" \ No newline at end of file + - 'bartvdbraak' diff --git a/.github/renovate.json b/.github/renovate.json index 2088054..35fbcc2 100644 --- a/.github/renovate.json +++ b/.github/renovate.json @@ -1,5 +1,5 @@ { - "$schema": "https://docs.renovatebot.com/renovate-schema.json", - "extends": ["config:base"], - "reviewers": ["bartvdbraak"] -} \ No newline at end of file + "$schema": "https://docs.renovatebot.com/renovate-schema.json", + "extends": ["config:base"], + "reviewers": ["bartvdbraak"] +} diff --git a/.github/workflows/unlighthouse-report.yaml b/.github/workflows/unlighthouse-report.yaml index 788c796..887b890 100644 --- a/.github/workflows/unlighthouse-report.yaml +++ b/.github/workflows/unlighthouse-report.yaml @@ -1,6 +1,6 @@ name: Unlighthouse report -on: [ pull_request ] +on: [pull_request] permissions: pull-requests: write @@ -33,7 +33,7 @@ jobs: uses: pnpm/action-setup@v2.2.4 with: version: 8.6.11 - + - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v3.7.0 with: diff --git a/README.md b/README.md index f1a9201..d9bdda9 100644 --- a/README.md +++ b/README.md @@ -73,4 +73,4 @@ Let's connect! You can find me on: - GitHub: [github.com/bartvdbraak](https://github.com/bartvdbraak) - Email: bart@vanderbraak.nl -Looking forward to hearing from you! 😊 \ No newline at end of file +Looking forward to hearing from you! 😊 diff --git a/postcss.config.cjs b/postcss.config.cjs index 3cb3f98..99f1ccb 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -3,10 +3,7 @@ const tailwindcss = require('tailwindcss'); const autoprefixer = require('autoprefixer'); const config = { - plugins: [ - tailwindcss(), - autoprefixer - ] + plugins: [tailwindcss(), autoprefixer] }; module.exports = config; diff --git a/src/app.html b/src/app.html index a9a7224..96ccf6c 100644 --- a/src/app.html +++ b/src/app.html @@ -1,20 +1,20 @@ - - - - - - - - - - - - - %sveltekit.head% - - -
%sveltekit.body%
- + + + + + + + + + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ diff --git a/src/app.postcss b/src/app.postcss index d78b61d..2e566f9 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -1,6 +1,6 @@ html, body { - @apply h-full overflow-hidden + @apply h-full overflow-hidden; } .dark .logo-text-gradient-dark { @@ -18,4 +18,3 @@ body { /* Color Stops */ @apply logo-text-gradient-light logo-text-gradient-dark; } - diff --git a/src/lib/calculate-age.ts b/src/lib/calculate-age.ts index 0916c0d..d1a4402 100644 --- a/src/lib/calculate-age.ts +++ b/src/lib/calculate-age.ts @@ -1,13 +1,13 @@ export function calculateAge(birthdate: string): number { - const birthDate = new Date(birthdate); - const currentDate = new Date(); - - let age = currentDate.getFullYear() - birthDate.getFullYear(); - const monthDiff = currentDate.getMonth() - birthDate.getMonth(); + const birthDate = new Date(birthdate); + const currentDate = new Date(); - if (monthDiff < 0 || (monthDiff === 0 && currentDate.getDate() < birthDate.getDate())) { - age--; - } + let age = currentDate.getFullYear() - birthDate.getFullYear(); + const monthDiff = currentDate.getMonth() - birthDate.getMonth(); - return age; + if (monthDiff < 0 || (monthDiff === 0 && currentDate.getDate() < birthDate.getDate())) { + age--; + } + + return age; } diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte index d40c512..13b10ef 100644 --- a/src/lib/components/Navigation.svelte +++ b/src/lib/components/Navigation.svelte @@ -14,7 +14,8 @@ diff --git a/src/lib/components/ProjectCard.svelte b/src/lib/components/ProjectCard.svelte index 3edf534..75d4082 100644 --- a/src/lib/components/ProjectCard.svelte +++ b/src/lib/components/ProjectCard.svelte @@ -16,7 +16,11 @@
- Post + Post
{headerSubTitle}
diff --git a/src/lib/components/icons/GitHub.svelte b/src/lib/components/icons/GitHub.svelte index 198cf1e..b025f81 100644 --- a/src/lib/components/icons/GitHub.svelte +++ b/src/lib/components/icons/GitHub.svelte @@ -1 +1,15 @@ - \ No newline at end of file + diff --git a/src/lib/components/icons/Hamburger.svelte b/src/lib/components/icons/Hamburger.svelte index 7bafeae..a10e2d2 100644 --- a/src/lib/components/icons/Hamburger.svelte +++ b/src/lib/components/icons/Hamburger.svelte @@ -1 +1,18 @@ - \ No newline at end of file + diff --git a/src/lib/components/icons/LinkedIn.svelte b/src/lib/components/icons/LinkedIn.svelte index 9a5cce0..339838b 100644 --- a/src/lib/components/icons/LinkedIn.svelte +++ b/src/lib/components/icons/LinkedIn.svelte @@ -1 +1,12 @@ - \ No newline at end of file + diff --git a/src/lib/components/icons/Svelte.svelte b/src/lib/components/icons/Svelte.svelte index fe94d1f..99a681b 100644 --- a/src/lib/components/icons/Svelte.svelte +++ b/src/lib/components/icons/Svelte.svelte @@ -1 +1,14 @@ - \ No newline at end of file + diff --git a/src/lib/components/icons/Vercel.svelte b/src/lib/components/icons/Vercel.svelte index dea3fcb..3f7e1cd 100644 --- a/src/lib/components/icons/Vercel.svelte +++ b/src/lib/components/icons/Vercel.svelte @@ -1 +1,13 @@ - \ No newline at end of file + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index bcbb149..b271fdc 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -2,7 +2,7 @@ import '@skeletonlabs/skeleton/themes/theme-crimson.css'; import '@skeletonlabs/skeleton/styles/skeleton.css'; import '../app.postcss'; - import { AppShell, Drawer, ProgressBar, drawerStore } from '@skeletonlabs/skeleton'; + import { AppShell, Drawer } from '@skeletonlabs/skeleton'; import Footer from '../lib/components/Footer.svelte'; import Navigation from '../lib/components/Navigation.svelte'; import Header from '$lib/components/Header.svelte'; @@ -10,26 +10,23 @@ let routes = [ { url: '/', label: 'Home' }, { url: '/projects', label: 'Projects' }, - { url: '/tools', label: 'Tools' }, + { url: '/tools', label: 'Tools' } // { url: '/blog', label: 'Blog' } ]; let progress = 0; - function handleScroll(event: Event) { - const { scrollTop, scrollHeight, clientHeight } = event.currentTarget as HTMLElement; - progress = (scrollTop / (scrollHeight - clientHeight)) * 100; - } + function handleScroll(event: Event) { + const { scrollTop, scrollHeight, clientHeight } = event.currentTarget as HTMLElement; + progress = (scrollTop / (scrollHeight - clientHeight)) * 100; + } - +
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 26efcc7..a40e724 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -5,7 +5,10 @@ hellob.art — home - +
@@ -38,21 +41,25 @@

- Bart van der Braak with a noire effect + Bart van der Braak with a noire effect
- +

Solving Problems with Code and Automation

As a DevOps engineer, I thrive on solving complex challenges with the power of code and - automation. My passion for streamlining workflows led me to create internal tooling using - APIs, boosting productivity for myself and my colleagues. Outside of work, I enjoy taking on - side projects that push my boundaries, expanding my skill set, and exploring new - technologies. I strongly believe that innovation and continuous learning are key drivers of - success in the ever-evolving tech landscape. + automation. My passion for streamlining workflows led me to create internal tooling using APIs, + boosting productivity for myself and my colleagues. Outside of work, I enjoy taking on side + projects that push my boundaries, expanding my skill set, and exploring new technologies. I + strongly believe that innovation and continuous learning are key drivers of success in the + ever-evolving tech landscape.

- +

Cat Lover and Whiskey Enthusiast

diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte index fdc9b04..0f65c0d 100644 --- a/src/routes/blog/[slug]/+page.svelte +++ b/src/routes/blog/[slug]/+page.svelte @@ -1,6 +1,6 @@ @@ -8,4 +8,4 @@ \ No newline at end of file +

{@html data.content}
--> diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte index 797c497..f75e69f 100644 --- a/src/routes/projects/+page.svelte +++ b/src/routes/projects/+page.svelte @@ -49,7 +49,10 @@ hellob.art — projects - +
diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte index 593c3a8..5e97546 100644 --- a/src/routes/tools/+page.svelte +++ b/src/routes/tools/+page.svelte @@ -2,7 +2,7 @@ - {#await gltf} - - {:then gltf} - - {:catch error} - - {/await} + {#await gltf} + + {:then gltf} + + {:catch error} + + {/await} - + diff --git a/src/routes/tools/models/Kubernetes.svelte b/src/routes/tools/models/Kubernetes.svelte index 68b139e..4d5b5a8 100644 --- a/src/routes/tools/models/Kubernetes.svelte +++ b/src/routes/tools/models/Kubernetes.svelte @@ -4,34 +4,34 @@ Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/kubernetes.glb --transf --> - {#await gltf} - - {:then gltf} - - - {:catch error} - - {/await} + {#await gltf} + + {:then gltf} + + + {:catch error} + + {/await} - + diff --git a/src/routes/tools/models/TerraformFlat.svelte b/src/routes/tools/models/TerraformFlat.svelte index a7a3ec9..348b845 100644 --- a/src/routes/tools/models/TerraformFlat.svelte +++ b/src/routes/tools/models/TerraformFlat.svelte @@ -4,28 +4,28 @@ Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/terraform-flat.glb --tr --> - {#await gltf} - - {:then gltf} - - - - - {:catch error} - - {/await} + {#await gltf} + + {:then gltf} + + + + + {:catch error} + + {/await} - + diff --git a/src/routes/tools/models/Warp.svelte b/src/routes/tools/models/Warp.svelte index ac867b2..8c51dd7 100644 --- a/src/routes/tools/models/Warp.svelte +++ b/src/routes/tools/models/Warp.svelte @@ -4,26 +4,34 @@ Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/warp.glb --transform --> - {#await gltf} - - {:then gltf} - - - {:catch error} - - {/await} + {#await gltf} + + {:then gltf} + + + {:catch error} + + {/await} - + diff --git a/static/site.webmanifest b/static/site.webmanifest index b20abb7..9591150 100644 --- a/static/site.webmanifest +++ b/static/site.webmanifest @@ -1,19 +1,19 @@ { - "name": "", - "short_name": "", - "icons": [ - { - "src": "/android-chrome-192x192.png", - "sizes": "192x192", - "type": "image/png" - }, - { - "src": "/android-chrome-512x512.png", - "sizes": "512x512", - "type": "image/png" - } - ], - "theme_color": "#ffffff", - "background_color": "#ffffff", - "display": "standalone" + "name": "", + "short_name": "", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" } diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 4e1bc3e..67b2a12 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -4,10 +4,7 @@ module.exports = { darkMode: 'class', content: [ './src/**/*.{html,js,svelte,ts}', - require('path').join(require.resolve( - '@skeletonlabs/skeleton'), - '../**/*.{html,js,svelte,ts}' - ) + require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}') ], theme: { extend: { @@ -15,22 +12,21 @@ module.exports = { 'logo-blue-start': { light: '#314755', DEFAULT: '#314755', - dark: '#7196AD', + dark: '#7196AD' }, 'logo-blue-stop': { light: '#26a0da', DEFAULT: '#26a0da', - dark: '#7CC6E9', - }, + dark: '#7CC6E9' + } }, - dark: { // <-- Add this section for dark mode classes + dark: { + // <-- Add this section for dark mode classes 'logo-text-gradient-dark': { - '@apply': 'from-logo-blue-start-dark to-logo-blue-stop-dark', - }, - }, - }, + '@apply': 'from-logo-blue-start-dark to-logo-blue-stop-dark' + } + } + } }, - plugins: [ - ...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')() - ] -} + plugins: [...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()] +}; diff --git a/vite.config.ts b/vite.config.ts index cccd80e..4f27957 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,7 +3,7 @@ import { defineConfig } from 'vite'; export default defineConfig({ plugins: [sveltekit()], - ssr: { - noExternal: ['three'] - } + ssr: { + noExternal: ['three'] + } }); From fda659614499a08ec88339d5591bcfaee0e7e27e Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Wed, 2 Aug 2023 02:05:50 +0200 Subject: [PATCH 14/18] refactor: rename and small changes --- .../{unlighthouse-report.yaml => unlighthouse.yaml} | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) rename .github/workflows/{unlighthouse-report.yaml => unlighthouse.yaml} (98%) diff --git a/.github/workflows/unlighthouse-report.yaml b/.github/workflows/unlighthouse.yaml similarity index 98% rename from .github/workflows/unlighthouse-report.yaml rename to .github/workflows/unlighthouse.yaml index 887b890..f43bbcc 100644 --- a/.github/workflows/unlighthouse-report.yaml +++ b/.github/workflows/unlighthouse.yaml @@ -1,4 +1,4 @@ -name: Unlighthouse report +name: Unlighthouse on: [pull_request] @@ -32,7 +32,7 @@ jobs: - name: Setup pnpm uses: pnpm/action-setup@v2.2.4 with: - version: 8.6.11 + version: latest - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v3.7.0 @@ -41,7 +41,7 @@ jobs: cache: 'pnpm' - name: Install dependencies - run: pnpm install + run: pnpm install --frozen-lockfile - name: Build production run: pnpm run build From 460db5f16447278f404b2b7babe83d36028c1ced Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Wed, 2 Aug 2023 02:06:16 +0200 Subject: [PATCH 15/18] feat: added lint and format check as workflow --- .github/workflows/linting.yaml | 38 ++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 .github/workflows/linting.yaml diff --git a/.github/workflows/linting.yaml b/.github/workflows/linting.yaml new file mode 100644 index 0000000..8cac9ec --- /dev/null +++ b/.github/workflows/linting.yaml @@ -0,0 +1,38 @@ +name: Linting + +on: [pull_request] + +permissions: + checks: write + contents: write + +jobs: + run-checks: + name: Run checks + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [18, 20] + steps: + - name: Checkout Git repository + uses: actions/checkout@v3.5.3 + + - name: Setup pnpm + uses: pnpm/action-setup@v2.4.0 + with: + version: latest + + - name: Setup Node.js + uses: actions/setup-node@v3.7.0 + with: + node-version: ${{ matrix.node-version }} + cache: pnpm + + - name: Install Node.js dependencies + run: pnpm install --frozen-lockfile + + - name: Run linters + uses: wearerequired/lint-action@v2.3.0 + with: + eslint: true + prettier: true From 12e08b4b8c6066347044bb9ee5e925156b1eb86e Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Wed, 2 Aug 2023 02:10:52 +0200 Subject: [PATCH 16/18] docs: change formatting and license info --- README.md | 32 +++++++++++++------------------- 1 file changed, 13 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index d9bdda9..aa7835f 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@

hellob.art

-
a simple portfolio
+
personal website built with Svelte
@@ -8,11 +8,6 @@
-
- hellob.art -
-
- ## Installation To install the project and its dependencies, follow these steps: @@ -52,10 +47,7 @@ pnpm run dev -- --open - **SvelteKit:** The tooling and routing framework for Svelte projects. - **Tailwind CSS:** A utility-first CSS framework packed with classes. - **Skeleton:** UI Toolkit for Svelte + Tailwind. - -## Deployment - -The portfolio is hosted using [Vercel](https://vercel.com). You can access it at [https://hellob.art](https://hellob.art). +- **Threlte:** Declarative Three.js for Svelte. ## Contributing @@ -65,12 +57,14 @@ I'm open to contributions! If you find any bugs, have suggestions, or want to ad This project is licensed under the GPLv3 License. Feel free to explore, learn, and have fun! -## Get in Touch - -Let's connect! You can find me on: - -- Website: [hellob.art](https://hellob.art) -- GitHub: [github.com/bartvdbraak](https://github.com/bartvdbraak) -- Email: bart@vanderbraak.nl - -Looking forward to hearing from you! 😊 +Some dependencies may hold different licenses but are in compliance with GPLv3: +- `MIT`: Compatible with GPLv3. +- `Apache 2.0`: Compatible with GPLv3. +- `BSD-3-Clause`: Compatible with GPLv3. +- `BSD-2-Clause`: Compatible with GPLv3. +- `ISC`: Compatible with GPLv3. +- `Python-2.0`: Compatible with GPLv3. (Note: Python has its own license, and version 2.0 is compatible with GPLv3). +- `CC-BY-4.0`: This is a Creative Commons license, which is not a software license. It's generally not recommended to include CC licenses in software projects due to potential compatibility issues. This might cause complications if you choose GPLv3. +- `CC0-1.0`: Not a software license, but it is explicitly designed to waive all copyrights, making it effectively compatible with GPLv3. +- `0BSD`: Compatible with GPLv3. +- `(MIT OR CC0-1.0)`: MIT is compatible with GPLv3, and CC0-1.0 is effectively compatible with GPLv3. \ No newline at end of file From 5b6289b66538e77db94886be344eca0f3f9c9d9a Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Wed, 2 Aug 2023 02:16:50 +0200 Subject: [PATCH 17/18] refactor: prettier format fixes --- README.md | 21 ++++---- src/lib/vitals.ts | 119 ++++++++++++++++++++++++---------------------- vite.config.ts | 12 ++--- 3 files changed, 79 insertions(+), 73 deletions(-) diff --git a/README.md b/README.md index aa7835f..bfc1c43 100644 --- a/README.md +++ b/README.md @@ -58,13 +58,14 @@ I'm open to contributions! If you find any bugs, have suggestions, or want to ad This project is licensed under the GPLv3 License. Feel free to explore, learn, and have fun! Some dependencies may hold different licenses but are in compliance with GPLv3: -- `MIT`: Compatible with GPLv3. -- `Apache 2.0`: Compatible with GPLv3. -- `BSD-3-Clause`: Compatible with GPLv3. -- `BSD-2-Clause`: Compatible with GPLv3. -- `ISC`: Compatible with GPLv3. -- `Python-2.0`: Compatible with GPLv3. (Note: Python has its own license, and version 2.0 is compatible with GPLv3). -- `CC-BY-4.0`: This is a Creative Commons license, which is not a software license. It's generally not recommended to include CC licenses in software projects due to potential compatibility issues. This might cause complications if you choose GPLv3. -- `CC0-1.0`: Not a software license, but it is explicitly designed to waive all copyrights, making it effectively compatible with GPLv3. -- `0BSD`: Compatible with GPLv3. -- `(MIT OR CC0-1.0)`: MIT is compatible with GPLv3, and CC0-1.0 is effectively compatible with GPLv3. \ No newline at end of file + +- `MIT`: Compatible with GPLv3. +- `Apache 2.0`: Compatible with GPLv3. +- `BSD-3-Clause`: Compatible with GPLv3. +- `BSD-2-Clause`: Compatible with GPLv3. +- `ISC`: Compatible with GPLv3. +- `Python-2.0`: Compatible with GPLv3. (Note: Python has its own license, and version 2.0 is compatible with GPLv3). +- `CC-BY-4.0`: This is a Creative Commons license, which is not a software license. It's generally not recommended to include CC licenses in software projects due to potential compatibility issues. This might cause complications if you choose GPLv3. +- `CC0-1.0`: Not a software license, but it is explicitly designed to waive all copyrights, making it effectively compatible with GPLv3. +- `0BSD`: Compatible with GPLv3. +- `(MIT OR CC0-1.0)`: MIT is compatible with GPLv3, and CC0-1.0 is effectively compatible with GPLv3. diff --git a/src/lib/vitals.ts b/src/lib/vitals.ts index b1fcab0..48f9159 100644 --- a/src/lib/vitals.ts +++ b/src/lib/vitals.ts @@ -5,77 +5,82 @@ const vitalsUrl = 'https://vitals.vercel-analytics.com/v1/vitals'; // Improve type safety by defining the navigator.connection type interface NavigatorWithConnection extends Navigator { - connection: { - effectiveType: string; - }; + connection: { + effectiveType: string; + }; } // eslint-disable-next-line @typescript-eslint/no-explicit-any type Params = Record; // Define a type for 'params' function getConnectionSpeed() { - return 'connection' in navigator && 'connection' && 'effectiveType' in (navigator as NavigatorWithConnection).connection - ? (navigator as NavigatorWithConnection).connection.effectiveType - : ''; + return 'connection' in navigator && + 'connection' && + 'effectiveType' in (navigator as NavigatorWithConnection).connection + ? (navigator as NavigatorWithConnection).connection.effectiveType + : ''; } -function sendToAnalytics(metric: Metric, options: { - params: Params; - path: string; - analyticsId: string; - debug: boolean; -}) { - const page = Object.entries(options.params).reduce( - (acc, [key, value]) => acc.replace(value, `[${key}]`), - options.path - ); +function sendToAnalytics( + metric: Metric, + options: { + params: Params; + path: string; + analyticsId: string; + debug: boolean; + } +) { + const page = Object.entries(options.params).reduce( + (acc, [key, value]) => acc.replace(value, `[${key}]`), + options.path + ); - const body = { - dsn: options.analyticsId, - id: metric.id, - page, - href: location.href, - event_name: metric.name, - value: metric.value.toString(), - speed: getConnectionSpeed(), - }; + const body = { + dsn: options.analyticsId, + id: metric.id, + page, + href: location.href, + event_name: metric.name, + value: metric.value.toString(), + speed: getConnectionSpeed() + }; - if (options.debug) { - console.log('[Web Vitals]', metric.name, JSON.stringify(body, null, 2)); - } + if (options.debug) { + console.log('[Web Vitals]', metric.name, JSON.stringify(body, null, 2)); + } - // Serialize body to a URLSearchParams object - const searchParams = new URLSearchParams(body); + // Serialize body to a URLSearchParams object + const searchParams = new URLSearchParams(body); - // The type 'Record' is compatible with 'URLSearchParams' - const blob = new Blob([searchParams.toString()], { - type: 'application/x-www-form-urlencoded', - }); - if (navigator.sendBeacon) { - navigator.sendBeacon(vitalsUrl, blob); - } else { - fetch(vitalsUrl, { - body: blob, - method: 'POST', - credentials: 'omit', - keepalive: true, - }); - } + // The type 'Record' is compatible with 'URLSearchParams' + const blob = new Blob([searchParams.toString()], { + type: 'application/x-www-form-urlencoded' + }); + if (navigator.sendBeacon) { + navigator.sendBeacon(vitalsUrl, blob); + } else { + fetch(vitalsUrl, { + body: blob, + method: 'POST', + credentials: 'omit', + keepalive: true + }); + } } export function webVitals(options: { - params: Params; // Use the defined 'Params' type here - path: string; - analyticsId: string; - debug: boolean; + params: Params; // Use the defined 'Params' type here + path: string; + analyticsId: string; + debug: boolean; }) { - try { - getFID((metric) => sendToAnalytics(metric, options)); - getTTFB((metric) => sendToAnalytics(metric, options)); - getLCP((metric) => sendToAnalytics(metric, options)); - getCLS((metric) => sendToAnalytics(metric, options)); - getFCP((metric) => sendToAnalytics(metric, options)); - } catch (err) { - console.error('[Web Vitals]', err); - } + try { + getFID((metric) => sendToAnalytics(metric, options)); + getTTFB((metric) => sendToAnalytics(metric, options)); + getLCP((metric) => sendToAnalytics(metric, options)); + getCLS((metric) => sendToAnalytics(metric, options)); + getFCP((metric) => sendToAnalytics(metric, options)); + } catch (err) { + console.error('[Web Vitals]', err); + } } diff --git a/vite.config.ts b/vite.config.ts index 0f83cd6..198ac4e 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,10 +3,10 @@ import { defineConfig } from 'vite'; export default defineConfig({ plugins: [sveltekit()], - ssr: { - noExternal: ['three'] - }, - define: { - 'import.meta.env.VERCEL_ANALYTICS_ID': JSON.stringify(process.env.VERCEL_ANALYTICS_ID) - } + ssr: { + noExternal: ['three'] + }, + define: { + 'import.meta.env.VERCEL_ANALYTICS_ID': JSON.stringify(process.env.VERCEL_ANALYTICS_ID) + } }); From 4bb3b7b3704d8aa4f4133935752c8f5253f73679 Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Wed, 2 Aug 2023 02:18:43 +0200 Subject: [PATCH 18/18] refactor: change matrix to just node.js 18 --- .github/workflows/linting.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/linting.yaml b/.github/workflows/linting.yaml index 8cac9ec..c097eb0 100644 --- a/.github/workflows/linting.yaml +++ b/.github/workflows/linting.yaml @@ -12,7 +12,7 @@ jobs: runs-on: ubuntu-latest strategy: matrix: - node-version: [18, 20] + node-version: [18] steps: - name: Checkout Git repository uses: actions/checkout@v3.5.3