emma/tabletop-commander
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects 3 Releases Wiki Activity

ttcmd: adds hr element

Browse Source 
help pages: adds a way to extract the table of contents to the parent,
smoothes out the rough loading on help pages
This commit is contained in:
Emmaline Autumn
2024-03-13 02:52:59 -06:00
parent 009e988a38
commit d0cb74bea8
12 changed files with 199 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/globals.css
View File

@@ -56,6 +56,13 @@
.poppable {
@apply card dark:bg-mixed-300 bg-primary-600 p-2 rounded-lg transition-opacity data-[visible=true]:z-10 data-[visible=true]:opacity-100 data-[visible=false]:opacity-0 -z-10 max-w-[400px] absolute;
}
.skeleton {
@apply animate-pulse bg-black/20 rounded-md text-white/0;
}
}
@keyframes identifier {
}
@layer utilities {

38
app/help/[article]/client.tsx Normal file
View File

@@ -0,0 +1,38 @@
"use client";
import { TTCMD, TTCMDRenderer } from "@/components/ttcmd";
import { FC, use, useCallback, useState } from "react";
export const HelpClient: FC<{ body: Promise<string>; title: string }> = ({
body: bodyPromise,
title,
}) => {
const body = use(bodyPromise);
const [toc, setToc] = useState<Token[]>();
const escapeTOC = useCallback((t: Token[]) => {
setToc(t);
return true;
}, []);
return (
<>
<section className="heading">
<h2 className="strapline">Help</h2>
<h1>{decodeURIComponent(title)}</h1>
</section>
<section className="grid grid-cols-3 gap-x-8 gap-y-6 my-6">
<div className="col-span-2">
<TTCMD
body={body}
escapeTOC={escapeTOC}
/>
</div>
{toc && (
<div className="sticky top-8 h-min">
<TTCMDRenderer tokens={toc} />
</div>
)}
</section>
</>
);
};

5
app/help/[article]/loading.tsx Normal file
View File

@@ -0,0 +1,5 @@
import { Loader } from "@/components/loader";
export default function Loading() {
return <Loader />;
}

32
app/help/[article]/page.tsx
View File

@@ -1,31 +1,25 @@
import { TTCMD } from "@/components/ttcmd";
import { ArrowLeftCircleIcon } from "@heroicons/react/24/solid";
import { readFile } from "fs/promises";
import { readMD } from "@/actions/readMD";
import { HelpClient } from "./client";
import { Suspense } from "react";
import { Loader } from "@/components/loader";
// export const
export default async function Help({
params,
}: {
params: { article: string };
}) {
if (!params.article.endsWith(".md")) return <></>;
const body = readFile(
if (!params.article.endsWith(".md")) return;
const body = readMD(
"./md/help articles/" + decodeURIComponent(params.article),
"utf-8",
);
return (
<>
<section className="heading">
<h2 className="strapline">Help</h2>
<h1>{decodeURIComponent(params.article).replace(".md", "")}</h1>
</section>
<section className="grid grid-cols-3 gap-x-8 gap-y-6 my-6">
<div className="col-span-2">
<Suspense>
<TTCMD body={body} />
</Suspense>
</div>
</section>
</>
<Suspense fallback={<Loader />}>
<HelpClient
body={body}
title={decodeURIComponent(params.article).replace(".md", "")}
/>
</Suspense>
);
}

4
app/layout.tsx
View File

@@ -53,7 +53,7 @@ export default function RootLayout({
return (
<html lang="en">
<body className={inter.className + " flex min-h-[100vh]"}>
<nav className="h-[100vh] fixed top-0 left-0 bottom-0 p-8 rounded-r-3xl dark:bg-mixed-300 bg-primary-400 w-max shadow-2xl">
<nav className="h-[100vh] sticky top-0 left-0 bottom-0 p-8 rounded-r-3xl dark:bg-mixed-300 bg-primary-400 w-max shadow-2xl">
<h1 className="text-lg font-bold pb-6 border-b dark:border-dark-500 border-primary-600">
<Link href="/">Tabletop Commander</Link>
</h1>
@@ -71,7 +71,7 @@ export default function RootLayout({
))}
</ul>
</nav>
<main className="p-8 w-full ml-64">
<main className="p-8 w-full overflow-visible">
{children}
</main>
<div id="root-portal"></div>