feat: new home started, custom-blocks

lib/md-loader.js

@@ -34,7 +34,9 @@ module.exports = async function (src) {
   const headings = getHeadings(content);
   const code =
     `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 }) => (
   <MDWrapper frontmatter={frontmatter} {...props}>{children}</MDWrapper>
 )

lib/remark-plugins.js

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

package.json

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

src/common/utils.ts

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

src/components/app-state/context.ts

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

src/components/app-state/types.ts

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

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>
+  );
+};

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

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 };

src/components/mdx/md-contents.tsx

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

src/components/mdx/mdx-components.tsx

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

src/components/mdx/styles.tsx

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

src/pages/browser/todo-list.md

@@ -1,6 +1,6 @@
 ---
 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:
   - /develop/zero_to_dapp_1.html
   - /browser/hello-blockstack.html

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** |
 | Duration | | **30 minutes** |
@@ -176,4 +176,4 @@ With the completion of this tutorial, you:
 
 ## Where to go next
 
-- <a href="clarityRef.html">Clarity language reference</a>
+- <a href="clarityRef">Clarity language reference</a>

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)

yarn.lock

@@ -7638,6 +7638,13 @@ regjsparser@^0.6.4:
   dependencies:
     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:
   version "2.1.0"
   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"
   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"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
   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"
   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":
   version "4.0.1"
   resolved "https://github.com/octref/vscode-textmate#e65aabe2227febda7beaad31dd0fca1228c5ddf3"