refactor: move Svelte components to Astro

.cspell/dictionary.txt

@@ -1,8 +1,6 @@
-Backlink
-Imhoff
-Secuela
 astro
 astrojs
+Backlink
 bezier
 bitstream
 clickarea
@@ -10,6 +8,7 @@ crossorigin
 cssnano
 evenodd
 favicons
+Imhoff
 linejoin
 lucida
 menlo
@@ -21,7 +20,13 @@ noreferrer
 onclick
 rgba
 secuela
+Secuela
 shibui
+sketchnotes
+Sketchnotes
 stefanimhoff
+subnavigation
+Subnavigation
+Subsubheadline
 tailwindcss
 typeof

src/components/Headline.astro

@@ -0,0 +1,20 @@
+---
+interface Props {
+	as?: string;
+	children?: any;
+	class?: string;
+}
+
+const { as = 'h2', class: className, ...props } = Astro.props;
+const Element = as;
+---
+
+<Element
+	class:list={[
+		'text-5 font-black tracking-tight mbe-10 mbs-16 first-of-type:mbs-0 dark:font-extrabold',
+		className,
+	]}
+	{...props}
+>
+	<slot />
+</Element>

src/components/Headline.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-	export let as = 'h2';
-</script>
-
-<svelte:element
-	this={as}
-	class={`text-5 font-black tracking-tight mbe-10 mbs-16 first-of-type:mbs-0 dark:font-extrabold ${
-		$$props.class || ''
-	}`}
->
-	<slot />
-</svelte:element>

src/components/PageTitle.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-	export let as = 'h1';
-</script>
-
-<svelte:element
-	this={as}
-	class={`text-7 font-black tracking-tight mbe-13 dark:font-extrabold ${$$props.class || ''}`}
->
-	<slot />
-</svelte:element>

src/components/RSSLink.astro

@@ -1,7 +1,7 @@
 ---
 import { Sprite } from 'astro-icon';
 
-import Subsubheadline from './Subsubheadline.svelte';
+import Subsubheadline from './Subsubheadline.astro';
 ---
 
 <div class="grow mbe-5 sm:mbe-0">

src/components/Subheadline.astro

@@ -0,0 +1,20 @@
+---
+interface Props {
+	as?: string;
+	children?: any;
+	class?: string;
+}
+
+const { as = 'h3', class: className, ...props } = Astro.props;
+const Element = as;
+---
+
+<Element
+	class:list={[
+		'text-4 font-black tracking-tight mbe-8 mbs-14 first-of-type:mbs-0 dark:font-extrabold',
+		className,
+	]}
+	{...props}
+>
+	<slot />
+</Element>

src/components/Subheadline.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-	export let as = 'h3';
-</script>
-
-<svelte:element
-	this={as}
-	class={`text-4 font-black tracking-tight mbe-8 mbs-14 first-of-type:mbs-0 dark:font-extrabold ${
-		$$props.class || ''
-	}`}
->
-	<slot />
-</svelte:element>

src/components/Subnavigation.astro

@@ -27,7 +27,7 @@ const currentPath = new URL(Astro.request.url).pathname;
 				<li>
 					<a
 						href={url}
-						class={`text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 ${
+						class={`font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 ${
 							currentPath === url && 'underline !decoration-accent decoration-4'
 						}`}
 					>

src/components/Subsubheadline.astro

@@ -0,0 +1,20 @@
+---
+interface Props {
+	as?: string;
+	children?: any;
+	class?: string;
+}
+
+const { as = 'h4', class: className, ...props } = Astro.props;
+const Element = as;
+---
+
+<Element
+	class:list={[
+		'text-3 font-black tracking-tight mbe-5 mbs-14 first-of-type:mbs-0 dark:font-extrabold',
+		className,
+	]}
+	{...props}
+>
+	<slot />
+</Element>

src/components/Subsubheadline.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-	export let as = 'h4';
-</script>
-
-<svelte:element
-	this={as}
-	class={`text-3 font-black tracking-tight mbe-5 mbs-14 first-of-type:mbs-0 dark:font-extrabold ${
-		$$props.class || ''
-	}`}
->
-	<slot />
-</svelte:element>

src/components/Title.astro

@@ -0,0 +1,17 @@
+---
+interface Props {
+	as?: string;
+	children?: any;
+	class?: string;
+}
+
+const { as = 'h1', class: className, ...props } = Astro.props;
+const Element = as;
+---
+
+<Element
+	class:list={['text-7 font-black tracking-tight mbe-13 dark:font-extrabold', className]}
+	{...props}
+>
+	<slot />
+</Element>

src/pages/index.astro

@@ -1,7 +1,8 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import Headline from '../components/Headline.astro';
 ---
 
 <Layout title="Homepage">
-	<h1>Homepage</h1>
+	<Headline>Homepage</Headline>
 </Layout>