diff --git a/README.md b/README.md index 517f80c9dd..faf207d10a 100755 --- a/README.md +++ b/README.md @@ -137,7 +137,7 @@ npm run test:less:update -w packages/stacks-classic [![ci status][gh-action-badge]][gh-action-url] [![npm version][npm-badge-svelte]][npm-url-svelte] -This workspace contains a Svelte implementation of the Stacks Classic design system. Unlike the Stacks-Classic workspace which has its documentation defined in the separate Stacks-Docs workspace, this one defines its documentation site directly within its own workspace which can be reached via https://svelte.stackoverflow.design +This workspace contains a Svelte implementation of the Stacks Classic design system. Unlike the Stacks-Classic workspace which has its documentation defined in the separate Stacks-Docs workspace, this one defines its documentation site directly within its own workspace which can be reached via https://v2.svelte.stackoverflow.design We use [storybook](https://storybook.js.org/) for local development. To start the storybook server run: diff --git a/packages/stacks-svelte/.storybook/getting-started/Overview.mdx b/packages/stacks-svelte/.storybook/getting-started/Overview.mdx index e1bb7513d3..6157adcfd5 100644 --- a/packages/stacks-svelte/.storybook/getting-started/Overview.mdx +++ b/packages/stacks-svelte/.storybook/getting-started/Overview.mdx @@ -11,7 +11,7 @@ This package is an implementation of the [Stacks Design System](https://stackove Stacks Svelte can be installed via npm: ``` -npm install @stackoverflow/stacks-svelte +npm install @stackoverflow/stacks-svelte@legacy-v2 @stackoverflow/stacks@legacy-v2 ``` `@stackoverflow/stacks-svelte` relies on `@stackoverflow/stacks` styles. @@ -54,7 +54,7 @@ We also have a selection of [Svelte Actions](https://svelte.dev/docs/svelte-acti ## Documentation -You can consult the full catalog of component available together with their respective documentation and an interactive playground at [svelte.stackoverflow.design](https://svelte.stackoverflow.design). +You can consult the full catalog of components together with their respective documentation and an interactive playground at [v2.svelte.stackoverflow.design](https://v2.svelte.stackoverflow.design). ## Contributing diff --git a/packages/stacks-svelte/README.md b/packages/stacks-svelte/README.md index 0ac20d08e9..7831406de5 100644 --- a/packages/stacks-svelte/README.md +++ b/packages/stacks-svelte/README.md @@ -2,14 +2,18 @@ This package is an implementation of the [Stacks Design System](https://stackoverflow.design/), using Svelte Components. -[Documentation](https://svelte.stackoverflow.design) +[Documentation](https://v2.svelte.stackoverflow.design) + +This branch contains the maintained V2 release. Its documentation is built +from `v2` and hosted separately from the current release at +`v2.svelte.stackoverflow.design`. ## Installation Stacks Svelte can be installed via npm: ``` -npm install @stackoverflow/stacks-svelte +npm install @stackoverflow/stacks-svelte@legacy-v2 @stackoverflow/stacks@legacy-v2 ``` `@stackoverflow/stacks-svelte` relies on `@stackoverflow/stacks` styles. diff --git a/packages/stacks-svelte/tools/storybook-llms-extractor.js b/packages/stacks-svelte/tools/storybook-llms-extractor.js index 549e7862af..4b51fec02b 100755 --- a/packages/stacks-svelte/tools/storybook-llms-extractor.js +++ b/packages/stacks-svelte/tools/storybook-llms-extractor.js @@ -21,22 +21,24 @@ import process from "node:process"; const __dirname = dirname(fileURLToPath(import.meta.url)); function getCurrentBranch() { - return execSync("git branch --show-current", { encoding: "utf-8" }).trim(); + return ( + process.env.BRANCH ?? + execSync("git branch --show-current", { encoding: "utf-8" }).trim() + ); } const currentBranch = getCurrentBranch(); -const isBeta = currentBranch === "beta"; const CONFIG = { distPath: "../netlify/dist", - summaryBaseUrl: isBeta - ? "https://beta.svelte.stackoverflow.design" - : "https://svelte.stackoverflow.design", + summaryBaseUrl: "https://v2.svelte.stackoverflow.design", summaryTitle: "Stacks Svelte", summaryDescription: "Stacks Svelte Components Documentation", }; const { distPath, summaryBaseUrl, summaryTitle, summaryDescription } = CONFIG; +export { summaryBaseUrl }; + export function parseStorybookIndex(distPath) { const content = readFileSync(join(distPath, "index.json"), "utf-8"); return JSON.parse(content); @@ -369,7 +371,7 @@ function findSubcomponents(componentPath) { })); } -function generateDocs(groups) { +export function generateDocs(groups) { let md = `# ${summaryTitle}\n\n${summaryDescription}\n\n`; md += `> Generated Storybook documentation optimized for LLM consumption.\n\n---\n\n## Table of Contents\n\n`; diff --git a/packages/stacks-svelte/tools/storybook-llms-extractor.test.js b/packages/stacks-svelte/tools/storybook-llms-extractor.test.js index 4f35b70d3e..6027c5c2b6 100644 --- a/packages/stacks-svelte/tools/storybook-llms-extractor.test.js +++ b/packages/stacks-svelte/tools/storybook-llms-extractor.test.js @@ -7,10 +7,38 @@ import { extractPropsFromInterface, extractPropsFromExports, extractStoryExamples, + generateDocs, parseArgsTable, + summaryBaseUrl, } from "./storybook-llms-extractor.js"; describe("Storybook LLM Extractor", () => { + test("uses the V2 documentation hostname", () => { + assert.strictEqual( + summaryBaseUrl, + "https://v2.svelte.stackoverflow.design" + ); + }); + + test("generates V2 documentation and story links", () => { + const result = generateDocs([ + { + title: "Components/Button", + docs: { id: "components-button--docs" }, + stories: [{ id: "components-button--base", name: "Base" }], + }, + ]); + + assert.match( + result, + /https:\/\/v2\.svelte\.stackoverflow\.design\/\?path=\/docs\/components-button--docs/ + ); + assert.match( + result, + /https:\/\/v2\.svelte\.stackoverflow\.design\/\?path=\/story\/components-button--base/ + ); + }); + describe("cleanJSDoc", () => { test("should remove JSDoc asterisks and trim whitespace", () => { const input = `