react redoc, move text, add status page

frontend/next.config.js

@@ -3,4 +3,13 @@ module.exports = {
   target: "serverless",
   trailingSlash: true,
   presets: [require.resolve("next/babel")],
+  webpack: (config, { isServer }) => {
+    // Fixes npm packages that depend on `fs` module
+    if (!isServer) {
+      // config.node = { fs: 'empty' };
+      config.resolve.fallback.fs = false;
+    }
+
+    return config;
+  },
 };

frontend/pages/docs.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { RedocStandalone } from "redoc";
+import { Box } from "@chakra-ui/react";
+import { getLayout } from "../src/layouts/RootLayout";
+
+const Docs = () => {
+  return (
+    // <Box overflowY="hidden" w="100%" maxH="100%" minH="100vh">
+    <>
+      <Box w="100%" maxH="100vh" overflowY="scroll">
+        <RedocStandalone
+          specUrl="https://api.moonstream.to/openapi.json"
+          options={{
+            theme: {
+              colors: {
+                primary: { main: "#212990" },
+                success: { main: "#92D050" },
+                warning: { main: "#FD5602" },
+                error: { main: "#C53030" },
+                gray: { 50: "#f7f8fa", 100: "#eff1f4" },
+              },
+              rightPanel: { backgroundColor: "#34373d" },
+            },
+          }}
+        />
+      </Box>
+    </>
+    // </Box>
+  );
+};
+
+export async function getStaticProps() {
+  const metaTags = {
+    title: "Moonstream: API Documentation",
+    description: "API Documentation to use moonstream.to",
+    keywords: "API, docs",
+    url: "https://www.moonstream.to/docs",
+  };
+  return { props: { metaTags: { ...metaTags } } };
+}
+
+Docs.getLayout = getLayout;
+export default Docs;

frontend/pages/index.js

@@ -333,14 +333,18 @@ const Homepage = () => {
                                 // borderRadius="lg"
                                 // boxShadow="lg"
                               >
-                                <Text color="blue.300">
-                                  {content_item.title}
-                                </Text>
                                 <ChakraImage
                                   fit="contain"
-                                  boxSize="130px"
+                                  boxSize={["64px", "96px", "130px", null]}
                                   src={content_item.img}
                                 />
+                                <Text
+                                  py={2}
+                                  color="blue.300"
+                                  fontSize={["sm", "md", null]}
+                                >
+                                  {content_item.title}
+                                </Text>
                               </Box>
                             ))}
                           </Slider>
@@ -433,7 +437,7 @@ const Homepage = () => {
                     pb={["12px", "60px", null]}
                     textAlign="justify"
                   >
-                    Your game changer in blockchain infrastracture
+                    Your game changer in blockchain analytics
                   </Heading>
                 </Center>
                 <Flex
@@ -695,6 +699,7 @@ const Homepage = () => {
                 colSpan="12"
                 pt={["0", "0", "5.125rem", null, "5.125rem"]}
                 pb="120px"
+                px="7%"
               >
                 <Center>
                   <Stack placeContent="center">

frontend/pages/whitepapers.js

@@ -7,7 +7,10 @@ const Papers = () => {
   return (
     <VStack>
       <Heading py={12}>Whitepapers</Heading>
-      <Link href="https://github.com/bugout-dev/moonstream/blob/main/datasets/nfts/papers/ethereum-nfts.pdf">
+      <Link
+        color="orange.900"
+        href="https://github.com/bugout-dev/moonstream/blob/main/datasets/nfts/papers/ethereum-nfts.pdf"
+      >
         An analysis of 7,020,950 NFT transactions on the Ethereum blockchain -
         October 22, 2021
         <Icon as={MdPictureAsPdf} color="red" display="inline-block" />
@@ -24,10 +27,9 @@ export async function getStaticProps() {
     keywords:
       "blockchain, crypto, data, trading, smart contracts, ethereum, solana, transactions, defi, finance, decentralized, analytics, product, whitepapers",
     url: "https://www.moonstream.to/whitepapers",
-    image: `https://s3.amazonaws.com/static.simiotics.com/moonstream/assets/crypto+traders.png`,
   };
   const layoutProps = getLayoutProps();
-  layoutProps.props.metaTags = { ...metaTags };
+  layoutProps.props.metaTags = { ...layoutProps.props.metaTags, ...metaTags };
   return { ...layoutProps };
 }
 

frontend/src/core/constants.js

@@ -34,7 +34,7 @@ export const ALL_NAV_PATHES = [
   },
   {
     title: "API",
-    path: "https://api.moonstream.to/docs",
+    path: "/docs",
     footerCategory: FOOTER_COLUMNS.PRODUCT,
   },
   {
@@ -47,6 +47,11 @@ export const ALL_NAV_PATHES = [
     path: "https://blog.moonstream.to",
     footerCategory: FOOTER_COLUMNS.NEWS,
   },
+  {
+    title: "Status",
+    path: "/status",
+    footerCategory: FOOTER_COLUMNS.PRODUCT,
+  },
 ];
 
 export const USER_NAV_PATHES = [