Module extra

src/content/config.ts

@@ -26,8 +26,9 @@ const modulesCollection = defineCollection({
   type: "content",
   schema: z.object({
     name: z.string(),
-    url: z.string().url(),
-    description: z.string(),
+    urls: z.array(z.string().url()),
+    summary: z.string(),
+    extra_description: z.string().optional(),
   }),
 });
 

src/layouts/PageLayout.astro

@@ -5,19 +5,31 @@ import Hero from "@components/Hero.astro";
 export interface Props {
   title?: string;
   subtitle?: string;
+  extra_subtitle?: string;
   section?: string;
   image?: string;
 }
 
-const { title, subtitle, section, image } = Astro.props;
+const { title, subtitle, extra_subtitle, section, image } = Astro.props;
 ---
 
-<BaseLayout title={title} subtitle={subtitle} section={section} image={image}>
+<BaseLayout
+  title={title}
+  subtitle={subtitle}
+  extra_subtitle={extra_subtitle}
+  section={section}
+  image={image}
+>
   <Hero>
     <div class="container-lg relative">
       <h1 class="typo-h2">{title}</h1>
       {section && <h5 class="typo-h5 mb-4 uppercase text-blue-400/80">{section}</h5>}
       <p class="typo-blockquote mt-4 lg:mt-8">{subtitle}</p>
+      {
+        extra_subtitle && (
+          <p class="mt-2 text-xs font-light text-gray-200 lg:mt-6">{extra_subtitle}</p>
+        )
+      }
     </div>
   </Hero>
   <div class="container-lg py-10 lg:py-20">

src/pages/modules/[module].astro

@@ -39,7 +39,8 @@ const module_search_patterns = Object.keys(search_patterns)
 
 <PageLayout
   title={frontmatter.name}
-  subtitle={frontmatter.description}
+  subtitle={frontmatter.summary}
+  extra_subtitle={frontmatter.extra_description}
   section="Supported Tool"
   md_github_url={gh_url}
   image={frontmatter.social_image
@@ -49,7 +50,6 @@ const module_search_patterns = Object.keys(search_patterns)
       )}`}
 >
   <div class="prose max-w-none dark:prose-invert">
-    <h2>Description</h2>
     <Content />
     {
       Object.keys(module_search_patterns).length > 0 && (

src/pages/modules/index.astro

@@ -26,13 +26,13 @@ const modules = await getCollection("modules");
     </a>.
   </p>
   <form method="get">
-    <label for="filter" class="text-gray-500 md:ml-2 dark:text-gray-300">Search for a tool:</label>
+    <label for="filter" class="text-gray-500 dark:text-gray-300 md:ml-2">Search for a tool:</label>
     <div class="relative inline-block w-full whitespace-nowrap sm:w-96">
       <input
         id="filter"
         name="filter"
         type="text"
-        class="peer my-3 inline-block w-full rounded-sm border-gray-300 bg-black/5 p-3 shadow-sm outline-0 focus:border-blue-500/20 focus:ring focus:ring-blue-500/20 focus:ring-opacity-50 sm:mx-3 dark:bg-black/20"
+        class="peer my-3 inline-block w-full rounded-sm border-gray-300 bg-black/5 p-3 shadow-sm outline-0 focus:border-blue-500/20 focus:ring focus:ring-blue-500/20 focus:ring-opacity-50 dark:bg-black/20 sm:mx-3"
         placeholder="Tool name, description or keyword"
       />
       <button
@@ -44,28 +44,28 @@ const modules = await getCollection("modules");
     </div>
     <div class="flex flex-col">
       <div class="grid-cols-4 lg:grid">
-        <div class="typo-intro bg-gray-200 px-4 py-2 lg:hidden dark:bg-zinc-700">Tool</div>
-        <div class="typo-intro hidden bg-gray-200 px-4 py-2 lg:block dark:bg-zinc-700">
+        <div class="typo-intro bg-gray-200 px-4 py-2 dark:bg-zinc-700 lg:hidden">Tool</div>
+        <div class="typo-intro hidden bg-gray-200 px-4 py-2 dark:bg-zinc-700 lg:block">
           Tool Name
         </div>
-        <div class="typo-intro col-span-3 hidden bg-gray-200 px-4 py-2 lg:block dark:bg-zinc-700">
+        <div class="typo-intro col-span-3 hidden bg-gray-200 px-4 py-2 dark:bg-zinc-700 lg:block">
           Description
         </div>
       </div>
       {
         modules &&
           modules.map((module) => (
             <div class="module-row grid-cols-4 lg:grid">
-              <div class="flex items-center border-gray-200 px-4 pb-0 pt-2 lg:border-b lg:pb-2 dark:border-gray-700">
+              <div class="flex items-center border-gray-200 px-4 pb-0 pt-2 dark:border-gray-700 lg:border-b lg:pb-2">
                 <a
                   href={"/modules/" + module.id.split("/").pop().replace(".md", "")}
                   class="typo-body text-blue-600 dark:text-blue-400"
                 >
                   {module.data.name}
                 </a>
               </div>
-              <div class="col-span-3 flex items-center border-b border-gray-200 px-4 pb-3 text-gray-600 lg:py-2 dark:border-gray-700 dark:text-gray-300">
-                {module.data.description}
+              <div class="col-span-3 flex items-center border-b border-gray-200 px-4 pb-3 text-gray-600 dark:border-gray-700 dark:text-gray-300 lg:py-2">
+                {module.data.summary}
               </div>
             </div>
           ))