Introduce blog post tab

Posts previews are automatically populated from social data from labs public URLs

Author: alexp-sssup

package-lock.json

@@ -19,6 +19,7 @@
 		"@xterm/xterm": "^5.5.0",
 		"autoprefixer": "^10.4.20",
 		"labs": "[email protected]:leaningtech/labs.git",
+		"node-html-parser": "^6.1.13",
 		"postcss": "^8.4.47",
 		"postcss-discard": "^2.0.0",
 		"svelte": "^4.2.7",

package.json

@@ -17,6 +17,7 @@ export default {
 				case '.fa-star:before':
 				case '.fa-circle:before':
 				case '.fa-trash-can:before':
+				case '.fa-book-open:before':
 					return false;
 			}
 			return true;

postcss.config.js

@@ -0,0 +1,9 @@
+<script>
+	export let title;
+	export let image;
+	export let url;
+</script>
+<a href={url} target="_blank"><div class="bg-neutral-700 hover:bg-neutral-500 p-2 rounded-md">
+	<img class="w-56 h-32 object-fit" src={image}>
+	<h2 class="text-sm font-bold">{title}</h2>
+</div></a>

src/lib/BlogPost.svelte

@@ -0,0 +1,14 @@
+<script>
+	import BlogPost from './BlogPost.svelte';
+	import { page } from '$app/stores';
+</script>
+<h1 class="text-lg font-bold">Blog posts</h1>
+<div class="overflow-y-scroll scrollbar flex flex-col gap-2">
+{#each $page.data.posts as post}
+	<BlogPost
+		title={post.title}
+		image={post.image}
+		url={post.url}
+	/>
+{/each}
+</div>

src/lib/PostsTab.svelte

@@ -4,6 +4,7 @@
 	import NetworkingTab from './NetworkingTab.svelte';
 	import CpuTab from './CpuTab.svelte';
 	import DiskTab from './DiskTab.svelte';
+	import PostsTab from './PostsTab.svelte';
 	import DiscordTab from './DiscordTab.svelte';
 	import GitHubTab from './GitHubTab.svelte';
 	import { cpuActivity, diskActivity } from './activities.js'
@@ -14,6 +15,7 @@
 		{ icon: 'fas fa-microchip', info: 'CPU', activity: cpuActivity },
 		{ icon: 'fas fa-compact-disc', info: 'Disk', activity: diskActivity },
 		null,
+		{ icon: 'fas fa-book-open', info: 'Posts', activity: null },
 		{ icon: 'fab fa-discord', info: 'Discord', activity: null },
 		{ icon: 'fab fa-github', info: 'GitHub', activity: null },
 	];
@@ -53,6 +55,8 @@
 			<CpuTab/>
 		{:else if activeInfo === 'Disk'}
 			<DiskTab on:reset/>
+		{:else if activeInfo === 'Posts'}
+			<PostsTab/>
 		{:else if activeInfo === 'Discord'}
 			<DiscordTab/>
 		{:else if activeInfo === 'GitHub'}

src/lib/SideBar.svelte

@@ -0,0 +1,43 @@
+import { parse } from 'node-html-parser';
+import { read } from '$app/server';
+
+var posts = [
+	"https://labs.leaningtech.com/blog/join-the-webvm-hackathon",
+	"https://labs.leaningtech.com/blog/mini-webvm-your-linux-box-from-dockerfile-via-wasm",
+	"https://labs.leaningtech.com/blog/webvm-virtual-machine-with-networking-via-tailscale",
+	"https://labs.leaningtech.com/blog/webvm-server-less-x86-virtual-machines-in-the-browser",
+];
+
+async function getPostData(u)
+{
+	var ret = { title: null, image: null, url: u };
+	var response = await fetch(u);
+	var str = await response.text();
+	var root = parse(str);
+	var tags = root.getElementsByTagName("meta");
+	for(var i=0;i<tags.length;i++)
+	{
+		var metaName = tags[i].getAttribute("property");
+		var metaContent = tags[i].getAttribute("content");
+		switch(metaName)
+		{
+			case "og:title":
+				ret.title = metaContent;
+				break;
+			case "og:image":
+				ret.image = metaContent;
+				break;
+		}
+	}
+	return ret;
+}
+
+export async function load()
+{
+	var ret = [];
+	for(var i=0;i<posts.length;i++)
+	{
+		ret.push(await getPostData(posts[i]));
+	}
+	return { posts: ret };
+}