docs: include example as snippets in the exported markdown (#21947)

Co-authored-by: Andrew Henry <[email protected]>
Resolves #21711

Author: antonhansson0624

packages/docs/src/composables/markdown.ts

@@ -20,8 +20,8 @@ export function useMarkdown () {
       return
     }
 
-    let markdownContent = `# ${frontmatter.value?.meta.title || 'Page Title'}\\n\\n`
-    markdownContent += `Source: ${window.location.origin}${route.path}\\n\\n`
+    let markdownContent = `# ${frontmatter.value?.meta.title || 'Page Title'}\n\n`
+    markdownContent += `Source: ${window.location.origin}${route.path}\n\n`
 
     try {
       const path = `packages/docs/src/pages${route.path.replace(/\/$/, '')}.md`
@@ -35,7 +35,54 @@ export function useMarkdown () {
 
       if (response.data && 'content' in response.data) {
         const rawMd = atob(response.data.content)
-        const contentWithoutFrontmatter = rawMd.replace(/---[\\s\\S]*?---/, '').trim()
+        let processedMd = rawMd
+
+        // Remove <ApiInline /> and <ExamplesUsage /> tags completely
+        processedMd = processedMd
+          .replace(/<ApiInline[\s\S]*?>([\s\S]*?\/>\n\n)?/g, '')
+          .replace(/<ExamplesUsage[\s\S]*?>([\s\S]*?\/>\n\n)?/g, '')
+
+        // Replace every <ExamplesExample ...> tag with the raw Vue source of its file
+        if (processedMd.includes('<ExamplesExample')) {
+          const tagRegex = /<ExamplesExample\b([^>]*?)>(?:[\s\S]*?<\/ExamplesExample>)|<ExamplesExample\b([^>]*?)\/>/g
+          const matches = [...processedMd.matchAll(tagRegex)]
+
+          for (const m of matches) {
+            const attrs = m[1] ?? m[2] ?? ''
+            const fileMatch = attrs.match(/\bfile\s*=\s*"([^"]+)"/)
+            if (!fileMatch) {
+              // Remove tag if no file attribute
+              processedMd = processedMd.replace(m[0], '')
+              continue
+            }
+
+            const filePath = fileMatch[1].replace(/\\+/g, '/').replace(/\/$/, '')
+            const pathExamples = `packages/docs/src/examples/${filePath}.vue`
+
+            try {
+              const responseExamples = await octokit.request('GET /repos/{owner}/{repo}/contents/{path}', {
+                owner: 'vuetifyjs',
+                repo: 'vuetify',
+                path: pathExamples,
+                ref: branch,
+              })
+
+              if (responseExamples.data && 'content' in responseExamples.data) {
+                const rawVue = atob(responseExamples.data.content)
+                // Replace whole tag with fenced code block of the example source
+                processedMd = processedMd.replace(m[0], `\n\`\`\`vue\n${rawVue}\n\`\`\`\n`)
+              } else {
+                // If fetch fails, strip the tag to avoid leaving placeholders
+                processedMd = processedMd.replace(m[0], '')
+              }
+            } catch (e) {
+              console.error('Error fetching example file', filePath, e)
+              processedMd = processedMd.replace(m[0], '')
+            }
+          }
+        }
+
+        const contentWithoutFrontmatter = processedMd.replace(/---[\s\S]*?---/, '').trim()
         markdownContent += contentWithoutFrontmatter
       } else {
         markdownContent += 'Could not fetch page content.'