Make new-extensions urls hierarchical, add pages for each year

Author: holly-cummins

src/templates/extensions-added-by-year-list.js

@@ -1,8 +1,6 @@
 import * as React from "react"
 import { useState } from "react"
 
-import styled from "styled-components"
-
 import { useMediaQuery } from "react-responsive"
 import { device } from "../components/util/styles/breakpoints"
 import ExtensionCard from "../components/extension-card"
@@ -13,81 +11,7 @@ import Sortings from "../components/sortings/sortings"
 import { slugForExtensionsAddedYear } from "../components/util/extension-slugger"
 import Link from "gatsby-link"
 import { ExtensionCardList } from "../components/extensions-list"
-
-const FilterableList = styled.div`
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-
-  // noinspection CssUnknownProperty
-  @media ${device.sm} {
-    flex-direction: column;
-  }
-`
-
-const Extensions = styled.ol`
-  list-style: none;
-  width: 100%;
-  padding-inline-start: 0;
-  grid-template-rows: repeat(auto-fill, 1fr);
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  gap: 30px;
-
-  // noinspection CssUnknownProperty
-  @media ${device.xs} {
-    display: flex;
-    flex-direction: column;
-  }
-`
-
-const CardItem = styled.li`
-  height: 100%;
-  width: 100%;
-  display: flex;
-  max-height: 34rem;
-`
-
-const InfoSortRow = styled.div`
-  display: flex;
-  column-gap: var(--a-generous-space);
-  justify-content: space-between;
-  flex-direction: row;
-
-  // noinspection CssUnknownProperty
-  @media ${device.sm} {
-    flex-direction: column;
-    margin-top: 0;
-  }
-`
-
-const Heading = styled.h1`
-  font-size: 3rem;
-  @media screen and (max-width: 768px) {
-    font-size: 2rem;
-  }
-  font-weight: var(--font-weight-boldest);
-  margin: 2.5rem 0 1.5rem 0;
-  padding-bottom: var(--a-modest-space);
-  width: calc(100vw - 2 * var(--site-margins));
-  // noinspection CssUnknownProperty
-  @media ${device.xs} {
-    border-bottom: 1px solid var(--card-outline);
-  }
-`
-
-const ExtensionCount = styled.h4`
-  margin-top: 1.25rem;
-  margin-bottom: 0.5rem;
-  font-size: 1rem;
-  font-weight: 400;
-  font-style: italic;
-
-  // noinspection CssUnknownProperty
-  @media ${device.sm} {
-    font-size: var(--font-size-14);
-  }
-`
+import { CardItem, ExtensionCount, Extensions, FilterableList, Heading, InfoSortRow } from "./extensions-added-list"
 
 const prettyDate = (timestamp) => new Date(+timestamp).getFullYear()
 
@@ -140,7 +64,7 @@ const ExtensionsAddedByYearListTemplate = (
   const yearTimestamp = extensions[0].metadata.maven.sinceYear
   const now = new Date()
   const date = new Date(+yearTimestamp)
-  const verb = now.getFullYear() === date.getFullYear() && now.getUTCFullYear() === date.getUTCFullYear() ? "have been" : "were"
+  const verb = now.getFullYear() === date.getFullYear() ? "have been" : "were"
 
   if (extensions && extensions.length > 0) {
 
@@ -158,7 +82,6 @@ const ExtensionsAddedByYearListTemplate = (
 
     const countMessage = `${extensionCount} new extensions ${verb} added this year.`
 
-
     const name = `Extensions added in ${formattedYear}`
 
     return (

src/templates/extensions-added-list.js

@@ -15,7 +15,7 @@ import Link from "gatsby-link"
 import { dateFormatOptions } from "../components/util/date-utils"
 import { ExtensionCardList } from "../components/extensions-list"
 
-const FilterableList = styled.div`
+export const FilterableList = styled.div`
   display: flex;
   justify-content: space-between;
   flex-direction: row;
@@ -26,7 +26,7 @@ const FilterableList = styled.div`
   }
 `
 
-const Extensions = styled.ol`
+export const Extensions = styled.ol`
   list-style: none;
   width: 100%;
   padding-inline-start: 0;
@@ -42,14 +42,14 @@ const Extensions = styled.ol`
   }
 `
 
-const CardItem = styled.li`
+export const CardItem = styled.li`
   height: 100%;
   width: 100%;
   display: flex;
   max-height: 34rem;
 `
 
-const InfoSortRow = styled.div`
+export const InfoSortRow = styled.div`
   display: flex;
   column-gap: var(--a-generous-space);
   justify-content: space-between;
@@ -62,7 +62,7 @@ const InfoSortRow = styled.div`
   }
 `
 
-const Heading = styled.h1`
+export const Heading = styled.h1`
   font-size: 3rem;
   @media screen and (max-width: 768px) {
     font-size: 2rem;
@@ -77,7 +77,7 @@ const Heading = styled.h1`
   }
 `
 
-const ExtensionCount = styled.h4`
+export const ExtensionCount = styled.h4`
   margin-top: 1.25rem;
   margin-bottom: 0.5rem;
   font-size: 1rem;