Update styles

derekmbrown · Dec 1, 2024 · 94bc4d1 · 94bc4d1
1 parent 3d6eb2c
commit 94bc4d1
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 deletions.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -22,13 +22,15 @@ allNotes.sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate))
   </div>
 
   {allNotes.slice(0, 5).map((note) =>
-    <div class="flex flex-col justify-between md:flex-row md:mb-3 mb-3 bg-[#1E262F] p-6 text-lg rounded-lg">
-      <div class="mr-2">
-        <a href={`/notes/${note.slug}`}>{note.data.title}</a>
+    <a href={`/notes/${note.slug}`}>
+      <div class="flex flex-col justify-between md:flex-row md:mb-3 mb-3 bg-[#1E262F] p-6 text-lg rounded-lg">
+        <div class="mr-2">
+          {note.data.title}
+        </div>
+        <div class="text-[#7E8C9A] shrink-0">
+          {new Date(note.data.pubDate).toDateString().slice(4, 15)}
+        </div>
       </div>
-      <div class="text-[#7E8C9A] shrink-0">
-        {new Date(note.data.pubDate).toDateString().slice(4, 15)}
-      </div>
-    </div>
+    </a>
   )}
 </Main>
diff --git a/src/pages/tags/[tag].astro b/src/pages/tags/[tag].astro
@@ -27,7 +27,7 @@ const title = `Tag: ${tag}`
   MetaTag="website", 
   MetaUrl="https://derekbrown.io"
 >
-  <div class="mb-6 text-xl">{filteredNotes.length} notes tagged with <span class="font-black">{tag}</span>:</div>
+  <div class="mb-6 text-xl">{filteredNotes.length} notes tagged with <span class="font-bold">{tag}</span>:</div>
   {filteredNotes.map((note) =>
     <div class="flex flex-col justify-between md:flex-row md:mb-3 mb-3 bg-[#1E262F] p-6 text-lg rounded-lg">
       <div><a href={`/notes/${note.slug}`}>{note.data.title}</a></div>

diff --git a/src/pages/tags/index.astro b/src/pages/tags/index.astro
@@ -2,8 +2,21 @@
 import Main from '../../layouts/Main.astro'
 import { getCollection } from 'astro:content'
 
-const allNotes = await getCollection('notes')
-const tags = [...new Set(allNotes.map((note) => note.data.tags).flat())]
+const notes = await getCollection('notes')
+const tagsWithNotes = notes.reduce((allNotes, note) => {
+  const noteTags = note.data.tags
+  if (noteTags) {
+    noteTags.forEach((tag) => {
+      if (!allNotes[tag]) {
+        allNotes[tag] = []
+      }
+      allNotes[tag].push(note)
+    })
+  }
+  return allNotes
+}, {})
+
+const tags = [...new Set(notes.map((note) => note.data.tags).flat())]
 tags.sort()
 ---
 
@@ -17,11 +30,16 @@ tags.sort()
 >
   <div class="flex flex-wrap gap-y-3">
     {tags.map(tag => (
-      <div class="bg-[#1E262F] px-4 py-2 mr-3 rounded-lg text-lg">
-        <a href={`/tags/${tag}`}>
-          {tag}
-        </a>
-      </div>
+      <a href={`/tags/${tag}`}>
+        <div class="bg-[#1E262F] px-4 py-2 mr-3 rounded-lg text-lg flex">
+          <div>
+            {tag} |
+          </div>
+          <div class="ml-2">
+            {tagsWithNotes[tag].length}
+          </div>
+        </div>
+      </a>
     ))}
   </div>
 </Main>