feat(tags): New pages for tags

freelawproject · Aug 3, 2021 · 64c6444 · 64c6444
1 parent cb55f3d
commit 64c6444
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 0 deletions.
diff --git a/components/layout.js b/components/layout.js
@@ -17,6 +17,7 @@ import drugPatentWatch
 import classNames from "classnames";
 import Button from "./button";
 import {H1} from "./headings";
+import Date from "./date";
 
 export function MainColumn({children}){
   return (

diff --git a/lib/tags.js b/lib/tags.js
@@ -0,0 +1,29 @@
+import slugify from "slugify";
+import {getSortedPostsData} from "./posts";
+
+async function getTaggedPosts(){
+  const allPosts = await getSortedPostsData()
+  const taggedPosts = allPosts.filter(post => post.tags)
+  return taggedPosts
+}
+
+export async function getAllPostTags() {
+  const taggedPosts = await getTaggedPosts()
+  let tagSet = new Set()
+  taggedPosts.map(post => {
+    post.tags.forEach(item => {
+      const tagSlug = slugify(item.toLowerCase())
+      tagSet.add("/tag/" + tagSlug + "/")
+    })
+  })
+  return [...tagSet]
+}
+
+
+export async function getPostDataForTag(tagSlug) {
+  const taggedPosts = await getTaggedPosts()
+  return taggedPosts.filter(post => {
+    const slugs = post.tags.map(tag => slugify(tag.toLowerCase()))
+    return slugs.includes(tagSlug)
+  })
+}
diff --git a/pages/tag/[tag].js b/pages/tag/[tag].js
@@ -0,0 +1,47 @@
+import Head from 'next/head'
+
+import Layout, {PostColumn, PostSummary} from '../../components/layout'
+import {H1} from "../../components/headings";
+import {getAllPostTags, getPostDataForTag} from "../../lib/tags";
+import {getSortedPostsData} from "../../lib/posts";
+
+export async function getStaticProps({params}) {
+  const taggedPostsData = await getPostDataForTag(params.tag)
+  const allPostsData = await getSortedPostsData()
+  return {
+    props: {
+      taggedPostsData,
+      allPostsData,
+      tag: params.tag,
+    }
+  }
+}
+
+export async function getStaticPaths() {
+  const tags = await getAllPostTags()
+  return {
+    paths: tags,
+    fallback: false,
+  }
+}
+
+
+export default function TagPage({taggedPostsData, allPostsData, tag}) {
+  return (
+    <Layout allPosts={allPostsData} home={false}>
+      <Head>
+        <title>Posts tagged with "{tag}" | Free Law Project</title>
+      </Head>
+      <PostColumn>
+        <div className="pt-10">
+          <H1>Posts Tagged with "{tag}"</H1>
+        </div>
+        <div className="divide-y divide-gray-300">
+          {taggedPostsData.map((post) => (
+            <PostSummary post={post}/>
+          ))}
+        </div>
+      </PostColumn>
+    </Layout>
+  )
+}