feat: clean up, spacing, search

package.json

@@ -34,7 +34,7 @@
     "lodash.debounce": "^4.0.8",
     "mdi-react": "7.3.0",
     "micro-memoize": "^4.0.9",
-    "next": "^9.5.2-canary.4",
+    "next": "^9.5.2-canary.5",
     "next-fonts": "^1.4.0",
     "next-google-fonts": "^1.1.0",
     "next-mdx-remote": "^0.6.0",

src/common/constants.ts

@@ -1,7 +1,7 @@
 export const SIDEBAR_WIDTH = 208;
 export const TOC_WIDTH = 208;
 export const CONTENT_MAX_WIDTH = 1104;
-export const PAGE_WIDTH = 1216;
+export const PAGE_WIDTH = 1104;
 
 export const SHIKI_THEME = 'Material-Theme-Default';
 export const THEME_STORAGE_KEY = 'theme';

src/common/navigation.yaml

@@ -99,7 +99,9 @@ sections:
           - path: /blockstack-cli
           - path: /stacks-blockchain
           - path: /stacks-rpc-api
-          - path: /faqs
+          - external:
+              href: 'https://blockstack.zendesk.com/hc/en-us'
+              title: FAQs
           - path: /glossary
           - path: /deploy-tips
   - title: Ecosystem

src/common/routes/all-routes.json

@@ -1,114 +0,0 @@
-[
-  {
-    "title": "Authentication",
-    "routes": [
-      { "path": "browser/todo-list" },
-      { "path": "develop/connect/overview" },
-      { "path": "develop/profiles" }
-    ]
-  },
-  {
-    "title": "Data Storage",
-    "routes": [
-      { "path": "storage/overview" },
-      { "path": "develop/storage" },
-      { "path": "storage/authentication" },
-      { "path": "storage/write-to-read" }
-    ]
-  },
-  {
-    "title": "Data Indexing",
-    "routes": [
-      { "path": "develop/radiks-intro" },
-      { "path": "develop/radiks-setup" },
-      { "path": "develop/radiks-models" },
-      { "path": "develop/radiks-collaborate" },
-      { "path": "develop/radiks-server-extras" }
-    ]
-  },
-  {
-    "title": "Smart Contracts",
-    "routes": [
-      { "path": "core/smart/overview" },
-      { "path": "core/smart/tutorial" },
-      { "path": "core/smart/tutorial-counter" },
-      { "path": "core/smart/tutorial-test" },
-      { "path": "develop/connect/use-with-clarity" },
-      { "path": "core/smart/principals" },
-      { "path": "core/smart/testnet-node" },
-      { "path": "core/smart/cli-wallet-quickstart" }
-    ]
-  },
-  {
-    "title": "Naming Services",
-    "routes": [
-      { "path": "core/naming/introduction" },
-      { "path": "core/naming/architecture" },
-      { "path": "core/naming/namespaces" },
-      { "path": "core/naming/comparison" },
-      { "path": "core/naming/tutorial_subdomains" },
-      { "path": "core/naming/search" },
-      { "path": "core/faq_technical" },
-      { "path": "core/naming/pickname" },
-      { "path": "core/naming/creationhowto" },
-      { "path": "core/naming/resolving" },
-      { "path": "core/naming/register" },
-      { "path": "core/naming/manage" },
-      { "path": "core/naming/subdomains" },
-      { "path": "core/naming/forks" }
-    ]
-  },
-  {
-    "title": "Data Portability (Preview)",
-    "routes": [{ "path": "develop/collections" }, { "path": "develop/collection-type" }]
-  },
-  {
-    "title": "Host a Storage Hub",
-    "routes": [
-      { "path": "storage/hub-operation" },
-      { "path": "storage/amazon-s3-deploy" },
-      { "path": "storage/digital-ocean-deploy" },
-      { "path": "storage/hello-hub-choice" },
-      { "path": "storage/gaia-admin" }
-    ]
-  },
-  {
-    "title": "Atlas",
-    "routes": [
-      { "path": "core/atlas/overview" },
-      { "path": "core/atlas/howitworks" },
-      { "path": "core/atlas/howtouse" }
-    ]
-  },
-  {
-    "title": "Blockstack and Stacks Tokens",
-    "routes": [
-      { "path": "org/overview" },
-      { "path": "faqs/allFAQS" },
-      { "path": "org/token" },
-      { "path": "org/whitepaper-blockchain" },
-      { "path": "org/wallet-intro" },
-      { "path": "org/wallet-install" },
-      { "path": "org/wallet-use" },
-      { "path": "org/wallet-troubleshoot" },
-      { "path": "org/tokenholders" }
-    ]
-  },
-  {
-    "title": "References",
-    "routes": [
-      { "path": "core/cmdLineRef" },
-      { "path": "core/smart/clarityRef" },
-      { "path": "core/smart/rpc-api" },
-      { "path": "common/javascript_ref" },
-      { "path": "common/android_ref" },
-      { "path": "common/ios_ref" },
-      { "path": "common/core_ref" },
-      { "path": "core/wire-format" },
-      { "path": "storage/config-schema" },
-      { "path": "org/secureref" },
-      { "path": "develop/overview_auth" },
-      { "path": "org/terms" }
-    ]
-  }
-]

src/common/routes/get-routes.js

@@ -31,14 +31,16 @@ const getFlatMap = navigation => {
         let sectionPages = [];
         if (page.sections) {
           sectionPages = page.sections.flatMap(_section =>
-            _section.pages.flatMap(sectionPage => `${page.path}${sectionPage.path}`)
+            _section.pages.flatMap(
+              sectionPage => sectionPage && sectionPage.path && `${page.path}${sectionPage.path}`
+            )
           );
         }
         const pages = page.pages.flatMap(_page => {
           if (_page.pages) {
             return _page.pages.flatMap(p => `${page.path}${_page.path}${p.path}`);
           } else {
-            return `${page.path}${_page.path}`;
+            return _page.path && `${page.path}${_page.path}`;
           }
         });
         return [...pages, ...sectionPages];
@@ -49,7 +51,7 @@ const getFlatMap = navigation => {
   );
 };
 
-const allRoutes = getFlatMap(navigation);
+const allRoutes = getFlatMap(navigation).filter(route => route);
 
 const getHeadings = mdContent => {
   const regex = /(#+)(.*)/gm;

src/common/utils/index.ts

@@ -72,3 +72,11 @@ export const getTitle = ({ title, headings }): string => title || getTitleFromHe
 
 export const transition = (timing = '0.2s', properties = 'all') =>
   `${properties} ${timing} cubic-bezier(0.23, 1, 0.32, 1)`;
+
+export const getCategory = (pathname: string) => {
+  const arr = pathname.split('/');
+  if (arr.length > 1) {
+    return arr[1];
+  }
+  return undefined;
+};

src/components/clarity-ref.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { MDXComponents } from '@components/mdx/mdx-components';
 import { TableOfContents } from '@components/toc';
-import { hydrate } from '@common/data/hydrate-mdx';
+import hydrate from 'next-mdx-remote/hydrate';
 import { space } from '@blockstack/ui';
 
 export const ClarityKeywordReference = ({ content, headings }) => {

src/components/color-modes/styles.tsx

@@ -6,12 +6,21 @@ export const ColorModes = createGlobalStyle`
     ${generateCssVariables('light')};
     --colors-highlight-line-bg: rgba(255,255,255,0.08);
   }
+  
+  * {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 
   @media (prefers-color-scheme: dark) {
     :root {
       ${generateCssVariables('dark')};
       --colors-highlight-line-bg: rgba(255,255,255,0.04);
     }
+  * {
+      -webkit-font-smoothing: subpixel-antialiased;
+      -moz-osx-font-smoothing: auto;
+    }
   }
 
   @media (prefers-color-scheme: light) {
@@ -19,6 +28,10 @@ export const ColorModes = createGlobalStyle`
       ${generateCssVariables('light')};
       --colors-highlight-line-bg: rgba(255,255,255,0.08);
     }
+    * {
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
   }
 
   html, body, #__next {
@@ -28,10 +41,18 @@ export const ColorModes = createGlobalStyle`
     &.light {
       ${generateCssVariables('light')};
       --colors-highlight-line-bg: rgba(255,255,255,0.08);
+    * {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
     }
     &.dark {
       ${generateCssVariables('dark')};
       --colors-highlight-line-bg: rgba(255,255,255,0.04);
+      * {
+        -webkit-font-smoothing: subpixel-antialiased;
+        -moz-osx-font-smoothing: auto;
+      }
     }
   }
 

src/components/custom-blocks/page-reference.tsx

@@ -59,7 +59,7 @@ const InlineCard = ({ page }) => {
   return (
     <Flex
       border={border()}
-      flexDirection={['column', 'column', 'row']}
+      flexDirection={['column', 'row', 'row', 'row']}
       p={space('base-loose')}
       borderRadius="12px"
       align="center"
@@ -79,13 +79,13 @@ const InlineCard = ({ page }) => {
       </Box>
       <Flex
         flexDirection="column"
-        ml={space(['none', 'none', 'base'])}
-        mt={space(['base', 'base', 'none'])}
-        textAlign={['center', 'center', 'left']}
+        ml={space(['none', 'base', 'base', 'base'])}
+        mt={space(['base', 'none', 'none', 'none'])}
+        textAlign={['center', 'left', 'left', 'left']}
       >
         <Flex align="baseline">
           <Title
-            width={['100%', '100%', 'unset']}
+            width={['100%', 'unset', 'unset', 'unset']}
             color={hover ? color('accent') : color('text-title')}
             mb={space('extra-tight')}
           >
@@ -93,11 +93,11 @@ const InlineCard = ({ page }) => {
           </Title>
           {page.tags?.length ? (
             <Flex
-              position={['absolute', 'absolute', 'static']}
+              position={['absolute', 'static', 'static', 'static']}
               top={space('base-loose')}
               right={space('base-loose')}
             >
-              {page.tags.map(tag => (
+              {page.tags.map((tag, key) => (
                 <Flex
                   ml={space('tight')}
                   borderRadius="18px"
@@ -110,6 +110,7 @@ const InlineCard = ({ page }) => {
                   textTransform="capitalize"
                   color={color('invert')}
                   transition={transition()}
+                  key={key}
                 >
                   {tag}
                 </Flex>

src/components/feedback.tsx

@@ -11,11 +11,13 @@ import {
   SlideFade,
 } from '@blockstack/ui';
 import { Text } from '@components/typography';
-import { MDXComponents, Link } from '@components/mdx';
+import { Link } from '@components/mdx';
 import { SadIcon, NeutralIcon, HappyIcon } from '@components/icons/feedback';
 import { useTouchable } from '@common/hooks/use-touchable';
 import { border } from '@common/utils';
 import { useRouter } from 'next/router';
+import { getHeadingStyles } from '@components/mdx/typography';
+import { css } from '@styled-system/css';
 
 const Icon: React.FC<BoxProps & { icon: React.FC<any> }> = ({ icon: IconComponent, ...props }) => {
   const { bind, hover, active } = useTouchable();
@@ -24,11 +26,11 @@ const Icon: React.FC<BoxProps & { icon: React.FC<any> }> = ({ icon: IconComponen
     <Box
       color={color('text-caption')}
       _hover={{ color: color('bg'), cursor: 'pointer' }}
-      size="42px"
+      size="28px"
       {...props}
       {...bind}
     >
-      <IconComponent bg={isHovered ? color('accent') : color('bg-light')} />
+      <IconComponent bg={isHovered ? color('accent') : color('bg-alt')} />
     </Box>
   );
 };
@@ -99,8 +101,14 @@ export const FeedbackSection: React.FC<BoxProps> = props => {
       mt={space('extra-loose')}
     >
       <Flex>
-        <Box position="relative">
-          <MDXComponents.h4>Was this page helpful?</MDXComponents.h4>
+        <Box mt={space('extra-loose')} position="relative">
+          <Text
+            css={css({
+              ...getHeadingStyles('h5'),
+            })}
+          >
+            Was this page helpful?
+          </Text>
           <Stack isInline spacing={space('base-loose')} mt={space('base-loose')}>
             <Icon onClick={() => handleShow()} icon={SadIcon} />
             <Icon onClick={() => handleShow()} icon={NeutralIcon} />

src/components/footer.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
+import { space } from '@blockstack/ui';
 import { Pagination } from '@components/pagination';
 import { Section, SectionWrapper } from '@components/home/common';
 import { FeedbackSection } from '@components/feedback';
 
 const Footer = ({ hidePagination, ...rest }: any) => {
   return (
-    <Section>
+    <Section px={space(['extra-loose', 'extra-loose', 'none', 'none'])}>
       <SectionWrapper>
         <Pagination />
         <FeedbackSection />

src/components/header.tsx

@@ -11,7 +11,7 @@ import {
   FlexProps,
   Fade,
 } from '@blockstack/ui';
-import { Link, Text } from '@components/typography';
+import { Link, LinkProps, Text } from '@components/typography';
 import MenuIcon from 'mdi-react/MenuIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
 import { useMobileMenuState } from '@common/hooks/use-mobile-menu';
@@ -23,6 +23,7 @@ import { PAGE_WIDTH } from '@common/constants';
 import { border, transition } from '@common/utils';
 import { getCapsizeStyles } from '@components/mdx/typography';
 import { useTouchable } from '@common/hooks/use-touchable';
+import { useRouter } from 'next/router';
 
 const MenuButton = ({ ...rest }: any) => {
   const { isOpen, handleOpen, handleClose } = useMobileMenuState();
@@ -50,31 +51,44 @@ const nav = [
     children: [
       {
         label: 'Documentation',
+        href: 'https://docs.blockstack.org/',
       },
       {
         label: 'GitHub',
+        href: 'https://github.com/blockstack',
       },
       {
         label: 'Papers',
+        href: 'https://www.blockstack.org/papers',
       },
       {
         label: 'Discord',
+        href: 'https://discord.com/invite/6PcCMU',
       },
     ],
   },
-  { label: 'Testnet' },
-  { label: 'Discover apps' },
+  { label: 'Testnet', href: 'https://www.blockstack.org/testnet' },
+  { label: 'Discover apps', href: 'https://app.co/' },
 ];
 
 export const HEADER_HEIGHT = 132;
 
-const HeaderTextItem: React.FC<BoxProps> = ({ children, ...rest }) => (
+const HeaderTextItem: React.FC<BoxProps & LinkProps> = ({ children, href, as, ...rest }) => (
   <Text
     color={color('invert')}
     css={css({
       ...getCapsizeStyles(16, 26),
       ...rest,
+      color: 'currentColor',
+      ':hover': {
+        cursor: 'pointer',
+        textDecoration: href ? 'underline' : 'none',
+        color: href ? color('accent') : 'currentColor',
+      },
     })}
+    as={as}
+    // @ts-ignore
+    href={href}
   >
     {children}
   </Text>
@@ -86,11 +100,12 @@ const NavItem: React.FC<FlexProps & { item: any }> = ({ item, ...props }) => {
   });
   return (
     <Flex justifyContent="center" position="relative" {...props} {...bind}>
-      <Link as="a">
-        <HeaderTextItem>{item.label}</HeaderTextItem>
-      </Link>
+      <HeaderTextItem as={item.href ? 'a' : 'span'} href={item.href}>
+        {item.label}
+      </HeaderTextItem>
+
       {item.children ? (
-        <Box ml={space('extra-tight')}>
+        <Box color={color('text-caption')} ml={space('extra-tight')}>
           <ChevronIcon direction="down" />
         </Box>
       ) : null}
@@ -125,6 +140,11 @@ const NavItem: React.FC<FlexProps & { item: any }> = ({ item, ...props }) => {
                     borderBottom={_key < item.children.length - 1 && border()}
                     px={space('base')}
                     py={space('base-loose')}
+                    as="a"
+                    display="block"
+                    // @ts-ignore
+                    href={child.href}
+                    target="_blank"
                   >
                     <HeaderTextItem color="currentColor">{child.label}</HeaderTextItem>
                   </Box>
@@ -157,41 +177,63 @@ const Navigation: React.FC<BoxProps> = props => {
   );
 };
 
+const LogoLink = () => {
+  const { hover, active, bind } = useTouchable();
+  const router = useRouter();
+  return (
+    <NextLink href="/" passHref>
+      <Link
+        as="a"
+        style={{
+          textDecoration: 'none',
+          pointerEvents: router.pathname === '/' ? 'none' : 'unset',
+        }}
+        {...bind}
+      >
+        <Flex as="span" align="center">
+          <Box
+            as="span"
+            // opacity={hover || active ? 0.75 : 1}
+            color={hover || active ? color('accent') : color('invert')}
+            mr={space('tight')}
+          >
+            <BlockstackIcon size="20px" />
+          </Box>
+          <Box as="span" transform="translateY(1px)">
+            <HeaderTextItem>Blockstack</HeaderTextItem>
+          </Box>
+        </Flex>
+      </Link>
+    </NextLink>
+  );
+};
+
 const Header = ({ hideSubBar, ...rest }: any) => {
   return (
     <>
       <HeaderWrapper>
-        <Flex
-          justifyContent="space-between"
-          align="center"
-          bg={color('bg')}
-          style={{
-            backdropFilter: 'blur(5px)',
-          }}
-          height="72px"
-          maxWidth={`${PAGE_WIDTH}px`}
-          mx="auto"
-          px={space(['extra-loose', 'extra-loose', 'base', 'base'])}
-          {...rest}
-        >
-          <NextLink href="/" passHref>
-            <Link as="a">
-              <Flex align="center">
-                <Box color={color('invert')} mr={space('tight')}>
-                  <BlockstackIcon size="20px" />
-                </Box>
-                <Box transform="translateY(1px)">
-                  <HeaderTextItem>Blockstack</HeaderTextItem>
-                </Box>
-              </Flex>
-            </Link>
-          </NextLink>
-          <Flex align="center">
-            <Navigation />
-            <ColorModeButton />
-            <MenuButton />
+        <Box mx="auto" px="extra-loose">
+          <Flex
+            justifyContent="space-between"
+            align="center"
+            bg={color('bg')}
+            style={{
+              backdropFilter: 'blur(5px)',
+            }}
+            height="72px"
+            maxWidth={`${PAGE_WIDTH}px`}
+            mx="auto"
+            color={color('text-title')}
+            {...rest}
+          >
+            <LogoLink />
+            <Flex align="center">
+              <Navigation />
+              <ColorModeButton />
+              <MenuButton />
+            </Flex>
           </Flex>
-        </Flex>
+        </Box>
       </HeaderWrapper>
     </>
   );

src/components/home/common.tsx

@@ -33,7 +33,6 @@ export const SectionWrapper: React.FC<BoxProps> = props => (
     width="100%"
     maxWidth={`${CONTENT_MAX_WIDTH}px`}
     overflow="hidden"
-    px={space('extra-loose')}
     pt={space('extra-loose')}
     {...props}
   />

src/components/layouts/base-layout.tsx

@@ -144,29 +144,31 @@ const BaseLayout: React.FC<{ isHome?: boolean }> = ({ children }) => {
     <Flex minHeight="100vh" flexDirection="column">
       <MobileMenu />
       <Header />
-      <Flex width="100%" flexGrow={1} maxWidth={`${PAGE_WIDTH}px`} mx="auto">
-        <SideNav display={['none', 'none', 'block']} />
-        <Flex
-          flexGrow={1}
-          maxWidth={[
-            '100%',
-            '100%',
-            `calc(100% - ${isHome ? 0 : SIDEBAR_WIDTH}px)`,
-            `calc(100% - ${isHome ? 0 : SIDEBAR_WIDTH}px)`,
-          ]}
-          flexDirection="column"
-        >
-          <Main mx="unset" width={'100%'}>
-            <Flex
-              flexDirection={['column', 'column', 'row', 'row']}
-              maxWidth="108ch"
-              mx="auto"
-              flexGrow={1}
-            >
-              {children}
-            </Flex>
-          </Main>
-          {isErrorPage ? null : <Footer justifySelf="flex-end" />}
+      <Flex flexGrow={1} width="100%" mx="auto" px={['0', '0', 'extra-loose', 'extra-loose']}>
+        <Flex width="100%" flexGrow={1} maxWidth={`${PAGE_WIDTH}px`} mx="auto">
+          <SideNav display={['none', 'none', 'block']} />
+          <Flex
+            flexGrow={1}
+            maxWidth={[
+              '100%',
+              '100%',
+              `calc(100% - ${isHome ? 0 : SIDEBAR_WIDTH}px)`,
+              `calc(100% - ${isHome ? 0 : SIDEBAR_WIDTH}px)`,
+            ]}
+            flexDirection="column"
+          >
+            <Main mx="unset" width={'100%'}>
+              <Flex
+                flexDirection={['column', 'column', 'row', 'row']}
+                maxWidth="108ch"
+                mx="auto"
+                flexGrow={1}
+              >
+                {children}
+              </Flex>
+            </Main>
+            {isErrorPage ? null : <Footer justifySelf="flex-end" />}
+          </Flex>
         </Flex>
       </Flex>
     </Flex>

src/components/layouts/markdown-wrapper.tsx

@@ -16,9 +16,8 @@ const PageTop = props => {
   const isHome = router.pathname === '/';
   return (
     <Box
-      pl={space('extra-loose')}
-      pr={['extra-loose', 'extra-loose', 'unset']}
       mb={['extra-loose', 'extra-loose', '64px']}
+      px={space(['extra-loose', 'extra-loose', 'none', 'none'])}
     >
       <Flex>
         <H1 mb="0 !important">{getTitle(props)}</H1>

src/components/mdx/components/heading.tsx

@@ -66,8 +66,8 @@ const Hashtag = () => (
     position="absolute"
     as="span"
     align="center"
-    size="1rem"
-    left="10px"
+    size="20px"
+    left={['12px', '12px', '-20px', '-20px']}
     color={color('text-caption')}
   >
     <HashtagIcon size="1rem" />

src/components/mdx/components/link.tsx

@@ -3,7 +3,7 @@ import NextLink from 'next/link';
 import React, { forwardRef, Ref } from 'react';
 
 export const SmartLink = ({ href, ...rest }: { href: string }) => {
-  const isExternal = href.includes('http') || href.includes('mailto');
+  const isExternal = !href || href?.includes('http') || href?.includes('mailto');
   const link = <Link href={href} {...rest} />;
 
   return isExternal ? (
@@ -21,7 +21,7 @@ export const Link = forwardRef(
     ref: Ref<HTMLDivElement>
   ) => (
     <Box
-      as="a"
+      as={props.href ? 'a' : 'span'}
       ref={ref}
       color="var(--colors-accent)"
       cursor="pointer"

src/components/mdx/components/typography.tsx

@@ -12,14 +12,7 @@ export const H6: React.FC<BoxProps> = props => <BaseHeading as="h6" {...props} /
 
 export const Br: React.FC<BoxProps> = props => <Box height="24px" {...props} />;
 export const Hr: React.FC<BoxProps> = props => (
-  <Box
-    as="hr"
-    borderTopWidth="1px"
-    borderColor={color('border')}
-    my={space('extra-loose')}
-    mx={space('extra-loose')}
-    {...props}
-  />
+  <Box as="hr" borderTopWidth="1px" borderColor={color('border')} my={'64px'} {...props} />
 );
 
 export const P: React.FC<BoxProps> = props => <Text as="p" {...props} />;

src/components/mdx/md-contents.tsx

@@ -17,31 +17,29 @@ export const MDContents: React.FC<any> = React.memo(
   ({ pageTop: PageTop = null, headings, children }) => {
     const router = useRouter();
     const isHome = router.pathname === '/';
+
+    const TOCShowing = !isHome && headings?.length > 1;
     return (
       <>
         <ContentWrapper
-          pl={space(['none', 'none', 'extra-loose', 'extra-loose'])}
-          pr={
-            isHome ? ['0px', '0px', 'base-loose'] : space(['0', '0', 'extra-loose', 'extra-loose'])
-          }
-          width={['100%', '100%', '100%', `calc(100% - ${isHome ? 0 : TOC_WIDTH + 20}px)`]}
+          width={['100%', '100%', '100%', `calc(100% - ${!TOCShowing ? 0 : TOC_WIDTH}px)`]}
           mx="unset"
           pt="unset"
           css={css(styleOverwrites as any)}
+          pr={TOCShowing && ['0', '0', '0', 'extra-loose']}
         >
           {PageTop && <PageTop />}
           {children}
         </ContentWrapper>
         {!isHome ? (
           <Box
-            maxWidth={['100%', `${TOC_WIDTH + 20}px`, `${TOC_WIDTH + 20}px`]}
+            maxWidth={['100%', `${TOC_WIDTH}px`, `${TOC_WIDTH}px`]}
             width="100%"
             display={['none', 'none', 'none', 'block']}
-            pr="base-loose"
           >
             <Box position="sticky" top={0} pt="64px">
               <Search mb={space('extra-loose')} />
-              {headings?.length > 1 ? (
+              {TOCShowing ? (
                 <TableOfContents
                   pl={space('base')}
                   borderLeft={border()}

src/components/mdx/styles.tsx

@@ -8,9 +8,6 @@ import { getCapsizeStyles } from '@components/mdx/typography';
 export const MdxOverrides = createGlobalStyle`
 * {
   font-feature-settings: 'ss01' on;
-  backface-visibility: hidden;
-  -webkit-font-smoothing: antialiased;
-  -webkit-font-smoothing: subpixel-antialiased;
 }
 html, body {
   font-family: 'Soehne', Inter, sans-serif;
@@ -125,12 +122,13 @@ export const styleOverwrites = {
     '&:first-child > h2:first-child': {
       mt: 0,
     },
-    '& > *:not(pre):not(ul):not(ol):not(img):not([data-reach-accordion]):not(section)': {
-      px: space('extra-loose'),
+    '& > *:not(pre):not(ul):not(ol):not(img):not([data-reach-accordion]):not(section):not(hr)': {
+      px: space(['extra-loose', 'extra-loose', 'none', 'none']),
     },
     'ul, ol': {
-      pr: space('extra-loose'),
-      pl: '64px',
+      // pr: space('extra-loose'),
+      px: space(['64px', '64px', 'extra-loose', 'extra-loose']),
+      // pl: '64px',
       'ul, ol': {
         pl: space('extra-loose'),
       },
@@ -140,7 +138,7 @@ export const styleOverwrites = {
       textDecoration: 'inherit',
     },
     pre: {
-      px: space(['none', 'none', 'extra-loose', 'extra-loose']),
+      // px: space(['none', 'none', 'extra-loose', 'extra-loose']),
     },
     img: {
       mx: 'auto',

src/components/mdx/typography.ts

@@ -23,22 +23,22 @@ export const getCapsizeStyles = (fontSize, leading) =>
 
 const h1 = {
   fontWeight: 600,
-  ...getCapsizeStyles(36, 52),
+  ...getCapsizeStyles(36, 42),
 };
 
 const h2 = {
   fontWeight: 500,
-  ...getCapsizeStyles(24, 40),
+  ...getCapsizeStyles(24, 32),
 };
 
 const h3 = {
   fontWeight: 500,
-  ...getCapsizeStyles(18, 32),
+  ...getCapsizeStyles(18, 28),
 };
 
 const h4 = {
   fontWeight: 400,
-  ...getCapsizeStyles(20, 36),
+  ...getCapsizeStyles(20, 32),
 };
 
 const h5 = {

src/components/pagination.tsx

@@ -98,7 +98,7 @@ const Title: React.FC<BoxProps & { isHovered?: boolean }> = ({ isHovered, ...pro
     color={isHovered ? color('accent') : color('text-title')}
     mb={space('tight')}
     css={css({
-      ...getHeadingStyles('h3'),
+      ...getHeadingStyles('h4'),
     })}
     {...props}
   />
@@ -108,7 +108,7 @@ const PrevCard: React.FC<any> = React.memo(props => {
   const { prev } = usePaginateRoutes();
 
   return prev ? (
-    <Card>
+    <Card py="loose">
       {({ hover, active }) => (
         <>
           <FloatingLink href={prev.path} />
@@ -126,7 +126,7 @@ const NextCard: React.FC<any> = React.memo(props => {
   const { next } = usePaginateRoutes();
 
   return next ? (
-    <Card textAlign="right" align="flex-end">
+    <Card py="loose" textAlign="right" align="flex-end">
       {({ hover, active }) => (
         <>
           <FloatingLink href={next.path} />
@@ -143,7 +143,7 @@ const NextCard: React.FC<any> = React.memo(props => {
 
 export const Pagination: React.FC<any> = React.memo(({ hidePagination, ...rest }: any) => (
   <Grid
-    gridColumnGap={space('base-loose')}
+    gridColumnGap={space('extra-loose')}
     gridRowGap={space('extra-loose')}
     gridTemplateColumns={['repeat(1, 1fr)', 'repeat(1, 1fr)', 'repeat(2, 1fr)', 'repeat(2, 1fr)']}
   >

src/components/search.tsx

@@ -1,11 +1,24 @@
 import React from 'react';
-import { Box, Flex, Portal, space, Fade, themeColor, color, BoxProps } from '@blockstack/ui';
+import {
+  Box,
+  Flex,
+  Portal,
+  space,
+  Fade,
+  themeColor,
+  color,
+  BoxProps,
+  Grid,
+  Stack,
+} from '@blockstack/ui';
 import { useDocSearchKeyboardEvents } from '@docsearch/react';
-
 import { Text } from '@components/typography';
 import { SearchIcon } from '@components/icons/search';
 import Router from 'next/router';
 import Link from 'next/link';
+import { getCapsizeStyles } from '@components/mdx/typography';
+import { css } from '@styled-system/css';
+import { border } from '@common/utils';
 
 const getLocalUrl = href => {
   const _url = new URL(href);
@@ -33,6 +46,32 @@ const navigator = {
   },
 };
 
+const Key: React.FC<BoxProps> = ({ children, ...rest }) => (
+  <Grid
+    style={{
+      placeItems: 'center',
+    }}
+    size="18px"
+    bg={color('bg')}
+    border={border()}
+    borderRadius="3px"
+    boxShadow="low"
+    opacity={0.75}
+    {...rest}
+  >
+    <Text
+      css={css({
+        color: color('text-caption'),
+        display: 'block',
+        transform: 'translateY(1px)',
+        ...getCapsizeStyles(12, 12),
+      })}
+    >
+      {children}
+    </Text>
+  </Grid>
+);
+
 const searchOptions = {
   apiKey: '9040ba6d60f5ecb36eafc26396288875',
   indexName: 'blockstack',
@@ -96,7 +135,7 @@ export const SearchBox: React.FC<BoxProps> = React.memo(props => {
         borderRadius="12px"
         display={['none', 'none', 'block', 'block']}
         border="1px solid"
-        borderColor={isOpen ? 'rgba(170, 179, 255, 0.8)' : color('bg-alt')}
+        borderColor={isOpen ? 'rgba(170, 179, 255, 0.8)' : color('border')}
         boxShadow={
           isOpen ? '0 0 0 3px rgba(170, 179, 255, 0.25)' : '0 0 0 3px rgba(170, 179, 255, 0)'
         }
@@ -104,23 +143,44 @@ export const SearchBox: React.FC<BoxProps> = React.memo(props => {
         _hover={{
           borderColor: 'rgba(170, 179, 255, 0.8)',
           boxShadow: '0 0 0 3px rgba(170, 179, 255, 0.25)',
+          cursor: 'pointer',
+        }}
+        style={{
+          userSelect: 'none',
         }}
         {...props}
       >
-        <Flex
-          ref={searchButtonRef}
-          onClick={onOpen}
-          px={space('base-tight')}
-          py={space('tight')}
-          align="center"
-          _hover={{ borderColor: themeColor('blue.400'), cursor: 'pointer' }}
-        >
-          <Box transform="scaleX(-1)" mr={space('tight')} color={color('text-caption')}>
-            <SearchIcon size="18px" />
-          </Box>
-          <Text fontSize={'14px'} color={color('text-caption')}>
-            Search docs
-          </Text>
+        <Flex align="center" justifyContent="space-between">
+          <Flex
+            ref={searchButtonRef}
+            onClick={onOpen}
+            px={space('base-tight')}
+            py={space('tight')}
+            align="center"
+            _hover={{ borderColor: themeColor('blue.400') }}
+          >
+            <Box
+              transform="scaleX(-1)"
+              mr={space('tight')}
+              opacity={0.6}
+              color={color('text-caption')}
+            >
+              <SearchIcon size="18px" />
+            </Box>
+            <Text
+              opacity={0.8}
+              css={css({
+                color: color('text-caption'),
+                ...getCapsizeStyles(14, 28),
+              })}
+            >
+              Search docs
+            </Text>
+          </Flex>
+          <Stack isInline spacing="3px" pr="base">
+            <Key>⌘</Key>
+            <Key>K</Key>
+          </Stack>
         </Flex>
       </Box>
     </>

src/components/side-nav.tsx

@@ -6,11 +6,12 @@ import { SIDEBAR_WIDTH } from '@common/constants';
 // @ts-ignore
 import nav from '@common/navigation.yaml';
 import ArrowLeftIcon from 'mdi-react/ArrowLeftIcon';
-import { getTitle, slugify } from '@common/utils';
+import { getCategory, getTitle, slugify } from '@common/utils';
 import { useRouter } from 'next/router';
 import { getCapsizeStyles } from '@components/mdx/typography';
 import { Text } from '@components/typography';
 import { css } from '@styled-system/css';
+import { SmartLink } from '@components/mdx';
 const Wrapper: React.FC<BoxProps & { containerProps?: BoxProps }> = ({
   width = `${SIDEBAR_WIDTH}px`,
   containerProps,
@@ -24,7 +25,6 @@ const Wrapper: React.FC<BoxProps & { containerProps?: BoxProps }> = ({
         width={width}
         maxHeight={`calc(100vh - 60px)`}
         overflow="auto"
-        px={space('base')}
         top={0}
         pt="64px"
         {...containerProps}
@@ -57,21 +57,22 @@ const PageItem = React.forwardRef(
   ) => {
     const typeStyles = isTopLevel ? getCapsizeStyles(16, 26) : getCapsizeStyles(14, 20);
     return (
-      <Text
+      <SmartLink
         ref={ref}
         css={css({
           display: 'block',
           ...typeStyles,
           color: isActive ? color('accent') : isTopLevel ? color('text-title') : _color,
-          mb,
+          mb: isTopLevel ? space('base-loose') : mb,
           ':hover': {
             color: isTopLevel ? color('accent') : color('text-title'),
           },
+          textDecoration: 'none',
         })}
         {...props}
       >
         {children}
-      </Text>
+      </SmartLink>
     );
   }
 );
@@ -94,6 +95,16 @@ const getRoutePath = path => routes.find(route => route.path.endsWith(path));
 const ChildPages = ({ items, handleClick }: any) =>
   items?.pages
     ? items?.pages?.map(page => {
+        if (page.external) {
+          return (
+            <Box mb={space('extra-tight')}>
+              <PageItem as="a" href={page.external.href} target="_blank">
+                {page.external.title}
+              </PageItem>
+            </Box>
+          );
+        }
+
         const path = page.pages
           ? `${page.path}${page.pages[0].path}`
           : items.path
@@ -153,7 +164,7 @@ const BackItem = props => (
     <Box mr={space('extra-tight')}>
       <ArrowLeftIcon size="16px" />
     </Box>
-    <PageItem mb={'0px'} color={'currentColor'}>
+    <PageItem textDecoration="none" mb={'0px'} color={'currentColor'}>
       Back
     </PageItem>
   </Flex>
@@ -170,6 +181,7 @@ const Navigation = () => {
 
   React.useEffect(() => {
     let currentSection = selected.items;
+
     nav.sections.forEach(section => {
       section.pages.forEach(page => {
         if (page.pages) {
@@ -234,6 +246,7 @@ const Navigation = () => {
   }
 
   if (selected.type === 'default') {
+    const urlCategory = getCategory(router.pathname);
     return selected.items.map((section, i) => {
       return (
         <Box mb="40px">
@@ -256,17 +269,14 @@ const Navigation = () => {
 
             return (
               <Box mb={space('extra-tight')}>
-                <Link href={path}>
-                  <PageItem
-                    as="a"
-                    href={path}
-                    isTopLevel={i === 0}
-                    isActive={router.pathname.endsWith(path)}
-                    onClick={() => handleClick(page)}
-                  >
-                    {section.usePageTitles ? getTitle(route) : convertToTitle(page.path)}
-                  </PageItem>
-                </Link>
+                <PageItem
+                  href={!urlCategory ? path : !path.includes(urlCategory) && path}
+                  isTopLevel={i === 0}
+                  isActive={router.pathname.endsWith(path)}
+                  onClick={() => handleClick(page)}
+                >
+                  {section.usePageTitles ? getTitle(route) : convertToTitle(page.path)}
+                </PageItem>
               </Box>
             );
           })}

yarn.lock

@@ -1526,10 +1526,10 @@
   resolved "https://registry.yarnpkg.com/@next/mdx/-/mdx-9.5.1.tgz#c7e2fd457810b34e8ce598f57075b799ca48751b"
   integrity sha512-jmNKqEMWkCPQWWeoq6CiOShngGv99Cs+rQSLlU7BZMVCZzbcTVEkAsUqR4WfLA97K2ihjtNidY5jwbKFu4h83Q==
 
-"@next/react-dev-overlay@9.5.2-canary.4":
-  version "9.5.2-canary.4"
-  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.2-canary.4.tgz#d9fea4dd68a6a6cffd21b29b9f102617babfde58"
-  integrity sha512-6NB8pcm6TikrwWwFK5Xmf0PEspN5X+i9sxTHknt6z0SaUKn+KBemdtGEbgkkQS0mNUOyBnrcs6K6nJ0+qAm1Sg==
+"@next/react-dev-overlay@9.5.2-canary.5":
+  version "9.5.2-canary.5"
+  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.2-canary.5.tgz#b04f84a4df8d4a49239b8264b5156487c2a6f393"
+  integrity sha512-YaO0gIHC6/VrrbN/2FeN96pCcrsJAVGmxa1TUHEq2djzzv2NCh0MXnGzqWfbeQGYshjLzHNksDpfZgdHujncqg==
   dependencies:
     "@babel/code-frame" "7.8.3"
     ally.js "1.4.1"
@@ -1542,10 +1542,10 @@
     stacktrace-parser "0.1.10"
     strip-ansi "6.0.0"
 
-"@next/react-refresh-utils@9.5.2-canary.4":
-  version "9.5.2-canary.4"
-  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.2-canary.4.tgz#a612f5da712f74218bf8d7929433da68f39145e3"
-  integrity sha512-w/st+aJ3EGbvMgGW/dInkTeLE8MquorvpJ8wKd/wXyKm1nboJnxCSqtIsZBJcsznCsltm8P9V6mCZUTuzcXkCA==
+"@next/react-refresh-utils@9.5.2-canary.5":
+  version "9.5.2-canary.5"
+  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.2-canary.5.tgz#314c04d281018157eda010c351548cbf3cc8ca48"
+  integrity sha512-mYT+8yMHlLQ5jSwibwKOCnsMY2qnlZ/caNI5qwTRH+ugKdyTNyFONm9d54KT9umdXei3azlkWJc0CI/Ceuo8mw==
 
 "@popperjs/core@^2.4.0":
   version "2.4.4"
@@ -6324,10 +6324,10 @@ next-transpile-modules@^4.0.2:
     micromatch "^4.0.2"
     slash "^3.0.0"
 
-next@^9.5.2-canary.4:
-  version "9.5.2-canary.4"
-  resolved "https://registry.yarnpkg.com/next/-/next-9.5.2-canary.4.tgz#8023fc2c59eec015f5dbd4a0a287f41a96e6b613"
-  integrity sha512-LCoQVcT8u+cLmAQClpl2UdYUcVMKu0GVL3eqfTiNZI08JONhGAuX2OrWMsj6KeKVpDdGZ0T47z5VO4q8/QFNIw==
+next@^9.5.2-canary.5:
+  version "9.5.2-canary.5"
+  resolved "https://registry.yarnpkg.com/next/-/next-9.5.2-canary.5.tgz#3743800daa0271fd97d4f037ba9ef74688f3b849"
+  integrity sha512-a5XTn8T5D88seubihcclRnf0ZKD0lz2cvYVH+aSi9pbUSyzKrG0yHNi1dauXXtba+CUFxvLn8BTWjmFXPy0W+g==
   dependencies:
     "@ampproject/toolbox-optimizer" "2.5.14"
     "@babel/code-frame" "7.8.3"
@@ -6348,8 +6348,8 @@ next@^9.5.2-canary.4:
     "@babel/preset-typescript" "7.9.0"
     "@babel/runtime" "7.9.6"
     "@babel/types" "7.9.6"
-    "@next/react-dev-overlay" "9.5.2-canary.4"
-    "@next/react-refresh-utils" "9.5.2-canary.4"
+    "@next/react-dev-overlay" "9.5.2-canary.5"
+    "@next/react-refresh-utils" "9.5.2-canary.5"
     ast-types "0.13.2"
     babel-plugin-syntax-jsx "6.18.0"
     babel-plugin-transform-define "2.0.0"