docs(website): add uid-library docs (#885)

* docs(website): add uid-library docs

* fix: gatsby file import tidy up and simplify page slugs

* docs(website): add headings back to uid docs

Co-authored-by: Si Taggart <[email protected]>

Author: TheSisb

packages/paste-website/gatsby-config.js

@@ -31,8 +31,10 @@ const gatsbyConfig = {
     {
       resolve: 'gatsby-source-filesystem',
       options: {
+        // grab stuff in packages for indexing like changelogs, package.json, design token compiled files
         name: 'packages',
         path: `${__dirname}/../../packages/`,
+        // but ignore all the build artifacts that we don't need so we don't fill graphql with a bunch of random stuff
         ignore: [
           '**/.*',
           '**/.cache/**',
@@ -42,6 +44,12 @@ const gatsbyConfig = {
           '**/__tests__/**',
           '**/paste-website/**/*',
           '**/README.md',
+          '**/*.js',
+          '**/*.ts',
+          '**/*.tsx',
+          '**/*.d.ts.map',
+          '**/*.build.json',
+          '**/tsconfig.json',
         ],
       },
     },
@@ -57,28 +65,6 @@ const gatsbyConfig = {
       options: {
         name: 'pages',
         path: `${__dirname}/src/pages`,
-        ignore: ['**/components/**/*', '**/primitives/**/*', '**/layout/**/*'],
-      },
-    },
-    {
-      resolve: 'gatsby-source-filesystem',
-      options: {
-        name: 'components',
-        path: `${__dirname}/src/pages/components`,
-      },
-    },
-    {
-      resolve: 'gatsby-source-filesystem',
-      options: {
-        name: 'primitives',
-        path: `${__dirname}/src/pages/primitives`,
-      },
-    },
-    {
-      resolve: 'gatsby-source-filesystem',
-      options: {
-        name: 'layout',
-        path: `${__dirname}/src/pages/layout`,
       },
     },
     {
@@ -141,6 +127,10 @@ const gatsbyConfig = {
             return 'PasteLayout';
           }
 
+          if (node.relativePath.startsWith('paste-libraries') && node.relativePath.endsWith('package.json')) {
+            return 'PasteLibraries';
+          }
+
           if (node.relativePath.startsWith('paste-theme') && node.relativePath.endsWith('package.json')) {
             return 'PasteThemePackage';
           }

packages/paste-website/src/components/shortcodes/component-header/index.tsx

@@ -18,6 +18,8 @@ const getCategoryNameFromRoute = (categoryRoute: string): string => {
       return 'Layout';
     case SidebarCategoryRoutes.TOKENS:
       return 'Tokens';
+    case SidebarCategoryRoutes.LIBRARIES:
+      return 'Libraries';
     default:
       return 'Layout';
   }

packages/paste-website/src/components/site-wrapper/sidebar/SidebarAnchor.tsx

@@ -8,7 +8,7 @@ interface SidebarAnchorProps {
   to: string;
 }
 
-const StyledSidbarAnchor = styled(Link)<SidebarAnchorProps>`
+const StyledSidebarAnchor = styled(Link)<SidebarAnchorProps>`
   position: relative;
   display: block;
   width: 100%;
@@ -39,9 +39,9 @@ const StyledSidbarAnchor = styled(Link)<SidebarAnchorProps>`
 `;
 
 const SidebarAnchor: React.FC<SidebarAnchorProps> = ({children, nested, to}) => (
-  <StyledSidbarAnchor nested={nested} to={to}>
+  <StyledSidebarAnchor nested={nested} to={to}>
     {children}
-  </StyledSidbarAnchor>
+  </StyledSidebarAnchor>
 );
 
 export {SidebarAnchor};

packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.tsx

@@ -125,6 +125,10 @@ const SidebarNavigation: React.FC<SidebarNavigationProps> = () => {
     visible: getCurrentPathname().startsWith(SidebarCategoryRoutes.CONTENT),
   });
 
+  const librariesDisclosure = useDisclosurePrimitiveState({
+    visible: getCurrentPathname().startsWith(SidebarCategoryRoutes.LIBRARIES),
+  });
+
   const tokensDisclosure = useDisclosurePrimitiveState({
     visible: getCurrentPathname().startsWith(SidebarCategoryRoutes.TOKENS),
   });
@@ -349,7 +353,23 @@ const SidebarNavigation: React.FC<SidebarNavigationProps> = () => {
           </DisclosurePrimitiveContent>
         </SidebarItem>
         <SidebarItem>
-          <SidebarAnchor to="/libraries">Libraries</SidebarAnchor>
+          <DisclosurePrimitive as={SidebarDisclosureButton} {...librariesDisclosure} data-cy="libraries-button">
+            Libraries
+          </DisclosurePrimitive>
+          <DisclosurePrimitiveContent {...librariesDisclosure}>
+            <SidebarNestedList>
+              <SidebarNestedItem>
+                <SidebarAnchor nested to={SidebarCategoryRoutes.LIBRARIES}>
+                  Overview
+                </SidebarAnchor>
+              </SidebarNestedItem>
+              <SidebarNestedItem>
+                <SidebarAnchor nested to={`${SidebarCategoryRoutes.LIBRARIES}/uid-library`}>
+                  UID
+                </SidebarAnchor>
+              </SidebarNestedItem>
+            </SidebarNestedList>
+          </DisclosurePrimitiveContent>
         </SidebarItem>
         <SidebarItem>
           <SidebarAnchor to="/roadmap">Roadmap</SidebarAnchor>

packages/paste-website/src/constants.ts

@@ -15,6 +15,7 @@ export const SidebarCategoryRoutes = {
   LAYOUT: '/layout',
   ICON_SYSTEM: '/icons',
   CONTENT: '/content',
+  LIBRARIES: '/libraries',
   GETTING_STARTED: '/getting-started',
   TOKENS: '/tokens',
 };

packages/paste-website/src/pages/components/alert/index.mdx

@@ -34,7 +34,7 @@ export const pageQuery = graphql`
         }
       }
     }
-    mdx(fields: {slug: {eq: "/alert/"}}) {
+    mdx(fields: {slug: {eq: "/components/alert/"}}) {
       fileAbsolutePath
       frontmatter {
         slug

packages/paste-website/src/pages/components/anchor/index.mdx

@@ -33,7 +33,7 @@ export const pageQuery = graphql`
         }
       }
     }
-    mdx(fields: {slug: {eq: "/anchor/"}}) {
+    mdx(fields: {slug: {eq: "/components/anchor/"}}) {
       fileAbsolutePath
       frontmatter {
         slug

packages/paste-website/src/pages/components/avatar/index.mdx

@@ -27,7 +27,7 @@ export const pageQuery = graphql`
         }
       }
     }
-    mdx(fields: {slug: {eq: "/avatar/"}}) {
+    mdx(fields: {slug: {eq: "/components/avatar/"}}) {
       fileAbsolutePath
       frontmatter {
         slug

packages/paste-website/src/pages/components/button/index.mdx

@@ -26,7 +26,7 @@ export const pageQuery = graphql`
         }
       }
     }
-    mdx(fields: {slug: {eq: "/button/"}}) {
+    mdx(fields: {slug: {eq: "/components/button/"}}) {
       fileAbsolutePath
       frontmatter {
         slug

packages/paste-website/src/pages/components/card/index.mdx

@@ -62,7 +62,7 @@ export const pageQuery = graphql`
         }
       }
     }
-    mdx(fields: {slug: {eq: "/card/"}}) {
+    mdx(fields: {slug: {eq: "/components/card/"}}) {
       fileAbsolutePath
       frontmatter {
         slug