From 7851037859b3089fd064ea6fedf855738f059a2f Mon Sep 17 00:00:00 2001 From: Lachlan Campbell Date: Sun, 30 May 2021 11:59:30 -0700 Subject: [PATCH] Docs: Move homepage to root path (#1783) * Drop homepage file * Update layout exception * Rename home.mdx to index.mdx --- packages/docs/src/components/layout.js | 3 +- packages/docs/src/pages/home.mdx | 123 ------------------ packages/docs/src/pages/index.mdx | 167 +++++++++++++++++-------- 3 files changed, 119 insertions(+), 174 deletions(-) delete mode 100644 packages/docs/src/pages/home.mdx diff --git a/packages/docs/src/components/layout.js b/packages/docs/src/components/layout.js index faac58d02..9c3543895 100644 --- a/packages/docs/src/components/layout.js +++ b/packages/docs/src/components/layout.js @@ -48,8 +48,7 @@ export default function DocsLayout(props) { const fullwidth = (props.pageContext.frontmatter && props.pageContext.frontmatter.fullwidth) || - props.location.pathname === '/home' || - props.location.pathname === '/home/' + props.location.pathname === '/' const showNav = !props.pageContext?.frontmatter?.hidenav diff --git a/packages/docs/src/pages/home.mdx b/packages/docs/src/pages/home.mdx deleted file mode 100644 index cdeb281c5..000000000 --- a/packages/docs/src/pages/home.mdx +++ /dev/null @@ -1,123 +0,0 @@ -import { Container, Box, Button } from 'theme-ui' -import { Banner, Tiles } from '..' -import Testimonials from './testimonials' -import Graph from '../components/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) - - - - - -[![GitHub Stars](https://badgen.net/github/stars/system-ui/theme-ui)](https://github.com/system-ui/theme-ui/stargazers) -![npm (latest)](https://img.shields.io/npm/v/theme-ui/latest) -![npm (next)](https://img.shields.io/npm/v/theme-ui/next?color=%23e044aa) -[![Build Status](https://github.com/system-ui/theme-ui/workflows/CI/badge.svg)](https://github.com/system-ui/theme-ui/actions?query=workflow%3ACI) -[![Contributors](https://img.shields.io/github/contributors/system-ui/theme-ui)](https://github.com/system-ui/theme-ui/graphs/contributors) -[![Activity](https://img.shields.io/github/commit-activity/m/system-ui/theme-ui)](https://github.com/badges/shields/pulse)
-[![Size](https://badgen.net/bundlephobia/minzip/theme-ui)](https://badgen.net/bundlephobia/minzip/theme-ui) -[![Tree Shaking](https://badgen.net/bundlephobia/tree-shaking/theme-ui)](https://bundlephobia.com/result?p=theme-ui) -[![MIT license](https://badgen.net/badge/license/MIT/blue)](https://github.com/system-ui/theme-ui/blob/stable/LICENSE.md) -[![Join our Discord community](https://img.shields.io/discord/778553042466635786?color=%237289da&logo=discord)](https://discord.gg/theme-ui) - - - -1. ## Create your theme - -```js -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 -/** @jsxImportSource theme-ui */ - -export default (props) => ( -

- Hello -

-) -``` - - - - - -- ## 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 - - - - - - - -- [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) - - - - - -## Get Started - - - - - - diff --git a/packages/docs/src/pages/index.mdx b/packages/docs/src/pages/index.mdx index 1274f7f85..cdeb281c5 100644 --- a/packages/docs/src/pages/index.mdx +++ b/packages/docs/src/pages/index.mdx @@ -1,54 +1,123 @@ ---- -fullwidth: true -hidenav: true ---- +import { Container, Box, Button } from 'theme-ui' +import { Banner, Tiles } from '..' +import Testimonials from './testimonials' +import Graph from '../components/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) + + + + + +[![GitHub Stars](https://badgen.net/github/stars/system-ui/theme-ui)](https://github.com/system-ui/theme-ui/stargazers) +![npm (latest)](https://img.shields.io/npm/v/theme-ui/latest) +![npm (next)](https://img.shields.io/npm/v/theme-ui/next?color=%23e044aa) +[![Build Status](https://github.com/system-ui/theme-ui/workflows/CI/badge.svg)](https://github.com/system-ui/theme-ui/actions?query=workflow%3ACI) +[![Contributors](https://img.shields.io/github/contributors/system-ui/theme-ui)](https://github.com/system-ui/theme-ui/graphs/contributors) +[![Activity](https://img.shields.io/github/commit-activity/m/system-ui/theme-ui)](https://github.com/badges/shields/pulse)
+[![Size](https://badgen.net/bundlephobia/minzip/theme-ui)](https://badgen.net/bundlephobia/minzip/theme-ui) +[![Tree Shaking](https://badgen.net/bundlephobia/tree-shaking/theme-ui)](https://bundlephobia.com/result?p=theme-ui) +[![MIT license](https://badgen.net/badge/license/MIT/blue)](https://github.com/system-ui/theme-ui/blob/stable/LICENSE.md) +[![Join our Discord community](https://img.shields.io/discord/778553042466635786?color=%237289da&logo=discord)](https://discord.gg/theme-ui) + + + +1. ## Create your theme + +```js +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 +/** @jsxImportSource theme-ui */ export default (props) => ( -
- {props.children} -
+ Hello + ) +``` + + + + + +- ## 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 + + + + + + + +- [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) + + + + + +## Get Started + + + + -# #BlackLivesMatter - -## George Floyd - -Tony McDade, Yassin Mohamed, Finan H. Berhe, Sean Reed, Steven Demarco Taylor, -Breonna Taylor, Ariane McCree, Terrance Franklin, Miles Hall, Darius Tarver, -William Green, Samuel David Mallard, Kwame Jones, De’von Bailey, Christopher Whitfield, -Anthony Hill, De’Von Bailey, Eric Logan, Jamarion Robinson, Gregory Hill Jr, -JaQuavion Slaton, Ryan Twyman, Brandon Webber, Jimmy Atchison, Willie McCoy, -Emantic Fitzgerald Bradford J, D’ettrick Griffin, Jemel Roberson, DeAndre Ballard, -Botham Shem Jean, Robert Lawrence White, Anthony Lamar Smith, Ramarley Graham, -Manuel Loggins Jr, Trayvon Martin, Wendell Allen, Kendrec McDade, Larry Jackson Jr, -Jonathan Ferrell, Jordan Baker, Victor White III, Dontre Hamilton, Eric Garner, -John Crawford III, Michael Brown, Ezell Ford, Dante Parker, Kajieme Powell, -Laquan McDonald, Akai Gurley, Tamir Rice, Rumain Brisbon, Jerame Reid, Charly Keunang, -Tony Robinson, Walter Scott, Freddie Gray, Brendon Glenn, Samuel DuBose, Christian Taylor, -Jamar Clark, Mario Woods, Quintonio LeGrier, Gregory Gunn, Akiel Denkins, Alton Sterling, -Philando Castile, Terrence Sterling, Terence Crutcher, Keith Lamont Scott, Alfred Olango, -Jordan Edwards, Stephon Clark, Danny Ray Thomas, DeJuan Guillory, Patrick Harmon, -Jonathan Hart, Maurice Granton, Julius Johnson, Jamee Johnson, Michael Dean... - -
-
- -The homepage is currently offline, as a small mark of respect, and expression of solidarity. -The rest of the [docs pages are still available](/home). - -Organizations that could use your financial support include -[Black Lives Matter](https://blacklivesmatter.com), -[The NAACP Legal Defense and Educational Fund](https://www.naacpldf.org), -[The Equal Justice Initiative](https://eji.org), -[We The Protesters](https://www.wetheprotesters.org), -and the -[Philadelphia Bail Fund](https://www.phillybailfund.org/). - ---- +