feat(nx-dev): add stackblitz button embed for markdown files

docs/README.md

@@ -106,6 +106,14 @@ We can display a special button inviting the reader to go to a GitHub repository
 {% github-repository url="https://github.com/nrwl/nx-examples" /%}
 ```
 
+#### Stackblitz Buttons
+
+You can add an "open in stackblitz" button as follows:
+
+```markdown
+{% stackblitz-button url="github.com/nrwl/nx-recipes/tree/main/standalone-angular-app?file=README.md" /%}
+```
+
 #### Install Nx Console
 
 We can display a special button inviting the reader to go to a VSCode marketplace to install the official Nx plugin.

nx-dev/ui-markdoc/src/index.ts

@@ -21,6 +21,8 @@ import { Card, Cards, TitleCard } from './lib/tags/cards.component';
 import { card, cards, titleCard } from './lib/tags/cards.schema';
 import { GithubRepository } from './lib/tags/github-repository.component';
 import { githubRepository } from './lib/tags/github-repository.schema';
+import { StackblitzButton } from './lib/tags/stackblitz-button.component';
+import { stackblitzButton } from './lib/tags/stackblitz-button.schema';
 import { Graph } from './lib/tags/graph.component';
 import { graph } from './lib/tags/graph.schema';
 import { Iframe } from './lib/tags/iframe.component';
@@ -56,6 +58,7 @@ export const getMarkdocCustomConfig = (
       card,
       cards,
       'github-repository': githubRepository,
+      'stackblitz-button': stackblitzButton,
       graph,
       iframe,
       'install-nx-console': installNxConsole,
@@ -76,6 +79,7 @@ export const getMarkdocCustomConfig = (
     CustomLink,
     Fence,
     GithubRepository,
+    StackblitzButton,
     Graph,
     Heading,
     Iframe,

nx-dev/ui-markdoc/src/lib/tags/github-repository.schema.ts

@@ -9,5 +9,11 @@ export const githubRepository: Schema = {
       required: true,
       description: 'The url of the GitHub repository',
     },
+    title: {
+      type: 'String',
+      required: false,
+      description:
+        'Title of the repository, otherwise it will default to "Example repository"',
+    },
   },
 };

nx-dev/ui-markdoc/src/lib/tags/stackblitz-button.component.tsx

@@ -0,0 +1,44 @@
+import { ChevronRightIcon } from '@heroicons/react/24/outline';
+
+export function StackblitzButton({
+  url,
+  title,
+}: {
+  url: string;
+  title: string;
+}): JSX.Element {
+  const resolvedUrl = url.replace('https://', '');
+
+  return (
+    <div className="not-prose group relative my-12 mx-auto flex w-full max-w-md items-center gap-3 overflow-hidden rounded-lg bg-slate-50 shadow-md transition hover:text-white dark:bg-slate-800/60">
+      <div className="absolute inset-0 z-0 w-2 bg-blue-500 transition-all duration-150 group-hover:w-full dark:bg-sky-500"></div>
+      <div className="w-2 bg-blue-500 dark:bg-sky-500"></div>
+
+      <div className="z-10 flex flex-grow items-center py-3">
+        <svg
+          className="h-10 w-10 rounded-full object-cover"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+        >
+          <title>StackBlitz</title>
+          <path d="M10.797 14.182H3.635L16.728 0l-3.525 9.818h7.162L7.272 24l3.524-9.818Z" />
+        </svg>
+
+        <div className="mx-3">
+          <p>
+            {title ? title : 'Open in Stackblitz'}
+            <a
+              href={`https://stackblitz.com/${resolvedUrl}`}
+              target="_blank"
+              rel="noreferrer"
+              className="block text-sm font-medium opacity-80"
+            >
+              <span className="absolute inset-0" aria-hidden="true"></span>
+            </a>
+          </p>
+        </div>
+      </div>
+      <ChevronRightIcon className="mr-4 h-6 w-6 transition-all group-hover:translate-x-3" />
+    </div>
+  );
+}

nx-dev/ui-markdoc/src/lib/tags/stackblitz-button.schema.ts

@@ -0,0 +1,19 @@
+import { Schema } from '@markdoc/markdoc';
+
+export const stackblitzButton: Schema = {
+  render: 'StackblitzButton',
+  description: 'Renders a button to open a given repository in Stackblitz',
+  attributes: {
+    url: {
+      type: 'String',
+      required: true,
+      description: 'The url of the GitHub repository to open in Stackblitz',
+    },
+    title: {
+      type: 'String',
+      required: false,
+      description:
+        'An optional title to display on the button; "Open in Stackblitz" by default',
+    },
+  },
+};