Draft: Embed GitHub gist

demo/src/pages/gist.astro

@@ -0,0 +1,17 @@
+---
+import * as Component from 'astro-embed';
+import Base from '../layouts/Base.astro';
+---
+
+<Base title="Gist component examples">
+  <h2>All files</h2>
+  <Component.Gist
+    id="https://gist.github.com/vasfvitor/1f995c47ee82ae652496622db1e678ea"
+  />
+
+  <h2>Specific file</h2>
+  <Component.Gist
+    id="https://gist.github.com/vasfvitor/1f995c47ee82ae652496622db1e678ea"
+    fileName="03-fileName.rs"
+  />
+</Base>

demo/src/pages/index.astro

@@ -14,6 +14,9 @@ import Base from '../layouts/Base.astro';
 		<li>
 			<a href="/youtube"><code>&lt;YouTube/&gt;</code> component examples</a>
 		</li>
+		<li>
+			<a href="/gist"><code>&lt;Gist/&gt;</code> component examples</a>
+		</li>
 	</ul>
 	<h2>Other examples</h2>
 	<ul>

demo/src/pages/integration.mdx

@@ -21,3 +21,5 @@ https://twitter.com/astrodotbuild/status/1511750228428435457
 https://vimeo.com/32001208
 
 http://www.youtube.com/watch?v=Hoe-woAhq_k
+
+https://gist.github.com/vasfvitor/1f995c47ee82ae652496622db1e678ea

packages/astro-embed-gist/Gist.astro

@@ -0,0 +1,73 @@
+---
+export interface Props {
+  /**
+   * Gist url to fetch
+   */
+  id: string;
+  /**
+   * Optional file name to fetch, case sensitive
+   */
+  fileName?: string;
+}
+const { id, fileName } = Astro.props;
+let url = id + '.json';
+if (fileName) {
+  url += `?file=${fileName}`;
+}
+
+async function fetchGist(id: string) {
+  try {
+    const gistUrl = new URL(url);
+    return (await fetch(gistUrl).then((res) => res.json())) as {
+      description: string;
+      created_at: Date;
+      files: string[];
+      owner: string;
+      stylesheet: string;
+      div: string;
+    };
+  } catch (e) {
+    console.error(
+      `[error]  astro-embed
+         ${e.status} - ${e.statusText}: Failed to fetch gist ${id}`
+    );
+  }
+}
+const gist = await fetchGist(id);
+
+// TODO use stylesheet
+const stylesheetUrl = gist?.stylesheet;
+---
+
+{
+  gist && (
+    <astro-embed-gist data-cssurl={stylesheetUrl}>
+      <p class="gist-embed-description">{gist.description}</p>
+      <Fragment set:html={gist.div} />
+      <span class="gist-embed-owner">gist by {gist.owner}</span>
+    </astro-embed-gist>
+  )
+}
+<style>
+  astro-embed-gist {
+    display: block;
+  }
+  .gist-embed-owner {
+  }
+  .gist-embed-description {
+  }
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const gists = document.querySelectorAll('astro-embed-gist');
+    gists.forEach((e) => {
+      const stylesheetUrl = e.dataset.cssurl;
+      const linkElement = document.createElement('link');
+      linkElement.href = stylesheetUrl;
+      linkElement.rel = 'stylesheet';
+      linkElement.type = 'text/css';
+      document.head.appendChild(linkElement);
+    });
+  });
+</script>

packages/astro-embed-gist/index.ts

@@ -0,0 +1 @@
+export { default as Gist } from './Gist.astro';

packages/astro-embed-gist/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@astro-community/astro-embed-gist",
+  "version": "0.5.2",
+  "description": "Component to easily embed Gists on your Astro site",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts",
+    "./matcher": "./matcher.ts"
+  },
+  "files": [
+    "index.ts",
+    "Gist.astro"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/delucis/astro-embed.git"
+  },
+  "keywords": [
+    "astro",
+    "astro-component",
+    "embeds",
+    "gist"
+  ],
+  "author": "delucis",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/delucis/astro-embed/issues"
+  },
+  "homepage": "https://github.com/delucis/astro-embed/tree/main/packages/astro-embed-gist#readme",
+  "dependencies": {
+    "@astro-community/astro-embed-utils": "^0.1.0"
+  },
+  "peerDependencies": {
+    "astro": "^2.0.0 || ^3.0.0-beta || ^4.0.0-beta"
+  }
+}

packages/astro-embed/index.ts

@@ -1,3 +1,4 @@
 export { Tweet } from '@astro-community/astro-embed-twitter';
 export { YouTube } from '@astro-community/astro-embed-youtube';
 export { Vimeo } from '@astro-community/astro-embed-vimeo';
+export { Gist } from '@astro-community/astro-embed-gist';