Add T&C

components/content/context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+
+// The simplification to pass a Number instead object
+// It can be converted to `SectionContext({ level: 1 })` in the future
+const LevelContext = createContext(1)
+
+export default LevelContext

components/content/heading.jsx

@@ -0,0 +1,17 @@
+import React, { forwardRef, useContext } from 'react'
+
+import LevelContext from './context'
+
+import { Heading } from 'design'
+
+const SectionHeading = forwardRef(({ children, ...passProps }, ref) => {
+  const level = useContext(LevelContext)
+
+  return (
+    <Heading ref={ref} level={level} {...passProps}>
+      {children}
+    </Heading>
+  )
+})
+
+export default SectionHeading

components/content/index.js

@@ -0,0 +1,2 @@
+export Heading from './heading'
+export Section from './section'

components/content/section.jsx

@@ -0,0 +1,21 @@
+import React, { forwardRef, useContext } from 'react'
+
+import LevelContext from './context'
+
+const Section = forwardRef(
+  (
+    { children, level: forceLevel, tag: Tag = 'section', ...restProps },
+    ref
+  ) => {
+    const contextLevel = useContext(LevelContext)
+    const level = forceLevel ?? contextLevel + 1
+
+    return (
+      <Tag ref={ref} {...restProps}>
+        <LevelContext.Provider value={level}>{children}</LevelContext.Provider>
+      </Tag>
+    )
+  }
+)
+
+export default Section

next.config.js

@@ -1,6 +1,7 @@
 const path = require('path')
 
 const withSourceMaps = require('@zeit/next-source-maps')
+const withMDX = require('@next/mdx')()
 
 const camelCaseLoader = path.join(__dirname, 'webpack/camelcase-loader.js')
 
@@ -115,4 +116,4 @@ const nextConfig = {
   },
 }
 
-module.exports = withSourceMaps(nextConfig)
+module.exports = withMDX(withSourceMaps(nextConfig))