Migrate from Svelte 4 to Svelte 5
This commit is contained in:
parent
6043dece34
commit
e1c2565db2
SSH key fingerprint:
SHA256:yrp4c4hhaPoPG07fb4QyQIgAdlbUdsJvUAydJEWnfTw
8 changed files with 232 additions and 644 deletions
775
package-lock.json
generated
775
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -15,7 +15,7 @@
|
|||
"@sveltejs/adapter-auto": "^3.3.1",
|
||||
"@sveltejs/adapter-static": "^3.0.8",
|
||||
"@sveltejs/kit": "^2.20.2",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.1.2",
|
||||
"@sveltejs/vite-plugin-svelte": "^4.0.4",
|
||||
"@types/eslint": "^9.6.1",
|
||||
"eslint": "^9.23.0",
|
||||
"eslint-plugin-svelte": "^2.46.1",
|
||||
|
|
@ -24,8 +24,8 @@
|
|||
"rehype-external-links": "^3.0.0",
|
||||
"remark-emoji": "^4.0.1",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"svelte": "^4.2.19",
|
||||
"svelte-check": "^3.8.6",
|
||||
"svelte": "^5.25.3",
|
||||
"svelte-check": "^4.1.5",
|
||||
"tslib": "^2.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^5.4.15"
|
||||
|
|
|
|||
|
|
@ -1,45 +1,45 @@
|
|||
<script>
|
||||
import DateTime from "./DateTime.svelte";
|
||||
import { page } from "$app/stores";
|
||||
import { page } from "$app/state";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{#if $page.data.header}
|
||||
<meta property="og:image" content={$page.data.header} />
|
||||
{#if $page.data.header_alt}
|
||||
<meta property="og:image:alt" content={$page.data.header_alt} />
|
||||
{#if page.data.header}
|
||||
<meta property="og:image" content={page.data.header} />
|
||||
{#if page.data.header_alt}
|
||||
<meta property="og:image:alt" content={page.data.header_alt} />
|
||||
{/if}
|
||||
<meta property="og:description" content={$page.data.description} />
|
||||
<meta property="og:description" content={page.data.description} />
|
||||
{/if}
|
||||
</svelte:head>
|
||||
|
||||
<header id="main-content">
|
||||
{#if $page.data.header}
|
||||
{#if page.data.header}
|
||||
<figure>
|
||||
<img
|
||||
src={$page.data.header}
|
||||
alt={$page.data.header_alt || "header"}
|
||||
src={page.data.header}
|
||||
alt={page.data.header_alt || "header"}
|
||||
class="header"
|
||||
/>
|
||||
{#if $page.data.header_caption}
|
||||
<figcaption>{$page.data.header_caption}</figcaption>
|
||||
{#if page.data.header_caption}
|
||||
<figcaption>{page.data.header_caption}</figcaption>
|
||||
{/if}
|
||||
</figure>
|
||||
{/if}
|
||||
|
||||
<hgroup>
|
||||
<h1>{$page.data.title}</h1>
|
||||
<p>{$page.data.description}</p>
|
||||
<h1>{page.data.title}</h1>
|
||||
<p>{page.data.description}</p>
|
||||
</hgroup>
|
||||
|
||||
{#if $page.data.published}
|
||||
{#if page.data.published}
|
||||
<p>
|
||||
<small>
|
||||
Published:
|
||||
<DateTime datetime={$page.data.published} display="date" />
|
||||
{#if $page.data.edited}
|
||||
<DateTime datetime={page.data.published} display="date" />
|
||||
{#if page.data.edited}
|
||||
• Last edited:
|
||||
<DateTime datetime={$page.data.edited} display="dateTime" />
|
||||
<DateTime datetime={page.data.edited} display="dateTime" />
|
||||
{/if}
|
||||
</small>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
<script>
|
||||
import { browser } from "$app/environment";
|
||||
|
||||
/** @type string | undefined */
|
||||
export let datetime = undefined;
|
||||
/** @type "date" | "dateTime" | "time" */
|
||||
export let display = "date";
|
||||
/** @type string | undefined */
|
||||
export let timeZone = undefined;
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {any} [datetime]
|
||||
* @property {string} [display]
|
||||
* @property {any} [timeZone]
|
||||
*/
|
||||
|
||||
/** @type {Props} */
|
||||
let { datetime = undefined, display = "date", timeZone = undefined } = $props();
|
||||
|
||||
const date = datetime ? Date.parse(datetime) : Date.now();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { page } from "$app/stores";
|
||||
import { page } from "$app/state";
|
||||
import links from "../../data/links.json";
|
||||
</script>
|
||||
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<img src="/favicon.png" alt="a black cat with large eyes" />
|
||||
<a href="/">pancakes</a>
|
||||
</span>
|
||||
{#if $page.url.pathname !== "/"}
|
||||
{#if page.url.pathname !== "/"}
|
||||
<ul class="links">
|
||||
{#each links as link}
|
||||
{#if link.href && !link.mainOnly}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,16 @@
|
|||
<script>
|
||||
import { browser } from "$app/environment";
|
||||
import { page } from "$app/stores";
|
||||
import { page } from "$app/state";
|
||||
import Footer from "$lib/components/Footer.svelte";
|
||||
import Navbar from "$lib/components/Navbar.svelte";
|
||||
import "./style.css";
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {import('svelte').Snippet} [children]
|
||||
*/
|
||||
|
||||
/** @type {Props} */
|
||||
let { children } = $props();
|
||||
|
||||
const green = browser
|
||||
? window.localStorage.getItem("green") === "true"
|
||||
|
|
@ -15,16 +22,16 @@
|
|||
<link rel="stylesheet" href="/assets/green.css" />
|
||||
{/if}
|
||||
<title>
|
||||
{$page.data.title ? $page.data.title + " | pancakes" : "pancakes"}
|
||||
{page.data.title ? page.data.title + " | pancakes" : "pancakes"}
|
||||
</title>
|
||||
<meta name="description" content={$page.data.description || "🐈⬛"} />
|
||||
<meta name="description" content={page.data.description || "🐈⬛"} />
|
||||
<meta property="og:site_name" content="pancakes" />
|
||||
<meta
|
||||
property="og:url"
|
||||
content={"https://pancakes.gay" + $page.url.pathname}
|
||||
content={"https://pancakes.gay" + page.url.pathname}
|
||||
/>
|
||||
<meta property="og:title" content={$page.data.title || "pancakes"} />
|
||||
{#if $page.data.header}
|
||||
<meta property="og:title" content={page.data.title || "pancakes"} />
|
||||
{#if page.data.header}
|
||||
<meta property="og:type" content="article" />
|
||||
{:else}
|
||||
<meta property="og:type" content="website" />
|
||||
|
|
@ -35,6 +42,6 @@
|
|||
|
||||
<Navbar />
|
||||
|
||||
<slot />
|
||||
{@render children?.()}
|
||||
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
const pages = getPages();
|
||||
|
||||
let ntfyLock = false;
|
||||
let ntfyLock = $state(false);
|
||||
async function sendNtfyMessage() {
|
||||
if (ntfyLock) return;
|
||||
ntfyLock = true;
|
||||
|
|
@ -396,7 +396,7 @@
|
|||
</p>
|
||||
|
||||
<input
|
||||
on:input={updateNtfyCharCount}
|
||||
oninput={updateNtfyCharCount}
|
||||
type="text"
|
||||
id="ntfy-message"
|
||||
name="ntfy-message"
|
||||
|
|
@ -408,7 +408,7 @@
|
|||
128
|
||||
</label>
|
||||
<br />
|
||||
<button on:click={sendNtfyMessage} style="margin-top: 1rem;" disabled={ntfyLock}> Send </button>
|
||||
<button onclick={sendNtfyMessage} style="margin-top: 1rem;" disabled={ntfyLock}> Send </button>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,14 @@
|
|||
import ArticleHeader from "$lib/components/ArticleHeader.svelte";
|
||||
import { error } from "@sveltejs/kit";
|
||||
|
||||
/** @type {import("./$types").PageData} */
|
||||
export let data;
|
||||
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {import("./$types").PageData} data
|
||||
*/
|
||||
|
||||
/** @type {Props} */
|
||||
let { data } = $props();
|
||||
|
||||
// hopefully this will get my attention
|
||||
if (!data.title) error(500, "there is no title dumbass");
|
||||
|
|
@ -13,5 +19,5 @@
|
|||
<article id="main-content">
|
||||
<ArticleHeader />
|
||||
|
||||
<svelte:component this={data.content} />
|
||||
<data.content />
|
||||
</article>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue