feat: classroomio blog v1 (#142)

* style: Improved font size of the answers in the FAQ section of the landing page * working on the classroomio blog * there is a bit of a git issue * changed the footer route * Merge branch 'main' into issue-139 * Added syntax higlighting,blockquotes styling and image stylings * restyle and add first blog * make tagline match home page * add docs route --------- Co-authored-by: Rotimi Best <[email protected]>
2024-02-02 08:18:26 +01:00
parent cadfa81913
commit f828b170b9
32 changed files with 743 additions and 152 deletions
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import Chip from '$lib/Chip/Chip.svelte';
+  import { formatDate } from '$lib/utils/formatDate';
+  import { ChevronLeft } from 'carbon-icons-svelte';
+
+  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} />
+</svelte:head>
+
+<div class=" mt-[10%] md:mt-16">
+  {#if data}
+    <article class="py-16">
+      <!-- Title -->
+      <hgroup class="flex flex-col items-center justify-center text-center w-full">
+        <p class="text-sm text-gray-500">{formatDate(data.meta.date)}</p>
+        <p class="font-bold text-3xl py-2 text-center md:w-[60%]">{data.meta.title}</p>
+      </hgroup>
+      <main class="mx-auto max-w-screen-md px-4 lg:px-8">
+        <div class="flex items-center justify-start gap-4 my-2 border-y border-gray-200 py-4">
+          <img src={data.meta.avatar} alt="avatar" class="w-10 h-10 rounded-full" />
+          <span>
+            <p class="font-semibold">{data.meta.author}</p>
+            <p class="text-gray-500">{data.meta.role}</p>
+          </span>
+        </div>
+
+        <!-- Post -->
+        <div class="prose pt-2 pb-4 border-b border-gray-200">
+          <svelte:component this={data.content} />
+          <!-- Tags -->
+          <div class="flex gap-2 py-4">
+            {#each data.meta.tags as tag}
+              <Chip label={tag} />
+            {/each}
+          </div>
+        </div>
+
+        <a
+          href="/blog"
+          class="flex font-medium items-center gap-2 text-slate-700 text-lg underline my-10"
+        >
+          <ChevronLeft class=" w-6 h-6 font-medium" /> Back to all posts
+        </a>
+      </main>
+    </article>
+  {/if}
+</div>
+
+<style>
+  article {
+    margin-inline: auto;
+  }
+
+  h1 {
+    text-transform: capitalize;
+  }
+</style>