Address #3 (#15)

* Address #3

* Fix css format

src/components/mdx/Code.astro

@@ -13,7 +13,7 @@ import CheckIcon from "@icons/CheckIcon.astro";
     const button = code.querySelector(".copy-button");
     const check = code.querySelector(".check-span");
 
-    button!.addEventListener("click", () => {
+    button?.addEventListener("click", () => {
       navigator.clipboard.writeText(code.textContent?.trim() || "");
       check?.classList.remove("opacity-0");
       button?.classList.add("opacity-0");

src/config/allAuthors.json

@@ -0,0 +1,30 @@
+{
+  "team": {
+    "name": "Kùzu Team",
+    "image": "https://kuzudb.com/img/blog/team.jpg"
+  },
+  "semih": {
+    "name": "Semih Salihoğlu",
+    "image": "https://kuzudb.com/img/blog/semih.jpg"
+  },
+  "chang": {
+    "name": "Chang Liu",
+    "image": "https://kuzudb.com/img/blog/chang.gif"
+  },
+  "guodong": {
+    "name": "Guodong Jin",
+    "image": "https://kuzudb.com/img/blog/guodong.jpg"
+  },
+  "xiyang": {
+    "name": "Xiyang Feng",
+    "image": "https://kuzudb.com/img/blog/xiyang.jpg"
+  },
+  "ziyi": {
+    "name": "Ziyi Chen",
+    "image": "https://kuzudb.com/img/blog/ziyi.jpg"
+  },
+  "prashanth": {
+    "name": "Prashanth Rao",
+    "image": "https://kuzudb.com/img/blog/prashanth.png"
+  }
+}

src/content/config.ts

@@ -9,7 +9,7 @@ const post = defineCollection({
     heroImage: z.string().optional(),
     categories: z.array(z.string()).default(['others']),
     tags: z.array(z.string()).default(['others']),
-    authors: z.array(z.string()).default(['gndx']),
+    authors: z.array(z.any()).default(['team']),
   }),
 });
 

src/content/post/2023-05-10-kuzu-pyg-rb.md

@@ -5,7 +5,7 @@ description: "A walkthrough on how to use Kùzu as a Pytorch Geometric (PyG) rem
 pubDate: "May 10 2023"
 heroImage: "/img/default.png"
 categories: ["tutorial"]
-authors: ["team"]
+authors: ["chang", "semih"]
 tags: ["pytorch-geometric", "gnn"]
 ---
 

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

@@ -6,7 +6,7 @@ IAM network of an enterprise"
 pubDate: "July 19 2023"
 heroImage: "/img/2024-01-04-llms-graphs-part-1/rag-using-structured-data.png"
 categories: ["example"]
-authors: ["team"]
+authors: ["chang", {"name": "Chris Norman", "image": "https://www.commonfate.io/_next/image?url=%2Fheadshots%2Fchris.jpg&w=3840&q=75"}]
 tags: ["visualization"]
 ---
 

src/content/post/2023-10-25-kuzuexplorer.md

@@ -6,7 +6,7 @@ Cypher query results during prototyping phase."
 pubDate: "October 25 2023"
 heroImage: "/img/2023-10-25-kuzuexplorer/query-result-node-link-view.png"
 categories: ["example"]
-authors: ["tutorial"]
+authors: ["chang"]
 tags: ["visualization"]
 ---
 

src/content/post/2024-01-04-llms-graphs-part-1.md

@@ -5,7 +5,7 @@ description: "An overview of the area of retrieval augmented generation (RAG) us
 pubDate: "January 04 2024"
 heroImage: "/img/2024-01-04-llms-graphs-part-1/rag-using-structured-data.png"
 categories: ["concept"]
-authors: ["team"]
+authors: ["semih"]
 tags: ["vision", "overview", "llm", "rag"]
 ---
 

src/content/post/2024-01-15-llms-graphs-part-2.md

@@ -5,7 +5,7 @@ description: "Uncovering the design space of RAG systems that use unstructured d
 pubDate: "January 15 2024"
 heroImage: "/img/2024-01-15-llms-graphs-part-2/triples-based-rag-overview.png"
 categories: ["concept"]
-authors: ["team"]
+authors: ["semih"]
 tags: ["vision", "overview", "llm", "rag"]
 ---
 

src/content/post/2024-01-24-transforming-your-data-to-graphs-1.md

@@ -5,7 +5,7 @@ description: "Graph thinking for relational data, and the ETL workflow in Kùzu"
 pubDate: "January 24 2024"
 heroImage: "/img/2024-01-24-transforming-your-data-1/edge_tables.png"
 categories: ["tutorial"]
-authors: ["team"]
+authors: ["prashanth"]
 tags: ["data-engineering", "etl"]
 ---
 

src/content/post/2024-02-23-transforming-your-data-to-graphs-2.md

@@ -5,7 +5,7 @@ description: "Analyzing a transaction network using a combination of Cypher quer
 pubDate: "February 23 2024"
 heroImage: "/img/2024-02-23-transforming-your-data-2/query_disputed_transactions_vicinity.png"
 categories: ["tutorial"]
-authors: ["team"]
+authors: ["prashanth"]
 tags: ["data-science", "networkx", "graph-algorithms", "analysis"]
 ---
 

src/layouts/Base.astro

@@ -97,9 +97,6 @@ const ogImage = createOgImage({
     <!-- twitter-image -->
     <meta name="twitter:image" content={ogImage} />
     <meta name="twitter:card" content="summary_large_image" />
-
-    <script is:inline src="/registerSW.js"></script>
-    <link rel="manifest" href="/manifest.webmanifest" />
     <ViewTransitions />
   </head>
   <body class="bg-white dark:bg-zinc-900/95">

src/layouts/BlogPost.astro

@@ -1,51 +1,50 @@
 ---
-import Base from "@layouts/Base.astro";
-import type { CollectionEntry } from "astro:content";
-import FormattedDate from "@components/FormattedDate.astro";
-import CalendarIcon from "@icons/CalendarIcon.astro";
-import CategoryIcon from "@icons/CategoryIcon.astro";
-import { Image } from "astro:assets";
-import config from "@config/config.json";
-import { slugify } from "@utils/slug";
-import authors from '../config/authors.json';
+import Base from '@layouts/Base.astro';
+import type { CollectionEntry } from 'astro:content';
+import FormattedDate from '@components/FormattedDate.astro';
+import CalendarIcon from '@icons/CalendarIcon.astro';
+import CategoryIcon from '@icons/CategoryIcon.astro';
+import { Image } from 'astro:assets';
+import { slugify } from '@utils/slug';
+import allAuthors from '../config/allAuthors.json';
 
-type Props = CollectionEntry<"post">["data"];
+type Props = CollectionEntry<'post'>['data'];
 
-const { title, description, pubDate, heroImage, categories, tags } =
-  Astro.props;
+const { title, description, pubDate, heroImage, categories, tags, authors } = Astro.props;
 ---
 
 <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>
-      <div class="mt-4 flex flex-wrap text-text text-zinc-800 dark:text-zinc-200">
-        <div class="flex flex-wrap font-medium mt-2">
-          <figure>
-            <Image
-              alt={config.author.title}
-              class="mr-2 h-6 w-6 rounded-full"
-              width={25}
-              height={250}
-              src={config.author.avatar}
-              decoding="async"
-              loading="lazy"
-            />
-          </figure>
-          <span>{config.author.name}</span>
-        </div>
-        <div class="mx-3 flex items-center flex-wrap font-medium mt-2">
+      <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">
+              <figure>
+                <Image
+                  alt={typeof author === 'string' ? allAuthors[author].name : author.name}
+                  class="mr-2 h-6 w-6 rounded-full"
+                  width={250}
+                  height={250}
+                  src={typeof author === 'string' ? allAuthors[author].image : author.image}
+                  decoding="async"
+                  loading="lazy"
+                />
+              </figure>
+              <span>{typeof author === 'string' ? allAuthors[author].name : author.name}</span>
+            </div>
+          ))
+        }
+
+        <div class="mx-3 mt-2 flex flex-wrap items-center font-medium">
           <CalendarIcon />
           <FormattedDate date={pubDate} />
         </div>
-        <div class="mx-3 flex items-center flex-wrap font-medium mt-2">
+        <div class="mx-3 mt-2 flex flex-wrap items-center font-medium">
           <CategoryIcon />
           {
             categories?.slice(0, 1).map((category) => (
-              <a
-                href={`/categories/${slugify(category)}`}
-                class="mr-2 hover:text-primary font-medium capitalize"
-              >
+              <a href={`/categories/${slugify(category)}`} class="hover:text-primary mr-2 font-medium capitalize">
                 {category}
               </a>
             ))
@@ -54,22 +53,22 @@ const { title, description, pubDate, heroImage, categories, tags } =
       </div>
     </div>
     <head>
-        <link
-          rel="stylesheet"
-          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
-          integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV"
-          crossorigin="anonymous"
-        >
+      <link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
+        integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV"
+        crossorigin="anonymous"
+      />
     </head>
-    <div class="prose prose-orange prose-md md:prose-lg lg:prose-xl min-w-full">
+    <div class="prose-md prose prose-orange min-w-full md:prose-lg lg:prose-xl">
       <slot />
     </div>
     <div class="mt-8">
       {
         tags?.map((tag) => (
           <a
             href={`/tags/${slugify(tag)}`}
-            class="capitalize inline-block bg-zinc-200 rounded-full px-3 py-1 text-sm font-semibold text-zinc-700 mr-2 mb-2 dark:bg-zinc-900 dark:text-zinc-400"
+            class="mb-2 mr-2 inline-block rounded-full bg-zinc-200 px-3 py-1 text-sm font-semibold capitalize text-zinc-700 dark:bg-zinc-900 dark:text-zinc-400"
           >
             #{tag}
           </a>

src/styles/global.css

@@ -97,3 +97,7 @@ input#nav-toggle:checked ~ #nav-menu {
 .dark #themeToggle:hover .moon {
   @apply stroke-zinc-200;
 }
+
+div.author-info__container:first-child {
+  margin-left: 0;
+}