Merge branch 'main' into 10.4-alpha-docs

* main:
  More fixes
  Fix type error
  Various features and fixes
  Fix copy markdown and .md routes for /docs root page
  Fix Next error
  Add copy markdown button to docs pages
  Transform links to absolute in markdown content
  fix lint
  generate storybook versions from npmjs instead of from the monorepo

Author: kylegach

.gitignore

@@ -37,6 +37,8 @@ yarn-error.log*
 # Generated content
 apps/frontpage/content/docs
 apps/frontpage/content/snippets
+apps/frontpage/generated-redirects.json
+apps/frontpage/generated-versions.json
 apps/frontpage/public/docs-assets
 apps/frontpage/public/_redirects
 

README.md

@@ -25,6 +25,10 @@ This project is structured around [Turborepo](https://turbo.build/repo). This do
 
 > Generate redirects file
 
+#### `npx turbo generate-versions`
+
+> Generate Storybook version metadata from npm dist-tags
+
 #### `npx turbo dev`
 
 > Run all apps locally

apps/frontpage/app/llms-full.txt/route.ts

@@ -10,7 +10,7 @@ import {
   resolveVersionFromSlug,
 } from '../../lib/resolve-doc-for-llm';
 import { findDocFile } from '../../lib/get-page';
-import { getLlmsBannerLines } from '../llms.txt/route';
+import { getLlmsBannerLines } from '../../lib/get-llm-banner-lines';
 
 export const dynamic = 'force-dynamic';
 
@@ -27,7 +27,7 @@ export function GET(request: NextRequest) {
   const tree = listOfTrees.find((t) => t.name === versionId);
   const flatTree = tree?.children ? getFlatTree({ tree: tree.children }) : [];
 
-  const baseUrl = 'https://storybook.js.org';
+  const baseUrl = `${request.nextUrl.protocol}//${request.nextUrl.host}`;
 
   // Collect all renderers and languages across all pages
   const globalRenderers = new Set<string>();
@@ -52,12 +52,17 @@ export function GET(request: NextRequest) {
     const fileContent = fs.readFileSync(fullPath, 'utf8');
     const { content: rawContent, data } = matter(fileContent);
 
+    const pagePath = [versionId, ...docPath.split('/')];
+
     const { content, availableRenderers, availableLanguages } =
       resolveDocForLLM(rawContent, {
         versionId,
         renderer,
         language,
         codeOnly,
+        pagePath,
+        isIndexPage: result.isIndexPage,
+        baseUrl,
       });
 
     for (const r of availableRenderers) globalRenderers.add(r);
@@ -73,7 +78,7 @@ export function GET(request: NextRequest) {
   }
 
   const header = [
-    ...getLlmsBannerLines({ version: version ?? latestVersion }),
+    ...getLlmsBannerLines({ baseUrl, version: version ?? latestVersion }),
     '---',
     '',
   ].join('\n');

apps/frontpage/app/llms.txt/route.ts

@@ -1,49 +1,14 @@
 import { type NextRequest, NextResponse } from 'next/server';
-import { type DocsVersion, docsVersions, latestVersion } from '@repo/utils';
+import { docsVersions, latestVersion } from '@repo/utils';
 import { getAllTrees } from '../../lib/get-all-trees';
 import { getFlatTree } from '../../lib/get-flat-tree';
 import { resolveVersionFromSlug } from '../../lib/resolve-doc-for-llm';
+import { getLlmsBannerLines } from '../../lib/get-llm-banner-lines';
 
 export const dynamic = 'force-dynamic';
 
-const baseUrl = 'https://storybook.js.org';
-
-export const getLlmsBannerLines = ({ version }: { version: DocsVersion }) => [
-  '# Storybook',
-  '',
-  '> Storybook is a frontend workshop for building UI components and pages in isolation. It helps with UI development, testing, and documentation.',
-  '',
-  `Current version: ${version.label} (${version.id})`,
-  '',
-  '## Documentation',
-  '',
-  `- [Storybook Docs](${baseUrl}/docs): Main documentation`,
-  `- [Full Documentation (Markdown)](${baseUrl}/llms-full.txt): Complete documentation in plain text for LLM consumption`,
-  '',
-  '## Markdown Access',
-  '',
-  'Append `.md` to any docs URL to get clean markdown with code examples:',
-  `- \`${baseUrl}/docs/writing-stories/decorators.md\``,
-  `- \`${baseUrl}/docs/9/writing-stories/decorators.md\` (Version 9)`,
-  '',
-  '### Query Parameters',
-  '',
-  'All markdown endpoints (`.md` URLs and `llms-full.txt`) support these query parameters:',
-  '- `renderer` - Framework filter for code snippets (default: `react`). Options: `react`, `vue`, `angular`, `svelte`, `web-components`, `solid`, `preact`, `html`, `ember`, `qwik`',
-  '- `language` - Language filter for code snippets (default: `ts`). Options: `ts`, `js`',
-  '- `codeOnly` - When `true`, returns only the code snippets without prose',
-  '',
-  'Examples:',
-  '- `GET /docs/writing-stories/decorators.md?renderer=vue&language=ts`',
-  '- `GET /docs/writing-stories/decorators.md?codeOnly=true`',
-  '- `GET /llms-full.txt?renderer=angular&language=js`',
-  '',
-  '### Versioned Access',
-  '',
-  'Prefix the path with a version slug for older versions:',
-];
-
 export function GET(request: NextRequest) {
+  const baseUrl = `${request.nextUrl.protocol}//${request.nextUrl.host}`;
   const versionSlug = request.nextUrl.searchParams.get('version') ?? undefined;
   const versionId = resolveVersionFromSlug(versionSlug);
   const activeVersion =
@@ -53,7 +18,7 @@ export function GET(request: NextRequest) {
   const tree = listOfTrees.find((t) => t.name === versionId);
   const flatTree = tree?.children ? getFlatTree({ tree: tree.children }) : [];
 
-  const lines = [...getLlmsBannerLines({ version: activeVersion })];
+  const lines = [...getLlmsBannerLines({ baseUrl, version: activeVersion })];
 
   for (const version of docsVersions) {
     if (version.id === latestVersion.id) continue;

apps/frontpage/app/md-api/[...path]/route.ts

@@ -45,13 +45,19 @@ export async function GET(request: NextRequest, context: RouteContext) {
   const fileContent = fs.readFileSync(fullPath, 'utf8');
   const { content: rawContent, data } = matter(fileContent);
 
+  const pagePath = [versionId, ...slug.split('/')];
+  const baseUrl = `${request.nextUrl.protocol}//${request.nextUrl.host}`;
+
   const { content, availableRenderers, availableLanguages } = resolveDocForLLM(
     rawContent,
     {
       versionId,
       renderer,
       language,
       codeOnly,
+      pagePath,
+      isIndexPage: result.isIndexPage,
+      baseUrl,
     },
   );
 

apps/frontpage/app/versions/route.ts

@@ -1,11 +1,9 @@
 import crypto from 'node:crypto';
-import { readFile } from 'node:fs/promises';
-import path from 'node:path';
 import { headers } from 'next/headers';
 import type { NextRequest } from 'next/server';
 import { BigQuery } from '@google-cloud/bigquery';
 import { parse as semverParse } from 'semver';
-import { latestVersion } from '@repo/utils';
+import { readGeneratedVersions } from '../../lib/generated-versions';
 
 // eslint-disable-next-line no-useless-escape, prefer-named-capture-group -- Escape is absolutely necessary for regex?
 const SEP_REGEX = /([\.:])/;
@@ -15,13 +13,6 @@ const logger = { log: (..._msgs: unknown[]) => {} };
 
 const { GCP_CREDENTIALS, SKIP_IP_HASH } = process.env;
 
-const versionFilesDir = path.join(
-  process.cwd(),
-  'content/docs',
-  latestVersion.id,
-  'versions',
-);
-
 const md5 = (host: string) => {
   const hash = crypto.createHash('md5');
   hash.update(host);
@@ -99,27 +90,10 @@ const log = async (searchParams: URLSearchParams) => {
   await table.insert([row]);
 };
 
-type DistTag = 'latest' | 'next';
-
 const versions = async () => {
   logger.log('fetching versions');
 
-  async function getVersionData(distTag: DistTag) {
-    const data = JSON.parse(
-      await readFile(
-        new URL(path.join(versionFilesDir, `${distTag}.json`), import.meta.url),
-        'utf8',
-      ),
-    );
-    // Strip off no-longer-used `info` property
-    const { version } = data as { version: string };
-    return { version };
-  }
-
-  const latest = await getVersionData('latest');
-  const next = await getVersionData('next');
-
-  return JSON.stringify({ latest, next });
+  return JSON.stringify(await readGeneratedVersions());
 };
 
 export async function GET(request: NextRequest) {

…age/components/docs/renderers/button.tsx apps/frontpage/components/docs/button.tsxapps/frontpage/components/docs/renderers/button.tsx renamed to apps/frontpage/components/docs/button.tsx apps/frontpage/components/docs/renderers/button.tsx renamed to apps/frontpage/components/docs/button.tsx

@@ -1,6 +1,7 @@
 import { type FC } from 'react';
 import { cn } from '@repo/utils';
 import { type PageDataProps } from '../../lib/get-page';
+import { CopyMarkdownButton } from './copy-markdown-button';
 import { Renderers } from './renderers';
 import { DocsFooter } from './footer/footer';
 import { PageTabs } from './page-tabs';
@@ -17,7 +18,10 @@ export const Content: FC<{ page: PageDataProps }> = ({ page }) => {
           >
             {page.title ?? 'Title is missing'}
           </h1>
-          {!page.hideRendererSelector && <Renderers />}
+          <div className="mb-8 flex flex-col items-start gap-2 min-[430px]:flex-row min-[430px]:justify-between">
+            {!page.hideRendererSelector && <Renderers />}
+            <CopyMarkdownButton />
+          </div>
           {page.tabs && page.tabs.length > 0 ? (
             <PageTabs {...page} />
           ) : null}

apps/frontpage/components/docs/content.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { type FC, useCallback, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { latestVersion } from '@repo/utils';
+import { useDocs } from '../../app/docs/provider';
+import { Button } from './button';
+
+export const CopyMarkdownButton: FC = () => {
+  const pathname = usePathname();
+  const { activeRenderer, activeLanguage } = useDocs();
+  const [copied, setCopied] = useState(false);
+
+  const handleClick = useCallback(() => {
+    const mdApiPath =
+      /^\/docs\/?$/.test(pathname)
+        ? `/md-api/${latestVersion.id}`
+        : pathname.replace(/^\/docs\//, '/md-api/');
+    const params = new URLSearchParams();
+    if (activeRenderer) params.set('renderer', activeRenderer);
+    if (activeLanguage) params.set('language', activeLanguage);
+
+    const url = `${mdApiPath}?${params.toString()}`;
+
+    void fetch(url)
+      .then((response) => response.text())
+      .then((text) => navigator.clipboard.writeText(text))
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => {
+          setCopied(false);
+        }, 2000);
+      });
+  }, [pathname, activeRenderer, activeLanguage]);
+
+  return (
+    <Button onClick={handleClick}>
+      {copied ? 'Copied!' : 'Copy markdown'}
+    </Button>
+  );
+};

apps/frontpage/components/docs/copy-markdown-button.tsx

@@ -65,6 +65,7 @@ const getActiveRenderer = (activeRendererIn: string | null, pathname: string) =>
     'nextjs': 'react',
     'react-native-web': 'react',
     'sveltekit': 'svelte',
+    'tanstack-react': 'react',
     'vue3': 'vue',
   };