fix: links remove backslash

core/core/src/stories-utils.ts

@@ -1,5 +1,5 @@
 import { toId, storyNameFromExport } from '@storybook/csf';
-import { PagesOnlyRoutes, DocType } from './configuration';
+import { PagesOnlyRoutes, DocType, PageConfiguration } from './configuration';
 import { Document, defDocType } from './stories';
 
 export const strToId = (str: string) => str.replace(/\W/g, '-').toLowerCase();
@@ -10,6 +10,9 @@ export const ensureTrailingSlash = (route: string) =>
 export const ensureStartingSlash = (route: string) =>
   route.startsWith('/') ? route : '/' + route;
 
+export const removeTrailingSlash = (route: string) =>
+  route.endsWith('/') ? route.substr(0, route.length - 1) : route;
+
 export const getDocPath = (
   docType: DocType,
   doc?: Document,
@@ -30,7 +33,7 @@ export const getDocPath = (
       )}${ensureTrailingSlash(strToId(name))}${
         activeTab ? `${ensureTrailingSlash(activeTab)}` : ''
       }`;
-  return ensureTrailingSlash(route);
+  return removeTrailingSlash(route);
 };
 
 export const getStoryPath = (
@@ -53,9 +56,14 @@ export const getStoryPath = (
   const route = `${docRoute}${storyId ? ensureTrailingSlash(storyId) : ''}${
     activeTab ? `${ensureTrailingSlash(activeTab)}` : ''
   }`;
-  return ensureTrailingSlash(route);
+  return removeTrailingSlash(route);
 };
 
+export const getDocTypePath = (type: PageConfiguration) =>
+  type.basePath
+    ? removeTrailingSlash(ensureStartingSlash(type.basePath))
+    : undefined;
+
 export const docStoryToId = (docId: string, storyId: string) =>
   toId(docId, storyNameFromExport(storyId));
 

core/loader/src/store.ts

@@ -11,6 +11,10 @@ import {
   TabConfiguration,
   getStoryPath,
   getDocPath,
+  removeTrailingSlash,
+  ensureStartingSlash,
+  getDocTypePath,
+  PageConfiguration,
 } from '@component-controls/core';
 import { LoadingDocStore } from '@component-controls/instrument';
 
@@ -136,10 +140,15 @@ export class Store implements LoadingStore {
         this._homepaths = {};
         Object.keys(pages).forEach(type => {
           const page = pages[type as DocType];
+          const path = getDocTypePath(page as PageConfiguration);
           const docs = this.getDocs(type as DocType);
-          const doc = docs.find(doc => doc?.route === `/${page.basePath}`);
+          const doc = docs.find(
+            doc =>
+              removeTrailingSlash(ensureStartingSlash(doc?.route || '')) ===
+              path,
+          );
           //@ts-ignore
-          this._homepaths[`/${page.basePath}`] = {
+          this._homepaths[path] = {
             type,
             docId: doc?.title,
           };

examples/nextjs/pages/[doctype].tsx

@@ -24,8 +24,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
   const { doctype: basepath } = params as { doctype: string };
-  const { type = null, docId = null } =
-    store.getHomePage(`/${basepath}/`) || {};
+  const { type = null, docId = null } = store.getHomePage(`/${basepath}`) || {};
   return { props: { docId, type } };
 };
 

examples/nextjs/pages/[doctype]/[...docid].tsx

@@ -41,6 +41,6 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
     storyId = null,
     category = null,
     activeTab = null,
-  } = store.getDocPage(`/${doctype}/${docid.join('/')}/`) || {};
+  } = store.getDocPage(`/${doctype}/${docid.join('/')}`) || {};
   return { props: { docId, type, storyId, category, activeTab } };
 };

examples/stories/src/tutorial/getting-started/gatsby.mdx

@@ -81,7 +81,7 @@ module.exports = {
   ],
 };
 ```
-more: [run-time configuration](/configuration/buildtime/)
+more: [run-time configuration](/configuration/buildtime)
 
 ### Documentation folder
 
@@ -175,7 +175,7 @@ module.exports = {
 };
 ```
 
-more: [run-time configuration](/configuration/runtime/)
+more: [run-time configuration](/configuration/runtime)
 
 
 ### Project repository

examples/stories/src/tutorial/parts/controls.mdx

@@ -10,7 +10,7 @@ order: 4
 import { ControlTypes } from '@component-controls/core';
 import { Story, Playground, PropsTable } from '@component-controls/blocks';
 
-The [controls api](/tutorial/structure/controls-api/) comes with a selection of pre-defined controls that can be used to create interactive examples of your components.
+The [controls api](/tutorial/structure/controls-api) comes with a selection of pre-defined controls that can be used to create interactive examples of your components.
 
 ## ControlTypes.TEXT
 

examples/stories/src/tutorial/parts/document.mdx

@@ -24,7 +24,7 @@ import decoratorsImg from './media/doc-decorators.jpg';
 
 ## Overview
 
-Document is a single file containing documentation in [mdx](/tutorial/mdx-stories/) or [esm](/tutorial/esmodules-stories/) format.
+Document is a single file containing documentation in [mdx](/tutorial/mdx-stories) or [esm](/tutorial/esmodules-stories) format.
 
 ## Properties
 
@@ -436,7 +436,7 @@ export default {
 export const textControls = ({ text }) => <div>{text}</div>;
 ```
 
-[Introduction to controls](/blogs/introduction-to-controls/)
+[Introduction to controls](/blogs/introduction-to-controls)
 
 <img alt="document controls" title="document controls" src={controlsImg} />
 

examples/stories/src/tutorial/parts/story.mdx

@@ -19,7 +19,7 @@ import smartcontrolsImg from './media/story-smartcontrols.jpg';
 
 ## Overview
 
-Story is a (relatively) small code example that demonstrates a specific component. You can write stories in [mdx](/tutorial/mdx-stories/) or [esm](/tutorial/esmodules-stories/) format.
+Story is a (relatively) small code example that demonstrates a specific component. You can write stories in [mdx](/tutorial/mdx-stories) or [esm](/tutorial/esmodules-stories) format.
 
 For MDX stories, the properties are asigned to the `<Story />` component:
 
@@ -326,7 +326,7 @@ export const textControls = ({ text }) => <div>{text}</div>;
 textControls.controls: { text: 'some text' },
 ```
 
-[Introduction to controls](/blogs/introduction-to-controls/)
+[Introduction to controls](/blogs/introduction-to-controls)
 
 <img alt="story controls" title="story controls" src={controlsImg} />
 

examples/stories/src/tutorial/write-documentation/mdx-documentation.mdx

@@ -33,7 +33,7 @@ order: 0
 ---
 ```
 
-[Check all Document fields](/tutorial/structure/document/)
+[Check all Document fields](/tutorial/structure/document)
 
 ## Import React components
 

examples/stories/src/tutorial/write-documentation/mdx-stories.mdx

@@ -12,7 +12,7 @@ import { customStory } from '../../stories/external/external-story-props';
 
 ## Overview
 
-You can create interactive component examples (aka stories) similar to [ESM](/tutorial/esmodules-stories/) in [MDX](/tutorial/mdx-documentation/)
+You can create interactive component examples (aka stories) similar to [ESM](/tutorial/esmodules-stories) in [MDX](/tutorial/mdx-documentation)
 
 To do so, you need to import some components from **'@component-controls/blocks'** and use them inside your MDX files
 
@@ -99,61 +99,61 @@ Below is a list of the most commonly used components (aka blocks) when writing M
 
 Component to display a live playground of component examples. Has custom actions for zooming, switching direction, reviewing story source and configuration.
 
-[Playground](/api/blocks-playground--overview/)
+[Playground](/api/blocks-playground--overview)
 
 ### Story
 
 Block component to render story function with decorators.
 
-[Story](/api/blocks-story--overview/)
+[Story](/api/blocks-story--overview)
 
 ### StoryConfig
 
 Displays the configuration object of a story.
 
-[StoryConfig](/api/blocks-storyconfig--overview/)
+[StoryConfig](/api/blocks-storyconfig--overview)
 
 
 ### StorySource
 
 Displays source code of a story. If controls are used, all story arguments will be highlighted. Additional commands are made available if the repository data of the story is available.
 
-[StorySource](/api/blocks-storysource--overview/)
+[StorySource](/api/blocks-storysource--overview)
 
 ### Subtitle
 
 Displays a subtitle as assigned to the story.subtitle field
 
-[Subtitle](/api/blocks-subtitle--overview/)
+[Subtitle](/api/blocks-subtitle--overview)
 
 ## Component-related
 
 ### PropsTable
 
 Displays the component's properties as well as configurable controls to interact with the component.
 
-[PropsTable](/api/blocks-propstable--overview/)
+[PropsTable](/api/blocks-propstable--overview)
 
 
 ### ComponentSource
 
 Displays import statement for a component as well as the component file source code Optionally also displays some repository information from the component's package.json
 
-[ComponentSource](/api/blocks-componentsource--overview/)
+[ComponentSource](/api/blocks-componentsource--overview)
 
 
 ### Description
 
 Description component with markdown. The 'of' property can specify which component's description to display.
 
-[Description](/api/blocks-description--overview/)
+[Description](/api/blocks-description--overview)
 
 
 ### ComponentDeps
 
 Displays external dependencies for a component
 
-[ComponentDeps](/api/blocks-componentdeps--overview/)
+[ComponentDeps](/api/blocks-componentdeps--overview)
 
 
 ## Document-related
@@ -162,12 +162,12 @@ Displays external dependencies for a component
 
 Displays multiple stories in ther own [Playground](#playground) components.
 
-[Stories](/api/blocks-stories--overview/)
+[Stories](/api/blocks-stories--overview)
 
 
 ### TagsList
 
 Displays a row of tags assigned to the current document, with links to their pages
 
-[TagsList](/api/blocks-tagslist--overview/)
+[TagsList](/api/blocks-tagslist--overview)
 

ui/app/src/Header/Header.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { FC, useContext, useMemo } from 'react';
 import { jsx, Box } from 'theme-ui';
-import { DocType } from '@component-controls/core';
+import { DocType, getDocTypePath } from '@component-controls/core';
 import { ActionBar, ActionItems } from '@component-controls/components';
 
 import {
@@ -46,7 +46,7 @@ export const Header: FC<HeaderProps> = ({ toolbar = {} }) => {
             .map(({ page }) => ({
               id: page.label?.toLowerCase(),
               'aria-label': `go to page ${page.label}`,
-              href: `/${page.basePath}`,
+              href: getDocTypePath(page),
               node: page.label,
             })),
         ]