handoff-app 1.0.4 → 1.0.6-canary.0

package/Changelog.md

@@ -6,6 +6,18 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## \[1.0.6] - 2026-02-24
+
+Version 1.0.4 fixed an issue when running Handoff in subpaths (eg.
+https://mysite.com/folder/handoff). We discovered a minor bug in that fix that
+causes some menu constructs to work poorly. This release fixes that issue.
+
+## \[1.0.5] - 2026-02-19
+
+This is a minor improvement release that extends the quickstart released in the
+1.0.4. It extends the quickstart to work from the Handoff-CLI when installed
+globally.  You can use `handoff-app init` to initialize a new project.
+
 ## \[1.0.4] - 2026-02-19
 
 Bugfixes, UX improvements to the component page, improvements to react docgen,

package/README.md

@@ -12,19 +12,18 @@ transform tokens into dev ready artifacts.
 
 ## Table of Contents
 
-- [What Is Handoff?](#what-is-handoff)
-- [How does it work](#how-does-it-work)
-  - [Handoff is in Beta!](#handoff-is-in-beta)
-- [Requirements](#requirements)
-- [Get Started](#get-started)
-- [Table of Contents](#table-of-contents-1)
-  - [Figma](#figma)
-  - [Create a project](#create-a-project)
-  - [Test fetch](#test-fetch)
-- [Further Reading](#further-reading)
-- [Maintainers](#maintainers)
-- [Contributing](#contributing)
-- [License](#license)
+* [What Is Handoff?](#what-is-handoff)
+* [How does it work](#how-does-it-work)
+  * [Handoff is in Beta!](#handoff-is-in-beta)
+* [Requirements](#requirements)
+* [Get Started](#get-started)
+  * [Figma](#figma)
+  * [Create a project](#create-a-project)
+  * [Test fetch](#test-fetch)
+* [Further Reading](#further-reading)
+* [Maintainers](#maintainers)
+* [Contributing](#contributing)
+* [License](#license)
 
 ## What Is Handoff?
 
@@ -35,19 +34,19 @@ between design and development.
 
 Handoff is a collection of 4 javascript tools:
 
-- **Figma Token Extraction** - A framework for extracting
+* **Figma Token Extraction** - A framework for extracting
   standardized design foundations and components from Figma.
-- **Transformation Pipeline** - A set of transformers for producing SASS, CSS,
+* **Transformation Pipeline** - A set of transformers for producing SASS, CSS,
   Style Dictionary, and preview snippets from that data.
-- **Documentation Web App** - A static, client side, Javascript web app that
+* **Documentation Web App** - A static, client side, Javascript web app that
   renders live, working previews of your components, tokens and styles.
-- **Delivery Tools** - Easy build tooling and CI/CD wrapper that allows
+* **Delivery Tools** - Easy build tooling and CI/CD wrapper that allows
   automation to render and ship the various deliverables as needed.
 
 ## How does it work?
 
 Handoff works by extracting design foundations and component data from
-[well-formed Figma libraries](https://www.figma.com/file/IGYfyraLDa0BpVXkxHY2tE/Starter-%5BV2%5D?node-id=0%3A1&t=iPYW37yDmNkJBt1t-0),
+[well-formed Figma libraries](https://www.figma.com/file/IGYfyraLDa0BpVXkxHY2tE/Starter-%5BV2%5D?node-id=0%3A1\&t=iPYW37yDmNkJBt1t-0),
 storing them as JSON, and then transforming them into design tokens. Those
 design tokens are published as SASS and CSS variables.
 
@@ -56,23 +55,23 @@ any site using the [Bootstrap 5](https://getbootstrap.com/) frontend
 framework. If you use another framework, or custom CSS, you can easily write
 map files to connect the generated tokens with your site or application.
 
-- [Get Started](https://www.handoff.com/docs/quickstart)
-- [Requirements](https://www.handoff.com/docs/overview/requirements)
-- [Integrating Tokens](https://www.handoff.com/docs/tokens/integration)
-- [Customization](https://www.handoff.com/docs/customization)
+* [Get Started](https://www.handoff.com/docs/quickstart)
+* [Requirements](https://www.handoff.com/docs/overview/requirements)
+* [Integrating Tokens](https://www.handoff.com/docs/tokens/integration)
+* [Customization](https://www.handoff.com/docs/customization)
 
 Once Handoff extracts design tokens and variables, it builds a statically
 generated NextJS application that can be published to the web. This asset
 can be hosted on a static webhost (NGINX, s3/Cloudfront, Cloudflare pages
 etc).
 
-- [Tokens Overview](https://www.handoff.com/docs/tokens)
-- [Build Site](https://www.handoff.com/docs/tokens/publishing)
+* [Tokens Overview](https://www.handoff.com/docs/tokens)
+* [Build Site](https://www.handoff.com/docs/tokens/publishing)
 
 This pipeline from Figma to the Documentation Web app can be automated via CI/CD
 to provide automatic, up-to-date, easily readable developer documentation.
 
-- [CI/CD Integration](https://www.handoff.com/docs/guide/cicd)
+* [CI/CD Integration](https://www.handoff.com/docs/guide/cicd)
 
 ## Handoff is in Beta!
 
@@ -82,64 +81,101 @@ a use case that isn't quite met.
 
 ## Requirements
 
-- A paid Figma account is required to publish the Figma file library
-- Node 18.17+
-- NPM 8+
+* A paid Figma account is required to publish the Figma file library
+* Node 18.17+
+* NPM 8+
 
 ## Get Started
 
 ### Figma
 
-1. Open the [Handoff Figma starter](https://www.figma.com/file/IGYfyraLDa0BpVXkxHY2tE/Starter-%5BV2%5D?node-id=0%3A1&t=iPYW37yDmNkJBt1t-0)
+1. Open the [Handoff Figma starter](https://www.figma.com/file/IGYfyraLDa0BpVXkxHY2tE/Starter-%5BV2%5D?node-id=0%3A1\&t=iPYW37yDmNkJBt1t-0)
    and duplicate this project to your account
 
 2. Publish components to the library
 
-- Click on the Figma logo at the top left
-- Click on `Libraries`
-- Click on the current file
-- Click publish changes
+* Click on the Figma logo at the top left
+* Click on `Libraries`
+* Click on the current file
+* Click publish changes
 
 You'll need a developer token if you don't have one already
 
-- Click on the Figma logo in the top left
-- Go to `Help and Account`
-- Click on `Account Settings`
-- Scroll to `Personal Access Token`
-- Enter a token name and hit enter
-- Note that token for the next steps
+* Click on the Figma logo in the top left
+* Go to `Help and Account`
+* Click on `Account Settings`
+* Scroll to `Personal Access Token`
+* Enter a token name and hit enter
+* Note that token for the next steps
 
 ## Create a project
 
-- Run `npm install -g handoff-app`
-- Create a new directory for your project `mkdir my-new-project`
-- In that folder (`cd my-new-project`), run `handoff-app fetch`
-- Handoff will prompt for your developer token, and the file id of your figma
-  file. The file id can be found in the url of the file -
-  https://www.figma.com/file/{file_id}/{slug}
-- Start the project `handoff-app start`
+The easiest way to get started is using the `handoff-app init` command to scaffold a new project:
 
-This will fetch the latest from your Figma file and it will boot a demo site at
-http://localhost:3000
+```bash
+npm install -g handoff-app
+handoff-app init
+```
+
+This interactive CLI will guide you through:
+
+1. **Project name** - Enter a name for your project directory
+2. **Project type** - Choose between:
+   * **Project with sample components** - Includes example components to help you get started
+   * **Blank project** - Only the essential configuration files
+3. **Figma configuration** - Optionally provide your Figma project ID and developer access token
+
+The scaffolding will:
+
+* Create a new directory with your project name
+* Generate all necessary configuration files
+* Install dependencies automatically
+
+### After scaffolding
+
+```bash
+cd my-handoff-project
+npm run fetch    # Fetch design tokens from Figma
+npm run start    # Start the documentation site
+```
+
+This will fetch the latest from your Figma file and boot a demo site at http://localhost:3000
+
+### Alternative: Global installation
+
+You can also install handoff-app globally:
+
+```bash
+npm install -g handoff-app
+create-handoff-app
+```
+
+Or manually set up a project:
+
+```bash
+mkdir my-new-project && cd my-new-project
+handoff-app fetch   # Will prompt for Figma credentials
+handoff-app start
+```
 
 ## Test Fetch
 
-- Now go back to your Figma file and change a button color
-- Republish the changes to the library. Click on the publish button from the main
+* Now go back to your Figma file and change a button color
+* Republish the changes to the library. Click on the publish button from the main
   dropdown. You'll see a list of changes that have been made. Clicking publish
   will make those changes available to handoff.
-- Back in your project, open a new terminal tab and type `npm run fetch`
+* Back in your project, open a new terminal tab and type `npm run fetch`
 
 Once that runs, your browser should update with the new colors.
 
 ## Further Reading
 
-- [Configure your project](https://www.handoff.com/docs/customization)
-- [Customize the content](https://www.handoff.com/docs/customization/content)
-- [Integrate tokens with your project](https://www.handoff.com/docs/tokens/integration)
-- [Build to Static Assets](https://www.handoff.com/docs/tokens/publishing)
-- [Integrate with Github Actions CI/CD](https://www.handoff.com/docs/infrastructure/github/)
-- [Integrate with Bitbucket Pipelines CI/CD](https://www.handoff.com/docs/infrastructure/bitbucket/)
+* [Configure your project](https://www.handoff.com/docs/customization)
+* [Customize the content](https://www.handoff.com/docs/customization/content)
+* [Integrate tokens with your project](https://www.handoff.com/docs/tokens/integration)
+* [Build to Static Assets](https://www.handoff.com/docs/tokens/publishing)
+* [Integrate with Github Actions CI/CD](https://www.handoff.com/docs/infrastructure/github/)
+* [Integrate with Bitbucket Pipelines CI/CD](https://www.handoff.com/docs/infrastructure/bitbucket/)
 
 ## Maintainers
 

package/dist/cli.js

@@ -19,7 +19,7 @@ class HandoffCliError extends Error {
  * Show the help message
  */
 const showVersion = () => {
-    return 'Handoff App - 1.0.3';
+    return 'Handoff App - 1.0.6';
 };
 /**
  * Define a CLI error

package/dist/commands/index.d.ts

@@ -1 +1 @@
-export declare const commands: import("yargs").CommandModule<{}, import("./dev").DevArgs>[];
+export declare const commands: import("yargs").CommandModule<{}, import("./init").InitArgs>[];

package/dist/commands/index.js

@@ -11,6 +11,7 @@ const config_1 = __importDefault(require("./eject/config"));
 const pages_1 = __importDefault(require("./eject/pages"));
 const theme_1 = __importDefault(require("./eject/theme"));
 const fetch_1 = __importDefault(require("./fetch"));
+const init_1 = __importDefault(require("./init"));
 const component_1 = __importDefault(require("./make/component"));
 const page_1 = __importDefault(require("./make/page"));
 const template_1 = __importDefault(require("./make/template"));
@@ -25,6 +26,7 @@ exports.commands = [
     pages_1.default,
     theme_1.default,
     fetch_1.default,
+    init_1.default,
     page_1.default,
     component_1.default,
     template_1.default,

package/dist/commands/init/index.d.ts

@@ -0,0 +1,5 @@
+import { CommandModule } from 'yargs';
+export interface InitArgs {
+}
+declare const command: CommandModule<{}, InitArgs>;
+export default command;

package/dist/commands/init/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const create_1 = __importDefault(require("../../create"));
+const command = {
+    command: 'init',
+    describe: 'Initialize a new Handoff project with interactive wizard',
+    builder: (yargs) => {
+        return yargs;
+    },
+    handler: () => __awaiter(void 0, void 0, void 0, function* () {
+        yield (0, create_1.default)();
+    }),
+};
+exports.default = command;

package/dist/create.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Main create function
+ */
+declare const create: () => Promise<void>;
+export default create;

package/dist/create.js

@@ -0,0 +1,293 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const p = __importStar(require("@clack/prompts"));
+const chalk_1 = __importDefault(require("chalk"));
+const child_process_1 = require("child_process");
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+/**
+ * Get the current handoff-app version from package.json
+ */
+const getVersion = () => {
+    try {
+        const packageJsonPath = path.resolve(__dirname, '../package.json');
+        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+        return packageJson.version || 'unknown';
+    }
+    catch (_a) {
+        return 'unknown';
+    }
+};
+class CreateError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'CreateError';
+    }
+}
+/**
+ * Check if directory exists
+ */
+const directoryExists = (dirPath) => {
+    try {
+        return fs.existsSync(dirPath);
+    }
+    catch (_a) {
+        return false;
+    }
+};
+/**
+ * Create directory recursively
+ */
+const createDirectory = (dirPath) => {
+    try {
+        fs.mkdirSync(dirPath, { recursive: true });
+    }
+    catch (error) {
+        throw new CreateError(`Failed to create directory: ${error}`);
+    }
+};
+/**
+ * Get mandatory templates based on whether examples are included
+ * Uses different handoff config templates for blank vs. with-examples projects
+ */
+const getMandatoryTemplates = (includeExamples) => [
+    { source: 'package.json.tpl', destination: 'package.json' },
+    {
+        source: includeExamples ? 'handoff.config.with-examples.js.tpl' : 'handoff.config.js.tpl',
+        destination: 'handoff.config.js'
+    },
+    { source: 'tsconfig.json.tpl', destination: 'tsconfig.json' },
+    { source: 'gitignore.tpl', destination: '.gitignore' },
+    { source: 'env.tpl', destination: '.env' },
+    { source: 'README.md.tpl', destination: 'README.md' },
+];
+// Example component files (only included when user opts for examples)
+const exampleTemplates = [
+    { source: 'components/button/Button.tsx.tpl', destination: 'components/button/Button.tsx', isExample: true },
+    { source: 'components/button/button.js.tpl', destination: 'components/button/button.js', isExample: true },
+];
+/**
+ * Render a template string by replacing placeholders with values
+ */
+const renderTemplate = (content, data) => {
+    return content.replace(/\{\{(\w+)\}\}/g, (_, key) => {
+        if (!(key in data)) {
+            console.warn(chalk_1.default.yellow(`Warning: Unknown template placeholder '{{${key}}}'`));
+        }
+        return data[key] || '';
+    });
+};
+/**
+ * Execute npm install
+ */
+const runNpmInstall = (projectPath) => __awaiter(void 0, void 0, void 0, function* () {
+    const spinner = p.spinner();
+    spinner.start('Installing dependencies...');
+    return new Promise((resolve, reject) => {
+        var _a;
+        const npmProcess = (0, child_process_1.spawn)('npm', ['install'], {
+            cwd: projectPath,
+            stdio: 'pipe',
+            shell: true,
+        });
+        let stderr = '';
+        (_a = npmProcess.stderr) === null || _a === void 0 ? void 0 : _a.on('data', (data) => {
+            stderr += data.toString();
+        });
+        npmProcess.on('close', (code) => {
+            if (code === 0) {
+                spinner.stop('Dependencies installed successfully');
+                resolve();
+            }
+            else {
+                spinner.stop('Failed to install dependencies');
+                reject(new CreateError(`npm install failed: ${stderr}`));
+            }
+        });
+        npmProcess.on('error', (error) => {
+            spinner.stop('Failed to install dependencies');
+            reject(new CreateError(`Failed to run npm install: ${error.message}`));
+        });
+    });
+});
+/**
+ * Validate project name
+ */
+const validateProjectName = (name) => {
+    const validNameRegex = /^[a-zA-Z0-9-_]+$/;
+    return validNameRegex.test(name) && name.length > 0;
+};
+/**
+ * Main create function
+ */
+const create = () => __awaiter(void 0, void 0, void 0, function* () {
+    const version = getVersion();
+    p.intro(chalk_1.default.bgCyan.black(` Handoff App Creator (v${version}) `));
+    try {
+        // Get project name
+        const projectName = yield p.text({
+            message: 'Enter project name:',
+            placeholder: 'my-handoff-project',
+            validate: (value) => {
+                if (!value.trim())
+                    return 'Project name is required';
+                if (!validateProjectName(value)) {
+                    return 'Invalid project name. Use only letters, numbers, hyphens, and underscores.';
+                }
+            },
+        });
+        if (p.isCancel(projectName)) {
+            p.cancel('Project creation cancelled.');
+            process.exit(0);
+        }
+        const projectPath = path.resolve(process.cwd(), projectName);
+        // Check if directory exists
+        if (directoryExists(projectPath)) {
+            const overwrite = yield p.confirm({
+                message: `Directory "${projectName}" already exists. Do you want to overwrite it?`,
+                initialValue: false,
+            });
+            if (p.isCancel(overwrite) || !overwrite) {
+                p.cancel('Project creation cancelled.');
+                process.exit(0);
+            }
+            // Remove existing directory
+            p.log.info('Removing existing directory...');
+            fs.rmSync(projectPath, { recursive: true, force: true });
+        }
+        // Create project directory
+        p.log.info('Creating project directory...');
+        createDirectory(projectPath);
+        // Ask if user wants a blank project or one with examples
+        p.log.step(chalk_1.default.blue('Project Configuration'));
+        const projectType = yield p.select({
+            message: 'What type of project would you like to create?',
+            options: [
+                { value: 'with-examples', label: 'Project with sample components', hint: 'Includes example components to get started' },
+                { value: 'blank', label: 'Blank project', hint: 'Only mandatory files, no examples' },
+            ],
+            initialValue: 'with-examples',
+        });
+        if (p.isCancel(projectType)) {
+            p.cancel('Project creation cancelled.');
+            process.exit(0);
+        }
+        const includeExamples = projectType === 'with-examples';
+        // Get Figma project ID
+        p.log.step(chalk_1.default.blue('Figma Configuration'));
+        const figmaProjectId = yield p.text({
+            message: 'Enter Figma project ID:',
+            placeholder: 'Optional - can be configured later',
+        });
+        if (p.isCancel(figmaProjectId)) {
+            p.cancel('Project creation cancelled.');
+            process.exit(0);
+        }
+        // Get Figma access token
+        let figmaAccessToken = '';
+        if (figmaProjectId) {
+            figmaAccessToken = yield p.password({
+                message: 'Enter Figma developer access token:',
+            });
+            if (p.isCancel(figmaAccessToken)) {
+                p.cancel('Project creation cancelled.');
+                process.exit(0);
+            }
+        }
+        const options = {
+            projectName: projectName,
+            figmaProjectId: (figmaProjectId || '').trim(),
+            figmaAccessToken: (figmaAccessToken || '').trim(),
+        };
+        // Create files
+        const spinner = p.spinner();
+        spinner.start('Creating project files...');
+        const templateDir = path.resolve(__dirname, '../templates/default');
+        if (!fs.existsSync(templateDir)) {
+            throw new CreateError(`Template directory not found at ${templateDir}. This may indicate a packaging issue.`);
+        }
+        // Combine mandatory templates with example templates based on user choice
+        const templates = [
+            ...getMandatoryTemplates(includeExamples),
+            ...(includeExamples ? exampleTemplates : []),
+        ];
+        try {
+            for (const template of templates) {
+                const templatePath = path.join(templateDir, template.source);
+                const destinationPath = path.join(projectPath, template.destination);
+                try {
+                    const content = fs.readFileSync(templatePath, 'utf8');
+                    const rendered = renderTemplate(content, options);
+                    fs.mkdirSync(path.dirname(destinationPath), { recursive: true });
+                    fs.writeFileSync(destinationPath, rendered);
+                }
+                catch (err) {
+                    throw new CreateError(`Failed to create file ${template.destination}: ${err}`);
+                }
+            }
+            spinner.stop('Project files created');
+        }
+        catch (err) {
+            spinner.stop('Failed to create project files');
+            throw err;
+        }
+        // Install dependencies
+        yield runNpmInstall(projectPath);
+        // Success message
+        const nextSteps = [`cd ${projectName}`];
+        if (figmaProjectId && figmaAccessToken) {
+            nextSteps.push('npm run fetch');
+        }
+        nextSteps.push('npm run start');
+        p.note(nextSteps.join('\n'), 'Next steps');
+        const outroMessage = includeExamples
+            ? 'Project created successfully with sample components! First, fetch your Figma data (optional), then start the documentation site.'
+            : 'Blank project created successfully! First, fetch your Figma data, then start the documentation site.';
+        p.outro(chalk_1.default.green(outroMessage));
+    }
+    catch (error) {
+        if (error instanceof CreateError) {
+            p.cancel(chalk_1.default.red(`Error: ${error.message}`));
+        }
+        else {
+            p.cancel(chalk_1.default.red(`Unexpected error: ${error}`));
+        }
+        process.exit(1);
+    }
+});
+exports.default = create;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "handoff-app",
-  "version": "1.0.4",
+  "version": "1.0.6-canary.0",
   "description": "Automated documentation toolchain for building client side documentation from figma",
   "author ": {
     "name": "Convertiv",

package/src/app/components/util/index.ts

@@ -309,7 +309,7 @@ const staticBuildComponentMenu = (type?: boolean | string) => {
       if (component.name) {
         title = component.name;
       }
-      menuGroup.menu.push({ path: `${basePath}/system/component/${component.id}`, title });
+      menuGroup.menu.push({ path: `${basePath}system/component/${component.id}`, title });
     });
     // sort the menu group by name alphabetical
     menuGroup.menu = menuGroup.menu.sort((a, b) => a.title.localeCompare(b.title));
@@ -326,19 +326,19 @@ const staticBuildTokensMenu = () => {
   const menu = [
     {
       title: `Foundations`,
-      path: `${basePath}/system/tokens/foundations`,
+      path: `${basePath}system/tokens/foundations`,
       menu: [
         {
           title: `Colors`,
-          path: `${basePath}/system/tokens/foundations/colors`,
+          path: `${basePath}system/tokens/foundations/colors`,
         },
         {
           title: `Effects`,
-          path: `${basePath}/system/tokens/foundations/effects`,
+          path: `${basePath}system/tokens/foundations/effects`,
         },
         {
           title: `Typography`,
-          path: `${basePath}/system/tokens/foundations/typography`,
+          path: `${basePath}system/tokens/foundations/typography`,
         },
       ],
     },
@@ -358,14 +358,14 @@ const staticBuildTokensMenu = () => {
       if (component.name) {
         title = component.name;
       }
-      componentMenuItems.push({ path: `${basePath}/system/tokens/components/${component.id}`, title });
+      componentMenuItems.push({ path: `${basePath}system/tokens/components/${component.id}`, title });
     });
   });
 
   if (componentMenuItems.length > 0) {
     menu.push({
       title: `Components`,
-      path: `${basePath}/system/tokens/components`,
+      path: `${basePath}system/tokens/components`,
       menu: componentMenuItems,
     });
   }
@@ -378,7 +378,7 @@ const staticBuildTokenMenu = () => {
 
   let subSections = {
     title: 'Tokens',
-    path: `${basePath}/system/tokens`,
+    path: `${basePath}system/tokens`,
     menu: [],
   };
   const tokens = getTokens();