feat: categories custom pages- authors, tags

core/specification/src/configuration.ts

@@ -53,8 +53,12 @@ export interface BuildConfiguration {
   /**
    * base url path for API documentation pages. Default is "docs/"
    */
-  pages?: Record<PageType, Pick<PageConfiguration, 'basePath'>>;
+  pages: Record<PageType, Pick<PageConfiguration, 'basePath'>>;
 
+  /**
+   * page types that are considred as categories fields as well
+   */
+  categories: PageType[];
   /**
    * custom webpack fonfigurations setup. One or the other will be used
    */
@@ -161,6 +165,7 @@ export const defaultRunConfig: RunConfiguration = {
 };
 
 export const defaultBuildConfig: BuildConfiguration = {
+  categories: ['author', 'tags'],
   pages: {
     story: {
       basePath: 'docs/',

core/store/src/Store/Store.ts

@@ -170,6 +170,7 @@ export class Store implements StoryStore {
     const store = this.getStore();
     return store ? store.docs[name] : undefined;
   };
+
   /**
    * returns all the documentation files
    */

core/webpack-compile/src/utilities.ts

@@ -52,6 +52,7 @@ const createConfig = (options: CompileRunProps): webpack.Configuration => {
       path: path.resolve(__dirname, '../dist'),
       filename: 'bundle.js',
       libraryTarget: 'umd',
+      globalObject: 'this',
     },
     resolve: {
       alias: {

examples/gatsby/.config/buildtime.js

@@ -3,6 +3,7 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
 module.exports = {
   stories: [
     '../../stories/src/blogs/*.mdx',
+    '../../stories/src/authors/*.mdx',
     '../../stories/src/stories/*.stories.(js|jsx|tsx|mdx)',
     '../src/stories/*.stories.(js|jsx|tsx|mdx)',
     '../../../ui/app-components/src/**/*.stories.(js|jsx|tsx|mdx)',

examples/stories/src/authors/atanas_stoyanov.mdx

@@ -0,0 +1,17 @@
+---
+title: atanasster
+type: author
+---
+import { Title, Subtitle, ExternalLink } from '@component-controls/components';
+
+
+<flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
+  <avatar src="https://pbs.twimg.com/profile_images/1195701448928968704/HpTyY7fB_400x400.jpg"/>
+  <Title>Atanas Stoyanov</Title>
+  <Subtitle>prior software development products</Subtitle>
+  <ul>
+    <li>1990+: <ExternalLink href="http://www.scip.be/index.php?Page=ArticlesDelphi07&Lang=EN">Memproof</ExternalLink>, one of the best heap memory and resource 'leaks' debugger.</li>
+    <li>1990-2000: <ExternalLink href="https://smartbear.com/product/aqtime-pro/overview/">AQtime</ExternalLink>, performace and coverage profiling, won multiple awards..</li>
+    <li>2000+: <ExternalLink href="https://smartbear.com/product/testcomplete/overview/">TestComplete</ExternalLink>, functional UI tests automation, won multiple awards.</li>
+  </ul>
+</flex>  

integrations/gatsby-theme-stories/src/gatsby-node.ts

@@ -41,35 +41,39 @@ exports.createPages = async (
       ? await watch(config)
       : await compile(config);
   if (store) {
-    const { pages } = store.buildConfig || {};
+    const { pages, categories = [] } = store.buildConfig || {};
     if (pages) {
       Object.keys(pages).forEach(type => {
-        const page = pages[type as PageType];
-        const pageType = type as PageType;
-        const docs = store.getDocs(pageType);
-        docs.forEach(doc => {
-          createPage({
-            path: getDocPath(pageType, doc, store.buildConfig),
-            component: pageTemplates[pageType] || pageTemplates['story'],
-            context: {
-              type: pageType,
-              doc: doc.title,
-            },
-          });
-        });
-        if (docs.length) {
-          const docsPage = docs.find(doc => doc?.route === `/${page.basePath}`);
-          createPage({
-            path: `/${page.basePath}`,
-            component: listTemplates[pageType] || listTemplates['story'],
-            context: {
-              type: pageType,
-              doc: docsPage?.title,
-            },
+        if (!categories.includes(type as PageType)) {
+          const page = pages[type as PageType];
+          const pageType = type as PageType;
+          const docs = store.getDocs(pageType);
+          docs.forEach(doc => {
+            createPage({
+              path: getDocPath(pageType, doc, store.buildConfig),
+              component: pageTemplates[pageType] || pageTemplates['story'],
+              context: {
+                type: pageType,
+                doc: doc.title,
+              },
+            });
           });
+          if (docs.length) {
+            const docsPage = docs.find(
+              doc => doc?.route === `/${page.basePath}`,
+            );
+            createPage({
+              path: `/${page.basePath}`,
+              component: listTemplates[pageType] || listTemplates['story'],
+              context: {
+                type: pageType,
+                doc: docsPage?.title,
+              },
+            });
+          }
         }
       });
-      ['author', 'tags'].forEach(catName => {
+      categories.forEach(catName => {
         const cats = store.getUniquesByField(catName);
         const catPage = pages[catName as PageType];
         const catKeys = Object.keys(cats);

integrations/gatsby-theme-stories/src/templates/CategoryPage.tsx

@@ -13,13 +13,10 @@ interface CategoryPageProps {
 
 const CategoryPageTemplate: FC<CategoryPageProps> = ({
   pathContext: { type, category },
-}) => {
-  console.log('HERE');
-  return (
-    <Layout>
-      <CategoryPage type={type} category={category} />
-    </Layout>
-  );
-};
+}) => (
+  <Layout>
+    <CategoryPage type={type} category={category} />
+  </Layout>
+);
 
 export default CategoryPageTemplate;

ui/app/src/CategoryPage/CategoryPage.tsx

@@ -2,7 +2,7 @@
 import { FC, useContext } from 'react';
 import { jsx, Box } from 'theme-ui';
 import { PageType } from '@component-controls/specification';
-import { Title, Subtitle } from '@component-controls/components';
+import { Title } from '@component-controls/components';
 import { Link } from '@component-controls/app-components';
 import { PageContainer, BlockContext } from '@component-controls/blocks';
 import { DocumentsList } from '../DocumentsList';
@@ -15,15 +15,18 @@ export const CategoryPage: FC<CategoryPageProps> = ({ type, category }) => {
   const { storeProvider } = useContext(BlockContext);
   const pageConfig = storeProvider?.config?.pages?.[type] || {};
   const pages = storeProvider.getPagesByCategory(type, category);
+  const customPage = storeProvider.getStoryDoc(category);
+  const Page =
+    customPage && customPage.type === type ? customPage.MDXPage : undefined;
   return (
     <PageContainer variant="categoryage.pagecontainer" id="content">
       <Box variant="categoryage.titlecontainer">
-        <Title>{pageConfig.label}</Title>
+        <Title>{category}</Title>
         <Link
           href={`/${pageConfig.basePath}`}
         >{`All ${pageConfig.label}`}</Link>
       </Box>
-      <Subtitle>{`filtered by "${category}"`}</Subtitle>
+      {Page && <Page />}
       <Box variant="categoryage.listcontainer">
         <DocumentsList pages={pages} />
       </Box>

ui/components/src/Markdown/MarkdownComponents.tsx

@@ -2,7 +2,16 @@
 /** @jsx jsx */
 import { ComponentType } from 'react';
 import { jsx } from 'theme-ui';
-import { Label, Flex, Box, Heading, Button, Card } from 'theme-ui';
+import {
+  Label,
+  Flex,
+  Box,
+  Heading,
+  Button,
+  Card,
+  Image,
+  Avatar,
+} from 'theme-ui';
 import { Language } from 'prism-react-renderer';
 import { SyntaxHighlighter } from '../SyntaxHighlighter';
 import { Source } from '../Source';
@@ -53,13 +62,12 @@ export const markdownComponents: MarkdownComponentType = {
     const language = mdxLanguageMap[mdxLanguage] || mdxLanguage;
     return <Source language={language}>{children}</Source>;
   },
-  Box: props => {
-    console.log(props);
-    return <Box {...props} />;
-  },
-  Button: props => <Button {...props} />,
-  Card: props => <Card {...props} />,
-  Flex: ({ children, ...props }) => <Flex {...props}>{children}</Flex>,
-  Heading: props => <Heading {...props} />,
-  Label: props => <Label {...props} />,
+  avatar: Avatar,
+  image: Image,
+  box: Box,
+  button: Button,
+  card: Card,
+  flex: Flex,
+  heading: Heading,
+  label: Label,
 };