Merge pull request #194 from opentofu/registry-docs-ui

Registry docs UI

frontend/docs/index.md

@@ -4,4 +4,6 @@ sidebar_title: Overview
 sidebar_position: 1
 ---
 
-The OpenTofu Registry provides an API for OpenTofu to locate providers and modules. This documentation will guide you through the most important steps in using the registry or publishing your modules and providers. Please select the topic you are interested in from the left sidebar.
+# The OpenTofu Registry
+
+The OpenTofu Registry provides an API for OpenTofu to locate providers and modules. This documentation will guide you through the most important steps in using the registry or publishing your modules and providers. Please select the topic you are interested in from the left sidebar.

frontend/docs/sidebar.json

@@ -0,0 +1,22 @@
+[
+  {
+    "title": "Overview",
+    "path": "index.md",
+    "slug": ""
+  },
+  {
+    "title": "Users",
+    "items": [
+      {
+        "title": "For user",
+        "path": "users/index.md",
+        "slug": "users"
+      },
+      {
+        "title": "Using a module",
+        "path": "users/modules.md",
+        "slug": "users/modules"
+      }
+    ]
+  }
+]

frontend/package.json

@@ -53,6 +53,8 @@
     "typescript": "^5.5.4",
     "typescript-eslint": "^8.3.0",
     "unified": "^11.0.5",
+    "unplugin-macros": "^0.13.3",
+    "vfile-matter": "^5.0.0",
     "vite": "^5.4.2",
     "vite-tsconfig-paths": "^5.0.1"
   },

frontend/src/components/AnnouncementBar/content.ts

@@ -0,0 +1,11 @@
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+import announcement from "../../../announcement.md?raw";
+
+export const content = unified()
+  .use(remarkParse)
+  .use(remarkRehype)
+  .use(rehypeStringify)
+  .processSync(announcement).value;

frontend/src/components/AnnouncementBar/index.tsx

@@ -1,8 +1,6 @@
-interface AnnouncementBarProps {
-  content: string;
-}
+import { content } from "./content" with { type: "macro" };
 
-export function AnnouncementBar({ content }: AnnouncementBarProps) {
+export function AnnouncementBar() {
   return (
     <div
       className="flex h-6 items-center justify-center bg-brand-600 text-sm text-gray-900 [&_a]:underline"

frontend/src/components/Header/index.tsx

@@ -40,6 +40,11 @@ export function Header() {
             label="Modules"
             isActive={(id) => id.startsWith("module")}
           />
+          <HeaderLink
+            to="/docs"
+            label="Docs"
+            isActive={(id) => id === "docs"}
+          />
         </nav>
 
         <nav className="ml-auto flex h-9 items-center gap-6">

frontend/src/components/Markdown/index.tsx

@@ -1,74 +1,12 @@
 import { useMemo } from "react";
-import * as prod from "react/jsx-runtime";
-
-import remarkFrontmatter from "remark-frontmatter";
-import remarkParse from "remark-parse";
-import remarkRehype from "remark-rehype";
-import rehypeSlug from "rehype-slug";
-import remarkGfm from "remark-gfm";
-import rehypeReact, { Options } from "rehype-react";
-import rehypeSanitize from "rehype-sanitize";
-import rehypeRaw from "rehype-raw";
-import { unified } from "unified";
-import { MarkdownH1 } from "./H1";
-import { MarkdownP } from "./P";
-import { MarkdownPre } from "./Pre";
-import { MarkdownH2 } from "./H2";
-import { MarkdownH3 } from "./H3";
-import { MarkdownCode } from "./Code";
-import { MarkdownUl } from "./Ul";
-import { MarkdownLi } from "./Li";
-import { MarkdownA } from "./A";
-import { MarkdownTable } from "./Table";
-import { MarkdownTd } from "./Td";
-import { MarkdownTh } from "./Th";
-import { MarkdownImg } from "./Img";
-import { MarkdownOl } from "./Ol";
-import { MarkdownHr } from "./Hr";
-
-const production: Options = {
-  development: false,
-  Fragment: prod.Fragment,
-  jsx: prod.jsx,
-  jsxs: prod.jsxs,
-  components: {
-    a: MarkdownA,
-    ul: MarkdownUl,
-    li: MarkdownLi,
-    h1: MarkdownH1,
-    h2: MarkdownH2,
-    h3: MarkdownH3,
-    p: MarkdownP,
-    code: MarkdownCode,
-    pre: MarkdownPre,
-    table: MarkdownTable,
-    td: MarkdownTd,
-    th: MarkdownTh,
-    img: MarkdownImg,
-    ol: MarkdownOl,
-    hr: MarkdownHr,
-  },
-};
+import { processor } from "./processor";
 
 interface MarkdownProps {
   text: string;
 }
 
 export function Markdown({ text }: MarkdownProps) {
-  const { result } = useMemo(
-    () =>
-      unified()
-        .use(remarkParse)
-        .use(remarkFrontmatter)
-        .use(remarkGfm)
-        .use(remarkRehype, { allowDangerousHtml: true }) // This is okay to use dangerous html because we are sanitizing later on in the pipeline
-        .use(rehypeRaw)
-        .use(rehypeSanitize)
-        .use(rehypeSlug)
-        .use(rehypeReact, production)
-        .processSync(text),
-    [text],
-  );
+  const { result } = useMemo(() => processor.processSync(text), [text]);
 
   return result;
 }