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

feat: major update to svelte 5
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Details

Browse Source
This commit is contained in:
Damillora 2024-11-22 02:32:18 +07:00
parent 713b2c0576
commit 90bd09c93e
8 changed files with 56 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,31 +0,0 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import { generateSizesString, generateSrcsetString } from '$lib/content/srcset';
import { Hero } from '@damillora/plachta';
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}
<Hero {background} {alt} {srcset} {sizes} />
{:else}
<Hero background="/images/default-feature.jpg" {alt} />
{/if}

8
src/routes/+layout.svelte
View File

@ -1,4 +1,5 @@
<script lang="ts">
import { navigating } from '$app/stores';
import { goto } from '$app/navigation';
import { browseSettings } from '$lib/content/contentApi';
@ -8,13 +9,16 @@
const doSearch = (e: any) => {
if (e.detail.query) {
goto('/search?q=' + e.detail.query, { replaceState: true, keepFocus: true });
goto('/search?q=' + e.detail.query, { replaceState: true, keepFocus: true } );
} else {
goto('/', { replaceState: true, keepFocus: true });
}
};
let { data, children } = $props();
let loading = $state(true);
navigating.subscribe((x) => (loading = x != null));
</script>
<svelte:head>
@ -43,6 +47,8 @@
</Footer>
</Base>
<NavigationLoading {loading}/>
<style lang="scss">
// Responsive embeds
:global(.fluid-width-video-wrapper) {

18
src/routes/+page.svelte
View File

@ -1,6 +1,4 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import { browser } from '$app/environment';
import dayjs from 'dayjs';
@ -9,18 +7,16 @@
import { onMount } from 'svelte';
import IndexSeo from '$lib/components/SEO/IndexSEO.svelte';
import { browsePost } from '$lib/content/contentApi';
import type { PostsOrPages } from '@tryghost/content-api';
let { data } = $props();
let { posts } = $state(data);
let posts: PostsOrPages = $state(data.posts);
let newPosts: any[] = $state([]);
let page = 1;
run(() => {
posts = [...posts, ...newPosts];
});
let pageNum = 1;
async function loadPage() {
const posts = await browsePost(page);
newPosts = posts;
const loadedPosts = await browsePost(pageNum);
posts = [...posts, ...loadedPosts];
}
let footer: HTMLElement = $state();
@ -30,7 +26,7 @@
const handleIntersect: IntersectionObserverCallback = (entries, observer) => {
const first = entries[0];
if (first.isIntersecting) {
page++;
pageNum++;
loadPage();
}
};

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

@ -1,6 +1,4 @@
<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';
@ -9,19 +7,15 @@
import { browser } from '$app/environment';
import dayjs from 'dayjs';
import TagSeo from '$lib/components/SEO/TagSEO.svelte';
import type { PostsOrPages } from '@tryghost/content-api';
let { data } = $props();
let { posts } = $state(data);
let newPosts: any[] = $state([]);
let page = 1;
run(() => {
posts = [...posts, ...newPosts];
});
let posts: PostsOrPages = $state(data.posts);
let pageNum = 1;
async function loadPage() {
const posts = await browsePostWithTag(data.tag.slug, page);
newPosts = posts;
const loadedPosts = await browsePostWithTag(data.tag.slug, pageNum);
posts = [...posts, ...loadedPosts]
}
let footer: HTMLElement = $state();
@ -31,7 +25,7 @@
const handleIntersect: IntersectionObserverCallback = (entries, observer) => {
const first = entries[0];
if (first.isIntersecting) {
page++;
pageNum++;
loadPage();
}
};

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

@ -52,9 +52,6 @@
<br />
</GhostStyle>
{#snippet comments()}
<svelte:fragment />
{/snippet}
</PostMain>
<PostNavigator prev_post={data.prevPost} next_post={data.nextPost} />
</Post>

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

@ -1,14 +1,13 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import { Hero, PostCard, Index, Post, AuthorHeader, Container } from '@damillora/plachta';
import type { Load } from '@sveltejs/kit';
import { browsePostWithAuthor, readAuthor } from '$lib/content/contentApi';
import { onMount } from 'svelte';
import { browser } from '$app/environment';
import dayjs from 'dayjs';
import AuthorSeo from '$lib/components/SEO/AuthorSEO.svelte';
import type { PostsOrPages } from '@tryghost/content-api';
import { onMount } from 'svelte';
interface Props {
@ -16,17 +15,13 @@
data: any;
}
let { author, data }: Props = $props();
let { posts } = $state(data);
let newPosts: any[] = $state([]);
let page = 1;
run(() => {
posts = [...posts, ...newPosts];
});
let { data }: Props = $props();
let posts: PostsOrPages = $state(data.posts);
let pageNum = 1;
async function loadPage() {
const posts = await browsePostWithAuthor(data.author.slug, page);
newPosts = posts;
const loadedPosts = await browsePostWithAuthor(data.author.slug, pageNum);
posts = [...posts, ...loadedPosts]
}
let footer: HTMLElement = $state();
@ -36,7 +31,7 @@
const handleIntersect: IntersectionObserverCallback = (entries, observer) => {
const first = entries[0];
if (first.isIntersecting) {
page++;
pageNum++;
loadPage();
}
};

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

@ -1,27 +1,40 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import { page } from '$app/stores';
import { browser } from '$app/environment';
import dayjs from 'dayjs';
import { Container, Hero, Index, SearchCard } from '@damillora/plachta';
import { onMount } from 'svelte';
import { search } from '$lib/content/searchApi';
import type { Load } from '@sveltejs/kit';
import { afterNavigate } from '$app/navigation';
let { data } = $props();
let posts: any[] = $state([]);
let url = $derived($page.url);
let pageNum = $state(url.searchParams.get('page') ?? 1);
let newPosts: any[] = $state([]);
let page = 1;
run(() => {
posts = [...data.posts, ...newPosts];
});
async function loadPage(firstLoad: boolean) {
if (firstLoad) {
// let url = $page.url;
let q = url.searchParams.get('q') ?? '';
async function loadPage() {
const posts = await search(data.query, page);
const loadedPosts = await search(q, pageNum);
if(loadedPosts.result)
{
posts = [...loadedPosts.result]
}
return;
}
// let url = $page.url;
let q = url.searchParams.get('q') ?? '';
newPosts = posts.result ?? [];
const loadedPosts = await search(q, pageNum + 1);
if(loadedPosts.result)
{
pageNum++;
posts = [...posts, ...loadedPosts.result]
}
}
let footer: HTMLElement = $state();
@ -31,8 +44,7 @@
const handleIntersect: IntersectionObserverCallback = (entries, observer) => {
const first = entries[0];
if (first.isIntersecting) {
page++;
loadPage();
loadPage(false);
}
};
const options = { threshold: 0.125, rootMargin: '-100% 0% 100%' };
@ -40,6 +52,8 @@
observer.observe(footer);
}
});
afterNavigate(() => loadPage(true));
</script>
<svelte:head>

21
src/routes/search/+page.ts
View File

@ -1,21 +0,0 @@
import type { PageLoad } from "./$types";
export const load: PageLoad = async ({ url, fetch }) => {
const yurikoEndpoint = 'https://search.blog.nanao.moe';
const apiEndpoint = '/api/article/search?';
const queryString = 'q=';
const pageString = '&page=';
const q = url.searchParams.get('q') ?? '';
const page = url.searchParams.get('page') ?? 1;
const search = await fetch(
`${yurikoEndpoint}${apiEndpoint}${queryString}${q}${pageString}${page}`
);
const result = await search.json();
return {
query: q,
posts: result.result
};
};