From 757eb762c8a5acd646bc4e6c78ea585296f7fd17 Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Tue, 29 Apr 2025 18:30:11 -0700 Subject: [PATCH] Removing nprogress and replace with transition on SvelteKit navigate. Fix some postcss items. --- package.json | 3 +- pnpm-lock.yaml | 19 +---- postcss.config.cjs | 13 ++++ src/app.d.ts | 19 +++-- src/lib/api.ts | 2 +- src/lib/util/page_loading_indicator.svelte | 55 +++++++++++++++ src/routes/+layout.svelte | 82 ++++++++++------------ src/routes/+page.svelte | 2 +- src/routes/api/bandcamp/albums/+server.ts | 2 +- src/styles/styles.pcss | 1 - svelte.config.js | 3 +- vite.config.ts | 15 ---- 12 files changed, 125 insertions(+), 91 deletions(-) create mode 100644 src/lib/util/page_loading_indicator.svelte diff --git a/package.json b/package.json index 2b8ee32..9a1a6c9 100644 --- a/package.json +++ b/package.json @@ -22,12 +22,12 @@ "@sveltejs/enhanced-img": "^0.4.4", "@sveltejs/kit": "^2.20.7", "@sveltejs/vite-plugin-svelte": "^5.0.3", - "@types/nprogress": "^0.2.3", "@unpic/svelte": "^1.0.0", "@zerodevx/svelte-img": "^2.1.2", "autoprefixer": "^10.4.21", "just-intersect": "^4.3.0", "postcss": "^8.5.3", + "postcss-custom-media": "^11.0.5", "postcss-import": "^16.1.0", "postcss-load-config": "^6.0.1", "postcss-preset-env": "^10.1.6", @@ -53,7 +53,6 @@ "flexsearch": "^0.8.158", "ioredis": "^5.6.1", "lucide-svelte": "^0.503.0", - "nprogress": "^0.2.0", "scrape-it": "^6.1.5", "sharp": "^0.34.1", "svelte-local-storage-store": "^0.6.4" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1501abd..d9c7738 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,9 +29,6 @@ importers: lucide-svelte: specifier: ^0.503.0 version: 0.503.0(svelte@5.28.2) - nprogress: - specifier: ^0.2.0 - version: 0.2.0 scrape-it: specifier: ^6.1.5 version: 6.1.5 @@ -57,9 +54,6 @@ importers: '@sveltejs/vite-plugin-svelte': specifier: ^5.0.3 version: 5.0.3(svelte@5.28.2)(vite@6.3.3(yaml@2.7.0)) - '@types/nprogress': - specifier: ^0.2.3 - version: 0.2.3 '@unpic/svelte': specifier: ^1.0.0 version: 1.0.0(svelte@5.28.2) @@ -75,6 +69,9 @@ importers: postcss: specifier: ^8.5.3 version: 8.5.3 + postcss-custom-media: + specifier: ^11.0.5 + version: 11.0.5(postcss@8.5.3) postcss-import: specifier: ^16.1.0 version: 16.1.0(postcss@8.5.3) @@ -1215,9 +1212,6 @@ packages: '@types/estree@1.0.7': resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==} - '@types/nprogress@0.2.3': - resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==} - '@types/resolve@1.20.2': resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==} @@ -1779,9 +1773,6 @@ packages: resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} engines: {node: '>=0.10.0'} - nprogress@0.2.0: - resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==} - nth-check@2.1.1: resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} @@ -3263,8 +3254,6 @@ snapshots: '@types/estree@1.0.7': {} - '@types/nprogress@0.2.3': {} - '@types/resolve@1.20.2': {} '@unpic/core@1.0.1': @@ -3834,8 +3823,6 @@ snapshots: normalize-range@0.1.2: {} - nprogress@0.2.0: {} - nth-check@2.1.1: dependencies: boolbase: 1.0.0 diff --git a/postcss.config.cjs b/postcss.config.cjs index 89840af..693132a 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -1,5 +1,6 @@ const postcssPresetEnv = require('postcss-preset-env'); const atImport = require('postcss-import'); +const postCssCustomMedia = require('postcss-custom-media'); const config = { plugins: [ @@ -11,6 +12,18 @@ const config = { 'custom-media-queries': true, 'media-query-ranges': true } + }), + postCssCustomMedia({ + customMedia: { + '--below_small': '(width < 400px)', + '--below_med': '(width < 700px)', + '--below_large': '(width < 900px)', + '--below_xlarge': '(width < 1200px)', + '--above_small': '(width > 400px)', + '--above_med': '(width > 700px)', + '--above_large': '(width > 900px)', + '--above_xlarge': '(width > 1200px)', + } }) ] }; diff --git a/src/app.d.ts b/src/app.d.ts index f59b884..70cf0bf 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -1,12 +1,19 @@ // See https://kit.svelte.dev/docs/types#app // for information about these interfaces declare global { - namespace App { - // interface Error {} - // interface Locals {} - // interface PageData {} - // interface Platform {} - } + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface Platform {} + interface Document { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + // biome-ignore lint/suspicious/noExplicitAny: + startViewTransition: (callback: never) => void; // Add your custom property/method here + } + } } +// biome-ignore lint/complexity/noUselessEmptyExport: +// biome-ignore lint/style/useExportType: export {}; diff --git a/src/lib/api.ts b/src/lib/api.ts index b0967a9..c3186c5 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -14,7 +14,7 @@ import type { WallabagArticle, } from "$lib/types/article"; import { ArticleTag } from "$lib/types/articleTag"; -import type { PageQuery } from "$lib/types/pageQuery"; +import type { PageQuery } from "./types/pageQuery"; import { URLSearchParams } from "node:url"; import { redis } from "$lib/server/redis"; diff --git a/src/lib/util/page_loading_indicator.svelte b/src/lib/util/page_loading_indicator.svelte new file mode 100644 index 0000000..716316f --- /dev/null +++ b/src/lib/util/page_loading_indicator.svelte @@ -0,0 +1,55 @@ + + +{#if visible} +
+{/if} + + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index bc5dcc9..933350b 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,51 +1,50 @@ -{#if !dev} +{#if production} {/if} +
@@ -77,24 +76,15 @@ box-sizing: border-box; } - :global(#nprogress .bar) { - background: var(--lightGrey); + :global(p) { + word-wrap: normal; + font-size: var(--bodyTextSize); + color: var(--lightShade); } - :global(#nprogress .spinner-icon) { - border-top-color: var(--lightGrey); - border-left-color: var(--lightGrey); - } - - :global(p) { - word-wrap: normal; - font-size: var(--bodyTextSize); - color: var(--lightShade); - } - :global(li) { - word-wrap: normal; - font-size: var(--bodyTextSize); - color: var(--lightShade); + word-wrap: normal; + font-size: var(--bodyTextSize); + color: var(--lightShade); } - \ No newline at end of file + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 492c6de..51934b5 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -14,7 +14,7 @@ let totalArticles: number = $derived(articlesData.totalArticles); const userNames = { github: 'BradNut', linkedIn: 'bradley-shellnut', - email: 'bradleyshellnut@pm.me', + email: 'website@bradleyshellnut.com', }; diff --git a/src/routes/api/bandcamp/albums/+server.ts b/src/routes/api/bandcamp/albums/+server.ts index abb7c82..e767428 100644 --- a/src/routes/api/bandcamp/albums/+server.ts +++ b/src/routes/api/bandcamp/albums/+server.ts @@ -1,7 +1,7 @@ import { json, error } from '@sveltejs/kit'; import { BANDCAMP_USERNAME, PAGE_SIZE, USE_REDIS_CACHE } from '$env/static/private'; import { fetchArticlesApi } from '$lib/api'; -import { redis } from '$root/lib/server/redis'; +import { redis } from '$lib/server/redis'; import type { Album, BandCampResults } from '$lib/types/album'; import scrapeIt, { type ScrapeResult } from 'scrape-it'; diff --git a/src/styles/styles.pcss b/src/styles/styles.pcss index f839209..73cc27d 100644 --- a/src/styles/styles.pcss +++ b/src/styles/styles.pcss @@ -1,4 +1,3 @@ @import 'reset.pcss'; @import 'global.pcss'; -/* @import '$root/styles/theme.pcss'; */ @import 'typeography.pcss'; diff --git a/svelte.config.js b/svelte.config.js index 7ec8580..3326133 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -14,8 +14,7 @@ const config = { kit: { adapter: adapter(), alias: { - $lib: './src/lib', - $root: './src' + $: './src', } }, compilerOptions: { diff --git a/vite.config.ts b/vite.config.ts index 278db5f..ee7976d 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -24,20 +24,5 @@ export default defineConfig({ }, css: { devSourcemap: true, - preprocessorOptions: { - postcss: { - additionalData: ` - @custom-media --below_small (width < 400px); - @custom-media --below_med (width < 700px); - @custom-media --below_large (width < 900px); - @custom-media --below_xlarge (width < 1200px); - - @custom-media --above_small (width > 400px); - @custom-media --above_med (width > 700px); - @custom-media --above_large (width > 900px); - @custom-media --above_xlarge (width > 1200px); - `, - }, - }, }, });