From 596b876976c3b1ecb0af849fa0690ac98e862ee3 Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Sun, 9 Apr 2023 13:44:45 -0700 Subject: [PATCH] Adding svelte image library and using on portfolio. --- package.json | 13 +- pnpm-lock.yaml | 266 +++++++++++++++------------- src/ambient.d.ts | 6 + src/lib/components/Portfolio.svelte | 29 ++- src/lib/util/fetchBandcampAlbums.ts | 49 ++--- src/routes/portfolio/+page.svelte | 41 ++--- vite.config.ts | 13 +- 7 files changed, 216 insertions(+), 201 deletions(-) create mode 100644 src/ambient.d.ts diff --git a/package.json b/package.json index 02b122f..7a15d4e 100644 --- a/package.json +++ b/package.json @@ -17,18 +17,19 @@ "@iconify-icons/material-symbols": "^1.2.34", "@iconify-icons/mdi": "^1.2.44", "@iconify-icons/radix-icons": "^1.2.8", - "@iconify-icons/simple-icons": "^1.2.46", + "@iconify-icons/simple-icons": "^1.2.47", "@leveluptuts/svelte-side-menu": "^1.0.5", "@leveluptuts/svelte-toy": "^2.0.3", - "@playwright/test": "^1.32.1", + "@playwright/test": "^1.32.2", "@rgossiaux/svelte-headlessui": "^1.0.2", "@sveltejs/adapter-auto": "^1.0.3", "@sveltejs/adapter-static": "^2.0.1", "@sveltejs/adapter-vercel": "^1.0.6", - "@sveltejs/kit": "^1.15.0", + "@sveltejs/kit": "^1.15.2", "@types/postcss-preset-env": "^8.0.0", - "@typescript-eslint/eslint-plugin": "^5.57.0", - "@typescript-eslint/parser": "^5.57.0", + "@typescript-eslint/eslint-plugin": "^5.57.1", + "@typescript-eslint/parser": "^5.57.1", + "@zerodevx/svelte-img": "^1.2.10", "autoprefixer": "^10.4.14", "eslint": "^8.37.0", "eslint-config-prettier": "^8.8.0", @@ -48,7 +49,7 @@ "scrape-it": "^5.3.2", "sharp": "^0.31.3", "svelte": "^3.58.0", - "svelte-check": "^3.1.4", + "svelte-check": "^3.2.0", "svelte-lazy-loader": "^1.0.0", "svelte-preprocess": "^4.10.7", "tslib": "^2.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5a853d0..0b12b37 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,7 +8,7 @@ dependencies: devDependencies: '@iconify-icons/material-symbols': specifier: ^1.2.34 - version: 1.2.34 + version: 1.2.35 '@iconify-icons/mdi': specifier: ^1.2.44 version: 1.2.44 @@ -16,8 +16,8 @@ devDependencies: specifier: ^1.2.8 version: 1.2.8 '@iconify-icons/simple-icons': - specifier: ^1.2.46 - version: 1.2.46 + specifier: ^1.2.47 + version: 1.2.47 '@leveluptuts/svelte-side-menu': specifier: ^1.0.5 version: 1.0.5 @@ -25,44 +25,47 @@ devDependencies: specifier: ^2.0.3 version: 2.0.3 '@playwright/test': - specifier: ^1.32.1 - version: 1.32.1 + specifier: ^1.32.2 + version: 1.32.2 '@rgossiaux/svelte-headlessui': specifier: ^1.0.2 version: 1.0.2(svelte@3.58.0) '@sveltejs/adapter-auto': specifier: ^1.0.3 - version: 1.0.3(@sveltejs/kit@1.15.0) + version: 1.0.3(@sveltejs/kit@1.15.2) '@sveltejs/adapter-static': specifier: ^2.0.1 - version: 2.0.1(@sveltejs/kit@1.15.0) + version: 2.0.1(@sveltejs/kit@1.15.2) '@sveltejs/adapter-vercel': specifier: ^1.0.6 - version: 1.0.6(@sveltejs/kit@1.15.0) + version: 1.0.6(@sveltejs/kit@1.15.2) '@sveltejs/kit': - specifier: ^1.15.0 - version: 1.15.0(svelte@3.58.0)(vite@4.2.1) + specifier: ^1.15.2 + version: 1.15.2(svelte@3.58.0)(vite@4.2.1) '@types/postcss-preset-env': specifier: ^8.0.0 version: 8.0.0(postcss@8.4.21) '@typescript-eslint/eslint-plugin': - specifier: ^5.57.0 - version: 5.57.0(@typescript-eslint/parser@5.57.0)(eslint@8.37.0)(typescript@4.9.5) + specifier: ^5.57.1 + version: 5.57.1(@typescript-eslint/parser@5.57.1)(eslint@8.38.0)(typescript@4.9.5) '@typescript-eslint/parser': - specifier: ^5.57.0 - version: 5.57.0(eslint@8.37.0)(typescript@4.9.5) + specifier: ^5.57.1 + version: 5.57.1(eslint@8.38.0)(typescript@4.9.5) + '@zerodevx/svelte-img': + specifier: ^1.2.10 + version: 1.2.10(svelte@3.58.0) autoprefixer: specifier: ^10.4.14 version: 10.4.14(postcss@8.4.21) eslint: specifier: ^8.37.0 - version: 8.37.0 + version: 8.38.0 eslint-config-prettier: specifier: ^8.8.0 - version: 8.8.0(eslint@8.37.0) + version: 8.8.0(eslint@8.38.0) eslint-plugin-svelte3: specifier: ^4.0.0 - version: 4.0.0(eslint@8.37.0)(svelte@3.58.0) + version: 4.0.0(eslint@8.38.0)(svelte@3.58.0) iconify-icon: specifier: ^1.0.7 version: 1.0.7 @@ -98,7 +101,7 @@ devDependencies: version: 2.10.0(prettier@2.8.7)(svelte@3.58.0) sass: specifier: ^1.60.0 - version: 1.60.0 + version: 1.61.0 scrape-it: specifier: ^5.3.2 version: 5.3.2 @@ -109,14 +112,14 @@ devDependencies: specifier: ^3.58.0 version: 3.58.0 svelte-check: - specifier: ^3.1.4 - version: 3.1.4(postcss-load-config@4.0.1)(postcss@8.4.21)(sass@1.60.0)(svelte@3.58.0) + specifier: ^3.2.0 + version: 3.2.0(postcss-load-config@4.0.1)(postcss@8.4.21)(sass@1.61.0)(svelte@3.58.0) svelte-lazy-loader: specifier: ^1.0.0 version: 1.0.0 svelte-preprocess: specifier: ^4.10.7 - version: 4.10.7(postcss-load-config@4.0.1)(postcss@8.4.21)(sass@1.60.0)(svelte@3.58.0)(typescript@4.9.5) + version: 4.10.7(postcss-load-config@4.0.1)(postcss@8.4.21)(sass@1.61.0)(svelte@3.58.0)(typescript@4.9.5) tslib: specifier: ^2.5.0 version: 2.5.0 @@ -128,13 +131,13 @@ devDependencies: version: 17.8.3 vite: specifier: ^4.2.1 - version: 4.2.1(@types/node@18.11.18)(sass@1.60.0) + version: 4.2.1(@types/node@18.11.18)(sass@1.61.0) vite-imagetools: specifier: ^4.0.18 version: 4.0.18 vitest: specifier: ^0.25.3 - version: 0.25.8(sass@1.60.0) + version: 0.25.8(sass@1.61.0) packages: @@ -907,23 +910,13 @@ packages: dev: true optional: true - /@eslint-community/eslint-utils@4.2.0(eslint@8.37.0): - resolution: {integrity: sha512-gB8T4H4DEfX2IV9zGDJPOBgP1e/DbfCPDTtEqUMckpvzS1OYtva8JdFYBqMwYk7xAQ429WGF/UPqn8uQ//h2vQ==} - engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} - peerDependencies: - eslint: ^6.0.0 || ^7.0.0 || >=8.0.0 - dependencies: - eslint: 8.37.0 - eslint-visitor-keys: 3.4.0 - dev: true - - /@eslint-community/eslint-utils@4.4.0(eslint@8.37.0): + /@eslint-community/eslint-utils@4.4.0(eslint@8.38.0): resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || >=8.0.0 dependencies: - eslint: 8.37.0 + eslint: 8.38.0 eslint-visitor-keys: 3.4.0 dev: true @@ -949,8 +942,8 @@ packages: - supports-color dev: true - /@eslint/js@8.37.0: - resolution: {integrity: sha512-x5vzdtOOGgFVDCUs81QRB2+liax8rFg3+7hqM+QhBG0/G3F1ZsoYl97UrqgHgQ9KKT7G6c4V+aTUCgu/n22v1A==} + /@eslint/js@8.38.0: + resolution: {integrity: sha512-IoD2MfUnOV58ghIHCiil01PcohxjbYR/qCxsoC+xNgUwh1EY8jOOrYmu3d3a71+tJJ23uscEV4X2HJWMsPJu4g==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true @@ -974,8 +967,8 @@ packages: resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==} dev: true - /@iconify-icons/material-symbols@1.2.34: - resolution: {integrity: sha512-O76km+oAjPx5H0VNEe+/bN3ZcvAiRrZyozppXYtHdeG0iCWPl0PKobD2Njhgbrcy/uRvIec0/g2d35tHi02ssA==} + /@iconify-icons/material-symbols@1.2.35: + resolution: {integrity: sha512-IJTlzU11aeP+J3EGgbiqKHZKn9//jhtEXyzDB/Y9rn0nV04GkKgCrpQHF/Yfiq2LvBCcmHiwilQRwvo4Y7PPFA==} dependencies: '@iconify/types': 2.0.0 dev: true @@ -992,8 +985,8 @@ packages: '@iconify/types': 2.0.0 dev: true - /@iconify-icons/simple-icons@1.2.46: - resolution: {integrity: sha512-OSNDzLvKzUY8hJ8K7tmj1iJqf4c44lux9DgVYC0Q4BwXuhQ3qXgF+WJne+hn2LyZuCYC8oJpDuFPJnzPH2tmSw==} + /@iconify-icons/simple-icons@1.2.47: + resolution: {integrity: sha512-piLD93O6DauSH7OGHNUs1BHkO458/1zSNrMRhbPZrB6Zp0ySgXKzd9EGXZSd8x9NiO1QdbwyD8PpzSry0ZC8jQ==} dependencies: '@iconify/types': 2.0.0 dev: true @@ -1071,13 +1064,13 @@ packages: fastq: 1.15.0 dev: true - /@playwright/test@1.32.1: - resolution: {integrity: sha512-FTwjCuhlm1qHUGf4hWjfr64UMJD/z0hXYbk+O387Ioe6WdyZQ+0TBDAc6P+pHjx2xCv1VYNgrKbYrNixFWy4Dg==} + /@playwright/test@1.32.2: + resolution: {integrity: sha512-nhaTSDpEdTTttdkDE8Z6K3icuG1DVRxrl98Qq0Lfc63SS9a2sjc9+x8ezysh7MzCKz6Y+nArml3/mmt+gqRmQQ==} engines: {node: '>=14'} hasBin: true dependencies: '@types/node': 18.11.18 - playwright-core: 1.32.1 + playwright-core: 1.32.2 optionalDependencies: fsevents: 2.3.2 dev: true @@ -1116,29 +1109,29 @@ packages: picomatch: 2.3.1 dev: true - /@sveltejs/adapter-auto@1.0.3(@sveltejs/kit@1.15.0): + /@sveltejs/adapter-auto@1.0.3(@sveltejs/kit@1.15.2): resolution: {integrity: sha512-hc7O12YQqvZ1CD4fo1gMJuPzBZvuoG5kwxb2RRoz4fVoB8B2vuPO2cY751Ln0G6T/HMrAf8kCqw6Pg+wbxcstw==} peerDependencies: '@sveltejs/kit': ^1.0.0 dependencies: - '@sveltejs/kit': 1.15.0(svelte@3.58.0)(vite@4.2.1) + '@sveltejs/kit': 1.15.2(svelte@3.58.0)(vite@4.2.1) import-meta-resolve: 2.2.1 dev: true - /@sveltejs/adapter-static@2.0.1(@sveltejs/kit@1.15.0): + /@sveltejs/adapter-static@2.0.1(@sveltejs/kit@1.15.2): resolution: {integrity: sha512-o5/q3YwD/ErxYCFlK1v3ydvldyNKk1lh3oeyxn4mhz+Pkbx/uuxhzmbOpytTlp5aVqNHDVsb04xadUzOFCDDzw==} peerDependencies: '@sveltejs/kit': ^1.5.0 dependencies: - '@sveltejs/kit': 1.15.0(svelte@3.58.0)(vite@4.2.1) + '@sveltejs/kit': 1.15.2(svelte@3.58.0)(vite@4.2.1) dev: true - /@sveltejs/adapter-vercel@1.0.6(@sveltejs/kit@1.15.0): + /@sveltejs/adapter-vercel@1.0.6(@sveltejs/kit@1.15.2): resolution: {integrity: sha512-fo6aaEygPd/6B5Jms4Ff7R4jbADnppuLvKOWBNTGe5MGB7ZRUkl+gxHWMQx2av2knyEZkA6V8y5M6R3ML5yN4g==} peerDependencies: '@sveltejs/kit': ^1.0.0 dependencies: - '@sveltejs/kit': 1.15.0(svelte@3.58.0)(vite@4.2.1) + '@sveltejs/kit': 1.15.2(svelte@3.58.0)(vite@4.2.1) '@vercel/nft': 0.22.6 esbuild: 0.16.17 transitivePeerDependencies: @@ -1146,8 +1139,8 @@ packages: - supports-color dev: true - /@sveltejs/kit@1.15.0(svelte@3.58.0)(vite@4.2.1): - resolution: {integrity: sha512-fvDsW9msxWjDU/j9wwLlxEZ6cpXQYcmcQHq7neJMqibMEl39gI1ztVymGnYqM8KLqZXwNmhKtLu8EPheukKtXQ==} + /@sveltejs/kit@1.15.2(svelte@3.58.0)(vite@4.2.1): + resolution: {integrity: sha512-rLNxZrjbrlPf8AWW8GAU4L/Vvu17e9v8EYl7pUip7x72lTft7RcxeP3z7tsrHpMSBBxC9o4XdKzFvz1vMZyXZw==} engines: {node: ^16.14 || >=18} hasBin: true requiresBuild: true @@ -1168,8 +1161,8 @@ packages: sirv: 2.0.2 svelte: 3.58.0 tiny-glob: 0.2.9 - undici: 5.21.0 - vite: 4.2.1(@types/node@18.11.18)(sass@1.60.0) + undici: 5.20.0 + vite: 4.2.1(@types/node@18.11.18)(sass@1.61.0) transitivePeerDependencies: - supports-color dev: true @@ -1187,7 +1180,7 @@ packages: magic-string: 0.27.0 svelte: 3.58.0 svelte-hmr: 0.15.1(svelte@3.58.0) - vite: 4.2.1(@types/node@18.11.18)(sass@1.60.0) + vite: 4.2.1(@types/node@18.11.18)(sass@1.61.0) vitefu: 0.2.4(vite@4.2.1) transitivePeerDependencies: - supports-color @@ -1252,8 +1245,8 @@ packages: resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==} dev: true - /@typescript-eslint/eslint-plugin@5.57.0(@typescript-eslint/parser@5.57.0)(eslint@8.37.0)(typescript@4.9.5): - resolution: {integrity: sha512-itag0qpN6q2UMM6Xgk6xoHa0D0/P+M17THnr4SVgqn9Rgam5k/He33MA7/D7QoJcdMxHFyX7U9imaBonAX/6qA==} + /@typescript-eslint/eslint-plugin@5.57.1(@typescript-eslint/parser@5.57.1)(eslint@8.38.0)(typescript@4.9.5): + resolution: {integrity: sha512-1MeobQkQ9tztuleT3v72XmY0XuKXVXusAhryoLuU5YZ+mXoYKZP9SQ7Flulh1NX4DTjpGTc2b/eMu4u7M7dhnQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: '@typescript-eslint/parser': ^5.0.0 @@ -1264,12 +1257,12 @@ packages: optional: true dependencies: '@eslint-community/regexpp': 4.4.0 - '@typescript-eslint/parser': 5.57.0(eslint@8.37.0)(typescript@4.9.5) - '@typescript-eslint/scope-manager': 5.57.0 - '@typescript-eslint/type-utils': 5.57.0(eslint@8.37.0)(typescript@4.9.5) - '@typescript-eslint/utils': 5.57.0(eslint@8.37.0)(typescript@4.9.5) + '@typescript-eslint/parser': 5.57.1(eslint@8.38.0)(typescript@4.9.5) + '@typescript-eslint/scope-manager': 5.57.1 + '@typescript-eslint/type-utils': 5.57.1(eslint@8.38.0)(typescript@4.9.5) + '@typescript-eslint/utils': 5.57.1(eslint@8.38.0)(typescript@4.9.5) debug: 4.3.4 - eslint: 8.37.0 + eslint: 8.38.0 grapheme-splitter: 1.0.4 ignore: 5.2.4 natural-compare-lite: 1.4.0 @@ -1280,8 +1273,8 @@ packages: - supports-color dev: true - /@typescript-eslint/parser@5.57.0(eslint@8.37.0)(typescript@4.9.5): - resolution: {integrity: sha512-orrduvpWYkgLCyAdNtR1QIWovcNZlEm6yL8nwH/eTxWLd8gsP+25pdLHYzL2QdkqrieaDwLpytHqycncv0woUQ==} + /@typescript-eslint/parser@5.57.1(eslint@8.38.0)(typescript@4.9.5): + resolution: {integrity: sha512-hlA0BLeVSA/wBPKdPGxoVr9Pp6GutGoY380FEhbVi0Ph4WNe8kLvqIRx76RSQt1lynZKfrXKs0/XeEk4zZycuA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 @@ -1290,26 +1283,26 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/scope-manager': 5.57.0 - '@typescript-eslint/types': 5.57.0 - '@typescript-eslint/typescript-estree': 5.57.0(typescript@4.9.5) + '@typescript-eslint/scope-manager': 5.57.1 + '@typescript-eslint/types': 5.57.1 + '@typescript-eslint/typescript-estree': 5.57.1(typescript@4.9.5) debug: 4.3.4 - eslint: 8.37.0 + eslint: 8.38.0 typescript: 4.9.5 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/scope-manager@5.57.0: - resolution: {integrity: sha512-NANBNOQvllPlizl9LatX8+MHi7bx7WGIWYjPHDmQe5Si/0YEYfxSljJpoTyTWFTgRy3X8gLYSE4xQ2U+aCozSw==} + /@typescript-eslint/scope-manager@5.57.1: + resolution: {integrity: sha512-N/RrBwEUKMIYxSKl0oDK5sFVHd6VI7p9K5MyUlVYAY6dyNb/wHUqndkTd3XhpGlXgnQsBkRZuu4f9kAHghvgPw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: - '@typescript-eslint/types': 5.57.0 - '@typescript-eslint/visitor-keys': 5.57.0 + '@typescript-eslint/types': 5.57.1 + '@typescript-eslint/visitor-keys': 5.57.1 dev: true - /@typescript-eslint/type-utils@5.57.0(eslint@8.37.0)(typescript@4.9.5): - resolution: {integrity: sha512-kxXoq9zOTbvqzLbdNKy1yFrxLC6GDJFE2Yuo3KqSwTmDOFjUGeWSakgoXT864WcK5/NAJkkONCiKb1ddsqhLXQ==} + /@typescript-eslint/type-utils@5.57.1(eslint@8.38.0)(typescript@4.9.5): + resolution: {integrity: sha512-/RIPQyx60Pt6ga86hKXesXkJ2WOS4UemFrmmq/7eOyiYjYv/MUSHPlkhU6k9T9W1ytnTJueqASW+wOmW4KrViw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: '*' @@ -1318,23 +1311,23 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/typescript-estree': 5.57.0(typescript@4.9.5) - '@typescript-eslint/utils': 5.57.0(eslint@8.37.0)(typescript@4.9.5) + '@typescript-eslint/typescript-estree': 5.57.1(typescript@4.9.5) + '@typescript-eslint/utils': 5.57.1(eslint@8.38.0)(typescript@4.9.5) debug: 4.3.4 - eslint: 8.37.0 + eslint: 8.38.0 tsutils: 3.21.0(typescript@4.9.5) typescript: 4.9.5 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/types@5.57.0: - resolution: {integrity: sha512-mxsod+aZRSyLT+jiqHw1KK6xrANm19/+VFALVFP5qa/aiJnlP38qpyaTd0fEKhWvQk6YeNZ5LGwI1pDpBRBhtQ==} + /@typescript-eslint/types@5.57.1: + resolution: {integrity: sha512-bSs4LOgyV3bJ08F5RDqO2KXqg3WAdwHCu06zOqcQ6vqbTJizyBhuh1o1ImC69X4bV2g1OJxbH71PJqiO7Y1RuA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - /@typescript-eslint/typescript-estree@5.57.0(typescript@4.9.5): - resolution: {integrity: sha512-LTzQ23TV82KpO8HPnWuxM2V7ieXW8O142I7hQTxWIHDcCEIjtkat6H96PFkYBQqGFLW/G/eVVOB9Z8rcvdY/Vw==} + /@typescript-eslint/typescript-estree@5.57.1(typescript@4.9.5): + resolution: {integrity: sha512-A2MZqD8gNT0qHKbk2wRspg7cHbCDCk2tcqt6ScCFLr5Ru8cn+TCfM786DjPhqwseiS+PrYwcXht5ztpEQ6TFTw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: typescript: '*' @@ -1342,8 +1335,8 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/types': 5.57.0 - '@typescript-eslint/visitor-keys': 5.57.0 + '@typescript-eslint/types': 5.57.1 + '@typescript-eslint/visitor-keys': 5.57.1 debug: 4.3.4 globby: 11.1.0 is-glob: 4.0.3 @@ -1354,19 +1347,19 @@ packages: - supports-color dev: true - /@typescript-eslint/utils@5.57.0(eslint@8.37.0)(typescript@4.9.5): - resolution: {integrity: sha512-ps/4WohXV7C+LTSgAL5CApxvxbMkl9B9AUZRtnEFonpIxZDIT7wC1xfvuJONMidrkB9scs4zhtRyIwHh4+18kw==} + /@typescript-eslint/utils@5.57.1(eslint@8.38.0)(typescript@4.9.5): + resolution: {integrity: sha512-kN6vzzf9NkEtawECqze6v99LtmDiUJCVpvieTFA1uL7/jDghiJGubGZ5csicYHU1Xoqb3oH/R5cN5df6W41Nfg==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 dependencies: - '@eslint-community/eslint-utils': 4.4.0(eslint@8.37.0) + '@eslint-community/eslint-utils': 4.4.0(eslint@8.38.0) '@types/json-schema': 7.0.11 '@types/semver': 7.3.13 - '@typescript-eslint/scope-manager': 5.57.0 - '@typescript-eslint/types': 5.57.0 - '@typescript-eslint/typescript-estree': 5.57.0(typescript@4.9.5) - eslint: 8.37.0 + '@typescript-eslint/scope-manager': 5.57.1 + '@typescript-eslint/types': 5.57.1 + '@typescript-eslint/typescript-estree': 5.57.1(typescript@4.9.5) + eslint: 8.38.0 eslint-scope: 5.1.1 semver: 7.3.8 transitivePeerDependencies: @@ -1374,11 +1367,11 @@ packages: - typescript dev: true - /@typescript-eslint/visitor-keys@5.57.0: - resolution: {integrity: sha512-ery2g3k0hv5BLiKpPuwYt9KBkAp2ugT6VvyShXdLOkax895EC55sP0Tx5L0fZaQueiK3fBLvHVvEl3jFS5ia+g==} + /@typescript-eslint/visitor-keys@5.57.1: + resolution: {integrity: sha512-RjQrAniDU0CEk5r7iphkm731zKlFiUjvcBS2yHAg8WWqFMCaCrD0rKEVOMUyMMcbGPZ0bPp56srkGWrgfZqLRA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: - '@typescript-eslint/types': 5.57.0 + '@typescript-eslint/types': 5.57.1 eslint-visitor-keys: 3.4.0 dev: true @@ -1403,6 +1396,18 @@ packages: - supports-color dev: true + /@zerodevx/svelte-img@1.2.10(svelte@3.58.0): + resolution: {integrity: sha512-d2d6+9QEVeNGfmAKlf1qgpM8el0SqMRV68iBz1e3qXFJpRM7kVpwN05Hpj008NHcb/tuUg2xcmTx8yUXBtaTGg==} + peerDependencies: + svelte: ^3.55.1 + dependencies: + imagetools-core: 3.3.1 + svelte: 3.58.0 + vite-imagetools: 4.0.18 + transitivePeerDependencies: + - rollup + dev: true + /abab@1.0.4: resolution: {integrity: sha512-I+Wi+qiE2kUXyrRhNsWv6XsjUTBJjSoVSctKNBfLG5zG/Xe7Rjbxf13+vqYHNTwHaFU+FtSlVxOCTiMEVtPv0A==} dev: true @@ -2201,22 +2206,22 @@ packages: dev: true optional: true - /eslint-config-prettier@8.8.0(eslint@8.37.0): + /eslint-config-prettier@8.8.0(eslint@8.38.0): resolution: {integrity: sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==} hasBin: true peerDependencies: eslint: '>=7.0.0' dependencies: - eslint: 8.37.0 + eslint: 8.38.0 dev: true - /eslint-plugin-svelte3@4.0.0(eslint@8.37.0)(svelte@3.58.0): + /eslint-plugin-svelte3@4.0.0(eslint@8.38.0)(svelte@3.58.0): resolution: {integrity: sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==} peerDependencies: eslint: '>=8.0.0' svelte: ^3.2.0 dependencies: - eslint: 8.37.0 + eslint: 8.38.0 svelte: 3.58.0 dev: true @@ -2241,15 +2246,15 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - /eslint@8.37.0: - resolution: {integrity: sha512-NU3Ps9nI05GUoVMxcZx1J8CNR6xOvUT4jAUMH5+z8lpp3aEdPVCImKw6PWG4PY+Vfkpr+jvMpxs/qoE7wq0sPw==} + /eslint@8.38.0: + resolution: {integrity: sha512-pIdsD2jwlUGf/U38Jv97t8lq6HpaU/G9NKbYmpWpZGw3LdTNhZLbJePqxOXGB5+JEKfOPU/XLxYxFh03nr1KTg==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} hasBin: true dependencies: - '@eslint-community/eslint-utils': 4.2.0(eslint@8.37.0) + '@eslint-community/eslint-utils': 4.4.0(eslint@8.38.0) '@eslint-community/regexpp': 4.4.0 '@eslint/eslintrc': 2.0.2 - '@eslint/js': 8.37.0 + '@eslint/js': 8.38.0 '@humanwhocodes/config-array': 0.11.8 '@humanwhocodes/module-importer': 1.0.1 '@nodelib/fs.walk': 1.2.8 @@ -3040,6 +3045,10 @@ packages: resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==} dev: true + /minimist@1.2.8: + resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==} + dev: true + /minipass@3.3.6: resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==} engines: {node: '>=8'} @@ -3323,8 +3332,8 @@ packages: engines: {node: '>=0.10.0'} dev: true - /playwright-core@1.32.1: - resolution: {integrity: sha512-KZYUQC10mXD2Am1rGlidaalNGYk3LU1vZqqNk0gT4XPty1jOqgup8KDP8l2CUlqoNKhXM5IfGjWgW37xvGllBA==} + /playwright-core@1.32.2: + resolution: {integrity: sha512-zD7aonO+07kOTthsrCR3YCVnDcqSHIJpdFUtZEMOb6//1Rc7/6mZDRdw+nlzcQiQltOOsiqI3rrSyn/SlyjnJQ==} engines: {node: '>=14'} hasBin: true dev: true @@ -3961,9 +3970,9 @@ packages: rimraf: 2.7.1 dev: true - /sass@1.60.0: - resolution: {integrity: sha512-updbwW6fNb5gGm8qMXzVO7V4sWf7LMXnMly/JEyfbfERbVH46Fn6q02BX7/eHTdKpE7d+oTkMMQpFWNUMfFbgQ==} - engines: {node: '>=12.0.0'} + /sass@1.61.0: + resolution: {integrity: sha512-PDsN7BrVkNZK2+dj/dpKQAWZavbAQ87IXqVvw2+oEYI+GwlTWkvbQtL7F2cCNbMqJEYKPh1EcjSxsnqIb/kyaQ==} + engines: {node: '>=14.0.0'} hasBin: true dependencies: chokidar: 3.5.3 @@ -4103,7 +4112,7 @@ packages: dependencies: '@jridgewell/sourcemap-codec': 1.4.14 buffer-crc32: 0.2.13 - minimist: 1.2.7 + minimist: 1.2.8 sander: 0.5.1 dev: true @@ -4209,8 +4218,8 @@ packages: engines: {node: '>= 0.4'} dev: true - /svelte-check@3.1.4(postcss-load-config@4.0.1)(postcss@8.4.21)(sass@1.60.0)(svelte@3.58.0): - resolution: {integrity: sha512-25Lb46ZS4IK/XpBMe4IBMrtYf23V8alqBX+szXoccb7uM0D2Wqq5rMRzYBONZnFVuU1bQG3R50lyIT5eRewv2g==} + /svelte-check@3.2.0(postcss-load-config@4.0.1)(postcss@8.4.21)(sass@1.61.0)(svelte@3.58.0): + resolution: {integrity: sha512-6ZnscN8dHEN5Eq5LgIzjj07W9nc9myyBH+diXsUAuiY/3rt0l65/LCIQYlIuoFEjp2F1NhXqZiJwV9omPj9tMw==} hasBin: true peerDependencies: svelte: ^3.55.0 @@ -4222,8 +4231,8 @@ packages: picocolors: 1.0.0 sade: 1.8.1 svelte: 3.58.0 - svelte-preprocess: 5.0.1(postcss-load-config@4.0.1)(postcss@8.4.21)(sass@1.60.0)(svelte@3.58.0)(typescript@4.9.5) - typescript: 4.9.5 + svelte-preprocess: 5.0.3(postcss-load-config@4.0.1)(postcss@8.4.21)(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3) + typescript: 5.0.3 transitivePeerDependencies: - '@babel/core' - coffeescript @@ -4249,7 +4258,7 @@ packages: resolution: {integrity: sha512-AZD6R60vksyojn21FgXLglmBiBB9K5Dkdu0hdGrLbCaRCYT68IsWkZfRUqKhMx1IfzqWcZQ8X9y/f+Ih0oNQkQ==} dev: true - /svelte-preprocess@4.10.7(postcss-load-config@4.0.1)(postcss@8.4.21)(sass@1.60.0)(svelte@3.58.0)(typescript@4.9.5): + /svelte-preprocess@4.10.7(postcss-load-config@4.0.1)(postcss@8.4.21)(sass@1.61.0)(svelte@3.58.0)(typescript@4.9.5): resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==} engines: {node: '>= 9.11.2'} requiresBuild: true @@ -4296,15 +4305,15 @@ packages: magic-string: 0.25.9 postcss: 8.4.21 postcss-load-config: 4.0.1(postcss@8.4.21) - sass: 1.60.0 + sass: 1.61.0 sorcery: 0.10.0 strip-indent: 3.0.0 svelte: 3.58.0 typescript: 4.9.5 dev: true - /svelte-preprocess@5.0.1(postcss-load-config@4.0.1)(postcss@8.4.21)(sass@1.60.0)(svelte@3.58.0)(typescript@4.9.5): - resolution: {integrity: sha512-0HXyhCoc9rsW4zGOgtInylC6qj259E1hpFnJMJWTf+aIfeqh4O/QHT31KT2hvPEqQfdjmqBR/kO2JDkkciBLrQ==} + /svelte-preprocess@5.0.3(postcss-load-config@4.0.1)(postcss@8.4.21)(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3): + resolution: {integrity: sha512-GrHF1rusdJVbOZOwgPWtpqmaexkydznKzy5qIC2FabgpFyKN57bjMUUUqPRfbBXK5igiEWn1uO/DXsa2vJ5VHA==} engines: {node: '>= 14.10.0'} requiresBuild: true peerDependencies: @@ -4318,7 +4327,7 @@ packages: stylus: ^0.55.0 sugarss: ^2.0.0 || ^3.0.0 || ^4.0.0 svelte: ^3.23.0 - typescript: ^3.9.5 || ^4.0.0 + typescript: '>=3.9.5 || ^4.0.0 || ^5.0.0' peerDependenciesMeta: '@babel/core': optional: true @@ -4342,16 +4351,15 @@ packages: optional: true dependencies: '@types/pug': 2.0.6 - '@types/sass': 1.43.1 detect-indent: 6.1.0 magic-string: 0.27.0 postcss: 8.4.21 postcss-load-config: 4.0.1(postcss@8.4.21) - sass: 1.60.0 + sass: 1.61.0 sorcery: 0.11.0 strip-indent: 3.0.0 svelte: 3.58.0 - typescript: 4.9.5 + typescript: 5.0.3 dev: true /svelte@3.58.0: @@ -4517,6 +4525,12 @@ packages: hasBin: true dev: true + /typescript@5.0.3: + resolution: {integrity: sha512-xv8mOEDnigb/tN9PSMTwSEqAnUvkoXMQlicOb0IUVDBSQCgBSaAAROUZYy2IcUy5qU6XajK5jjjO7TMWqBTKZA==} + engines: {node: '>=12.20'} + hasBin: true + dev: true + /typpy@2.3.13: resolution: {integrity: sha512-vOxIcQz9sxHi+rT09SJ5aDgVgrPppQjwnnayTrMye1ODaU8gIZTDM19t9TxmEElbMihx2Nq/0/b/MtyKfayRqA==} dependencies: @@ -4530,8 +4544,8 @@ packages: typpy: 2.3.13 dev: true - /undici@5.21.0: - resolution: {integrity: sha512-HOjK8l6a57b2ZGXOcUsI5NLfoTrfmbOl90ixJDl0AEFG4wgHNDQxtZy15/ZQp7HhjkpaGlp/eneMgtsu1dIlUA==} + /undici@5.20.0: + resolution: {integrity: sha512-J3j60dYzuo6Eevbawwp1sdg16k5Tf768bxYK4TUJRH7cBM4kFCbf3mOnM/0E3vQYXvpxITbbWmBafaDbxLDz3g==} engines: {node: '>=12.18'} dependencies: busboy: 1.6.0 @@ -4621,7 +4635,7 @@ packages: - rollup dev: true - /vite@4.2.1(@types/node@18.11.18)(sass@1.60.0): + /vite@4.2.1(@types/node@18.11.18)(sass@1.61.0): resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -4651,7 +4665,7 @@ packages: postcss: 8.4.21 resolve: 1.22.1 rollup: 3.19.1 - sass: 1.60.0 + sass: 1.61.0 optionalDependencies: fsevents: 2.3.2 dev: true @@ -4664,10 +4678,10 @@ packages: vite: optional: true dependencies: - vite: 4.2.1(@types/node@18.11.18)(sass@1.60.0) + vite: 4.2.1(@types/node@18.11.18)(sass@1.61.0) dev: true - /vitest@0.25.8(sass@1.60.0): + /vitest@0.25.8(sass@1.61.0): resolution: {integrity: sha512-X75TApG2wZTJn299E/TIYevr4E9/nBo1sUtZzn0Ci5oK8qnpZAZyhwg0qCeMSakGIWtc6oRwcQFyFfW14aOFWg==} engines: {node: '>=v14.16.0'} hasBin: true @@ -4702,7 +4716,7 @@ packages: tinybench: 2.3.1 tinypool: 0.3.0 tinyspy: 1.0.2 - vite: 4.2.1(@types/node@18.11.18)(sass@1.60.0) + vite: 4.2.1(@types/node@18.11.18)(sass@1.61.0) transitivePeerDependencies: - less - sass diff --git a/src/ambient.d.ts b/src/ambient.d.ts new file mode 100644 index 0000000..4de9fb8 --- /dev/null +++ b/src/ambient.d.ts @@ -0,0 +1,6 @@ +// Stop warnings of all imports from your image assets directory. + +declare module '$lib/assets/*' { + const image: Record; + export default image; +} diff --git a/src/lib/components/Portfolio.svelte b/src/lib/components/Portfolio.svelte index 70d11a3..b3fbaea 100644 --- a/src/lib/components/Portfolio.svelte +++ b/src/lib/components/Portfolio.svelte @@ -1,30 +1,17 @@

{name}

- - {#each formats as { src, format, width }} - - {/each} - +
@@ -37,6 +24,14 @@ border-radius: 3px; } + :global(img.better-blur)::after { + content: ''; + position: absolute; + inset: 0; + backdrop-filter: blur(20px); + pointer-events: none; + } + :global(.portfolio) { display: grid; grid-template-columns: minmax(200px, 500px) auto; diff --git a/src/lib/util/fetchBandcampAlbums.ts b/src/lib/util/fetchBandcampAlbums.ts index 351757c..0091b08 100644 --- a/src/lib/util/fetchBandcampAlbums.ts +++ b/src/lib/util/fetchBandcampAlbums.ts @@ -1,6 +1,6 @@ import { BANDCAMP_USERNAME, USE_REDIS_CACHE } from '$env/static/private'; import scrapeIt from 'scrape-it'; -import type { ScrapeResult } from 'scrape-it'; +import type { ScrapeResult, ScrapeOptions } from 'scrape-it'; import { redis } from '../server/redis'; import type { Album } from '../types/album'; @@ -14,33 +14,36 @@ export async function fetchBandcampAlbums() { console.log(`Cache hit!`); const ttl = await redis.ttl('bandcampAlbums'); - return response; + return { ttl, response }; } } - const { data }: ScrapeResult = await scrapeIt( - `https://bandcamp.com/${BANDCAMP_USERNAME}`, - { - collectionItems: { - listItem: '.collection-item-container', - data: { - url: { - selector: '.collection-title-details > a.item-link', - attr: 'href' - }, - artwork: { - selector: 'div.collection-item-art-container a img', - attr: 'src' - }, - title: { - selector: 'span.item-link-alt > div.collection-item-title' - }, - artist: { - selector: 'span.item-link-alt > div.collection-item-artist' - } + const scrapeItOptions: ScrapeOptions = { + collectionItems: { + listItem: '.collection-item-container', + data: { + url: { + selector: '.collection-title-details > a.item-link', + attr: 'href' + }, + artwork: { + selector: 'div.collection-item-art-container a img', + attr: 'src' + }, + title: { + selector: 'span.item-link-alt > div.collection-item-title' + }, + artist: { + selector: 'span.item-link-alt > div.collection-item-artist' } } } + }; + + // TODO: Add cache for results + const { data }: ScrapeResult = await scrapeIt( + `https://bandcamp.com/${BANDCAMP_USERNAME}`, + scrapeItOptions ); const albums: Album[] = data?.collectionItems || []; @@ -52,7 +55,7 @@ export async function fetchBandcampAlbums() { } return albums; } else { - return []; + return []; // TODO: Add ttl for cache } } catch (error) { console.error(error); diff --git a/src/routes/portfolio/+page.svelte b/src/routes/portfolio/+page.svelte index 8309ad9..87b7675 100644 --- a/src/routes/portfolio/+page.svelte +++ b/src/routes/portfolio/+page.svelte @@ -7,29 +7,19 @@ TabPanel, TabPanels, } from "@rgossiaux/svelte-headlessui"; - import { Picture } from "svelte-lazy-loader"; import GitHub from '@iconify-icons/simple-icons/github'; import Portfolio from '$lib/components/Portfolio.svelte'; - import personalSite from "$lib/assets/images/Bradley_Shellnut_New_Site.png"; - import personalSiteFormats from "$lib/assets/images/Bradley_Shellnut_New_Site.png?format=webp;avif;png&metadata"; - import personalSiteBlurred from "$lib/assets/images/Bradley_Shellnut_New_Site.png?w=100&png&blur=10"; - import weddingWebsite from "$lib/assets/images/Wedding_Website.png"; - import weddingWebsiteFormats from "$lib/assets/images/Wedding_Website.png?format=webp;avif;png&metadata"; - import weddingWebsiteBlurred from "$lib/assets/images/Wedding_Website.png?w=100&png&blur=10"; - import oldSite from '$lib/assets/images/Old_Website_Bradley_Shellnut.png'; - import oldSiteFormats from '$lib/assets/images/Old_Website_Bradley_Shellnut.png?format=webp;avif;png&metadata'; - import oldSiteBlurred from '$lib/assets/images/Old_Website_Bradley_Shellnut.png?w=100&png&blur=10'; - import shellnutArchitectWebsite from "$lib/assets/images/Mark_Shellnut_Architect.png"; - import shellnutArchitectWebsiteFormats from "$lib/assets/images/Mark_Shellnut_Architect.png?format=webp;avif;png&metadata"; - import shellnutArchitectWebsiteBlurred from "$lib/assets/images/Mark_Shellnut_Architect.png?w=100px&blur=10"; + import personalSite from "$lib/assets/images/Bradley_Shellnut_New_Site.png?run"; + import weddingWebsite from "$lib/assets/images/Wedding_Website.png?run"; + import oldSite from '$lib/assets/images/Old_Website_Bradley_Shellnut.png?run'; + import shellnutArchitectWebsite from "$lib/assets/images/Mark_Shellnut_Architect.png?run"; import PersonalWebsiteGatsby from "$lib/content/portfolio/personal/personal-website-gatsby.md"; import WeddingWebsite from '$lib/content/portfolio/personal/wedding-website.md'; - import MarkShellnutArchitect from '$lib/content/portfolio/professional/mark-shellnut-architect.md'; + import MarkShellnutArchitect from '$lib/content/portfolio/professional/mark-shellnut-architect.md?run'; import OldWebsite from '$lib/content/portfolio/personal/old-website.md'; import ExternalLink from '$lib/components/ExternalLink.svelte'; export let data: PageData; - @@ -49,17 +39,16 @@ + loading="eager" + alt="Picture of Bradley Shellnut's Gatsby Personal Website"> + alt="Picture of Bradley Shellnut's Gatsby Personal Website">

View Site @@ -71,10 +60,9 @@ + alt="Home Page of the old bradleyshellnut.com website">

Link to an archive snapshot @@ -86,10 +74,9 @@ + alt="Picture of Mark Shellnut Architect's Website"> diff --git a/vite.config.ts b/vite.config.ts index 5915012..e4d230c 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,9 +1,18 @@ import { sveltekit } from '@sveltejs/kit/vite'; import type { UserConfig } from 'vite'; -import { imagetools } from 'vite-imagetools'; +import { imagetools } from '@zerodevx/svelte-img/vite'; +// import { imagetools } from 'vite-imagetools'; const config: UserConfig = { - plugins: [imagetools(), sveltekit()], + plugins: [ + sveltekit(), + imagetools({ + // By default, directives are `?width=480;1024;1920&format=avif;webp;jpg` + // Now we change it to generate 5 variants instead - `avif/jpg` formats at `640/1280` + LQIP + defaultDirectives: () => + new URLSearchParams('?width=480;640;1024;1920&format=avif;webp;jpg&lqip=64') + }) + ], test: { include: ['src/**/*.{test,spec}.{js,ts}'] }