adds JSDocs to the Props for both <Markdown> and <Markup> to help…

… users directly in their code
natemoo-re · Feb 23, 2024 · c655300 · c655300
1 parent d196412
commit c655300
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 32 deletions.
diff --git a/packages/astro-remote/index.ts b/packages/astro-remote/index.ts
@@ -1,2 +1,5 @@
+
+/** Markdown HTML Renderer */
 export { default as Markdown } from "./lib/Markdown.astro";
+/** HTML Renderer */
 export { default as Markup } from "./lib/Markup.astro";
diff --git a/packages/astro-remote/lib/Markdown.astro b/packages/astro-remote/lib/Markdown.astro
@@ -4,9 +4,37 @@ import { createComponentProxy, markdown } from './utils';
 import type { MarkedExtension } from 'marked';
 
 export interface Props {
+  /** The markdown content to be rendered. If not provided, the content will be taken from the default slot.
+   * @example
+   * 
+      <Markdown 
+        content={MarkdownContent} 
+      />
+   */
   content?: string;
+  /** Allows the user to define custom SanitizeOptions to be used when rendering the markdown.
+   * @example
+   * 
+      <Markdown 
+        sanitize={{ allowComponents: true }}
+      />
+   */
   sanitize?: SanitizeOptions;
+  /** Allows the user to pass in custom components to be used when rendering the markdown.
+   * @example
+   * 
+      <Markdown 
+        components={{ Heading, CodeBlock, CodeSpan, Note }}
+      />
+   */
   components?: Record<string, any>;
+  /** Allows usage of Marked extensions to use when rendering the markdown.
+   * @example
+   * 
+      <Markdown 
+        marked={{extensions: [MarkedExtnesion1(), MarkedExtnesion2(), MarkedExtnesion3()]}} 
+      />
+   */
   marked?: {
     extensions?: MarkedExtension[]
   }

diff --git a/packages/astro-remote/lib/Markup.astro b/packages/astro-remote/lib/Markup.astro
@@ -3,8 +3,29 @@ import type { SanitizeOptions } from 'ultrahtml/transformers/sanitize'
 import { createComponentProxy, html } from './utils';
 
 export interface Props {
+  /** The HTML content to be rendered. If not provided, the content will be taken from the default slot.
+   * @example
+   * 
+      <Markup 
+        content={HTMLContent} 
+      />
+   */
   content?: string;
+  /** Allows the user to define custom SanitizeOptions to be used when rendering the HTML.
+   * @example
+   * 
+      <Markup 
+        sanitize={{ allowComponents: true }}
+      />
+   */
   sanitize?: SanitizeOptions;
+  /** Allows the user to pass in custom components to be used when rendering the HTML.
+   * @example
+   * 
+      <Markup 
+        components={{ Heading, CodeBlock, CodeSpan, Note }}
+      />
+   */
   components?: Record<string, any>;
 }
 

diff --git a/packages/playground/src/pages/index.astro b/packages/playground/src/pages/index.astro
@@ -1,33 +1,4 @@
 ---
-import { Markdown, Markup } from "astro-remote";
-import CodeSpan from "../components/CodeSpan.astro";
-import CodeBlock from "../components/CodeBlock.astro";
-import Heading from "../components/Heading.astro";
-import Note from "../components/Note.astro";
-
-const example = await fetch("https://example.com/").then((res) => res.text());
-const readme1 = `
-# Hello \`world\`
-
-> **Note**
-> Some note
-
-> **Warning**
-> Some warning
-
-"Nice" [^1]
-
-\`<What>\`
-
-\`inline\`
-
-\`\`\`html filename="cool"
-<div>Hello world!</div>
-\`\`\`
-
-[^1]: A footnote on the label: "1".
-`;
-const readme2 = await fetch("https://raw.githubusercontent.com/natemoo-re/astro-remote/main/packages/astro-remote/README.md").then((res) => res.text());
 ---
 
 <html lang="en">

diff --git a/packages/playground/src/pages/test-html.astro b/packages/playground/src/pages/test-html.astro
@@ -18,7 +18,7 @@ const example = await fetch("https://example.com/").then((res) => res.text());
       <Markup
         content={example}
         sanitize={{
-		  dropElements: ["head","style"],
+		      dropElements: ["head","style"],
           blockElements: ["html", "body", "div"],
         }}
       />

diff --git a/packages/playground/src/pages/test-md-local.astro b/packages/playground/src/pages/test-md-local.astro
@@ -45,7 +45,8 @@ const readme = `
     <div class="markdown">
       <h1>Test: Markdown-Internal(MD Parse and write)</h1>
       <p>Test Generated from: "Internal Defined Markdown"</p>
-      <Markdown sanitize={{ allowComponents: true }}
+      <Markdown
+        sanitize={{ allowComponents: true }}
         content={readme} 
         components={{ Heading, CodeBlock, CodeSpan, Note }}
         marked={{extensions: [markedAlert()]}} />

diff --git a/packages/playground/src/pages/test-md-remote.astro b/packages/playground/src/pages/test-md-remote.astro
@@ -19,7 +19,8 @@ const readme = await fetch("https://raw.githubusercontent.com/natemoo-re/astro-r
     <div class="markdown">
       <h1>Test: Markdown-External(MD Parse and write)</h1>
       <p>Test Generated from: "https://raw.githubusercontent.com/natemoo-re/astro-remote/main/packages/astro-remote/README.md"</p>
-      <Markdown sanitize={{ allowComponents: true }}
+      <Markdown 
+        sanitize={{ allowComponents: true }}
         content={readme} 
         components={{ Heading, CodeBlock, CodeSpan, Note }}
         marked={{extensions: [markedAlert()]}}