From 30d30374ac653aec78abb8329399baaf43040762 Mon Sep 17 00:00:00 2001 From: Thomas Osmonson Date: Tue, 21 Jul 2020 16:11:58 -0500 Subject: [PATCH] feat: better bundle size, new header, highlighter fixes --- next.config.js | 5 + package.json | 2 +- src/components/code-block/components.tsx | 100 -------- src/components/code-block/index.tsx | 94 +++++-- src/components/feedback.tsx | 88 ++++++- src/components/footer.tsx | 1 - src/components/header.tsx | 237 +++++++++++++----- src/components/highlighter/index.tsx | 230 +++++++++++++++++ .../highlighter/language-definition.tsx | 117 +++++++++ src/components/highlighter/nord.css | 205 +++++++++++++++ src/components/highlighter/prism-theme.ts | 140 +++++++++++ src/components/highlighter/types.ts | 90 +++++++ src/components/home/sections/hero.tsx | 3 +- src/components/layouts/docs-layout.tsx | 12 +- src/components/mdx/mdx-components.tsx | 2 +- src/components/side-nav.tsx | 7 +- src/pages/browser/todo-list.md | 2 +- src/pages/org/wallet-use.md | 2 +- yarn.lock | 2 +- 19 files changed, 1131 insertions(+), 208 deletions(-) delete mode 100644 src/components/code-block/components.tsx create mode 100644 src/components/highlighter/index.tsx create mode 100644 src/components/highlighter/language-definition.tsx create mode 100644 src/components/highlighter/nord.css create mode 100644 src/components/highlighter/prism-theme.ts create mode 100644 src/components/highlighter/types.ts diff --git a/next.config.js b/next.config.js index 2c81e1e4..a6de3eda 100755 --- a/next.config.js +++ b/next.config.js @@ -2,6 +2,8 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', }); +const webpack = require('webpack'); + const path = require('path'); const remarkPlugins = [ @@ -68,6 +70,9 @@ module.exports = withBundleAnalyzer({ aliases.react = aliases['react-dom'] = 'preact/compat'; aliases['react-ssr-prepass'] = 'preact-ssr-prepass'; + // to fix a dupe dependency + config.externals.push('prismjs'); + // https://github.com/FormidableLabs/react-live#what-bundle-size-can-i-expect aliases['buble'] = '@philpl/buble'; } diff --git a/package.json b/package.json index b6efb5d5..84ed3fed 100755 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "preact-ssr-prepass": "^1.1.0", "prettier": "^2.0.5", "preval.macro": "^5.0.0", - "prism-react-renderer": "^1.0.2", + "prism-react-renderer": "^1.1.1", "prismjs": "^1.20.0", "react-children-utilities": "^2.1.3", "react-gesture-responder": "^2.1.0", diff --git a/src/components/code-block/components.tsx b/src/components/code-block/components.tsx deleted file mode 100644 index 3aed3923..00000000 --- a/src/components/code-block/components.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import React, { useContext } from 'react'; -import { LiveProvider, LiveContext, LivePreview } from 'react-live'; -import { - Flex, - Button, - Box, - CodeBlock as BaseCodeBlock, - space, - useClipboard, - BoxProps, -} from '@blockstack/ui'; -import { CodeEditor } from '@components/code-editor'; -import { Text } from '@components/typography'; -import { border } from '@common/utils'; - -const Error = () => { - const { error } = useContext(LiveContext); - - return error ? : null; -}; - -export const liveEditorStyle = { - fontSize: 14, - marginBottom: 24, - marginTop: 24, - overflowX: 'auto', - fontFamily: 'Menlo,monospace', - borderRadius: 10, -}; - -export const liveErrorStyle = { - fontFamily: 'Fira Mono, monospace', - fontSize: 14, - padding: '1em', - overflowX: 'auto', - color: 'white', - marginTop: '16px', - border: '1px solid var(--colors-border)', - backgroundColor: 'var(--colors-bg-light)', -}; - -export const LiveCodePreview = (props: any) => ( - - - -); - -const Label = (props: BoxProps) => ( - -); - -export const JsxEditor = ({ liveProviderProps, editorCode, handleCodeChange, language }) => { - const { hasCopied, onCopy } = useClipboard(editorCode); - return ( - - - - - - - - - - - - - - ); -}; - -export const Preview = ({ liveProviderProps }) => ( - - - - - -); - -export const SimpleCodeBlock = ({ editorCode, language, ...rest }) => ( - -); diff --git a/src/components/code-block/index.tsx b/src/components/code-block/index.tsx index e76afc5e..7fbeb496 100644 --- a/src/components/code-block/index.tsx +++ b/src/components/code-block/index.tsx @@ -7,28 +7,80 @@ import 'prismjs/components/prism-json'; import 'prismjs/components/prism-toml'; import 'prismjs/components/prism-python'; import 'prismjs/components/prism-kotlin'; +import { Highlighter, HighlighterProps } from '../highlighter'; +import { Box, BoxProps } from '@blockstack/ui'; +import { css } from '@styled-system/css'; -import { SimpleCodeBlock } from '@components/code-block/components'; -import { useForceUpdate } from '@blockstack/ui'; - -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-/, ''); - - return ( - - ); - } +interface CodeBlock { + live?: boolean; + highlight?: string; +} + +export type CodeBlockProps = CodeBlock & HighlighterProps & BoxProps; + +const getHighlightLineNumbers = str => + str && + str + .split(' ') + .join('') + .split(',') + .flatMap(s => { + if (!s.includes('-')) return +s; + + const [min, max] = s.split('-'); + + return Array.from({ length: max - min + 1 }, (_, n) => n + +min); + }); + +const CodeBlock = React.memo( + React.forwardRef( + ( + { + code, + showLineNumbers, + hideLineHover, + style = {}, + highlightedLines, + className, + live = true, + highlight, + children, + ...props + }: CodeBlockProps, + ref: React.Ref + ) => { + const language = className && className.replace(/language-/, ''); + + return ( + + + + + + ); + } + ) ); export default CodeBlock; diff --git a/src/components/feedback.tsx b/src/components/feedback.tsx index ba13d404..e9d7933b 100644 --- a/src/components/feedback.tsx +++ b/src/components/feedback.tsx @@ -1,5 +1,17 @@ import React from 'react'; -import { Box, BoxProps, color, Flex, space, Stack, themeColor } from '@blockstack/ui'; +import { + Box, + Button, + BoxProps, + color, + Flex, + space, + Stack, + themeColor, + transition, + SlideFade, +} from '@blockstack/ui'; +import { Text } from '@components/typography'; import { MDXComponents, Link } from '@components/mdx'; import { SadIcon, NeutralIcon, HappyIcon } from '@components/icons/feedback'; import { useHover } from 'use-events'; @@ -15,8 +27,63 @@ const Icon: React.FC }> = ({ icon: IconComponen ); }; +const FeedbackCard = ({ show, onClose }) => { + return ( + + {styles => ( + + + + + + + Dismiss + + + + + + )} + + ); +}; + export const FeedbackSection: React.FC = props => { const { pathname } = useRouter(); + const [showButton, setShowButton] = React.useState(false); + const handleShow = () => { + setShowButton(!showButton); + }; return ( = props => { borderTop={border()} mt={space('extra-loose')} > - - Was this page helpful? - - - - - - + + + Was this page helpful? + + handleShow()} icon={SadIcon} /> + handleShow()} icon={NeutralIcon} /> + handleShow()} icon={HappyIcon} /> + + + setShowButton(false)} /> + { return (
diff --git a/src/components/header.tsx b/src/components/header.tsx index 358d5eb0..e1de1746 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -1,6 +1,16 @@ import React from 'react'; -import { Flex, Box, BlockstackIcon, Portal, Input, color, space } from '@blockstack/ui'; -import { Link, Text } from '@components/typography'; +import { + Flex, + Box, + BlockstackIcon, + Stack, + color, + space, + themeColor, + transition, + ChevronIcon, +} from '@blockstack/ui'; +import { Link, Text, LinkProps } from '@components/typography'; import MenuIcon from 'mdi-react/MenuIcon'; import CloseIcon from 'mdi-react/CloseIcon'; import { useLockBodyScroll } from '@common/hooks/use-lock-body-scroll'; @@ -9,10 +19,12 @@ import { SideNav } from './side-nav'; import GithubIcon from 'mdi-react/GithubIcon'; import { IconButton } from '@components/icon-button'; import { border } from '@common/utils'; -import useSWR from 'swr'; -import { useAppState } from '@common/hooks/use-app-state'; +import routes from '@common/routes'; import { css } from '@styled-system/css'; import NextLink from 'next/link'; +import MagnifyIcon from 'mdi-react/MagnifyIcon'; +import { useRouter } from 'next/router'; + const MenuButton = ({ ...rest }: any) => { const { isOpen, handleOpen, handleClose } = useMobileMenuState(); const Icon = isOpen ? CloseIcon : MenuIcon; @@ -28,8 +40,50 @@ const MenuButton = ({ ...rest }: any) => { ); }; +const BreadCrumbs: React.FC = props => { + const router = useRouter(); + const [route, setRoute] = React.useState(undefined); + const [section, setSection] = React.useState(undefined); + React.useEffect(() => { + routes.forEach(_section => { + _section?.routes?.length && + _section.routes.forEach(_route => { + if (router.route === `/${_route.path}`) { + setSection(_section); + setRoute(_route); + } + }); + }); + }, [router.route]); -const GithubButton = () => ( + return ( + + + + Docs + + + + + + + + {section?.title} + + + + + + + + {route?.title || (route?.headings.length && route.headings[0])} + + + + ); +}; + +const GithubButton = (props: LinkProps) => ( ( style={{ alignItems: 'center', }} + {...props} > Find us on GitHub @@ -56,8 +111,8 @@ const MobileSideNav = () => { return ( { ); }; -const Header = ({ ...rest }: any) => { +const HeaderWrapper: React.FC = props => ( + +); + +const nav = [ + { + label: 'Developers', + }, + { label: 'Run a node' }, + { label: 'Build on Blockstack' }, +]; +const SubBar: React.FC = props => ( + + + + + + +); + +export const HEADER_HEIGHT = 132; + +const Header = ({ hideSubBar, ...rest }: any) => { return ( <> - - - - - - - - - - Blockstack - - - - - - - - + + + + + + + + + + + Blockstack + + + + + + + + + {nav.map(item => ( + + + {item.label} + + + ))} + + + + + - + {!hideSubBar && } + ); diff --git a/src/components/highlighter/index.tsx b/src/components/highlighter/index.tsx new file mode 100644 index 00000000..6119da7d --- /dev/null +++ b/src/components/highlighter/index.tsx @@ -0,0 +1,230 @@ +import React from 'react'; +import Highlight from 'prism-react-renderer'; +import { Box, Flex, space, useTheme } from '@blockstack/ui'; +import { GrammaticalToken, GetGrammaticalTokenProps, RenderProps, Language } from './types'; +import Prism from 'prism-react-renderer/prism'; +import { theme } from '@components/highlighter/prism-theme'; +import './language-definition'; +import { css } from '@styled-system/css'; + +const startPad = (n: number, z = 2, s = '0') => + (n + '').length <= z ? ['', '-'][+(n < 0)] + (s.repeat(z) + Math.abs(n)).slice(-1 * z) : n + ''; + +const LINE_NUMBER_WIDTH = 50; +const getLineNumber = (n: number, length: number) => startPad(n + 1, length.toString().length); + +const Tokens = ({ + tokens, + getTokenProps, + showLineNumbers, + ...rest +}: { + tokens: GrammaticalToken[]; + getTokenProps: GetGrammaticalTokenProps; + showLineNumbers?: boolean; +}) => { + const bsTheme = useTheme(); + const pl = showLineNumbers + ? [`calc(${LINE_NUMBER_WIDTH}px + ${(bsTheme as any).sizes['base']})`] + : ['unset', 'unset', 'base', 'base']; + + return ( + + {tokens.map( + (token, key) => + token.content !== '// highlight' && ( + + ) + )} + + ); +}; +const LineNumber = ({ number, length, ...rest }: { number: number; length: number }) => ( + + {getLineNumber(number, length)} + +); + +const Line = ({ + tokens, + getTokenProps, + index, + length, + showLineNumbers, + hideLineHover, + highlighted, + ...rest +}: { + tokens: GrammaticalToken[]; + index: number; + length: number; + getTokenProps: GetGrammaticalTokenProps; + showLineNumbers?: boolean; + hideLineHover?: boolean; + highlighted?: boolean; +}) => { + const highlightedStyle = { + bg: ['unset', 'unset', 'ink.900'], + borderColor: ['ink.900', 'ink.900', 'ink.600'], + }; + const hasHighlightComment = !!tokens.find(token => token.content === '// highlight'); + const isHighlighted = highlighted || hasHighlightComment; + const highlighedProps = isHighlighted ? highlightedStyle : {}; + + return ( + + {showLineNumbers ? : null} + + + ); +}; + +const Spacer = ({ showLineNumbers }: { showLineNumbers?: boolean }) => ( + + {showLineNumbers && ( + + )} + +); +const Lines = ({ + tokens: lines, + getLineProps, + getTokenProps, + className, + showLineNumbers, + hideLineHover, + highlightedLines, +}: { + showLineNumbers?: boolean; + hideLineHover?: boolean; + highlightedLines?: number[]; +} & RenderProps) => { + return ( + + + + {lines.map((tokens, i) => ( + *': { + fontFamily: 'Fira Code, Consolata, monospace', + fontSize: '14.556040756914118px', + lineHeight: '24px', + padding: '0.05px 0', + '::before': { + content: "''", + marginTop: '-0.47483499999999995em', + display: 'block', + height: 0, + }, + '::after': { + content: "''", + marginBottom: '-0.493835em', + display: 'block', + height: 0, + }, + }, + })} + > + lineNumber === i) + } + hideLineHover={hideLineHover || lines.length < 3} + {...getLineProps({ line: tokens, key: i })} + /> + + ))} + + + + ); +}; + +export interface HighlighterProps { + code: string; + language?: Language; + showLineNumbers?: boolean; + hideLineHover?: boolean; + highlightedLines?: number[]; +} + +export const Highlighter = React.memo( + ({ + code, + language = 'clarity', + showLineNumbers, + hideLineHover, + highlightedLines, + }: HighlighterProps) => { + return ( + + {props => ( + + )} + + ); + } +); + +Highlighter.displayName = 'Highlighter'; diff --git a/src/components/highlighter/language-definition.tsx b/src/components/highlighter/language-definition.tsx new file mode 100644 index 00000000..019abb32 --- /dev/null +++ b/src/components/highlighter/language-definition.tsx @@ -0,0 +1,117 @@ +// @ts-nocheck +import Prism from 'prism-react-renderer/prism'; + +(function (Prism) { + // Functions to construct regular expressions + // simple form + // e.g. (interactive ... or (interactive) + function simple_form(name) { + return RegExp('(\\()' + name + '(?=[\\s\\)])'); + } + // booleans and numbers + function primitive(pattern) { + return RegExp('([\\s([])' + pattern + '(?=[\\s)])'); + } + + // Patterns in regular expressions + + // Open parenthesis for look-behind + const par = '(\\()'; + const endpar = '(?=\\))'; + // End the pattern with look-ahead space + const space = '(?=\\s)'; + + const language = { + // Three or four semicolons are considered a heading. + heading: { + pattern: /;;;.*/, + alias: ['comment', 'title'], + }, + comment: /;;.*/, + string: [ + { + pattern: /"(?:[^"\\]|\\.)*"/, + greedy: true, + }, + { + pattern: /0x[0-9a-fA-F]*/, + greedy: true, + }, + ], + symbol: { + pattern: /'[^()#'\s]+/, + greedy: true, + }, + keyword: [ + { + pattern: RegExp( + par + + '(?:or|and|xor|not|begin|let|if|ok|err|unwrap\\!|unwrap-err\\!|unwrap-panic|unwrap-err-panic|match|try\\!|asserts\\!|\ +map-get\\?|var-get|contract-map-get\\?|get|tuple|\ +define-public|define-private|define-constant|define-map|define-data-var|\ +define-fungible-token|define-non-fungible-token|\ +define-read-only)' + + space + ), + lookbehind: true, + }, + { + pattern: RegExp(par + '(?:is-eq|is-some|is-none|is-ok|is-er)' + space), + lookbehind: true, + }, + { + pattern: RegExp( + par + + '(?:var-set|map-set|map-delete|map-insert|\ +ft-transfer\\?|nft-transfer\\?|nft-mint\\?|ft-mint\\?|nft-get-owner\\?|ft-get-balance\\?|\ +contract-call\\?)' + + space + ), + lookbehind: true, + }, + { + pattern: RegExp( + par + + '(?:list|map|filter|fold|len|concat|append|as-max-len\\?|to-int|to-uint|\ +buff|hash160|sha256|sha512|sha512/256|keccak256|true|false|none)' + + space + ), + lookbehind: true, + }, + { + pattern: RegExp( + par + + '(?:as-contract|contract-caller|tx-sender|block-height|at-block|get-block-info\\?)' + + space + ), + lookbehind: true, + }, + { + pattern: RegExp(par + '(?:is-eq|is-some|is-none|is-ok|is-err)' + space), + lookbehind: true, + }, + ], + boolean: /(?:false|true|none)/, + number: { + pattern: primitive('[-]?u?\\d+'), + lookbehind: true, + }, + address: { + pattern: /([\s()])(?:\'[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{28,41})(?=[()\s]|$)/, + lookbehind: true, + }, + operator: { + pattern: /(\()(?:[-+*\/]|[<>]=?|=>?)(?=[()\s]|$)/, + lookbehind: true, + }, + function: { + pattern: /(\()[^()'\s]+(?=[()\s]|$)/, + lookbehind: true, + }, + punctuation: /[()']/, + }; + + if (Prism && Prism.languages) { + Prism.languages.clarity = language; + } +})(Prism); diff --git a/src/components/highlighter/nord.css b/src/components/highlighter/nord.css new file mode 100644 index 00000000..4d1da234 --- /dev/null +++ b/src/components/highlighter/nord.css @@ -0,0 +1,205 @@ +code[class*="language-"], +pre[class*="language-"] { + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + color: #eee; + background: #2f2f2f; + font-family: Roboto Mono, monospace; + font-size: 1em; + line-height: 1.5em; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +code[class*="language-"]::-moz-selection, +pre[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection, +pre[class*="language-"] ::-moz-selection { + background: #363636; +} + +code[class*="language-"]::selection, +pre[class*="language-"]::selection, +code[class*="language-"] ::selection, +pre[class*="language-"] ::selection { + background: #363636; +} + +:not(pre) > code[class*="language-"] { + white-space: normal; + border-radius: 0.2em; + padding: 0.1em; +} + +pre[class*="language-"] { + overflow: auto; + position: relative; + margin: 0.5em 0; + padding: 1.25em 1em; +} + +.language-css > code, +.language-sass > code, +.language-scss > code { + color: #fd9170; +} + +[class*="language-"] .namespace { + opacity: 0.7; +} + +.token.atrule { + color: #c792ea; +} + +.token.attr-name { + color: #ffcb6b; +} + +.token.attr-value { + color: #a5e844; +} + +.token.attribute { + color: #a5e844; +} + +.token.boolean { + color: #c792ea; +} + +.token.builtin { + color: #ffcb6b; +} + +.token.cdata { + color: #80cbc4; +} + +.token.char { + color: #80cbc4; +} + +.token.class { + color: #ffcb6b; +} + +.token.class-name { + color: #f2ff00; +} + +.token.comment { + color: #616161; +} + +.token.constant { + color: #c792ea; +} + +.token.deleted { + color: #ff6666; +} + +.token.doctype { + color: #616161; +} + +.token.entity { + color: #ff6666; +} + +.token.function { + color: #c792ea; +} + +.token.hexcode { + color: #f2ff00; +} + +.token.id { + color: #c792ea; + font-weight: bold; +} + +.token.important { + color: #c792ea; + font-weight: bold; +} + +.token.inserted { + color: #80cbc4; +} + +.token.keyword { + color: #c792ea; +} + +.token.number { + color: #fd9170; +} + +.token.operator { + color: #89ddff; +} + +.token.prolog { + color: #616161; +} + +.token.property { + color: #80cbc4; +} + +.token.pseudo-class { + color: #a5e844; +} + +.token.pseudo-element { + color: #a5e844; +} + +.token.punctuation { + color: #89ddff; +} + +.token.regex { + color: #f2ff00; +} + +.token.selector { + color: #ff6666; +} + +.token.string { + color: #a5e844; +} + +.token.symbol { + color: #c792ea; +} + +.token.tag { + color: #ff6666; +} + +.token.unit { + color: #fd9170; +} + +.token.url { + color: #ff6666; +} + +.token.variable { + color: #ff6666; +} diff --git a/src/components/highlighter/prism-theme.ts b/src/components/highlighter/prism-theme.ts new file mode 100644 index 00000000..c5159165 --- /dev/null +++ b/src/components/highlighter/prism-theme.ts @@ -0,0 +1,140 @@ +import { PrismTheme } from 'prism-react-renderer'; + +export const theme: PrismTheme = { + plain: { + color: 'rgba(255,255,255,1)', + backgroundColor: '#0f111a', + }, + styles: [ + { + types: ['string'], + style: { + color: 'rgb(195, 232, 141)', + }, + }, + { + types: ['boolean'], + style: { + color: 'rgb(255, 156, 172)', + }, + }, + { + types: ['number', 'keyword', 'operator'], + style: { + color: 'rgb(247, 140, 108)', + }, + }, + { + types: ['comment'], + style: { + color: 'rgba(255,255,255,0.6)', + fontStyle: 'italic', + }, + }, + { + types: ['punctuation', 'builtin'], + style: { + color: 'rgb(137, 221, 255)', + }, + }, + { + types: ['tag'], + style: { + color: 'rgb(240, 113, 120)', + }, + }, + { + types: ['attr-name'], + style: { + color: 'rgb(255, 203, 107)', + }, + }, + { + types: ['function'], + style: { + color: 'rgb(130, 170, 255)', + }, + }, + { + types: ['constant'], + style: { + color: 'rgb(137, 221, 255)', + fontStyle: 'italic', + }, + }, + ], +}; +// export const theme: PrismTheme = { +// plain: { +// color: '#fff', +// backgroundColor: 'transparent', +// }, +// styles: [ +// { +// types: ['prolog'], +// style: { +// color: 'rgb(0, 0, 128)', +// }, +// }, +// { +// types: ['comment', 'punctuation'], +// style: { +// color: 'rgb(106, 153, 85)', +// }, +// }, +// { +// types: ['builtin', 'tag', 'changed', 'function', 'keyword'], +// style: { +// color: 'rgb(86, 156, 214)', +// }, +// }, +// { +// types: ['number', 'variable', 'inserted'], +// style: { +// color: '#A58FFF', +// }, +// }, +// { +// types: ['operator'], +// style: { +// color: 'rgb(212, 212, 212)', +// }, +// }, +// { +// types: ['constant'], +// style: { +// color: 'rgb(100, 102, 149)', +// }, +// }, +// { +// types: ['attr-name'], +// style: { +// color: 'rgb(156, 220, 254)', +// }, +// }, +// { +// types: ['car'], +// style: { +// color: 'rgb(156, 220, 254)', +// }, +// }, +// { +// types: ['deleted', 'string'], +// style: { +// color: '#FF7B48', +// }, +// }, +// { +// types: ['class-name'], +// style: { +// color: 'rgb(78, 201, 176)', +// }, +// }, +// { +// types: ['char'], +// style: { +// color: '#FF7B48', +// }, +// }, +// ], +// }; diff --git a/src/components/highlighter/types.ts b/src/components/highlighter/types.ts new file mode 100644 index 00000000..4f5bfcf0 --- /dev/null +++ b/src/components/highlighter/types.ts @@ -0,0 +1,90 @@ +import * as React from 'react'; + +export interface GrammaticalToken { + types: string[]; + content: string; + empty?: boolean; +} + +export interface StyleObj { + [key: string]: string | number | null; +} + +export interface GrammaticalTokenOutputProps { + key?: React.Key; + style?: StyleObj; + className: string; + children: string; + [otherProp: string]: any; +} + +export interface GrammaticalTokenInputProps { + key?: React.Key; + style?: StyleObj; + className?: string; + token: GrammaticalToken; + [otherProp: string]: any; +} + +export interface LineInputProps { + key?: React.Key; + style?: StyleObj; + className?: string; + line: GrammaticalToken[]; + [otherProp: string]: any; +} + +export interface LineOutputProps { + key?: React.Key; + style?: StyleObj; + className: string; + [otherProps: string]: any; +} + +export interface RenderProps { + tokens: GrammaticalToken[][]; + className: string; + style: StyleObj; + getLineProps: (input: LineInputProps) => LineOutputProps; + getTokenProps: (input: GrammaticalTokenInputProps) => GrammaticalTokenOutputProps; +} + +export type GetGrammaticalTokenProps = ( + input: GrammaticalTokenInputProps +) => GrammaticalTokenOutputProps; + +export type Language = + | 'markup' + | 'bash' + | 'clarity' + | 'clike' + | 'c' + | 'cpp' + | 'css' + | 'javascript' + | 'jsx' + | 'coffeescript' + | 'actionscript' + | 'css-extr' + | 'diff' + | 'git' + | 'go' + | 'graphql' + | 'handlebars' + | 'json' + | 'less' + | 'lisp' + | 'makefile' + | 'markdown' + | 'objectivec' + | 'ocaml' + | 'python' + | 'reason' + | 'sass' + | 'scss' + | 'sql' + | 'stylus' + | 'tsx' + | 'typescript' + | 'wasm' + | 'yaml'; diff --git a/src/components/home/sections/hero.tsx b/src/components/home/sections/hero.tsx index a935534e..54477d3d 100644 --- a/src/components/home/sections/hero.tsx +++ b/src/components/home/sections/hero.tsx @@ -4,11 +4,12 @@ import { CircleIcon } from '@components/home/common'; import { CONTENT_MAX_WIDTH } from '@common/constants'; import { Card } from '@components/home/card'; import { Body, H1, BodyLarge, SubHeading } from '@components/home/text'; +import { HEADER_HEIGHT } from '@components/header'; export const Hero = ({ cards }: { cards?: any }) => { return ( <> - +

Easily build decentralized apps

diff --git a/src/components/layouts/docs-layout.tsx b/src/components/layouts/docs-layout.tsx index 2dd0632b..21b8c239 100644 --- a/src/components/layouts/docs-layout.tsx +++ b/src/components/layouts/docs-layout.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { Flex, color, space, themeColor } from '@blockstack/ui'; +import { Flex, color, space, themeColor, ChevronIcon } from '@blockstack/ui'; import { SideNav } from '../side-nav'; -import { Header } from '../header'; +import { Header, HEADER_HEIGHT } from '../header'; import { Main } from '../main'; import { Footer } from '../footer'; import { useRouter } from 'next/router'; @@ -225,7 +225,7 @@ const styleOverwrites = { img: { my: space('extra-loose'), }, - '& > pre > *:not(pre)': { + '& > pre > *:not(pre):not(.line-numbers)': { border: 'none', px: space(['extra-loose', 'extra-loose', 'none', 'none']), }, @@ -273,7 +273,7 @@ export const Contents = ({ headings, children }) => ( @@ -292,7 +292,7 @@ const DocsLayout: React.FC<{ isHome?: boolean }> = ({ children, isHome }) => { }); return ( -
+
{!isHome && } = ({ children, isHome }) => { `calc(100% - ${isHome ? 0 : SIDEBAR_WIDTH}px)`, `calc(100% - ${isHome ? 0 : SIDEBAR_WIDTH}px)`, ]} - mt={'50px'} + mt={`${HEADER_HEIGHT}px`} flexDirection="column" >
diff --git a/src/components/mdx/mdx-components.tsx b/src/components/mdx/mdx-components.tsx index 49e73088..808ef13f 100644 --- a/src/components/mdx/mdx-components.tsx +++ b/src/components/mdx/mdx-components.tsx @@ -14,7 +14,7 @@ import { Text } from '@components/typography'; import { border } from '@common/utils'; import { useRouter } from 'next/router'; import dynamic from 'next/dynamic'; -const Code = dynamic(() => import('../code-block')); +const Code = dynamic(() => import('../code-block/index')); const BaseHeading: React.FC = React.memo(props => ( diff --git a/src/components/side-nav.tsx b/src/components/side-nav.tsx index e87dbd9d..edd2a14e 100644 --- a/src/components/side-nav.tsx +++ b/src/components/side-nav.tsx @@ -9,13 +9,14 @@ import { useMobileMenuState } from '@common/hooks/use-mobile-menu'; import dynamic from 'next/dynamic'; const SearchBox = dynamic(() => import('./search')); import { SIDEBAR_WIDTH } from '@common/constants'; +import { HEADER_HEIGHT } from '@components/header'; const Wrapper = ({ width = `${SIDEBAR_WIDTH}px`, children, ...rest }: any) => ( ( > Blockstack only supports the hardware wallets listed above. Other wallets, for example, the Trezor Model T, are not supported. If you have questions about wallet support, please contact Blockstack support. +-> Blockstack only supports the hardware wallets listed above. Other wallets, for example, the Trezor Model T, are not supported. If you have questions about wallet support, please contact Blockstack support. The private key on your hardware wallet is used by the Stacks Wallet software to sign send transactions. Receive transactions don't require a signature. Please consult the device's manufacturer for support in setting up and configuring your hardware device. diff --git a/yarn.lock b/yarn.lock index 8b069980..722eb835 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7892,7 +7892,7 @@ preval.macro@^5.0.0: dependencies: babel-plugin-preval "^5.0.0" -prism-react-renderer@^1.0.1, prism-react-renderer@^1.0.2: +prism-react-renderer@^1.0.1, prism-react-renderer@^1.0.2, prism-react-renderer@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.1.1.tgz#1c1be61b1eb9446a146ca7a50b7bcf36f2a70a44" integrity sha512-MgMhSdHuHymNRqD6KM3eGS0PNqgK9q4QF5P0yoQQvpB6jNjeSAi3jcSAz0Sua/t9fa4xDOMar9HJbLa08gl9ug==