Browse Source

feat: new home started, custom-blocks

fix/enable-imgix
Thomas Osmonson 4 years ago
parent
commit
bc8d9105c7
  1. 4
      lib/md-loader.js
  2. 14
      lib/remark-plugins.js
  3. 1
      package.json
  4. 2
      src/common/utils.ts
  5. 2
      src/components/app-state/context.ts
  6. 1
      src/components/app-state/types.ts
  7. 42
      src/components/custom-blocks/page-reference.tsx
  8. 11
      src/components/layouts/base-layout.tsx
  9. 12
      src/components/layouts/home.tsx
  10. 62
      src/components/mdx/md-contents.tsx
  11. 2
      src/components/mdx/mdx-components.tsx
  12. 3
      src/components/mdx/styles.tsx
  13. 2
      src/pages/browser/todo-list.md
  14. 6
      src/pages/core/smart/tutorial-counter.md
  15. 0
      src/pages/home.tsx
  16. 28
      src/pages/index.md
  17. 14
      yarn.lock

4
lib/md-loader.js

@ -34,7 +34,9 @@ module.exports = async function (src) {
const headings = getHeadings(content); const headings = getHeadings(content);
const code = const code =
`import { MDWrapper } from '@components/layouts/markdown-wrapper'; `import { MDWrapper } from '@components/layouts/markdown-wrapper';
export const frontmatter = ${JSON.stringify({ ...data, headings })}; import { PageReference } from '@components/custom-blocks/page-reference';
const shortcodes = {['pagereference']: PageReference};
export const frontmatter = ${ JSON.stringify({...data, headings}) };
const Layout = ({ children, ...props }) => ( const Layout = ({ children, ...props }) => (
<MDWrapper frontmatter={frontmatter} {...props}>{children}</MDWrapper> <MDWrapper frontmatter={frontmatter} {...props}>{children}</MDWrapper>
) )

14
lib/remark-plugins.js

@ -9,7 +9,8 @@ const unwrapImages = require('remark-unwrap-images');
const normalizeHeadings = require('remark-normalize-headings'); const normalizeHeadings = require('remark-normalize-headings');
const slug = require('remark-slug'); const slug = require('remark-slug');
const headingID = require('remark-heading-id'); const headingID = require('remark-heading-id');
const sectionize = require('remark-sectionize') const sectionize = require('remark-sectionize');
const customBlocks = require('remark-custom-blocks');
const remarkPlugins = [ const remarkPlugins = [
[memoize(include), { resolveFrom: path.join(__dirname, '../src/includes') }], [memoize(include), { resolveFrom: path.join(__dirname, '../src/includes') }],
@ -21,6 +22,17 @@ const remarkPlugins = [
memoize(slug), memoize(slug),
memoize(headingID), memoize(headingID),
memoize(sectionize), memoize(sectionize),
[
customBlocks,
{
['page-reference']: {
containerElement: 'pagereference',
titleElement: 'React.Fragment',
bodyElement: 'React.Fragment',
title: 'optional',
},
},
],
]; ];
module.exports = { remarkPlugins }; module.exports = { remarkPlugins };

1
package.json

@ -45,6 +45,7 @@
"preval.macro": "^5.0.0", "preval.macro": "^5.0.0",
"react-gesture-responder": "^2.1.0", "react-gesture-responder": "^2.1.0",
"remark": "^12.0.1", "remark": "^12.0.1",
"remark-custom-blocks": "^2.5.0",
"remark-emoji": "2.1.0", "remark-emoji": "2.1.0",
"remark-external-links": "^6.1.0", "remark-external-links": "^6.1.0",
"remark-footnotes": "^1.0.0", "remark-footnotes": "^1.0.0",

2
src/common/utils.ts

@ -50,7 +50,7 @@ export const onlyText = (children: ReactNode): string => {
let newText = ''; let newText = '';
if (isValidElement(child) && hasChildren(child)) { if (isValidElement(child) && hasChildren(child)) {
newText = onlyText(child.props.children); newText = onlyText(child.props.children) + '\n';
} else if (isValidElement(child) && !hasChildren(child)) { } else if (isValidElement(child) && !hasChildren(child)) {
newText = ''; newText = '';
} else { } else {

2
src/components/app-state/context.ts

@ -1,9 +1,11 @@
import React from 'react'; import React from 'react';
import { State } from '@components/app-state/types'; import { State } from '@components/app-state/types';
import routes from '@common/routes';
export const initialState: State = { export const initialState: State = {
mobileMenu: false, mobileMenu: false,
activeSlug: '', activeSlug: '',
setState: (value: any) => null, setState: (value: any) => null,
routes,
}; };
export const AppStateContext = React.createContext<State>(initialState); export const AppStateContext = React.createContext<State>(initialState);

1
src/components/app-state/types.ts

@ -3,4 +3,5 @@ export interface State {
activeSlug: string; activeSlug: string;
slugInView?: string; slugInView?: string;
setState: (value: any) => void; setState: (value: any) => void;
routes: any;
} }

42
src/components/custom-blocks/page-reference.tsx

@ -0,0 +1,42 @@
import React from 'react';
import { Box, color, Grid, space } from '@blockstack/ui';
import { onlyText } from '@common/utils';
import { useAppState } from '@common/hooks/use-app-state';
import { Text } from '@components/typography';
import Link from 'next/link';
export const PageReference = ({ children }) => {
const { routes } = useAppState();
const content = onlyText(children).trim();
const [variant, _paths] = content.includes('\n') ? content.split('\n') : ['default', content];
const paths = _paths.includes(', ') ? _paths.split(', ') : [_paths];
const flatRoutes = routes.flatMap(section =>
section.routes.map(route => ({
section: section.title,
...route,
}))
);
const pages = paths
.map(path => flatRoutes.find(route => route.path === path))
.filter(page => page);
return (
<Grid
mt={space('extra-loose')}
gridColumnGap={space('loose')}
gridTemplateColumns="repeat(3, 1fr)"
>
{pages.map(page => (
<Box position="relative">
<Box mb={space('loose')} borderRadius="12px" height="144px" width="100%" bg="#9985FF" />
<Box pb={space('tight')}>
<Text fontWeight="600">{page.title || page.headings[0]}</Text>
</Box>
<Box>{page.description}</Box>
<Link href={`/${page.path}`} passHref>
<Box as="a" position="absolute" size="100%" left={0} top={0} />
</Link>
</Box>
))}
</Grid>
);
};

11
src/components/layouts/base-layout.tsx

@ -10,6 +10,7 @@ import { useWatchActiveHeadingChange } from '@common/hooks/use-active-heading';
import { useLockBodyScroll } from '@common/hooks/use-lock-body-scroll'; import { useLockBodyScroll } from '@common/hooks/use-lock-body-scroll';
import { useMobileMenuState } from '@common/hooks/use-mobile-menu'; import { useMobileMenuState } from '@common/hooks/use-mobile-menu';
import { border } from '@common/utils'; import { border } from '@common/utils';
import { useRouter } from 'next/router';
const MobileMenu: React.FC<FlexProps> = props => { const MobileMenu: React.FC<FlexProps> = props => {
const { isOpen, handleClose } = useMobileMenuState(); const { isOpen, handleClose } = useMobileMenuState();
@ -126,7 +127,9 @@ const MobileMenu: React.FC<FlexProps> = props => {
); );
}; };
const BaseLayout: React.FC<{ isHome?: boolean }> = ({ children, isHome }) => { const BaseLayout: React.FC<{ isHome?: boolean }> = ({ children }) => {
const router = useRouter();
const isHome = router.pathname === '/';
let isErrorPage = false; let isErrorPage = false;
// get if NotFoundPage // get if NotFoundPage
@ -140,9 +143,9 @@ const BaseLayout: React.FC<{ isHome?: boolean }> = ({ children, isHome }) => {
return ( return (
<Flex minHeight="100vh" flexDirection="column"> <Flex minHeight="100vh" flexDirection="column">
<MobileMenu /> <MobileMenu />
<Header hideSubBar={isHome || isErrorPage} /> <Header />
<Flex width="100%" flexGrow={1} maxWidth="1280px" mx="auto"> <Flex width="100%" flexGrow={1} maxWidth="1280px" mx="auto">
{!isHome && <SideNav display={['none', 'none', 'block']} />} <SideNav display={['none', 'none', 'block']} />
<Flex <Flex
flexGrow={1} flexGrow={1}
maxWidth={[ maxWidth={[
@ -163,7 +166,7 @@ const BaseLayout: React.FC<{ isHome?: boolean }> = ({ children, isHome }) => {
{children} {children}
</Flex> </Flex>
</Main> </Main>
{isErrorPage || isHome ? null : <Footer justifySelf="flex-end" />} {isErrorPage ? null : <Footer justifySelf="flex-end" />}
</Flex> </Flex>
</Flex> </Flex>
</Flex> </Flex>

12
src/components/layouts/home.tsx

@ -1,12 +0,0 @@
import React from 'react';
import { Main } from '@components/main';
const HomeLayout: React.FC<any> = ({ children }) => {
return (
<Main mx="unset" width={'100%'}>
{children}
</Main>
);
};
export { HomeLayout };

62
src/components/mdx/md-contents.tsx

@ -9,32 +9,38 @@ import { TOC_WIDTH } from '@common/constants';
import { styleOverwrites } from '@components/mdx/styles'; import { styleOverwrites } from '@components/mdx/styles';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { border } from '@common/utils'; import { border } from '@common/utils';
import { useRouter } from 'next/router';
const Search = dynamic(() => import('@components/search')); const Search = dynamic(() => import('@components/search'));
export const MDContents: React.FC<any> = React.memo(({ headings, children }) => ( export const MDContents: React.FC<any> = React.memo(({ headings, children }) => {
<> const router = useRouter();
<ContentWrapper const isHome = router.pathname === '/';
width={ return (
headings?.length > 1 ? ['100%', '100%', '100%', `calc(100% - ${TOC_WIDTH}px)`] : '100%' <>
} <ContentWrapper
mx="unset" width={['100%', '100%', '100%', `calc(100% - ${isHome ? 0 : TOC_WIDTH}px)`]}
pt="unset" mx="unset"
css={css(styleOverwrites as any)} pt="unset"
> css={css(styleOverwrites as any)}
{children} >
</ContentWrapper> {children}
<Box> </ContentWrapper>
<Box position="sticky" top={0} pt="64px" pl={space('extra-loose')}> {!isHome ? (
<Search mb={space('base')} /> <Box>
{headings?.length > 1 ? ( <Box position="sticky" top={0} pt="64px" pl={space('extra-loose')}>
<TableOfContents <Search mb={space('base')} />
pl={space('base')} {headings?.length > 1 ? (
borderLeft={border()} <TableOfContents
display={['none', 'none', 'none', 'block']} pl={space('base')}
headings={headings} borderLeft={border()}
limit={2} display={['none', 'none', 'none', 'block']}
/> headings={headings}
) : null} limit={2}
</Box> />
</Box> ) : null}
</> </Box>
)); </Box>
) : null}
</>
);
});

2
src/components/mdx/mdx-components.tsx

@ -24,6 +24,7 @@ import {
} from '@components/mdx/components'; } from '@components/mdx/components';
import { Img } from '@components/mdx/image'; import { Img } from '@components/mdx/image';
import { Code } from '@components/mdx/components'; import { Code } from '@components/mdx/components';
import { PageReference } from '@components/custom-blocks/page-reference';
export const MDXComponents = { export const MDXComponents = {
h1: H1, h1: H1,
@ -49,4 +50,5 @@ export const MDXComponents = {
blockquote: Blockquote, blockquote: Blockquote,
sup: Sup, sup: Sup,
section: Section, section: Section,
pagereference: PageReference,
}; };

3
src/components/mdx/styles.tsx

@ -173,6 +173,9 @@ export const styleOverwrites = {
boxShadow: 'none', boxShadow: 'none',
}, },
}, },
p: {
width: '100%',
},
'p, li, a': { 'p, li, a': {
display: 'inline-block', display: 'inline-block',
fontSize: '16px', fontSize: '16px',

2
src/pages/browser/todo-list.md

@ -1,6 +1,6 @@
--- ---
title: Building a Todo app title: Building a Todo app
description: In this tutorial, you will learn about Blockstack authentication and storage by installing, running and reviewing the code for a "Todos" web app built with Blockstack and React. description: Learn how to integrate authentication and data storage.
redirect_from: redirect_from:
- /develop/zero_to_dapp_1.html - /develop/zero_to_dapp_1.html
- /browser/hello-blockstack.html - /browser/hello-blockstack.html

6
src/pages/core/smart/tutorial-counter.md

@ -1,8 +1,8 @@
--- ---
description: 'Clarity: Counter Tutorial' description: Learn how to write a simple smart contract in the Clarity language
--- ---
# Counter # Counter smart contract
| Experience | | **Intermediate** | | Experience | | **Intermediate** |
| Duration | | **30 minutes** | | Duration | | **30 minutes** |
@ -176,4 +176,4 @@ With the completion of this tutorial, you:
## Where to go next ## Where to go next
- <a href="clarityRef.html">Clarity language reference</a> - <a href="clarityRef">Clarity language reference</a>

0
src/pages/index.tsx → src/pages/home.tsx

28
src/pages/index.md

@ -0,0 +1,28 @@
---
title: 'Documentation'
---
# Documentation
All you need to build decentralized apps and smart contracts
## Get started
[[page-reference | title]]
| browser/todo-list, core/smart/overview, core/smart/testnet-node
## Tutorials
[[page-reference]]
| browser/todo-list, core/smart/tutorial-counter
## Explore
[[page-reference]]
| org/overview, org/token
## Sample projects
Showcase your sample project
[Submit on GitHub](https://github.com/blockstack/docs.blockstack)

14
yarn.lock

@ -7638,6 +7638,13 @@ regjsparser@^0.6.4:
dependencies: dependencies:
jsesc "~0.5.0" jsesc "~0.5.0"
remark-custom-blocks@^2.5.0:
version "2.5.0"
resolved "https://registry.yarnpkg.com/remark-custom-blocks/-/remark-custom-blocks-2.5.0.tgz#57cfb814b2c867fbd45a2e331582a1e402e0c4e5"
integrity sha512-FcCd5Boqn4XBXnlIvpy/9jyVTOZRg7unXv8m14FM4EM0qXLeSvxSReRfuoWmFWZwi0+MOf8bqEwJIBut0NYdJw==
dependencies:
space-separated-tokens "^1.1.5"
remark-emoji@2.1.0: remark-emoji@2.1.0:
version "2.1.0" version "2.1.0"
resolved "https://registry.yarnpkg.com/remark-emoji/-/remark-emoji-2.1.0.tgz#69165d1181b98a54ad5d9ef811003d53d7ebc7db" resolved "https://registry.yarnpkg.com/remark-emoji/-/remark-emoji-2.1.0.tgz#69165d1181b98a54ad5d9ef811003d53d7ebc7db"
@ -8365,7 +8372,7 @@ source-map@^0.5.0, source-map@^0.5.6:
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
space-separated-tokens@^1.0.0: space-separated-tokens@^1.0.0, space-separated-tokens@^1.1.5:
version "1.1.5" version "1.1.5"
resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899" resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA== integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
@ -9534,11 +9541,6 @@ vm-browserify@^1.0.1:
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0" resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ== integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
"vscode-textmate@git+https://github.com/octref/vscode-textmate.git":
version "4.0.1"
uid e65aabe2227febda7beaad31dd0fca1228c5ddf3
resolved "git+https://github.com/octref/vscode-textmate.git#e65aabe2227febda7beaad31dd0fca1228c5ddf3"
"vscode-textmate@https://github.com/octref/vscode-textmate": "vscode-textmate@https://github.com/octref/vscode-textmate":
version "4.0.1" version "4.0.1"
resolved "https://github.com/octref/vscode-textmate#e65aabe2227febda7beaad31dd0fca1228c5ddf3" resolved "https://github.com/octref/vscode-textmate#e65aabe2227febda7beaad31dd0fca1228c5ddf3"

Loading…
Cancel
Save