feat: rejig tag page

package.json

@@ -1,6 +1,6 @@
 {
   "name": "www-aaronjy-me",
-  "version": "1.7.0.1",
+  "version": "1.7.1.0",
   "private": true,
   "type": "module",
   "scripts": {

src/components/Article/Article.jsx

@@ -30,7 +30,7 @@ function Article ({ attributes, html }) {
           <Link href='./'>Back...</Link>
           {attributes.pubdate && <p>{formatDate(attributes.pubdate)}</p>}
           <div data-test='content' dangerouslySetInnerHTML={{ __html: html }} />
-          {attributes.tags && <p>Tags: {attributes.tags}</p>}
+          {attributes.tags && <p>Tags: {attributes.tags.join(', ')}</p>}
         </div>
       </article>
     </>

src/pages/tags/index.js

@@ -2,6 +2,7 @@ import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
 import { getContentTags, getStaticEntries } from '@/lib/content'
 import { NextSeo } from 'next-seo'
 import Link from 'next/link'
+import React from 'react'
 
 export const getStaticProps = () => ({
   props: {
@@ -13,8 +14,6 @@ export const getStaticProps = () => ({
 export const Title = 'Tags'
 
 export default function Tags ({ tags, postEntries }) {
-  const tagNames = Object.keys(tags).sort()
-
   return (
     <DefaultLayout>
       <NextSeo
@@ -29,35 +28,28 @@ export default function Tags ({ tags, postEntries }) {
       <h1>{Title}</h1>
 
       <section>
+        {Object.keys(tags).sort().map(tag => {
+          const posts = postEntries
+            .filter(p => p.attributes.tags.includes(tag))
+            .sort((a, b) => b.attributes.title > -a.attributes.title)
 
-        <table>
-          <thead>
-            <tr>
-              <th>Tag</th>
-              <th>Posts</th>
-            </tr>
-
-          </thead>
-          <tbody>
-            {tagNames.map(tag => {
-              const posts = postEntries.filter(p => p.attributes.tags.includes(tag)).sort((a, b) => a.attributes.title > b.attributes.title ? 1 : -1)
-
-              return (
-                <tr key={tag}>
-                  <td>{tag} ({posts.length})</td>
-                  <td>
-                    {posts && posts.map(post => {
-                      return (
-                        <div key={'tag-' + post.slug}><Link href={`/writing/${post.slug}`}>{post.attributes.title}</Link></div>
-                      )
-                    })}
-                  </td>
-                </tr>
-              )
-            })}
-          </tbody>
-        </table>
+          return (
+            <React.Fragment key={tag}>
+              <h2>{tag}</h2>
+              <ul>
+                {posts.map((post, _) => {
+                  return (
+                    <li key={post.slug}>
+                      <Link href={`/writing/${post.slug}`}>{post.attributes.title}</Link>
+                    </li>
+                  )
+                })}
+              </ul>
+            </React.Fragment>
+          )
+        })}
       </section>
+
     </DefaultLayout>
   )
 }