LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-06 04:21:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add local code using a uu-code: prefix

Browse Source
This commit is contained in:
Corbin Crutchley
2023-11-12 01:13:15 -07:00
parent 3ba9ec66ed
commit 5677c768d5
5 changed files with 322 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
content/blog/angular-components-control-value-accessor/index.md
View File

@@ -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!
<iframe src="https://stackblitz.com/github/unicorn-utterances/unicorn-utterances/tree/local-code/content/blog/angular-components-control-value-accessor/angular-unicorns-text-input?embed=1&file=src/app/app.component.ts" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<iframe data-frame-title="Angular Unicorns Text Input - StackBlitz" src="uu-code:./angular-unicorns-text-input?embed=1&file=src/app/app.component.ts" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
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:
<iframe src="https://stackblitz.com/github/unicorn-utterances/unicorn-utterances/tree/local-code/content/blog/angular-components-control-value-accessor/angular-value-accessor-example?embed=1&file=src/app/app.component.ts" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<iframe data-frame-title="Angular Value Accessor Example - StackBlitz" src="uu-code:./angular-value-accessor-example?embed=1&file=src/app/app.component.ts" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
# Form Control Classes
@@ -407,7 +407,7 @@ export class AppComponent {
}
```
<iframe src="https://stackblitz.com/github/unicorn-utterances/unicorn-utterances/tree/local-code/content/blog/angular-components-control-value-accessor/angular-value-accessor-dep-inject?embed=1&file=src/app/app.component.ts" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<iframe data-frame-title="Angular Value Accessor Dep Inject - StackBlitz" src="uu-code:./angular-value-accessor-dep-inject?embed=1&file=src/app/app.component.ts" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
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)!

272
package-lock.json generated
View File

@@ -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",

2
package.json
View File

@@ -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",

14
src/utils/markdown/iframes/rehype-transform.ts
View File

@@ -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<GetPictureResult>;
@@ -120,7 +122,7 @@ type PageInfo = {
icon: GetPictureResult;
};
async function fetchPageInfo(src: string): Promise<PageInfo | null> {
export async function fetchPageInfo(src: string): Promise<PageInfo | null> {
// 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<PageInfo | null> {
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(

36
src/utils/markdown/index.ts
View File

@@ -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<any[]> | [Plugin<any[]>, 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,