mirror of
https://github.com/primer/css.git
synced 2024-08-17 12:10:33 +03:00
add deployment workflows for GitHub Pages (#2038)
* add workflows * change trigger to pull_request * remove duplciate workflow stage name * remove workflow trigger conditions * switch to experimental workflow * attempt restoring storybook environment * fix build trigger * apply correct storybook environment * add deployments to permissions * bump more permissions * add ref * another workaround * change target_url to make deployment appear * revert ref stuff
This commit is contained in:
parent
8df9029009
commit
40b9e1674c
77
.github/workflows/deploy_preview.yml
vendored
77
.github/workflows/deploy_preview.yml
vendored
@ -1,74 +1,57 @@
|
||||
name: Deploy
|
||||
on:
|
||||
push:
|
||||
branches-ignore:
|
||||
- 'main'
|
||||
paths:
|
||||
- 'src/**'
|
||||
- 'docs/**'
|
||||
- '.github/workflows/deploy*.yml'
|
||||
- 'package.json'
|
||||
pull_request:
|
||||
|
||||
permissions:
|
||||
contents: write
|
||||
pages: write
|
||||
id-token: write
|
||||
deployments: write
|
||||
issues: write
|
||||
statuses: write
|
||||
checks: write
|
||||
|
||||
jobs:
|
||||
deploy-preview:
|
||||
deploy:
|
||||
if: ${{ github.repository == 'primer/css' }}
|
||||
name: Preview
|
||||
uses: primer/.github/.github/workflows/deploy_preview.yml@rezrah/add-outputs
|
||||
name: Deploy preview
|
||||
with:
|
||||
node_version: 14
|
||||
install: yarn
|
||||
build: yarn build:docs:preview
|
||||
output_dir: docs/public
|
||||
|
||||
deploy-storybook:
|
||||
if: ${{ github.repository == 'primer/css' }}
|
||||
name: Preview Storybook
|
||||
runs-on: ubuntu-latest
|
||||
needs: deploy
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: chrnorm/deployment-action@v1.2.0
|
||||
name: Create GitHub deployment
|
||||
id: deployment
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
environment: Preview
|
||||
|
||||
- uses: chrnorm/deployment-action@v1.2.0
|
||||
name: Create GitHub deployment for storybook
|
||||
id: storybook
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
environment: Storybook Preview
|
||||
target_url: '${{ needs.deploy.outputs.deployment_url }}/storybook'
|
||||
|
||||
- name: Vercel Action
|
||||
uses: amondnet/vercel-action@v20
|
||||
id: vercel-action
|
||||
with:
|
||||
github-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
vercel-token: ${{ secrets.VERCEL_TOKEN_SHARED }}
|
||||
github-comment: false
|
||||
vercel-org-id: ${{ secrets.VERCEL_ORG_ID_SHARED }}
|
||||
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
|
||||
|
||||
- name: Update deployment status (success)
|
||||
if: success()
|
||||
uses: chrnorm/deployment-status@v1.0.0
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
environment_url: ${{ steps.vercel-action.outputs.preview-url }}
|
||||
state: "success"
|
||||
deployment_id: ${{ steps.deployment.outputs.deployment_id }}
|
||||
|
||||
- name: Update storybook deployment status (success)
|
||||
if: success()
|
||||
uses: chrnorm/deployment-status@v1.0.0
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
environment_url: '${{ steps.vercel-action.outputs.preview-url }}/css/storybook'
|
||||
state: "success"
|
||||
environment_url: '${{ needs.deploy.outputs.deployment_url }}/storybook'
|
||||
target_url: '${{ needs.deploy.outputs.deployment_url }}/storybook'
|
||||
state: 'success'
|
||||
deployment_id: ${{ steps.storybook.outputs.deployment_id }}
|
||||
|
||||
- name: Update deployment status (failure)
|
||||
if: failure()
|
||||
uses: chrnorm/deployment-status@v1.0.0
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
state: "failure"
|
||||
deployment_id: ${{ steps.deployment.outputs.deployment_id }}
|
||||
|
||||
- name: Update storybook deployment status (failure)
|
||||
if: failure()
|
||||
uses: chrnorm/deployment-status@v1.0.0
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
state: "failure"
|
||||
state: 'failure'
|
||||
deployment_id: ${{ steps.storybook.outputs.deployment_id }}
|
||||
|
||||
|
48
.github/workflows/deploy_production.yml
vendored
48
.github/workflows/deploy_production.yml
vendored
@ -8,26 +8,40 @@ on:
|
||||
- 'docs/**'
|
||||
- '.github/workflows/deploy*.yml'
|
||||
- 'package.json'
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
jobs:
|
||||
deploy:
|
||||
if: ${{ github.repository == 'primer/css' }}
|
||||
name: Production
|
||||
guard:
|
||||
name: Guard
|
||||
runs-on: ubuntu-latest
|
||||
outputs:
|
||||
# To avoid deploying documentation for unrelease changes, we check the number of changeset files.
|
||||
# If it's 0, we deploy.
|
||||
should_deploy: ${{ steps.changeset-count.outputs.change_count == 0 }}
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
# Check the number of changeset files, if it's 0 we deploy
|
||||
- id: changeset-count
|
||||
run: echo "::set-output name=CHANGE_COUNT::$(ls .changeset/*.md | grep -v README | wc -l | xargs)"
|
||||
run: echo "::set-output name=change_count::$(ls .changeset/*.md | grep -v README | wc -l | xargs)"
|
||||
|
||||
- if: ${{ steps.changeset-count.outputs.CHANGE_COUNT == 0 }}
|
||||
name: Vercel Action
|
||||
uses: amondnet/vercel-action@v20
|
||||
id: vercel-action
|
||||
with:
|
||||
github-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
vercel-token: ${{ secrets.VERCEL_TOKEN_SHARED }}
|
||||
vercel-args: '--prod'
|
||||
github-comment: false
|
||||
vercel-org-id: ${{ secrets.VERCEL_ORG_ID_SHARED }}
|
||||
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
|
||||
# Log changeset count for debugging purposes
|
||||
- name: Log changeset count
|
||||
run: echo ${{ steps.changeset-count.outputs.change_count }}
|
||||
|
||||
# Log guard output for debugging purposes
|
||||
- name: Log guard output
|
||||
run: echo ${{ needs.guard.outputs.should_deploy }}
|
||||
deploy:
|
||||
if: ${{ github.repository == 'primer/css' && needs.guard.outputs.should_deploy == true }}
|
||||
name: Production
|
||||
needs: [guard]
|
||||
uses: primer/.github/.github/workflows/deploy_preview.yml@main
|
||||
with:
|
||||
node_version: 14
|
||||
install: yarn
|
||||
build: yarn build:docs
|
||||
output_dir: docs/public
|
||||
|
47
DEVELOP.md
47
DEVELOP.md
@ -3,29 +3,32 @@
|
||||
If you've made it this far, **thank you**! We appreciate your contribution, and hope that this document helps you along the way. If you have any questions or problems, don't hesitate to [file an issue](https://github.com/primer/css/issues/new).
|
||||
|
||||
## Structure
|
||||
|
||||
Primer CSS is published to [npm] as [@primer/css]. Each of Primer CSS's "modules" lives in a subfolder under `src/` with an `index.scss` in it. Generally speaking, the styles are divided into three primary themes:
|
||||
|
||||
* **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc.
|
||||
* **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators.
|
||||
* **Marketing** styles (in `marketing/`) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales.
|
||||
- **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc.
|
||||
- **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators.
|
||||
- **Marketing** styles (in `marketing/`) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales.
|
||||
|
||||
### Paths
|
||||
|
||||
Here's what you need to know about how the files are structured in both git and in the published npm module:
|
||||
|
||||
* In git, all of the SCSS source files live in the `src/` directory.
|
||||
* When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with:
|
||||
- In git, all of the SCSS source files live in the `src/` directory.
|
||||
- When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with:
|
||||
|
||||
```scss
|
||||
@import "@primer/css/utilities/index.scss";
|
||||
```
|
||||
|
||||
* All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`).
|
||||
```scss
|
||||
@import '@primer/css/utilities/index.scss';
|
||||
```
|
||||
|
||||
- All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`).
|
||||
|
||||
## Install
|
||||
|
||||
Run `npm install` to install the npm dependencies.
|
||||
|
||||
## Docs site
|
||||
|
||||
The Primer CSS docs are built with React using [Doctocat](https://primer.style/doctocat) and automatically deployed on every push to this repo with [Now]. You can run the server locally with:
|
||||
|
||||
```sh
|
||||
@ -35,41 +38,43 @@ npm start
|
||||
Then visit http://localhost:8000 to view the site.
|
||||
|
||||
### The docs directory
|
||||
|
||||
The [docs directory](../docs/) contains all of the documentation files in our docs site. Files are nested in the `/content` folder.
|
||||
|
||||
|
||||
### Code blocks
|
||||
|
||||
All `html` fenced code blocks in `src/**/*.md` will be rendered as stories and listed under the relevant module's name in the left-hand nav. File changes should trigger a live reload automatically (after a brief delay).
|
||||
|
||||
## Storybook
|
||||
|
||||
Primer CSS Storybook is used for designing and prototyping components. Stories are written in HTML and leverage the Storybook API for configuring conditional logic.
|
||||
Primer CSS Storybook is used for designing and prototyping components. Stories are written in HTML and leverage the Storybook API for configuring conditional logic.
|
||||
|
||||
```sh
|
||||
npm run storybook
|
||||
```
|
||||
|
||||
### The Storybook directory
|
||||
|
||||
Storybook configuration files live in [.storybook](../docs/.storybook). Addons and additional global config can be added to [main.js](../docs/.storybook/main.js) or [preview.js](../docs/.storybook/preview.js)
|
||||
|
||||
### Stories
|
||||
|
||||
Stories are individual `.jsx` or `.mdx` files that contain component HTML for prototyping, typically showcasing all possible variations of a component. Stories can be found in the [stories directory](../docs/src/stories/components) and are organized by component. Storybook will build and deploy a preview on any open Pull Request.
|
||||
|
||||
## Scripts
|
||||
|
||||
Our [`package.json`](package.json) houses a collection of [run-scripts] that we use to maintain, test, build, and publish Primer CSS. Run `npm run <script>` with any of the following values for `<script>`:
|
||||
|
||||
* `dist` runs `script/dist`, which creates CSS bundles of all the `index.scss` files in `src/`.
|
||||
* `check-links` runs a link checker on your local development server (`localhost:3000`, started with `npm start`).
|
||||
* `stylelint` lints the CSS source files.
|
||||
* `eslint` lints the JavaScript source files.
|
||||
* `now-build` and `now-start` are run on [Now] to build and start the docs site server. `now-test` runs them both in order.
|
||||
* `start` runs the documentation site locally (alias: `dev`).
|
||||
* `test` runs our test suite.
|
||||
* `storybook` runs storybook local development server.
|
||||
- `dist` runs `script/dist`, which creates CSS bundles of all the `index.scss` files in `src/`.
|
||||
- `check-links` runs a link checker on your local development server (`localhost:3000`, started with `npm start`).
|
||||
- `stylelint` lints the CSS source files.
|
||||
- `eslint` lints the JavaScript source files.
|
||||
- `start` runs the documentation site locally (alias: `dev`).
|
||||
- `test` runs our test suite.
|
||||
- `storybook` runs storybook local development server.
|
||||
|
||||
The above list may not always be up-to-date. You can list all of the available scripts by calling `npm run` with no other arguments.
|
||||
|
||||
|
||||
[@primer/css]: https://www.npmjs.com/package/@primer/css
|
||||
[run-scripts]: https://docs.npmjs.com/cli/run-script
|
||||
[now]: https://zeit.co/now
|
||||
|
@ -1,10 +0,0 @@
|
||||
<style>
|
||||
{# storybook ui overrides #}
|
||||
#color-picker {
|
||||
max-width: 40vw;
|
||||
}
|
||||
|
||||
.css-10x86lf-Colors {
|
||||
width: 20ch !important;
|
||||
}
|
||||
</style>
|
@ -5,10 +5,8 @@
|
||||
"scripts": {
|
||||
"clean": "gatsby clean",
|
||||
"develop": "ln -sf ../dist . && gatsby develop -H 0.0.0.0",
|
||||
"build-content": "gatsby build --prefix-paths",
|
||||
"build": "./script/now-build.sh && ./script/build-storybook.sh",
|
||||
"storybook": "NODE_ENV=test start-storybook -p 6006",
|
||||
"build-storybook": "./script/build-storybook.sh"
|
||||
"build:storybook": "script/build-storybook"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/preset-react": "^7.16.7",
|
||||
|
@ -1,7 +1,11 @@
|
||||
#!/bin/bash
|
||||
|
||||
set -e
|
||||
# Add base url to be able to serve static files
|
||||
echo '<base href="/css/storybook/" />' >> .storybook/manager-head.html
|
||||
if [ -n "$1" ]; then
|
||||
echo '<base href="/storybook/" />' >> .storybook/manager-head.html
|
||||
else
|
||||
echo '<base href="/css/storybook/" />' >> .storybook/manager-head.html
|
||||
fi
|
||||
|
||||
# Build storybook inside docs
|
||||
./node_modules/.bin/build-storybook -o public/storybook -s public/static
|
@ -1,12 +0,0 @@
|
||||
#!/bin/bash -e
|
||||
|
||||
# Build the base project so we can pull out the JSON data
|
||||
cd ..
|
||||
yarn
|
||||
yarn dist
|
||||
cp -rf dist docs
|
||||
|
||||
# Now build the docs site using that data
|
||||
cd docs
|
||||
yarn
|
||||
CI=true yarn build-content
|
@ -23,6 +23,8 @@
|
||||
"design-system"
|
||||
],
|
||||
"scripts": {
|
||||
"build:docs": "script/build-docs",
|
||||
"build:docs:preview": "script/build-docs preview",
|
||||
"dist": "script/dist.js",
|
||||
"dist:watch": "chokidar \"src/**/*.scss\" -c \"script/dist.js\"",
|
||||
"stylelint": "stylelint --quiet --rd 'src/**/*.scss'",
|
||||
@ -33,6 +35,7 @@
|
||||
"prepublishOnly": "script/prepublish",
|
||||
"start": "yarn dev",
|
||||
"dev": "cd docs && yarn && yarn develop",
|
||||
"postinstall": "cd docs && yarn",
|
||||
"pretest": "yarn dist && script/pretest",
|
||||
"test": "NODE_OPTIONS=--experimental-vm-modules yarn jest",
|
||||
"release": "changeset publish",
|
||||
|
14
script/build-docs
Executable file
14
script/build-docs
Executable file
@ -0,0 +1,14 @@
|
||||
#!/bin/bash -e
|
||||
|
||||
# Build the base project so we can pull out the JSON data
|
||||
yarn dist
|
||||
cp -rf dist docs
|
||||
|
||||
# Now build the docs site using that data
|
||||
cd docs
|
||||
|
||||
if [ -n "$1" ]; then
|
||||
CI=true yarn gatsby build && yarn build:storybook preview
|
||||
else
|
||||
CI=true yarn gatsby build --prefix-paths && yarn build:storybook
|
||||
fi
|
36
vercel.json
36
vercel.json
@ -1,36 +0,0 @@
|
||||
{
|
||||
"version": 2,
|
||||
"name": "primer-css",
|
||||
"alias": "primer-css.vercel.app",
|
||||
"builds": [
|
||||
{
|
||||
"src": "docs/package.json",
|
||||
"use": "@now/static-build",
|
||||
"config": {"distDir": "public"}
|
||||
}
|
||||
],
|
||||
"routes": [
|
||||
{
|
||||
"src": "/",
|
||||
"status": 301,
|
||||
"headers": {"Location": "/css"}
|
||||
},
|
||||
{
|
||||
"src": "/css/objects/layout/?",
|
||||
"status": 301,
|
||||
"headers": {"Location": "/css/utilities/grid"}
|
||||
},
|
||||
{
|
||||
"src": "/css/objects/grid/?",
|
||||
"status": 301,
|
||||
"headers": {"Location": "/css/utilities/grid"}
|
||||
},
|
||||
{
|
||||
"src": "/css(/.*)?",
|
||||
"dest": "/docs$1"
|
||||
}
|
||||
],
|
||||
"github": {
|
||||
"enabled": false
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user