wip

package.json

@@ -35,6 +35,7 @@
     "@ryanatkn/eslint-config": "^0.4.0",
     "@ryanatkn/fuz": "^0.108.4",
     "@ryanatkn/fuz_blog": "^0.1.5",
+    "@ryanatkn/fuz_mastodon": "^0.16.0",
     "@ryanatkn/gro": "^0.129.14",
     "@ryanatkn/moss": "^0.7.1",
     "@sveltejs/adapter-static": "^3.0.2",

src/routes/blog/1/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" context="module">
 	import type {Blog_Post_Data} from '@ryanatkn/fuz_blog/blog.js';
 	import Blog_Post from '@ryanatkn/fuz_blog/Blog_Post.svelte';
+	import Toot from '@ryanatkn/fuz_mastodon/Toot.svelte';
 
 	export const post = {
 		title: 'Hello webdevladder blog',
@@ -9,6 +10,10 @@
 		date_modified: '2024-07-10T22:07:32.473Z',
 		summary: "creating webdevladder's blog",
 		tags: ['webdev', 'svelte', 'typescript', 'sveltekit', 'vite'],
+		comments: {
+			url: 'https://mastodon.social/@webdevladder/112764548975084845',
+			type: 'mastodon',
+		},
 	} satisfies Blog_Post_Data;
 </script>
 
@@ -17,26 +22,44 @@
 </script>
 
 <Blog_Post {post}>
-	<p>
-		This blog was created with <code>fuz_blog</code>, a SvelteKit library for making blogs for
-		developers. (<a href="https://blog.fuz.dev">blog.fuz.dev</a>,
-		<a href="https://github.com/ryanatkn/fuz_blog">source code</a>)
-	</p>
-	<p>
-		If you're interested in the full videos where I made the software, extracting it from my
-		personal blog:
-	</p>
-	<ol>
-		<li>
-			<a href="https://www.youtube.com/watch?v=wP9qghWkTLc"
-				>Coding a blog creation library for SvelteKit developers from scratch</a
-			>
-		</li>
-		<li>
-			<a href="https://www.youtube.com/watch?v=dh_6Vyjbuiw"
-				>Extracting fuz_blog from my personal blog and publishing to npm</a
-			>
-		</li>
-	</ol>
-	<p>Stay tuned for more.</p>
+	<section>
+		<p>
+			This blog was created with <code>fuz_blog</code>, a SvelteKit library for making blogs for
+			developers. (<a href="https://blog.fuz.dev">blog.fuz.dev</a>,
+			<a href="https://github.com/ryanatkn/fuz_blog">source code</a>)
+		</p>
+		<p>
+			If you're interested in the full videos where I made the software, extracting it from my
+			personal blog:
+		</p>
+		<ol>
+			<li>
+				<a href="https://www.youtube.com/watch?v=wP9qghWkTLc"
+					>Coding a blog creation library for SvelteKit developers from scratch</a
+				>
+			</li>
+			<li>
+				<a href="https://www.youtube.com/watch?v=dh_6Vyjbuiw"
+					>Extracting fuz_blog from my personal blog and publishing to npm</a
+				>
+			</li>
+		</ol>
+		<p>Stay tuned for more.</p>
+	</section>
+	<section>
+		<h2>Comments</h2>
+		<!-- TODO post.comments.url instead -->
+		<!-- TODO the storage key is weird -->
+		<!-- TODO use local cache in dev -->
+		<!-- TODO remove `:any` when fuz_mastodon types are fixed -->
+		<Toot
+			url={post.comments.url}
+			replies
+			storage_key="1_comments"
+			initial_autoload={true}
+			reply_filter_rules={(item: any) => [
+				{type: 'favourited_by', favourited_by: [item.account.acct]},
+			]}
+		/>
+	</section>
 </Blog_Post>

src/routes/blog/feed.ts

@@ -22,6 +22,7 @@ export const feed: Blog_Feed = {
 			date_modified: '2024-07-10T22:07:32.473Z',
 			summary: "creating webdevladder's blog",
 			tags: ['webdev', 'svelte', 'typescript', 'sveltekit', 'vite'],
+			comments: {url: 'https://mastodon.social/@webdevladder/112764548975084845', type: 'mastodon'},
 		},
 	],
 };

src/routes/package.ts

@@ -34,6 +34,7 @@ export const package_json = {
 		'@ryanatkn/eslint-config': '^0.4.0',
 		'@ryanatkn/fuz': '^0.108.4',
 		'@ryanatkn/fuz_blog': '^0.1.5',
+		'@ryanatkn/fuz_mastodon': '^0.16.0',
 		'@ryanatkn/gro': '^0.129.14',
 		'@ryanatkn/moss': '^0.7.1',
 		'@sveltejs/adapter-static': '^3.0.2',