Damillora/Shallie
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: migrate to svelte 5

Browse Source
This commit is contained in:
Damillora 2024-11-22 00:45:23 +07:00
parent f906ca2cf6
commit 713b2c0576
12 changed files with 1288 additions and 1289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2402
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

29
package.json
View File

@ -16,8 +16,8 @@
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-node": "^2.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/fitvids": "^2.1.1",
"@types/tryghost__content-api": "^1.3.11",
"@typescript-eslint/eslint-plugin": "^5.62.0",
@ -25,31 +25,28 @@
"dayjs": "^1.11.9",
"eslint": "^8.46.0",
"eslint-config-prettier": "^8.10.0",
"eslint-plugin-svelte": "^2.32.4",
"eslint-plugin-svelte": "^2.45.1",
"hast-util-from-selector": "^2.0.1",
"prettier": "^2.8.8",
"prettier-plugin-svelte": "^2.10.1",
"prettier": "^3.1.0",
"prettier-plugin-svelte": "^3.2.6",
"rehype-parse": "^8.0.4",
"rehype-stringify": "^9.0.3",
"sass": "^1.64.2",
"svelte": "^4.1.2",
"svelte-check": "^3.4.6",
"svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"svelte-infinite-scroll": "^2.0.1",
"svelte-preprocess": "^5.0.4",
"svelte-preprocess": "^6.0.0",
"svelte2tsx": "^0.6.0",
"tslib": "^2.6.1",
"typescript": "^5.1.6",
"typescript": "^5.5.0",
"unified": "^10.1.2",
"unist-util-visit": "^4.1.2",
"vite": "^5.0.0"
"vite": "^5.4.4"
},
"type": "module",
"dependencies": {
"@damillora/plachta": "^4.3.0",
"@damillora/plachta": "^6.2.0",
"@tryghost/content-api": "^1.11.16",
"fitvids": "^2.1.1",
"main": "^1000.0.1",
"svelte-material-icons": "^3.0.0",
"svelte-themes": "^0.0.98"
"main": "^1000.0.1"
}
}
}

28
src/lib/components/ResponsivePageHeaderImage.svelte
View File

@ -1,19 +1,27 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import { generateSizesString, generateSrcsetString } from '$lib/content/srcset';
import { Hero } from '@damillora/plachta';
export let background: string | null = null;
export let alt = '';
let srcset: string | null = null;
let sizes: string | null = null;
$: if (background != null) {
srcset = generateSrcsetString(background);
sizes = '100vw';
} else {
srcset = null;
sizes = null;
interface Props {
background?: string | null;
alt?: string;
}
let { background = null, alt = '' }: Props = $props();
let srcset: string | null = $state(null);
let sizes: string | null = $state(null);
run(() => {
if (background != null) {
srcset = generateSrcsetString(background);
sizes = '100vw';
} else {
srcset = null;
sizes = null;
}
});
</script>
{#if background}

6
src/lib/components/SEO/AuthorSEO.svelte
View File

@ -1,5 +1,9 @@
<script lang="ts">
export let author: any;
interface Props {
author: any;
}
let { author }: Props = $props();
let schemaOrg = `
<script type="application/ld+json">

6
src/lib/components/SEO/PostSEO.svelte
View File

@ -1,5 +1,9 @@
<script lang="ts">
export let post: any;
interface Props {
post: any;
}
let { post }: Props = $props();
let schemaOrg = `
<script type="application/ld+json">

6
src/lib/components/SEO/TagSEO.svelte
View File

@ -1,5 +1,9 @@
<script lang="ts">
export let tag: any;
interface Props {
tag: any;
}
let { tag }: Props = $props();
let schemaOrg = `
<script type="application/ld+json">

24
src/routes/+layout.svelte
View File

@ -14,7 +14,7 @@
}
};
export let data;
let { data, children } = $props();
</script>
<svelte:head>
@ -22,17 +22,21 @@
</svelte:head>
<Base>
<Header>
<svelte:fragment slot="title">
<a href="/"> <strong>Damillora</strong>'s Virtual Memoir </a>
</svelte:fragment>
<svelte:fragment slot="nav">
<NavMenu label="nanao.moe" url="https://nanao.moe" />
<NavDarkMode />
<NavSearch on:search={doSearch} />
</svelte:fragment>
{#snippet title()}
<a href="/"> <strong>Damillora</strong>'s Virtual Memoir </a>
{/snippet}
{#snippet nav()}
<NavMenu label="nanao.moe" url="https://nanao.moe" />
<NavDarkMode />
<NavSearch on:search={doSearch} />
{/snippet}
</Header>
<slot />
{@render children?.()}
{@html data.footer}
<Footer>
<p>Copyright (c) 2023 Damillora</p>

16
src/routes/+page.svelte
View File

@ -1,4 +1,6 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import { browser } from '$app/environment';
import dayjs from 'dayjs';
@ -7,19 +9,21 @@
import { onMount } from 'svelte';
import IndexSeo from '$lib/components/SEO/IndexSEO.svelte';
import { browsePost } from '$lib/content/contentApi';
export let data;
let { posts } = data;
let { data } = $props();
let { posts } = $state(data);
let newPosts: any[] = [];
let newPosts: any[] = $state([]);
let page = 1;
$: posts = [...posts, ...newPosts];
run(() => {
posts = [...posts, ...newPosts];
});
async function loadPage() {
const posts = await browsePost(page);
newPosts = posts;
}
let footer: HTMLElement;
let footer: HTMLElement = $state();
onMount(() => {
if (browser) {
@ -59,5 +63,5 @@
/>
{/each}
</Index>
<div bind:this={footer} />
<div bind:this={footer}></div>
</Container>

16
src/routes/[tag]/+page.svelte
View File

@ -1,4 +1,6 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import { Hero, PostCard, Index, TagHeader, Post, Container } from '@damillora/plachta';
import { browsePostWithTag, readTag } from '$lib/content/contentApi';
@ -8,19 +10,21 @@
import dayjs from 'dayjs';
import TagSeo from '$lib/components/SEO/TagSEO.svelte';
export let data;
let { posts } = data;
let { data } = $props();
let { posts } = $state(data);
let newPosts: any[] = [];
let newPosts: any[] = $state([]);
let page = 1;
$: posts = [...posts, ...newPosts];
run(() => {
posts = [...posts, ...newPosts];
});
async function loadPage() {
const posts = await browsePostWithTag(data.tag.slug, page);
newPosts = posts;
}
let footer: HTMLElement;
let footer: HTMLElement = $state();
onMount(() => {
if (browser) {
@ -67,6 +71,6 @@
url={post.url}
/>
{/each}
<div bind:this={footer} />
<div bind:this={footer}></div>
</Index>
</Container>

6
src/routes/[tag]/[slug]/+page.svelte
View File

@ -27,7 +27,7 @@
import { afterNavigate } from '$app/navigation';
import { generateSrcsetString } from '$lib/content/srcset';
export let data;
let { data } = $props();
</script>
<svelte:head>
@ -52,7 +52,9 @@
<br />
</GhostStyle>
<svelte:fragment slot="comments" />
{#snippet comments()}
<svelte:fragment />
{/snippet}
</PostMain>
<PostNavigator prev_post={data.prevPost} next_post={data.nextPost} />
</Post>

22
src/routes/author/[author]/+page.svelte
View File

@ -1,4 +1,6 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import { Hero, PostCard, Index, Post, AuthorHeader, Container } from '@damillora/plachta';
import type { Load } from '@sveltejs/kit';
@ -8,20 +10,26 @@
import dayjs from 'dayjs';
import AuthorSeo from '$lib/components/SEO/AuthorSEO.svelte';
export let author: any;
export let data;
let { posts } = data;
let newPosts: any[] = [];
interface Props {
author: any;
data: any;
}
let { author, data }: Props = $props();
let { posts } = $state(data);
let newPosts: any[] = $state([]);
let page = 1;
$: posts = [...posts, ...newPosts];
run(() => {
posts = [...posts, ...newPosts];
});
async function loadPage() {
const posts = await browsePostWithAuthor(data.author.slug, page);
newPosts = posts;
}
let footer: HTMLElement;
let footer: HTMLElement = $state();
onMount(() => {
if (browser) {
@ -71,6 +79,6 @@
url={post.url}
/>
{/each}
<div bind:this={footer} />
<div bind:this={footer}></div>
</Index>
</Container>

16
src/routes/search/+page.svelte
View File

@ -1,4 +1,6 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import { browser } from '$app/environment';
import dayjs from 'dayjs';
@ -7,12 +9,14 @@
import { onMount } from 'svelte';
import { search } from '$lib/content/searchApi';
import type { Load } from '@sveltejs/kit';
export let data;
let posts: any[] = [];
let { data } = $props();
let posts: any[] = $state([]);
let newPosts: any[] = [];
let newPosts: any[] = $state([]);
let page = 1;
$: posts = [...data.posts, ...newPosts];
run(() => {
posts = [...data.posts, ...newPosts];
});
async function loadPage() {
const posts = await search(data.query, page);
@ -20,7 +24,7 @@
newPosts = posts.result ?? [];
}
let footer: HTMLElement;
let footer: HTMLElement = $state();
onMount(() => {
if (browser) {
@ -50,5 +54,5 @@
<SearchCard title={post.title} url={post.url} excerpt={post.excerpt} />
{/each}
</Index>
<div bind:this={footer} />
<div bind:this={footer}></div>
</Container>