Working on responsive layout

Author: shawn-mcgee

idea/patchwork_electronics.md

@@ -3,7 +3,8 @@ title: Patchwork Electronics
 author: Shawn McGee
 tags: [
   "patchwork",
-  "electronics"
+  "electronics",
+  "developer"
 ]
 ---
 

src/pages/idea/index.astro

@@ -19,9 +19,9 @@ const ideas = (await getCollection("ideas"))
       <div class="h-4"></div>
       <span class="text-6xl font-bold text-center">Ideas</span>
       <div class="h-4"></div>
-      <div class="w-full grid grid-cols-1 max-w-xs sm:grid-cols-2 sm:max-w-2xl lg:grid-cols-3 lg:max-w-5xl">
+      <div class="w-full flex flex-row flex-wrap max-w-xs justify-center sm:max-w-2xl lg:max-w-5xl">
         { ideas.map(idea => (
-          <a href={`/idea/${Idea.slug(idea)}`} class="flex flex-row items-center p-4 rounded-lg hover:bg-base-200">
+          <a href={`/idea/${Idea.slug(idea)}`} class="flex flex-row flex-1 max-w-xs items-center p-4 rounded-lg hover:bg-base-200">
             { !Idea.isDraft(idea) && <Lightbulb    class="w-10 h-10"/> }
             {  Idea.isDraft(idea) && <Construction class="w-10 h-10"/> }
             <div class="divider divider-horizontal"></div>
@@ -32,7 +32,6 @@ const ideas = (await getCollection("ideas"))
           </a>
         ))}
       </div>
-
     </div>
   </Drawer>
 </Layout>

src/pages/idea/tag/[tag].astro

@@ -11,7 +11,7 @@ export async function getStaticPaths() {
       if(!tags.includes(tag)) tags.push(tag)
     })
     return tags
-  }, new Array<string>).map(tag => ({
+  }, new Array<string>()).map(tag => ({
     params: { tag }
   }))
 }
@@ -25,24 +25,22 @@ const ideas = (await getCollection("ideas"))
 <Layout>
   <Drawer>
     <div class="flex flex-col w-full items-center">
+      <div class="h-6"></div>
+      <span class="text-4xl font-bold"># {tag}</span> 
       <div class="h-4"></div>
-      <span class="text-6xl font-bold border-2 rounded-full px-4 py-2"># {tag}</span>
-      <div class="h-4"></div>
-      { ideas.map(idea => (
-        <a href={`/idea/${Idea.slug(idea)}`} class="flex flex-row items-center p-4 rounded-lg hover:bg-base-200">
-          { !Idea.isDraft(idea) && <Lightbulb    class="w-10 h-10"/> }
-          {  Idea.isDraft(idea) && <Construction class="w-10 h-10"/> }
-          <div class="divider divider-horizontal"></div>
-          <div class="flex flex-col flex-1 items-start">
-            <span class="text-lg lg:text-xl font-bold">{idea.data.title }</span>
-            <div class="text-sm lg:text-lg flex flex-row gap-1 ">
-              { idea.data.author && <span>{idea.data.author}</span>}
-              { (idea.data.author && idea.data.pubDate) && "|" }
-              { idea.data.pubDate && <span>{idea.data.pubDate?.toDateString()}</span>}
+      <div class="w-full flex flex-row flex-wrap max-w-xs justify-center sm:max-w-2xl lg:max-w-5xl">
+        { ideas.map(idea => (
+          <a href={`/idea/${Idea.slug(idea)}`} class="flex flex-row flex-1 max-w-xs items-center p-4 rounded-lg hover:bg-base-200">
+            { !Idea.isDraft(idea) && <Lightbulb    class="w-10 h-10"/> }
+            {  Idea.isDraft(idea) && <Construction class="w-10 h-10"/> }
+            <div class="divider divider-horizontal"></div>
+            <div class="flex flex-col flex-1 items-start">
+              <span class="text-lg sm:text-xl font-bold">{idea.data.title }</span>
+              { idea.data.pubDate && <span class="text-sm sm:text-lg">{idea.data.pubDate?.toDateString()}</span>}
             </div>
-          </div>
-        </a>
-      ))}
+          </a>
+        ))}
+      </div>
     </div>
   </Drawer>
 </Layout>

src/pages/idea/tag/index.astro

@@ -1,3 +1,34 @@
-<script>
-  location.href=`/idea/tag/${location.hash.slice(2)}`
-</script>
+---
+import Layout from "@layouts/Layout.astro"
+import Drawer from "@layouts/Drawer.astro"
+import { getCollection } from "astro:content";
+
+const tags = (await getCollection("ideas"))
+  .reduce((tags, idea) => {
+    idea.data.tags?.forEach(tag => {
+      tags[tag] = (tags[tag] ?? 0) + 1
+    })
+    return tags
+  }, new Object())
+
+---
+
+<Layout>
+  <Drawer>
+    <div class="flex flex-col w-full items-center">
+      <div class="h-6"></div>
+      <span class="text-4xl font-bold">Tags</span>
+      <div class="h-4"></div>
+      <div class="w-full grid grid-cols-1 max-w-xs sm:grid-cols-3 sm:max-w-2xl lg:grid-cols-5 lg:max-w-5xl">
+        { Object.entries(tags).sort(([a,], [b,]) => {
+            return a !== b ? a < b ? -1 : 1 : 0
+          }).map(([tag, count]) => (
+          <a href={`/idea/tag/${tag}`} class="flex flex-row gap-1 justify-center items-center p-4 rounded-lg hover:bg-base-200">
+            <span class="text-lg sm:text-xl font-bold"># {tag}</span>
+            <span class="badge badge-soft badge-primary badge-xs">{count}</span>
+          </a>
+        ))}
+      </div>
+    </div>
+  </Drawer>
+</Layout>