🍯🧊 ↝ Adding document component & updating styling to enable long-form…

… posts Referencing #23 / #23
Signal-K · Feb 22, 2023 · fd089d3 · fd089d3
1 parent 40f4aa2
commit fd089d3
Show file tree

Hide file tree

Showing 9 changed files with 862 additions and 6 deletions.
diff --git a/components/Planets/PlanetCard.tsx b/components/Planets/PlanetCard.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import Card from "../Card";
 
 import { useSupabaseClient } from "@supabase/auth-helpers-react";
-import { PlanetEditorFromData } from "../../pages/generator/planet-editor";
+import PlanetEditor, { PlanetEditorFromData } from "../../pages/generator/planet-editor";
 import StakePlay from "../../pages/stake/play";
 
 export function PlanetCard ({ activeTab, planetId }) {

diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@chakra-ui/react": "^2.4.9",
     "@lens-protocol/react": "^0.3.0",
+    "@nextui-org/react": "^1.0.0-beta.12",
     "@primer/octicons-react": "9.1.1",
     "@supabase/auth-helpers-nextjs": "^0.5.4",
     "@supabase/auth-helpers-react": "^0.3.1",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,9 +1,11 @@
 // Global imports
 import React, { useState } from 'react';
+import { AppProps } from 'next/app';
 
 // Styling imports
 import '../styles/globals.css';
 import { ChakraProvider } from '@chakra-ui/react';
+import { NextUIProvider } from '@nextui-org/react';
 
 // Offchain/Postgres Session Provider
 import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs';

diff --git a/pages/journal/_document.tsx b/pages/journal/_document.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import Document, { Html, Head, Main, NextScript, DocumentContext } from "next/document";
+import { CssBaseline } from '@nextui-org/react';
+
+class JournalDocument extends Document {
+    static async getInitialProps (ctx : DocumentContext ) {
+        const initialProps = await Document.getInitialProps(ctx);
+        return {
+            ...initialProps,
+            styles: React.Children.toArray([ initialProps.styles ]),
+        };
+    }
+
+    render () {
+        return (
+            <Html lang='en'>
+                <Head>{CssBaseline.flush()}</Head>
+                <body>
+                    <Main />
+                    <NextScript />
+                </body>
+            </Html>
+        );
+    };
+};
+
+export default JournalDocument;
diff --git a/pages/journal/feed.tsx b/pages/journal/feed.tsx
@@ -0,0 +1 @@
+import type { NextPage } from "next";
diff --git a/pages/journal/index.tsx b/pages/journal/index.tsx
@@ -0,0 +1,15 @@
+import type { NextPage } from "next";
+import styles from '../../styles/Home.module.css';
+import { Text, Spacer } from '@nextui-org/react';
+
+const JournalHome: NextPage = () => {
+    return (
+        <>
+            <Text h2>All extracted articles</Text>
+            <Spacer y={1} />
+            <Text size="$lg">
+                Feel free to add more articles to extract metadata from
+            </Text>
+        </>
+    );
+};
diff --git a/styles/Home.module.css b/styles/Home.module.css
@@ -126,4 +126,4 @@
   .logo img {
     filter: invert(1);
   }
-}
+}
diff --git a/styles/globals.css b/styles/globals.css
@@ -2,7 +2,31 @@
 @tailwind components;
 @tailwind utilities;
 
-body{
+html,
+body {
     background-color: #F5F7FB;
     color:#333;
+    padding: 0;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+        Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html {
+      color-scheme: dark;
+    }
+    body {
+      color: white;
+      background: black;
+    }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -126,4 +126,4 @@ @@
       .logo img {
         filter: invert(1);
       }
-    }
+    }