diff --git a/lib/md-loader.js b/lib/md-loader.js index 49bd3561..f2bb2cf3 100644 --- a/lib/md-loader.js +++ b/lib/md-loader.js @@ -33,10 +33,10 @@ module.exports = async function (src) { const { content, data } = fm(src); const headings = getHeadings(content); const code = - `import { Layout as DefaultLayout } from '@components/layouts/default-layout'; -export const meta = ${JSON.stringify({ ...data, headings })}; + `import { MDWrapper } from '@components/layouts/markdown-wrapper'; +export const frontmatter = ${JSON.stringify({ ...data, headings })}; const Layout = ({ children, ...props }) => ( - {children} + {children} ) export default Layout; diff --git a/next.config.js b/next.config.js index a6de3eda..8bc47011 100755 --- a/next.config.js +++ b/next.config.js @@ -19,6 +19,7 @@ const remarkPlugins = [ require('remark-unwrap-images'), require('remark-normalize-headings'), require('remark-slug'), + require('remark-footnotes'), ]; module.exports = withBundleAnalyzer({ diff --git a/package.json b/package.json index 84ed3fed..0f1ce0ab 100755 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "remark": "^12.0.1", "remark-emoji": "2.1.0", "remark-external-links": "^6.1.0", + "remark-footnotes": "^1.0.0", "remark-frontmatter": "^2.0.0", "remark-images": "2.0.0", "remark-normalize-headings": "^2.0.0", diff --git a/src/common/constants.ts b/src/common/constants.ts index 7995f824..d3e3957a 100644 --- a/src/common/constants.ts +++ b/src/common/constants.ts @@ -3,3 +3,5 @@ export const TOC_WIDTH = 280; export const CONTENT_MAX_WIDTH = 1104; export const SHIKI_THEME = 'Material-Theme-Default'; + +export const THEME_STORAGE_KEY = 'theme'; diff --git a/src/components/cli-reference.tsx b/src/components/cli-reference.tsx index e7feb673..dbdfbc37 100644 --- a/src/components/cli-reference.tsx +++ b/src/components/cli-reference.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { cliReferenceData } from '@common/../_data/cliRef'; import { MDXComponents } from '@components/mdx/mdx-components'; -import { Grid, Box } from '@blockstack/ui'; +import { Grid, Box, color } from '@blockstack/ui'; import { border } from '@common/utils'; import { hydrate } from '@common/hydrate-mdx'; @@ -37,6 +37,7 @@ const ReferenceEntry = ({ entry, usage }) => ( borderBottom={border()} gridGap="base" gridTemplateColumns="repeat(4, minmax(0,25%))" + color={color('text-caption')} > Name @@ -61,6 +62,7 @@ const ReferenceEntry = ({ entry, usage }) => ( gridGap="base" gridTemplateColumns="repeat(4, minmax(0,25%))" key={index} + color={color('text-body')} > ${name} diff --git a/src/components/code-block/index.tsx b/src/components/code-block/index.tsx index d5c1a716..3c6138d7 100644 --- a/src/components/code-block/index.tsx +++ b/src/components/code-block/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Highlighter, HighlighterProps } from '../highlighter'; -import { Box, BoxProps } from '@blockstack/ui'; +import { Box, BoxProps, color } from '@blockstack/ui'; import { css } from '@styled-system/css'; // Languages used in docs @@ -55,18 +55,26 @@ const CodeBlock = React.memo( ) => { const language = className && className.replace(/language-/, ''); + const displayNumbers = showLineNumbers || (language && language !== 'bash'); + return ( diff --git a/src/components/color-mode-button.tsx b/src/components/color-mode-button.tsx index 51f5f1a4..0e22488d 100644 --- a/src/components/color-mode-button.tsx +++ b/src/components/color-mode-button.tsx @@ -1,12 +1,12 @@ import React, { forwardRef, Ref } from 'react'; import { LinkProps } from '@components/typography'; -import { useColorMode } from '@blockstack/ui'; import { DarkModeIcon } from '@components/icons/dark-mode'; import { LightModeIcon } from '@components/icons/light-mode'; import { IconButton } from '@components/icon-button'; +import { useColorMode } from '@pages/_app'; export const ColorModeButton = forwardRef((props: LinkProps, ref: Ref) => { - const { colorMode, toggleColorMode } = useColorMode(); + const [colorMode, toggleColorMode] = useColorMode(); return ( {colorMode === 'dark' ? : } diff --git a/src/components/color-modes/styles.tsx b/src/components/color-modes/styles.tsx new file mode 100644 index 00000000..f3d24a6f --- /dev/null +++ b/src/components/color-modes/styles.tsx @@ -0,0 +1,61 @@ +import { createGlobalStyle } from 'styled-components'; +import { generateCssVariables } from '@blockstack/ui'; + +export const ColorModes = createGlobalStyle` + :root{ + ${generateCssVariables('light')}; + } + + @media (prefers-color-scheme: dark) { + :root { + ${generateCssVariables('dark')}; + } + } + + @media (prefers-color-scheme: light) { + :root { + ${generateCssVariables('light')}; + } + } + + html, body, #__next { + background: var(--colors-bg); + border-color: var(--colors-border); + + &.light { + ${generateCssVariables('light')}; + } + &.dark { + ${generateCssVariables('dark')}; + } + } + + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus, + textarea:-webkit-autofill, + textarea:-webkit-autofill:hover, + textarea:-webkit-autofill:focus, + select:-webkit-autofill, + select:-webkit-autofill:hover, + select:-webkit-autofill:focus { + -webkit-text-fill-color: var(--colors-text-body); + font-size: 16px !important; + transition: background-color 5000s ease-in-out 0s; + } + + input:-ms-input-placeholder, + textarea:-ms-input-placeholder { + color: var(--colors-input-placeholder) !important; + } + + input::-ms-input-placeholder, + textarea::-ms-input-placeholder { + color: var(--colors-input-placeholder) !important; + } + + input::placeholder, + textarea::placeholder { + color: var(--colors-input-placeholder) !important; + } + `; diff --git a/src/components/feedback.tsx b/src/components/feedback.tsx index e9d7933b..44665c7a 100644 --- a/src/components/feedback.tsx +++ b/src/components/feedback.tsx @@ -21,8 +21,14 @@ import { useRouter } from 'next/router'; const Icon: React.FC }> = ({ icon: IconComponent, ...props }) => { const [isHovered, bind] = useHover(); return ( - - + + ); }; @@ -60,6 +66,7 @@ const FeedbackCard = ({ show, onClose }) => { Leave feedback { const { isOpen, handleOpen, handleClose } = useMobileMenuState(); @@ -142,7 +142,7 @@ const SubBar: React.FC = props => ( height="60px" width="100%" px={['extra-loose', 'extra-loose', 'base', 'base']} - bg="rgba(255,255,255, 0.8)" + bg={color('bg')} borderBottom={border()} style={{ backdropFilter: 'blur(5px)', @@ -152,14 +152,15 @@ const SubBar: React.FC = props => ( { justifyContent="space-between" align="center" px={['extra-loose', 'extra-loose', 'base', 'base']} - bg="rgba(255,255,255, 0.8)" + bg={color('bg')} borderBottom={border()} style={{ backdropFilter: 'blur(5px)', @@ -234,6 +235,7 @@ const Header = ({ hideSubBar, ...rest }: any) => { ))} + diff --git a/src/components/highlighter/index.tsx b/src/components/highlighter/index.tsx index 7bc339c5..9dfd8ef6 100644 --- a/src/components/highlighter/index.tsx +++ b/src/components/highlighter/index.tsx @@ -149,10 +149,11 @@ const Lines = ({ hideLineHover?: boolean; highlightedLines?: number[]; } & RenderProps) => { + const displayNumbers = lines?.length > 2 && showLineNumbers; return ( - - + + {lines.map((tokens, i) => ( lineNumber === i + 1) @@ -191,7 +192,7 @@ const Lines = ({ /> ))} - + ); diff --git a/src/components/home/card.tsx b/src/components/home/card.tsx index 51d13840..21237c96 100644 --- a/src/components/home/card.tsx +++ b/src/components/home/card.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Grid, Box, Flex, space, color, transition, FlexProps } from '@blockstack/ui'; import NextLink from 'next/link'; -import { useActive, useHover } from 'use-events'; +import { useTouchable } from 'touchable-hook'; interface CardProps extends FlexProps { href?: string; @@ -15,16 +15,15 @@ const LinkComponent = ({ href }: { href: string }) => ) : null; export const Card: React.FC = ({ children, onClick, dark = false, href, ...rest }) => { - const [hover, hoverBind] = useHover(); - const [active, activeBind] = useActive(); - + const { bind, hover, active } = useTouchable({ + behavior: 'link', + }); return ( diff --git a/src/components/home/common.tsx b/src/components/home/common.tsx index 88d65e68..ba7d81cd 100644 --- a/src/components/home/common.tsx +++ b/src/components/home/common.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, Grid, Flex, BoxProps, transition, space, themeColor } from '@blockstack/ui'; +import { Box, Grid, Flex, BoxProps, transition, space, themeColor, color } from '@blockstack/ui'; import { GridProps } from '@blockstack/ui/dist/ui/src/grid/types'; import { CONTENT_MAX_WIDTH } from '@common/constants'; @@ -11,17 +11,11 @@ export const CircleIcon: React.FC< align="center" justify="center" borderRadius={size} - bg={ - dark - ? hover - ? themeColor('blue.900') - : 'rgb(39, 41, 46)' - : themeColor(hover ? 'blue' : 'blue.100') - } + bg={color(hover ? 'accent' : 'bg-alt')} transition={transition} {...rest} > - + diff --git a/src/components/home/sections/hero.tsx b/src/components/home/sections/hero.tsx index 54477d3d..ea08c54b 100644 --- a/src/components/home/sections/hero.tsx +++ b/src/components/home/sections/hero.tsx @@ -39,7 +39,7 @@ export const Hero = ({ cards }: { cards?: any }) => { = ({ children, ...rest }) => ( = ({ children, ...rest }) => ( = ({ children, ...rest }) => ( = ({ children, isHome }) => { + let isErrorPage = false; + + // get if NotFoundPage + React.Children.forEach(children, (child: any) => { + if (child?.type === NotFoundPage) { + isErrorPage = true; + } + }); + return ( + +
+ + {!isHome && } + +
+ + {children} + +
+ {isErrorPage || isHome ? null :