Merge pull request #34 from kuzudb/rdf-blog

RDF blog post by Semih

astro.config.mjs

@@ -8,6 +8,9 @@ import { VitePWA } from 'vite-plugin-pwa';
 import rehypeKatex from 'rehype-katex'; // relevant
 import remarkMath from 'remark-math'; // relevant
 import remarkToc from 'remark-toc';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeToc from 'rehype-toc';
 
 import { manifest } from './src/utils/manifest';
 
@@ -32,9 +35,9 @@ export default defineConfig({
           // Katex plugin options
         },
       ],
-      'rehype-slug',
-      ['rehype-autolink-headings', { behavior: 'append' }],
-      ['rehype-toc', { headings: ['h1', 'h2', 'h3'] }],
+      rehypeSlug,
+      [rehypeAutolinkHeadings, { behavior: 'append' }],
+      [rehypeToc, { headings: ['h1', 'h2', 'h3'] }],
     ],
   },
   integrations: [

src/content/post/2023-07-19-iamgraphviz.md

@@ -6,7 +6,7 @@ IAM network of an enterprise"
 pubDate: "July 19 2023"
 heroImage: "/img/2023-07-19-iamgraphviz/readonlyviz.png"
 categories: ["example"]
-authors: ["chang", {"name": "Chris Norman", "image": "https://www.commonfate.io/_next/image?url=%2Fheadshots%2Fchris.jpg&w=3840&q=75"}]
+authors: ["chang", {"name": "Chris Norman", "image": "https://www.commonfate.io/_next/image?url=%2Fheadshots%2Fchris.jpg&w=3840&q=75", "bio": "Commonfate"}]
 tags: ["visualization"]
 ---
 

src/layouts/BlogPost.astro

@@ -16,28 +16,35 @@ const { title, description, pubDate, heroImage, categories, tags, authors } = As
 <Base meta_title={title} description={description} image={heroImage} blogpost>
   <article>
     <div class="md:col-10 mb-12">
-      <h1 class="text-2xl md:text-4xl font-bold">{title}</h1>
+      <h1 class="text-2xl font-bold md:text-4xl">{title}</h1>
       <div class="text-text mt-4 flex flex-wrap text-zinc-800 dark:text-zinc-200">
         {
           authors?.map((author) => (
-            <div class="mx-3 mt-2 flex flex-wrap font-medium author-info__container">
+            <div class="author-info__container mx-3 mt-2 flex flex-wrap font-medium" style="margin-left: 0;">
               <figure>
                 <Image
                   alt={typeof author === 'string' ? allAuthors[author].name : author.name}
-                  class="mr-2 h-6 w-6 rounded-full"
+                  class="mr-2 rounded-full"
                   width={250}
                   height={250}
                   src={typeof author === 'string' ? allAuthors[author].image : author.image}
                   decoding="async"
                   loading="lazy"
+                  style={'height: 3rem; width: 3rem;'}
                 />
               </figure>
-              <span>{typeof author === 'string' ? allAuthors[author].name : author.name}</span>
+              <span style="max-width: 12rem;"
+              ><b>{typeof author === 'string' ? allAuthors[author].name : author.name}</b>
+                <br />
+                <small style="font-weight: 300;">
+                  {typeof author === 'string' ? allAuthors[author].bio : author.bio}</small>
+                </span>
             </div>
           ))
         }
-
-        <div class="mx-3 mt-2 flex flex-wrap items-center font-medium">
+      </div>
+      <div class="text-text mt-4 flex flex-wrap text-zinc-800 dark:text-zinc-200">
+        <div class="mx-3 mt-2 flex flex-wrap items-center font-medium" style="margin-left: 0;">
           <CalendarIcon />
           <FormattedDate date={pubDate} />
         </div>