From 8c17fdc1282c96249d9a55d06a100421267ac58c Mon Sep 17 00:00:00 2001 From: hasparus Date: Mon, 28 Jun 2021 23:19:21 +0200 Subject: [PATCH] docs(index): move readme badges *on index page* to a seperate component, and update them to match readme --- packages/docs/src/components/readme-badges.js | 93 +++++++++++++++++++ packages/docs/src/pages/index.mdx | 36 +++---- packages/e2e/integration/docs-color-modes.ts | 6 +- 3 files changed, 111 insertions(+), 24 deletions(-) create mode 100644 packages/docs/src/components/readme-badges.js diff --git a/packages/docs/src/components/readme-badges.js b/packages/docs/src/components/readme-badges.js new file mode 100644 index 000000000..6bce8a013 --- /dev/null +++ b/packages/docs/src/components/readme-badges.js @@ -0,0 +1,93 @@ +/** @jsx jsx */ +import { jsx } from 'theme-ui' + +// Straight-up copied from README.md +// We may extract it from that Markdown file in a fancy way some day. Maybe... +export default function ReadmeBadges() { + return ( +
a': { height: '20px' }, + }}> + + GitHub + + + GitHub Stars + + + npm (latest) + + + npm (develop) + + + Contributors + + + Activity + + + Size + + + Tree Shaking + + + MIT license + + + Join our Discord community + + + Build Status + + + This project is using Cypress for end-to-end tests. + + + This project is using Percy.io for visual regression testing. + +
+ ) +} diff --git a/packages/docs/src/pages/index.mdx b/packages/docs/src/pages/index.mdx index cdeb281c5..629732164 100644 --- a/packages/docs/src/pages/index.mdx +++ b/packages/docs/src/pages/index.mdx @@ -1,7 +1,10 @@ import { Container, Box, Button } from 'theme-ui' + import { Banner, Tiles } from '..' -import Testimonials from './testimonials' import Graph from '../components/graph' +import ReadmeBadges from '../components/readme-badges' + +import Testimonials from './testimonials' @@ -9,9 +12,10 @@ 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. +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) @@ -20,16 +24,7 @@ with a flexible API for best-in-class developer ergonomics. -[![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) + @@ -70,15 +65,14 @@ export default (props) => ( - ## Ergonomic - Best-in-class developer ergonomics let you style - your application quickly and consistently - based on your theme + 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 + 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 + Use color, typography, and layout scales rooted in constraint-based design + principles diff --git a/packages/e2e/integration/docs-color-modes.ts b/packages/e2e/integration/docs-color-modes.ts index 1ed90be70..8ba72b729 100644 --- a/packages/e2e/integration/docs-color-modes.ts +++ b/packages/e2e/integration/docs-color-modes.ts @@ -34,9 +34,9 @@ const removeDynamicElements = () => { .log('removed graph') // tests failing because somebody became online on Discord aren't funny... - cy.findByAltText('Join our Discord community') - .then((img) => img.remove()) - .log('removed Discord badge') + cy.findByTestId('readme-badges') + .then((badges) => badges.remove()) + .log('removed readme badges') } const screenshot = (message?: string) => {