Merge pull request #768 from primer/anchor-links

Anchor Link in Docs
2024-09-11 16:36:07 +03:00 · 2019-04-30 11:21:44 -07:00 · 2019-04-30 11:21:44 -07:00 · 34d787e75d
commit 34d787e75d
parent f1a5b7cba1 14b4a60b0d
6 changed files with 40 additions and 72 deletions
--- a/docs/markdown.js
+++ b/docs/markdown.js
@ -1,15 +1,24 @@
 import React from 'react'
-import {Heading, Link} from '@primer/components'
-import {CodeExample} from '@primer/blueprints'
+import {Link} from '@primer/components'
+import {MarkdownHeading} from '@primer/blueprints'
+import {CodeExample} from '@primer/blueprints/next-components'
 import Outline from './Outline'

-export const H1 = props => <Heading fontSize={6} fontWeight="light" {...props} />
+export const H1 = props => <MarkdownHeading {...props} />
+export const H2 = props => <MarkdownHeading as="h2" {...props} />
+export const H3 = props => <MarkdownHeading as="h3" {...props} />
+export const H4 = props => <MarkdownHeading as="h4" {...props} />
+export const H5 = props => <MarkdownHeading as="h5" {...props} />

 export default function getComponents(page = {}) {
  const {outline: getOutline = () => []} = page

  return {
    h1: H1,
+    h2: H2,
+    h3: H3,
+    h4: H4,
+    h5: H5,
    // render links with our component
    a: Link,
    // render code blocks with our wrapper around react-live
--- a/package-lock.json
+++ b/package-lock.json
@ -1366,18 +1366,18 @@
      }
    },
    "@primer/blueprints": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@primer/blueprints/-/blueprints-3.0.4.tgz",
-      "integrity": "sha512-jmIBWhadXR7rXZDaTxNDpPzD+G0TPwKXrx4cNOdAw55HVR/t3PRMjyvkJYuyYntcJG4fegZaqbtoxXYbPBYnEA==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@primer/blueprints/-/blueprints-4.0.1.tgz",
+      "integrity": "sha512-fGhRGcKobByuuJlIviSpR4mq2KpYZ6zMJO08x0Xw+XPEd+KPKHbap8NKbcc0qlzTmWcTo1qOaqN1AGNBjr8gzg==",
      "dev": true,
      "requires": {
        "@githubprimer/octicons-react": "^8.1.3",
        "@primer/components": "12.0.1",
        "@primer/next-pages": "0.0.3",
        "downshift": "3.2.7",
-        "globby": "9.1.0",
        "html-2-jsx": "^0.5.1-dev",
        "lunr": "2.3.6",
+        "next": "7.0.2",
        "prism-github": "^1.1.0",
        "prop-types": "^15.6.2",
        "react-live": "2.0.0",
@ -1393,22 +1393,6 @@
          "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==",
          "dev": true
        },
-        "globby": {
-          "version": "9.1.0",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-9.1.0.tgz",
-          "integrity": "sha512-VtYjhHr7ncls724Of5W6Kaahz0ag7dB4G62/2HsN+xEKG6SrPzM1AJMerGxQTwJGnN9reeyxdvXbuZYpfssCvg==",
-          "dev": true,
-          "requires": {
-            "@types/glob": "^7.1.1",
-            "array-union": "^1.0.2",
-            "dir-glob": "^2.2.1",
-            "fast-glob": "^2.2.6",
-            "glob": "^7.1.3",
-            "ignore": "^4.0.3",
-            "pify": "^4.0.1",
-            "slash": "^2.0.0"
-          }
-        },
        "react-live": {
          "version": "2.0.0",
          "resolved": "https://registry.npmjs.org/react-live/-/react-live-2.0.0.tgz",
@ -10851,8 +10835,7 @@
          "version": "2.1.1",
          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "aproba": {
          "version": "1.2.0",
@ -10876,15 +10859,13 @@
          "version": "1.0.0",
          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "brace-expansion": {
          "version": "1.1.11",
          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
          "dev": true,
-          "optional": true,
          "requires": {
            "balanced-match": "^1.0.0",
            "concat-map": "0.0.1"
@ -10901,22 +10882,19 @@
          "version": "1.1.0",
          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "concat-map": {
          "version": "0.0.1",
          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "console-control-strings": {
          "version": "1.1.0",
          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "core-util-is": {
          "version": "1.0.2",
@ -11047,8 +11025,7 @@
          "version": "2.0.3",
          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "ini": {
          "version": "1.3.5",
@ -11062,7 +11039,6 @@
          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
          "dev": true,
-          "optional": true,
          "requires": {
            "number-is-nan": "^1.0.0"
          }
@ -11079,7 +11055,6 @@
          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
          "dev": true,
-          "optional": true,
          "requires": {
            "brace-expansion": "^1.1.7"
          }
@ -11088,15 +11063,13 @@
          "version": "0.0.8",
          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "minipass": {
          "version": "2.3.5",
          "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
          "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
          "dev": true,
-          "optional": true,
          "requires": {
            "safe-buffer": "^5.1.2",
            "yallist": "^3.0.0"
@ -11117,7 +11090,6 @@
          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
          "dev": true,
-          "optional": true,
          "requires": {
            "minimist": "0.0.8"
          }
@ -11206,8 +11178,7 @@
          "version": "1.0.1",
          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "object-assign": {
          "version": "4.1.1",
@ -11221,7 +11192,6 @@
          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
          "dev": true,
-          "optional": true,
          "requires": {
            "wrappy": "1"
          }
@ -11317,8 +11287,7 @@
          "version": "5.1.2",
          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "safer-buffer": {
          "version": "2.1.2",
@ -11360,7 +11329,6 @@
          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
          "dev": true,
-          "optional": true,
          "requires": {
            "code-point-at": "^1.0.0",
            "is-fullwidth-code-point": "^1.0.0",
@ -11382,7 +11350,6 @@
          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
          "dev": true,
-          "optional": true,
          "requires": {
            "ansi-regex": "^2.0.0"
          }
@ -11431,15 +11398,13 @@
          "version": "1.0.2",
          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "yallist": {
          "version": "3.0.3",
          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
          "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
-          "dev": true,
-          "optional": true
+          "dev": true
        }
      }
    },
--- a/package.json
+++ b/package.json
@ -47,7 +47,7 @@
    "@githubprimer/octicons-react": "^8.1.3",
    "@mdx-js/mdx": "^0.16.6",
    "@mdx-js/tag": "0.15.0",
-    "@primer/blueprints": "3.0.4",
+    "@primer/blueprints": "4.0.1",
    "@primer/components": "12.0.1",
    "@primer/next-pages": "0.0.3",
    "@storybook/addon-viewport": "5.0.0",
--- a/pages/_app.js
+++ b/pages/_app.js
@ -4,7 +4,8 @@ import {MDXProvider} from '@mdx-js/tag'
 import Head from 'next/head'
 import {BaseStyles, BorderBox, Box, Flex, theme} from '@primer/components'
 import {PackageHeader} from '../docs/components'
-import {Header, JumpNav, Section, RouteMatch, SectionLink, SideNav} from '@primer/blueprints'
+import {Header, MarkdownHeading, JumpNav, SideNav} from '@primer/blueprints'
+import {NavList} from '@primer/blueprints/next-components'
 import getComponents from '../docs/markdown'
 import documents from '../searchIndex'
 import {config, requirePage, rootPage} from '../docs/utils'
@ -27,7 +28,6 @@ export default class MyApp extends App {
    // strip the trailing slash
    const pathname = this.props.router.pathname.replace(/\/$/, '')
    const {Component, page} = this.props
-
    const node = rootPage.first(node => node.path === pathname) || {}
    const {file, meta = {}} = node || {}
    const components = getComponents(node)
@ -58,7 +58,7 @@ export default class MyApp extends App {
              {Hero ? <Hero /> : null}
              <Box color="gray.9" maxWidth={['auto', 'auto', 'auto', CONTENT_MAX_WIDTH]} px={6} mx="auto" my={6}>
                <div className="markdown-body">
-                  {!meta.hero && meta.title ? <h1>{meta.title}</h1> : null}
+                  {!meta.hero && meta.title ? <MarkdownHeading>{meta.title}</MarkdownHeading> : null}
                  <PackageHeader {...meta} />
                  <MDXProvider components={components}>
                    <Component {...page} />
@ -83,19 +83,13 @@ export default class MyApp extends App {
              borderTop={[1, 1, 0, 0]}
            >
              <SideNav>
-                <Section path="/css/getting-started" />
-                <Section path="/css/principles" />
-                <Section path="/css/tools" />
-                <Section path="/css/whats-new" />
-                <RouteMatch path="/css">
-                  <Section>
-                    <SectionLink color='black' href="status-key" />
-                  </Section>
-                  <Section path="support" />
-                  <Section path="utilities" />
-                  <Section path="objects" />
-                  <Section path="components" />
-                </RouteMatch>
+                <NavList currentPath={pathname} path="/css/getting-started" />
+                <NavList currentPath={pathname} path="/css/tools" />
+                <NavList currentPath={pathname} path="/css/principles" />
+                <NavList currentPath={pathname} path="/css/support" />
+                <NavList currentPath={pathname} path="/css/utilities" />
+                <NavList currentPath={pathname} path="/css/objects" />
+                <NavList currentPath={pathname} path="/css/components" />
              </SideNav>
            </BorderBox>
          </Flex>
--- a/pages/_error.js
+++ b/pages/_error.js
@ -1,6 +1,6 @@
 import React from 'react'
 import {Heading} from '@primer/components'
-import {redirectTrailingSlash} from '@primer/blueprints'
+import {redirectTrailingSlash} from '@primer/blueprints/next-components'

 export default class extends React.Component {
  static getInitialProps(context) {
--- a/pages/index.js
+++ b/pages/index.js
@ -1,2 +1,2 @@
-import {redirect} from '@primer/blueprints'
+import {redirect} from '@primer/blueprints/next-components'
 export default redirect('/css')