diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7d05a6cfc..e0dce128f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,4 @@ -lockfileVersion: '6.0' +lockfileVersion: '6.1' settings: autoInstallPeers: true diff --git a/svelte-app/cypress/e2e/features/sounds.cy.ts b/svelte-app/cypress/e2e/features/sounds.cy.ts deleted file mode 100644 index b624be216..000000000 --- a/svelte-app/cypress/e2e/features/sounds.cy.ts +++ /dev/null @@ -1,40 +0,0 @@ -describe('E2E | features | sounds', () => { - it('should default to enabled', () => { - cy.visit('/'); - cy.get('body.is-loaded', { timeout: 4000 }).should('exist'); - cy.get('[data-test-id="sfx-toggle"]') - .filter(':visible') - .should('have.attr', 'data-test-state', 'on'); - }); - it('should toggle', () => { - cy.visit('/'); - cy.get('body.is-loaded', { timeout: 4000 }).should('exist'); - cy.get('[data-test-id="sfx-toggle"]') - .filter(':visible') - .should('have.attr', 'data-test-state', 'on'); - cy.get('[data-test-id="sfx-toggle"]').filter(':visible').click(); - cy.get('[data-test-id="sfx-toggle"]') - .filter(':visible') - .should('have.attr', 'data-test-state', 'off'); - }); - it('should persist between loads', () => { - // clear local storage - cy.window().then((win) => { - win.localStorage.clear(); - }); - cy.visit('/'); - cy.get('body.is-loaded', { timeout: 4000 }).should('exist'); - cy.get('[data-test-id="sfx-toggle"]') - .filter(':visible') - .should('have.attr', 'data-test-state', 'on'); - cy.get('[data-test-id="sfx-toggle"]').filter(':visible').click(); - cy.get('[data-test-id="sfx-toggle"]') - .filter(':visible') - .should('have.attr', 'data-test-state', 'off'); - cy.visit('/'); - cy.get('body.is-loaded', { timeout: 4000 }).should('exist'); - cy.get('[data-test-id="sfx-toggle"]') - .filter(':visible') - .should('have.attr', 'data-test-state', 'off'); - }); -}); diff --git a/svelte-app/cypress/e2e/routes/blog.cy.ts b/svelte-app/cypress/e2e/routes/blog.cy.ts index 1ac0914fd..fa8adf570 100644 --- a/svelte-app/cypress/e2e/routes/blog.cy.ts +++ b/svelte-app/cypress/e2e/routes/blog.cy.ts @@ -19,7 +19,7 @@ describe('E2E | Blog', () => { cy.visit('/blog'); cy.get('div.main', { timeout: 4000 }).should('exist'); - cy.get('div.main').should('contain', 'kio.dev | Thoughts'); + cy.get('div.main').should('contain', 'Recent posts'); }); // TODO: This should be a separate test diff --git a/svelte-app/cypress/e2e/routes/index.cy.ts b/svelte-app/cypress/e2e/routes/index.cy.ts index b3cf28abb..a1d2ebd57 100644 --- a/svelte-app/cypress/e2e/routes/index.cy.ts +++ b/svelte-app/cypress/e2e/routes/index.cy.ts @@ -3,12 +3,12 @@ describe('E2E | Index', () => { cy.intercept('GET', '/api/get/config'); cy.visit('/'); - cy.get('div.main', { timeout: 4000 }).should('contain', 'kio.dev | Index'); + cy.get('div.main', { timeout: 4000 }).should('contain', 'About me'); cy.get('[data-test-id="error-text"]').should('not.exist'); cy.reload(); - cy.get('div.main', { timeout: 4000 }).should('contain', 'kio.dev | Index'); + cy.get('div.main', { timeout: 4000 }).should('contain', 'About me'); cy.get('[data-test-id="error-text"]').should('not.exist'); }); }); diff --git a/svelte-app/package.json b/svelte-app/package.json index 0f22cd32d..c00c7c29b 100644 --- a/svelte-app/package.json +++ b/svelte-app/package.json @@ -34,7 +34,7 @@ "@sanity/image-url": "^1.0.2", "@sveltejs/adapter-netlify": "^2.0.7", "@sveltejs/adapter-node": "^1.0.0", - "@sveltejs/kit": "^1.22.4", + "@sveltejs/kit": "^1.25.0", "@tailwindcss/aspect-ratio": "^0.4.2", "@testing-library/cypress": "^9.0.0", "@testing-library/svelte": "^3.2.2", @@ -62,13 +62,12 @@ "prettier-plugin-tailwindcss": "^0.2.2", "rimraf": "^4.4.1", "sass": "^1.58.3", - "svelte": "^4.1.2", + "svelte": "^4.2.0", "svelte-body": "^1.4.0", "svelte-breakpoints": "0.2.0", "svelte-check": "^3.4.3", "svelte-eslint-parser": "^0.32.2", "svelte-highlight": "^7.3.0", - "svelte-loading-spinners": "^0.1.7", "svelte-maybe-transition": "^0.1.2", "svelte-preprocess": "^5.0.4", "tailwindcss": "^3.3.2", @@ -77,7 +76,6 @@ "ts-essentials": "^9.3.0", "tslib": "^2.5.0", "typescript": "^5.2.2", - "uifx": "^2.0.7", "vite": "^4.4.9", "vite-plugin-inspect": "^0.7.35", "vite-plugin-test-selectors": "0.0.2", diff --git a/svelte-app/pnpm-lock.yaml b/svelte-app/pnpm-lock.yaml index 9a05fa7d9..92f07f151 100644 --- a/svelte-app/pnpm-lock.yaml +++ b/svelte-app/pnpm-lock.yaml @@ -1,4 +1,4 @@ -lockfileVersion: '6.0' +lockfileVersion: '6.1' settings: autoInstallPeers: true @@ -18,22 +18,22 @@ devDependencies: version: 5.0.4 '@iconify/svelte': specifier: ^3.1.4 - version: 3.1.4(svelte@4.1.2) + version: 3.1.4(svelte@4.2.0) '@poppanator/sveltekit-svg': specifier: ^3.0.0 - version: 3.0.0(svelte@4.1.2)(vite@4.4.9) + version: 3.0.0(svelte@4.2.0)(vite@4.4.9) '@popperjs/core': specifier: ^2.11.6 version: 2.11.6 '@portabletext/svelte': specifier: ^2.0.0 - version: 2.0.0(svelte@4.1.2) + version: 2.0.0(svelte@4.2.0) '@portabletext/types': specifier: ^2.0.6 version: 2.0.6 '@rgossiaux/svelte-headlessui': specifier: ^1.0.2 - version: 1.0.2(svelte@4.1.2) + version: 1.0.2(svelte@4.2.0) '@rollup/plugin-commonjs': specifier: ^25.0.2 version: 25.0.2 @@ -45,13 +45,13 @@ devDependencies: version: 1.0.2 '@sveltejs/adapter-netlify': specifier: ^2.0.7 - version: 2.0.7(@sveltejs/kit@1.22.4) + version: 2.0.7(@sveltejs/kit@1.25.0) '@sveltejs/adapter-node': specifier: ^1.0.0 - version: 1.2.4(@sveltejs/kit@1.22.4) + version: 1.2.4(@sveltejs/kit@1.25.0) '@sveltejs/kit': - specifier: ^1.22.4 - version: 1.22.4(svelte@4.1.2)(vite@4.4.9) + specifier: ^1.25.0 + version: 1.25.0(svelte@4.2.0)(vite@4.4.9) '@tailwindcss/aspect-ratio': specifier: ^0.4.2 version: 0.4.2(tailwindcss@3.3.2) @@ -60,7 +60,7 @@ devDependencies: version: 9.0.0(cypress@12.14.0) '@testing-library/svelte': specifier: ^3.2.2 - version: 3.2.2(svelte@4.1.2) + version: 3.2.2(svelte@4.2.0) '@types/jsonwebtoken': specifier: ^9.0.1 version: 9.0.1 @@ -99,7 +99,7 @@ devDependencies: version: 10.0.0(eslint@8.32.0) eslint-plugin-svelte: specifier: ^2.16.0 - version: 2.16.0(eslint@8.32.0)(svelte@4.1.2) + version: 2.16.0(eslint@8.32.0)(svelte@4.2.0) eslint-plugin-unused-imports: specifier: ^2.0.0 version: 2.0.0(@typescript-eslint/eslint-plugin@5.62.0)(eslint@8.32.0) @@ -123,7 +123,7 @@ devDependencies: version: 2.8.7 prettier-plugin-svelte: specifier: ^2.9.0 - version: 2.9.0(prettier@2.8.7)(svelte@4.1.2) + version: 2.9.0(prettier@2.8.7)(svelte@4.2.0) prettier-plugin-tailwindcss: specifier: ^0.2.2 version: 0.2.2(prettier-plugin-svelte@2.9.0)(prettier@2.8.7) @@ -134,32 +134,29 @@ devDependencies: specifier: ^1.58.3 version: 1.58.3 svelte: - specifier: ^4.1.2 - version: 4.1.2 + specifier: ^4.2.0 + version: 4.2.0 svelte-body: specifier: ^1.4.0 - version: 1.4.0(svelte@4.1.2) + version: 1.4.0(svelte@4.2.0) svelte-breakpoints: specifier: 0.2.0 - version: 0.2.0(svelte@4.1.2) + version: 0.2.0(svelte@4.2.0) svelte-check: specifier: ^3.4.3 - version: 3.4.3(postcss-load-config@4.0.1)(postcss@8.4.14)(sass@1.58.3)(svelte@4.1.2) + version: 3.4.3(postcss-load-config@4.0.1)(postcss@8.4.14)(sass@1.58.3)(svelte@4.2.0) svelte-eslint-parser: specifier: ^0.32.2 - version: 0.32.2(svelte@4.1.2) + version: 0.32.2(svelte@4.2.0) svelte-highlight: specifier: ^7.3.0 version: 7.3.0 - svelte-loading-spinners: - specifier: ^0.1.7 - version: 0.1.7 svelte-maybe-transition: specifier: ^0.1.2 - version: 0.1.2(svelte@4.1.2) + version: 0.1.2(svelte@4.2.0) svelte-preprocess: specifier: ^5.0.4 - version: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.14)(sass@1.58.3)(svelte@4.1.2)(typescript@5.2.2) + version: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.14)(sass@1.58.3)(svelte@4.2.0)(typescript@5.2.2) tailwindcss: specifier: ^3.3.2 version: 3.3.2 @@ -178,9 +175,6 @@ devDependencies: typescript: specifier: ^5.2.2 version: 5.2.2 - uifx: - specifier: ^2.0.7 - version: 2.0.7 vite: specifier: ^4.4.9 version: 4.4.9(@types/node@20.2.1)(sass@1.58.3)(terser@5.16.3) @@ -922,13 +916,13 @@ packages: resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==} dev: true - /@iconify/svelte@3.1.4(svelte@4.1.2): + /@iconify/svelte@3.1.4(svelte@4.2.0): resolution: {integrity: sha512-YDwQlN46ka8KPRayDb7TivmkAPizfTXi6BSRNqa1IV0+byA907n8JcgQafA7FD//pW5XCuuAhVx6uRbKTo+CfA==} peerDependencies: svelte: '*' dependencies: '@iconify/types': 2.0.0 - svelte: 4.1.2 + svelte: 4.2.0 dev: true /@iconify/types@2.0.0: @@ -2138,13 +2132,13 @@ packages: resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==} dev: true - /@poppanator/sveltekit-svg@3.0.0(svelte@4.1.2)(vite@4.4.9): + /@poppanator/sveltekit-svg@3.0.0(svelte@4.2.0)(vite@4.4.9): resolution: {integrity: sha512-ZWY65A79R52EYTMAQpTwsS05gvS3nOqtqrEGKfkY7PTQErFBjvHbgmfbEX9hofVrw1SwOhR5gG80VyYdOZjDRQ==} peerDependencies: svelte: 3.x vite: '>=3.x' dependencies: - svelte: 4.1.2 + svelte: 4.2.0 svgo: 3.0.2 vite: 4.4.9(@types/node@20.2.1)(sass@1.58.3)(terser@5.16.3) dev: true @@ -2153,13 +2147,13 @@ packages: resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==} dev: true - /@portabletext/svelte@2.0.0(svelte@4.1.2): + /@portabletext/svelte@2.0.0(svelte@4.2.0): resolution: {integrity: sha512-fyA2BFC4c/16PJxu1QpI8PC1W32TJjEPHRh69aW19OFYv5m4+7Gd4J4+Oq9C1FTKycNfcUTNaEik07KqhrLPfQ==} peerDependencies: svelte: ^3.47.0 dependencies: '@portabletext/toolkit': 2.0.4 - svelte: 4.1.2 + svelte: 4.2.0 dev: true /@portabletext/toolkit@2.0.4: @@ -2217,12 +2211,12 @@ packages: resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==} dev: true - /@rgossiaux/svelte-headlessui@1.0.2(svelte@4.1.2): + /@rgossiaux/svelte-headlessui@1.0.2(svelte@4.2.0): resolution: {integrity: sha512-sauopYTSivhzXe1kAvgawkhyYJcQlK8Li3p0d2OtcCIVprOzdbard5lbqWB4xHDv83zAobt2mR08oizO2poHLQ==} peerDependencies: svelte: ^3.44.0 dependencies: - svelte: 4.1.2 + svelte: 4.2.0 dev: true /@rollup/plugin-commonjs@24.1.0(rollup@3.21.2): @@ -2357,18 +2351,18 @@ packages: escape-string-regexp: 5.0.0 dev: true - /@sveltejs/adapter-netlify@2.0.7(@sveltejs/kit@1.22.4): + /@sveltejs/adapter-netlify@2.0.7(@sveltejs/kit@1.25.0): resolution: {integrity: sha512-QztxtQ26wzyonEOy+7RUvl4gqaYRi6UiBcIKrVTWA6uhkDYrB72ttt9t47phNeJAl9j2bCMZHQ8W7k2vXcwTrA==} peerDependencies: '@sveltejs/kit': ^1.5.0 dependencies: '@iarna/toml': 2.2.5 - '@sveltejs/kit': 1.22.4(svelte@4.1.2)(vite@4.4.9) + '@sveltejs/kit': 1.25.0(svelte@4.2.0)(vite@4.4.9) esbuild: 0.17.18 set-cookie-parser: 2.6.0 dev: true - /@sveltejs/adapter-node@1.2.4(@sveltejs/kit@1.22.4): + /@sveltejs/adapter-node@1.2.4(@sveltejs/kit@1.25.0): resolution: {integrity: sha512-TNnhS+OKRZ9RKnC+ho5mlE2FJquI61i0v7yOXxBUSU3LAoYH2kwVVL8P8ecjefmZ8BOfM1V54pBnDODBU5CEaA==} peerDependencies: '@sveltejs/kit': ^1.0.0 @@ -2376,12 +2370,12 @@ packages: '@rollup/plugin-commonjs': 24.1.0(rollup@3.21.2) '@rollup/plugin-json': 6.0.0(rollup@3.21.2) '@rollup/plugin-node-resolve': 15.0.2(rollup@3.21.2) - '@sveltejs/kit': 1.22.4(svelte@4.1.2)(vite@4.4.9) + '@sveltejs/kit': 1.25.0(svelte@4.2.0)(vite@4.4.9) rollup: 3.21.2 dev: true - /@sveltejs/kit@1.22.4(svelte@4.1.2)(vite@4.4.9): - resolution: {integrity: sha512-Opkqw1QXk4Cc25b/heJP2D7mX+OUBFAq4MXKfET58svTTxdeiHFKzmnuRsSF3nmxESqrLjqPAgHpib+knNGzRw==} + /@sveltejs/kit@1.25.0(svelte@4.2.0)(vite@4.4.9): + resolution: {integrity: sha512-+VqMWJJYtcLoF8hYkdqY2qs/MPaawrMwA/gNBJW2o2UrcuYdNiy0ZZnjQQuPD33df/VcAulnoeyzF5ZtaajFEw==} engines: {node: ^16.14 || >=18} hasBin: true requiresBuild: true @@ -2389,7 +2383,7 @@ packages: svelte: ^3.54.0 || ^4.0.0-next.0 vite: ^4.0.0 dependencies: - '@sveltejs/vite-plugin-svelte': 2.4.1(svelte@4.1.2)(vite@4.4.9) + '@sveltejs/vite-plugin-svelte': 2.4.1(svelte@4.2.0)(vite@4.4.9) '@types/cookie': 0.5.1 cookie: 0.5.0 devalue: 4.3.2 @@ -2400,14 +2394,15 @@ packages: sade: 1.8.1 set-cookie-parser: 2.6.0 sirv: 2.0.3 - svelte: 4.1.2 - undici: 5.22.0 + svelte: 4.2.0 + tiny-glob: 0.2.9 + undici: 5.23.0 vite: 4.4.9(@types/node@20.2.1)(sass@1.58.3)(terser@5.16.3) transitivePeerDependencies: - supports-color dev: true - /@sveltejs/vite-plugin-svelte-inspector@1.0.2(@sveltejs/vite-plugin-svelte@2.4.1)(svelte@4.1.2)(vite@4.4.9): + /@sveltejs/vite-plugin-svelte-inspector@1.0.2(@sveltejs/vite-plugin-svelte@2.4.1)(svelte@4.2.0)(vite@4.4.9): resolution: {integrity: sha512-Cy1dUMcYCnDVV/hPLXa43YZJ2jGKVW5rA0xuNL9dlmYhT0yoS1g7+FOFSRlgk0BXKk/Oc7grs+8BVA5Iz2fr8A==} engines: {node: ^14.18.0 || >= 16} peerDependencies: @@ -2415,28 +2410,28 @@ packages: svelte: ^3.54.0 || ^4.0.0-next.0 vite: ^4.0.0 dependencies: - '@sveltejs/vite-plugin-svelte': 2.4.1(svelte@4.1.2)(vite@4.4.9) + '@sveltejs/vite-plugin-svelte': 2.4.1(svelte@4.2.0)(vite@4.4.9) debug: 4.3.4(supports-color@9.3.1) - svelte: 4.1.2 + svelte: 4.2.0 vite: 4.4.9(@types/node@20.2.1)(sass@1.58.3)(terser@5.16.3) transitivePeerDependencies: - supports-color dev: true - /@sveltejs/vite-plugin-svelte@2.4.1(svelte@4.1.2)(vite@4.4.9): + /@sveltejs/vite-plugin-svelte@2.4.1(svelte@4.2.0)(vite@4.4.9): resolution: {integrity: sha512-bNNKvoRY89ptY7udeBSCmTdCVwkjmMcZ0j/z9J5MuedT8jPjq0zrknAo/jF1sToAza4NVaAgR9AkZoD9oJJmnA==} engines: {node: ^14.18.0 || >= 16} peerDependencies: svelte: ^3.54.0 || ^4.0.0-next.0 vite: ^4.0.0 dependencies: - '@sveltejs/vite-plugin-svelte-inspector': 1.0.2(@sveltejs/vite-plugin-svelte@2.4.1)(svelte@4.1.2)(vite@4.4.9) + '@sveltejs/vite-plugin-svelte-inspector': 1.0.2(@sveltejs/vite-plugin-svelte@2.4.1)(svelte@4.2.0)(vite@4.4.9) debug: 4.3.4(supports-color@9.3.1) deepmerge: 4.3.1 kleur: 4.1.5 magic-string: 0.30.0 - svelte: 4.1.2 - svelte-hmr: 0.15.1(svelte@4.1.2) + svelte: 4.2.0 + svelte-hmr: 0.15.1(svelte@4.2.0) vite: 4.4.9(@types/node@20.2.1)(sass@1.58.3)(terser@5.16.3) vitefu: 0.2.4(vite@4.4.9) transitivePeerDependencies: @@ -2483,14 +2478,14 @@ packages: pretty-format: 27.5.1 dev: true - /@testing-library/svelte@3.2.2(svelte@4.1.2): + /@testing-library/svelte@3.2.2(svelte@4.2.0): resolution: {integrity: sha512-IKwZgqbekC3LpoRhSwhd0JswRGxKdAGkf39UiDXTywK61YyLXbCYoR831e/UUC6EeNW4hiHPY+2WuovxOgI5sw==} engines: {node: '>= 10'} peerDependencies: svelte: 3.x dependencies: '@testing-library/dom': 8.20.0 - svelte: 4.1.2 + svelte: 4.2.0 dev: true /@tokenizer/token@0.3.0: @@ -5153,7 +5148,7 @@ packages: eslint: 8.32.0 dev: true - /eslint-plugin-svelte@2.16.0(eslint@8.32.0)(svelte@4.1.2): + /eslint-plugin-svelte@2.16.0(eslint@8.32.0)(svelte@4.2.0): resolution: {integrity: sha512-Ds+o/C8VtGfph19ccPu2XQnT6Y4TjHd+FNu6T2/9oMjnfCahEpEncumZhmpZZIKDJs1PwgVf912u8BwM2x7vEw==} engines: {node: ^14.17.0 || >=16.0.0} peerDependencies: @@ -5172,8 +5167,8 @@ packages: postcss: 8.4.14 postcss-load-config: 3.1.4(postcss@8.4.14) postcss-safe-parser: 6.0.0(postcss@8.4.14) - svelte: 4.1.2 - svelte-eslint-parser: 0.23.0(svelte@4.1.2) + svelte: 4.2.0 + svelte-eslint-parser: 0.23.0(svelte@4.2.0) transitivePeerDependencies: - supports-color - ts-node @@ -5551,20 +5546,6 @@ packages: - supports-color dev: true - /extract-zip@2.0.1: - resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==} - engines: {node: '>= 10.17.0'} - hasBin: true - dependencies: - debug: 4.3.4(supports-color@9.3.1) - get-stream: 5.2.0 - yauzl: 2.10.0 - optionalDependencies: - '@types/yauzl': 2.10.0 - transitivePeerDependencies: - - supports-color - dev: true - /extract-zip@2.0.1(supports-color@8.1.1): resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==} engines: {node: '>= 10.17.0'} @@ -6243,6 +6224,10 @@ packages: type-fest: 0.20.2 dev: true + /globalyzer@0.1.0: + resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==} + dev: true + /globby@11.1.0: resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==} engines: {node: '>=10'} @@ -6266,6 +6251,10 @@ packages: slash: 4.0.0 dev: true + /globrex@0.1.2: + resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==} + dev: true + /gonzales-pe@4.3.0: resolution: {integrity: sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ==} engines: {node: '>=0.6.0'} @@ -8212,7 +8201,7 @@ packages: execa: 5.1.1 express: 4.18.2 express-logging: 1.1.1 - extract-zip: 2.0.1 + extract-zip: 2.0.1(supports-color@8.1.1) fastest-levenshtein: 1.0.16 fastify: 4.17.0 find-up: 6.3.0 @@ -9228,14 +9217,14 @@ packages: fast-diff: 1.2.0 dev: true - /prettier-plugin-svelte@2.9.0(prettier@2.8.7)(svelte@4.1.2): + /prettier-plugin-svelte@2.9.0(prettier@2.8.7)(svelte@4.2.0): resolution: {integrity: sha512-3doBi5NO4IVgaNPtwewvrgPpqAcvNv0NwJNflr76PIGgi9nf1oguQV1Hpdm9TI2ALIQVn/9iIwLpBO5UcD2Jiw==} peerDependencies: prettier: ^1.16.4 || ^2.0.0 svelte: ^3.2.0 dependencies: prettier: 2.8.7 - svelte: 4.1.2 + svelte: 4.2.0 dev: true /prettier-plugin-tailwindcss@0.2.2(prettier-plugin-svelte@2.9.0)(prettier@2.8.7): @@ -9288,7 +9277,7 @@ packages: optional: true dependencies: prettier: 2.8.7 - prettier-plugin-svelte: 2.9.0(prettier@2.8.7)(svelte@4.1.2) + prettier-plugin-svelte: 2.9.0(prettier@2.8.7)(svelte@4.2.0) dev: true /prettier@2.8.7: @@ -10535,25 +10524,25 @@ packages: engines: {node: '>= 0.4'} dev: true - /svelte-body@1.4.0(svelte@4.1.2): + /svelte-body@1.4.0(svelte@4.2.0): resolution: {integrity: sha512-OCxtAozo/HaS57AZJOoARJHrOabjjhob1sLW8JgG+rrvHY0AZquf2Qcn9PT+jpVh9Y6DVNMMMSB1CZxQk5rrPw==} peerDependencies: svelte: ^3.47.0 || ^4.0.0 dependencies: clsx: 1.2.1 csstype: 3.1.2 - svelte: 4.1.2 + svelte: 4.2.0 dev: true - /svelte-breakpoints@0.2.0(svelte@4.1.2): + /svelte-breakpoints@0.2.0(svelte@4.2.0): resolution: {integrity: sha512-NXNFRjrvYwliIDaArpMYq7roRouiM9XuTmr4my0TeNlZ+dliMnXsyJUGfnUWMj78Kv1srH+utq1Q8yaikT9izg==} peerDependencies: svelte: ^3.5.0 dependencies: - svelte: 4.1.2 + svelte: 4.2.0 dev: true - /svelte-check@3.4.3(postcss-load-config@4.0.1)(postcss@8.4.14)(sass@1.58.3)(svelte@4.1.2): + /svelte-check@3.4.3(postcss-load-config@4.0.1)(postcss@8.4.14)(sass@1.58.3)(svelte@4.2.0): resolution: {integrity: sha512-O07soQFY3X0VDt+bcGc6D5naz0cLtjwnmNP9JsEBPVyMemFEqUhL2OdLqvkl5H/u8Jwm50EiAU4BPRn5iin/kg==} hasBin: true peerDependencies: @@ -10565,8 +10554,8 @@ packages: import-fresh: 3.3.0 picocolors: 1.0.0 sade: 1.8.1 - svelte: 4.1.2 - svelte-preprocess: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.14)(sass@1.58.3)(svelte@4.1.2)(typescript@5.2.2) + svelte: 4.2.0 + svelte-preprocess: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.14)(sass@1.58.3)(svelte@4.2.0)(typescript@5.2.2) typescript: 5.2.2 transitivePeerDependencies: - '@babel/core' @@ -10580,7 +10569,7 @@ packages: - sugarss dev: true - /svelte-eslint-parser@0.23.0(svelte@4.1.2): + /svelte-eslint-parser@0.23.0(svelte@4.2.0): resolution: {integrity: sha512-1BJBYGDzlhxmBvbx0ZXdwfPkEP+9sOn63ei6HgkWNNx/J1LH04Ykw+ZHx9Bf5Rh3zzZqjVvy23vmx+WIjCu7CA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -10589,10 +10578,10 @@ packages: eslint-scope: 7.2.0 eslint-visitor-keys: 3.4.0 espree: 9.5.1 - svelte: 4.1.2 + svelte: 4.2.0 dev: true - /svelte-eslint-parser@0.32.2(svelte@4.1.2): + /svelte-eslint-parser@0.32.2(svelte@4.2.0): resolution: {integrity: sha512-Ok9D3A4b23iLQsONrjqtXtYDu5ZZ/826Blaw2LeFZVTg1pwofKDG4mz3/GYTax8fQ0plRGHI6j+d9VQYy5Lo/A==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -10606,7 +10595,7 @@ packages: espree: 9.5.1 postcss: 8.4.27 postcss-scss: 4.0.6(postcss@8.4.27) - svelte: 4.1.2 + svelte: 4.2.0 dev: true /svelte-highlight@7.3.0: @@ -10615,28 +10604,24 @@ packages: highlight.js: 11.8.0 dev: true - /svelte-hmr@0.15.1(svelte@4.1.2): + /svelte-hmr@0.15.1(svelte@4.2.0): resolution: {integrity: sha512-BiKB4RZ8YSwRKCNVdNxK/GfY+r4Kjgp9jCLEy0DuqAKfmQtpL38cQK3afdpjw4sqSs4PLi3jIPJIFp259NkZtA==} engines: {node: ^12.20 || ^14.13.1 || >= 16} peerDependencies: svelte: '>=3.19.0' dependencies: - svelte: 4.1.2 + svelte: 4.2.0 dev: true - /svelte-loading-spinners@0.1.7: - resolution: {integrity: sha512-EKCId1DjVL2RSUVJJsvtNcqQHox03XIgh4xh/4p7r6ST7d8mut6INY9/LqK4A17PFU64+3quZmqiSfOlf480CA==} - dev: true - - /svelte-maybe-transition@0.1.2(svelte@4.1.2): + /svelte-maybe-transition@0.1.2(svelte@4.2.0): resolution: {integrity: sha512-njmTPrd/+iBwc2i5jS5RyyN+fW7SMKmtCqtWT1y0cDx3eGOLerWe+6fcZ/B9KujVHdBrmBqaH0X1o4Tz1Pidfw==} peerDependencies: svelte: ^3.0.0 dependencies: - svelte: 4.1.2 + svelte: 4.2.0 dev: true - /svelte-preprocess@5.0.4(postcss-load-config@4.0.1)(postcss@8.4.14)(sass@1.58.3)(svelte@4.1.2)(typescript@5.2.2): + /svelte-preprocess@5.0.4(postcss-load-config@4.0.1)(postcss@8.4.14)(sass@1.58.3)(svelte@4.2.0)(typescript@5.2.2): resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==} engines: {node: '>= 14.10.0'} requiresBuild: true @@ -10682,12 +10667,12 @@ packages: sass: 1.58.3 sorcery: 0.11.0 strip-indent: 3.0.0 - svelte: 4.1.2 + svelte: 4.2.0 typescript: 5.2.2 dev: true - /svelte@4.1.2: - resolution: {integrity: sha512-/evA8U6CgOHe5ZD1C1W3va9iJG7mWflcCdghBORJaAhD2JzrVERJty/2gl0pIPrJYBGZwZycH6onYf+64XXF9g==} + /svelte@4.2.0: + resolution: {integrity: sha512-kVsdPjDbLrv74SmLSUzAsBGquMs4MPgWGkGLpH+PjOYnFOziAvENVzgJmyOCV2gntxE32aNm8/sqNKD6LbIpeQ==} engines: {node: '>=16'} dependencies: '@ampproject/remapping': 2.2.1 @@ -10908,6 +10893,13 @@ packages: engines: {node: '>=4'} dev: true + /tiny-glob@0.2.9: + resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==} + dependencies: + globalyzer: 0.1.0 + globrex: 0.1.2 + dev: true + /tiny-lru@11.0.1: resolution: {integrity: sha512-iNgFugVuQgBKrqeO/mpiTTgmBsTP0WL6yeuLfLs/Ctf0pI/ixGqIRm8sDCwMcXGe9WWvt2sGXI5mNqZbValmJg==} engines: {node: '>=12'} @@ -11230,10 +11222,6 @@ packages: random-bytes: 1.0.0 dev: true - /uifx@2.0.7: - resolution: {integrity: sha512-tnPwdYe1dDmsxWJeU84CjDN/rcWOzOcG6tL1bsi5bUXw5nJaq+c4ThsbShMkedX2dAQ5gq1Q5CxQGsxwa5wxfw==} - dev: true - /ulid@2.3.0: resolution: {integrity: sha512-keqHubrlpvT6G2wH0OEfSW4mquYRcbe/J8NMmveoQOjUqmo+hXtO+ORCpWhdbZ7k72UtY61BL7haGxW6enBnjw==} hasBin: true @@ -11246,8 +11234,8 @@ packages: through: 2.3.8 dev: true - /undici@5.22.0: - resolution: {integrity: sha512-fR9RXCc+6Dxav4P9VV/sp5w3eFiSdOjJYsbtWfd4s5L5C4ogyuVpdKIVHeW0vV1MloM65/f7W45nR9ZxwVdyiA==} + /undici@5.23.0: + resolution: {integrity: sha512-1D7w+fvRsqlQ9GscLBwcAJinqcZGHUKjbOmXdlE/v8BvEGXjeWAax+341q44EuTcHXXnfyKNbKRq4Lg7OzhMmg==} engines: {node: '>=14.0'} dependencies: busboy: 1.6.0 diff --git a/svelte-app/src/app.scss b/svelte-app/src/app.scss index 2032d5898..1fb935fa3 100644 --- a/svelte-app/src/app.scss +++ b/svelte-app/src/app.scss @@ -10,11 +10,11 @@ @import 'styles/fonts'; @import 'styles/components/code-block'; -@import 'styles/components/nav'; body, html { height: 100vh; + overflow: hidden; transition: background 150ms ease; } @@ -33,7 +33,7 @@ body { @media (min-width: 0px) { background-color: $dark; } - @media (min-width: 830px) { + @media (min-width: 768px) { background-color: $black; } @@ -43,7 +43,7 @@ body { @media (min-width: 0px) { background-color: $white; } - @media (min-width: 830px) { + @media (min-width: 768px) { background-color: $light; } diff --git a/svelte-app/src/components/about/timeline.svelte b/svelte-app/src/components/about/timeline.svelte index d7a4c6720..b8dc857c3 100644 --- a/svelte-app/src/components/about/timeline.svelte +++ b/svelte-app/src/components/about/timeline.svelte @@ -6,7 +6,7 @@ import { currentLang, t } from '$i18n'; import Settings from '$stores/settings'; - import EmptyContent from '$components/empty-content.svelte'; + import BulletPoint from '$components/bullet-point.svelte'; import Hoverable from '$components/hoverable.svelte'; import Icon from '$components/icon.svelte'; import PortableText from '$components/portable-text/portable-text.svelte'; @@ -17,7 +17,7 @@ let selected: number | null = null; - export let data: AuthorTimelineItem[] | undefined; + export let data: AuthorTimelineItem[]; const dateDisplay = (start: string, end: string | undefined) => { try { @@ -26,33 +26,16 @@ if (!endDate) { return `${new Intl.DateTimeFormat($currentLang, { - month: 'long', + month: 'short', year: 'numeric' - }).format(startDate)} ${$t('to')} ${$t('now')}`; - } - - if (startDate.getFullYear() === endDate.getFullYear()) { - if (startDate.getMonth() === endDate.getMonth()) { - return `${new Intl.DateTimeFormat($currentLang, { - month: 'long', - day: 'numeric' - }).format(startDate)} ${$t('to')} ${new Intl.DateTimeFormat($currentLang, { - day: 'numeric', - year: 'numeric' - }).format(endDate)}`; - } - return `${new Intl.DateTimeFormat($currentLang, { - month: 'long' - }).format(startDate)} ${$t('to')} ${new Intl.DateTimeFormat($currentLang, { - month: 'long' - }).format(endDate)} ${endDate.getFullYear()}`; + }).format(startDate)} - ${$t('present')}`; } return `${new Intl.DateTimeFormat($currentLang, { - month: 'long', + month: 'short', year: 'numeric' - }).format(startDate)} ${$t('to')} ${new Intl.DateTimeFormat($currentLang, { - month: 'long', + }).format(startDate)} - ${new Intl.DateTimeFormat($currentLang, { + month: 'short', year: 'numeric' }).format(endDate)}`; } catch (_) { @@ -60,107 +43,82 @@ } }; - const { reduceMotion } = Settings; + const { reduce_motion } = Settings; -
- {#if data} -
-
- {#each data as item, i} -
- -
-

+
+ {#each data as item, i} + + +
{ + if (item.body) { + selected = selected === i ? null : i; + } + }} + on:keydown={(e) => { + if (item.body && (e.code === 'Enter' || e.code === 'Space')) { + selected = selected === i ? null : i; + } + }} + aria-expanded={selected === i} + tabindex={0} + role="button" + > +
+ +

{dateDisplay(item.range.start, item.range.end)} -

- - +
+

-
{ - if (item.body) { - selected = selected === i ? null : i; - } - }} - on:keydown={(e) => { - if (item.body && (e.code === 'Enter' || e.code === 'Space')) { - selected = selected === i ? null : i; - } - }} - aria-expanded={selected === i} - tabindex={0} - role="button" - > -
- {item.title} -
- {#if item.subtitle} -
- {item.subtitle} -
- {/if} - {#if selected === i && item.body} -
- {#if item.skills} - - {/if} -
- -
-
- {/if} - {#if item.body} - - {/if} -
- - + {item.title} +

+ {#if item.subtitle} + +

{item.subtitle}

+ {/if} +
+ {#if selected === i && item.body} +
+ {#if item.skills} + + {/if} +
+ +
+
+ {/if}
- {/each} -
- {:else} - - {/if} + + + {/each}
diff --git a/svelte-app/src/components/bullet-point.svelte b/svelte-app/src/components/bullet-point.svelte index 5979c0895..e2f1c4d7e 100644 --- a/svelte-app/src/components/bullet-point.svelte +++ b/svelte-app/src/components/bullet-point.svelte @@ -1,3 +1,4 @@
diff --git a/svelte-app/src/components/context-menu/divider.svelte b/svelte-app/src/components/context-menu/divider.svelte index 849419ef6..fa3dc3af3 100644 --- a/svelte-app/src/components/context-menu/divider.svelte +++ b/svelte-app/src/components/context-menu/divider.svelte @@ -3,5 +3,5 @@ diff --git a/svelte-app/src/components/context-menu/menu.svelte b/svelte-app/src/components/context-menu/menu.svelte index 4e68b293e..a4a91a9c4 100644 --- a/svelte-app/src/components/context-menu/menu.svelte +++ b/svelte-app/src/components/context-menu/menu.svelte @@ -64,12 +64,12 @@ diff --git a/svelte-app/src/components/controls/language-controls.svelte b/svelte-app/src/components/controls/language-toggle.svelte similarity index 74% rename from svelte-app/src/components/controls/language-controls.svelte rename to svelte-app/src/components/controls/language-toggle.svelte index af1ce7be5..ac2c8958c 100644 --- a/svelte-app/src/components/controls/language-controls.svelte +++ b/svelte-app/src/components/controls/language-toggle.svelte @@ -1,20 +1,19 @@ - - - -
-
- - {#if hasNavOption} - SFX.click.play()} - on:keydown={(e) => { - if (e.code === 'Enter' || e.code === 'Space') { - SFX.click.play(); - goto(navOption).catch(() => undefined); - } - }} - > - -

- {$t(actionText)} ({navOption}) -

- - {:else} -
- -

- {$t(actionText)} -

-
- {/if} - -
- {#if position === 'top'} -
- {#if $pageHeading && $pageHeading !== ''} - - - - - - {/if} -
-
- - -
- {:else} - - {/if} -
-
- - - - diff --git a/svelte-app/src/components/controls/sounds-toggle.svelte b/svelte-app/src/components/controls/sounds-toggle.svelte deleted file mode 100644 index d900a118a..000000000 --- a/svelte-app/src/components/controls/sounds-toggle.svelte +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - diff --git a/svelte-app/src/components/controls/theme-toggle.svelte b/svelte-app/src/components/controls/theme-toggle.svelte index 4aaa82f3c..77891e616 100644 --- a/svelte-app/src/components/controls/theme-toggle.svelte +++ b/svelte-app/src/components/controls/theme-toggle.svelte @@ -1,6 +1,5 @@
{#each localHeadings as heading} @@ -21,7 +21,7 @@ {#if heading.children?.length} - + {/if} {/each}
diff --git a/svelte-app/src/components/document/content/post/header.svelte b/svelte-app/src/components/document/content/post/header.svelte index 4cc232185..e2326572c 100644 --- a/svelte-app/src/components/document/content/post/header.svelte +++ b/svelte-app/src/components/document/content/post/header.svelte @@ -1,5 +1,4 @@
-
diff --git a/svelte-app/src/components/document/route.svelte b/svelte-app/src/components/document/route.svelte index e9bb1daf1..fd82d6d65 100644 --- a/svelte-app/src/components/document/route.svelte +++ b/svelte-app/src/components/document/route.svelte @@ -1,11 +1,9 @@ -
+
diff --git a/svelte-app/src/components/headings/headed-block.svelte b/svelte-app/src/components/headings/headed-block.svelte index d2635216a..689d40c2e 100644 --- a/svelte-app/src/components/headings/headed-block.svelte +++ b/svelte-app/src/components/headings/headed-block.svelte @@ -1,11 +1,9 @@ -
- +
+

{heading}

diff --git a/svelte-app/src/components/headings/icon-header.svelte b/svelte-app/src/components/headings/icon-header.svelte index dd479cda2..440d6c889 100644 --- a/svelte-app/src/components/headings/icon-header.svelte +++ b/svelte-app/src/components/headings/icon-header.svelte @@ -1,12 +1,10 @@ -
+

{text}

diff --git a/svelte-app/src/components/icon.svelte b/svelte-app/src/components/icon.svelte index ff3c04396..8b3ee6e9e 100644 --- a/svelte-app/src/components/icon.svelte +++ b/svelte-app/src/components/icon.svelte @@ -1,4 +1,5 @@ -
+
{#await icons.get(icon) then svg} {/await} diff --git a/svelte-app/src/components/layouts/content-wrapper.svelte b/svelte-app/src/components/layouts/content-wrapper.svelte index 85b5128a4..3e47ce797 100644 --- a/svelte-app/src/components/layouts/content-wrapper.svelte +++ b/svelte-app/src/components/layouts/content-wrapper.svelte @@ -1,17 +1,15 @@ -{#if fixed} -
- -
-{:else} -
- -
-{/if} +
+ +
diff --git a/svelte-app/src/components/layouts/page-transition.svelte b/svelte-app/src/components/layouts/page-transition.svelte index fe8a80dac..a558078d1 100644 --- a/svelte-app/src/components/layouts/page-transition.svelte +++ b/svelte-app/src/components/layouts/page-transition.svelte @@ -1,5 +1,5 @@
diff --git a/svelte-app/src/components/lists/blog-item.svelte b/svelte-app/src/components/lists/blog-item.svelte deleted file mode 100644 index aef1de5a8..000000000 --- a/svelte-app/src/components/lists/blog-item.svelte +++ /dev/null @@ -1,72 +0,0 @@ - - - - SFX.click.play()} - on:keydown={onKey} - > -

- {post.title} -

-
- {#if date} -

{date}

- - {/if} -

{$t('{length} min read', { length: Math.floor(readingTime / 60) })}

- {#if post.tags?.length} - - - {/if} -
- {#if post.desc} -

- {post.desc} -

- {/if} - - diff --git a/svelte-app/src/components/lists/list-item.svelte b/svelte-app/src/components/lists/list-item.svelte new file mode 100644 index 000000000..7b2889723 --- /dev/null +++ b/svelte-app/src/components/lists/list-item.svelte @@ -0,0 +1,78 @@ + + + + {#if small} + +

+ {formatDate(document.date || document._createdAt, 'med', $currentLang)} +

+

+ {document.title} +

+ + {:else} + +
+

+ {formatDate(document.date || document._createdAt, 'dayMonth', $currentLang)} +

+
+

+ {document.title} +

+ {#if type === 'project' && document.desc} + +

{document.desc}

+ {/if} +
+
+ + {/if} + diff --git a/svelte-app/src/components/lists/project-item.svelte b/svelte-app/src/components/lists/project-item.svelte deleted file mode 100644 index 5658f8c6a..000000000 --- a/svelte-app/src/components/lists/project-item.svelte +++ /dev/null @@ -1,108 +0,0 @@ - - - - -
- -

- {project.title} -

-
-
- {#if project.desc} -

- {project.desc} -

- {/if} -
-
- {#if project.language} -
-   - {project.language} -
- - {/if} -

- {date} -

-
- - diff --git a/svelte-app/src/components/loading/full.svelte b/svelte-app/src/components/loading/full.svelte deleted file mode 100644 index f7cf2a99d..000000000 --- a/svelte-app/src/components/loading/full.svelte +++ /dev/null @@ -1,36 +0,0 @@ - - - - -
- - - - {#if phrase !== ''} -

- {phrase} -

- {/if} -
diff --git a/svelte-app/src/components/nav.svelte b/svelte-app/src/components/nav.svelte index 35f21db78..f22b2b8aa 100644 --- a/svelte-app/src/components/nav.svelte +++ b/svelte-app/src/components/nav.svelte @@ -1,155 +1,87 @@ - - -
+ {#if $navOpen} +
+ {#each navLinks as link, index} + + {/each} +
+ {/if} + diff --git a/svelte-app/src/components/nav/nav-link.svelte b/svelte-app/src/components/nav/nav-link.svelte index b25458f05..54577b29a 100644 --- a/svelte-app/src/components/nav/nav-link.svelte +++ b/svelte-app/src/components/nav/nav-link.svelte @@ -3,47 +3,37 @@ import { goto } from '$app/navigation'; import { navigating, page } from '$app/stores'; - import { currentLang, isLocalized, t } from '$i18n'; - import SFX from '$lib/sfx'; - import { navLinks, navOpen } from '$stores/navigation'; + import { isLocalized, linkTo, t } from '$i18n'; + import { navOpen } from '$stores/navigation'; import Hoverable from '$components/hoverable.svelte'; export let link: { name: string; url: string; - active: boolean; - hovered: boolean; }, + links: { + name: string; + url: string; + }[], index: number, mobile = false, navigatingIsActive = false; let isHovered = false, - isActive = false, - linkEl: HTMLAnchorElement; + isActive = false; - const updateActive = () => { - $navLinks[index].active !== isActive && - navLinks.update((links) => ((links[index].active = isActive), links)); - }, - updateHovered = () => { - $navLinks[index].hovered !== isHovered && - navLinks.update((links) => ((links[index].hovered = isHovered), links)); - }, - handleAction = (e: Event) => { - e.preventDefault(); - if ($page?.url.pathname.slice($isLocalized ? 3 : 0) === link.url) { - return; - } - SFX.click.play(); - if (mobile) { - navOpen.set(false); - } - goto(link.url).catch(() => undefined); - }; + const handleAction = (e: Event) => { + e.preventDefault(); + if ($page?.url.pathname.slice($isLocalized ? 3 : 0) === link.url) { + return; + } + if (mobile) { + navOpen.set(false); + } + goto(link.url).catch(() => undefined); + }; - $: ($navLinks[index].element = linkEl), [$currentLang]; $: splitPath = $page?.url.pathname.split('/') || []; $: truePath = link.url.slice($isLocalized ? 4 : 1); $: (isActive = (() => { @@ -56,21 +46,20 @@ return urlIncludesLink || (splitPath?.length > 1 && splitPath.indexOf(truePath) > 0); })()), navOpen; - $: updateActive(), isActive; - $: updateHovered(), isHovered; {$t(link.name)} - {#if mobile && (isActive || link.hovered)} + {#if mobile && (isActive || isHovered)} {/if} @@ -94,16 +82,13 @@ diff --git a/svelte-app/src/components/nav/nav-social.svelte b/svelte-app/src/components/nav/nav-social.svelte index d79f235b2..2485352d1 100644 --- a/svelte-app/src/components/nav/nav-social.svelte +++ b/svelte-app/src/components/nav/nav-social.svelte @@ -1,6 +1,5 @@ - -
- - {data.title} - - - - LastFM - - - - -
-

- {data.title} -

-

- {data.artist} -

-
-
- - diff --git a/svelte-app/src/components/nav/slider-indicator.svelte b/svelte-app/src/components/nav/slider-indicator.svelte deleted file mode 100644 index 729da0e3c..000000000 --- a/svelte-app/src/components/nav/slider-indicator.svelte +++ /dev/null @@ -1,102 +0,0 @@ - - - - - diff --git a/svelte-app/src/components/portable-text/serializers/custom-heading.svelte b/svelte-app/src/components/portable-text/serializers/custom-heading.svelte index 9e3ab15c5..d31ae4f39 100644 --- a/svelte-app/src/components/portable-text/serializers/custom-heading.svelte +++ b/svelte-app/src/components/portable-text/serializers/custom-heading.svelte @@ -20,7 +20,7 @@ href={`#${value._key}`} > {#if hovered} - + {/if}
diff --git a/svelte-app/src/hooks.server.ts b/svelte-app/src/hooks.server.ts index 2de24ff6d..409aa6bdc 100644 --- a/svelte-app/src/hooks.server.ts +++ b/svelte-app/src/hooks.server.ts @@ -1,24 +1,77 @@ import { APP_LANGS } from '$lib/consts'; -import type { Handle, HandleServerError } from '@sveltejs/kit'; +import type { Handle, HandleServerError, ResolveOptions } from '@sveltejs/kit'; -export const handle = (async ({ event, resolve }): Promise => { - let response: Response; +const replaceTheme = (html: string, theme: string) => { + const classAttrRegexp = /]*?)class="([^"]*?)"/i, + htmlTagRegexp = /]*?)>/i; + + if (classAttrRegexp.test(html)) { + return html.replace(classAttrRegexp, ``); + } + + return html; +}; + +export const handle = (async ({ event, resolve }) => { + const resolveOptions: ResolveOptions = {}, + transforms = [] as Array<(html: string) => string>; + + resolveOptions.filterSerializedResponseHeaders = (name: string, _value: string) => { + switch (name) { + case 'content-type': + return true; + default: + return false; + } + }; const lang = event.request.url.match( - new RegExp(`^.*(?:(?:.[a-z]{3})|(?:[a-z]+:[0-9]{4}))/(${APP_LANGS.join('|')})/?`) - ); + new RegExp(`^.*(?:(?:.[a-z]{3})|(?:[a-z]+:[0-9]{4}))/(${APP_LANGS.join('|')})/?`) + ), + settings = event.cookies.get('settings'); if (lang) { - response = await resolve(event, { - transformPageChunk: ({ html }) => - html.replace(//, ``) - }); - } else { - response = await resolve(event); + transforms.push((html) => + html.replace(//, ``) + ); + } + + let theme = ''; + + if (settings) { + try { + const parsed_settings = JSON.parse( + Buffer.from(settings, 'base64')?.toString?.() || '{}' + ); + + if (Array.isArray(parsed_settings)) { + parsed_settings.forEach(([key, savedSetting]) => { + if (key === 'theme') { + theme = savedSetting; + } + }); + } + } catch (e) { + console.error('Failed while parsing settings cookie from request', e); + } + } + + // Fall back to dark theme + if (!theme || !['light', 'dark'].includes(theme)) { + theme = 'dark'; + } + + transforms.push((html) => replaceTheme(html, theme)); + + if (transforms.length) { + resolveOptions.transformPageChunk = ({ html }) => + transforms.reduce((html, transform) => transform(html), html); } - return response; + return await resolve(event, resolveOptions); }) satisfies Handle; export const handleError = (({ error, event }) => { diff --git a/svelte-app/src/lib/consts.ts b/svelte-app/src/lib/consts.ts index f9178f635..6f098a700 100644 --- a/svelte-app/src/lib/consts.ts +++ b/svelte-app/src/lib/consts.ts @@ -15,12 +15,12 @@ interface AppRoute { export const APP_ROUTES = [ { - name: 'About me', + name: 'Home', path: '/', hidden: false }, { - name: 'Thoughts', + name: 'Blog', path: '/blog', children: [ { name: 'Post', path: '/blog/:slug' }, @@ -30,7 +30,7 @@ export const APP_ROUTES = [ hidden: false }, { - name: 'My work', + name: 'Work', path: '/work', children: [ { name: 'Project', path: '/work/:slug' }, @@ -44,7 +44,7 @@ export const APP_ROUTES = [ hidden: false }, { - name: 'Meta + Contact', + name: 'Meta', path: '/etc', hidden: false } @@ -96,7 +96,7 @@ export const DEFAULT_PROJECT_QUERY_PARAMS = { limit: PAGINATION_PROJECTS_PER_PAGE }; -export const DEFAULT_DESKTOP_WIDTH = 830; +export const DEFAULT_DESKTOP_WIDTH = 768; export const DEFAULT_MOBILE_WIDTH = DEFAULT_DESKTOP_WIDTH - 1; export const DEFAULT_DESKTOP_BREAKPOINT = `(min-width: ${DEFAULT_DESKTOP_WIDTH}px)`; diff --git a/svelte-app/src/lib/env.ts b/svelte-app/src/lib/env.ts index cddaaccad..ce6b7d781 100644 --- a/svelte-app/src/lib/env.ts +++ b/svelte-app/src/lib/env.ts @@ -13,10 +13,6 @@ export const REMOTE_API_BASE_URL = export const REMOTE_API_URL = `${REMOTE_API_BASE_URL}/api/${REMOTE_API_VERSION}`; export const REMOTE_CDN_URL = `${REMOTE_API_BASE_URL}/cdn`; -export const TORU_WS_URL = ['production', 'backed', 'testing'].includes(ENV) - ? 'wss://toru.kio.dev/api/v1/ws/kiosion' - : 'ws://localhost:3333/api/v1/ws/kiosion'; - export const SELF_BASE_URL = (() => { switch (ENV) { case 'backed': diff --git a/svelte-app/src/lib/helpers/date.ts b/svelte-app/src/lib/helpers/date.ts index 645b9040d..7b1cad64e 100644 --- a/svelte-app/src/lib/helpers/date.ts +++ b/svelte-app/src/lib/helpers/date.ts @@ -10,12 +10,13 @@ import { currentLang } from '$i18n'; * @example * formatDate('2020-01-02', 'full') // January 2, 2020 * formatDate('2020-01-02', 'med') // Jan, 2020 + * formatDate('2020-01-02', 'dayMonth') // 2 Jan * formatDate('2020-01-02', 'short') // 1/2/20 * formatDate('2020-01-02', 'rel') // 1 year ago */ export const formatDate = ( dateStr: string, - format: 'huge' | 'full' | 'med' | 'short' | 'rel' = 'full', + format: 'huge' | 'full' | 'med' | 'short' | 'dayMonth' | 'rel' = 'full', lang: string = get(currentLang) || 'en' ) => { const date = new Date(dateStr); @@ -37,6 +38,11 @@ export const formatDate = ( day: 'numeric', year: '2-digit' }).format(date); + case 'dayMonth': + return new Intl.DateTimeFormat(lang, { + month: 'short', + day: 'numeric' + }).format(date); case 'rel': { const rtf = new Intl.RelativeTimeFormat(lang, { numeric: 'auto' @@ -71,3 +77,33 @@ export const formatDate = ( */ export const getReadingTime = (words: number): number => Math.ceil(words ?? 0 / (100 / 60)); + +export const sortDocumentsByYear = ( + documents: T[] +) => { + const _years = + documents.reduce((acc, doc) => { + const year = new Date(doc.date || doc._createdAt).getFullYear(); + + if (!acc[year]) { + acc[year] = [doc]; + } else { + acc[year].push(doc); + } + + return acc; + }, {} as Record>) || {}; + + return Object.keys(_years) + .sort((a, b) => parseInt(b, 10) - parseInt(a, 10)) + .map((year) => { + return { + year: parseInt(year, 10), + items: _years[year].sort((a, b) => { + const aDate = new Date(a.date || a._createdAt); + const bDate = new Date(b.date || b._createdAt); + return bDate.getTime() - aDate.getTime(); + }) + }; + }); +}; diff --git a/svelte-app/src/lib/helpers/i18n.ts b/svelte-app/src/lib/helpers/i18n.ts index 76818f981..b3312e614 100644 --- a/svelte-app/src/lib/helpers/i18n.ts +++ b/svelte-app/src/lib/helpers/i18n.ts @@ -66,7 +66,13 @@ const _translate = (key: string, params?: Record): string => { }; const string = getKey(lang || DEFAULT_APP_LANG, key as keyof typeof EN); - return string ? replaceParams(string) : notFound(key, lang || DEFAULT_APP_LANG); + + if (string) { + return replaceParams(string); + } else { + notFound(key, lang || DEFAULT_APP_LANG); + return replaceParams(key); + } }; // eslint-disable-next-line func-call-spacing diff --git a/svelte-app/src/lib/helpers/navigation.ts b/svelte-app/src/lib/helpers/navigation.ts index 43a0fc255..ed81fbc4f 100644 --- a/svelte-app/src/lib/helpers/navigation.ts +++ b/svelte-app/src/lib/helpers/navigation.ts @@ -1,48 +1,7 @@ import { get } from 'svelte/store'; -import { isLocalized, t } from '$i18n'; -import { ROUTE_ORDER, TOP_LEVEL_ROUTES } from '$lib/consts'; -import { navOptions, pageHeading } from '$stores/navigation'; - -export const setupNavigation = (route: string): void => { - get(isLocalized) === true && - (route = route.slice(3).startsWith('/') ? route.slice(3) : `/${route.slice(3)}`); - - if (!route || route === '') { - navOptions.set({ down: '', up: '' }); - pageHeading.set(''); - return; - } - - const index = TOP_LEVEL_ROUTES.findIndex((r) => r.path === route); - - switch (index) { - case -1: - navOptions.set({ down: '', up: '' }); - pageHeading.set(''); - return; - case 0: - navOptions.set({ - down: TOP_LEVEL_ROUTES[index + 1].path, - up: '' - }); - pageHeading.set(''); - return; - case TOP_LEVEL_ROUTES.length - 1: - navOptions.set({ - down: '', - up: TOP_LEVEL_ROUTES[index - 1].path - }); - break; - default: - navOptions.set({ - down: TOP_LEVEL_ROUTES[index + 1].path, - up: TOP_LEVEL_ROUTES[index - 1].path - }); - break; - } - pageHeading.set(`kio.dev | ${get(t)(TOP_LEVEL_ROUTES[index].name)}`); -}; +import { isLocalized } from '$i18n'; +import { ROUTE_ORDER } from '$lib/consts'; let prevPath: string; diff --git a/svelte-app/src/lib/helpers/toru.ts b/svelte-app/src/lib/helpers/toru.ts deleted file mode 100644 index d38fc523c..000000000 --- a/svelte-app/src/lib/helpers/toru.ts +++ /dev/null @@ -1,96 +0,0 @@ -import { browser } from '$app/environment'; -import { TORU_WS_URL } from '$lib/env'; -import Logger from '$lib/logger'; -import { nowPlayingData } from '$stores/navigation'; - -type ToruData = { - title: string; - playing: boolean; - cover_art: { - mime_type: string; - data: string; - }; - artist: string; - album: string; -}; - -type ToruResponse = string | unknown; - -let socketInstance: WebSocket | undefined, - repeat: number | NodeJS.Timer | undefined, - retries = 0; - -const interval = 36_000; - -const init = () => { - if (!browser) { - return; - } - - if (socketInstance && socketInstance.readyState === WebSocket.OPEN) { - return; - } - - socketInstance = new WebSocket(TORU_WS_URL); - - socketInstance.addEventListener('open', () => { - Logger.info('[ToruSync] Connected'); - - retries = 0; - }); - - socketInstance.addEventListener('message', (event: MessageEvent) => { - if (!event.data || event.data === 'pong') { - return; - } - - try { - const res = JSON.parse(event.data as string) as ToruData; - - Logger.info('[ToruSync] Got update:', {}, res); - - if (res.title || res.album || res.artist) { - nowPlayingData.set(res); - } - } catch (err) { - Logger.error('[ToruSync] Failed to parse message:', {}, err as Error); - } - }); - - socketInstance.addEventListener('close', () => { - Logger.info('[ToruSync] Disconnected'); - - stop(); - - if (retries < 4) { - retries += 1; - setTimeout(() => { - init(); - }, retries * 1000); - } - }); - - repeat = setInterval(() => { - if (socketInstance && socketInstance.readyState === WebSocket.OPEN) { - socketInstance.send('ping'); - } - }, interval); -}; - -const stop = () => { - if (!browser || !socketInstance) { - return; - } - - if (repeat) { - clearInterval(repeat); - } - - if (socketInstance.readyState !== WebSocket.CLOSED) { - socketInstance.close(); - } -}; - -export default { init, stop }; - -export type { ToruData as Data }; diff --git a/svelte-app/src/lib/icons.ts b/svelte-app/src/lib/icons.ts index 9d1bfb101..41dd257e6 100644 --- a/svelte-app/src/lib/icons.ts +++ b/svelte-app/src/lib/icons.ts @@ -24,12 +24,10 @@ const iconProxy = new Proxy( get: (target, prop) => { switch (prop) { case 'get': { - return async (iconName: string) => { + return (iconName: string) => { iconName = transformName(iconName); if (!target.has(iconName)) { - const icon = await import( - `../../node_modules/pixelarticons/svg/${iconName}.svg` - ) + return import(`../../node_modules/pixelarticons/svg/${iconName}.svg`) .then((res: { default: PixelIcon } | undefined) => { if (!res) { Logger.error(`Icon ${iconName} not found`); @@ -39,7 +37,6 @@ const iconProxy = new Proxy( return res.default; }) .catch(() => target.get('alert')); - return icon; } return target.get(iconName); }; @@ -50,6 +47,8 @@ const iconProxy = new Proxy( } } } -); +) as unknown as { + get: (iconName: string) => PixelIcon; +}; export default iconProxy; diff --git a/svelte-app/src/lib/sfx/index.ts b/svelte-app/src/lib/sfx/index.ts deleted file mode 100644 index e1ead2197..000000000 --- a/svelte-app/src/lib/sfx/index.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { get } from 'svelte/store'; - -import { browser } from '$app/environment'; -import Settings from '$stores/settings'; - -const imports = new Map>([ - ['click', import('./interface-click.wav')], - ['ping', import('./interface-error.wav')] -]); - -const sounds = new Map(); - -const init = async (opts?: { volume: number }): Promise => { - if (!browser) { - return; - } - - for (const [name, file] of imports.entries()) { - const src = (await file)?.default; - - if (!src) { - continue; - } - - const audio = new Audio(); - audio.src = src; - audio.preload = 'auto'; - audio.volume = opts?.volume ?? 0.5; - sounds.set(name, audio); - } -}; - -const soundsProxy = new Proxy(sounds, { - get: (target, prop: string) => { - if (!browser || !get(Settings.sounds) || !target.has(prop)) { - return { - play: () => undefined - }; - } - - const source = target.get(prop), - clone = source?.cloneNode(true) as HTMLAudioElement; - - clone.volume = source?.volume || 1; - clone.preload = 'auto'; - clone.load(); - - return clone; - } -}) as unknown as { [key: string]: { play: (volume?: number) => void } }; - -export { soundsProxy as default, init }; diff --git a/svelte-app/src/lib/sfx/interface-click.wav b/svelte-app/src/lib/sfx/interface-click.wav deleted file mode 100644 index 2183344a2..000000000 Binary files a/svelte-app/src/lib/sfx/interface-click.wav and /dev/null differ diff --git a/svelte-app/src/lib/sfx/interface-error.wav b/svelte-app/src/lib/sfx/interface-error.wav deleted file mode 100644 index f2786d475..000000000 Binary files a/svelte-app/src/lib/sfx/interface-error.wav and /dev/null differ diff --git a/svelte-app/src/lib/sfx/interface-option-select.wav b/svelte-app/src/lib/sfx/interface-option-select.wav deleted file mode 100644 index f118ac5d8..000000000 Binary files a/svelte-app/src/lib/sfx/interface-option-select.wav and /dev/null differ diff --git a/svelte-app/src/routes/+error.svelte b/svelte-app/src/routes/+error.svelte index 6253622f8..5331cbcc7 100644 --- a/svelte-app/src/routes/+error.svelte +++ b/svelte-app/src/routes/+error.svelte @@ -1,19 +1,11 @@ - - - + diff --git a/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte index fdc86618a..af30be3d3 100644 --- a/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte +++ b/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte @@ -1,38 +1,17 @@ @@ -50,16 +29,22 @@ -{#if pinned} - - -{/if} - - +

{$t('Recent posts')}

{#if posts?.length} -
- {#each posts as post} - +
+ {#each sortedPosts as yearObj} +
+

{yearObj.year}

+ {#if yearObj.items.length} +
+ {#each yearObj.items as item} + + {/each} +
+ {:else} +

{$t('No content')}

+ {/if} +
{/each}
{:else} diff --git a/svelte-app/src/routes/[[lang=lang]]/blog/+page.ts b/svelte-app/src/routes/[[lang=lang]]/blog/+page.ts index 84d9916f2..3454aa33a 100644 --- a/svelte-app/src/routes/[[lang=lang]]/blog/+page.ts +++ b/svelte-app/src/routes/[[lang=lang]]/blog/+page.ts @@ -1,38 +1,18 @@ import { RECENT_POSTS_COUNT } from '$lib/consts'; import { ENV } from '$lib/env'; -import { find, findOne } from '$lib/store'; +import { find } from '$lib/store'; import type { PageLoad } from './$types'; -import type { PostDocument } from '$types'; export const ssr = !(ENV === 'testing'); export const load: PageLoad = async ({ parent, fetch, params }) => { - const parentData = await parent(), - currentConfig = parentData.config; + const parentData = await parent(); - const promiseArray = []; + const posts = await find(fetch, 'post', { + limit: RECENT_POSTS_COUNT, + lang: params.lang ?? 'en' + }); - promiseArray.push( - find(fetch, 'post', { - limit: RECENT_POSTS_COUNT, - lang: params.lang ?? 'en' - }) - ); - - if (currentConfig?.pinnedPost?._ref) { - promiseArray.push( - findOne(fetch, 'post', { - id: currentConfig.pinnedPost._ref, - lang: params.lang ?? 'en' - }) - ); - } - - const [posts, pinned] = (await Promise.all(promiseArray)) as [ - PostDocument[] | undefined, - PostDocument | undefined - ]; - - return { posts, pinned }; + return { posts }; }; diff --git a/svelte-app/src/routes/[[lang=lang]]/blog/[plus=plus]/[slug]/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/blog/[plus=plus]/[slug]/+page.svelte index 2e29d04a4..66b7b65a5 100644 --- a/svelte-app/src/routes/[[lang=lang]]/blog/[plus=plus]/[slug]/+page.svelte +++ b/svelte-app/src/routes/[[lang=lang]]/blog/[plus=plus]/[slug]/+page.svelte @@ -1,19 +1,13 @@ @@ -22,15 +16,17 @@ - -{#if posts?.length} -
- {#each posts as post} - +

+ {$t("Recent '{tag}' posts", { tag: pageTitle })} +

+{#if data.posts?.length} +
+ {#each data.posts as post} + {/each}
{:else} -
+
{/if} diff --git a/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte index c790f0be3..a13c5e610 100644 --- a/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte +++ b/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte @@ -1,10 +1,7 @@ - + diff --git a/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte index ba7c34b3f..5c9c3052d 100644 --- a/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte +++ b/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte @@ -1,30 +1,21 @@ @@ -41,31 +32,35 @@ - -
- -
- - -{#if pinned} -
- +

{$t("Where I've worked")}

+{#if about?.timeline?.length} + +{:else} +
+
- - {/if} + +

{$t('Projects & Talks')}

{#if projects?.length} -
- {#each projects as project} - {#if project._id !== pinned?._id} - - {/if} +
+ {#each sortedProjects as yearObj} +
+

{yearObj.year}

+ {#if yearObj.items.length} +
+ {#each yearObj.items as item} + + {/each} +
+ {:else} +

{$t('No content')}

+ {/if} +
{/each}
{:else} -
+
{/if} diff --git a/svelte-app/src/routes/[[lang=lang]]/work/+page.ts b/svelte-app/src/routes/[[lang=lang]]/work/+page.ts index 44af84bba..6d17d0682 100644 --- a/svelte-app/src/routes/[[lang=lang]]/work/+page.ts +++ b/svelte-app/src/routes/[[lang=lang]]/work/+page.ts @@ -6,8 +6,7 @@ import type { AuthorDocument, ProjectDocument } from '$types'; export const load: PageLoad = async ({ parent, fetch, params }) => { const parentData = await parent(), - aboutData = parentData.author, - currentConfig = parentData.config; + aboutData = parentData.author; const promiseArray = []; @@ -29,20 +28,10 @@ export const load: PageLoad = async ({ parent, fetch, params }) => { }) ); - if (currentConfig?.pinnedProject?._ref) { - promiseArray.push( - findOne(fetch, 'project', { - id: currentConfig.pinnedProject._ref, - lang: params.lang ?? 'en' - }) - ); - } - - const [about, projects, pinned] = (await Promise.all(promiseArray)) as [ + const [about, projects] = (await Promise.all(promiseArray)) as [ AuthorDocument | undefined, - ProjectDocument[] | undefined, - ProjectDocument | undefined + ProjectDocument[] | undefined ]; - return { about, pinned, projects }; + return { about, projects }; }; diff --git a/svelte-app/src/routes/[[lang=lang]]/work/[plus=plus]/[slug]/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/work/[plus=plus]/[slug]/+page.svelte index f5ca0171d..f42011cd1 100644 --- a/svelte-app/src/routes/[[lang=lang]]/work/[plus=plus]/[slug]/+page.svelte +++ b/svelte-app/src/routes/[[lang=lang]]/work/[plus=plus]/[slug]/+page.svelte @@ -1,21 +1,11 @@ @@ -24,13 +14,13 @@ - -{#if projects?.length} -
- {#each projects as project} - +

+ {$t("Recent '{tag}' projects", { tag: pageTitle })} +

+{#if $page.data.projects?.length} +
+ {#each $page.data.projects as project} + {/each}
{:else} diff --git a/svelte-app/src/stores/navigation.ts b/svelte-app/src/stores/navigation.ts index 0af32c782..85db03056 100644 --- a/svelte-app/src/stores/navigation.ts +++ b/svelte-app/src/stores/navigation.ts @@ -1,23 +1,5 @@ import { writable } from 'svelte/store'; -import type { Data } from '$helpers/toru'; - const navOpen = writable(false); -const navOptions = writable({ down: '', up: '' }); - -const pageHeading = writable(''); - -const nowPlayingData = writable(undefined); - -const navLinks = writable< - { - name: string; - url: string; - active: boolean; - hovered: boolean; - element?: HTMLAnchorElement; - }[] ->([]); - -export { navLinks, navOpen, navOptions, nowPlayingData, pageHeading }; +export { navOpen }; diff --git a/svelte-app/src/styles/components/_code-block.scss b/svelte-app/src/styles/components/_code-block.scss index 30ce061ef..229c202a0 100644 --- a/svelte-app/src/styles/components/_code-block.scss +++ b/svelte-app/src/styles/components/_code-block.scss @@ -27,7 +27,7 @@ } .codeBlock--copyButton { - @apply absolute top-0 right-0 z-10 cursor-pointer rounded-sm p-4 text-dark/60 opacity-0 transition-opacity duration-150; + @apply absolute top-0 right-0 z-[1] cursor-pointer rounded-sm p-4 text-dark/60 opacity-0 transition-opacity duration-150; &:hover { @apply text-dark; diff --git a/svelte-app/src/styles/components/_nav.scss b/svelte-app/src/styles/components/_nav.scss deleted file mode 100644 index 113beee20..000000000 --- a/svelte-app/src/styles/components/_nav.scss +++ /dev/null @@ -1,40 +0,0 @@ -.nav-desktop { - @apply my-8 flex w-fit flex-col border-r border-dark/40; - - .nav-inner { - @apply flex w-56 flex-1 flex-col justify-between; - } - - .logo-container { - @apply mx-auto -mt-2 mb-5 w-48; - - img { - @apply h-full py-4 px-9; - filter: url(#distortion); - } - } - .border-line { - @apply inline-block bg-dark/40; - height: 1px; - width: calc(100% + 2.25rem); - } - .links-container { - @apply mx-9 flex flex-col; - - .links-inner { - @apply flex flex-row flex-wrap items-center justify-center; - } - } -} - -.dark { - .nav-desktop { - @apply border-light/40; - } - .border-line { - @apply bg-light/40; - } - .logo-container { - @apply invert; - } -} diff --git a/svelte-app/test/components/loader.test.skip.ts b/svelte-app/test/components/loader.test.skip.ts deleted file mode 100644 index 962109dfb..000000000 --- a/svelte-app/test/components/loader.test.skip.ts +++ /dev/null @@ -1,92 +0,0 @@ -import { describe, expect, it } from 'vitest'; -import { render } from '@testing-library/svelte'; -import Loader from '../../src/components/loading/full.svelte'; - -describe('Components | Loader | Full', () => { - it('should render', () => { - const { container } = render(Loader); - expect(container).toBeTruthy(); - }); - - it('should contain svg', () => { - const { container } = render(Loader); - - expect(container.querySelector('div span')).toBeTruthy(); - expect(container.querySelectorAll('span div').length).toBe(3); - }); - - it('should render with default size', () => { - const { container } = render(Loader); - const style = (container.querySelector('div span') as HTMLSpanElement) - ?.style; - expect(style).toBeTruthy(); - - expect( - style.cssText - .split(';') - .filter((item) => item.includes('size'))[0] - .split(':')[1] - .trim() - ).toContain('38px'); - }); - - it('should render with default props', () => { - const { container } = render(Loader); - const style = (container.querySelector('div span') as HTMLSpanElement) - ?.style; - expect(style).toBeTruthy(); - - let styles = {} as Record; - style.cssText.split(';').forEach((item) => { - item.split(':')[0] !== '' && - (styles = { - ...styles, - [item.split(':')[0].trim()]: item.split(':')[1].trim() - }); - }); - - expect(Object.keys(styles).length).toBe(3); - - const expected = { - '--size': '38px', - '--color': '#1E293B', - '--duration': '1.5s' - } as Record; - - for (const key in expected) { - expect(styles[key]).toBeTruthy(); - expect(styles[key]).toBe(expected[key]); - } - }); - - it('should render with dark theme provided', () => { - const { container } = render(Loader, { - props: { theme: 'dark' } - }); - const style = (container.querySelector('div span') as HTMLSpanElement) - ?.style; - expect(style).toBeTruthy(); - - let styles = {} as Record; - style.cssText.split(';').forEach((item) => { - item.split(':')[0] !== '' && - (styles = { - ...styles, - [item.split(':')[0].trim()]: item.split(':')[1].trim() - }); - }); - - expect(Object.keys(styles).length).toBe(3); - - const expected = { - '--size': '38px', - '--color': '#F1F5F9', - '--duration': '1.5s' - } as Record; - - for (const key in expected) { - expect(styles[key]).toBeTruthy(); - expect(styles[key]).toBe(expected[key]); - } - }); -}); diff --git a/svelte-app/test/components/nav.test.skip.ts b/svelte-app/test/components/nav.test.skip.ts deleted file mode 100644 index e9db82f2a..000000000 --- a/svelte-app/test/components/nav.test.skip.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { describe, expect, it } from 'vitest'; -import { render } from '@testing-library/svelte'; -import Nav from '../../src/components/nav.svelte'; - -describe.skip('Components | Nav', () => { - it.skip('should render', () => { - const { container } = render(Nav); - expect(container).toBeTruthy(); - }); - - it.skip('should contain correct links', () => { - const { container } = render(Nav); - - const expectedLinks = ['Blog', 'Work', 'About']; - - expectedLinks.forEach((item) => { - expect(container.querySelector(`a[aria-label="${item}"]`)).toBeTruthy(); - }); - - const expectedSocials = [ - 'twitter.com/0xKI0', - 'github.com/kiosion', - 'discord.gg/kiosion' - ]; - - expectedSocials.forEach((item) => { - expect(container.querySelector(`a[href="https://${item}"]`)).toBeTruthy(); - }); - }); -}); diff --git a/svelte-app/types/app/documents/post.d.ts b/svelte-app/types/app/documents/post.d.ts index d51009be1..b5fc6501f 100644 --- a/svelte-app/types/app/documents/post.d.ts +++ b/svelte-app/types/app/documents/post.d.ts @@ -2,6 +2,7 @@ import type { Document, DocumentHeadings, DocumentTags } from '$types/documents' import type { SanityAsset, SanityImageObject } from '$types/sanity'; export interface PostDocument extends Document { + _type: 'post'; author?: Pick & { name: string; image: SanityImageObject; diff --git a/svelte-app/types/app/documents/project.d.ts b/svelte-app/types/app/documents/project.d.ts index 993d9e5ff..ea091c4e4 100644 --- a/svelte-app/types/app/documents/project.d.ts +++ b/svelte-app/types/app/documents/project.d.ts @@ -2,6 +2,7 @@ import type { Document, DocumentHeadings, DocumentTags } from '$types/documents' import type { SanityAsset, SanityImageObject } from '$types/sanity'; export interface ProjectDocument extends Document { + _type: 'project'; author?: { _id: string; _type: string; diff --git a/svelte-app/types/app/sanity/index.d.ts b/svelte-app/types/app/sanity/index.d.ts index 664f2deca..16db07334 100644 --- a/svelte-app/types/app/sanity/index.d.ts +++ b/svelte-app/types/app/sanity/index.d.ts @@ -1,15 +1,12 @@ export type { InputValue } from '@portabletext/svelte/ptTypes'; -export type { - PortableTextBlock, - ArbitraryTypedObject -} from '@portabletext/types'; +export type { ArbitraryTypedObject, PortableTextBlock } from '@portabletext/types'; export interface SanityAsset { _id: string; - _type?: string; - _createdAt?: string; - _rev?: string; - _updatedAt?: string; + _type: string; + _createdAt: string; + _rev: string; + _updatedAt: string; url?: string; path?: string; assetId?: string;