fix: faqs spacing, redirects

next.config.js

@@ -13,6 +13,16 @@ async function redirects() {
       destination: '/authentication/building-todo-app',
       permanent: true,
     },
+    {
+      source: '/develop/zero_to_dapp_1.html',
+      destination: '/authentication/building-todo-app',
+      permanent: true,
+    },
+    {
+      source: '/browser/hello-blockstack.html',
+      destination: '/authentication/building-todo-app',
+      permanent: true,
+    },
     {
       source: '/develop/connect/get-started.html',
       destination: '/authentication/connect',
@@ -182,6 +192,11 @@ async function redirects() {
       destination: '/storage-hubs/overview',
       permanent: true,
     },
+    {
+      source: '/storage/hello-hub-choice.html',
+      destination: '/storage-hubs/overview',
+      permanent: true,
+    },
     {
       source: '/storage/amazon-s3-deploy.html',
       destination: '/storage-hubs/amazon-s3-deploy',
@@ -220,7 +235,12 @@ async function redirects() {
     { source: '/org/overview.html', destination: '/ecosystem/overview', permanent: true },
     {
       source: '/faqs/allFAQS.html',
-      destination: 'https://blockstack.zendesk.com/hc/en-us',
+      destination: '/references/faqs',
+      permanent: true,
+    },
+    {
+      source: '/core/faq_technical.html',
+      destination: '/references/faqs',
       permanent: true,
     },
     { source: '/org/token.html', destination: '/ecosystem/stacks-token', permanent: true },

src/components/content-wrapper.tsx

@@ -5,7 +5,6 @@ const ContentWrapper: React.FC<FlexProps> = props => (
   <Flex
     flexShrink={0}
     pt={space(['base', 'base', 'extra-loose'])}
-    mt={space('extra-loose')}
     pb={[4, 4, 6]}
     flexDirection="column"
     {...props}

src/components/faq.tsx

@@ -56,9 +56,10 @@ const SectionCard = ({ section }) => {
 export const FAQs = React.memo(({ articles, sections }: any) => {
   return (
     <Grid
-      gridTemplateColumns="repeat(2, 1fr)"
+      gridTemplateColumns={['repeat(1, 1fr)', 'repeat(2, 1fr)', 'repeat(2, 1fr)', 'repeat(2, 1fr)']}
       gridColumnGap={space('extra-loose')}
       gridRowGap="64px"
+      px={['extra-loose', 'extra-loose', 0, 0]}
     >
       {sections.map(section => {
         return <SectionCard key={section.id} section={section} />;

src/components/layouts/base-layout.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Flex, Box, FlexProps, color, space, CloseIcon, Fade, Transition } from '@blockstack/ui';
+import { Flex } from '@blockstack/ui';
 import { SideNav } from '../side-nav';
 import { Header } from '../header';
 import { Main } from '../main';
@@ -7,125 +7,8 @@ import { Footer } from '../footer';
 import NotFoundPage from '@pages/404';
 import { PAGE_WIDTH, SIDEBAR_WIDTH } from '@common/constants';
 import { useWatchActiveHeadingChange } from '@common/hooks/use-active-heading';
-import { useLockBodyScroll } from '@common/hooks/use-lock-body-scroll';
-import { useMobileMenuState } from '@common/hooks/use-mobile-menu';
-import { border } from '@common/utils';
 import { useRouter } from 'next/router';
-
+import { MobileMenu } from '@components/mobile-menu';
-const MobileMenu: React.FC<FlexProps> = props => {
-  const { isOpen, handleClose } = useMobileMenuState();
-  const [slideIn, setSlideIn] = React.useState(false);
-  React.useEffect(() => {
-    if (isOpen && !slideIn) {
-      setTimeout(() => {
-        setSlideIn(true);
-      }, 0);
-    } else if (slideIn && !isOpen) {
-      setSlideIn(false);
-    }
-  }, [isOpen]);
-
-  useLockBodyScroll(isOpen);
-  return (
-    <Box position="fixed" zIndex={999999} left={0} top={0}>
-      <Fade in={isOpen} timeout={250}>
-        {styles => (
-          <Box style={{ willChange: 'opacity', ...styles }}>
-            <Box
-              position="fixed"
-              onClick={handleClose}
-              zIndex={999999}
-              left={0}
-              top={0}
-              size="100%"
-              bg="ink"
-              opacity={0.5}
-            />
-            <Transition
-              timeout={350}
-              styles={{
-                init: {
-                  opacity: 0,
-                  transform: 'translateX(50%)',
-                },
-                entered: {
-                  opacity: 1,
-                  transform: 'translateX(0)',
-                },
-                exited: {
-                  opacity: 0,
-                  transform: 'translateX(50%)',
-                },
-              }}
-              in={isOpen}
-            >
-              {slideStyles => (
-                <Box
-                  position="fixed"
-                  zIndex={999999}
-                  right={0}
-                  top={0}
-                  width="80%"
-                  height="100%"
-                  bg={color('bg')}
-                  style={{
-                    willChange: 'opacity, transform',
-                    ...slideStyles,
-                  }}
-                  borderLeft={border()}
-                >
-                  <Flex
-                    align="center"
-                    justifyContent="flex-end"
-                    height="72px"
-                    px={space(['extra-loose', 'extra-loose', 'base', 'base'])}
-                    position="fixed"
-                    top={0}
-                    right={0}
-                    zIndex={999999}
-                  >
-                    <Box
-                      _hover={{
-                        cursor: 'pointer',
-                      }}
-                      onClick={handleClose}
-                      size="14px"
-                      mr={space('tight')}
-                      color={color('invert')}
-                    >
-                      <CloseIcon />
-                    </Box>
-                  </Flex>
-                  <Box
-                    maxHeight="100vh"
-                    overflow="auto"
-                    px={space(['extra-loose', 'extra-loose', 'base', 'base'])}
-                    py={space('extra-loose')}
-                  >
-                    <SideNav
-                      height="unset"
-                      overflow="inherit"
-                      width="100%"
-                      containerProps={{
-                        position: 'static',
-                        overflow: 'inherit',
-                        height: 'unset',
-                        pt: 0,
-                        pb: 0,
-                        px: 0,
-                        width: '100%',
-                      }}
-                    />
-                  </Box>
-                </Box>
-              )}
-            </Transition>
-          </Box>
-        )}
-      </Fade>
-    </Box>
-  );
-};
 
 const BaseLayout: React.FC<{ isHome?: boolean }> = ({ children }) => {
   const router = useRouter();

src/components/mdx/components/code.tsx

@@ -138,9 +138,10 @@ export const Code: React.FC<
 );
 
 const preProps = {
-  display: 'inline-block',
+  display: 'inline',
   border: border(),
   borderRadius: '4px',
+  wordBreak: ['break-all', 'break-all', 'unset', 'unset'],
   padding: '2px 6px',
   boxShadow: '0 1px 2px rgba(0, 0, 0, 0.04)',
   bg: color('bg'),

src/components/mdx/components/link.tsx

@@ -42,6 +42,8 @@ const Card = ({ route, styles, ...rest }) => {
       style={{ userSelect: 'none', pointerEvents: 'none', ...styles }}
       transition={transition()}
       pt={space('tight')}
+      as="span"
+      display="block"
       {...rest}
     >
       <Box
@@ -51,8 +53,10 @@ const Card = ({ route, styles, ...rest }) => {
         borderRadius="12px"
         overflow="hidden"
         boxShadow="0px 2px 4px rgba(0, 0, 0, 0.02), 0px 24px 40px rgba(0, 0, 0, 0.08)"
+        as="span"
+        display="block"
       >
-        <Box bg={color('bg-light')} p={space('base')}>
+        <Box as="span" display="block" bg={color('bg-light')} p={space('base')}>
           <Text
             css={css({
               ...getHeadingStyles('h5'),
@@ -85,7 +89,7 @@ export const LinkWithHover = forwardRef(
         : undefined;
 
     return (
-      <Box display="inline" position="relative" {...bind}>
+      <Box as="span" display="inline" position="relative" {...bind}>
         <Box
           as={props.href ? 'a' : 'span'}
           ref={ref}

src/components/mdx/md-contents.tsx

@@ -67,8 +67,12 @@ export const styleOverwrites = {
   },
   p: {
     width: '100%',
+    a: {
+      display: 'inline',
+    },
   },
-  'p, li, a': {
+  'p, li': {
+    overflowWrap: 'break-word',
     display: 'inline-block',
     ...getCapsizeStyles(16, 26),
   },
@@ -82,9 +86,6 @@ export const styleOverwrites = {
     '*:last-child:not(pre):not(blockquote)': {
       mb: 0,
     },
-    p: {
-      display: 'inline',
-    },
     'ol, ul': {
       mt: space('base-loose'),
     },
@@ -115,8 +116,6 @@ export const styleOverwrites = {
   },
   '*:not(pre) code': {
     fontFamily: '"Soehne Mono", "Fira Code", monospace',
-    // ...getCapsizeStyles(14, 24),
-    // padding: '3px 2px',
   },
   'pre code': {
     fontFamily: '"Soehne Mono", "Fira Code", monospace',

src/components/mdx/mdx-components.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {
   Pre,
   THead,
-  MarkdownLink,
+  SmartLink,
   TData,
   Table,
   InlineCode,
@@ -40,7 +40,7 @@ export const Components = {
   table: Table,
   th: THead,
   td: TData,
-  a: MarkdownLink,
+  a: SmartLink,
   p: P,
   ul: Ul,
   ol: Ol,

src/components/mdx/overrides.tsx

@@ -3,6 +3,10 @@ import { color } from '@blockstack/ui';
 import { createGlobalStyle } from 'styled-components';
 
 const GlobalStyles = createGlobalStyle`
+:root {
+  --reach-tooltip: 1;
+}
+
 * {
   font-feature-settings: 'ss01' on;
 }

src/components/mobile-menu.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Flex, Box, FlexProps, color, space, CloseIcon, Fade, Transition } from '@blockstack/ui';
+import { SideNav } from '@components/side-nav';
+import { useLockBodyScroll } from '@common/hooks/use-lock-body-scroll';
+import { useMobileMenuState } from '@common/hooks/use-mobile-menu';
+import { border } from '@common/utils';
+
+export const MobileMenu: React.FC<FlexProps> = props => {
+  const { isOpen, handleClose } = useMobileMenuState();
+  const [slideIn, setSlideIn] = React.useState(false);
+  React.useEffect(() => {
+    if (isOpen && !slideIn) {
+      setTimeout(() => {
+        setSlideIn(true);
+      }, 0);
+    } else if (slideIn && !isOpen) {
+      setSlideIn(false);
+    }
+  }, [isOpen]);
+
+  useLockBodyScroll(isOpen);
+  return (
+    <Box position="fixed" zIndex={999999} left={0} top={0} {...props}>
+      <Fade in={isOpen} timeout={250}>
+        {styles => (
+          <Box style={{ willChange: 'opacity', ...styles }}>
+            <Box
+              position="fixed"
+              onClick={handleClose}
+              zIndex={999999}
+              left={0}
+              top={0}
+              size="100%"
+              bg="ink"
+              opacity={0.5}
+            />
+            <Transition
+              timeout={350}
+              styles={{
+                init: {
+                  opacity: 0,
+                  transform: 'translateX(50%)',
+                },
+                entered: {
+                  opacity: 1,
+                  transform: 'translateX(0)',
+                },
+                exited: {
+                  opacity: 0,
+                  transform: 'translateX(50%)',
+                },
+              }}
+              in={isOpen}
+            >
+              {slideStyles => (
+                <Box
+                  position="fixed"
+                  zIndex={999999}
+                  right={0}
+                  top={0}
+                  width="80%"
+                  height="100%"
+                  bg={color('bg')}
+                  style={{
+                    willChange: 'opacity, transform',
+                    ...slideStyles,
+                  }}
+                  borderLeft={border()}
+                >
+                  <Flex
+                    align="center"
+                    justifyContent="flex-end"
+                    height="72px"
+                    px={space(['extra-loose', 'extra-loose', 'base', 'base'])}
+                    position="fixed"
+                    top={0}
+                    right={0}
+                    zIndex={999999}
+                  >
+                    <Box
+                      _hover={{
+                        cursor: 'pointer',
+                      }}
+                      onClick={handleClose}
+                      size="14px"
+                      mr={space('tight')}
+                      color={color('invert')}
+                    >
+                      <CloseIcon />
+                    </Box>
+                  </Flex>
+                  <Box
+                    maxHeight="100vh"
+                    overflow="auto"
+                    px={space(['extra-loose', 'extra-loose', 'base', 'base'])}
+                    py={space('extra-loose')}
+                  >
+                    <SideNav
+                      height="unset"
+                      overflow="inherit"
+                      width="100%"
+                      containerProps={{
+                        position: 'static',
+                        overflow: 'inherit',
+                        height: 'unset',
+                        pt: 0,
+                        pb: 0,
+                        px: 0,
+                        width: '100%',
+                      }}
+                    />
+                  </Box>
+                </Box>
+              )}
+            </Transition>
+          </Box>
+        )}
+      </Fade>
+    </Box>
+  );
+};

src/components/side-nav.tsx

@@ -12,6 +12,7 @@ import { getCapsizeStyles } from '@components/mdx/typography';
 import { Text } from '@components/typography';
 import { css } from '@styled-system/css';
 import { SmartLink } from '@components/mdx';
+import { useMobileMenuState } from '@common/hooks/use-mobile-menu';
 
 const Wrapper: React.FC<BoxProps & { containerProps?: BoxProps }> = ({
   width = `${SIDEBAR_WIDTH}px`,
@@ -95,13 +96,19 @@ const getRoutePath = (path, routes) => routes.find(route => route.path.endsWith(
 
 const ChildPages = ({ items, handleClick }: any) => {
   const { routes } = useAppState();
+  const { handleClose } = useMobileMenuState();
 
   return items?.pages
     ? items?.pages?.map((page, key) => {
         if (page.external) {
           return (
             <Box mb={space('extra-tight')} key={key}>
-              <PageItem as="a" href={page.external.href} target="_blank">
+              <PageItem
+                as="a"
+                href={page.external.href}
+                onClick={() => handleClose()}
+                target="_blank"
+              >
                 {page.external.title}
               </PageItem>
             </Box>
@@ -125,7 +132,14 @@ const ChildPages = ({ items, handleClick }: any) => {
             <Link href={routePath.path} passHref>
               <PageItem
                 isActive={router.pathname.includes(path)}
-                onClick={page.pages ? () => handleClick(page) : undefined}
+                onClick={
+                  page.pages
+                    ? () => {
+                        handleClick(page);
+                        handleClose();
+                      }
+                    : handleClose
+                }
                 as="a"
               >
                 {items.usePageTitles ? getTitle(route) : convertToTitle(page.path)}
@@ -181,6 +195,7 @@ const Navigation = () => {
     items: nav.sections,
     selected: undefined,
   });
+  const { handleClose } = useMobileMenuState();
 
   const router = useRouter();
 
@@ -229,6 +244,7 @@ const Navigation = () => {
         items: page,
       });
     }
+    handleClose();
   };
 
   const handleBack = () =>

src/pages/authentication/building-todo-app.md

@@ -8,9 +8,6 @@ tags:
 images:
   large: /images/pages/todo-app.svg
   sm: /images/pages/todo-app-sm.svg
-redirect_from:
-  - /develop/zero_to_dapp_1.html
-  - /browser/hello-blockstack.html
 ---
 
 # Building a Todo app
@@ -269,9 +266,7 @@ This triggers an event, which
 calls the [`signUserOut` method](https://blockstack.github.io/blockstack.js/classes/usersession.html#signuserout)
 of the `UserSession` object.
 
-Now, visit the URL that was provided to you when you made your tasks public. This url is of the format `/todos/:username`,
+Now, visit the URL that was provided to you when you made your tasks public. This url is of the format `/todos/:username`, so if your username is `jane_doe.id.blockstack`, the URL would be [`localhost:3000/todos/jane_doe.id.blockstack`](http://localhost:3000/todos/jane_doe.id.blockstack).
-so if your username is `jane_doe.id.blockstack`, the URL would be
-[`localhost:3000/todos/jane_doe.id.blockstack`](http://localhost:3000/todos/jane_doe.id.blockstack).
 
 When you visit this page, the `TodoList.jsx` component detects that there is a username in the URL.
 When there is a username, it calls `fetchTasks`, this time providing the `username` argument. This `username`

src/pages/references/faqs/[slug].tsx

@@ -104,7 +104,10 @@ const FaqItems = ({ articles }) => {
   };
 
   return (
-    <Box pr={['0px', 0, 'base-loose']}>
+    <Box
+      pr={['extra-loose', 'extra-loose', 'base-loose', 'base-loose']}
+      pl={['extra-loose', 'extra-loose', '0', '0']}
+    >
       <BackButton href="/references/faqs" mb={0} />
       <Accordion multiple collapsible defaultIndex={index} onChange={handleIndexChange}>
         {articles

src/pages/stacks-blockchain/overview.md

@@ -12,7 +12,7 @@ To unpack this definition:
 _A replicated state machine_ is two or more copies ("replicas") of a given set of rules (a "machine") that, in processing
 a common input (such as the same sequence of transactions), will arrive at the same configuration ("state"). Bitcoin
 is a replicated state machine — its state is the set of UTXOs, which each peer has a full copy of, and given a block,
-all peers will independently calculate the same new UTXO set from the existing one.
+all peers will independently calculate the same new unspent output (UTXO) set from the existing one.
 
 _Open-membership_ means that any host on the Internet can join the blockchain and independently calculate the same full
 replica as all other peers.
@@ -78,9 +78,6 @@ Anyone can be a Stacks Miner. There are no special hardware or software requirem
 of spending energy, Stacks miners transfer Bitcoin to holders of Stacks Token (STX) to mine a block. This mechanism is
 called Proof of Transfer (PoX).
 
-[@page-reference | inline]
-| /stacks-blockchain/testnet-node
-
 [@page-reference | inline]
 | /mining
 

src/pages/storage-hubs/overview.md

@@ -1,14 +1,10 @@
 ---
-title: Overview
+title: Storage hubs overview
-redirect_from:
-  - /storage/hello-hub-choice.html
 ---
 
 ## Configuration files
 
-You should store a JSON configuration file either in the top-level directory of
+You should store a JSON configuration file either in the top-level directory of the hub server. Alternatively, you can specify a file location using the `CONFIG_PATH` environment variable. The following is an example configuration file for Amazon S3:
-the hub server. Alternatively, you can specify a file location using the
-`CONFIG_PATH` environment variable. The following is an example configuration file for Amazon S3:
 
 ```json
 {