rename misc -> lib, change navbar to use state over url match, init potential wiki

components/dashboard/NavBar.tsx

@@ -1,8 +1,31 @@
 import { m, Variants } from "framer-motion";
 import { useRouter } from "next/router";
 import Link from "next/link";
+import { useState } from "react";
+
+interface NavBarProps {
+  initialPage: string;
+}
+
+function NavBar(props: NavBarProps) {
+  const [activePage, setActivePage] = useState(props.initialPage);
+  const ActiveLink = (props: {
+    href: string;
+    pageName: string;
+    children: React.ReactNode;
+  }) => {
+    const router = useRouter();
+    let styling = "text-white";
+    if (activePage === props.pageName) {
+      styling = "text-[#a855f7]";
+    }
+    return (
+      <Link href={props.href} className={styling}>
+        {props.children}
+      </Link>
+    );
+  };
 
-function NavBar() {
   return (
     <div className="m-3">
       <m.div
@@ -15,16 +38,25 @@ function NavBar() {
           className="flex flex-row items-center justify-center pl-5 lg:flex-col lg:pl-0 lg:pt-5"
           variants={navStripVariants}
         >
-          <m.div variants={navIconVariants} className="pr-5 lg:pr-0 lg:pb-3">
+          <m.div
-            <ActiveLink href="/dashboard">
+            variants={navIconVariants}
+            className="pr-5 lg:pr-0 lg:pb-3"
+            onClick={() => {
+              setActivePage("dashboard");
+            }}
+          >
+            <ActiveLink href="/dashboard" pageName="dashboard">
               <DashIcon />
             </ActiveLink>
           </m.div>
           <m.div
             variants={navIconVariants}
             className="pr-5 lg:pr-0 lg:pt-3 lg:pb-3"
+            onClick={() => {
+              setActivePage("ranking");
+            }}
           >
-            <ActiveLink href="/ranking">
+            <ActiveLink href="/ranking" pageName="ranking">
               <RankingIcon />
             </ActiveLink>
           </m.div>
@@ -34,7 +66,18 @@ function NavBar() {
           variants={navStripVariants}
         >
           <m.div
-            className="fill-white stroke-white"
+            variants={navIconVariants}
+            className="pr-5 lg:pr-0 lg:pb-3"
+            onClick={() => {
+              setActivePage("wiki");
+            }}
+          >
+            <ActiveLink href="/wiki/en" pageName="wiki">
+              <WikiIcon />
+            </ActiveLink>
+          </m.div>
+          <m.div
+            className="fill-white stroke-white lg:pt-3"
             whileHover={{
               color: "#fca311",
             }}
@@ -113,16 +156,16 @@ const RankingIcon = () => {
   );
 };
 
-const ActiveLink = (props: { href: string; children: React.ReactNode }) => {
+const WikiIcon = () => {
-  const router = useRouter();
-  let styling = "text-white";
-  if (router.pathname === props.href) {
-    styling = "text-[#a855f7]";
-  }
   return (
-    <Link href={props.href} className={styling}>
+    <NavSvgWrap>
-      {props.children}
+      <m.path
-    </Link>
+        d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3 1 9l11 6 9-4.91V17h2V9L12 3z"
+        strokeWidth="1"
+        stroke="currentColor"
+        fill="currentColor"
+      />
+    </NavSvgWrap>
   );
 };
 
@@ -149,7 +192,7 @@ const navContainerVariants: Variants = {
 const navStripVariants: Variants = {
   initial: {
     opacity: 0,
-    y: 100,
+    y: 40,
   },
   animate: {
     opacity: 1,

layouts/DashLayout.tsx

@@ -11,6 +11,7 @@ import NavBar from "../components/dashboard/NavBar";
 
 interface DashLayoutProps {
   children: React.ReactNode;
+  navIcon?: string;
   metaTags: {
     title?: string;
     ogTitle?: string;
@@ -88,7 +89,7 @@ function DashLayout(props: DashLayoutProps) {
         {/* dashboard nav bar */}
         <LazyMotion features={domAnimation}>
           <AnimatePresence mode="wait">
-            <NavBar />
+            <NavBar initialPage={props.navIcon ?? ""} />
           </AnimatePresence>
         </LazyMotion>
         {/* dashboard content */}

layouts/NavTemplates.tsx

@@ -52,6 +52,7 @@ const homeMain: NavTemplate[] = [
   // { content: <DefaultNavOption label="About" href="/about" /> },
   { content: <DefaultNavOption label="Dashboard" href="/dashboard" /> },
   { content: <DefaultNavOption label="Team" href="/team" /> },
+  { content: <DefaultNavOption label="Wiki" href="/wiki/en" /> },
   // { content: <DefaultNavOption label="Contact" href="/contact" /> },
 ];
 

lib/wiki/convertMarkdown.ts

@@ -0,0 +1,7 @@
+import { remark } from "remark";
+import html from "remark-html";
+
+export default async function convertMarkdown(markdown: string) {
+  const result = await remark().use(html).process(markdown);
+  return result.toString();
+}

package.json

@@ -14,11 +14,14 @@
     "eslint": "8.28.0",
     "eslint-config-next": "13.0.4",
     "framer-motion": "^7.6.19",
+    "gray-matter": "^4.0.3",
     "ioredis": "^5.2.5",
     "next": "13.0.4",
     "react": "18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "18.2.0",
+    "remark": "^14.0.2",
+    "remark-html": "^15.0.1",
     "sharp": "^0.31.2",
     "typescript": "4.9.3"
   },
@@ -27,6 +30,7 @@
     "@types/node": "18.11.9",
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.9",
+    "@types/recursive-readdir": "^2.2.1",
     "autoprefixer": "^10.4.13",
     "husky": "^8.0.2",
     "lint-staged": "^13.0.3",

pages/api/emotes.ts

@@ -1,21 +1,21 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { createRedisInstance } from "../../misc/redis";
+import { createRedisInstance } from "../../lib/redis";
 import {
   getGlobalEmotes as get7TVGlobalEmotes,
   getChannelEmotes as get7TVChannelEmotes,
-} from "../../misc/7TVAPI";
+} from "../../lib/7TVAPI";
 import {
   getGlobalEmotes as getBTTVGlobalEmotes,
   getUserByID as getBTTVUser,
-} from "../../misc/BTTVAPI";
+} from "../../lib/BTTVAPI";
 import {
   getGlobalEmotes as getFFZGlobalEmotes,
   getEmoteSet as getFFZEmoteSet,
-} from "../../misc/FFZAPI";
+} from "../../lib/FFZAPI";
 import {
   getGlobalEmotes as getTwitchGlobalEmotes,
   getChannelEmotes as getTwitchChannelEmotes,
-} from "../../misc/TwitchAPI";
+} from "../../lib/TwitchAPI";
 
 type Data = {
   [key: string]: any;

pages/api/fakeUsers.ts

@@ -2,8 +2,8 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import UserBadge from "../../interfaces/UserBadge";
 import UserFakeDataEntry from "../../interfaces/UserFakeDataEntry";
 import UserJSONEntry from "../../interfaces/UserJSONEntry";
-import { createRedisInstance } from "../../misc/redis";
+import { createRedisInstance } from "../../lib/redis";
-import { getUserByName } from "../../misc/TwitchAPI";
+import { getUserByName } from "../../lib/TwitchAPI";
 import { fakePrices } from "./fakePrices";
 
 type Data = {

pages/dashboard/index.tsx

@@ -80,7 +80,11 @@ const gridItemVariants: Variants = {
 
 Dashboard.getLayout = function getLayout(page: ReactElement) {
   const metaTags = {};
-  return <DashLayout metaTags={metaTags}>{page}</DashLayout>;
+  return (
+    <DashLayout metaTags={metaTags} navIcon="dashboard">
+      {page}
+    </DashLayout>
+  );
 };
 
 export default Dashboard;

pages/ranking/index.tsx

@@ -290,7 +290,11 @@ Ranking.getLayout = function getLayout(page: ReactElement) {
     title: "Ranking - toffee",
     description: "Top investors on toffee",
   };
-  return <DashLayout metaTags={metaTags}>{page}</DashLayout>;
+  return (
+    <DashLayout metaTags={metaTags} navIcon="ranking">
+      {page}
+    </DashLayout>
+  );
 };
 
 export default Ranking;

pages/user/[username]/index.tsx

@@ -133,7 +133,7 @@ function UserPage(props: UserPageProps) {
     <>
       <div className="flex justify-center overflow-hidden">
         <m.div
-          className="mt-7 inline-grid w-[calc(100%-40px)] max-w-5xl grid-cols-10 gap-3 pl-2 font-plusJakarta lg:mt-12 lg:pl-0 lg:pr-2"
+          className="mt-7 inline-grid w-[calc(100%-40px)] max-w-5xl grid-cols-10 gap-8 pl-2 font-plusJakarta sm:gap-3 lg:mt-12 lg:pl-0 lg:pr-2"
           variants={containerVariants}
         >
           {/*  User "banner"  */}
@@ -662,7 +662,11 @@ UserPage.getLayout = function getLayout(page: ReactElement) {
       "twitter:card": "summary",
     },
   };
-  return <DashLayout metaTags={metaTags}>{page}</DashLayout>;
+  return (
+    <DashLayout metaTags={metaTags} navIcon="user">
+      {page}
+    </DashLayout>
+  );
 };
 
 export default UserPage;

pages/wiki/[...page]/index.tsx

@@ -0,0 +1,50 @@
+import DashLayout from "../../../layouts/DashLayout";
+import Image from "next/image";
+// markdown styles
+import styles from "../../../styles/markdown.module.css";
+
+interface WikiLandingPageProps {
+  children: React.ReactNode;
+}
+
+function WikiLandingPage(props: WikiLandingPageProps) {
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center p-3 font-plusJakarta">
+      <div className="inline-grid h-full w-full max-w-7xl grid-cols-10 rounded-2xl bg-zinc-800 bg-opacity-70 p-6">
+        <div className="col-span-10 text-center text-6xl font-semibold text-white">
+          <div className="flex flex-row items-center justify-center">
+            <Image
+              src="/img/emotes/peepoTalk.webp"
+              alt={"PeepoTalk"}
+              width={64}
+              height={64}
+              className="mr-3 mb-4"
+            />
+            <div>
+              <span>the t</span>
+              <span className="text-orange-400">off</span>
+              <span>ee wiki</span>
+            </div>
+          </div>
+          <div className={styles.markdown}>
+            <div className="text-left"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+WikiLandingPage.getLayout = function getLayout(page: React.ReactNode) {
+  const metaTags = {
+    title: "Wiki",
+    description: "Wiki for toffee",
+  };
+  return (
+    <DashLayout metaTags={metaTags} navIcon="wiki">
+      {page}
+    </DashLayout>
+  );
+};
+
+export default WikiLandingPage;

styles/markdown.module.css

@@ -0,0 +1,18 @@
+.markdown {
+  @apply text-lg leading-relaxed;
+}
+
+.markdown p,
+.markdown ul,
+.markdown ol,
+.markdown blockquote {
+  @apply my-6;
+}
+
+.markdown h2 {
+  @apply mt-12 mb-4 text-3xl leading-snug;
+}
+
+.markdown h3 {
+  @apply mt-8 mb-4 text-2xl leading-snug;
+}