From 5677c768d565b94af45bc64d4293983c3a762b59 Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Sun, 12 Nov 2023 01:13:15 -0700 Subject: [PATCH] feat: add local code using a `uu-code:` prefix --- .../index.md | 6 +- package-lock.json | 272 ++++++++++++++++++ package.json | 2 + .../markdown/iframes/rehype-transform.ts | 14 +- src/utils/markdown/index.ts | 36 ++- 5 files changed, 322 insertions(+), 8 deletions(-) diff --git a/content/blog/angular-components-control-value-accessor/index.md b/content/blog/angular-components-control-value-accessor/index.md index af7a8ca6..6d4fda93 100644 --- a/content/blog/angular-components-control-value-accessor/index.md +++ b/content/blog/angular-components-control-value-accessor/index.md @@ -70,7 +70,7 @@ export class ExampleInputComponent { With only a bit of CSS, we have a visually appealing, A11Y friendly, and quirky input component. Look, it even wiggles the unicorns! - + Now, this component is far from feature complete. There's no way to `disable` the input, there's no way to extract data out from the typed input, there's not a lot of functionality you'd typically expect to see from an input component. Let's change that. @@ -303,7 +303,7 @@ Finally, you can pass these options to `ngModel` and `formControl` (or even `for If done properly, you should see something like this: - + # Form Control Classes @@ -407,7 +407,7 @@ export class AppComponent { } ``` - + Not only do you have [a wide range of Angular-built validators at your disposal](https://angular.io/api/forms/Validators), but you're even able to [make your own validator](https://angular.io/api/forms/Validator)! diff --git a/package-lock.json b/package-lock.json index 075202bc..ced3cc06 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,6 +29,7 @@ "@testing-library/jest-dom": "^6.0.0", "@testing-library/preact": "^3.2.3", "@testing-library/user-event": "^14.4.3", + "@types/git-branch": "^2.0.5", "@types/hast": "^3.0.0", "@types/html-escaper": "^3.0.0", "@types/jest": "^29.5.2", @@ -51,6 +52,7 @@ "eslint-plugin-jsx-a11y": "^6.7.1", "feed": "^4.2.2", "fuse.js": "^6.6.2", + "git-branch": "^2.0.1", "gray-matter": "^4.0.3", "hast-util-from-html": "^2.0.1", "hast-util-has-property": "^3.0.0", @@ -7111,6 +7113,12 @@ "@types/estree": "*" } }, + "node_modules/@types/git-branch": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@types/git-branch/-/git-branch-2.0.5.tgz", + "integrity": "sha512-gNZyvixgeXQLQnFkMUAO47sBnQBzJ/pPMJNuOZUD4bvh3O6taXjpEbugjz2qBjNz4ZFH2mVQ42WJzImEiio1Qg==", + "dev": true + }, "node_modules/@types/graceful-fs": { "version": "4.1.6", "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.6.tgz", @@ -11524,6 +11532,15 @@ "npm": "1.2.8000 || >= 1.4.16" } }, + "node_modules/detect-file": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz", + "integrity": "sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/detect-libc": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz", @@ -12872,6 +12889,18 @@ "node": ">=6" } }, + "node_modules/expand-tilde": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz", + "integrity": "sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==", + "dev": true, + "dependencies": { + "homedir-polyfill": "^1.0.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/expect": { "version": "29.6.1", "resolved": "https://registry.npmjs.org/expect/-/expect-29.6.1.tgz", @@ -13340,6 +13369,161 @@ "pkg-dir": "^4.2.0" } }, + "node_modules/findup-sync": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-2.0.0.tgz", + "integrity": "sha512-vs+3unmJT45eczmcAZ6zMJtxN3l/QXeccaXQx5cu/MeJMhewVfoWZqibRkOxPnmoR59+Zy5hjabfQc6JLSah4g==", + "dev": true, + "dependencies": { + "detect-file": "^1.0.0", + "is-glob": "^3.1.0", + "micromatch": "^3.0.4", + "resolve-dir": "^1.0.1" + }, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/findup-sync/node_modules/braces": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz", + "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==", + "dev": true, + "dependencies": { + "arr-flatten": "^1.1.0", + "array-unique": "^0.3.2", + "extend-shallow": "^2.0.1", + "fill-range": "^4.0.0", + "isobject": "^3.0.1", + "repeat-element": "^1.1.2", + "snapdragon": "^0.8.1", + "snapdragon-node": "^2.0.1", + "split-string": "^3.0.2", + "to-regex": "^3.0.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/findup-sync/node_modules/fill-range": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", + "integrity": "sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==", + "dev": true, + "dependencies": { + "extend-shallow": "^2.0.1", + "is-number": "^3.0.0", + "repeat-string": "^1.6.1", + "to-regex-range": "^2.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/findup-sync/node_modules/is-buffer": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", + "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==", + "dev": true + }, + "node_modules/findup-sync/node_modules/is-extendable": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz", + "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==", + "dev": true, + "dependencies": { + "is-plain-object": "^2.0.4" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/findup-sync/node_modules/is-glob": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz", + "integrity": "sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==", + "dev": true, + "dependencies": { + "is-extglob": "^2.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/findup-sync/node_modules/is-number": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", + "integrity": "sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==", + "dev": true, + "dependencies": { + "kind-of": "^3.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/findup-sync/node_modules/is-number/node_modules/kind-of": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", + "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==", + "dev": true, + "dependencies": { + "is-buffer": "^1.1.5" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/findup-sync/node_modules/micromatch": { + "version": "3.1.10", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz", + "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==", + "dev": true, + "dependencies": { + "arr-diff": "^4.0.0", + "array-unique": "^0.3.2", + "braces": "^2.3.1", + "define-property": "^2.0.2", + "extend-shallow": "^3.0.2", + "extglob": "^2.0.4", + "fragment-cache": "^0.2.1", + "kind-of": "^6.0.2", + "nanomatch": "^1.2.9", + "object.pick": "^1.3.0", + "regex-not": "^1.0.0", + "snapdragon": "^0.8.1", + "to-regex": "^3.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/findup-sync/node_modules/micromatch/node_modules/extend-shallow": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz", + "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==", + "dev": true, + "dependencies": { + "assign-symbols": "^1.0.0", + "is-extendable": "^1.0.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/findup-sync/node_modules/to-regex-range": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz", + "integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==", + "dev": true, + "dependencies": { + "is-number": "^3.0.0", + "repeat-string": "^1.6.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/flat-cache": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz", @@ -13699,6 +13883,18 @@ "node": ">=0.10.0" } }, + "node_modules/git-branch": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/git-branch/-/git-branch-2.0.1.tgz", + "integrity": "sha512-jMCT1kjXvsUdZKQd2p8E1uZhKsIuR1pnHgcDYQpQiXBtzE9cmYGvOcCSGqqi58x0B9CPS0lUSu/yti866est8g==", + "dev": true, + "dependencies": { + "findup-sync": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/github-from-package": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz", @@ -13740,6 +13936,48 @@ "node": ">= 6" } }, + "node_modules/global-modules": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz", + "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==", + "dev": true, + "dependencies": { + "global-prefix": "^1.0.1", + "is-windows": "^1.0.1", + "resolve-dir": "^1.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/global-prefix": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz", + "integrity": "sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==", + "dev": true, + "dependencies": { + "expand-tilde": "^2.0.2", + "homedir-polyfill": "^1.0.1", + "ini": "^1.3.4", + "is-windows": "^1.0.1", + "which": "^1.2.14" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/global-prefix/node_modules/which": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", + "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", + "dev": true, + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "which": "bin/which" + } + }, "node_modules/globals": { "version": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", @@ -14413,6 +14651,18 @@ "integrity": "sha512-tWCK4biJ6hcLqTviLXVR9DTRfYGQMXEIUj3gwJ2rZ5wO/at3XtkI4g8mCvFdUF9l1KMBNCfmNAdnahm1cgavQA==", "dev": true }, + "node_modules/homedir-polyfill": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz", + "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==", + "dev": true, + "dependencies": { + "parse-passwd": "^1.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/hosted-git-info": { "version": "2.8.9", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", @@ -23802,6 +24052,15 @@ "node": ">=6" } }, + "node_modules/parse-passwd": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz", + "integrity": "sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/parse5": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", @@ -25386,6 +25645,19 @@ "node": ">=8" } }, + "node_modules/resolve-dir": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz", + "integrity": "sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==", + "dev": true, + "dependencies": { + "expand-tilde": "^2.0.0", + "global-modules": "^1.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/resolve-from": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", diff --git a/package.json b/package.json index 2b411bc0..f6f9a98e 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "@testing-library/jest-dom": "^6.0.0", "@testing-library/preact": "^3.2.3", "@testing-library/user-event": "^14.4.3", + "@types/git-branch": "^2.0.5", "@types/hast": "^3.0.0", "@types/html-escaper": "^3.0.0", "@types/jest": "^29.5.2", @@ -75,6 +76,7 @@ "eslint-plugin-jsx-a11y": "^6.7.1", "feed": "^4.2.2", "fuse.js": "^6.6.2", + "git-branch": "^2.0.1", "gray-matter": "^4.0.3", "hast-util-from-html": "^2.0.1", "hast-util-has-property": "^3.0.0", diff --git a/src/utils/markdown/iframes/rehype-transform.ts b/src/utils/markdown/iframes/rehype-transform.ts index dce5ab49..573e1c29 100644 --- a/src/utils/markdown/iframes/rehype-transform.ts +++ b/src/utils/markdown/iframes/rehype-transform.ts @@ -13,7 +13,9 @@ import type { GetPictureResult } from "@astrojs/image/dist/lib/get-picture"; import probe from "probe-image-size"; import { IFramePlaceholder } from "./iframe-placeholder"; -interface RehypeUnicornIFrameClickToRunProps {} +interface RehypeUnicornIFrameClickToRunProps { + srcReplacements?: Array<(val: string, root: Root) => string>; +} // default icon, used if a frame's favicon cannot be resolved let defaultPageIcon: Promise; @@ -120,7 +122,7 @@ type PageInfo = { icon: GetPictureResult; }; -async function fetchPageInfo(src: string): Promise { +export async function fetchPageInfo(src: string): Promise { // fetch origin url, catch any connection timeout errors const url = new URL(src); url.search = ""; // remove any search params @@ -143,8 +145,8 @@ async function fetchPageInfo(src: string): Promise { export const rehypeUnicornIFrameClickToRun: Plugin< [RehypeUnicornIFrameClickToRunProps | never], Root -> = () => { - return async (tree) => { +> = ({ srcReplacements = [], ...props }) => { + return async (tree, file) => { const iframeNodes: Element[] = []; visit(tree, (node: Element) => { if (node.tagName === "iframe") { @@ -165,6 +167,10 @@ export const rehypeUnicornIFrameClickToRun: Plugin< ...propsToPreserve } = iframeNode.properties; + for (const replacement of srcReplacements) { + src = replacement(src as string, file); + } + width = width ?? EMBED_SIZE.w; height = height ?? EMBED_SIZE.h; const info: PageInfo = (await fetchPageInfo( diff --git a/src/utils/markdown/index.ts b/src/utils/markdown/index.ts index d34b9bf6..98555817 100644 --- a/src/utils/markdown/index.ts +++ b/src/utils/markdown/index.ts @@ -1,6 +1,9 @@ import { Plugin } from "unified"; import rehypeSlug from "rehype-slug-custom-id"; import rehypeRaw from "rehype-raw"; +import { VFile } from "vfile"; +import { resolve, relative, dirname } from "path"; +import * as branch from "git-branch"; import { rehypeTabs } from "./tabs/rehype-transform"; import { rehypeTooltips } from "./tooltips/rehype-transform"; import { rehypeHints } from "./hints/rehype-transform"; @@ -20,6 +23,7 @@ import { rehypeHeaderText } from "./rehype-header-text"; import { rehypeHeaderClass } from "./rehype-header-class"; import { rehypeFileTree } from "./file-tree/rehype-file-tree"; import { rehypeTwoslashTabindex } from "./twoslash-tabindex/rehype-transform"; +import { siteMetadata } from "../../constants/site-config"; // eslint-disable-next-line @typescript-eslint/no-explicit-any type RehypePlugin = Plugin | [Plugin, any]; @@ -67,7 +71,37 @@ export function createRehypePlugins(config: MarkdownConfig): RehypePlugin[] { rehypeHints, rehypeTooltips, rehypeAstroImageMd, - rehypeUnicornIFrameClickToRun, + [ + rehypeUnicornIFrameClickToRun, + { + srcReplacements: [ + (val: string, file: VFile) => { + const iFrameUrl = new URL(val); + if (!iFrameUrl.protocol.startsWith("uu-code:")) return val; + + const contentDir = dirname(file.path); + const fullPath = resolve(contentDir, iFrameUrl.pathname); + + const fsRelativePath = relative(process.cwd(), fullPath); + + // Windows paths need to be converted to URLs + let urlRelativePath = fsRelativePath.replace(/\\/g, "/"); + + if (urlRelativePath.startsWith("/")) { + urlRelativePath = urlRelativePath.slice(1); + } + + const q = iFrameUrl.search; + const currentBranch = branch.sync(); + const repoPath = siteMetadata.repoPath; + const provider = `stackblitz.com/github`; + return ` + https://${provider}/${repoPath}/tree/${currentBranch}/${urlRelativePath}${q} + `.trim(); + }, + ], + }, + ] as RehypePlugin, rehypeUnicornElementMap, rehypeTwoslashTabindex, rehypeFileTree,