docs: 100 students milestone (#449)

* write blog post * add link to dblocked * improve blog SEO * fix build error * fix overide metatags issue
2024-08-25 21:35:59 +01:00
parent a702fdd4e2
commit 1b84d98398
15 changed files with 301 additions and 142 deletions
@@ -6,15 +6,15 @@
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <meta name="theme-color" content="#333333" />

-  <title>ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes</title>
+  <!-- <title>ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes</title>
  <meta name="description" content="ClassroomIO" />
  <meta name="application-name" content="ClassroomIO" />
  <meta name="apple-mobile-web-app-title" content="ClassroomIO" />
  <meta name="theme-color" content="#ffffff" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" /> -->

  <!-- Facebook Meta Tags -->
-  <meta property="og:url" content="https://www.classroomio.com/" />
+  <!-- <meta property="og:url" content="https://www.classroomio.com/" />
  <meta property="og:image" itemprop="image" content="https://classroomio.com/classroomio-opengraph-image.png" />
  <meta property="og:title" content="ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes" />
  <meta property="og:description"
@@ -33,7 +33,7 @@
  <meta name="twitter:title" content="ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes" />
  <meta name="twitter:description"
    content="Launch your bootcamp quickly and affordably with ClassroomIO, the customizable online teaching platform." />
-  <meta name="twitter:image" content="https://classroomio.com/classroomio-opengraph-image.png" />
+  <meta name="twitter:image" content="https://classroomio.com/classroomio-opengraph-image.png" /> -->

  <!-- <link rel="stylesheet" href="global.css"> -->
  <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
@@ -1,6 +1,7 @@
 ---
 title: 'Google Open Source Peer Bonus'
 description: 'I am happy to announce that we were selected for the 2024 Google Peer Open Source Bonus'
+imageUrl: 'https://assets.cdn.clsrio.com/blog/google-os-peer-bonus-classroomio.png'
 date: '2024-05-25'
 author: Rotimi Best
 avatar: /blog/best.jpg
@@ -0,0 +1,41 @@
+---
+title: 'Our first customer to hit 100 students'
+description: 'Paranv Singhal, a Web3 instructor, is the first customer to hit 100 students on ClassroomIO.'
+imageUrl: 'https://assets.cdn.clsrio.com/blog/pranav-web3-bootcamp-hit-100students.png'
+date: '2024-08-25'
+author: Rotimi Best
+avatar: /blog/best.jpg
+role: Founder
+tags: ['Customers', 'Testimonials']
+published: true
+---
+
+![pranav-web3-bootcamp-hit-100students](https://assets.cdn.clsrio.com/blog/pranav-web3-bootcamp-hit-100students.png)
+_Paranv Singhal, a ClassroomIO customer hits 100 students in his Web3 bootcamp._
+
+Today is an exciting day for both Pranav and me.
+
+A few months ago, Pranav reached out to share his idea for a Web3 course he's been working on. He wanted to share it with as many Web3 enthusiasts as possible.
+
+He started building the course site using Framer, but he told me it was becoming quite expensive. He had to create a template, install plugins, and each of these had its own monthly cost.
+
+He then asked me how much it would cost to launch his course on ClassroomIO.I replied that we only have one paid plan, which costs a flat fee of $35 per month or $350 per year. This plan includes many features, such as 10,000 students, unlimited collaborators, Slack support, and much more.
+
+It was a no-brainer for him, and long story short, Pranav is a happy customer with over 100 students.
+
+Here is what he has to say:
+
+![pranav-experience-using-classroomio](https://assets.cdn.clsrio.com/blog/review-by-pranav.jpeg)
+_Pranav's experience using ClassroomIO_
+
+> ClassroomIO really helped me [bootstrap my program](https://dblocked.io/).
+>
+> The dashboard is extremely intuitive. I could navigate most of it without any help / support. Coming from framer, I can honestly say that I am extremely greatful that I found ClassroomIO.
+>
+> PS- Rotimi is also extremely supportive in new feature requests. I love how responsive he is towards all feedback
+
+Are you looking to launch your course or bootcamp? Register for a free account today and start building.
+
+<div class="flex justify-center">
+  <a href="https://app.classroomio.com/login" target="_blank" nofollow="nofollow" class="bg-black text-white px-4 py-2 rounded-md">Register for free</a>
+</div>
@@ -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 />

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