Chore: Upgrade all Dependencies and resolve any breaking changes (#16)

Co-authored-by: Nate Moore <[email protected]>
Co-authored-by: Nate Moore <[email protected]>

.changeset/config.json

@@ -1,11 +1,11 @@
 {
-  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
-  "changelog": "@changesets/cli/changelog",
-  "commit": false,
-  "fixed": [],
-  "linked": [],
-  "access": "public",
-  "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": ["demo"]
+	"$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+	"changelog": "@changesets/cli/changelog",
+	"commit": false,
+	"fixed": [],
+	"linked": [],
+	"access": "public",
+	"baseBranch": "main",
+	"updateInternalDependencies": "patch",
+	"ignore": ["playground"]
 }

.changeset/shiny-dingos-remember.md

@@ -0,0 +1,25 @@
+---
+"astro-remote": minor
+---
+
+This release updates all dependencies and resolves some typing issues.
+
+**New Features**
+
+- [Marked](https://marked.js.org/using_pro) extensions are now supported via the `marked` prop.
+
+    ```astro
+    ---
+    import markedAlert from 'marked-alert'
+    const readme = await fetch("https://raw.githubusercontent.com/natemoo-re/astro-remote/main/packages/astro-remote/README.md").then((res) => res.text());
+    ---
+    <Markdown
+        content={readme}
+        marked={{ extensions: [markedAlert()] }}
+    />
+    ```
+
+**Breaking Changes**
+
+- The minimum required Node version is now `v18.14.1` to align with Astro's [current requirements](https://docs.astro.build/en/tutorial/1-setup/1/#nodejs). This is enforced via an `engines` constraint.
+

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+	"editor.defaultFormatter": "biomejs.biome",
+	"[astro]": {
+		"editor.defaultFormatter": "astro-build.astro-vscode"
+	}
+}

.vscode/tasks.json

@@ -0,0 +1,4 @@
+{
+	"version": "2.0.0",
+	"tasks": []
+}

biome.json

@@ -0,0 +1,18 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.5.2/schema.json",
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"suspicious": {
+				"noExplicitAny": "off"
+			}
+		}
+	},
+	"files": {
+		"ignore": ["dist", ".astro"]
+	}
+}

package.json

@@ -4,8 +4,10 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "pnpm --filter demo run dev",
-    "lint": "prettier \"**/*.{js,ts,md,json}\""
+    "dev": "pnpm --filter playground dev",
+    "lint": "prettier \"**/*.{js,ts,md,json}\"",
+    "lint:biome": "biome check .",
+    "lint:biome:fix": "biome check --apply ."
   },
   "repository": {
     "type": "git",
@@ -18,14 +20,17 @@
   },
   "homepage": "https://github.com/natemoo-re/astro-remote#readme",
   "volta": {
-    "node": "18.16.0"
+    "node": "18.19.0",
+    "pnpm": "8.15.3"
+  },
+  "engines": {
+    "node": ">=18.14.1"
   },
   "packageManager": "[email protected]",
   "dependencies": {
-    "@changesets/cli": "^2.18.1",
-    "@changesets/changelog-github": "^0.4.2"
-  },
-  "devDependencies": {
-    "prettier": "^2.5.0"
+    "@biomejs/biome": "1.5.3",
+    "prettier": "^3.2.5",
+    "@changesets/cli": "^2.27.1",
+    "@changesets/changelog-github": "^0.5.0"
   }
 }

packages/astro-remote/LICENSE

@@ -0,0 +1,21 @@
+MIT License Copyright (c) 2023 Nate Moore
+
+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
+(including the next paragraph) 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.

packages/astro-remote/README.md

@@ -4,6 +4,14 @@ Render remote HTML or Markdown content in Astro with full control over the outpu
 
 Powered by [`ultrahtml`](https://github.com/natemoo-re/ultrahtml) and [`marked`](https://github.com/markedjs/marked).
 
+## Install
+
+```sh
+npm install astro-remote
+pnpm install astro-remote
+yarn install astro-remote
+```
+
 ## Rendering Remote Content
 
 The most basic function of `astro-remote` is to convert a string of HTML or Markdown to HTML. Use the `Markup` and `Markdown` components depending on your input.
@@ -20,16 +28,22 @@ const { html, markdown } = await fetch('http://my-site.com/api/v1/post').then(re
 
 ### Sanitization
 
-By default, all content will be sanitized with sensible defaults (`script` blocks are dropped). This can be controlled using the [`SanitizeOptions`](https://github.com/natemoo-re/ultrahtml/blob/71e723f6093abea2584c9ea3bfecc0ce68d02d8d/src/index.ts#L251-L268) available in `ultrahtml`. Set to `false` to disable sanitization.
+By default, all HTML content will be sanitized with sensible defaults (`script` blocks are dropped). This can be controlled using the [`SanitizeOptions`](https://github.com/natemoo-re/ultrahtml/blob/71e723f6093abea2584c9ea3bfecc0ce68d02d8d/src/index.ts#L251-L268) available in `ultrahtml`. Set to `false` to disable sanitization.
 
 ```astro
 ---
-import { Markdown } from 'astro-remote';
+import { Markup } from 'astro-remote';
 const content = await fetch('http://my-site.com/api/v1/post').then(res => res.text());
 ---
 
-<!-- Disallow inline `style` attributes, but allow HTML comments -->
-<Markdown content={content} sanitize={{ dropAttributes: { "style": ["*"] }, allowComments: true }} />
+<!-- Disallow `head` and `style` attributes, and standard formatting from host website -->
+<Markup 
+    content={content} 
+    sanitize={{ 
+        dropElements: ["head","style"], 
+        blockElements: ["html", "body", "div"],
+    }} 
+/>
 ```
 
 ### Customization
@@ -38,12 +52,13 @@ Both `Markup` and `Markdown` allow full control over the rendering of output. Th
 
 ```astro
 ---
-import { Markdown } from 'astro-remote';
+import { Markdown, Markup } from 'astro-remote';
 import Title from '../components/Title.astro';
 const content = await fetch('http://my-site.com/api/v1/post').then(res => res.text());
 ---
 
 <!-- Render <h1> as custom <Title> component -->
+<Markup content={content} components={{ h1: Title }} />
 <Markdown content={content} components={{ h1: Title }} />
 ```
 
@@ -150,3 +165,18 @@ const content = await fetch('http://my-site.com/api/v1/post').then(res => res.te
 
 <Markdown content={content} sanitize={{ allowComponents: true }} components={{ MyCustomComponent }} />
 ```
+
+### Using Marked Extensions
+
+If you'd like to extend the underlying [Marked](https://marked.js.org/using_pro) behavior, the `marked` prop accepts `extensions`.
+
+```astro
+---
+import { Markdown } from 'astro-remote';
+import markedAlert from 'marked-alert'
+
+const content = await fetch('http://my-site.com/api/v1/post').then(res => res.text());
+---
+
+<Markdown content={content} marked={{ extensions: [ markedAlert() ] }} />
+```

packages/astro-remote/index.ts

@@ -1,2 +1,5 @@
-export { default as Markdown } from './lib/Markdown.astro';
-export { default as Markup } from './lib/Markup.astro';
+
+/** Markdown HTML Renderer */
+export { default as Markdown } from "./lib/Markdown.astro";
+/** HTML Renderer */
+export { default as Markup } from "./lib/Markup.astro";

packages/astro-remote/lib/Markdown.astro

@@ -1,11 +1,43 @@
 ---
-import type { SanitizeOptions } from 'ultrahtml'
+import type { SanitizeOptions } from 'ultrahtml/transformers/sanitize'
 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: [MarkedExtension1(), MarkedExtension2(), MarkedExtension3()]}} 
+      />
+   */
+  marked?: {
+    extensions?: MarkedExtension[]
+  }
 }
 
 const input = Astro.props.content ?? await Astro.slots.render('default');
@@ -14,7 +46,7 @@ if (!input) {
 }
 // @ts-ignore
 const components = createComponentProxy($$result, Astro.props.components);
-const content = await markdown(input, { sanitize: Astro.props.sanitize, components });
+const content = await markdown(input, { sanitize: Astro.props.sanitize, components }, Astro.props.marked?.extensions);
 ---
 
 <Fragment set:html={content} />

packages/astro-remote/lib/Markup.astro

@@ -1,10 +1,31 @@
 ---
-import type { SanitizeOptions } from 'ultrahtml'
+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>;
 }