jfmonty2/blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upgrade to sveltekit 1

Browse Source
This commit is contained in:
Joseph Montanaro
2023-08-26 20:55:35 -07:00
parent 3a59f45e58
commit 1b2d55173a
24 changed files with 2206 additions and 6634 deletions

10
src/app.html

@ -4,12 +4,12 @@
<meta charset="utf-8" />
<link rel="preload" href="/Tajawal-Regular.woff2" as="font" type="font/woff2" />
<link rel="preload" href="/Baskerville-Regular.woff2" as="font" type="font/woff2" />
<link rel="icon" href="/favicon.png" />
<link rel="stylesheet" href="/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%svelte.head%
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body>
<div id="svelte">%svelte.body%</div>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

2
src/lib/Link.svelte

@ -18,7 +18,7 @@
{#if href.startsWith('/') || host(href) === $page.host}
<a sveltekit:prefetch {href}>
<a data-sveltekit-preload-data="hover" {href}>
<slot></slot>
</a>
{:else}

1
src/routes/+layout.js Normal file

@ -0,0 +1 @@
export const prerender = true;

16
src/routes/__layout.svelte → src/routes/+layout.svelte

@ -1,13 +1,3 @@
<script>
import Toc from '$lib/Toc.svelte';
const items = [
{depth: 2, text: 'The Suboptimal Solution: Absolute Positioning'},
{depth: 2, text: 'CSS Wizardry'},
{depth: 2, text: 'Implementation'},
];
</script>
<style>
.header {
grid-column-start: 1;
@ -38,9 +28,9 @@
<div class="header">
<nav>
<a sveltekit:prefetch href="/">Home</a>
<a sveltekit:prefetch href="/posts">Posts</a>
<a sveltekit:prefetch href="/">About</a>
<a data-sveltekit-preload-data="hover" href="/">Home</a>
<a data-sveltekit-preload-data="hover" href="/posts">Posts</a>
<a data-sveltekit-preload-data="hover" href="/">About</a>
</nav>
</div>

8
src/routes/+page.js Normal file

@ -0,0 +1,8 @@
export async function load({ fetch }) {
const resp = await fetch('/latest');
const postMeta = await resp.json();
const post = await import(`./_posts/${postMeta.slug}.svx`);
return {
post: post.default,
}
}

5
src/routes/+page.svelte Normal file

@ -0,0 +1,5 @@
<script>
export let data;
</script>
<svelte:component this={data.post} />

24
src/routes/[slug].svelte

@ -1,24 +0,0 @@
<script context="module">
export async function load({ url, params }) {
try {
let post = await import(`./_posts/${params.slug}.svx`);
return {
props: {
post: post.default
}
}
}
catch (err) {
return {
status: 404,
error: `Not found: ${url.pathname}`,
}
}
}
</script>
<script>
export let post;
</script>
<svelte:component this={post} />

14
src/routes/[slug]/+page.js Normal file

@ -0,0 +1,14 @@
import { error } from '@sveltejs/kit';
export async function load({ url, params }) {
try {
let post = await import(`../_posts/${params.slug}.svx`);
return {
post: post.default,
}
}
catch (err) {
throw error(404, `Not found: ${url.pathname}`);
}
}

5
src/routes/[slug]/+page.svelte Normal file

@ -0,0 +1,5 @@
<script>
export let data;
</script>
<svelte:component this={data.post} />

19
src/routes/posts.js → src/routes/_posts/all.js

@ -1,28 +1,25 @@
import { dev } from '$app/env';
const posts = import.meta.globEager('./_posts/*.svx');
import { dev } from '$app/environment';
const posts = import.meta.globEager('./*.svx');
export let postData = [];
let postData = [];
for (const path in posts) {
// skip draft posts in production mode
if (!dev && posts[path].metadata.draft) {
continue;
}
const slug = path.slice(9, -4)
// slice off the ./ and the .svx
const slug = path.slice(2, -4);
posts[path].metadata.slug = slug;
postData.push(posts[path].metadata);
}
postData.sort((a, b) => {
// sorting in reverse, so we flip the intuitive order
if (a.date > b.date) return -1;
if (a.date < b.date) return 1;
return 0;
})
export async function get() {
return {
body: {postData}
};
}
});
export { postData };

18
src/routes/index.svelte

@ -1,18 +0,0 @@
<script context="module">
export async function load({ fetch }) {
const resp = await fetch('/latest.json');
const postMeta = await resp.json();
const post = await import(`./_posts/${postMeta.slug}.svx`);
return {
props: {
post: post.default,
}
}
}
</script>
<script>
export let post;
</script>
<svelte:component this={post} />

5
src/routes/latest.json.js

@ -1,5 +0,0 @@
import { postData } from './posts.js';
export async function get() {
return {body: postData[0]};
}

7
src/routes/latest/+server.js Normal file

@ -0,0 +1,7 @@
import { json } from '@sveltejs/kit';
import { postData } from '../_posts/all.js';
export async function GET() {
return json(postData[0]);
}

12
src/routes/posts.svelte → src/routes/posts/+page.svelte

@ -1,13 +1,12 @@
<script>
import { formatDate } from '$lib/datefmt.js';
export let postData;
import { postData } from '../_posts/all.js';
</script>
<style lang="scss">
<style>
#posts {
/*text-align: center;*/
max-width: 24rem;
// margin-top: 1.25rem;
margin-left: auto;
margin-right: auto;
}
@ -17,11 +16,6 @@
margin-top: 1rem;
}
/* .post-title {
font-weight: bold;
font-size: 1.2rem;
}*/
.post-date {
color: #808080;
}
@ -60,7 +54,7 @@
<div class="post">
<div class="post-date">{new Date(post.date).toISOString().split('T')[0]}</div>
<div>
<a sveltekit:prefetch class="post-link" href="/{post.slug}">
<a data-sveltekit-preload-data="hover" class="post-link" href="/{post.slug}">
<h3>{post.title}<h3>
</a>
{#if post.draft}