fix: clean up, lint, mdx

lib/remark-plugins.js

@@ -27,8 +27,8 @@ const remarkPlugins = [
     {
       ['page-reference']: {
         containerElement: 'pagereference',
-        titleElement: 'React.Fragment',
+        titleElement: 'span',
-        bodyElement: 'React.Fragment',
+        bodyElement: 'span',
         title: 'optional',
       },
     },

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.6",
+    "next": "^9.5.2-canary.7",
     "next-fonts": "^1.4.0",
     "next-google-fonts": "^1.1.0",
     "next-mdx-remote": "^0.6.0",

src/common/data/clarity-ref.ts

@@ -3,16 +3,18 @@ import CLARITY_REFERENCE from '../../_data/clarityRef.json';
 import { slugify } from '@common/utils';
 
 const wrapInClarityTicks = (string: string) => {
-  let newString = '';
+  let newString = '```clarity';
-  newString += '```clarity\n';
+  newString += `
-  newString += string.trim() + '\n';
+`;
+  newString += string.trim();
+  newString += `
+`;
   newString += '```';
   return newString;
 };
 
 const inlineCode = (string: string) => {
-  let newString = '';
+  let newString = '`';
-  newString += '`';
   newString += string.trim();
   newString += '`';
   return newString;
@@ -26,32 +28,33 @@ const generateMarkdown = () => {
     functions += `
 ### ${entry.name}
 
-**Signature:** ${inlineCode(entry.signature)}\n
+**Signature:** ${inlineCode(entry.signature)}
 
 
-**Input:** ${inlineCode(entry.input_type)}\n
+**Input:** ${inlineCode(entry.input_type)}
 
 
-**Output:** ${inlineCode(entry.output_type)}\n
+**Output:** ${inlineCode(entry.output_type)}
 
-${entry.description}
+${entry.description.trim()}
 
 #### Example {#${slugify(entry.name)}-example}
 
-${wrapInClarityTicks(entry.example)}\n
+${wrapInClarityTicks(entry.example)}
 `;
   });
 
   CLARITY_REFERENCE.keywords.forEach(entry => {
-    keywords += `\n### ${entry.name}
+    keywords += `### ${entry.name}
 
 **Output:** ${inlineCode(entry.output_type)}
 
-${entry.description}
+${entry.description.trim()}
 
 #### Example {#${slugify(entry.name)}-example}
 
-${wrapInClarityTicks(entry.example)}\n
+${wrapInClarityTicks(entry.example)}
+
 `;
   });
 

src/common/data/hydrate-mdx.ts

@@ -1,31 +0,0 @@
-import React from 'react';
-import { mdx, MDXProvider } from '@mdx-js/react';
-
-export const hydrate = ({ source, renderedOutput, scope = {} }, components) => {
-  // first we set up the scope which has to include the mdx custom
-  // create element function as well as any components we're using
-  const fullScope = { mdx, ...components, ...scope };
-  const keys = Object.keys(fullScope);
-  const values = Object.values(fullScope);
-
-  // now we eval the source code using a function constructor
-  // in order for this to work we need to have React, the mdx createElement,
-  // and all our components in scope for the function, which is the case here
-  // we pass the names (via keys) in as the function's args, and execute the
-  // function with the actual values.
-  const hydratedFn = new Function(
-    'React',
-    ...keys,
-    `${source}
-      return React.createElement(MDXContent, {});`
-  )(React, ...values);
-
-  // wrapping the content with MDXProvider will allow us to customize the standard
-  // markdown components (such as "h1" or "a") with the "components" object
-  // @ts-ignore
-  const wrappedWithMdxProvider = React.createElement(MDXProvider, { components }, hydratedFn);
-
-  // finally, set the the output as the new result so that react will re-render for us
-  // and cancel the idle callback since we don't need it anymore
-  return wrappedWithMdxProvider;
-};

src/common/data/mdx.ts

@@ -1,8 +1,12 @@
 import { Components } from '@components/mdx/mdx-components';
 import renderToString from 'next-mdx-remote/render-to-string';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { remarkPlugins } = require('../../../lib/remark-plugins');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { rehypePlugins } = require('../../../lib/rehype-plugins');
 
+// eslint-disable-next-line @typescript-eslint/restrict-plus-operands
 export const wrapValueInTicks = value => '`' + value.replace('`', '').replace('`', '') + '`';
 
 export const convertRemoteDataToMDX = async (arr: any[], key: string) =>
@@ -10,5 +14,5 @@ export const convertRemoteDataToMDX = async (arr: any[], key: string) =>
     arr.map(entry => renderToString(entry[key], Components, { remarkPlugins, rehypePlugins }))
   );
 
-export const renderMdx = async (content: string) =>
+export const renderMdx = async (content: string): Promise<any> =>
-  renderToString(content, Components, { remarkPlugins, rehypePlugins });
+  renderToString(content, Components, { remarkPlugins, rehypePlugins }) as Promise<any>;

src/common/hooks/use-headroom.ts

@@ -4,7 +4,7 @@ import { useRect } from '@reach/rect';
 import { useScroll } from '@common/hooks/use-scroll';
 
 export const useHeadroom = (target: Ref<HTMLDivElement>, { useStyle = true, wait = 0 } = {}) => {
-  let styleInserted = false;
+  const styleInserted = false;
   const rect = useRect(target as any);
   const { scrollY, scrollDirection } = useScroll();
 

src/common/utils/index.ts

@@ -29,7 +29,8 @@ const hasChildren = (element: ReactNode): element is ReactElement<{ children: Re
   isValidElement<{ children?: ReactNode[] }>(element) && Boolean(element.props.children);
 
 // https://github.com/fernandopasik/react-children-utilities/blob/master/src/lib/onlyText.ts
-export const childToString = (child?: ReactText | boolean | {} | null): string => {
+
+export const childToString = (child?: ReactText | boolean | unknown | null): string => {
   if (typeof child === 'undefined' || child === null || typeof child === 'boolean') {
     return '';
   }

src/components/clarity-ref.tsx

@@ -4,15 +4,16 @@ import { TableOfContents } from '@components/toc';
 import hydrate from 'next-mdx-remote/hydrate';
 import { space } from '@blockstack/ui';
 
-export const ClarityKeywordReference = ({ content, headings }) => {
+export const ClarityKeywordReference = React.memo(({ content, headings }: any) => {
   return (
     <>
       <TableOfContents mb={space('extra-loose')} label="Contents" headings={headings} />
       {hydrate(content, Components)}
     </>
   );
-};
+});
-export const ClarityFunctionReference = ({ content, headings }) => (
+export const ClarityFunctionReference = React.memo(({ content, headings }: any) => {
+  return (
     <>
       <TableOfContents
         mb={space('extra-loose')}
@@ -23,3 +24,4 @@ export const ClarityFunctionReference = ({ content, headings }) => (
       {hydrate(content, Components)}
     </>
   );
+});

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

@@ -4,7 +4,7 @@ import { border, onlyText, transition } from '@common/utils';
 import { useTouchable } from '@common/hooks/use-touchable';
 import { Caption, Text } from '@components/typography';
 import Link from 'next/link';
-import routes from '@common/routes';
+import { useAppState } from '@common/hooks/use-app-state';
 import { Img } from '@components/mdx/image';
 import { css } from '@styled-system/css';
 import { getCapsizeStyles, getHeadingStyles } from '@components/mdx/typography';
@@ -201,6 +201,8 @@ export const PageReference: React.FC<BoxProps> = React.memo(({ children }) => {
   const content = onlyText(children).trim();
   const [variant, _paths] = content.includes('\n') ? content.split('\n') : ['default', content];
   const paths = _paths.includes(', ') ? _paths.split(', ') : [_paths];
+  const { routes } = useAppState();
+
   if (!routes) return null;
 
   const pages = paths.map(path => routes?.find(route => route.path === path)).filter(page => page);
@@ -217,8 +219,12 @@ export const PageReference: React.FC<BoxProps> = React.memo(({ children }) => {
         `repeat(${pages.length === 1 ? 1 : 3}, 1fr)`,
       ]}
     >
-      {pages.map(page =>
+      {pages.map((page, key) =>
-        variant === 'inline' ? <InlineCard page={page} /> : <GridCard page={page} />
+        variant === 'inline' ? (
+          <InlineCard key={key} page={page} />
+        ) : (
+          <GridCard key={key} page={page} />
+        )
       )}
     </Grid>
   );

src/components/mdx/components/link.tsx

@@ -4,7 +4,7 @@ import React, { forwardRef, Ref } from 'react';
 
 export const SmartLink = ({ href, ...rest }: { href: string }) => {
   const isExternal = !href || href?.includes('http') || href?.includes('mailto');
-  const link = <Link href={href} {...rest} />;
+  const link = <Link href={href || undefined} {...rest} />;
 
   return isExternal ? (
     link

src/components/mdx/image.tsx

@@ -11,7 +11,7 @@ const getUrl = pathname => {
   const levels = pathname.split('/');
   levels.forEach((level, index) => {
     if (index !== levels.length - 1) {
-      url += level + '/';
+      url += `${level}/`;
     }
   });
   return url;

src/components/mdx/mdx-components.tsx

@@ -50,6 +50,7 @@ export const Components = {
   blockquote: Blockquote,
   sup: Sup,
   section: Section,
+  undefined: () => null,
 };
 
 export const MDXComponents = {

src/components/pagination.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, BoxProps, Flex, Grid, color, space, transition } from '@blockstack/ui';
-import routes from '@common/routes';
+import { useAppState } from '@common/hooks/use-app-state';
 import { useRouter } from 'next/router';
 import { border, getTitle } from '@common/utils';
 import NextLink from 'next/link';
@@ -25,6 +25,7 @@ const getCategory = (pathname: string) => {
 
 const usePaginateRoutes = () => {
   const router = useRouter();
+  const { routes } = useAppState();
 
   const category = getCategory(router.pathname);
   const getSection = route => getCategory(route.path) === category;

src/components/side-nav.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Flex, Box, color, space, ChevronIcon, BoxProps } from '@blockstack/ui';
 import Link from 'next/link';
-import routes from '@common/routes';
+import { useAppState } from '@common/hooks/use-app-state';
 import { SIDEBAR_WIDTH } from '@common/constants';
 // @ts-ignore
 import nav from '@common/navigation.yaml';
@@ -91,14 +91,16 @@ const SectionTitle: React.FC<BoxProps> = ({ children, ...rest }) => (
   </Text>
 );
 
-const getRoutePath = path => routes.find(route => route.path.endsWith(path));
+const getRoutePath = (path, routes) => routes.find(route => route.path.endsWith(path));
 
-const ChildPages = ({ items, handleClick }: any) =>
+const ChildPages = ({ items, handleClick }: any) => {
-  items?.pages
+  const { routes } = useAppState();
-    ? items?.pages?.map(page => {
+
+  return items?.pages
+    ? items?.pages?.map((page, key) => {
         if (page.external) {
           return (
-            <Box mb={space('extra-tight')}>
+            <Box mb={space('extra-tight')} key={key}>
               <PageItem as="a" href={page.external.href} target="_blank">
                 {page.external.title}
               </PageItem>
@@ -109,17 +111,17 @@ const ChildPages = ({ items, handleClick }: any) =>
         const path = page.pages
           ? `${page.path}${page.pages[0].path}`
           : items.path
-          ? '/' + slugify(items.path) + page.path
+          ? `/${slugify(items.path)}${page.path}`
           : page.path;
 
         const router = useRouter();
 
         const routePath = routes.find(route => route.path.endsWith(path));
 
-        const route = getRoutePath(path);
+        const route = getRoutePath(path, routes);
 
         return (
-          <Box mb={space('extra-tight')}>
+          <Box mb={space('extra-tight')} key={key}>
             <Link href={routePath.path} passHref>
               <PageItem
                 isActive={router.pathname.endsWith(path)}
@@ -133,11 +135,12 @@ const ChildPages = ({ items, handleClick }: any) =>
         );
       })
     : null;
+};
 
 const ChildSection: React.FC<BoxProps & { sections?: any }> = ({ sections, ...rest }) =>
-  sections.map(section => {
+  sections.map((section, key) => {
     return (
-      <Box {...rest}>
+      <Box {...rest} key={key}>
         <SectionTitle
           letterSpacing="0.06rem"
           textTransform="uppercase"
@@ -172,6 +175,7 @@ const BackItem = props => (
 );
 
 const Navigation = () => {
+  const { routes } = useAppState();
   const [selected, setSelected] = React.useState<any | undefined>({
     type: 'default',
     items: nav.sections,
@@ -187,11 +191,11 @@ const Navigation = () => {
       section.pages.forEach(page => {
         if (page.pages) {
           const pagesFound = page.pages.find(_page => {
-            return router.pathname.endsWith(page.path + _page.path);
+            return router.pathname.endsWith(`${page.path}${_page.path}`);
           });
           const sectionsFound = page?.sections?.find(_section => {
             return _section.pages.find(_page => {
-              return router.pathname.endsWith(page.path + _page.path);
+              return router.pathname.endsWith(`${page.path}${_page.path}`);
             });
           });
           if (pagesFound || sectionsFound) {
@@ -250,7 +254,7 @@ const Navigation = () => {
     const urlCategory = getCategory(router.pathname);
     return selected.items.map((section, i) => {
       return (
-        <Box mb="40px">
+        <Box mb="40px" key={i}>
           {section.title ? (
             <Flex width="100%" align="center" mb={space('loose')}>
               <SectionTitle>{section.title}</SectionTitle>
@@ -259,17 +263,17 @@ const Navigation = () => {
               </Box>
             </Flex>
           ) : null}
-          {section.pages.map(page => {
+          {section.pages.map((page, key) => {
             const path = page.pages
               ? `${page.path}${page.pages[0].path}`
               : section?.title
               ? `/${slugify(section?.title)}${page.path}`
               : page.path;
 
-            const route = getRoutePath(path);
+            const route = getRoutePath(path, routes);
 
             return (
-              <Box mb={space('extra-tight')}>
+              <Box mb={space('extra-tight')} key={`${i}-${key}`}>
                 <PageItem
                   href={!urlCategory ? path : !path.includes(urlCategory) && path}
                   isTopLevel={i === 0}

src/components/tooltip.tsx

@@ -4,12 +4,12 @@ import { useTooltip, TooltipPopup } from '@reach/tooltip';
 
 const centered = (triggerRect: any, tooltipRect: any) => {
   if (typeof window === 'undefined') return { left: 0, top: 0 };
-  const triggerCenter = triggerRect.left + triggerRect.width / 2;
+  const triggerCenter = (triggerRect.left as number) + (triggerRect.width as number) / 2;
   const left = triggerCenter - tooltipRect.width / 2;
   const maxLeft = window.innerWidth - tooltipRect.width - 2;
   return {
     left: Math.min(Math.max(2, left), maxLeft) + window.scrollX,
-    top: triggerRect.bottom + 8 + window.scrollY,
+    top: (triggerRect.bottom as number) + 8 + window.scrollY,
   };
 };
 

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.6":
+"@next/react-dev-overlay@9.5.2-canary.7":
-  version "9.5.2-canary.6"
+  version "9.5.2-canary.7"
-  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.2-canary.6.tgz#a1c057fc3d64abe6f2aa4caa50639cb1e3d83e5e"
+  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.2-canary.7.tgz#41f1f4a2513a897b548620f6e45df030602c495d"
-  integrity sha512-j7OL0bWMSTJO4YlMgiyRJ3MPphfeVtlQzZSeZJAGDuTDt3TSdMNo05HElgsYgZR9g2NVGIJkOqxZaz5+P/fggg==
+  integrity sha512-lDFIorQQE55Z62XvouJ7XcRw5EzU6LiZjoeilpnfpCXMyhPvxXR/XZ2P5WwM/6/+8o5DjvXlsEhyY2T2C9RJLQ==
   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.6":
+"@next/react-refresh-utils@9.5.2-canary.7":
-  version "9.5.2-canary.6"
+  version "9.5.2-canary.7"
-  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.2-canary.6.tgz#0e7ef8f4759af55add1115da1b8a3ed085f61df7"
+  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.2-canary.7.tgz#db801584c088a1a961c771eb5fbbbf91b5764e32"
-  integrity sha512-5Y4u7tHb8VIv0tAWqBj020lucp3VvfUYn8aI5hbu3bgvHvuWbffJ8MOlIQeLIMD9qzjeNz+far+Q6SDvFHH1aQ==
+  integrity sha512-6Lk9eEhwaK+KYCaaIqbCBTexw9J3BCJn4xJq589aW0IghWYXTFuJB/w3W4ZHxUFC4jJWvw6Y/eOpNvDQh05Xww==
 
 "@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.6:
+next@^9.5.2-canary.7:
-  version "9.5.2-canary.6"
+  version "9.5.2-canary.7"
-  resolved "https://registry.yarnpkg.com/next/-/next-9.5.2-canary.6.tgz#0ea1194028cd49427eb761d19e654f01a94cf138"
+  resolved "https://registry.yarnpkg.com/next/-/next-9.5.2-canary.7.tgz#4f753ba974e58c5f07a4d00eb484b3f4d38fc2cb"
-  integrity sha512-fCCQrQs42x6N//Nb88ZT2gsI7awIdtqu4nVHw/lLhahQGyHefb/8yDol0b2Zpud9siyj1FwfIMpVxRSOnZCsjg==
+  integrity sha512-Alo6nQf5VMr3X9kZYXPLjQDlKUMapRuRqRpf9VqgFjE2mxXPGEpfSz6EHz4KuQpcCYflE2RxrHaWKeL8+DgaIw==
   dependencies:
     "@ampproject/toolbox-optimizer" "2.5.14"
     "@babel/code-frame" "7.8.3"
@@ -6348,8 +6348,8 @@ next@^9.5.2-canary.6:
     "@babel/preset-typescript" "7.9.0"
     "@babel/runtime" "7.9.6"
     "@babel/types" "7.9.6"
-    "@next/react-dev-overlay" "9.5.2-canary.6"
+    "@next/react-dev-overlay" "9.5.2-canary.7"
-    "@next/react-refresh-utils" "9.5.2-canary.6"
+    "@next/react-refresh-utils" "9.5.2-canary.7"
     ast-types "0.13.2"
     babel-plugin-syntax-jsx "6.18.0"
     babel-plugin-transform-define "2.0.0"
@@ -9618,11 +9618,6 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
-"vscode-textmate@git+https://github.com/octref/vscode-textmate.git":
-  version "4.0.1"
-  uid e65aabe2227febda7beaad31dd0fca1228c5ddf3
-  resolved "git+https://github.com/octref/vscode-textmate.git#e65aabe2227febda7beaad31dd0fca1228c5ddf3"
-
 "vscode-textmate@https://github.com/octref/vscode-textmate":
   version "4.0.1"
   resolved "https://github.com/octref/vscode-textmate#e65aabe2227febda7beaad31dd0fca1228c5ddf3"