primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-23 11:27:26 +03:00
Code Issues Projects Releases Wiki Activity

fix: update how the docs site gets bundle metadata

Browse Source
This commit is contained in:
Shawn Allen 2019-02-11 22:31:58 -08:00
parent adee9fa07a
commit fad4f76fb8
2 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/landing/index.js
View File

@ -137,7 +137,7 @@ export function PrimerPackageBox({data = {}, count, ...rest}) {
}
export function MetaPackageBox({children, data = {}, title, ...rest}) {
const deps = data.dependencies || []
const deps = data.imports || []
return (
<Flex.Item is={BorderBox} bg="white" maxWidth={220} {...rest}>
<BorderBox bg="gray.1" border={0} borderBottom={1} borderRadius={0} px={3} py={2}>

16
pages/css/index.md
View File

@ -8,7 +8,7 @@ import {
} from '../../docs/landing'
import {CONTENT_MAX_WIDTH} from '../../docs/constants'
import {name, version} from '../../package.json'
import packages from './packages.json'
import {bundles} from '../../dist/meta.json'
export const Hero = () => (
<Box bg="black">
@ -46,17 +46,17 @@ Primer is built upon systems that form the foundation of our styles such as spac
Each component or group of styles is packaged up and distributed via npm. Primer includes 23 packages that are grouped into useful meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.
<PrimerPackageBox data={packages.primer} count={Object.keys(packages).length - 1} mb={4} />
<PrimerPackageBox data={bundles.primer} count={Object.keys(bundles).length - 1} mb={4} />
<Flex justifyContent="space-around" mb={6}>
<MetaPackageBox title="Core" data={packages['primer-core']} width={1/3}>
The core package contains modules that are shared between GitHub product and marketing websites.
<MetaPackageBox title="Core" data={bundles.core} width={1/3}>
The core bundle contains styles that are shared between GitHub product and marketing websites.
</MetaPackageBox>
<MetaPackageBox title="Product" data={packages['primer-product']} width={1/3}>
The product package contains modules that are used on GitHub product websites.
<MetaPackageBox title="Product" data={bundles.product} width={1/3}>
The product bundle contains styles that are used on GitHub product websites.
</MetaPackageBox>
<MetaPackageBox title="Marketing" data={packages['primer-marketing']} width={1/3}>
The marketing package contains modules that are used on GitHub marketing websites.
<MetaPackageBox title="Marketing" data={bundles.marketing} width={1/3}>
The marketing bundle contains styles that are used on GitHub marketing websites.
</MetaPackageBox>
</Flex>