feat(blog): made each post title a link to the blog post itself.

Author: corp-0

Diff for: components/blog/post.tsx

@@ -1,9 +1,25 @@
 import {BlogPost} from "../../types/blogPost";
 import Section from "./section";
 import {toAgoTime} from "../../utils/timeUtils";
+import Link from "next/link";
+import Capsule from "../uiLibrary/capsule";
+import Dict = NodeJS.Dict;
+
+const colourByType: Dict<string> = {
+    'announcement': 'blue',
+    'weekly': 'indigo',
+    'community': 'green',
+}
+
+const textByType: Dict<string> = {
+    'announcement': 'Announcement',
+    'weekly': 'Weekly Update',
+    'community': 'Community Highlight',
+}
+
 
 const Post = (props: BlogPost) => {
-    const {title, author, date_created, sections} = props;
+    const {title, author, date_created, slug, type, sections} = props;
 
     return (
         <>
@@ -13,9 +29,11 @@ const Post = (props: BlogPost) => {
                     <address className={'flex items-center mb-6 not-italic'}>
                         <div className="inline-flex items-center mr-3 text-sm text-white">
                             <div>
-                                <h1 className="mb-4 text-4xl text-center font-extrabold leading-tight lg:mb-6 text-white">
-                                    {title}
-                                </h1>
+                                <Link href={`/blog/${slug}`}>
+                                    <h1 className="mb-4 text-4xl text-center font-extrabold leading-tight lg:mb-6 text-white hover:underline hover:cursor-pointer">
+                                        {title}
+                                    </h1>
+                                </Link>
                                 <p className="text-xl font-bold text-white">by {author}</p>
                                 <p className="text-base font-light text-gray-500 dark:text-gray-400">
                                     <time dateTime={date_created?.toString()} title={date_created?.toString()}>

Diff for: components/uiLibrary/capsule.tsx

@@ -0,0 +1,22 @@
+import classNames from "classnames";
+interface CapsuleProps {
+    text: string
+    colour: string
+}
+
+export default function Capsule(props: CapsuleProps) {
+    const {text, colour} = props;
+    const classes = classNames(
+        'inline-flex items-center justify-center px-2 py-1 mr-2 text-xs font-bold leading-none  rounded',
+        {
+            'text-indigo-100 bg-indigo-600': colour === 'indigo',
+            'text-green-100 bg-green-600': colour === 'green',
+            'text-blue-100 bg-blue-600': colour === 'blue',
+        });
+
+    return (
+        <span className={classes}>
+            {text}
+        </span>
+    )
+}