Skip to content

Commit

Permalink
docs(index): move readme badges *on index page* to a seperate compone…
Browse files Browse the repository at this point in the history
…nt, and update them to match readme
  • Loading branch information
hasparus committed Jun 28, 2021
1 parent 095d02e commit 79ad51e
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 21 deletions.
92 changes: 92 additions & 0 deletions packages/docs/src/components/readme-badges.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
/** @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 (
<div
sx={{
display: 'flex',
flexWrap: 'wrap',
gap: '2px',
'> a': { height: '20px' },
}}>
<a href="https://github.com/system-ui/theme-ui">
<img
src="https://badgen.net/badge/-/github?icon=github&label"
alt="GitHub"
/>
</a>
<a href="https://github.com/system-ui/theme-ui/stargazers">
<img
src="https://badgen.net/github/stars/system-ui/theme-ui"
alt="GitHub Stars"
/>
</a>
<a>
<img
alt="npm (latest)"
src="https://img.shields.io/npm/v/theme-ui/latest"
/>
</a>
<a>
<img
alt="npm (develop)"
src="https://img.shields.io/npm/v/theme-ui/develop?color=%23e044aa"
/>
</a>
<a href="https://github.com/system-ui/theme-ui/graphs/contributors">
<img
src="https://img.shields.io/github/contributors/system-ui/theme-ui"
alt="Contributors"
/>
</a>
<a href="https://github.com/badges/shields/pulse">
<img
src="https://img.shields.io/github/commit-activity/m/system-ui/theme-ui"
alt="Activity"
/>
</a>
<a href="https://badgen.net/bundlephobia/minzip/theme-ui">
<img src="https://badgen.net/bundlephobia/minzip/theme-ui" alt="Size" />
</a>
<a href="https://bundlephobia.com/result?p=theme-ui">
<img
src="https://badgen.net/bundlephobia/tree-shaking/theme-ui"
alt="Tree Shaking"
/>
</a>
<a href="https://github.com/system-ui/theme-ui/blob/stable/LICENSE.md">
<img
src="https://badgen.net/badge/license/MIT/blue"
alt="MIT license"
/>
</a>
<a href="https://discord.gg/theme-ui">
<img
src="https://img.shields.io/discord/778553042466635786?color=%237289da&logo=discord"
alt="Join our Discord community"
/>
</a>
<a href="https://github.com/system-ui/theme-ui/actions?query=workflow%3ACI">
<img
src="https://github.com/system-ui/theme-ui/workflows/CI/badge.svg?branch=stable"
alt="Build Status"
/>
</a>
<a href="https://dashboard.cypress.io/projects/fmfid1/runs">
<img
src="https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/fmfid1/stable&logo=cypress"
alt="This project is using Cypress for end-to-end tests."
/>
</a>
<a href="https://percy.io/95212972/theme-ui">
<img
src="https://percy.io/static/images/percy-badge.svg"
alt="This project is using Percy.io for visual regression testing."
/>
</a>
</div>
)
}
36 changes: 15 additions & 21 deletions packages/docs/src/pages/index.mdx
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
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'

<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.
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)
Expand All @@ -20,16 +24,7 @@ with a flexible API for best-in-class developer ergonomics.

<Container>

[![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) <br/>
[![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)
<ReadmeBadges />

<Tiles columns={2}>

Expand Down Expand Up @@ -70,15 +65,14 @@ export default (props) => (
<Tiles>

- ## 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

</Tiles>

Expand Down

0 comments on commit 79ad51e

Please sign in to comment.