fix: index path for category type pages

core/core/src/document-utils.ts

@@ -102,6 +102,11 @@ export const getDocTypePath = (
   return basePath ? `${siteRoot}${removeTrailingSlash(basePath)}` : undefined;
 };
 
+export const getCategoryPath = (store: Store, category: string): string => {
+  const { siteRoot = '/' } = (store?.config as BuildConfiguration) || {};
+  return `${siteRoot}${removeTrailingSlash(category.toLowerCase())}`;
+};
+
 export const getHomePath = (store: Store): string => {
   const { siteRoot = '/' } = (store?.config as BuildConfiguration) || {};
   return siteRoot.length > 1 ? removeTrailingSlash(siteRoot) : siteRoot;

core/routes/src/routes/docs-index-pages.ts

@@ -3,19 +3,21 @@ import {
   defDocType,
   DocType,
   getDocTypePath,
+  getCategoryPath,
   removeTrailingSlash,
   ensureStartingSlash,
 } from '@component-controls/core';
-
+import { getUniquesByField } from './docs-pages';
 export interface DocHomePagesPath {
   type: DocType;
   path: string;
   docId?: string;
   storyId?: string;
   lastModified?: string;
 }
+
 export const getHomePages = (store?: Store): DocHomePagesPath[] => {
-  const { pages = {} } = store?.config || {};
+  const { pages = {}, categories = [] } = store?.config || {};
   if (pages && store) {
     const docs = Object.keys(store.docs);
     const paths: DocHomePagesPath[] = Object.keys(pages)
@@ -54,7 +56,21 @@ export const getHomePages = (store?: Store): DocHomePagesPath[] => {
         };
       })
       .filter(({ path }) => path);
-    return paths;
+    const categoryPaths: DocHomePagesPath[] = categories
+      .map(category => {
+        const uniques = getUniquesByField(store, category);
+        return {
+          lastModified: undefined,
+          type: category,
+          docId: undefined,
+          storyId: undefined,
+          path: Object.keys(uniques).length
+            ? getCategoryPath(store, category)
+            : '',
+        };
+      })
+      .filter(({ path }) => path);
+    return [...paths, ...categoryPaths];
   }
   return [];
 };

core/routes/src/routes/docs-pages.ts

@@ -27,7 +27,7 @@ const getPageList = (store: Store, type: DocType = defDocType): Pages => {
   return [];
 };
 
-const getUniquesByField = (
+export const getUniquesByField = (
   store: Store,
   field: string,
 ): { [key: string]: number } => {

core/routes/test/category-routes.test.ts

@@ -0,0 +1,65 @@
+import {
+  getDefaultStore,
+  defaultBuildConfig,
+  defaultRunConfig,
+  deepMerge,
+  Store,
+} from '@component-controls/core';
+import { getHomePages } from '../src/routes';
+
+describe('category-routes', () => {
+  const store: Store = {
+    ...getDefaultStore(),
+    ...{
+      config: deepMerge(defaultBuildConfig, defaultRunConfig),
+      docs: {
+        'doc/doc-1': {
+          title: 'doc/doc-1',
+          tags: ['tag-1'],
+          stories: ['story-1', 'story-2'],
+        },
+        'doc/doc-2': {
+          title: 'doc/doc-2',
+          tags: ['tag-1', 'tag-2'],
+          stories: ['story-3', 'story-4'],
+        },
+      },
+      stories: {},
+    },
+  };
+  it('tags pages', () => {
+    const paths = getHomePages(store);
+
+    expect(paths[0]).toMatchObject({
+      docId: 'doc/doc-1',
+      path: '/docs',
+      storyId: 'story-1',
+      type: 'story',
+    });
+    expect(paths[1]).toMatchObject({
+      docId: undefined,
+      path: '/tags',
+      storyId: undefined,
+      type: 'tags',
+    });
+  });
+  it('tags pages with siteRoot', () => {
+    const paths = getHomePages({
+      ...store,
+      config: { ...store.config, siteRoot: '/root/' },
+    });
+
+    expect(paths[0]).toMatchObject({
+      docId: 'doc/doc-1',
+      path: '/root/docs',
+      storyId: 'story-1',
+      type: 'story',
+    });
+    expect(paths[1]).toMatchObject({
+      docId: undefined,
+      path: '/root/tags',
+      storyId: undefined,
+      type: 'tags',
+    });
+  });
+});

ui/app/src/CategoryPage/CategoryPage.tsx

@@ -1,12 +1,12 @@
 /** @jsx jsx */
 import { FC } from 'react';
 import { jsx, Box, Themed } from 'theme-ui';
-import { DocType } from '@component-controls/core';
+import { DocType, getCategoryPath } from '@component-controls/core';
 import { Link } from '@component-controls/components';
 import {
   useDocument,
   useDocsByCategory,
-  useConfig,
+  useStore,
 } from '@component-controls/store';
 import { PageContainer } from '../PageContainer';
 import { DocumentsList } from '../DocumentsList';
@@ -16,7 +16,8 @@ export interface CategoryPageProps {
   category: any;
 }
 export const CategoryPage: FC<CategoryPageProps> = ({ type, category }) => {
-  const config = useConfig();
+  const store = useStore();
+  const { config } = store;
   const pageConfig = config.pages?.[type] || {};
   const pages = useDocsByCategory(type, category);
   const customPage = useDocument(category);
@@ -31,7 +32,7 @@ export const CategoryPage: FC<CategoryPageProps> = ({ type, category }) => {
       <Box variant="categorypage.titlecontainer">
         <Themed.h1>{category}</Themed.h1>
         <Link
-          href={`/${pageConfig.basePath}`}
+          href={`${getCategoryPath(store, type)}`}
         >{`All ${pageConfig.label}`}</Link>
       </Box>
       {Page && (