diff --git a/babel.config.js b/babel.config.js
index 8eb22cd3..ea05946c 100644
--- a/babel.config.js
+++ b/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 }],
],
};
diff --git a/next.config.js b/next.config.js
index 7fc693e2..2c81e1e4 100755
--- a/next.config.js
+++ b/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'),
diff --git a/src/common/_data/appFAQ.json b/src/_data/appFAQ.json
similarity index 100%
rename from src/common/_data/appFAQ.json
rename to src/_data/appFAQ.json
diff --git a/src/common/_data/clarityRef.json b/src/_data/clarityRef.json
similarity index 100%
rename from src/common/_data/clarityRef.json
rename to src/_data/clarityRef.json
diff --git a/src/common/_data/cliRef.js b/src/_data/cliRef.js
similarity index 100%
rename from src/common/_data/cliRef.js
rename to src/_data/cliRef.js
diff --git a/src/common/_data/faqs.json b/src/_data/faqs.json
similarity index 100%
rename from src/common/_data/faqs.json
rename to src/_data/faqs.json
diff --git a/src/common/_data/glossary.csv b/src/_data/glossary.csv
similarity index 100%
rename from src/common/_data/glossary.csv
rename to src/_data/glossary.csv
diff --git a/src/common/_includes/architecture.md b/src/_includes/architecture.md
similarity index 100%
rename from src/common/_includes/architecture.md
rename to src/_includes/architecture.md
diff --git a/src/common/_includes/contribute_code.md b/src/_includes/contribute_code.md
similarity index 100%
rename from src/common/_includes/contribute_code.md
rename to src/_includes/contribute_code.md
diff --git a/src/common/_includes/contribute_community.md b/src/_includes/contribute_community.md
similarity index 100%
rename from src/common/_includes/contribute_community.md
rename to src/_includes/contribute_community.md
diff --git a/src/common/_includes/contribute_issues.md b/src/_includes/contribute_issues.md
similarity index 100%
rename from src/common/_includes/contribute_issues.md
rename to src/_includes/contribute_issues.md
diff --git a/src/common/_includes/contribute_ovr.md b/src/_includes/contribute_ovr.md
similarity index 100%
rename from src/common/_includes/contribute_ovr.md
rename to src/_includes/contribute_ovr.md
diff --git a/src/common/_includes/create_id.md b/src/_includes/create_id.md
similarity index 100%
rename from src/common/_includes/create_id.md
rename to src/_includes/create_id.md
diff --git a/src/common/_includes/mining-ranking.md b/src/_includes/mining-ranking.md
similarity index 100%
rename from src/common/_includes/mining-ranking.md
rename to src/_includes/mining-ranking.md
diff --git a/src/common/_includes/required-fields.md b/src/_includes/required-fields.md
similarity index 100%
rename from src/common/_includes/required-fields.md
rename to src/_includes/required-fields.md
diff --git a/src/common/_includes/scaffolding.md b/src/_includes/scaffolding.md
similarity index 100%
rename from src/common/_includes/scaffolding.md
rename to src/_includes/scaffolding.md
diff --git a/src/common/_includes/sign_in.md b/src/_includes/sign_in.md
similarity index 100%
rename from src/common/_includes/sign_in.md
rename to src/_includes/sign_in.md
diff --git a/src/common/data/clarity-ref.ts b/src/common/data/clarity-ref.ts
new file mode 100644
index 00000000..67c957ff
--- /dev/null
+++ b/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,
+ },
+ },
+ };
+};
diff --git a/src/common/data/cli-ref.ts b/src/common/data/cli-ref.ts
new file mode 100644
index 00000000..16c77840
--- /dev/null
+++ b/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,
+ },
+ };
+};
diff --git a/src/common/data/faq.ts b/src/common/data/faq.ts
new file mode 100644
index 00000000..6de4f959
--- /dev/null
+++ b/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,
+ },
+ };
+};
diff --git a/src/common/glossary.ts b/src/common/data/glossary.ts
similarity index 81%
rename from src/common/glossary.ts
rename to src/common/data/glossary.ts
index cd7bd9f0..37f1d121 100644
--- a/src/common/glossary.ts
+++ b/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 => ({
diff --git a/src/common/data/mdx.ts b/src/common/data/mdx.ts
new file mode 100644
index 00000000..689a453e
--- /dev/null
+++ b/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 })));
diff --git a/src/common/mdx.ts b/src/common/mdx.ts
deleted file mode 100644
index 24c3cd94..00000000
--- a/src/common/mdx.ts
+++ /dev/null
@@ -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,
- },
- },
- };
-};
diff --git a/src/common/routes/get-routes.js b/src/common/routes/get-routes.js
index cbc2e2f5..f6afa34f 100644
--- a/src/common/routes/get-routes.js
+++ b/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(),
};
});
diff --git a/src/components/cli-reference.tsx b/src/components/cli-reference.tsx
index 1332e934..4dfb1f56 100644
--- a/src/components/cli-reference.tsx
+++ b/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';
diff --git a/src/components/code-block/index.tsx b/src/components/code-block/index.tsx
index 17db0824..e76afc5e 100644
--- a/src/components/code-block/index.tsx
+++ b/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 ;
-};
-
-CodeBlock.defaultProps = {
- mountStylesheet: false,
-};
+ return (
+
+ );
+ }
+);
export default CodeBlock;
diff --git a/src/components/feedback.tsx b/src/components/feedback.tsx
index 7fa1b953..ba13d404 100644
--- a/src/components/feedback.tsx
+++ b/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 }> = ({ icon: IconComponent, ...props }) => {
const [isHovered, bind] = useHover();
@@ -15,14 +16,31 @@ const Icon: React.FC }> = ({ icon: IconComponen
};
export const FeedbackSection: React.FC = props => {
+ const { pathname } = useRouter();
return (
-
- Was this page helpful?
-
-
-
-
-
-
+
+
+ Was this page helpful?
+
+
+
+
+
+
+
+
+ Edit this page on GitHub
+
+
+
);
};
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 652ec89d..0cbd388b 100644
--- a/src/components/footer.tsx
+++ b/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 (
diff --git a/src/components/home/sections/hero.tsx b/src/components/home/sections/hero.tsx
index 2b2d59aa..a935534e 100644
--- a/src/components/home/sections/hero.tsx
+++ b/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')}
diff --git a/src/components/mdx/components.tsx b/src/components/mdx/components.tsx
index 86d140a9..3abd7449 100644
--- a/src/components/mdx/components.tsx
+++ b/src/components/mdx/components.tsx
@@ -91,18 +91,20 @@ export const TData = (props: any) => (
/>
);
-export const Link = forwardRef((props: { href: string } & BoxProps, ref: Ref) => (
-
-));
+export const Link = forwardRef(
+ (props: { href: string; target?: string; rel?: string } & BoxProps, ref: Ref) => (
+
+ )
+);
export const TextItem = (props: any) => (