Terakoda/dm-companion
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adds markdown formatting. Layout and style improvements.

Browse Source
This commit is contained in:
Drew Haven
2025-07-23 15:37:44 -07:00
parent 8533f63a22
commit 4c2ebdc292
11 changed files with 88 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -11,7 +11,7 @@
<title>Dungeon Master's Companion</title> <title>Dungeon Master's Companion</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app" class="flex flex-col h-full w-full"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

30
package-lock.json generated
View File

@@ -13,7 +13,9 @@
"@tanstack/react-router": "^1.114.3", "@tanstack/react-router": "^1.114.3",
"@tanstack/react-router-devtools": "^1.114.3", "@tanstack/react-router-devtools": "^1.114.3",
"@tanstack/router-plugin": "^1.114.3", "@tanstack/router-plugin": "^1.114.3",
"dompurify": "^3.2.6",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"marked": "^16.1.1",
"pocketbase": "^0.26.0", "pocketbase": "^0.26.0",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
@@ -2182,6 +2184,13 @@
"@types/react": "^19.0.0" "@types/react": "^19.0.0"
} }
}, },
"node_modules/@types/trusted-types": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
"license": "MIT",
"optional": true
},
"node_modules/@vitejs/plugin-react": { "node_modules/@vitejs/plugin-react": {
"version": "4.5.0", "version": "4.5.0",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.5.0.tgz", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.5.0.tgz",
@@ -2754,6 +2763,15 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/dompurify": {
"version": "3.2.6",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.6.tgz",
"integrity": "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==",
"license": "(MPL-2.0 OR Apache-2.0)",
"optionalDependencies": {
"@types/trusted-types": "^2.0.7"
}
},
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.5.157", "version": "1.5.157",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.157.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.157.tgz",
@@ -3406,6 +3424,18 @@
"@jridgewell/sourcemap-codec": "^1.5.0" "@jridgewell/sourcemap-codec": "^1.5.0"
} }
}, },
"node_modules/marked": {
"version": "16.1.1",
"resolved": "https://registry.npmjs.org/marked/-/marked-16.1.1.tgz",
"integrity": "sha512-ij/2lXfCRT71L6u0M29tJPhP0bM5shLL3u5BePhFwPELj2blMJ6GDtD7PfJhRLhJ/c2UwrK17ySVcDzy2YHjHQ==",
"license": "MIT",
"bin": {
"marked": "bin/marked.js"
},
"engines": {
"node": ">= 20"
}
},
"node_modules/minipass": { "node_modules/minipass": {
"version": "7.1.2", "version": "7.1.2",
"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",

2
package.json
View File

@@ -20,7 +20,9 @@
"@tanstack/react-router": "^1.114.3", "@tanstack/react-router": "^1.114.3",
"@tanstack/react-router-devtools": "^1.114.3", "@tanstack/react-router-devtools": "^1.114.3",
"@tanstack/router-plugin": "^1.114.3", "@tanstack/router-plugin": "^1.114.3",
"dompurify": "^3.2.6",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"marked": "^16.1.1",
"pocketbase": "^0.26.0", "pocketbase": "^0.26.0",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",

4
src/components/DocumentList.tsx
View File

@@ -47,7 +47,7 @@ export function DocumentList<T extends AnyDocument>({
}; };
return ( return (
<section className="w-full max-w-2xl mx-auto"> <section className="w-full">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h2 className="text-xl font-bold text-slate-100">{title}</h2> <h2 className="text-xl font-bold text-slate-100">{title}</h2>
<div className="flex gap-2"> <div className="flex gap-2">
@@ -78,7 +78,7 @@ export function DocumentList<T extends AnyDocument>({
{items.map((item) => ( {items.map((item) => (
<li <li
key={item.id} key={item.id}
className="p-4 bg-slate-800 rounded text-slate-100 flex flex-row justify-between items-center" className="p-2 m-0 border-b-1 last:border-0 border-slate-700 flex flex-row justify-between items-center"
> >
{renderRow(item)} {renderRow(item)}

22
src/components/FormattedText.tsx Normal file
View File

@@ -0,0 +1,22 @@
import DOMPurify from "dompurify";
import * as Marked from "marked";
export type Props = {
value: string;
};
function formatText(text: React.ReactNode): { __html: string } {
if (typeof text === "string") {
return {
__html: DOMPurify.sanitize(
Marked.parse(text, { async: false }) as string,
),
};
}
throw new Error("Attempted to safe-render a non-string.");
}
export function FormattedText({ children }: React.PropsWithChildren) {
return <div dangerouslySetInnerHTML={formatText(children)}></div>;
}

12
src/components/documents/BasicRow.tsx
View File

@@ -1,11 +1,11 @@
import type { AnyDocument, DocumentId } from "@/lib/types"; import type { AnyDocument } from "@/lib/types";
import { FormattedText } from "../FormattedText";
import { DocumentLink } from "./DocumentLink"; import { DocumentLink } from "./DocumentLink";
export type Props = { export type Props = {
doc: AnyDocument; doc: AnyDocument;
title: string; title?: string;
description?: string; description?: string;
link: (id: DocumentId) => string;
}; };
/** /**
@@ -16,11 +16,11 @@ export const BasicRow = ({ doc, title, description }: Props) => {
<div> <div>
<DocumentLink <DocumentLink
childDocId={doc.id} childDocId={doc.id}
className="text-lg !no-underline text-slate-100 hover:underline hover:text-violet-400" className="!no-underline text-slate-100 hover:underline hover:text-violet-400"
> >
<h4>{title}</h4> {title && <h4 className="font-bold">{title}</h4>}
{description && <FormattedText>{description}</FormattedText>}
</DocumentLink> </DocumentLink>
{description && <p>{description}</p>}
</div> </div>
); );
}; };

2
src/components/documents/DocumentRow.tsx
View File

@@ -51,7 +51,7 @@ export const DocumentRow = ({
return <SecretToggleRow secret={document} root={root} />; return <SecretToggleRow secret={document} root={root} />;
case "scene": case "scene":
return <BasicRow doc={document} title={document.data.text} />; return <BasicRow doc={document} description={document.data.text} />;
case "treasure": case "treasure":
return <TreasureToggleRow treasure={document} root={root} />; return <TreasureToggleRow treasure={document} root={root} />;

8
src/components/documents/DocumentView.tsx
View File

@@ -42,14 +42,14 @@ export function DocumentView({
<Link <Link
to={CampaignRoute.to} to={CampaignRoute.to}
params={{ campaignId: doc.campaign }} params={{ campaignId: doc.campaign }}
className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors mb-4" className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors"
> >
Back to campaign ← Back to campaign
</Link> </Link>
<Link <Link
to="/document/$documentId/print" to="/document/$documentId/print"
params={{ documentId: doc.id }} params={{ documentId: doc.id }}
className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors mb-4" className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors"
> >
Print Print
</Link> </Link>
@@ -87,7 +87,7 @@ export function DocumentView({
/> />
) )
} }
flyout={childDocId && <Flyout docId={childDocId} />} flyout={childDocId && <Flyout key={childDocId} docId={childDocId} />}
/> />
); );
} }

8
src/components/documents/secret/SecretToggleRow.tsx
View File

@@ -3,6 +3,7 @@
import { pb } from "@/lib/pocketbase"; import { pb } from "@/lib/pocketbase";
import type { AnyDocument, Secret } from "@/lib/types"; import type { AnyDocument, Secret } from "@/lib/types";
import { useState } from "react"; import { useState } from "react";
import { DocumentLink } from "../DocumentLink";
/** /**
* Renders a secret row with a discovered checkbox and secret text. * Renders a secret row with a discovered checkbox and secret text.
@@ -70,7 +71,12 @@ export const SecretToggleRow = ({
aria-label="Discovered" aria-label="Discovered"
disabled={loading} disabled={loading}
/> />
{secret.data.text} <DocumentLink
childDocId={secret.id}
className="!no-underline text-slate-100 hover:underline hover:text-violet-400"
>
{secret.data.text}
</DocumentLink>
</div> </div>
); );
}; };

17
src/components/layout/TabbedLayout.tsx
View File

@@ -15,25 +15,20 @@ export function TabbedLayout({
flyout, flyout,
}: Props) { }: Props) {
return ( return (
<div> <div className="grow p-2 flex flex-col">
<div className=""> <div>
<div>{navigation}</div> <div className="flex flex-row gap-2">{navigation}</div>
<div>{title}</div> <div>{title}</div>
</div> </div>
<div className="flex flex-row justify-start m-2 max-w-5xl"> <div className="flex flex-row justify-start m-2 grow">
<div className="grow max-w-2xs p-0">{tabs}</div> <div className="shrink-0 grow-0 w-40 p-0">{tabs}</div>
<div <div
className={`grow p-2 bg-slate-800 border-t border-b border-r border-slate-700`} className={`grow p-2 bg-slate-800 border-t border-b border-r border-slate-700`}
> >
{content} {content}
</div> </div>
{flyout && ( {flyout && (
<div <div className="w-md p-2 bg-slate-800 border border-slate-700">
className="w-lg p-2 bg-slate-800 border border-slate-700 shadow-[0_0_15px_0_rgba(0,0,0,0.5)]"
style={{
"margin-left": "-32rem",
}}
>
{flyout} {flyout}
</div> </div>
)} )}

8
src/styles.css
View File

@@ -1,5 +1,5 @@
@import "tailwindcss"; @import "tailwindcss";
@tailwind utilities; @import "tailwindcss/utilities";
html, html,
body { body {
@@ -17,6 +17,12 @@ body {
min-width: 320px; min-width: 320px;
} }
/* The container for all content */
#app {
height: 100%;
width: 100%;
}
code, code,
pre { pre {
font-family: "Fira Mono", "Menlo", "Monaco", "Consolas", monospace; font-family: "Fira Mono", "Menlo", "Monaco", "Consolas", monospace;