fix: more clean up, bundle size

babel.config.js

@@ -3,12 +3,6 @@ module.exports = {
   plugins: [
     './lib/babel-plugin-nextjs-mdx-patch',
     'babel-plugin-macros',
-    [
-      'prismjs',
-      {
-        languages: ['bash', 'css', 'jsx', 'tsx', 'json', 'toml', 'python', 'kotlin', 'nginx'],
-      },
-    ],
     ['styled-components', { ssr: true }],
   ],
 };

next.config.js

@@ -7,7 +7,7 @@ const path = require('path');
 const remarkPlugins = [
   [
     require('@hashicorp/remark-plugins').includeMarkdown,
-    { resolveFrom: path.join(__dirname, 'src/common/_includes') },
+    { resolveFrom: path.join(__dirname, 'src/_includes') },
   ],
   require('remark-squeeze-paragraphs'),
   require('./lib/remark-paragraph-alerts'),

src/common/data/clarity-ref.ts

@@ -0,0 +1,28 @@
+import { convertRemoteDataToMDX } from '@common/data/mdx';
+import CLARITY_REFERENCE from '../../_data/clarityRef.json';
+
+export const convertClarityRefUsageToMdx = async () => {
+  const [_functions, _keywords] = await Promise.all([
+    convertRemoteDataToMDX(CLARITY_REFERENCE.functions, 'description'),
+    convertRemoteDataToMDX(CLARITY_REFERENCE.keywords, 'description'),
+  ]);
+
+  const functions = CLARITY_REFERENCE.functions.map((fn, index) => ({
+    ...fn,
+    description: _functions[index],
+  }));
+
+  const keywords = CLARITY_REFERENCE.keywords.map((fn, index) => ({
+    ...fn,
+    description: _keywords[index],
+  }));
+
+  return {
+    props: {
+      mdx: {
+        functions,
+        keywords,
+      },
+    },
+  };
+};

src/common/data/cli-ref.ts

@@ -0,0 +1,11 @@
+import { convertRemoteDataToMDX } from '@common/data/mdx';
+import { cliReferenceData } from '../../_data/cliRef';
+
+export const convertBlockstackCLIUsageToMdx = async () => {
+  const results = await convertRemoteDataToMDX(cliReferenceData, 'usage');
+  return {
+    props: {
+      mdx: results,
+    },
+  };
+};

src/common/data/faq.ts

@@ -0,0 +1,26 @@
+import { convertRemoteDataToMDX } from '@common/data/mdx';
+
+import FAQ_JSON from '../../_data/faqs.json';
+import TurndownService from 'turndown';
+
+export const convertFaqAnswersToMDX = async () => {
+  const turndownService = new TurndownService();
+  // we convert html to markdown so we can process it with remark,
+  // eg external links open in new window
+  const md = FAQ_JSON.faqs.map(faq => ({
+    ...faq,
+    answer: turndownService.turndown(faq.answer),
+  }));
+  // convert it to MDX with next-mdx-remote
+  const answers = await convertRemoteDataToMDX(md, 'answer');
+  const faqs = FAQ_JSON.faqs.map((faq, index) => ({
+    ...faq,
+    answer: answers[index],
+  }));
+
+  return {
+    props: {
+      mdx: faqs,
+    },
+  };
+};

src/common/glossary.ts → src/common/data/glossary.ts

@@ -1,16 +1,18 @@
-const csv = require('csvtojson');
+import csv from 'csvtojson';
 import TurndownService from 'turndown';
-import { convertRemoteDataToMDX } from '@common/mdx';
+import { convertRemoteDataToMDX } from '@common/data/mdx';
 
 export const convertGlossaryToJson = async () => {
   const turndownService = new TurndownService();
-  const data = await csv().fromFile('./src/common/_data/glossary.csv');
+  // convert csv to json
+  const data = await csv().fromFile('./src/_data/glossary.csv');
   const formatted = data
     .filter(entry => entry.Term !== '')
     .map(entry => ({
       term: entry['Term'],
       definition: entry['Definition'],
     }));
+
   // we convert html to markdown so we can process it with remark,
   // eg external links open in new window
   const md = formatted.map(entry => ({

src/common/data/mdx.ts

@@ -0,0 +1,17 @@
+import { MDXComponents } from '@components/mdx/mdx-components';
+import renderToString from 'next-mdx-remote/render-to-string';
+
+const remarkPlugins = [
+  require('remark-squeeze-paragraphs'),
+  require('remark-external-links'),
+  require('remark-emoji'),
+  require('remark-images'),
+  require('remark-unwrap-images'),
+  require('remark-normalize-headings'),
+  require('remark-slug'),
+];
+
+export const wrapValueInTicks = value => '`' + value.replace('`', '').replace('`', '') + '`';
+
+export const convertRemoteDataToMDX = async (arr: any[], key: string) =>
+  Promise.all(arr.map(entry => renderToString(entry[key], MDXComponents, { remarkPlugins })));

src/common/mdx.ts

@@ -1,78 +0,0 @@
-import { MDXComponents } from '@components/mdx/mdx-components';
-import { cliReferenceData } from '@common/_data/cliRef';
-import renderToString from 'next-mdx-remote/render-to-string';
-import CLARITY_REFERENCE from '@common/_data/clarityRef.json';
-import FAQ_JSON from '@common/_data/faqs.json';
-import TurndownService from 'turndown';
-
-const remarkPlugins = [
-  require('remark-squeeze-paragraphs'),
-  require('remark-external-links'),
-  require('remark-emoji'),
-  require('remark-images'),
-  require('remark-unwrap-images'),
-  require('remark-normalize-headings'),
-  require('remark-slug'),
-];
-
-export const wrapValueInTicks = value => '`' + value.replace('`', '').replace('`', '') + '`';
-
-export const convertRemoteDataToMDX = async (arr: any[], key: string) =>
-  Promise.all(arr.map(entry => renderToString(entry[key], MDXComponents, { remarkPlugins })));
-
-export const convertFaqAnswersToMDX = async () => {
-  const turndownService = new TurndownService();
-  // we convert html to markdown so we can process it with remark,
-  // eg external links open in new window
-  const md = FAQ_JSON.faqs.map(faq => ({
-    ...faq,
-    answer: turndownService.turndown(faq.answer),
-  }));
-  // convert it to MDX with next-mdx-remote
-  const answers = await convertRemoteDataToMDX(md, 'answer');
-  const faqs = FAQ_JSON.faqs.map((faq, index) => ({
-    ...faq,
-    answer: answers[index],
-  }));
-
-  return {
-    props: {
-      mdx: faqs,
-    },
-  };
-};
-
-export const convertBlockstackCLIUsageToMdx = async () => {
-  const results = await convertRemoteDataToMDX(cliReferenceData, 'usage');
-  return {
-    props: {
-      mdx: results,
-    },
-  };
-};
-
-export const convertClarityRefUsageToMdx = async () => {
-  const [_functions, _keywords] = await Promise.all([
-    convertRemoteDataToMDX(CLARITY_REFERENCE.functions, 'description'),
-    convertRemoteDataToMDX(CLARITY_REFERENCE.keywords, 'description'),
-  ]);
-
-  const functions = CLARITY_REFERENCE.functions.map((fn, index) => ({
-    ...fn,
-    description: _functions[index],
-  }));
-
-  const keywords = CLARITY_REFERENCE.keywords.map((fn, index) => ({
-    ...fn,
-    description: _keywords[index],
-  }));
-
-  return {
-    props: {
-      mdx: {
-        functions,
-        keywords,
-      },
-    },
-  };
-};

src/common/routes/get-routes.js

@@ -139,7 +139,6 @@ const getHeadings = mdContent => {
 const routes = sections.map(section => {
   const _routes = section.routes.map(route => {
     try {
-      const extension = /\.(mdx?)$/;
       const fileContent = fs.readFileSync(path.join('./src/pages/', route.path + '.md'), 'utf8');
       const data = fm(fileContent);
       const headings = getHeadings(data.body);
@@ -155,7 +154,6 @@ const routes = sections.map(section => {
   return {
     ...section,
     routes: _routes,
-    directory: process.cwd(),
   };
 });
 

src/components/cli-reference.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { cliReferenceData } from '@common/_data/cliRef';
+import { cliReferenceData } from '@common/../_data/cliRef';
 import { MDXComponents } from '@components/mdx/mdx-components';
 import { Grid, Box } from '@blockstack/ui';
 import { border } from '@common/utils';

src/components/code-block/index.tsx

@@ -11,19 +11,24 @@ import 'prismjs/components/prism-kotlin';
 import { SimpleCodeBlock } from '@components/code-block/components';
 import { useForceUpdate } from '@blockstack/ui';
 
-export const CodeBlock = ({ className, live = true, isManual, render, children, ...props }) => {
-  const update = useForceUpdate();
-  React.useEffect(() => {
-    update();
-  }, []);
+export const CodeBlock = React.memo(
+  ({ className, live = true, isManual, render, children, ...props }: any) => {
+    const update = useForceUpdate();
+    React.useEffect(() => {
+      update();
+    }, []);
 
-  const language = className && className.replace(/language-/, '');
+    const language = className && className.replace(/language-/, '');
 
-  return <SimpleCodeBlock editorCode={children.toString()} language={language} {...props} />;
-};
-
-CodeBlock.defaultProps = {
-  mountStylesheet: false,
-};
+    return (
+      <SimpleCodeBlock
+        editorCode={children.toString()}
+        showLineNumbers={language !== 'bash'}
+        language={language}
+        {...props}
+      />
+    );
+  }
+);
 
 export default CodeBlock;

src/components/feedback.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Box, BoxProps, color, Flex, space, Stack, themeColor } from '@blockstack/ui';
-import { MDXComponents } from '@components/mdx';
+import { MDXComponents, Link } from '@components/mdx';
 import { SadIcon, NeutralIcon, HappyIcon } from '@components/icons/feedback';
 import { useHover } from 'use-events';
 import { border } from '@common/utils';
+import { useRouter } from 'next/router';
 
 const Icon: React.FC<BoxProps & { icon: React.FC<any> }> = ({ icon: IconComponent, ...props }) => {
   const [isHovered, bind] = useHover();
@@ -15,14 +16,31 @@ const Icon: React.FC<BoxProps & { icon: React.FC<any> }> = ({ icon: IconComponen
 };
 
 export const FeedbackSection: React.FC<BoxProps> = props => {
+  const { pathname } = useRouter();
   return (
-    <Box borderTop={border()} mt={space('extra-loose')}>
-      <MDXComponents.h3>Was this page helpful?</MDXComponents.h3>
-      <Stack isInline spacing={space('base-loose')} mt={space('base-loose')}>
-        <Icon icon={SadIcon} />
-        <Icon icon={NeutralIcon} />
-        <Icon icon={HappyIcon} />
-      </Stack>
-    </Box>
+    <Flex
+      flexDirection={['column', 'column', 'row']}
+      justifyContent="space-between"
+      borderTop={border()}
+      mt={space('extra-loose')}
+    >
+      <Box>
+        <MDXComponents.h3>Was this page helpful?</MDXComponents.h3>
+        <Stack isInline spacing={space('base-loose')} mt={space('base-loose')}>
+          <Icon icon={SadIcon} />
+          <Icon icon={NeutralIcon} />
+          <Icon icon={HappyIcon} />
+        </Stack>
+      </Box>
+      <Box mt={space(['extra-loose', 'extra-loose', 'base-loose'])}>
+        <Link
+          href={`https://github.com/blockstack/docs.blockstack/tree/feat/next/src/pages${pathname}.md`}
+          target="_blank"
+          rel="nofollow noopener noreferrer"
+        >
+          Edit this page on GitHub
+        </Link>
+      </Box>
+    </Flex>
   );
 };

src/components/footer.tsx

@@ -3,6 +3,7 @@ import { Pagination } from '@components/pagination';
 import { Section, SectionWrapper } from '@components/home/common';
 import { FeedbackSection } from '@components/feedback';
 
+
 const Footer = ({ hidePagination, ...rest }: any) => {
   return (
     <Section>

src/components/home/sections/hero.tsx

@@ -22,7 +22,12 @@ export const Hero = ({ cards }: { cards?: any }) => {
         width="100%"
         gridGap={space('extra-loose')}
         minHeight="200px"
-        gridTemplateColumns={['repeat(1, 1fr)', 'repeat(2, 1fr)', 'repeat(3, 1fr)']}
+        gridTemplateColumns={[
+          'repeat(1, 1fr)',
+          'repeat(1, 1fr)',
+          'repeat(2, 1fr)',
+          'repeat(3, 1fr)',
+        ]}
         mx="auto"
         mt={space('extra-loose')}
         px={space('extra-loose')}

src/components/mdx/components.tsx

@@ -91,18 +91,20 @@ export const TData = (props: any) => (
   />
 );
 
-export const Link = forwardRef((props: { href: string } & BoxProps, ref: Ref<HTMLDivElement>) => (
-  <Box
-    as="a"
-    ref={ref}
-    color="var(--colors-accent)"
-    cursor="pointer"
-    textDecoration="underline"
-    _hover={{ textDecoration: 'none' }}
-    _focus={{ boxShadow: 'outline' }}
-    {...props}
-  />
-));
+export const Link = forwardRef(
+  (props: { href: string; target?: string; rel?: string } & BoxProps, ref: Ref<HTMLDivElement>) => (
+    <Box
+      as="a"
+      ref={ref}
+      color="var(--colors-accent)"
+      cursor="pointer"
+      textDecoration="underline"
+      _hover={{ textDecoration: 'none' }}
+      _focus={{ boxShadow: 'outline' }}
+      {...props}
+    />
+  )
+);
 
 export const TextItem = (props: any) => (
   <Text

src/pages/core/cmdLineRef.md

@@ -2,7 +2,7 @@
 title: Blockstack CLI Reference
 ---
 
-export { convertBlockstackCLIUsageToMdx as getStaticProps } from '@common/mdx'
+export { convertBlockstackCLIUsageToMdx as getStaticProps } from '@common/data/cli-ref'
 import { CLIReferenceTable } from '@components/cli-reference'
 
 # Blockstack CLI reference

src/pages/core/faq_developer.md

@@ -2,7 +2,7 @@
 description: Blockstack DApp technical FAQs
 ---
 
-export { convertFaqAnswersToMDX as getStaticProps } from '@common/mdx'
+export { convertFaqAnswersToMDX as getStaticProps } from '@common/data/faq'
 import { FAQs } from '@components/faq'
 
 # DApp Developer FAQs

src/pages/core/faq_technical.md

@@ -1,4 +1,4 @@
-export { convertFaqAnswersToMDX as getStaticProps } from '@common/mdx'
+export { convertFaqAnswersToMDX as getStaticProps } from '@common/data/faq'
 import { FAQs } from '@components/faq'
 
 # Technical FAQ

src/pages/core/smart/clarityRef.md

@@ -2,7 +2,7 @@
 description: 'See a detailed list of all keywords and functions for the Clarity language.'
 ---
 
-export { convertClarityRefUsageToMdx as getStaticProps } from '@common/mdx'
+export { convertClarityRefUsageToMdx as getStaticProps } from '@common/data/clarity-ref'
 import { ClarityKeywordReference, ClarityFunctionReference } from '@components/clarity-ref'
 
 # Clarity Language Reference

src/pages/faqs/allFAQS.md

@@ -4,7 +4,7 @@ description: 'Blockstack Network documentation'
 redirect_from: /org/voucherholder
 ---
 
-export { convertFaqAnswersToMDX as getStaticProps } from '@common/mdx'
+export { convertFaqAnswersToMDX as getStaticProps } from '@common/data/faq'
 import { FAQs } from '@components/faq'
 
 # Blockstack FAQs

src/pages/org/faq.md

@@ -2,7 +2,7 @@
 description: 'Blockstack Network documentation'
 ---
 
-export { convertFaqAnswersToMDX as getStaticProps } from '@common/mdx'
+export { convertFaqAnswersToMDX as getStaticProps } from '@common/data/faq'
 import { FAQs } from '@components/faq'
 
 # FAQs about Stacks tokens and wallet

src/pages/org/terms.md

@@ -2,7 +2,7 @@
 description: 'Blockstack Network documentation'
 ---
 
-export { convertGlossaryToJson as getStaticProps } from '@common/glossary'
+export { convertGlossaryToJson as getStaticProps } from '@common/data/glossary'
 import { Glossary } from '@components/glossary'
 
 # Glossary

src/pages/org/wallet-troubleshoot.md

@@ -2,7 +2,7 @@
 description: 'How to use the Blockstack Software'
 ---
 
-export { convertFaqAnswersToMDX as getStaticProps } from '@common/mdx'
+export { convertFaqAnswersToMDX as getStaticProps } from '@common/data/faq'
 import { FAQs } from '@components/faq'
 
 <!--  TODO: very out of date, update content -->