sanity-plugin-tnd-docs 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 The New Dynamic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,138 @@
+# sanity-plugin-tnd-docs
+
+> A Sanity Studio v3 plugin for displaying markdown documentation directly in your studio.
+
+## Installation
+
+```bash
+npm install sanity-plugin-tnd-docs
+```
+
+## Usage
+
+Add the plugin to your `sanity.config.ts` (or .js):
+
+```typescript
+import { defineConfig } from 'sanity'
+import { tndDocs } from 'sanity-plugin-tnd-docs'
+
+// Import your markdown files using Vite's import.meta.glob
+const docs = import.meta.glob('/docs/**/*.md', { eager: true, query: '?raw' import: 'default'})
+
+export default defineConfig({
+  // ...
+  plugins: [
+    tndDocs({
+      documents: docs
+    })
+  ]
+})
+```
+
+## Configuration Options
+
+| Option | Type | Required | Default | Description |
+|--------|------|----------|---------|-------------|
+| `documents` | `Record<string, string>` | Yes | - | Markdown files loaded via `import.meta.glob` |
+| `name` | `string` | No | `'tnd-docs'` | Internal name for the tool. Will determine route in studio |
+| `title` | `string` | No | `'Documentation'` | Display title in Sanity Studio |
+
+## Setting Up Your Documentation Files
+
+### 1. Create a docs folder in your project
+
+```
+your-sanity-project/
+├── docs/
+│   ├── getting-started.md
+│   ├── endpoints.md
+│   ├── authentication.md
+│   └── guides.md
+```
+
+### 2. Import markdown files
+
+The plugin uses Vite's `import.meta.glob` to load markdown files at build time. This must be done in your `sanity.config.ts`:
+
+```typescript
+// Load all .md files from the /docs directory
+const docs = import.meta.glob('/docs/**/*.md', {
+  eager: true,
+  query: '?raw',
+  import: 'default'
+})
+```
+
+## Example: Complete Configuration
+
+```typescript
+import { defineConfig } from 'sanity'
+import { structureTool } from 'sanity/structure'
+import { tndDocs } from 'sanity-plugin-tnd-docs'
+
+// Load documentation files
+const docs = import.meta.glob('/docs/**/*.md', { eager: true, as: 'raw' })
+
+export default defineConfig({
+  name: 'default',
+  title: 'My Project',
+
+  projectId: 'your-project-id',
+  dataset: 'production',
+
+  plugins: [
+    structureTool(),
+    tndDocs({
+      title: 'Project Docs',
+      documents: docs
+    })
+  ],
+
+  schema: {
+    types: [/* your schemas */]
+  }
+})
+```
+
+⚠️ **The glob pattern must be a literal string** - you cannot use variables:
+
+```typescript
+// ✅ Correct
+const docs = import.meta.glob('/docs/**/*.md', { eager: true, as: 'raw' })
+
+// ❌ Incorrect - will not work
+const path = '/docs/**/*.md'
+const docs = import.meta.glob(path, { eager: true, as: 'raw' })
+```
+
+## Markdown Syntax
+
+### Useful frontmatter
+
+Currently the only frontmatter needed is:
+
+| Name | Type | Required | Description |
+|--------|------|----------|-------------|
+| `title` | `number` | No | Will be used to populate the title of the entry in the side navigation. If missing, the path will be used |
+| `weight` | `string` | No | Will be used to sort the entries in the side navigation |
+| `description` | `string` | No | Will be printed in small text in the navigation entry |
+
+## Images
+
+Sanity will copy the static directory as is, so you should use it to store your md images.
+
+```md
+![This is the title attribute](/static/uploads/title-formating.png "This is a caption")
+```
+
+## License
+
+[MIT](LICENSE) © The New Dynamic
+
+## Develop & test
+
+This plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)
+with default configuration for build & watch scripts.
+
+See [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)
+on how to run this plugin with hotreload in the studio.

package/dist/index.d.mts

@@ -0,0 +1,16 @@
+import { Plugin as Plugin_2 } from "sanity"
+
+declare interface DocConfig {
+  name?: string
+  title?: string
+  documents: Record<string, string>
+}
+
+/**
+ * TND Documentation plugin for Sanity Studio
+ *
+ * @public
+ */
+export declare const tndDocs: Plugin_2<DocConfig>
+
+export {}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import { Plugin as Plugin_2 } from "sanity"
+
+declare interface DocConfig {
+  name?: string
+  title?: string
+  documents: Record<string, string>
+}
+
+/**
+ * TND Documentation plugin for Sanity Studio
+ *
+ * @public
+ */
+export declare const tndDocs: Plugin_2<DocConfig>
+
+export {}

package/dist/index.js

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: !0 });
+var icons = require("@sanity/icons"), marked = require("marked"), react = require("react"), sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), ui = require("@sanity/ui");
+function parseFrontmatter(markdown) {
+  const frontmatterRegex = /^---\n([\s\S]*?)\n---\n([\s\S]*)$/, match = markdown.match(frontmatterRegex);
+  if (!match)
+    return { frontmatter: {}, content: markdown };
+  const frontmatterText = match[1] ?? "", content = match[2] ?? "", frontmatter = {};
+  return frontmatterText.split(`
+`).forEach((line) => {
+    const colonIndex = line.indexOf(":");
+    if (colonIndex > 0) {
+      const key = line.substring(0, colonIndex).trim(), value = line.substring(colonIndex + 1).trim();
+      frontmatter[key] = value;
+    }
+  }), { frontmatter, content };
+}
+function useDocRouter(documents) {
+  const processedFiles = react.useMemo(() => Object.entries(documents).map(([path, rawContent]) => {
+    const filename = path, { frontmatter, content } = parseFrontmatter(rawContent), html = marked.marked.parse(content);
+    return {
+      path,
+      filename,
+      weight: frontmatter.weight || 0,
+      description: frontmatter.description || void 0,
+      title: frontmatter.title || filename.replace(".md", ""),
+      content,
+      html,
+      frontmatter
+    };
+  }).sort((a, b) => a.weight - b.weight), [documents]), getInitialPath = () => window.location.hash.slice(1) || processedFiles[0]?.path || null, [currentPath, setCurrentPath] = react.useState(getInitialPath());
+  react.useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1);
+      setCurrentPath(hash || processedFiles[0]?.path || null);
+    };
+    return window.addEventListener("hashchange", handleHashChange), () => window.removeEventListener("hashchange", handleHashChange);
+  }, []);
+  const navigate = (path) => {
+    window.location.hash = path, setCurrentPath(path);
+  }, currentFile = processedFiles.find((file) => file.path === currentPath) || null;
+  return {
+    currentPath,
+    currentFile,
+    // The full processed file object
+    navigate,
+    allFiles: processedFiles
+    // All processed files, sorted by weight
+  };
+}
+function Body({ file }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 5, weight: "bold", style: { marginBottom: "1rem" }, children: file.title }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "prose",
+        dangerouslySetInnerHTML: {
+          __html: file.html
+        },
+        style: {
+          maxWidth: "800px",
+          lineHeight: "1.6",
+          fontFamily: "system-ui, -apple-system, sans-serif"
+        }
+      }
+    )
+  ] });
+}
+function SideNav({ allFiles, currentFile, navigate }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { space: 2, children: allFiles.map((file) => /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Card,
+    {
+      padding: 3,
+      radius: 2,
+      shadow: 1,
+      style: {
+        cursor: "pointer",
+        backgroundColor: currentFile?.filename == file.filename ? "#FAFAF8" : "transparent"
+      },
+      onClick: () => navigate(file.path),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, weight: "medium", children: file.title }),
+        file.description && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 0, style: { marginTop: ".4rem" }, muted: !0, children: file.description })
+      ]
+    },
+    file.filename
+  )) });
+}
+function Doc({ config }) {
+  const { currentFile, navigate, allFiles } = useDocRouter(config.documents);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { padding: 4, className: "here-you-go", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+  .prose {
+    figure{
+      display: inline-block;
+      gap: 2;
+      margin: 0;
+      figcaption{
+        text-align: center;
+      }
+    }
+    img{
+      display:block;
+      max-width: 100%;
+      flex-grow: 0;
+      border: 1px solid hsl(228, 10%, 90%);
+      border-radius: 3px;
+    }
+    strong{
+      font-weight: 700;
+    }
+  }
+  .doc-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+  @media (min-width: 768px) {
+    .doc-grid {
+      grid-template-columns: 250px 1fr;
+    }
+  }
+` }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 5, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 4, weight: "bold", children: config.title || "Documentation" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "doc-grid", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SideNav, { navigate, currentFile, allFiles }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 4, radius: 2, shadow: 1, style: { backgroundColor: "#FAFAF8" }, children: currentFile ? /* @__PURE__ */ jsxRuntime.jsx(Body, { file: currentFile }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, children: "Select a file to view its contents" }) })
+      ] })
+    ] })
+  ] });
+}
+function Errors({ messages }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { padding: 4, align: "center", justify: "center", style: { height: "100%", width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { tone: "caution", padding: 4, border: !0, children: messages.map((m, index) => /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: m }, index)) }) });
+}
+const renderer = {
+  image(href, title, text) {
+    return `<div><figure>
+      <img src="${href}" alt="${text}" />
+      ${title ? `<figcaption>${title}</figcaption>` : ""}
+    </figure></div>`;
+  }
+};
+marked.marked.use({ renderer });
+const tndDocs = sanity.definePlugin((config) => {
+  const errors = [];
+  if (!config)
+    errors.push("tnd-docs: Configuration is required");
+  else if (config) {
+    const missingFields = ["documents"].filter((field) => !config[field]);
+    missingFields.length > 0 && errors.push(`tnd-docs: Missing required configuration fields: ${missingFields.join(", ")}`);
+  }
+  return {
+    name: "tnd-docs",
+    tools: [
+      {
+        name: config && config.name || "tnd-docs",
+        title: "Documentation",
+        icon: icons.DocumentTextIcon,
+        component: () => errors.length ? react.createElement(Errors, { messages: errors }) : react.createElement(Doc, { config })
+      }
+    ]
+  };
+});
+exports.tndDocs = tndDocs;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/util/index.ts","../src/hooks/useDocRouter.ts","../src/components/Body.tsx","../src/components/SideNav.tsx","../src/components/Doc.tsx","../src/components/Errors.tsx","../src/renderer.ts","../src/index.ts"],"sourcesContent":["export function parseFrontmatter(markdown: string): {\n  frontmatter: Record<string, any>\n  content: string\n} {\n  const frontmatterRegex = /^---\\n([\\s\\S]*?)\\n---\\n([\\s\\S]*)$/\n  const match = markdown.match(frontmatterRegex)\n\n  if (!match) {\n    return { frontmatter: {}, content: markdown }\n  }\n\n  const frontmatterText = match[1] ?? \"\"\n  const content = match[2] ?? \"\"\n\n  // Parse YAML-like frontmatter (simple key: value pairs)\n  const frontmatter: Record<string, any> = {}\n  frontmatterText.split(\"\\n\").forEach((line) => {\n    const colonIndex = line.indexOf(\":\")\n    if (colonIndex > 0) {\n      const key = line.substring(0, colonIndex).trim()\n      const value = line.substring(colonIndex + 1).trim()\n      frontmatter[key] = value\n    }\n  })\n  return { frontmatter, content }\n}\n","import { marked } from \"marked\"\nimport { useEffect, useMemo, useState } from \"react\"\n\nimport type { MarkdownFile } from \"../types\"\nimport { parseFrontmatter } from \"../util\" // Your existing parser\n\nexport function useDocRouter(documents: Record<string, string>) {\n  // Process all markdown files once\n  const processedFiles = useMemo(() => {\n    return Object.entries(documents)\n      .map(([path, rawContent]) => {\n        const filename = path\n\n        // Parse frontmatter and content\n        const { frontmatter, content } = parseFrontmatter(rawContent)\n\n        // Convert markdown to HTML\n        const html = marked.parse(content) as string\n        return {\n          path,\n          filename,\n          weight: frontmatter[\"weight\"] || 0,\n          description: frontmatter[\"description\"] || undefined,\n          title: frontmatter[\"title\"] || filename.replace(\".md\", \"\"),\n          content,\n          html,\n          frontmatter,\n        } as MarkdownFile\n      })\n      .sort((a, b) => a.weight - b.weight) // Sort by weight\n  }, [documents])\n\n  // Get initial path from URL hash, or use first document\n  const getInitialPath = () => {\n    const hash = window.location.hash.slice(1)\n    return hash || processedFiles[0]?.path || null\n  }\n\n  const [currentPath, setCurrentPath] = useState<string | null>(getInitialPath())\n\n  // Listen for URL hash changes\n  useEffect(() => {\n    const handleHashChange = () => {\n      const hash = window.location.hash.slice(1)\n      setCurrentPath(hash || processedFiles[0]?.path || null)\n    }\n\n    window.addEventListener(\"hashchange\", handleHashChange)\n    return () => window.removeEventListener(\"hashchange\", handleHashChange)\n  }, []) // Empty array - only set up listener once\n\n  // Function to navigate to a different document\n  const navigate = (path: string) => {\n    window.location.hash = path\n    setCurrentPath(path)\n  }\n\n  // Get the current processed file\n  const currentFile = processedFiles.find((file) => file.path === currentPath) || null\n\n  return {\n    currentPath,\n    currentFile, // The full processed file object\n    navigate,\n    allFiles: processedFiles, // All processed files, sorted by weight\n  }\n}\n","/* eslint-disable react/no-danger */\nimport { Text } from \"@sanity/ui\"\nimport type { JSX } from \"react\"\n\nimport type { MarkdownFile } from \"../types\"\n\nexport function Body({ file }: { file: MarkdownFile }): JSX.Element {\n  return (\n    <div>\n      <Text size={5} weight=\"bold\" style={{ marginBottom: \"1rem\" }}>\n        {file.title}\n      </Text>\n      <div\n        className=\"prose\"\n        dangerouslySetInnerHTML={{\n          __html: file.html,\n        }}\n        style={{\n          maxWidth: \"800px\",\n          lineHeight: \"1.6\",\n          fontFamily: \"system-ui, -apple-system, sans-serif\",\n        }}\n      />\n    </div>\n  )\n}\n","import { Card, Stack, Text } from \"@sanity/ui\"\nimport { JSX } from \"react\"\n\nimport type { SideNavProps } from \"../types\"\n\nexport function SideNav({ allFiles, currentFile, navigate }: SideNavProps): JSX.Element {\n  return (\n    <Stack space={2}>\n      {allFiles.map((file) => (\n        <Card\n          key={file.filename}\n          padding={3}\n          radius={2}\n          shadow={1}\n          style={{\n            cursor: \"pointer\",\n            backgroundColor: currentFile?.filename == file.filename ? \"#FAFAF8\" : \"transparent\",\n          }}\n          // eslint-disable-next-line react/jsx-no-bind\n          onClick={() => navigate(file.path)}\n        >\n          <Text size={1} weight=\"medium\">\n            {file.title}\n          </Text>\n          {file.description && (\n            <Text size={0} style={{ marginTop: \".4rem\" }} muted>\n              {file.description}\n            </Text>\n          )}\n        </Card>\n      ))}\n    </Stack>\n  )\n}\n","import { Box, Card, Stack, Text } from \"@sanity/ui\"\nimport type { JSX } from \"react\"\n\nimport { useDocRouter } from \"../hooks/useDocRouter\"\nimport type { DocProps } from \"../types\"\nimport { Body } from \"./Body\"\nimport { SideNav } from \"./SideNav\"\n\nexport function Doc({ config }: DocProps): JSX.Element {\n  const { currentFile, navigate, allFiles } = useDocRouter(config.documents)\n\n  const styles = `\n  .prose {\n    figure{\n      display: inline-block;\n      gap: 2;\n      margin: 0;\n      figcaption{\n        text-align: center;\n      }\n    }\n    img{\n      display:block;\n      max-width: 100%;\n      flex-grow: 0;\n      border: 1px solid hsl(228, 10%, 90%);\n      border-radius: 3px;\n    }\n    strong{\n      font-weight: 700;\n    }\n  }\n  .doc-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n  @media (min-width: 768px) {\n    .doc-grid {\n      grid-template-columns: 250px 1fr;\n    }\n  }\n`\n  return (\n    <Box padding={4} className=\"here-you-go\">\n      <style>{styles}</style>\n      <Stack space={5}>\n        <Text size={4} weight=\"bold\">\n          {config.title || \"Documentation\"}\n        </Text>\n        <div className=\"doc-grid\">\n          <SideNav navigate={navigate} currentFile={currentFile} allFiles={allFiles} />\n          <Card padding={4} radius={2} shadow={1} style={{ backgroundColor: \"#FAFAF8\" }}>\n            {currentFile ? (\n              <Body file={currentFile} />\n            ) : (\n              <Text muted>Select a file to view its contents</Text>\n            )}\n          </Card>\n        </div>\n      </Stack>\n    </Box>\n  )\n}\n","import { Card, Flex, Text } from \"@sanity/ui\"\nimport { JSX } from \"react\"\n\nexport function Errors({ messages }: { messages: string[] }): JSX.Element {\n  return (\n    <Flex padding={4} align=\"center\" justify=\"center\" style={{ height: \"100%\", width: \"100%\" }}>\n      <Card tone=\"caution\" padding={4} border>\n        {messages.map((m, index) => (\n          <Text key={index}>{m}</Text>\n        ))}\n      </Card>\n    </Flex>\n  )\n}\n","import { type Renderer } from \"marked\"\n\nconst renderer: Partial<Renderer> = {\n  image(href: string, title: string | null, text: string): string {\n    return `<div><figure>\n      <img src=\"${href}\" alt=\"${text}\" />\n      ${title ? `<figcaption>${title}</figcaption>` : \"\"}\n    </figure></div>`\n  },\n}\n\nexport default renderer\n","/** @public */\nimport { DocumentTextIcon } from \"@sanity/icons\"\nimport { marked } from \"marked\"\nimport { createElement } from \"react\"\nimport { definePlugin } from \"sanity\"\n\nimport { Doc } from \"./components/Doc\"\nimport { Errors } from \"./components/Errors\"\nimport renderer from \"./renderer\"\nimport type { DocConfig } from \"./types\"\n//import './style.css'\nmarked.use({ renderer })\n\n/**\n * TND Documentation plugin for Sanity Studio\n *\n * @public\n */\nexport const tndDocs = definePlugin<DocConfig>((config) => {\n  const errors: string[] = []\n\n  if (!config) {\n    errors.push(\"tnd-docs: Configuration is required\")\n  } else if (config) {\n    // Add specific required field checks\n    // Example: if your config requires certain fields\n    const requiredFields = [\"documents\"] // Replace with your actual required fields\n    const missingFields = requiredFields.filter((field) => !config[field as keyof DocConfig])\n    if (missingFields.length > 0) {\n      errors.push(`tnd-docs: Missing required configuration fields: ${missingFields.join(\", \")}`)\n    }\n  }\n\n  return {\n    name: \"tnd-docs\",\n    tools: [\n      {\n        name: (config && config.name) || \"tnd-docs\",\n        title: \"Documentation\",\n        icon: DocumentTextIcon,\n        component: () =>\n          errors.length\n            ? createElement(Errors, { messages: errors })\n            : createElement(Doc, { config }),\n      },\n    ],\n  }\n})\n"],"names":["useMemo","marked","useState","useEffect","jsx","Text","Stack","jsxs","Card","Box","Flex","definePlugin","DocumentTextIcon","createElement"],"mappings":"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"}

package/dist/index.mjs

@@ -0,0 +1,172 @@
+import { DocumentTextIcon } from "@sanity/icons";
+import { marked } from "marked";
+import { useMemo, useState, useEffect, createElement } from "react";
+import { definePlugin } from "sanity";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Text, Stack, Card, Box, Flex } from "@sanity/ui";
+function parseFrontmatter(markdown) {
+  const frontmatterRegex = /^---\n([\s\S]*?)\n---\n([\s\S]*)$/, match = markdown.match(frontmatterRegex);
+  if (!match)
+    return { frontmatter: {}, content: markdown };
+  const frontmatterText = match[1] ?? "", content = match[2] ?? "", frontmatter = {};
+  return frontmatterText.split(`
+`).forEach((line) => {
+    const colonIndex = line.indexOf(":");
+    if (colonIndex > 0) {
+      const key = line.substring(0, colonIndex).trim(), value = line.substring(colonIndex + 1).trim();
+      frontmatter[key] = value;
+    }
+  }), { frontmatter, content };
+}
+function useDocRouter(documents) {
+  const processedFiles = useMemo(() => Object.entries(documents).map(([path, rawContent]) => {
+    const filename = path, { frontmatter, content } = parseFrontmatter(rawContent), html = marked.parse(content);
+    return {
+      path,
+      filename,
+      weight: frontmatter.weight || 0,
+      description: frontmatter.description || void 0,
+      title: frontmatter.title || filename.replace(".md", ""),
+      content,
+      html,
+      frontmatter
+    };
+  }).sort((a, b) => a.weight - b.weight), [documents]), getInitialPath = () => window.location.hash.slice(1) || processedFiles[0]?.path || null, [currentPath, setCurrentPath] = useState(getInitialPath());
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1);
+      setCurrentPath(hash || processedFiles[0]?.path || null);
+    };
+    return window.addEventListener("hashchange", handleHashChange), () => window.removeEventListener("hashchange", handleHashChange);
+  }, []);
+  const navigate = (path) => {
+    window.location.hash = path, setCurrentPath(path);
+  }, currentFile = processedFiles.find((file) => file.path === currentPath) || null;
+  return {
+    currentPath,
+    currentFile,
+    // The full processed file object
+    navigate,
+    allFiles: processedFiles
+    // All processed files, sorted by weight
+  };
+}
+function Body({ file }) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Text, { size: 5, weight: "bold", style: { marginBottom: "1rem" }, children: file.title }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "prose",
+        dangerouslySetInnerHTML: {
+          __html: file.html
+        },
+        style: {
+          maxWidth: "800px",
+          lineHeight: "1.6",
+          fontFamily: "system-ui, -apple-system, sans-serif"
+        }
+      }
+    )
+  ] });
+}
+function SideNav({ allFiles, currentFile, navigate }) {
+  return /* @__PURE__ */ jsx(Stack, { space: 2, children: allFiles.map((file) => /* @__PURE__ */ jsxs(
+    Card,
+    {
+      padding: 3,
+      radius: 2,
+      shadow: 1,
+      style: {
+        cursor: "pointer",
+        backgroundColor: currentFile?.filename == file.filename ? "#FAFAF8" : "transparent"
+      },
+      onClick: () => navigate(file.path),
+      children: [
+        /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: file.title }),
+        file.description && /* @__PURE__ */ jsx(Text, { size: 0, style: { marginTop: ".4rem" }, muted: !0, children: file.description })
+      ]
+    },
+    file.filename
+  )) });
+}
+function Doc({ config }) {
+  const { currentFile, navigate, allFiles } = useDocRouter(config.documents);
+  return /* @__PURE__ */ jsxs(Box, { padding: 4, className: "here-you-go", children: [
+    /* @__PURE__ */ jsx("style", { children: `
+  .prose {
+    figure{
+      display: inline-block;
+      gap: 2;
+      margin: 0;
+      figcaption{
+        text-align: center;
+      }
+    }
+    img{
+      display:block;
+      max-width: 100%;
+      flex-grow: 0;
+      border: 1px solid hsl(228, 10%, 90%);
+      border-radius: 3px;
+    }
+    strong{
+      font-weight: 700;
+    }
+  }
+  .doc-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+  @media (min-width: 768px) {
+    .doc-grid {
+      grid-template-columns: 250px 1fr;
+    }
+  }
+` }),
+    /* @__PURE__ */ jsxs(Stack, { space: 5, children: [
+      /* @__PURE__ */ jsx(Text, { size: 4, weight: "bold", children: config.title || "Documentation" }),
+      /* @__PURE__ */ jsxs("div", { className: "doc-grid", children: [
+        /* @__PURE__ */ jsx(SideNav, { navigate, currentFile, allFiles }),
+        /* @__PURE__ */ jsx(Card, { padding: 4, radius: 2, shadow: 1, style: { backgroundColor: "#FAFAF8" }, children: currentFile ? /* @__PURE__ */ jsx(Body, { file: currentFile }) : /* @__PURE__ */ jsx(Text, { muted: !0, children: "Select a file to view its contents" }) })
+      ] })
+    ] })
+  ] });
+}
+function Errors({ messages }) {
+  return /* @__PURE__ */ jsx(Flex, { padding: 4, align: "center", justify: "center", style: { height: "100%", width: "100%" }, children: /* @__PURE__ */ jsx(Card, { tone: "caution", padding: 4, border: !0, children: messages.map((m, index) => /* @__PURE__ */ jsx(Text, { children: m }, index)) }) });
+}
+const renderer = {
+  image(href, title, text) {
+    return `<div><figure>
+      <img src="${href}" alt="${text}" />
+      ${title ? `<figcaption>${title}</figcaption>` : ""}
+    </figure></div>`;
+  }
+};
+marked.use({ renderer });
+const tndDocs = definePlugin((config) => {
+  const errors = [];
+  if (!config)
+    errors.push("tnd-docs: Configuration is required");
+  else if (config) {
+    const missingFields = ["documents"].filter((field) => !config[field]);
+    missingFields.length > 0 && errors.push(`tnd-docs: Missing required configuration fields: ${missingFields.join(", ")}`);
+  }
+  return {
+    name: "tnd-docs",
+    tools: [
+      {
+        name: config && config.name || "tnd-docs",
+        title: "Documentation",
+        icon: DocumentTextIcon,
+        component: () => errors.length ? createElement(Errors, { messages: errors }) : createElement(Doc, { config })
+      }
+    ]
+  };
+});
+export {
+  tndDocs
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/util/index.ts","../src/hooks/useDocRouter.ts","../src/components/Body.tsx","../src/components/SideNav.tsx","../src/components/Doc.tsx","../src/components/Errors.tsx","../src/renderer.ts","../src/index.ts"],"sourcesContent":["export function parseFrontmatter(markdown: string): {\n  frontmatter: Record<string, any>\n  content: string\n} {\n  const frontmatterRegex = /^---\\n([\\s\\S]*?)\\n---\\n([\\s\\S]*)$/\n  const match = markdown.match(frontmatterRegex)\n\n  if (!match) {\n    return { frontmatter: {}, content: markdown }\n  }\n\n  const frontmatterText = match[1] ?? \"\"\n  const content = match[2] ?? \"\"\n\n  // Parse YAML-like frontmatter (simple key: value pairs)\n  const frontmatter: Record<string, any> = {}\n  frontmatterText.split(\"\\n\").forEach((line) => {\n    const colonIndex = line.indexOf(\":\")\n    if (colonIndex > 0) {\n      const key = line.substring(0, colonIndex).trim()\n      const value = line.substring(colonIndex + 1).trim()\n      frontmatter[key] = value\n    }\n  })\n  return { frontmatter, content }\n}\n","import { marked } from \"marked\"\nimport { useEffect, useMemo, useState } from \"react\"\n\nimport type { MarkdownFile } from \"../types\"\nimport { parseFrontmatter } from \"../util\" // Your existing parser\n\nexport function useDocRouter(documents: Record<string, string>) {\n  // Process all markdown files once\n  const processedFiles = useMemo(() => {\n    return Object.entries(documents)\n      .map(([path, rawContent]) => {\n        const filename = path\n\n        // Parse frontmatter and content\n        const { frontmatter, content } = parseFrontmatter(rawContent)\n\n        // Convert markdown to HTML\n        const html = marked.parse(content) as string\n        return {\n          path,\n          filename,\n          weight: frontmatter[\"weight\"] || 0,\n          description: frontmatter[\"description\"] || undefined,\n          title: frontmatter[\"title\"] || filename.replace(\".md\", \"\"),\n          content,\n          html,\n          frontmatter,\n        } as MarkdownFile\n      })\n      .sort((a, b) => a.weight - b.weight) // Sort by weight\n  }, [documents])\n\n  // Get initial path from URL hash, or use first document\n  const getInitialPath = () => {\n    const hash = window.location.hash.slice(1)\n    return hash || processedFiles[0]?.path || null\n  }\n\n  const [currentPath, setCurrentPath] = useState<string | null>(getInitialPath())\n\n  // Listen for URL hash changes\n  useEffect(() => {\n    const handleHashChange = () => {\n      const hash = window.location.hash.slice(1)\n      setCurrentPath(hash || processedFiles[0]?.path || null)\n    }\n\n    window.addEventListener(\"hashchange\", handleHashChange)\n    return () => window.removeEventListener(\"hashchange\", handleHashChange)\n  }, []) // Empty array - only set up listener once\n\n  // Function to navigate to a different document\n  const navigate = (path: string) => {\n    window.location.hash = path\n    setCurrentPath(path)\n  }\n\n  // Get the current processed file\n  const currentFile = processedFiles.find((file) => file.path === currentPath) || null\n\n  return {\n    currentPath,\n    currentFile, // The full processed file object\n    navigate,\n    allFiles: processedFiles, // All processed files, sorted by weight\n  }\n}\n","/* eslint-disable react/no-danger */\nimport { Text } from \"@sanity/ui\"\nimport type { JSX } from \"react\"\n\nimport type { MarkdownFile } from \"../types\"\n\nexport function Body({ file }: { file: MarkdownFile }): JSX.Element {\n  return (\n    <div>\n      <Text size={5} weight=\"bold\" style={{ marginBottom: \"1rem\" }}>\n        {file.title}\n      </Text>\n      <div\n        className=\"prose\"\n        dangerouslySetInnerHTML={{\n          __html: file.html,\n        }}\n        style={{\n          maxWidth: \"800px\",\n          lineHeight: \"1.6\",\n          fontFamily: \"system-ui, -apple-system, sans-serif\",\n        }}\n      />\n    </div>\n  )\n}\n","import { Card, Stack, Text } from \"@sanity/ui\"\nimport { JSX } from \"react\"\n\nimport type { SideNavProps } from \"../types\"\n\nexport function SideNav({ allFiles, currentFile, navigate }: SideNavProps): JSX.Element {\n  return (\n    <Stack space={2}>\n      {allFiles.map((file) => (\n        <Card\n          key={file.filename}\n          padding={3}\n          radius={2}\n          shadow={1}\n          style={{\n            cursor: \"pointer\",\n            backgroundColor: currentFile?.filename == file.filename ? \"#FAFAF8\" : \"transparent\",\n          }}\n          // eslint-disable-next-line react/jsx-no-bind\n          onClick={() => navigate(file.path)}\n        >\n          <Text size={1} weight=\"medium\">\n            {file.title}\n          </Text>\n          {file.description && (\n            <Text size={0} style={{ marginTop: \".4rem\" }} muted>\n              {file.description}\n            </Text>\n          )}\n        </Card>\n      ))}\n    </Stack>\n  )\n}\n","import { Box, Card, Stack, Text } from \"@sanity/ui\"\nimport type { JSX } from \"react\"\n\nimport { useDocRouter } from \"../hooks/useDocRouter\"\nimport type { DocProps } from \"../types\"\nimport { Body } from \"./Body\"\nimport { SideNav } from \"./SideNav\"\n\nexport function Doc({ config }: DocProps): JSX.Element {\n  const { currentFile, navigate, allFiles } = useDocRouter(config.documents)\n\n  const styles = `\n  .prose {\n    figure{\n      display: inline-block;\n      gap: 2;\n      margin: 0;\n      figcaption{\n        text-align: center;\n      }\n    }\n    img{\n      display:block;\n      max-width: 100%;\n      flex-grow: 0;\n      border: 1px solid hsl(228, 10%, 90%);\n      border-radius: 3px;\n    }\n    strong{\n      font-weight: 700;\n    }\n  }\n  .doc-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n  @media (min-width: 768px) {\n    .doc-grid {\n      grid-template-columns: 250px 1fr;\n    }\n  }\n`\n  return (\n    <Box padding={4} className=\"here-you-go\">\n      <style>{styles}</style>\n      <Stack space={5}>\n        <Text size={4} weight=\"bold\">\n          {config.title || \"Documentation\"}\n        </Text>\n        <div className=\"doc-grid\">\n          <SideNav navigate={navigate} currentFile={currentFile} allFiles={allFiles} />\n          <Card padding={4} radius={2} shadow={1} style={{ backgroundColor: \"#FAFAF8\" }}>\n            {currentFile ? (\n              <Body file={currentFile} />\n            ) : (\n              <Text muted>Select a file to view its contents</Text>\n            )}\n          </Card>\n        </div>\n      </Stack>\n    </Box>\n  )\n}\n","import { Card, Flex, Text } from \"@sanity/ui\"\nimport { JSX } from \"react\"\n\nexport function Errors({ messages }: { messages: string[] }): JSX.Element {\n  return (\n    <Flex padding={4} align=\"center\" justify=\"center\" style={{ height: \"100%\", width: \"100%\" }}>\n      <Card tone=\"caution\" padding={4} border>\n        {messages.map((m, index) => (\n          <Text key={index}>{m}</Text>\n        ))}\n      </Card>\n    </Flex>\n  )\n}\n","import { type Renderer } from \"marked\"\n\nconst renderer: Partial<Renderer> = {\n  image(href: string, title: string | null, text: string): string {\n    return `<div><figure>\n      <img src=\"${href}\" alt=\"${text}\" />\n      ${title ? `<figcaption>${title}</figcaption>` : \"\"}\n    </figure></div>`\n  },\n}\n\nexport default renderer\n","/** @public */\nimport { DocumentTextIcon } from \"@sanity/icons\"\nimport { marked } from \"marked\"\nimport { createElement } from \"react\"\nimport { definePlugin } from \"sanity\"\n\nimport { Doc } from \"./components/Doc\"\nimport { Errors } from \"./components/Errors\"\nimport renderer from \"./renderer\"\nimport type { DocConfig } from \"./types\"\n//import './style.css'\nmarked.use({ renderer })\n\n/**\n * TND Documentation plugin for Sanity Studio\n *\n * @public\n */\nexport const tndDocs = definePlugin<DocConfig>((config) => {\n  const errors: string[] = []\n\n  if (!config) {\n    errors.push(\"tnd-docs: Configuration is required\")\n  } else if (config) {\n    // Add specific required field checks\n    // Example: if your config requires certain fields\n    const requiredFields = [\"documents\"] // Replace with your actual required fields\n    const missingFields = requiredFields.filter((field) => !config[field as keyof DocConfig])\n    if (missingFields.length > 0) {\n      errors.push(`tnd-docs: Missing required configuration fields: ${missingFields.join(\", \")}`)\n    }\n  }\n\n  return {\n    name: \"tnd-docs\",\n    tools: [\n      {\n        name: (config && config.name) || \"tnd-docs\",\n        title: \"Documentation\",\n        icon: DocumentTextIcon,\n        component: () =>\n          errors.length\n            ? createElement(Errors, { messages: errors })\n            : createElement(Doc, { config }),\n      },\n    ],\n  }\n})\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "sanity-plugin-tnd-docs",
+  "version": "1.0.0",
+  "description": "Adding documentation to your Sanity Studio using markdown files",
+  "keywords": [
+    "sanity",
+    "sanity-plugin",
+    "markdown",
+    "documentation"
+  ],
+  "license": "MIT",
+  "author": "Regis Philibert <login@regisphilibert.com>",
+  "sideEffects": false,
+  "type": "commonjs",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/theNewDynamic/sanity-plugin-tnd-docs"
+  },
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "sanity.json",
+    "src",
+    "v2-incompatible.js"
+  ],
+  "scripts": {
+    "build": "plugin-kit verify-package --silent && pkg-utils build --strict --check --clean",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "link-watch": "plugin-kit link-watch",
+    "lint": "eslint .",
+    "prepublishOnly": "npm run build",
+    "watch": "pkg-utils watch --strict"
+  },
+  "dependencies": {
+    "@sanity/incompatible-plugin": "^1.0.5",
+    "@sanity/icons": "^3.7.4",
+    "@sanity/ui": "^3.1.6",
+    "marked": "^11.0.0"
+  },
+  "devDependencies": {
+    "@sanity/pkg-utils": "^10.2.1",
+    "@sanity/plugin-kit": "^4.0.20",
+    "@types/react": "^19.2.7",
+    "@typescript-eslint/eslint-plugin": "^8.50.0",
+    "@typescript-eslint/parser": "^8.50.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-config-sanity": "^7.1.4",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "prettier": "^3.7.4",
+    "prettier-plugin-packagejson": "^2.5.20",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "sanity": "^4.21.1",
+    "styled-components": "^6.1.19",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "sanity": "^3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/sanity.json

@@ -0,0 +1,8 @@
+{
+  "parts": [
+    {
+      "implements": "part:@sanity/base/sanity-root",
+      "path": "./v2-incompatible.js"
+    }
+  ]
+}

package/src/components/Body.tsx

@@ -0,0 +1,26 @@
+/* eslint-disable react/no-danger */
+import { Text } from "@sanity/ui"
+import type { JSX } from "react"
+
+import type { MarkdownFile } from "../types"
+
+export function Body({ file }: { file: MarkdownFile }): JSX.Element {
+  return (
+    <div>
+      <Text size={5} weight="bold" style={{ marginBottom: "1rem" }}>
+        {file.title}
+      </Text>
+      <div
+        className="prose"
+        dangerouslySetInnerHTML={{
+          __html: file.html,
+        }}
+        style={{
+          maxWidth: "800px",
+          lineHeight: "1.6",
+          fontFamily: "system-ui, -apple-system, sans-serif",
+        }}
+      />
+    </div>
+  )
+}

package/src/components/Doc.tsx

@@ -0,0 +1,64 @@
+import { Box, Card, Stack, Text } from "@sanity/ui"
+import type { JSX } from "react"
+
+import { useDocRouter } from "../hooks/useDocRouter"
+import type { DocProps } from "../types"
+import { Body } from "./Body"
+import { SideNav } from "./SideNav"
+
+export function Doc({ config }: DocProps): JSX.Element {
+  const { currentFile, navigate, allFiles } = useDocRouter(config.documents)
+
+  const styles = `
+  .prose {
+    figure{
+      display: inline-block;
+      gap: 2;
+      margin: 0;
+      figcaption{
+        text-align: center;
+      }
+    }
+    img{
+      display:block;
+      max-width: 100%;
+      flex-grow: 0;
+      border: 1px solid hsl(228, 10%, 90%);
+      border-radius: 3px;
+    }
+    strong{
+      font-weight: 700;
+    }
+  }
+  .doc-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+  @media (min-width: 768px) {
+    .doc-grid {
+      grid-template-columns: 250px 1fr;
+    }
+  }
+`
+  return (
+    <Box padding={4} className="here-you-go">
+      <style>{styles}</style>
+      <Stack space={5}>
+        <Text size={4} weight="bold">
+          {config.title || "Documentation"}
+        </Text>
+        <div className="doc-grid">
+          <SideNav navigate={navigate} currentFile={currentFile} allFiles={allFiles} />
+          <Card padding={4} radius={2} shadow={1} style={{ backgroundColor: "#FAFAF8" }}>
+            {currentFile ? (
+              <Body file={currentFile} />
+            ) : (
+              <Text muted>Select a file to view its contents</Text>
+            )}
+          </Card>
+        </div>
+      </Stack>
+    </Box>
+  )
+}

package/src/components/Errors.tsx

@@ -0,0 +1,14 @@
+import { Card, Flex, Text } from "@sanity/ui"
+import { JSX } from "react"
+
+export function Errors({ messages }: { messages: string[] }): JSX.Element {
+  return (
+    <Flex padding={4} align="center" justify="center" style={{ height: "100%", width: "100%" }}>
+      <Card tone="caution" padding={4} border>
+        {messages.map((m, index) => (
+          <Text key={index}>{m}</Text>
+        ))}
+      </Card>
+    </Flex>
+  )
+}

package/src/components/SideNav.tsx

@@ -0,0 +1,34 @@
+import { Card, Stack, Text } from "@sanity/ui"
+import { JSX } from "react"
+
+import type { SideNavProps } from "../types"
+
+export function SideNav({ allFiles, currentFile, navigate }: SideNavProps): JSX.Element {
+  return (
+    <Stack space={2}>
+      {allFiles.map((file) => (
+        <Card
+          key={file.filename}
+          padding={3}
+          radius={2}
+          shadow={1}
+          style={{
+            cursor: "pointer",
+            backgroundColor: currentFile?.filename == file.filename ? "#FAFAF8" : "transparent",
+          }}
+          // eslint-disable-next-line react/jsx-no-bind
+          onClick={() => navigate(file.path)}
+        >
+          <Text size={1} weight="medium">
+            {file.title}
+          </Text>
+          {file.description && (
+            <Text size={0} style={{ marginTop: ".4rem" }} muted>
+              {file.description}
+            </Text>
+          )}
+        </Card>
+      ))}
+    </Stack>
+  )
+}

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export { Doc } from "./Doc"
+export { SideNav } from "./SideNav"
+export { Body } from "./Body"

package/src/hooks/useDocRouter.ts

@@ -0,0 +1,67 @@
+import { marked } from "marked"
+import { useEffect, useMemo, useState } from "react"
+
+import type { MarkdownFile } from "../types"
+import { parseFrontmatter } from "../util" // Your existing parser
+
+export function useDocRouter(documents: Record<string, string>) {
+  // Process all markdown files once
+  const processedFiles = useMemo(() => {
+    return Object.entries(documents)
+      .map(([path, rawContent]) => {
+        const filename = path
+
+        // Parse frontmatter and content
+        const { frontmatter, content } = parseFrontmatter(rawContent)
+
+        // Convert markdown to HTML
+        const html = marked.parse(content) as string
+        return {
+          path,
+          filename,
+          weight: frontmatter["weight"] || 0,
+          description: frontmatter["description"] || undefined,
+          title: frontmatter["title"] || filename.replace(".md", ""),
+          content,
+          html,
+          frontmatter,
+        } as MarkdownFile
+      })
+      .sort((a, b) => a.weight - b.weight) // Sort by weight
+  }, [documents])
+
+  // Get initial path from URL hash, or use first document
+  const getInitialPath = () => {
+    const hash = window.location.hash.slice(1)
+    return hash || processedFiles[0]?.path || null
+  }
+
+  const [currentPath, setCurrentPath] = useState<string | null>(getInitialPath())
+
+  // Listen for URL hash changes
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1)
+      setCurrentPath(hash || processedFiles[0]?.path || null)
+    }
+
+    window.addEventListener("hashchange", handleHashChange)
+    return () => window.removeEventListener("hashchange", handleHashChange)
+  }, []) // Empty array - only set up listener once
+
+  // Function to navigate to a different document
+  const navigate = (path: string) => {
+    window.location.hash = path
+    setCurrentPath(path)
+  }
+
+  // Get the current processed file
+  const currentFile = processedFiles.find((file) => file.path === currentPath) || null
+
+  return {
+    currentPath,
+    currentFile, // The full processed file object
+    navigate,
+    allFiles: processedFiles, // All processed files, sorted by weight
+  }
+}

package/src/index.ts

@@ -0,0 +1,48 @@
+/** @public */
+import { DocumentTextIcon } from "@sanity/icons"
+import { marked } from "marked"
+import { createElement } from "react"
+import { definePlugin } from "sanity"
+
+import { Doc } from "./components/Doc"
+import { Errors } from "./components/Errors"
+import renderer from "./renderer"
+import type { DocConfig } from "./types"
+//import './style.css'
+marked.use({ renderer })
+
+/**
+ * TND Documentation plugin for Sanity Studio
+ *
+ * @public
+ */
+export const tndDocs = definePlugin<DocConfig>((config) => {
+  const errors: string[] = []
+
+  if (!config) {
+    errors.push("tnd-docs: Configuration is required")
+  } else if (config) {
+    // Add specific required field checks
+    // Example: if your config requires certain fields
+    const requiredFields = ["documents"] // Replace with your actual required fields
+    const missingFields = requiredFields.filter((field) => !config[field as keyof DocConfig])
+    if (missingFields.length > 0) {
+      errors.push(`tnd-docs: Missing required configuration fields: ${missingFields.join(", ")}`)
+    }
+  }
+
+  return {
+    name: "tnd-docs",
+    tools: [
+      {
+        name: (config && config.name) || "tnd-docs",
+        title: "Documentation",
+        icon: DocumentTextIcon,
+        component: () =>
+          errors.length
+            ? createElement(Errors, { messages: errors })
+            : createElement(Doc, { config }),
+      },
+    ],
+  }
+})

package/src/renderer.ts

@@ -0,0 +1,12 @@
+import { type Renderer } from "marked"
+
+const renderer: Partial<Renderer> = {
+  image(href: string, title: string | null, text: string): string {
+    return `<div><figure>
+      <img src="${href}" alt="${text}" />
+      ${title ? `<figcaption>${title}</figcaption>` : ""}
+    </figure></div>`
+  },
+}
+
+export default renderer

package/src/types/index.ts

@@ -0,0 +1,26 @@
+export interface DocConfig {
+  name?: string
+  title?: string
+  documents: Record<string, string>
+}
+
+export interface MarkdownFile {
+  path: string
+  filename: string
+  weight: number
+  description?: string
+  title: string
+  content: string
+  html: string
+  frontmatter: Record<string, any>
+}
+
+export interface DocProps {
+  config: DocConfig
+}
+
+export interface SideNavProps {
+  allFiles: MarkdownFile[]
+  currentFile: MarkdownFile | null
+  navigate: (path: string) => void
+}

package/src/util/index.ts

@@ -0,0 +1,26 @@
+export function parseFrontmatter(markdown: string): {
+  frontmatter: Record<string, any>
+  content: string
+} {
+  const frontmatterRegex = /^---\n([\s\S]*?)\n---\n([\s\S]*)$/
+  const match = markdown.match(frontmatterRegex)
+
+  if (!match) {
+    return { frontmatter: {}, content: markdown }
+  }
+
+  const frontmatterText = match[1] ?? ""
+  const content = match[2] ?? ""
+
+  // Parse YAML-like frontmatter (simple key: value pairs)
+  const frontmatter: Record<string, any> = {}
+  frontmatterText.split("\n").forEach((line) => {
+    const colonIndex = line.indexOf(":")
+    if (colonIndex > 0) {
+      const key = line.substring(0, colonIndex).trim()
+      const value = line.substring(colonIndex + 1).trim()
+      frontmatter[key] = value
+    }
+  })
+  return { frontmatter, content }
+}

package/v2-incompatible.js

@@ -0,0 +1,11 @@
+const { showIncompatiblePluginDialog } = require("@sanity/incompatible-plugin")
+const { name, version, sanityExchangeUrl } = require("./package.json")
+
+export default showIncompatiblePluginDialog({
+  name: name,
+  versions: {
+    v3: version,
+    v2: undefined,
+  },
+  sanityExchangeUrl,
+})