From 20de6e7133a0af4d93822c8cf62b9d94a6cf3670 Mon Sep 17 00:00:00 2001 From: kevin Date: Fri, 13 Dec 2024 01:06:50 +0000 Subject: [PATCH 01/11] Migrate to SvelteKit 2 --- package.json | 11 ++++++----- .../(blog)/author/[slug]/[[page]]/+page.server.ts | 4 ++-- .../(blog)/feeds/[topic].[format]/+server.ts | 6 +++--- src/routes/(frontend)/(blog)/read/+page.server.ts | 2 +- .../(blog)/read/[year]/[slug]/+page.server.ts | 4 ++-- .../read/[year]/[slug]/comments/+page.server.ts | 4 ++-- .../(blog)/read/preview/[id]/+page.server.ts | 2 +- .../(blog)/tag/[topic]/[[page]]/+page.server.ts | 4 ++-- src/routes/(frontend)/(page)/[slug]/+page.server.ts | 4 ++-- 9 files changed, 21 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index 9782f33..41db693 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,9 @@ "format": "prettier --plugin-search-dir . --write ." }, "devDependencies": { - "@sveltejs/adapter-auto": "^2.0.0", - "@sveltejs/kit": "^1.20.4", + "@sveltejs/adapter-auto": "^3.0.0", + "@sveltejs/kit": "^2.0.0", + "@sveltejs/vite-plugin-svelte": "^3.0.0", "@types/animejs": "^3.1.7", "@types/howler": "^2.2.7", "@types/luxon": "^3.3.1", @@ -28,7 +29,7 @@ "svelte-check": "^3.4.3", "tslib": "^2.4.1", "typescript": "^5.0.0", - "vite": "^4.4.2", + "vite": "^5.0.0", "houdini": "^1.2.46", "houdini-svelte": "^1.2.46" }, @@ -36,8 +37,8 @@ "dependencies": { "@directus/sdk": "^14.0.0", "@fontsource-variable/roboto-flex": "^5.0.5", - "@sveltejs/adapter-cloudflare": "^2.3.1", - "@sveltejs/adapter-static": "^2.0.2", + "@sveltejs/adapter-cloudflare": "^3.0.0", + "@sveltejs/adapter-static": "^3.0.0", "@ts-ghost/admin-api": "^4.0.1", "@ts-ghost/content-api": "^4.0.6", "animejs": "^3.2.1", diff --git a/src/routes/(frontend)/(blog)/author/[slug]/[[page]]/+page.server.ts b/src/routes/(frontend)/(blog)/author/[slug]/[[page]]/+page.server.ts index ed66430..9b2d71a 100644 --- a/src/routes/(frontend)/(blog)/author/[slug]/[[page]]/+page.server.ts +++ b/src/routes/(frontend)/(blog)/author/[slug]/[[page]]/+page.server.ts @@ -47,11 +47,11 @@ export const load: PageServerLoad = async ({ params }) => { } maxPage = Math.ceil((author.data.count?.posts || 0) / limit); } catch (e) { - throw error(404, 'Author not found'); + error(404, 'Author not found'); } if (page > maxPage) { - throw error(404, 'Page not found'); + error(404, 'Page not found'); } return { diff --git a/src/routes/(frontend)/(blog)/feeds/[topic].[format]/+server.ts b/src/routes/(frontend)/(blog)/feeds/[topic].[format]/+server.ts index 681fe80..f932a7e 100644 --- a/src/routes/(frontend)/(blog)/feeds/[topic].[format]/+server.ts +++ b/src/routes/(frontend)/(blog)/feeds/[topic].[format]/+server.ts @@ -28,7 +28,7 @@ export const GET: RequestHandler = async (request) => { if (!tag.success) { console.error(tag.errors); - throw error(404, 'Topic not found'); + error(404, 'Topic not found'); } feedName = `${tag.data.name} on Raider's Blog`; @@ -54,7 +54,7 @@ export const GET: RequestHandler = async (request) => { .fetch(); if (!posts.success) { - throw error(500, 'Unable to load posts'); + error(500, 'Unable to load posts'); } const feed = new Feed({ @@ -120,5 +120,5 @@ export const GET: RequestHandler = async (request) => { } }); } - throw error(404, 'Invalid format'); + error(404, 'Invalid format'); }; diff --git a/src/routes/(frontend)/(blog)/read/+page.server.ts b/src/routes/(frontend)/(blog)/read/+page.server.ts index e523ff8..8ed6647 100644 --- a/src/routes/(frontend)/(blog)/read/+page.server.ts +++ b/src/routes/(frontend)/(blog)/read/+page.server.ts @@ -30,7 +30,7 @@ export const load: PageServerLoad = async () => { } } catch (e) { console.error(e); - throw error(404, 'Topic not found'); + error(404, 'Topic not found'); } return { diff --git a/src/routes/(frontend)/(blog)/read/[year]/[slug]/+page.server.ts b/src/routes/(frontend)/(blog)/read/[year]/[slug]/+page.server.ts index a5474b8..9cf1802 100644 --- a/src/routes/(frontend)/(blog)/read/[year]/[slug]/+page.server.ts +++ b/src/routes/(frontend)/(blog)/read/[year]/[slug]/+page.server.ts @@ -27,7 +27,7 @@ export const load: PageServerLoad = async ({ params }) => { throw 'Not Found'; } } catch (e) { - throw error(404, 'Post not found'); + error(404, 'Post not found'); } const pubYear = post.data.published_at @@ -35,7 +35,7 @@ export const load: PageServerLoad = async ({ params }) => { : 'other'; if (pubYear != params.year) { - throw redirect(301, `/read/${pubYear}/${params.slug}`); + redirect(301, `/read/${pubYear}/${params.slug}`); } return { diff --git a/src/routes/(frontend)/(blog)/read/[year]/[slug]/comments/+page.server.ts b/src/routes/(frontend)/(blog)/read/[year]/[slug]/comments/+page.server.ts index feb876f..483ebf4 100644 --- a/src/routes/(frontend)/(blog)/read/[year]/[slug]/comments/+page.server.ts +++ b/src/routes/(frontend)/(blog)/read/[year]/[slug]/comments/+page.server.ts @@ -23,7 +23,7 @@ export const load: PageServerLoad = async ({ params }) => { throw 'Not Found'; } } catch (e) { - throw error(404, 'Post not found'); + error(404, 'Post not found'); } const pubYear = post.data.published_at @@ -31,7 +31,7 @@ export const load: PageServerLoad = async ({ params }) => { : 'other'; if (pubYear != params.year) { - throw redirect(301, `/read/${pubYear}/${params.slug}`); + redirect(301, `/read/${pubYear}/${params.slug}`); } return { diff --git a/src/routes/(frontend)/(blog)/read/preview/[id]/+page.server.ts b/src/routes/(frontend)/(blog)/read/preview/[id]/+page.server.ts index 17ebaf8..9a68966 100644 --- a/src/routes/(frontend)/(blog)/read/preview/[id]/+page.server.ts +++ b/src/routes/(frontend)/(blog)/read/preview/[id]/+page.server.ts @@ -29,7 +29,7 @@ export const load: PageServerLoad = async ({ params }) => { throw 'Not Found'; } } catch (e) { - throw error(404, 'Page not found'); + error(404, 'Page not found'); } return { diff --git a/src/routes/(frontend)/(blog)/tag/[topic]/[[page]]/+page.server.ts b/src/routes/(frontend)/(blog)/tag/[topic]/[[page]]/+page.server.ts index 7c53df6..b106140 100644 --- a/src/routes/(frontend)/(blog)/tag/[topic]/[[page]]/+page.server.ts +++ b/src/routes/(frontend)/(blog)/tag/[topic]/[[page]]/+page.server.ts @@ -43,11 +43,11 @@ export const load: PageServerLoad = async ({ params }) => { } maxPage = Math.ceil((tag.data.count?.posts || 0) / limit); } catch (e) { - throw error(404, 'Topic not found'); + error(404, 'Topic not found'); } if (page > maxPage) { - throw error(404, 'Page not found'); + error(404, 'Page not found'); } return { diff --git a/src/routes/(frontend)/(page)/[slug]/+page.server.ts b/src/routes/(frontend)/(page)/[slug]/+page.server.ts index 57e3c1d..418bcba 100644 --- a/src/routes/(frontend)/(page)/[slug]/+page.server.ts +++ b/src/routes/(frontend)/(page)/[slug]/+page.server.ts @@ -20,11 +20,11 @@ export const load: PageServerLoad = async ({ params }) => { throw 'Not Found'; } } catch (e) { - throw error(404, 'Page not found'); + error(404, 'Page not found'); } if (!page) { - throw error(404, 'Page not found'); + error(404, 'Page not found'); } return { From 570c4a6e09642f9111feb10239aa6368aa1370dd Mon Sep 17 00:00:00 2001 From: kevin Date: Fri, 13 Dec 2024 01:16:52 +0000 Subject: [PATCH 02/11] Migrate to Svelte 5 --- package.json | 18 ++++---- .../components/ArticleCard/ArticleCard.svelte | 32 ++++++++++---- src/lib/components/Ask/Answer.svelte | 36 ++++++++------- src/lib/components/Ask/AuthenticateNag.svelte | 11 +++-- .../ContentAggregator.svelte | 2 +- .../ContentAggregator/ContentArticle.svelte | 6 ++- .../ContentAggregator/ContentMedia.svelte | 6 ++- src/lib/components/EventCard/EventCard.svelte | 16 ++++--- .../EventCard/EventCardDummy.svelte | 14 +++--- src/lib/components/Remark24/Remark24.svelte | 10 +++-- src/lib/components/SEO/SEO.svelte | 44 +++++++++++++------ src/lib/components/WordMark/WordMark.svelte | 6 ++- .../author/[slug]/[[page]]/+page.svelte | 10 +++-- .../(frontend)/(blog)/feeds/+page.svelte | 6 ++- .../(frontend)/(blog)/read/+page.svelte | 6 ++- .../(blog)/read/[year]/[slug]/+page.svelte | 18 +++++--- .../read/[year]/[slug]/comments/+page@.svelte | 8 +++- .../(blog)/read/preview/[id]/+page.svelte | 10 +++-- .../(blog)/tag/[topic]/[[page]]/+page.svelte | 10 +++-- .../(frontend)/(page)/[slug]/+page.svelte | 6 ++- src/routes/(frontend)/+layout.svelte | 27 +++++++++--- src/routes/(frontend)/+page.svelte | 14 +++--- src/routes/(frontend)/ask/[id]/+page.svelte | 26 ++++++----- src/routes/(frontend)/brand/+page.svelte | 2 +- src/routes/(frontend)/woof/+page.svelte | 2 +- 25 files changed, 232 insertions(+), 114 deletions(-) diff --git a/package.json b/package.json index 41db693..087f630 100644 --- a/package.json +++ b/package.json @@ -13,8 +13,8 @@ }, "devDependencies": { "@sveltejs/adapter-auto": "^3.0.0", - "@sveltejs/kit": "^2.0.0", - "@sveltejs/vite-plugin-svelte": "^3.0.0", + "@sveltejs/kit": "^2.5.27", + "@sveltejs/vite-plugin-svelte": "^4.0.0", "@types/animejs": "^3.1.7", "@types/howler": "^2.2.7", "@types/luxon": "^3.3.1", @@ -22,14 +22,14 @@ "@typescript-eslint/parser": "^5.45.0", "eslint": "^8.28.0", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-svelte": "^2.30.0", - "prettier": "^2.8.0", - "prettier-plugin-svelte": "^2.10.1", - "svelte": "^4.0.5", - "svelte-check": "^3.4.3", + "eslint-plugin-svelte": "^2.45.1", + "prettier": "^3.1.0", + "prettier-plugin-svelte": "^3.2.6", + "svelte": "^5.0.0", + "svelte-check": "^4.0.0", "tslib": "^2.4.1", - "typescript": "^5.0.0", - "vite": "^5.0.0", + "typescript": "^5.5.0", + "vite": "^5.4.4", "houdini": "^1.2.46", "houdini-svelte": "^1.2.46" }, diff --git a/src/lib/components/ArticleCard/ArticleCard.svelte b/src/lib/components/ArticleCard/ArticleCard.svelte index d62fd3f..6308c8f 100644 --- a/src/lib/components/ArticleCard/ArticleCard.svelte +++ b/src/lib/components/ArticleCard/ArticleCard.svelte @@ -1,15 +1,29 @@ () + let answerFragment = $derived(fragment(answer, graphql(` + fragment AnswerFragment on Answer { + id + text + name + upvoteCount + didUpvote + isOwnedByMe + } + `)))
@@ -49,7 +53,7 @@
Your Reponse
{/if}
- {#if $answerFragment.isOwnedByMe||admin} - +
{/if} {:else} diff --git a/src/lib/components/ContentAggregator/ContentAggregator.svelte b/src/lib/components/ContentAggregator/ContentAggregator.svelte index 638157b..056af29 100644 --- a/src/lib/components/ContentAggregator/ContentAggregator.svelte +++ b/src/lib/components/ContentAggregator/ContentAggregator.svelte @@ -22,7 +22,7 @@ Currently fetching the content...
{#each [0, 1, 2, 3, 4, 5, 6, 7, 8] as ignored} -
+
{/each} {:then content} {#each content as piece} diff --git a/src/lib/components/ContentAggregator/ContentArticle.svelte b/src/lib/components/ContentAggregator/ContentArticle.svelte index e83b823..4499c38 100644 --- a/src/lib/components/ContentAggregator/ContentArticle.svelte +++ b/src/lib/components/ContentAggregator/ContentArticle.svelte @@ -2,7 +2,11 @@ import type { Content } from '$lib/contentTypes'; import { baseUrl } from '$lib/seoUtils'; - export let piece: Content & { type: 'article' }; + interface Props { + piece: Content & { type: 'article' }; + } + + let { piece }: Props = $props(); + import { run } from 'svelte/legacy'; + import type { EventAttendance } from '$lib/events'; import { ExternalLink } from 'lucide-svelte'; import { DateTime } from 'luxon'; - export let event: EventAttendance; + interface Props { + event: EventAttendance; + } - $: startDate = DateTime.fromISO(event.start_date); + let { event }: Props = $props(); + + let startDate = $derived(DateTime.fromISO(event.start_date)); //$: endDate = DateTime.fromISO(event.end_date); - $: url = event.event.url ? new URL(event.event.url) : null; - $: { + let url = $derived(event.event.url ? new URL(event.event.url) : null); + run(() => { if (url && !url.searchParams.has('ref')) { url.searchParams.set('ref', 'pupraider.net'); } - } + });
diff --git a/src/lib/components/EventCard/EventCardDummy.svelte b/src/lib/components/EventCard/EventCardDummy.svelte index 535ab32..f693e7e 100644 --- a/src/lib/components/EventCard/EventCardDummy.svelte +++ b/src/lib/components/EventCard/EventCardDummy.svelte @@ -1,14 +1,18 @@
-
+
- - + +
diff --git a/src/lib/components/Remark24/Remark24.svelte b/src/lib/components/Remark24/Remark24.svelte index ed3915e..51680d0 100644 --- a/src/lib/components/Remark24/Remark24.svelte +++ b/src/lib/components/Remark24/Remark24.svelte @@ -3,8 +3,12 @@ import Parameters from '$lib/parameters'; import { onMount } from 'svelte'; - export let pageTitle: string; - export let url: string; + interface Props { + pageTitle: string; + url: string; + } + + let { pageTitle, url }: Props = $props(); onMount(() => { if (!browser) return; @@ -30,4 +34,4 @@ }); -
+
diff --git a/src/lib/components/SEO/SEO.svelte b/src/lib/components/SEO/SEO.svelte index 4366da2..52f2e9e 100644 --- a/src/lib/components/SEO/SEO.svelte +++ b/src/lib/components/SEO/SEO.svelte @@ -1,20 +1,38 @@
diff --git a/src/routes/(frontend)/(blog)/author/[slug]/[[page]]/+page.svelte b/src/routes/(frontend)/(blog)/author/[slug]/[[page]]/+page.svelte index ded5755..78f6207 100644 --- a/src/routes/(frontend)/(blog)/author/[slug]/[[page]]/+page.svelte +++ b/src/routes/(frontend)/(blog)/author/[slug]/[[page]]/+page.svelte @@ -5,7 +5,11 @@ import Seo from '$lib/components/SEO/SEO.svelte'; import { makeCanonicalUrl } from '$lib/seoUtils'; - export let data: PageData; + interface Props { + data: PageData; + } + + let { data }: Props = $props(); {:else} -
+
{/if} -
+
{#if data.author.profile_image} diff --git a/src/routes/(frontend)/(blog)/feeds/+page.svelte b/src/routes/(frontend)/(blog)/feeds/+page.svelte index d2e5806..1d5af37 100644 --- a/src/routes/(frontend)/(blog)/feeds/+page.svelte +++ b/src/routes/(frontend)/(blog)/feeds/+page.svelte @@ -3,7 +3,11 @@ import { makeCanonicalUrl } from '$lib/seoUtils'; import type { PageData } from './$types'; - export let data: PageData; + interface Props { + data: PageData; + } + + let { data }: Props = $props(); + import { run } from 'svelte/legacy'; + /* eslint svelte/no-at-html-tags: "off" */ import type { PageData } from './$types'; import { DateTime } from 'luxon'; @@ -9,7 +11,11 @@ import Parameters from '$lib/parameters'; import { siTelegram } from 'simple-icons'; - export let data: PageData; + interface Props { + data: PageData; + } + + let { data }: Props = $props(); onMount(() => { const interval = setInterval(() => { @@ -28,15 +34,15 @@ } }; - let commentFrame: HTMLIFrameElement; + let commentFrame: HTMLIFrameElement = $state(); - $: { + run(() => { if (commentFrame) { recalculateFrameHeights(); } - } + }); - $: publishTime = DateTime.fromISO(data.post.published_at || data.post.created_at || '2001-11-03'); + let publishTime = $derived(DateTime.fromISO(data.post.published_at || data.post.created_at || '2001-11-03')); + >
diff --git a/src/routes/(frontend)/(blog)/read/[year]/[slug]/comments/+page@.svelte b/src/routes/(frontend)/(blog)/read/[year]/[slug]/comments/+page@.svelte index edffe98..e225d66 100644 --- a/src/routes/(frontend)/(blog)/read/[year]/[slug]/comments/+page@.svelte +++ b/src/routes/(frontend)/(blog)/read/[year]/[slug]/comments/+page@.svelte @@ -5,9 +5,13 @@ import { DateTime } from 'luxon'; import type { PageData } from './$types'; - export let data: PageData; + interface Props { + data: PageData; + } - $: publishTime = DateTime.fromISO(data.post.published_at || data.post.created_at || '2001-11-03'); + let { data }: Props = $props(); + + let publishTime = $derived(DateTime.fromISO(data.post.published_at || data.post.created_at || '2001-11-03'));

Comments

diff --git a/src/routes/(frontend)/(blog)/read/preview/[id]/+page.svelte b/src/routes/(frontend)/(blog)/read/preview/[id]/+page.svelte index 7e058ca..9803498 100644 --- a/src/routes/(frontend)/(blog)/read/preview/[id]/+page.svelte +++ b/src/routes/(frontend)/(blog)/read/preview/[id]/+page.svelte @@ -7,9 +7,13 @@ import Seo from '$lib/components/SEO/SEO.svelte'; import { makeCanonicalUrl } from '$lib/seoUtils'; - export let data: PageData; + interface Props { + data: PageData; + } - $: publishTime = DateTime.fromISO(data.post.published_at || data.post.created_at || '2001-11-03'); + let { data }: Props = $props(); + + let publishTime = $derived(DateTime.fromISO(data.post.published_at || data.post.created_at || '2001-11-03')); {/if} {#if !author.profile_image} -
+
{/if}
diff --git a/src/routes/(frontend)/(blog)/tag/[topic]/[[page]]/+page.svelte b/src/routes/(frontend)/(blog)/tag/[topic]/[[page]]/+page.svelte index 3404254..4e6969d 100644 --- a/src/routes/(frontend)/(blog)/tag/[topic]/[[page]]/+page.svelte +++ b/src/routes/(frontend)/(blog)/tag/[topic]/[[page]]/+page.svelte @@ -5,7 +5,11 @@ import Seo from '$lib/components/SEO/SEO.svelte'; import { makeCanonicalUrl } from '$lib/seoUtils'; - export let data: PageData; + interface Props { + data: PageData; + } + + let { data }: Props = $props(); {:else} -
+
{/if} -
+

{data.tag.name}

diff --git a/src/routes/(frontend)/(page)/[slug]/+page.svelte b/src/routes/(frontend)/(page)/[slug]/+page.svelte index b48bae9..1642f68 100644 --- a/src/routes/(frontend)/(page)/[slug]/+page.svelte +++ b/src/routes/(frontend)/(page)/[slug]/+page.svelte @@ -5,7 +5,11 @@ import type { PageData } from './$types'; import { fly } from 'svelte/transition'; - export let data: PageData; + interface Props { + data: PageData; + } + + let { data }: Props = $props(); + import { run } from 'svelte/legacy'; + //import type { LayoutData } from './$types'; import { AreaChart, Moon, Rss, Sun } from 'lucide-svelte'; import '../../app.scss'; import { currentColorMode, effectiveColorMode, saveColorMode } from '$lib/colorMode'; import { onMount } from 'svelte'; import { dev } from '$app/environment'; + interface Props { + children?: import('svelte').Snippet; + } - let root: HTMLElement; + let { children }: Props = $props(); + + let root: HTMLElement = $state(); onMount(() => { root = document.documentElement; }); - $: root && root.classList.toggle('color-dark', $currentColorMode == 'dark'); - $: root && root.classList.toggle('color-light', $currentColorMode == 'light'); - $: root && root.classList.toggle('color-follow-system', $currentColorMode == 'follow-system'); + run(() => { + root && root.classList.toggle('color-dark', $currentColorMode == 'dark'); + }); + run(() => { + root && root.classList.toggle('color-light', $currentColorMode == 'light'); + }); + run(() => { + root && root.classList.toggle('color-follow-system', $currentColorMode == 'follow-system'); + }); //export let data: LayoutData; @@ -29,7 +42,7 @@ Blog -
+
- + {@render children?.()}