docs: 100 students milestone (#449)

* write blog post

* add link to dblocked

* improve blog SEO

* fix build error

* fix overide metatags issue

apps/classroomio-com/src/routes/blog/[slug]/+page.svelte

@@ -6,26 +6,6 @@
   export let data;
 </script>
 
-<!-- SEO -->
-<svelte:head>
-  <title>{data.meta.title} | ClassroomIO Blog</title>
-  <meta property="og:type" content="article" />
-  <meta property="og:title" content={data.meta.title} />
-
-  <meta property="og:type" content="website" />
-  <meta property="og:image:type" content="image/png" />
-  <meta property="og:image:width" content="1920" />
-  <meta property="og:image:height" content="1080" />
-  <meta property="og:image:secure_url" itemprop="image" content={data.meta.imageUrl} />
-
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta property="twitter:domain" content="classroomio.com" />
-  <meta property="twitter:url" content="https://www.classroomio.com/blog/" />
-  <meta name="twitter:title" content={data.meta.title} />
-  <meta name="twitter:description" content={data.meta.description} />
-  <meta name="twitter:image" content={data.meta.imageUrl} />
-</svelte:head>
-
 <div class=" mt-[10%] md:mt-16">
   {#if data}
     <article class="py-16">

apps/classroomio-com/src/routes/blog/[slug]/+page.ts

@@ -1,13 +1,43 @@
 import { error } from '@sveltejs/kit';
+import type { MetaTagsProps } from 'svelte-meta-tags';
 
 export async function load({ params }) {
   try {
     const blog = await import(`../../../blog/${params.slug}.md`);
 
+    const pageMetaTags = Object.freeze({
+      title: blog.metadata.title,
+      description: blog.metadata.description,
+      openGraph: {
+        title: blog.metadata.title,
+        description: blog.metadata.description,
+        images: [
+          {
+            url: blog.metadata.imageUrl,
+            alt: blog.metadata.title,
+            width: 280,
+            height: 200,
+            secureUrl: blog.metadata.imageUrl,
+            type: 'image/jpeg'
+          }
+        ]
+      },
+      twitter: {
+        handle: '@classroomio',
+        site: '@classroomio',
+        cardType: 'summary_large_image' as const,
+        title: blog.metadata.title,
+        description: blog.metadata.description,
+        image: blog.metadata.imageUrl,
+        imageAlt: `${blog.metadata.title} OG`
+      }
+    }) satisfies MetaTagsProps;
+
     return {
       content: blog.default,
       meta: blog.metadata,
-      slug: params.slug
+      slug: params.slug,
+      pageMetaTags
     };
   } catch (e) {
     throw error(404, `Could not find ${params.slug}`);