feat: start FAQ page

src/d.ts

@@ -1,35 +1,16 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /// <reference types="@webbtc/webln-types" />
+/// <reference types="vite/client" />
 
 declare const __XXX: boolean;
 declare const __XXX_HOST: string;
 declare const __ZAP_STREAM_VERSION__: string;
 
-declare module "*.jpg" {
+declare module "*.md" {
-  const value: unknown;
-  export default value;
-}
-
-declare module "*.svg" {
-  const value: unknown;
-  export default value;
-}
-
-declare module "*.webp" {
   const value: string;
   export default value;
 }
 
-declare module "*.png" {
-  const value: string;
-  export default value;
-}
-
-declare module "*.css" {
-  const stylesheet: CSSStyleSheet;
-  export default stylesheet;
-}
-
 declare module "translations/*.json" {
   const value: Record<string, string>;
   export default value;

src/element/async-loader.tsx

@@ -0,0 +1,10 @@
+import { ReactNode, useEffect, useState } from "react";
+
+export function Async<T>({ loader, then }: { loader: () => Promise<T>, then: (v: T) => ReactNode }) {
+    const [res, setResult] = useState<T>();
+    useEffect(() => {
+        loader().then(setResult);
+    }, []);
+    if (!res) return;
+    return then(res);
+}

src/element/markdown.css

@@ -1,9 +1,3 @@
-.markdown {
-  font-size: 18px;
-  font-weight: 400;
-  line-height: 29px;
-}
-
 .markdown a {
   color: var(--primary);
 }
@@ -26,7 +20,7 @@
 .markdown video,
 .markdown iframe,
 .markdown audio {
-  width: 100%;
+  max-width: 100%;
   display: block;
 }
 
@@ -35,3 +29,12 @@
   width: -webkit-fill-available;
   aspect-ratio: 16 / 9;
 }
+
+.markdown h1,
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  margin: 0.5em 0;
+}

src/element/markdown.tsx

@@ -1,16 +1,21 @@
 import "./markdown.css";
 
 import { ReactNode, forwardRef, useMemo } from "react";
-import { Token, marked } from "marked";
+import { Token, Tokens, marked } from "marked";
 import { HyperText } from "./hypertext";
 import { Text } from "./text";
 
 interface MarkdownProps {
   content: string;
   tags?: Array<Array<string>>;
+
+  // Render plain text directly without parsing nostr/http links
+  plainText?: boolean;
 }
 
-function renderToken(t: Token): ReactNode {
+const Markdown = forwardRef<HTMLDivElement, MarkdownProps>((props: MarkdownProps, ref) => {
+
+  function renderToken(t: Token): ReactNode {
     try {
       switch (t.type) {
         case "paragraph": {
@@ -70,19 +75,36 @@ function renderToken(t: Token): ReactNode {
         case "del": {
           return <s>{t.tokens ? t.tokens.map(renderToken) : t.raw}</s>;
         }
+        case "table": {
+          return <table className="table-auto border-collapse">
+            <thead>
+              <tr>
+                {(t.header as Tokens.TableCell[]).map(v => <th className="border">{v.tokens ? v.tokens.map(renderToken) : v.text}</th>)}
+              </tr>
+            </thead>
+            <tbody>
+              {(t.rows as Tokens.TableCell[][]).map(v => <tr>
+                {v.map(d => <td className="border px-2 py-1">{d.tokens ? d.tokens.map(renderToken) : d.text}</td>)}
+              </tr>)}
+            </tbody>
+          </table>;
+        }
         default: {
           if ("tokens" in t) {
             return (t.tokens as Array<Token>).map(renderToken);
           }
+          if (props.plainText ?? false) {
+            return t.raw;
+          }
           return <Text content={t.raw} tags={[]} />;
         }
       }
     } catch (e) {
       console.error(e);
     }
-}
+  }
+
 
-const Markdown = forwardRef<HTMLDivElement, MarkdownProps>((props: MarkdownProps, ref) => {
   const parsed = useMemo(() => {
     return marked.lexer(props.content);
   }, [props.content, props.tags]);

src/faq.md

@@ -0,0 +1,13 @@
+# FAQ
+
+# Reccomended Stream Settings
+| Name | Value |
+| - | - |
+| Video Codec | h264 |
+| Audio Codec | AAC |
+| Max Video Bitrate | 7000k |
+| Max Audio Bitrate | 320k |
+| Keyframe Interval | 2s |
+
+### Example settings in OBS (Apple M1 Mac):
+![OBS Apple](https://void.cat/d/VQQ75R6tmbVQJ9eqiwJhoj.webp)

src/index.tsx

@@ -27,8 +27,12 @@ import { WidgetsPage } from "@/pages/widgets";
 import { AlertsPage } from "@/pages/alerts";
 import { StreamSummaryPage } from "@/pages/summary";
 import { EmbededPage } from "./pages/embed";
+import Markdown from "./element/markdown";
 const DashboardPage = lazy(() => import("./pages/dashboard"));
 
+import Faq from "@/faq.md";
+import { Async } from "./element/async-loader";
+
 const db = new SnortSystemDb();
 const System = new NostrSystem({
   db,
@@ -103,6 +107,13 @@ const router = createBrowserRouter([
           </Suspense>
         ),
       },
+      {
+        path: "/faq",
+        element: <Async loader={async () => {
+          const req = await fetch(Faq);
+          return await req.text();
+        }} then={(v) => <Markdown content={v} tags={[]} plainText={true} />} />
+      },
       {
         path: "*",
         element: <CatchAllRoutePage />,

vite.config.ts

@@ -28,6 +28,7 @@ export default defineConfig({
       filename: "build/stats.html",
     }),
   ],
+  assetsInclude: ["**/*.md"],
   build: {
     outDir: "build",
     sourcemap: true,