Skip to content

Commit 643f9b8

Browse files
Adammatthiesennatemoo-re
Adammatthiesen
and
natemoo-re
authored
Chore: Upgrade all Dependencies and resolve any breaking changes (#16)
Co-authored-by: Nate Moore <[email protected]> Co-authored-by: Nate Moore <[email protected]>
1 parent 01d1e9c commit 643f9b8

38 files changed

+2532
-2670
lines changed

‎.changeset/config.json

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
2-
"$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
3-
"changelog": "@changesets/cli/changelog",
4-
"commit": false,
5-
"fixed": [],
6-
"linked": [],
7-
"access": "public",
8-
"baseBranch": "main",
9-
"updateInternalDependencies": "patch",
10-
"ignore": ["demo"]
2+
"$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
3+
"changelog": "@changesets/cli/changelog",
4+
"commit": false,
5+
"fixed": [],
6+
"linked": [],
7+
"access": "public",
8+
"baseBranch": "main",
9+
"updateInternalDependencies": "patch",
10+
"ignore": ["playground"]
1111
}

‎.changeset/shiny-dingos-remember.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
"astro-remote": minor
3+
---
4+
5+
This release updates all dependencies and resolves some typing issues.
6+
7+
**New Features**
8+
9+
- [Marked](https://marked.js.org/using_pro) extensions are now supported via the `marked` prop.
10+
11+
```astro
12+
---
13+
import markedAlert from 'marked-alert'
14+
const readme = await fetch("https://raw.githubusercontent.com/natemoo-re/astro-remote/main/packages/astro-remote/README.md").then((res) => res.text());
15+
---
16+
<Markdown
17+
content={readme}
18+
marked={{ extensions: [markedAlert()] }}
19+
/>
20+
```
21+
22+
**Breaking Changes**
23+
24+
- 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.
25+

‎.vscode/settings.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"editor.defaultFormatter": "biomejs.biome",
3+
"[astro]": {
4+
"editor.defaultFormatter": "astro-build.astro-vscode"
5+
}
6+
}

‎.vscode/tasks.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"version": "2.0.0",
3+
"tasks": []
4+
}

‎biome.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"$schema": "https://biomejs.dev/schemas/1.5.2/schema.json",
3+
"organizeImports": {
4+
"enabled": true
5+
},
6+
"linter": {
7+
"enabled": true,
8+
"rules": {
9+
"recommended": true,
10+
"suspicious": {
11+
"noExplicitAny": "off"
12+
}
13+
}
14+
},
15+
"files": {
16+
"ignore": ["dist", ".astro"]
17+
}
18+
}

‎package.json

+13-8
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@
44
"version": "0.0.0",
55
"type": "module",
66
"scripts": {
7-
"dev": "pnpm --filter demo run dev",
8-
"lint": "prettier \"**/*.{js,ts,md,json}\""
7+
"dev": "pnpm --filter playground dev",
8+
"lint": "prettier \"**/*.{js,ts,md,json}\"",
9+
"lint:biome": "biome check .",
10+
"lint:biome:fix": "biome check --apply ."
911
},
1012
"repository": {
1113
"type": "git",
@@ -18,14 +20,17 @@
1820
},
1921
"homepage": "https://github.com/natemoo-re/astro-remote#readme",
2022
"volta": {
21-
"node": "18.16.0"
23+
"node": "18.19.0",
24+
"pnpm": "8.15.3"
25+
},
26+
"engines": {
27+
"node": ">=18.14.1"
2228
},
2329
"packageManager": "[email protected]",
2430
"dependencies": {
25-
"@changesets/cli": "^2.18.1",
26-
"@changesets/changelog-github": "^0.4.2"
27-
},
28-
"devDependencies": {
29-
"prettier": "^2.5.0"
31+
"@biomejs/biome": "1.5.3",
32+
"prettier": "^3.2.5",
33+
"@changesets/cli": "^2.27.1",
34+
"@changesets/changelog-github": "^0.5.0"
3035
}
3136
}

‎packages/astro-remote/LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License Copyright (c) 2023 Nate Moore
2+
3+
Permission is hereby granted, free of
4+
charge, to any person obtaining a copy of this software and associated
5+
documentation files (the "Software"), to deal in the Software without
6+
restriction, including without limitation the rights to use, copy, modify, merge,
7+
publish, distribute, sublicense, and/or sell copies of the Software, and to
8+
permit persons to whom the Software is furnished to do so, subject to the
9+
following conditions:
10+
11+
The above copyright notice and this permission notice
12+
(including the next paragraph) shall be included in all copies or substantial
13+
portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
16+
ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
17+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
18+
EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
19+
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
20+
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎packages/astro-remote/README.md

+35-5
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@ Render remote HTML or Markdown content in Astro with full control over the outpu
44

55
Powered by [`ultrahtml`](https://github.com/natemoo-re/ultrahtml) and [`marked`](https://github.com/markedjs/marked).
66

7+
## Install
8+
9+
```sh
10+
npm install astro-remote
11+
pnpm install astro-remote
12+
yarn install astro-remote
13+
```
14+
715
## Rendering Remote Content
816

917
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
2028

2129
### Sanitization
2230

23-
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.
31+
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.
2432

2533
```astro
2634
---
27-
import { Markdown } from 'astro-remote';
35+
import { Markup } from 'astro-remote';
2836
const content = await fetch('http://my-site.com/api/v1/post').then(res => res.text());
2937
---
3038
31-
<!-- Disallow inline `style` attributes, but allow HTML comments -->
32-
<Markdown content={content} sanitize={{ dropAttributes: { "style": ["*"] }, allowComments: true }} />
39+
<!-- Disallow `head` and `style` attributes, and standard formatting from host website -->
40+
<Markup
41+
content={content}
42+
sanitize={{
43+
dropElements: ["head","style"],
44+
blockElements: ["html", "body", "div"],
45+
}}
46+
/>
3347
```
3448

3549
### Customization
@@ -38,12 +52,13 @@ Both `Markup` and `Markdown` allow full control over the rendering of output. Th
3852

3953
```astro
4054
---
41-
import { Markdown } from 'astro-remote';
55+
import { Markdown, Markup } from 'astro-remote';
4256
import Title from '../components/Title.astro';
4357
const content = await fetch('http://my-site.com/api/v1/post').then(res => res.text());
4458
---
4559
4660
<!-- Render <h1> as custom <Title> component -->
61+
<Markup content={content} components={{ h1: Title }} />
4762
<Markdown content={content} components={{ h1: Title }} />
4863
```
4964

@@ -150,3 +165,18 @@ const content = await fetch('http://my-site.com/api/v1/post').then(res => res.te
150165
151166
<Markdown content={content} sanitize={{ allowComponents: true }} components={{ MyCustomComponent }} />
152167
```
168+
169+
### Using Marked Extensions
170+
171+
If you'd like to extend the underlying [Marked](https://marked.js.org/using_pro) behavior, the `marked` prop accepts `extensions`.
172+
173+
```astro
174+
---
175+
import { Markdown } from 'astro-remote';
176+
import markedAlert from 'marked-alert'
177+
178+
const content = await fetch('http://my-site.com/api/v1/post').then(res => res.text());
179+
---
180+
181+
<Markdown content={content} marked={{ extensions: [ markedAlert() ] }} />
182+
```

‎packages/astro-remote/index.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
1-
export { default as Markdown } from './lib/Markdown.astro';
2-
export { default as Markup } from './lib/Markup.astro';
1+
2+
/** Markdown HTML Renderer */
3+
export { default as Markdown } from "./lib/Markdown.astro";
4+
/** HTML Renderer */
5+
export { default as Markup } from "./lib/Markup.astro";

‎packages/astro-remote/lib/Markdown.astro

+34-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,43 @@
11
---
2-
import type { SanitizeOptions } from 'ultrahtml'
2+
import type { SanitizeOptions } from 'ultrahtml/transformers/sanitize'
33
import { createComponentProxy, markdown } from './utils';
4+
import type { MarkedExtension } from 'marked';
45
56
export interface Props {
7+
/** The markdown content to be rendered. If not provided, the content will be taken from the default slot.
8+
* @example
9+
*
10+
<Markdown
11+
content={MarkdownContent}
12+
/>
13+
*/
614
content?: string;
15+
/** Allows the user to define custom SanitizeOptions to be used when rendering the markdown.
16+
* @example
17+
*
18+
<Markdown
19+
sanitize={{ allowComponents: true }}
20+
/>
21+
*/
722
sanitize?: SanitizeOptions;
23+
/** Allows the user to pass in custom components to be used when rendering the markdown.
24+
* @example
25+
*
26+
<Markdown
27+
components={{ Heading, CodeBlock, CodeSpan, Note }}
28+
/>
29+
*/
830
components?: Record<string, any>;
31+
/** Allows usage of Marked extensions to use when rendering the markdown.
32+
* @example
33+
*
34+
<Markdown
35+
marked={{extensions: [MarkedExtension1(), MarkedExtension2(), MarkedExtension3()]}}
36+
/>
37+
*/
38+
marked?: {
39+
extensions?: MarkedExtension[]
40+
}
941
}
1042
1143
const input = Astro.props.content ?? await Astro.slots.render('default');
@@ -14,7 +46,7 @@ if (!input) {
1446
}
1547
// @ts-ignore
1648
const components = createComponentProxy($$result, Astro.props.components);
17-
const content = await markdown(input, { sanitize: Astro.props.sanitize, components });
49+
const content = await markdown(input, { sanitize: Astro.props.sanitize, components }, Astro.props.marked?.extensions);
1850
---
1951

2052
<Fragment set:html={content} />

‎packages/astro-remote/lib/Markup.astro

+22-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,31 @@
11
---
2-
import type { SanitizeOptions } from 'ultrahtml'
2+
import type { SanitizeOptions } from 'ultrahtml/transformers/sanitize'
33
import { createComponentProxy, html } from './utils';
44
55
export interface Props {
6+
/** The HTML content to be rendered. If not provided, the content will be taken from the default slot.
7+
* @example
8+
*
9+
<Markup
10+
content={HTMLContent}
11+
/>
12+
*/
613
content?: string;
14+
/** Allows the user to define custom SanitizeOptions to be used when rendering the HTML.
15+
* @example
16+
*
17+
<Markup
18+
sanitize={{ allowComponents: true }}
19+
/>
20+
*/
721
sanitize?: SanitizeOptions;
22+
/** Allows the user to pass in custom components to be used when rendering the HTML.
23+
* @example
24+
*
25+
<Markup
26+
components={{ Heading, CodeBlock, CodeSpan, Note }}
27+
/>
28+
*/
829
components?: Record<string, any>;
930
}
1031

0 commit comments

Comments
 (0)