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/+layout.svelte

@@ -1,15 +1,21 @@
 <script>
   import { page } from '$app/stores';
+  import { MetaTags } from 'svelte-meta-tags';
   import Navigation from '$lib/Navigation/Navigation.svelte';
   import Footer from '$lib/Footer/Footer.svelte';
   import PageTransition from './transition.svelte';
   import NotFound from '$lib/NotFound/NotFound.svelte';
+  import extend from 'just-extend';
 
   import '../app.css';
 
   export let data;
+
+  $: metaTags = extend(true, {}, data.baseMetaTags, $page.data.pageMetaTags);
 </script>
 
+<MetaTags {...metaTags} />
+
 <div class="overflow-hidden">
   <Navigation />
 

apps/classroomio-com/src/routes/+layout.ts

@@ -1,7 +1,50 @@
+import type { MetaTagsProps } from 'svelte-meta-tags';
+
 export const prerender = true;
 
 export function load({ url }) {
   return {
+    baseMetaTags: getBaseMetaTags(url),
     url: url.pathname
   };
 }
+
+function getBaseMetaTags(url: URL) {
+  const metatags = Object.freeze({
+    title: 'ClassroomIO – Launch Your Online Bootcamp In Minutes',
+    description:
+      'Launch your bootcamp quickly and affordably with ClassroomIO, the customizable online teaching platform.',
+    canonical: new URL(url.pathname, url.origin).href,
+    openGraph: {
+      type: 'website',
+      url: new URL(url.pathname, url.origin).href,
+      locale: 'en_IE',
+      title: 'ClassroomIO – Launch Your Online Bootcamp In Minutes',
+      description:
+        'Launch your bootcamp quickly and affordably with ClassroomIO, the customizable online teaching platform.',
+      siteName: 'ClassroomIO',
+      images: [
+        {
+          url: 'https://classroomio.com/classroomio-opengraph-image.png',
+          alt: 'ClassroomIO OG Image',
+          width: 1920,
+          height: 1080,
+          secureUrl: 'https://classroomio.com/classroomio-opengraph-image.png',
+          type: 'image/jpeg'
+        }
+      ]
+    },
+    twitter: {
+      handle: '@classroomio',
+      site: '@classroomio',
+      cardType: 'summary_large_image' as const,
+      title: 'ClassroomIO – Launch Your Online Bootcamp In Minutes',
+      description:
+        'Launch your bootcamp quickly and affordably with ClassroomIO, the customizable online teaching platform.',
+      image: 'https://classroomio.com/classroomio-opengraph-image.png',
+      imageAlt: 'ClassroomIO OG Image'
+    }
+  }) satisfies MetaTagsProps;
+
+  return metatags;
+}

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

@@ -43,7 +43,7 @@
           <a href={`/blog/${post.slug}`} class="group">
             <p class="font-bold text-lg py-2 group-hover:text-slate-500">{post.title}</p>
 
-            <p class="text-slate-500 py-4">{post.description}</p>
+            <p class="text-slate-500 pt-2 pb-4">{post.description}</p>
           </a>
 
           <div class="flex items-center justify-start gap-4 my-2">

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}`);