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 }) => { ) } - + { children } 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/[year]/[month]/[day]/[slug].js b/pages/news/[year]/[month]/[day]/[slug].js index 4659f4ea..1606d69e 100644 --- a/pages/news/[year]/[month]/[day]/[slug].js +++ b/pages/news/[year]/[month]/[day]/[slug].js @@ -1,15 +1,17 @@ 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" 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 ( - - - + { router.push(createTagLinkURL(id, type)); }} + sx={{ maxWidth: 'revert', cursor: 'pointer' }} + /> ) })} @@ -78,15 +80,18 @@ export default function Article({ article }) { { article.content.map((item)=> { return item.__typename == "ComponentPostSectionsImage" ? ( - {item.altText} +
+ {item.altText} + {item.caption} +
) : ( {item.content} ) @@ -157,6 +162,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") { 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]);