BlackLivesMatter

Author: jxnblk

packages/docs/src/components/layout.js

@@ -21,7 +21,7 @@ const sidebar = {
   a: NavLink,
 }
 
-const getModeName = mode => {
+const getModeName = (mode) => {
   switch (mode) {
     case 'dark':
       return 'Dark'
@@ -36,16 +36,17 @@ const getModeName = mode => {
   }
 }
 
-export default props => {
+export default (props) => {
   const [menuOpen, setMenuOpen] = useState(false)
   const nav = useRef(null)
   const [mode, setMode] = useColorMode()
   const fullwidth =
     (props.pageContext.frontmatter &&
       props.pageContext.frontmatter.fullwidth) ||
-    props.location.pathname === '/'
+    props.location.pathname === '/home'
+  const showNav = !props.pageContext?.frontmatter?.hidenav
 
-  const cycleMode = e => {
+  const cycleMode = (e) => {
     const i = modes.indexOf(mode)
     const next = modes[(i + 1) % modes.length]
     setMode(next)
@@ -60,40 +61,42 @@ export default props => {
           flexDirection: 'column',
           minHeight: '100vh',
         }}>
-        <Flex
-          as="header"
-          sx={{
-            height: 64,
-            px: 3,
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}>
-          <Flex sx={{ alignItems: 'center' }}>
-            <MenuButton
-              onClick={e => {
-                setMenuOpen(!menuOpen)
-                if (!nav.current) return
-                const navLink = nav.current.querySelector('a')
-                if (navLink) navLink.focus()
-              }}
-            />
-            <Link to="/" sx={{ variant: 'links.nav' }}>
-              Theme UI
-            </Link>
-          </Flex>
-          <Flex>
-            <NavLink href="https://github.com/system-ui/theme-ui">
-              GitHub
-            </NavLink>
-            <Button
-              sx={{
-                ml: 2,
-              }}
-              onClick={cycleMode}>
-              {getModeName(mode)}
-            </Button>
+        {showNav && (
+          <Flex
+            as="header"
+            sx={{
+              height: 64,
+              px: 3,
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}>
+            <Flex sx={{ alignItems: 'center' }}>
+              <MenuButton
+                onClick={(e) => {
+                  setMenuOpen(!menuOpen)
+                  if (!nav.current) return
+                  const navLink = nav.current.querySelector('a')
+                  if (navLink) navLink.focus()
+                }}
+              />
+              <Link to="/" sx={{ variant: 'links.nav' }}>
+                Theme UI
+              </Link>
+            </Flex>
+            <Flex>
+              <NavLink href="https://github.com/system-ui/theme-ui">
+                GitHub
+              </NavLink>
+              <Button
+                sx={{
+                  ml: 2,
+                }}
+                onClick={cycleMode}>
+                {getModeName(mode)}
+              </Button>
+            </Flex>
           </Flex>
-        </Flex>
+        )}
         <Box
           sx={{
             flex: '1 1 auto',
@@ -104,13 +107,13 @@ export default props => {
             }}>
             <div
               ref={nav}
-              onFocus={e => {
+              onFocus={(e) => {
                 setMenuOpen(true)
               }}
-              onBlur={e => {
+              onBlur={(e) => {
                 setMenuOpen(false)
               }}
-              onClick={e => {
+              onClick={(e) => {
                 setMenuOpen(false)
               }}>
               <Sidebar

packages/docs/src/pages/home.mdx

@@ -0,0 +1,129 @@
+import { Container, Box, Button } from 'theme-ui'
+import { Banner, Tiles } from '..'
+import Testimonials from './testimonials'
+import Graph from '../components/graph'
+
+<Banner>
+
+<Graph />
+
+# Theme UI: The Design Graph Framework
+
+Theme UI is a library for creating themeable user interfaces based on constraint-based design principles.
+Build custom component libraries, design systems, web applications, Gatsby themes, and more
+with a flexible API for best-in-class developer ergonomics.
+
+
+[Documentation](/getting-started)
+[GitHub](https://github.com/system-ui/theme-ui)
+
+![Stars][stars]
+![Build Status][]
+![Version][]
+![MIT License][]
+![bundle size badge][size]
+
+</Banner>
+
+<Container>
+
+<Tiles columns={2}>
+
+1. ## Create your theme
+
+  ```javascript
+  export default {
+    colors: {
+      text: '#000',
+      background: '#fff',
+      primary: 'tomato',
+    },
+    fonts: {
+      body: 'system-ui, sans-serif',
+      heading: '"Avenir Next", sans-serif',
+    },
+  }
+  ```
+
+2. ## Style your UI
+
+  ```jsx
+  /** @jsx jsx */
+  import { jsx } from 'theme-ui'
+  export default props => (
+    <h1
+      sx={{
+        color: 'primary',
+        fontFamily: 'heading',
+      }}>
+      Hello
+    </h1>
+  )
+  ```
+
+</Tiles>
+
+<Tiles>
+
+- ## Ergonomic
+  Best-in-class developer ergonomics let you style
+  your application quickly and consistently
+  based on your theme
+- ## Themeable
+  Quickly and easily reference values from your theme
+  throughout your entire application, on any component
+- ## Constraint-based
+  Use color, typography, and layout scales
+  rooted in constraint-based design principles
+
+</Tiles>
+
+<Testimonials />
+
+<Tiles
+  sx={{
+    fontWeight: 'bold',
+    a: {
+      display: 'block',
+      color: 'inherit',
+      textDecoration: 'none',
+      ':hover': {
+        textDecoration: 'underline',
+      }
+    }
+  }}>
+
+- [Theme-aware `sx` prop for CSS](/getting-started/#sx-prop)
+- [30+ Built-in primitive UI components](/components)
+- [Simple, expressive MDX styling](/styling-mdx)
+- [Style with or without creating components](/getting-started/#sx-prop)
+- [Use Typography.js themes](/styling-mdx/#typographyjs)
+- [Easy, mobile-first responsive styles](/getting-started/#responsive-styles)
+- [Built-in dark mode](/color-modes)
+- [Plugin for Gatsby sites and themes](/packages/gatsby-plugin)
+- [Robust theming API](/theming)
+- [Backed with a Theme Specification](/theme-spec)
+
+</Tiles>
+
+<Box py={6}>
+
+## Get Started
+
+<Button
+  as='a'
+  href='/getting-started'
+  variant='black'>
+  Explore the Docs
+</Button>
+
+</Box>
+
+</Container>
+
+[build status]: https://flat.badgen.net/github/status/system-ui/theme-ui
+[version]: https://flat.badgen.net/npm/v/theme-ui
+[npm]: https://npmjs.com/package/theme-ui
+[mit license]: https://flat.badgen.net/badge/license/MIT/blue
+[size]: https://flat.badgen.net/bundlephobia/minzip/theme-ui
+[stars]: https://flat.badgen.net/github/stars/system-ui/theme-ui