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) => (