From 28178f2ae3e8ef1f5e63214e1b06a7cca9e3a7d7 Mon Sep 17 00:00:00 2001
From: David Glymph <Woozl@users.noreply.github.com>
Date: Fri, 1 Dec 2023 13:36:47 -0500
Subject: [PATCH 1/4] fix tag overflow

---
 pages/news/[year]/[month]/[day]/[slug].js | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/pages/news/[year]/[month]/[day]/[slug].js b/pages/news/[year]/[month]/[day]/[slug].js
index daf7fe86..67f88940 100644
--- a/pages/news/[year]/[month]/[day]/[slug].js
+++ b/pages/news/[year]/[month]/[day]/[slug].js
@@ -8,8 +8,10 @@ import { ArticleDate } from "@/components/news/article-date"
 import { Tag } from "@/components/news/tag"
 import qs from "qs";
 import { Link } from "@/components/link"
+import { useRouter } from "next/router";
 
 export default function Article({ article }) {
+  const router = useRouter();
   
   const tags = [
     article.projects.map((x) => ({ ...x, type: 'projects' })),
@@ -60,13 +62,13 @@ export default function Article({ article }) {
           const id = type === 'postTags' ? name : slug;
 
           return (
-            <Link key={i} to={createTagLinkURL(id, type)}>
-              <Tag
-                type={type}
-                contents={name}
-                sx={{ minWidth: 'fit-content', maxWidth: 'revert' }}
-              />
-            </Link>
+            <Tag
+              key={i}
+              type={type}
+              contents={name}
+              onClick={() => { router.push(createTagLinkURL(id, type)); }}
+              sx={{ maxWidth: 'revert', cursor: 'pointer' }}
+            />
           )
         })}
       </Stack>

From 4336ca76607f9d2f3ae926ac7b551a8a30fab716 Mon Sep 17 00:00:00 2001
From: David Glymph <Woozl@users.noreply.github.com>
Date: Fri, 1 Dec 2023 13:37:00 -0500
Subject: [PATCH 2/4] fix tag inverse color

---
 components/news/tag.js | 2 +-
 pages/news/index.js    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/news/tag.js b/components/news/tag.js
index 7159d1de..721f7695 100644
--- a/components/news/tag.js
+++ b/components/news/tag.js
@@ -25,7 +25,7 @@ const TYPES = {
   },
   default: {
     bgColor: "#ededed",
-    color: "#414141",
+    color: "#474747",
   },
 };
 
diff --git a/pages/news/index.js b/pages/news/index.js
index d8432413..a410d54d 100644
--- a/pages/news/index.js
+++ b/pages/news/index.js
@@ -111,7 +111,7 @@ export default function News() {
   const isTagSelected = useCallback((id, type) => {
     if (id === undefined || type === undefined) return false;
     return selectedTags[type]?.find((tag) => (
-      tag[type === 'freeSearch' ? 'name' : 'slug'] === id
+      tag[type === 'freeSearch' || type === 'postTags' ? 'name' : 'slug'] === id
       )) !== undefined;
   }, [selectedTags]);
 

From fd3c9da71cca18d8c3795f38c775e50ccf9e4730 Mon Sep 17 00:00:00 2001
From: David Glymph <Woozl@users.noreply.github.com>
Date: Fri, 1 Dec 2023 13:37:13 -0500
Subject: [PATCH 3/4] add image captions to articles

---
 pages/news/[year]/[month]/[day]/[slug].js | 35 ++++++++++++++++-------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/pages/news/[year]/[month]/[day]/[slug].js b/pages/news/[year]/[month]/[day]/[slug].js
index 67f88940..5f2badca 100644
--- a/pages/news/[year]/[month]/[day]/[slug].js
+++ b/pages/news/[year]/[month]/[day]/[slug].js
@@ -1,7 +1,7 @@
 import { Fragment } from "react"
 import { Page, Section } from "@/components/layout";
 import { fetchArticle, fetchStrapiGraphQL } from "@/lib/strapi";
-import { Divider, Typography, Box, Stack } from "@mui/material";
+import { Divider, Typography, Stack, styled } from "@mui/material";
 import { Markdown } from "@/components/markdown";
 import Image from "next/image";
 import { ArticleDate } from "@/components/news/article-date"
@@ -80,15 +80,18 @@ export default function Article({ article }) {
       {
         article.content.map((item)=> {
           return item.__typename == "ComponentPostSectionsImage" ? (
-            <Image 
-              priority
-              src={item.image.data.attributes.url}
-              alt={item.altText}
-              width= {item.image.data.attributes.width}
-              height={item.image.data.attributes.height}
-              layout="responsive"
-              objectFit='cover'
-            />
+            <Figure>
+              <Image 
+                priority
+                src={item.image.data.attributes.url}
+                alt={item.altText}
+                width= {item.image.data.attributes.width}
+                height={item.image.data.attributes.height}
+                layout="responsive"
+                objectFit='cover'
+              />
+              <Typography component={"figcaption"} variant="caption">{item.caption}</Typography>
+            </Figure>
           ) : (
             <Markdown>{item.content}</Markdown>
           )
@@ -155,6 +158,18 @@ export default function Article({ article }) {
   )
 }
 
+const Figure = styled('figure')`
+  margin: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  & figcaption.MuiTypography-root {
+    align-self: center;
+    font-style: italic;
+  }
+`;
+
 export async function getStaticPaths() {
   const postsGql = await fetchStrapiGraphQL(`query {
     posts(pagination: { limit: 1000 }, sort: "publishDate:desc") {

From 6c87904c2548d5111859836341f41ff21e955a9d Mon Sep 17 00:00:00 2001
From: David Glymph <Woozl@users.noreply.github.com>
Date: Mon, 4 Dec 2023 15:41:07 -0500
Subject: [PATCH 4/4] fix weird overflow bug
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

hopefully this doesn't break other pages 😅
---
 components/layout/section/section.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/layout/section/section.js b/components/layout/section/section.js
index 236eabee..3d260e44 100644
--- a/components/layout/section/section.js
+++ b/components/layout/section/section.js
@@ -29,7 +29,7 @@ export const Section = ({ title, children }) => {
           )
         }
       </Box>
-      <Box sx={{ flex: '1' , wordWrap: 'break-word'}} >
+      <Box sx={{ flex: '1' , wordWrap: 'break-word', minWidth: 0 }} >
           { children }
       </Box>
     </Stack>