Embed GitHub gist

.changeset/sad-snails-study.md

@@ -0,0 +1,7 @@
+---
+'@astro-community/astro-embed-integration': minor
+'@astro-community/astro-embed-gist': minor
+'astro-embed': minor
+---
+
+Adds a new `Gist` component for embedding GitHub Gists

demo/package.json

@@ -11,6 +11,7 @@
   "devDependencies": {
     "@astro-community/astro-embed-baseline-status": "workspace:*",
     "@astro-community/astro-embed-bluesky": "workspace:*",
+    "@astro-community/astro-embed-gist": "workspace:*",
     "@astro-community/astro-embed-link-preview": "workspace:*",
     "@astro-community/astro-embed-mastodon": "workspace:*",
     "@astro-community/astro-embed-vimeo": "workspace:*",

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"
+		file="03-fileName.rs"
+	/>
+</Base>

demo/src/pages/index.astro

@@ -33,6 +33,9 @@ import Base from '../layouts/Base.astro';
 			<a href="/bluesky"><code>&lt;BlueskyPost/&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

@@ -27,3 +27,5 @@ http://www.youtube.com/watch?v=Hoe-woAhq_k
 https://astro.build/blog/welcome-world/
 
 https://mastodon.social/@sarah11918/112937553683639459
+
+https://gist.github.com/vasfvitor/1f995c47ee82ae652496622db1e678ea

docs/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@astro-community/astro-embed-baseline-status": "workspace:*",
     "@astro-community/astro-embed-bluesky": "workspace:*",
+    "@astro-community/astro-embed-gist": "workspace:*",
     "@astro-community/astro-embed-link-preview": "workspace:*",
     "@astro-community/astro-embed-mastodon": "workspace:*",
     "@astro-community/astro-embed-twitter": "workspace:*",

docs/src/content/docs/components/gist.mdx

@@ -0,0 +1,75 @@
+---
+title: GitHub Gist
+description: Learn how to use the Astro Embed Gist component to embed files from GitHub Gists in your website with zero JavaScript.
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { Gist } from '@astro-community/astro-embed-gist';
+
+The `<Gist>` component embeds files from a GitHub Gist in Astro projects.
+
+## Usage
+
+The `<Gist>` component generates static HTML for files from a [GitHub Gist](https://docs.github.com/en/get-started/writing-on-github/editing-and-sharing-content-with-gists/creating-gists).
+It uses the HTML markup provided by GitHub and links to GitHub’s CSS for styling, so no client-side JavaScript is required.
+
+<Tabs>
+<TabItem label="Astro" icon="astro">
+```astro
+---
+import { Gist } from 'astro-embed';
+---
+
+<Gist id="https://gist.github.com/delucis/0b44f4ff0397767b2416cc981692c346" />
+```
+</TabItem>
+<TabItem label="MDX" icon="seti:markdown">
+```mdx
+import { Gist } from 'astro-embed';
+
+<Gist id="https://gist.github.com/delucis/0b44f4ff0397767b2416cc981692c346" />
+```
+</TabItem>
+</Tabs>
+
+The above code produces the following result:
+
+<Gist id="https://gist.github.com/delucis/0b44f4ff0397767b2416cc981692c346" />
+
+## Optional props
+
+In addition to the required `id` prop, the following props are available to customise how the `<Gist>` component renders:
+
+### `file`
+
+**Type:** `string`
+
+You can display only a single file from a multi-file Gist by specifying the `file` attribute with the name of the file to embed.
+
+For example, this is the same Gist as above, but only showing the `README.md` file:
+
+```astro /file=".+"/
+<Gist
+	id="https://gist.github.com/delucis/0b44f4ff0397767b2416cc981692c346"
+	file="README.md"
+/>
+```
+
+<Gist
+	id="https://gist.github.com/delucis/0b44f4ff0397767b2416cc981692c346"
+	file="README.md"
+/>
+
+## Standalone installation
+
+If you only need the `<Gist>` component, you can install the package directly instead of the main `astro-embed` package:
+
+import { PackageManagers } from 'starlight-package-managers';
+
+<PackageManagers pkg="@astro-community/astro-embed-gist" />
+
+The `<Gist>` component can then be imported as:
+
+```js
+import { Gist } from '@astro-community/astro-embed-gist';
+```

docs/src/content/docs/getting-started.mdx

@@ -74,6 +74,7 @@ Astro Embed currently supports the following services:
 
 <CardGrid>
 	<LinkCard title="Baseline" href="/components/baseline-status/" />
+	<LinkCard title="GitHub Gist" href="/components/gist/" />
 	<LinkCard title="Mastodon" href="/components/mastodon/" />
 	<LinkCard title="Open Graph" href="/components/link-preview/" />
 	<LinkCard title="Twitter" href="/components/twitter/" />

docs/src/content/docs/index.mdx

@@ -70,6 +70,14 @@ import { Icon, Card, CardGrid } from '@astrojs/starlight/components';
 
     </Card>
 
+    <Card title="GitHub Gist" icon="github">
+
+    	Embed one or more files from a GitHub Gist in your page with zero JavaScript.
+
+    	[Gist docs](/components/gist/)
+
+    </Card>
+
     <Card title="Baseline Status" icon="laptop">
 
     	Display browser support for a web feature according to the Baseline project.

packages/astro-embed-gist/Gist.astro

@@ -0,0 +1,49 @@
+---
+import { safeGet } from '@astro-community/astro-embed-utils';
+import styles from './Gist.css?raw';
+
+export interface Props {
+	/**
+	 * Gist URL to fetch
+	 */
+	id: string;
+	/**
+	 * Optional file name to fetch, case sensitive
+	 */
+	file?: string;
+}
+
+const { id, file } = Astro.props;
+
+const url = new URL(id);
+url.pathname += '.json';
+if (file) {
+	url.searchParams.set('file', file);
+}
+
+async function fetchGist(gistUrl: string) {
+	return (await safeGet(gistUrl)) as
+		| undefined
+		| {
+				description: string;
+				created_at: string;
+				files: string[];
+				owner: string;
+				stylesheet: string;
+				div: string;
+		  };
+}
+const gist = await fetchGist(url.href);
+---
+
+{
+	gist && (
+		<astro-embed-gist>
+			<template shadowrootmode="open">
+				<link rel="stylesheet" href={gist.stylesheet} />
+				<style set:html={styles} />
+				<Fragment set:html={gist.div} />
+			</template>
+		</astro-embed-gist>
+	)
+}

packages/astro-embed-gist/Gist.css

@@ -0,0 +1,9 @@
+:host {
+	--borderWidth-thin: 1px;
+	--borderRadius-medium: 0.5rem;
+	display: block;
+	color-scheme: light;
+}
+.gist .gist-file {
+	border-radius: calc(var(--borderRadius-medium) + 1px);
+}

packages/astro-embed-gist/README.md

@@ -0,0 +1,5 @@
+# `@astro-community/astro-embed-gist`
+
+This package contains a component for embedding files from GitHub Gists in Astro projects.
+
+[Read the `<Gist>` component docs](https://astro-embed.netlify.app/components/gist/).

packages/astro-embed-gist/index.ts

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

packages/astro-embed-gist/matcher.ts

@@ -0,0 +1,10 @@
+const urlPattern =
+	/^https:\/\/gist\.github\.com\/[^/]+\/[^/]+\/?(?:\?file=.+)?$/;
+
+/**
+ * Tests if a URL is a GitHub Gist URL. If it is, returns the URL, otherwise returns undefined.
+ */
+export default function matcher(url: string): string | undefined {
+	const match = url.match(urlPattern);
+	return match ? url : undefined;
+}

packages/astro-embed-gist/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@astro-community/astro-embed-gist",
+  "version": "0.0.1",
+  "description": "Component to easily embed GitHub Gists on your Astro site",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts",
+    "./matcher": "./matcher.ts"
+  },
+  "files": [
+    "index.ts",
+    "matcher.ts",
+    "Gist.astro",
+    "Gist.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/delucis/astro-embed.git",
+    "directory": "packages/astro-embed-gist"
+  },
+  "keywords": [
+    "astro",
+    "astro-component",
+    "embeds",
+    "gist",
+    "github"
+  ],
+  "author": "delucis",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/delucis/astro-embed/issues"
+  },
+  "homepage": "https://astro-embed.netlify.app/components/gist/",
+  "dependencies": {
+    "@astro-community/astro-embed-utils": "^0.2.0"
+  }
+}

packages/astro-embed-gist/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/strictest"
+}

packages/astro-embed-integration/package.json

@@ -23,6 +23,7 @@
   "homepage": "https://astro-embed.netlify.app/integration",
   "dependencies": {
     "@astro-community/astro-embed-bluesky": "^0.1.6",
+    "@astro-community/astro-embed-gist": "^0.0.1",
     "@astro-community/astro-embed-link-preview": "^0.3.0",
     "@astro-community/astro-embed-mastodon": "^0.1.0",
     "@astro-community/astro-embed-twitter": "^0.5.10",

packages/astro-embed-integration/remark-plugin.ts

@@ -1,5 +1,6 @@
 import { type Node, select, selectAll } from 'unist-util-select';
 import blueskyMatcher from '@astro-community/astro-embed-bluesky/matcher';
+import gistMatcher from '@astro-community/astro-embed-gist/matcher';
 import twitterMatcher from '@astro-community/astro-embed-twitter/matcher';
 import vimeoMatcher from '@astro-community/astro-embed-vimeo/matcher';
 import youtubeMatcher from '@astro-community/astro-embed-youtube/matcher';
@@ -8,6 +9,7 @@ import mastodonMatcher from '@astro-community/astro-embed-mastodon/matcher';
 
 const matchers = [
 	[blueskyMatcher, 'BlueskyPost'],
+	[gistMatcher, 'Gist'],
 	[twitterMatcher, 'Tweet'],
 	[vimeoMatcher, 'Vimeo'],
 	[youtubeMatcher, 'YouTube'],

packages/astro-embed/index.ts

@@ -1,6 +1,7 @@
 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';
 export { LinkPreview } from '@astro-community/astro-embed-link-preview';
 export { MastodonPost } from '@astro-community/astro-embed-mastodon';
 export { BaselineStatus } from '@astro-community/astro-embed-baseline-status';

packages/astro-embed/package.json

@@ -35,6 +35,7 @@
   "dependencies": {
     "@astro-community/astro-embed-baseline-status": "^0.2.2",
     "@astro-community/astro-embed-bluesky": "^0.1.6",
+    "@astro-community/astro-embed-gist": "^0.0.1",
     "@astro-community/astro-embed-integration": "^0.10.0",
     "@astro-community/astro-embed-link-preview": "^0.3.0",
     "@astro-community/astro-embed-mastodon": "^0.1.0",