From f7356073abc147aad039808b927e33cbbcf24ea0 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 7 Jun 2021 13:46:04 +0200 Subject: [PATCH] Revert "Docs: Move homepage to root path (#1783)" This reverts commit 7851037859b3089fd064ea6fedf855738f059a2f. --- packages/docs/src/components/layout.js | 3 +- packages/docs/src/pages/home.mdx | 123 ++++++++++++++++++ packages/docs/src/pages/index.mdx | 167 ++++++++----------------- 3 files changed, 174 insertions(+), 119 deletions(-) create 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 9c3543895..faac58d02 100644 --- a/packages/docs/src/components/layout.js +++ b/packages/docs/src/components/layout.js @@ -48,7 +48,8 @@ export default function DocsLayout(props) { const fullwidth = (props.pageContext.frontmatter && props.pageContext.frontmatter.fullwidth) || - props.location.pathname === '/' + props.location.pathname === '/home' || + props.location.pathname === '/home/' const showNav = !props.pageContext?.frontmatter?.hidenav diff --git a/packages/docs/src/pages/home.mdx b/packages/docs/src/pages/home.mdx new file mode 100644 index 000000000..cdeb281c5 --- /dev/null +++ b/packages/docs/src/pages/home.mdx @@ -0,0 +1,123 @@ +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 cdeb281c5..1274f7f85 100644 --- a/packages/docs/src/pages/index.mdx +++ b/packages/docs/src/pages/index.mdx @@ -1,123 +1,54 @@ -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 */ +--- +fullwidth: true +hidenav: true +--- export default (props) => ( -

- Hello -

+ {props.children} + ) -``` - - - - - -- ## 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/). + +---