add static pages (#1557)

* feat: move in static pages and typography

* feat: add public prose and static pages

* chore: exclude node from props

* docs: fix spacing and headers

package.json

@@ -28,6 +28,7 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@t3-oss/env-nextjs": "^0.11.1",
+    "@tailwindcss/typography": "^0.5.15",
     "@tanstack/react-query": "^5.60.2",
     "@tanstack/react-query-devtools": "^5.61.0",
     "autoprefixer": "^10.4.20",
@@ -41,9 +42,16 @@
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106",
     "react-hook-form": "^7.53.2",
+    "react-markdown": "^9.0.1",
+    "rehype-external-links": "^3.0.0",
+    "rehype-slug": "^6.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-textr": "^6.1.0",
+    "server-only": "^0.0.1",
     "sonner": "^1.7.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
+    "typographic-base": "^1.0.4",
     "vaul": "^1.1.1",
     "viem": "^2.21.45",
     "wagmi": "^2.12.32",

src/app/(dashboard)/layout.tsx

@@ -0,0 +1,19 @@
+import type { PropsWithChildren } from "react";
+
+const Dashboard = ({ children }: PropsWithChildren) => {
+  return <>{children}</>;
+  //<Layout>
+  //  <LayoutHero className="pb-28">
+  //    <Header />
+  //    <LayoutHeadline className="max-w-screen-md">
+  //      <LayoutTitle className="text-foreground">Privacy Policy</LayoutTitle>
+  //    </LayoutHeadline>
+  //  </LayoutHero>
+  //
+  //  <LayoutMain className="prose flex max-w-screen-md flex-col prose-headings:font-display prose-headings:text-foreground prose-li:text-foreground text-foreground marker:text-foreground">
+  //    {children}
+  //  </LayoutMain>
+  //</Layout>
+};
+
+export default Dashboard;

src/app/(dashboard)/privacy-policy/page.tsx

@@ -0,0 +1,11 @@
+import { PublicProse } from "@/components/PubilcProse";
+
+export const metadata = {
+  title: "Privacy Policy",
+};
+
+const Page = async () => {
+  return <PublicProse fileName="privacyPolicy" />;
+};
+
+export default Page;

src/app/(dashboard)/terms-of-use/page.tsx

@@ -0,0 +1,11 @@
+import { PublicProse } from "@/components/PubilcProse";
+
+export const metadata = {
+  title: "Terms of Use",
+};
+
+const Page = async () => {
+  return <PublicProse fileName="termsOfUse" />;
+};
+
+export default Page;

src/components/PubilcProse.tsx

@@ -0,0 +1,55 @@
+import "server-only";
+import { promises as fs } from "node:fs";
+import path from "node:path";
+import { Anchor } from "@/components/ui/Anchor";
+import Markdown from "react-markdown";
+import rehypeExternalLinks from "rehype-external-links";
+import rehypeSlug from "rehype-slug";
+import remarkGfm from "remark-gfm";
+import remarkTextr from "remark-textr";
+// @ts-expect-error: no typedef from module
+import base from "typographic-base";
+
+const applyTypographicBase = (prose: string) => {
+  return base(prose);
+};
+
+export const PublicProse = async ({ fileName }: { fileName: string }) => {
+  const file = await fs.readFile(
+    path.join(process.cwd(), `public/prose/${fileName}.md`),
+    "utf8",
+  );
+  return (
+    <main className="prose prose-neutral dark:prose-invert mx-auto max-w-prose py-16 prose-headings:font-display">
+      <Markdown
+        components={{
+          a: ({ node, ...props }) => (
+            <Anchor href={props.href || ""} variant="highlighted" {...props} />
+          ),
+        }}
+        remarkPlugins={[
+          remarkGfm,
+          [
+            remarkTextr,
+            {
+              options: { locale: "en-us" },
+              plugins: [applyTypographicBase],
+            },
+          ],
+        ]}
+        rehypePlugins={[
+          [
+            rehypeExternalLinks,
+            {
+              rel: ["nofollow noreferrer noopener"],
+              target: "_blank",
+            },
+          ],
+          rehypeSlug,
+        ]}
+      >
+        {file}
+      </Markdown>
+    </main>
+  );
+};

src/components/ui/Anchor.tsx

@@ -0,0 +1,64 @@
+import { cn } from "@/lib/cssUtils";
+import { ArrowSquareOut } from "@phosphor-icons/react/dist/ssr/ArrowSquareOut";
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import Link from "next/link";
+import { type ComponentProps, forwardRef } from "react";
+
+const anchorVariants = cva(
+  "underline-offset-4 focus:ring-ring focus-visible:ring-4 outline-none font-semibold",
+  {
+    variants: {
+      variant: {
+        default: "text-foreground hover:underline",
+        highlighted: "text-primary hover:underline",
+        muted: "text-muted-foreground hover:underline",
+        unstyled: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface AnchorProps
+  extends ComponentProps<typeof Link>,
+    VariantProps<typeof anchorVariants> {
+  asChild?: boolean;
+  showExternal?: boolean;
+}
+
+const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(
+  (
+    {
+      className,
+      variant,
+      asChild = false,
+      showExternal = false,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : Link;
+
+    return (
+      <Comp
+        className={cn(
+          anchorVariants({ variant }),
+          showExternal && "inline-flex items-center gap-1",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+        {showExternal && <ArrowSquareOut weight="bold" />}
+      </Comp>
+    );
+  },
+);
+Anchor.displayName = "Anchor";
+
+export { Anchor, anchorVariants };

tailwind.config.ts

@@ -1,5 +1,6 @@
 import type { Config } from "tailwindcss"
 import animatePlugin from "tailwindcss-animate";
+import typography from "@tailwindcss/typography"
 
 const config = {
   darkMode: ["class"],
@@ -73,7 +74,7 @@ const config = {
       },
     },
   },
-  plugins: [animatePlugin],
+  plugins: [animatePlugin, typography],
 } satisfies Config
 
 export default config