Adds index page

next.config.js

@@ -3,5 +3,13 @@ const { i18n } = require('./next-i18next.config');
 
 module.exports = {
   reactStrictMode: true,
-  i18n
+  i18n,
+  webpack(config) {
+    config.resolve.fallback = {
+      ...config.resolve.fallback,
+      fs: false,
+    };
+
+    return config;
+  },
 }

package.json

@@ -16,6 +16,7 @@
     "@emotion/styled": "^11.3.0",
     "arweave": "^1.10.17",
     "axios": "^0.22.0",
+    "fast-csv": "^4.3.6",
     "framer-motion": "^4.1.17",
     "graphql": "^15.6.1",
     "next": "11.1.2",

public/locales/en/common.json

@@ -1,4 +1,10 @@
 {
+    "glossetaTitle": "Glosseta",
+    "glossetaNavbarButtonA11yText": "Takes you to the main search page",
+    "glossaryButton": "Glossary",
+    "searchButtonTitle": "Search",
+    "scrollToTheTopButton": "Click here to scroll to the top of the page",
+
     "web3GlossaryHeading": "Web3 Glossary",
     "glossetaDescription": "Glosseta is an open-source glossary meant to help people explore and learn the terminology behind web3",
 
@@ -10,10 +16,16 @@
     "searchResultContentSourceDescription" : "The definition you see above is stored on the Arweave network which is a protocol for storing data permanently in a decentralized manner among network users who have storage to spare. As a result, this definition will live forever on the Arweave network.",
     "searchResultContentSourceTransactionLinkText" : "Click here to view the Arweave transaction for this definition",
 
+    "glossaryPageHeading" : "Glossary",
+    "somethingMissingHeading" : "Something missing?",
+    "twitterTermRequestDescription" : "If there's a specific term you were looking for but didn't see above, please let us know and we'll get it added.  Give us a shout on ",
+    "glossaryTermFetchErrorHeading": "Error",
+    "glossaryTermFetchErrorText" : "Something went wrong trying to retrieve the glossary terms.  Please refresh the page or try searching for an individual term.  If the issue persists please reach out to us on ",
+
     "opensInANewWindow" : "Opens in a new window",
     "twitter" : "Twitter",
     "or" : "or",
-    "gitHubIssueText": "open up a GitHub issue",
+    "gitHubIssueText" : "open up a GitHub issue",
 
     "unavailableSearchResultDescription" : "This term isn't in our knowledge base at the moment. If you think this is something we should have, please reach out to us on",
     "apiFetchErrorText" : "Something went wrong while trying to retrieve the definition.  Please refresh the page or search for another term.",

src/pages/components/layout/page/index.tsx

@@ -1,21 +1,25 @@
 import React from "react";
 import { Stack } from "@chakra-ui/react";
 import Footer from "../../footer/footer";
+import Nav from "../../nav";
 
 const PageLayout = ({ children }: { children?: object }): JSX.Element => {
   return (
-    <Stack
-      spacing={10}
-      padding={1}
-      display="flex"
-      justifyContent="center"
-      flexDirection="column"
-      alignItems="center"
-      minHeight="100vh"
-    >
-      {children}
+    <>
+      <Nav />
+      <Stack
+        spacing={10}
+        padding={1}
+        display="flex"
+        justifyContent="center"
+        flexDirection="column"
+        alignItems="center"
+        minHeight="100vh"
+      >
+        {children}
+      </Stack>
       <Footer />
-    </Stack>
+    </>
   );
 };
 

src/pages/components/nav/index.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { chakra, Flex, HStack, Avatar } from "@chakra-ui/react";
+import Link from "next/link";
+import { useTranslation } from "react-i18next";
+import MobileNav from "./mobile-nav";
+import NavItems from "./nav-items";
+import { useRouter } from "next/router";
+
+/**
+ * Implementation inspired from the developer dao website
+ *
+ * source: https://github.com/Developer-DAO/developerdao.com
+ *  */
+export default function Nav() {
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  const isHomePage = router.pathname === "/";
+  const isGlossaryPage = router.pathname === "/glossary";
+  const isSearchPage = router.pathname === "/search";
+
+  return (
+    <chakra.nav
+      borderBottom="1px solid"
+      borderColor="#2C3539"
+      backgroundColor="#2C3539"
+      minWidth="100vw"
+    >
+      <Flex
+        alignItems="center"
+        justifyContent="space-between"
+        mx="auto"
+        maxW="7xl"
+        py={3}
+        px={5}
+      >
+        <Link href="/" passHref>
+          <HStack
+            as="a"
+            title={t("glossetaTitle")}
+            display="flex"
+            alignItems="center"
+          >
+            <Avatar
+              name="Glosseta"
+              src="/glosseta_icon.png"
+              alt="Glosseta logo"
+              bg="#7a08fc"
+            />
+            <chakra.span
+              fontWeight="bold"
+              fontSize="sm"
+              transition="color 300ms ease-in-out"
+              color="white"
+            >
+              {t("glossetaTitle")}
+            </chakra.span>
+          </HStack>
+        </Link>
+        <HStack display="flex" alignItems="center" spacing={1}>
+          <HStack
+            spacing={{ base: 3, sm: 10 }}
+            display={{ base: "none", md: "inline-flex" }}
+          >
+            <NavItems
+              isHomePage={isHomePage}
+              isGlossaryPage={isGlossaryPage}
+              isSearchPage={isSearchPage}
+            />
+          </HStack>
+
+          <MobileNav
+            isHomePage={isHomePage}
+            isGlossaryPage={isGlossaryPage}
+            isSearchPage={isSearchPage}
+          />
+        </HStack>
+      </Flex>
+    </chakra.nav>
+  );
+}

src/pages/components/nav/mobile-nav.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import {
+  Box,
+  useColorModeValue,
+  useDisclosure,
+  VStack,
+  IconButton,
+  CloseButton,
+} from "@chakra-ui/react";
+import { AiOutlineMenu } from "react-icons/ai";
+import NavItems from "./nav-items";
+
+export default function MobileNav({
+  isHomePage,
+  isGlossaryPage,
+  isSearchPage,
+}: any) {
+  const bg = useColorModeValue("gray.800", "gray.800");
+  const { onClose, onOpen, isOpen } = useDisclosure();
+
+  return (
+    <Box display={{ base: "inline-flex", md: "none" }}>
+      <IconButton
+        display={{ base: "flex", md: "none" }}
+        aria-label="Open menu"
+        fontSize="20px"
+        color="white"
+        variant="ghost"
+        icon={<AiOutlineMenu />}
+        onClick={onOpen}
+      />
+
+      <VStack
+        pos="absolute"
+        top={0}
+        left={0}
+        right={0}
+        display={isOpen ? "flex" : "none"}
+        flexDirection="column"
+        pt={7}
+        pb={7}
+        m={0}
+        bg={bg}
+        spacing={3}
+        rounded="sm"
+        shadow="sm"
+        zIndex="99"
+      >
+        <CloseButton aria-label="Close menu" onClick={onClose} color="white" />
+
+        <NavItems
+          isHomePage={isHomePage}
+          isGlossaryPage={isGlossaryPage}
+          isSearchPage={isSearchPage}
+        />
+      </VStack>
+    </Box>
+  );
+}

src/pages/components/nav/nav-items.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+import Link from "next/link";
+import { useTranslation } from "react-i18next";
+import styles from "../../../../styles/Home.module.css";
+import { Button } from "@chakra-ui/react";
+
+export default function NavItems({
+  isHomePage,
+  isGlossaryPage,
+  isSearchPage,
+}: any) {
+  const { t } = useTranslation();
+
+  /**
+   * The intent of the conditional checks is so that the respective pages link is not available to the user to click.
+   * So if the user is on the Glossary page, they will see every nav item except the Search (i.e. Home) item.
+   */
+  return (
+    <>
+      {isGlossaryPage && (
+        <Link href="/" passHref>
+          <Button color="white" variant="ghost">
+            {t("searchButtonTitle")}
+            <span className={styles.visuallyhidden}>
+              {t("glossetaNavbarButtonA11yText")}
+            </span>
+          </Button>
+        </Link>
+      )}
+
+      {(isHomePage || isSearchPage) && (
+        <Link href="/glossary" passHref>
+          <Button color="white" variant="ghost">
+            {t("glossaryButton")}
+          </Button>
+        </Link>
+      )}
+    </>
+  );
+}

src/pages/glossary/glossary-data-fetch-error.tsx

@@ -0,0 +1,46 @@
+import { Box, Text, Container, VStack, Heading, Link } from "@chakra-ui/react";
+import { ExternalLinkIcon } from "@chakra-ui/icons";
+import { useTranslation } from "next-i18next";
+import styles from "../../../styles/Home.module.css";
+
+export const GlossaryDataFetchError = (): JSX.Element => {
+  const twitter_href = `https://twitter.com/intent/tweet?screen_name=Glossetadotcom`;
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Container maxW={{ base: "sm", sm: "xl" }}>
+        <Box
+          width="100%"
+          background="#2C3539"
+          borderWidth="1px"
+          borderColor="black"
+        >
+          <VStack padding={3}>
+            <Heading
+              as="h1"
+              padding={2}
+              maxWidth="50%"
+              color="white"
+              fontSize={{ base: "md", sm: "xl" }}
+              isTruncated
+            >
+              {t("glossaryTermFetchErrorHeading")}
+            </Heading>
+            <Text padding={2} fontSize={{ base: "xs", sm: "md" }} color="white">
+              {t("glossaryTermFetchErrorText")}{" "}
+              <Link color="aquamarine" href={twitter_href} isExternal>
+                {t("twitter")} <ExternalLinkIcon mx="2px" />
+                <span className={styles.visuallyhidden}>
+                  {t("opensInANewWindow")}
+                </span>
+              </Link>
+            </Text>
+          </VStack>
+        </Box>
+      </Container>
+    </>
+  );
+};
+
+export default GlossaryDataFetchError;