From 125f67729040d63a8897d393e111f92ec7228cd8 Mon Sep 17 00:00:00 2001 From: atanasster Date: Sun, 14 Jun 2020 17:15:10 -0400 Subject: [PATCH] feat: categories custom pages- authors, tags --- core/specification/src/configuration.ts | 7 ++- core/store/src/Store/Store.ts | 1 + core/webpack-compile/src/utilities.ts | 1 + examples/gatsby/.config/buildtime.js | 1 + .../stories/src/authors/atanas_stoyanov.mdx | 17 ++++++ .../gatsby-theme-stories/src/gatsby-node.ts | 52 ++++++++++--------- .../src/templates/CategoryPage.tsx | 13 ++--- ui/app/src/CategoryPage/CategoryPage.tsx | 9 ++-- .../src/Markdown/MarkdownComponents.tsx | 28 ++++++---- 9 files changed, 83 insertions(+), 46 deletions(-) create mode 100644 examples/stories/src/authors/atanas_stoyanov.mdx diff --git a/core/specification/src/configuration.ts b/core/specification/src/configuration.ts index b76f08050..20ff091ff 100644 --- a/core/specification/src/configuration.ts +++ b/core/specification/src/configuration.ts @@ -53,8 +53,12 @@ export interface BuildConfiguration { /** * base url path for API documentation pages. Default is "docs/" */ - pages?: Record>; + pages: Record>; + /** + * 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/', diff --git a/core/store/src/Store/Store.ts b/core/store/src/Store/Store.ts index b7f581195..a745d0813 100644 --- a/core/store/src/Store/Store.ts +++ b/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 */ diff --git a/core/webpack-compile/src/utilities.ts b/core/webpack-compile/src/utilities.ts index bccd4b7e2..64318f6f7 100644 --- a/core/webpack-compile/src/utilities.ts +++ b/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: { diff --git a/examples/gatsby/.config/buildtime.js b/examples/gatsby/.config/buildtime.js index c944a2492..863dcada9 100644 --- a/examples/gatsby/.config/buildtime.js +++ b/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)', diff --git a/examples/stories/src/authors/atanas_stoyanov.mdx b/examples/stories/src/authors/atanas_stoyanov.mdx new file mode 100644 index 000000000..8867b61b9 --- /dev/null +++ b/examples/stories/src/authors/atanas_stoyanov.mdx @@ -0,0 +1,17 @@ +--- +title: atanasster +type: author +--- +import { Title, Subtitle, ExternalLink } from '@component-controls/components'; + + + + + Atanas Stoyanov + prior software development products +
    +
  • 1990+: Memproof, one of the best heap memory and resource 'leaks' debugger.
    • +
  • 1990-2000: AQtime, performace and coverage profiling, won multiple awards..
    • +
  • 2000+: TestComplete, functional UI tests automation, won multiple awards.
    • +
+ diff --git a/integrations/gatsby-theme-stories/src/gatsby-node.ts b/integrations/gatsby-theme-stories/src/gatsby-node.ts index 200d8370d..56bca5370 100644 --- a/integrations/gatsby-theme-stories/src/gatsby-node.ts +++ b/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); diff --git a/integrations/gatsby-theme-stories/src/templates/CategoryPage.tsx b/integrations/gatsby-theme-stories/src/templates/CategoryPage.tsx index e78cf137b..d1b4189f5 100644 --- a/integrations/gatsby-theme-stories/src/templates/CategoryPage.tsx +++ b/integrations/gatsby-theme-stories/src/templates/CategoryPage.tsx @@ -13,13 +13,10 @@ interface CategoryPageProps { const CategoryPageTemplate: FC = ({ pathContext: { type, category }, -}) => { - console.log('HERE'); - return ( - - - - ); -}; +}) => ( + + + +); export default CategoryPageTemplate; diff --git a/ui/app/src/CategoryPage/CategoryPage.tsx b/ui/app/src/CategoryPage/CategoryPage.tsx index f69afeb96..dcd7f20ad 100644 --- a/ui/app/src/CategoryPage/CategoryPage.tsx +++ b/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 = ({ 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 ( - {pageConfig.label} + {category} {`All ${pageConfig.label}`} - {`filtered by "${category}"`} + {Page && } diff --git a/ui/components/src/Markdown/MarkdownComponents.tsx b/ui/components/src/Markdown/MarkdownComponents.tsx index 1a8d0ad12..51f408dfc 100644 --- a/ui/components/src/Markdown/MarkdownComponents.tsx +++ b/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 {children}; }, - Box: props => { - console.log(props); - return ; - }, - Button: props =>