current directory view

components/wiki/PageBody.tsx

@@ -1,10 +1,10 @@
+import WikiPage from "../../interfaces/WikiPage";
 import mdStyles from "./markdown.module.css";
 import RenderMarkdown from "./RenderMarkdown";
 
 interface PageBodyProps {
   children: string;
-  currentLanguage: string;
-  path: string;
+  page: WikiPage;
 }
 
 export default function PageBody(props: PageBodyProps) {
@@ -12,12 +12,7 @@ export default function PageBody(props: PageBodyProps) {
     <div className="prose prose-sm sm:prose lg:prose-lg xl:prose-xl">
       <div className={mdStyles["markdown-body"]}>
         <div className="text-left">
-          <RenderMarkdown
-            path={props.path}
-            currentLanguage={props.currentLanguage}
-          >
-            {props.children}
-          </RenderMarkdown>
+          <RenderMarkdown page={props.page}>{props.children}</RenderMarkdown>
         </div>
       </div>
     </div>

components/wiki/RenderMarkdown.tsx

@@ -4,14 +4,17 @@ import rehypeHighlight from "rehype-highlight";
 import rehypeRaw from "rehype-raw";
 import rehypeSlug from "rehype-slug";
 import remarkGfm from "remark-gfm";
+import WikiPage from "../../interfaces/WikiPage";
 
 interface RenderMarkdownProps {
   children: string;
-  path: string;
-  currentLanguage: string;
+  page: WikiPage;
 }
 
-export default function RenderMarkdown(pageprops: RenderMarkdownProps) {
+export default function RenderMarkdown({
+  children,
+  page,
+}: RenderMarkdownProps) {
   return (
     <ReactMarkdown
       remarkPlugins={[remarkGfm]}
@@ -22,10 +25,10 @@ export default function RenderMarkdown(pageprops: RenderMarkdownProps) {
           let href = props.href as string;
           if (!href.endsWith("/") && !href.startsWith("http")) {
             if (href.startsWith("/wiki/")) {
-              href = `/wiki/${pageprops.currentLanguage}${href.slice(5)}`;
+              href = `/wiki/${page.language}${href.slice(5)}`;
             } else {
               // if single relative
-              href = `/wiki/${pageprops.currentLanguage}/${pageprops.path}/${href}`;
+              href = `/wiki/${page.language}/${page.path}/${href}`;
             }
           }
           return (
@@ -38,7 +41,7 @@ export default function RenderMarkdown(pageprops: RenderMarkdownProps) {
           // if image is internal (relative), prefix it with the current page's path
           let src = props.src as string;
           if (!src.startsWith("http") && !src.startsWith("/")) {
-            src = `/img/wiki/${pageprops.path}/${src}`;
+            src = `/img/wiki/${page.path}/${src}`;
           }
           return (
             <div className="flex w-full flex-col items-center justify-center">
@@ -54,7 +57,7 @@ export default function RenderMarkdown(pageprops: RenderMarkdownProps) {
         },
       }}
     >
-      {pageprops.children}
+      {children}
     </ReactMarkdown>
   );
 }

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

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { m } from "framer-motion";
 import PageBody from "../../../components/wiki/PageBody";
 import { ReactElement, useEffect, useState } from "react";
+import Image from "next/image";
 
 interface WikiLandingPageProps {
   children: React.ReactNode;
@@ -24,12 +25,8 @@ function WikiLandingPage(props: WikiLandingPageProps) {
 
   // needed for proper hydration due to replacing some elements
   useEffect(() => {
-    setWikiContent(
-      <PageBody currentLanguage={props.page.language} path={props.page.path}>
-        {props.page.content}
-      </PageBody>
-    );
-  }, [props.page.content, props.page.language, props.page.path]);
+    setWikiContent(<PageBody page={props.page}>{props.page.content}</PageBody>);
+  }, [props.page]);
 
   useEffect(() => {
     const toc: TableOfContentsItem[] = [];
@@ -46,9 +43,67 @@ function WikiLandingPage(props: WikiLandingPageProps) {
     setIndexContent(toc);
   }, [wikiContent]);
 
+  const dirPath = props.page.path.split("/").map((path, index) => {
+    // if home page, don't show
+    if (path === "home") return <></>;
+    return (
+      <div key={path} className="flex flex-row">
+        <span className="mx-2 flex items-center text-white">
+          <m.svg
+            viewBox={"0 0 24 24"}
+            width={20}
+            height={20}
+            origin="center"
+            color="currentColor"
+            fill="currentColor"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <m.path d="M6.23 20.23 8 22l10-10L8 2 6.23 3.77 14.46 12z" />
+          </m.svg>
+        </span>
+        <Link
+          href={`/wiki/${props.page.language}/${props.page.path
+            .split("/")
+            .slice(0, index + 1)
+            .join("/")}`}
+        >
+          <p className="hover:text-orange-400">{path}</p>
+        </Link>
+      </div>
+    );
+  });
+
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center p-3 font-plusJakarta ">
+    <div className="flex w-full flex-col items-center justify-center p-3 font-plusJakarta ">
       <div className="inline-grid h-full w-full max-w-screen-2xl grid-cols-10">
+        {/* Desktop Header */}
+        <div className="col-span-10 mb-2 hidden grid-cols-10 lg:inline-grid">
+          {/* Title */}
+          <div className="col-span-2 flex items-center justify-center">
+            <div className="text-2xl text-white">
+              <p>toffee wiki</p>
+            </div>
+            <Image
+              className="h-auto w-auto"
+              src="/img/logo.webp"
+              alt="toffee logo"
+              width={64}
+              height={64}
+            />
+          </div>
+          {/* Dir Path */}
+          <div className="col-span-8 ml-3 mb-3 mt-3 flex text-left text-xl">
+            <div className="flex w-auto flex-row items-center justify-start rounded-full bg-black p-2 px-4">
+              <Link href="/wiki">
+                <p className="hover:text-orange-400">home</p>
+              </Link>
+              {dirPath}
+            </div>
+          </div>
+        </div>
         {/* Sidebar */}
         <div className="col-span-2 hidden w-full flex-col items-center justify-center lg:block">
           <div className="w-full rounded-tl-2xl rounded-bl-2xl border-r-2 border-orange-400 border-opacity-60 bg-zinc-800 bg-opacity-70 p-6 text-left text-6xl text-white">
@@ -75,11 +130,22 @@ function WikiLandingPage(props: WikiLandingPageProps) {
             </div>
           </div>
         </div>
+        <div className="col-span-10 mb-6 lg:hidden">
+          {/* Dir Path Mobile */}
+          <div className="col-span-8 flex text-left text-xl">
+            <div className="flex w-auto flex-row items-center justify-start rounded-full bg-black p-2 px-4">
+              <Link href="/wiki">
+                <p className="hover:text-orange-400">home</p>
+              </Link>
+              {dirPath}
+            </div>
+          </div>
+        </div>
         {/* Mobile "Side"-bar */}
         <div className="col-span-10 mb-6 lg:hidden">
           <div className="w-full rounded-2xl rounded-tl-2xl bg-zinc-800 bg-opacity-70 p-6 text-left text-6xl text-white">
             <div
-              className="flex cursor-pointer flex-row text-2xl"
+              className="flex cursor-pointer flex-row justify-between text-2xl"
               onClick={() => setShowMobileIndex(!showMobileIndex)}
             >
               <div>Contents</div>
@@ -102,6 +168,7 @@ function WikiLandingPage(props: WikiLandingPageProps) {
                 />
               </m.svg>
             </div>
+
             <m.div
               className="overflow-hidden text-left text-orange-400"
               animate={{
@@ -131,7 +198,7 @@ function WikiLandingPage(props: WikiLandingPageProps) {
           </div>
         </div>
         {/* Main content */}
-        <div className="col-span-10 rounded-2xl bg-zinc-800 bg-opacity-70 p-6 text-center text-6xl text-white lg:col-span-8 lg:rounded-tl-none">
+        <div className="col-span-10 rounded-2xl bg-zinc-800 bg-opacity-70 px-6 pb-5 text-center text-6xl text-white lg:col-span-8 lg:rounded-tl-none">
           <m.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}