fix: Fixed index API requests having scoped include parameter (#78)

* Order of anime on seasonal pages is now alphabetically.
* Added "time since last build" back in using new library, now also with timezone.

package-lock.json

@@ -32,6 +32,7 @@
                 "gatsby-plugin-styled-components": "^4.3.0",
                 "gatsby-source-animethemes": "file:plugins/gatsby-source-animethemes",
                 "gatsby-source-animethemes-db": "file:plugins/gatsby-source-animethemes-db",
+                "luxon": "^2.0.2",
                 "node-fetch": "^2.6.1",
                 "prismjs": "^1.24.1",
                 "react": "^17.0.1",
@@ -11737,6 +11738,14 @@
                 "es5-ext": "~0.10.2"
             }
         },
+        "node_modules/luxon": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.0.2.tgz",
+            "integrity": "sha512-ZRioYLCgRHrtTORaZX1mx+jtxKtKuI5ZDvHNAmqpUzGqSrR+tL4FVLn/CUGMA3h0+AKD1MAxGI5GnCqR5txNqg==",
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/make-dir": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -27628,6 +27637,11 @@
                 "es5-ext": "~0.10.2"
             }
         },
+        "luxon": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.0.2.tgz",
+            "integrity": "sha512-ZRioYLCgRHrtTORaZX1mx+jtxKtKuI5ZDvHNAmqpUzGqSrR+tL4FVLn/CUGMA3h0+AKD1MAxGI5GnCqR5txNqg=="
+        },
         "make-dir": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",

package.json

@@ -31,6 +31,7 @@
         "gatsby-plugin-styled-components": "^4.3.0",
         "gatsby-source-animethemes": "file:plugins/gatsby-source-animethemes",
         "gatsby-source-animethemes-db": "file:plugins/gatsby-source-animethemes-db",
+        "luxon": "^2.0.2",
         "node-fetch": "^2.6.1",
         "prismjs": "^1.24.1",
         "react": "^17.0.1",

src/components/external-link/ExternalLink.js

@@ -6,8 +6,10 @@ export function ExternalLink({ href, children, ...props }) {
     return (
         <Text as="a" link href={href} target="_blank" rel="noopener" {...props}>
             <Text>{children}</Text>
-            &nbsp;
-            <Icon icon={faChevronCircleRight}/>
+            <Text noWrap>
+                &nbsp;
+                <Icon icon={faChevronCircleRight}/>
+            </Text>
         </Text>
     );
 }

src/components/listbox/Listbox.js

@@ -84,7 +84,7 @@ export function Listbox({ options, nullLabel, selectedValue, onSelect, noReset,
         >
             <StyledListboxButton
                 as={ListboxButton}
-                variant={selectedValue !== null && selectedValue !== defaultValue && "primary"}
+                variant={selectedValue !== null && selectedValue !== defaultValue ? "primary" : undefined}
                 disabled={disabled}
             >
                 <Text>{selectedValue !== null ? selectedValue : nullLabel}</Text>

src/lib/search.js

@@ -180,19 +180,24 @@ function generateGlobalSearchParameters(entities) {
 
     parameters.push(
         ...entities
-            .flatMap(generateEntitySearchParameters)
+            .flatMap((entity) => generateEntitySearchParameters(entity, true))
             .filter((parameter, index, parameters) => parameters.indexOf(parameter) === index)
     );
 
     return parameters;
 }
 
-function generateEntitySearchParameters(entity) {
+function generateEntitySearchParameters(entity, includeScoped = false) {
     const parameters = [];
     const config = entityConfigs[entity];
 
     if (config.includes) {
-        parameters.push(`include[${config.singular || entity}]=${config.includes.join(",")}`);
+        const includesJoined = config.includes.join(",");
+        if (includeScoped) {
+            parameters.push(`include[${config.singular || entity}]=${includesJoined}`);
+        } else {
+            parameters.push(`include=${includesJoined}`);
+        }
     }
 
     if (config.fields) {

src/pages/dev.js

@@ -6,7 +6,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faInfo } from "@fortawesome/free-solid-svg-icons";
 import { Box, Flex, Grid } from "components/box";
 import { ExternalLink } from "components/external-link";
+import { DateTime } from "luxon";
 import theme from "theme";
+import React, { useEffect, useState } from "react";
 
 const StyledAnnouncement = styled(Text)`
     & a {
@@ -23,12 +25,22 @@ const StyledLink = styled(Link)`
 `;
 
 export default function DevelopmentPage({ data: { site, allAnnouncement } }) {
+    const buildDateTime = DateTime.fromISO(site.buildTime).setLocale("en");
+    const [ timeSinceBuild, setTimeSinceBuild ] = useState();
+
+    useEffect(() => {
+        setTimeSinceBuild(buildDateTime.toRelative());
+    }, [ buildDateTime ]);
+
     return (
         <Box gapsColumn="1.5rem">
             <Text variant="h1">Development Hub</Text>
             <Text as="p" color="text-disabled">
                 <span>This site was last updated: </span>
-                <Text fontWeight="700">{site.buildTimeFormatted}</Text>
+                <Text fontWeight="700">{buildDateTime.toLocaleString(DateTime.DATETIME_FULL)}</Text>
+                {!!timeSinceBuild && (
+                    <span> ({timeSinceBuild})</span>
+                )}
             </Text>
             <Text as="p">
                 <span>This page is still actively being worked on. If you are a developer and interested in contributing feel free to contact us on </span>
@@ -180,10 +192,10 @@ function PageGridItem({ path, otherPaths = {}, description }) {
             <PageLink path={path}/>
             <Text>{description}</Text>
             {Object.entries(otherPaths).map(([path, description]) => (
-                <>
+                <React.Fragment key={path}>
                     <PageLink path={path}/>
                     <Text color="text-muted">{description}</Text>
-                </>
+                </React.Fragment>
             ))}
         </Grid>
     );
@@ -200,7 +212,7 @@ function PageLink({ path }) {
 export const query = graphql`
     query IndexPageQuery {
         site {
-            buildTimeFormatted: buildTime(formatString: "LLL")
+            buildTime
         }
         allAnnouncement {
             nodes {

src/templates/season.js

@@ -6,7 +6,9 @@ import { Box } from "components/box";
 
 export default function SeasonDetailPage({ data: { allAnime }, pageContext: { year, season } }) {
     const pageTitle = `${season} ${year} Anime`;
-    const animeList = allAnime.nodes;
+    const animeList = allAnime.nodes
+        .filter((anime) => anime.name)
+        .sort((a, b) => a.name.localeCompare(b.name));
 
     return (
         <Box gapsColumn="1.5rem">