Adding POC to import snippets from GitHub.

markdoc/tags.js

@@ -4,6 +4,7 @@ import {
   DialectSwitcher,
   transformDialectSwitcherTag,
 } from '@/components/DialectSwitcher'
+import { GitHubCode } from '@/components/GitHubCode'
 import Image from '@/components/Image'
 import { QuickLink, QuickLinks } from '@/components/QuickLinks'
 import { Seperator } from '@/components/Seperator'
@@ -177,6 +178,17 @@ const tags = {
     },
     render: ApiComponentWrapper,
   },
+  'github-code': {
+    render: GitHubCode,
+    // transform: transformDialectSwitcherTag,
+    attributes: {
+      repo: { type: String },
+      filePath: { type: String },
+      startLine: { type: Number },
+      endLine: { type: Number },
+      language: { type: String },
+    },
+  },
 }
 
 export default tags

src/components/GitHubCode.jsx

@@ -0,0 +1,82 @@
+import { Fence } from '@/components/Fence'
+import { useEffect, useState } from 'react'
+
+export function GitHubCode({ repo, filePath, startLine, endLine, language }) {
+  const [code, setCode] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    const fetchCode = async () => {
+      try {
+        setLoading(true)
+        // Construct GitHub raw content URL
+        // Format: https://raw.githubusercontent.com/{owner}/{repo}/{branch}/{path}
+        // We'll default to the 'main' branch
+        const branch = 'main'
+        const url = `https://raw.githubusercontent.com/${repo}/${branch}/${filePath}`
+
+        const response = await fetch(url)
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch code: ${response.statusText}`)
+        }
+
+        const allCode = await response.text()
+
+        // Extract only the lines we want if startLine and endLine are provided
+        if (startLine && endLine) {
+          const lines = allCode.split('\n')
+          const selectedLines = lines.slice(startLine - 1, endLine).join('\n')
+          setCode(selectedLines)
+        } else {
+          setCode(allCode)
+        }
+
+        setLoading(false)
+      } catch (err) {
+        console.error('Error fetching code from GitHub:', err)
+        setError(err.message)
+        setLoading(false)
+      }
+    }
+
+    fetchCode()
+  }, [repo, filePath, startLine, endLine])
+
+  if (loading) {
+    return (
+      <div className="px-4 py-3 text-neutral-400">
+        <span>Loading code from GitHub...</span>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="px-4 py-3 text-red-400">
+        <span>Error loading code: {error}</span>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <Fence className="w-full" language={language}>
+        {code}
+      </Fence>
+      <div className="px-4 py-2 text-xs text-neutral-500">
+        <a
+          href={`https://github.com/${repo}/blob/main/${filePath}${
+            startLine ? `#L${startLine}-L${endLine}` : ''
+          }`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="hover:text-accent-400"
+        >
+          View on GitHub
+        </a>
+      </div>
+    </div>
+  )
+}

src/pages/core/test.md

@@ -0,0 +1,46 @@
+---
+title: Transferring Assets
+metaTitle: Transferring Assets | Core
+description: Learn how to transfer Core NFT Assets between wallets using Metaplex packages.
+---
+
+# Component
+
+{% github-code repo="metaplex-foundation/mpl-core" filePath="clients/js/test/transfer.test.ts" startLine="14" endLine="28" language="typescript" /%}
+
+# Dialect Switcher
+
+{% dialect-switcher title="Fetch a Compressed NFT" %}
+
+{% dialect title="JavaScript" id="js" %}
+
+{% github-code repo="metaplex-foundation/mpl-core" filePath="clients/js/test/transfer.test.ts" startLine="14" endLine="28" language="typescript" /%}
+
+{% /dialect %}
+
+{% dialect title="Rust" id="rust" %}
+
+{% github-code repo="metaplex-foundation/mpl-core" filePath="clients/js/test/transfer.test.ts" startLine="12" endLine="30" language="typescript" /%}
+
+{% /dialect %}
+{% /dialect-switcher %}
+
+# Regular
+
+```ts
+  // Given a Umi instance and a new signer.
+  const umi = await createUmi();
+  const newOwner = generateSigner(umi);
+
+  const asset = await createAsset(umi);
+  await assertAsset(t, umi, {
+    asset: asset.publicKey,
+    owner: umi.identity.publicKey,
+    updateAuthority: { type: 'Address', address: umi.identity.publicKey },
+  });
+
+  await transferV1(umi, {
+    asset: asset.publicKey,
+    newOwner: newOwner.publicKey,
+  }).sendAndConfirm(umi);
+```