astro md import

markdown-import.md

This is a level 1 heading

This is level 2

I need to say something so here is a paragraph.

Learn Typescript

// let's see how pre formatted code turns out
const greet = (greeting: string) => {
  console.log(`${greeting}! big dummy!`);
}

greet('Hello');

<script> alert('this should get sanitized by isomorphic-dompurify'); </script>

But this should not

Since I've removed the revision id from the url, this should show up on page refresh.

So far so good :-) Basic import of md content from a local md file and importing, parsing, sanitizing, displaying this gist remotely.

One thing left is to add prism and find a good gh flavored md stylesheet for the code block.

index.astro

---
import { marked } from 'marked';
import DOMPurify from 'isomorphic-dompurify';

import BaseLayout from '~/layouts/BaseLayout.astro';

// importing a local markdown
import { Content as PromoBanner } from '~/components/promoBanner.md';

// fetching a remote markdown, parsing to html, and sanitizing to remove dangerous javascript
const response = await fetch(
  'https://gist.github.com/isimmons/4e24eb577c1deeb6211434e6b9c9cbe1/raw/markdown-import.md',
);

const markdown = await response.text();
const html = await marked.parse(markdown);
const clean = DOMPurify.sanitize(html);
---

<BaseLayout title="Home">
  <h1 class="text-3xl font-bold">Homepage</h1>
  <PromoBanner />
  <div class="mt-5">
    <Fragment set:html={clean} />
  </div>
</BaseLayout>

url for the raw content changes the revision ID when changes are made so the newest changes don't reflect in the web site.

Also, the gihubusercontent format doesn't show even if you remove the revision ID portion

Fix: use this
https://gist.github.com/isimmons/4e24eb577c1deeb6211434e6b9c9cbe1/raw/markdown-import.md

instead of
https://gist.githubusercontent.com/isimmons/4e24eb577c1deeb6211434e6b9c9cbe1/raw/a1be88a5b9b0994ec31377e8dffd13d64a82b34e/markdown-import.md