Properly link small headings (vercel#74)

This fixes vercel#68 and closes vercel#69
ijjk · Nov 30, 2017 · 7c7fdf8 · 7c7fdf8
1 parent 8c8a4db
commit 7c7fdf8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/components/text/heading.js b/components/text/heading.js
@@ -74,3 +74,17 @@ export const H4 = ({ children, isCommand }) => (
     </style>
   </h4>
 )
+
+export const H5 = ({ children }) => (
+  <h5>
+    {children}
+    <style jsx>
+      {`
+      h5 {
+        font-weight: bold;
+        font-size: 15px;
+      }
+    `}
+    </style>
+  </h5>
+)
diff --git a/lib/with-doc.js b/lib/with-doc.js
@@ -5,7 +5,7 @@ import Heading from '../components/heading'
 import Page from '../components/page'
 import { PDIV, P, Quote } from '../components/text/paragraph'
 import { UL, LI } from '../components/text/list'
-import { H3, H4 } from '../components/text/heading'
+import { H3, H4, H5 } from '../components/text/heading'
 import { InlineCode } from '../components/text/code'
 import { ExternalLink } from '../components/text/link'
 import DocsNavbarDesktop from '../components/docs/navbar/desktop'
@@ -138,13 +138,20 @@ const DocH3 = ({ children }) => (
   </Heading>
 )
 
+const DocH4 = ({ children }) => (
+  <Heading lean={true} offsetTop={175}>
+    <H5>{children}</H5>
+  </Heading>
+)
+
 export const components = {
   p: PDIV,
   strong: P.B,
   ul: UL,
   li: LI,
   h2: DocH2,
   h3: DocH3,
+  h4: DocH4,
   code: InlineCode,
   a: ExternalLink,
   blockquote: Quote