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/config/allAuthors.json

@@ -1,30 +1,37 @@
 {
   "team": {
     "name": "Kùzu Team",
-    "image": "https://kuzudb.com/img/blog/team.jpg"
+    "image": "https://kuzudb.com/img/blog/team.jpg",
+    "bio": "Developers of Kùzu Inc."
   },
   "semih": {
     "name": "Semih Salihoğlu",
-    "image": "https://kuzudb.com/img/blog/semih.jpg"
+    "image": "https://kuzudb.com/img/team/semih_thumbnail.png",
+    "bio": "CEO of Kùzu Inc. & Associate Prof. at UWaterloo"
   },
   "chang": {
     "name": "Chang Liu",
-    "image": "https://kuzudb.com/img/blog/chang.gif"
+    "image": "https://kuzudb.com/img/team/chang_thumbnail.png",
+    "bio": "DevOps Engineer & Co-founder of Kùzu Inc."
   },
   "guodong": {
     "name": "Guodong Jin",
-    "image": "https://kuzudb.com/img/blog/guodong.jpg"
+    "image": "https://kuzudb.com/img/team/guodong_thumbnail.png",
+    "bio": "Software Engineer & Co-founder of Kùzu Inc."
   },
   "xiyang": {
     "name": "Xiyang Feng",
-    "image": "https://kuzudb.com/img/blog/xiyang.jpg"
+    "image": "https://kuzudb.com/img/team/xiyang_thumbnail.png",
+    "bio": "Software Engineer & Co-founder of Kùzu Inc."
   },
   "ziyi": {
     "name": "Ziyi Chen",
-    "image": "https://kuzudb.com/img/blog/ziyi.jpg"
+    "image": "https://kuzudb.com/img/team/ziyi_thumbnail.png",
+    "bio": "Software Engineer & Co-founder of Kùzu Inc."
   },
   "prashanth": {
     "name": "Prashanth Rao",
-    "image": "https://kuzudb.com/img/blog/prashanth.png"
+    "image": "https://kuzudb.com/img/team/prashanth_thumbnail.png",
+    "bio": "AI Engineer at Kùzu Inc."
   }
 }

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>