npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

astro-remote

v0.3.3

Published

Render remote HTML or Markdown content in Astro with full control over the output.

Downloads

10,399

Readme

Astro Remote

NPM Version

Render remote HTML or Markdown content in Astro with full control over the output.

Powered by ultrahtml and marked.

Install

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.

---
import { Markup, Markdown } from 'astro-remote';
const { html, markdown } = await fetch('http://my-site.com/api/v1/post').then(res => res.json());
---

<Markup content={html} />
<Markdown content={markdown} />

Sanitization

By default, all HTML content will be sanitized with sensible defaults (script blocks are dropped). This can be controlled using the SanitizeOptions available in ultrahtml. Set to false to disable sanitization.

---
import { Markup } from 'astro-remote';
const content = await fetch('http://my-site.com/api/v1/post').then(res => res.text());
---

<!-- Disallow `head` and `style` attributes, and standard formatting from host website -->
<Markup 
    content={content} 
    sanitize={{ 
        dropElements: ["head","style"], 
        blockElements: ["html", "body", "div"],
    }} 
/>

Customization

Both Markup and Markdown allow full control over the rendering of output. The components option allows you to replace a standard HTML element with a custom component.

---
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 }} />

In addition to built-in HTML Elements, Markdown also supports a few custom components for convenience.

<Heading />

The Heading component renders all h1 through h6 elements. It receives the following props:

  • as, the h1 through h6 tag
  • href, a pre-generated, slugified href
  • text, the text content of the children (for generating a custom slug)
---
import { Markdown } from 'astro-remote';
import Heading from '../components/Heading.astro';
const content = await fetch('http://my-site.com/api/v1/post').then(res => res.text());
---

<!-- Render all <h1> through <h6> using custom <Heading> component -->
<Markdown content={content} components={{ Heading }} />

A sample Heading component might look something like this.

---
const { as: Component, href } = Astro.props;
---

<Component><a href={href}><slot /></a></Component>

<CodeBlock />

The CodeBlock component allows you customize the rendering of code blocks. It receives the following props:

  • lang, the language specified after the three backticks (defaults to plaintext)
  • code, the raw code to be highlighted. Be sure to escape the output!
  • ...props, any other attributes passed to the three backticks. These should follow HTML attribute format (name="value")

A sample CodeBlock component might look something like this.

---
const { lang, code, ...props } = Astro.props;
const highlighted = await highlight(code, { lang });
---

<pre class={`language-${lang}`}><code set:html={highlighted} /></pre>

<CodeSpan />

The CodeSpan component allows you customize the rendering of inline code spans. It receives the following props:

  • code, the value of the code span

A sample CodeSpan component might look something like this.

---
const { code } = Astro.props;
---

<code set:text={code} />

<Note />

The Note component allows you customize the rendering of GitHub-style notes and warnings. It receives the following props:

  • type, either "note" or "warning"

To use a Note component in Markdown, use the following syntax:

> **Note**
> Some tip here!

> **Warning**
> Some warning here!

Custom Components in Markdown

If you'd like to allow custom components in Markdown, you can do so using a combination of the sanitize and components options. By default, sanitization removes components.

Given the following markdown source:

# Hello world!

<MyCustomComponent a="1" b="2" c="3">It works!</MyCustomComponent>
---
import { Markdown } from 'astro-remote';
import MyCustomComponent from '../components/MyCustomComponent.astro';
const content = await fetch('http://my-site.com/api/v1/post').then(res => res.text());
---

<Markdown content={content} sanitize={{ allowComponents: true }} components={{ MyCustomComponent }} />

Using Marked Extensions

If you'd like to extend the underlying Marked behavior, the marked prop accepts extensions.

---
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() ] }} />