mirror of
https://github.com/primer/css.git
synced 2024-09-11 16:36:07 +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
|
name: Deploy
|
||||||
on:
|
on:
|
||||||
push:
|
pull_request:
|
||||||
branches-ignore:
|
|
||||||
- 'main'
|
permissions:
|
||||||
paths:
|
contents: write
|
||||||
- 'src/**'
|
pages: write
|
||||||
- 'docs/**'
|
id-token: write
|
||||||
- '.github/workflows/deploy*.yml'
|
deployments: write
|
||||||
- 'package.json'
|
issues: write
|
||||||
|
statuses: write
|
||||||
|
checks: write
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
deploy-preview:
|
deploy:
|
||||||
if: ${{ github.repository == 'primer/css' }}
|
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
|
runs-on: ubuntu-latest
|
||||||
|
needs: deploy
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- 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
|
- uses: chrnorm/deployment-action@v1.2.0
|
||||||
name: Create GitHub deployment for storybook
|
name: Create GitHub deployment for storybook
|
||||||
id: storybook
|
id: storybook
|
||||||
with:
|
with:
|
||||||
token: ${{ secrets.GITHUB_TOKEN }}
|
token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
environment: Storybook Preview
|
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)
|
- name: Update storybook deployment status (success)
|
||||||
if: success()
|
if: success()
|
||||||
uses: chrnorm/deployment-status@v1.0.0
|
uses: chrnorm/deployment-status@v1.0.0
|
||||||
with:
|
with:
|
||||||
token: ${{ secrets.GITHUB_TOKEN }}
|
token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
environment_url: '${{ steps.vercel-action.outputs.preview-url }}/css/storybook'
|
environment_url: '${{ needs.deploy.outputs.deployment_url }}/storybook'
|
||||||
state: "success"
|
target_url: '${{ needs.deploy.outputs.deployment_url }}/storybook'
|
||||||
|
state: 'success'
|
||||||
deployment_id: ${{ steps.storybook.outputs.deployment_id }}
|
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)
|
- name: Update storybook deployment status (failure)
|
||||||
if: failure()
|
if: failure()
|
||||||
uses: chrnorm/deployment-status@v1.0.0
|
uses: chrnorm/deployment-status@v1.0.0
|
||||||
with:
|
with:
|
||||||
token: ${{ secrets.GITHUB_TOKEN }}
|
token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
state: "failure"
|
state: 'failure'
|
||||||
deployment_id: ${{ steps.storybook.outputs.deployment_id }}
|
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/**'
|
- 'docs/**'
|
||||||
- '.github/workflows/deploy*.yml'
|
- '.github/workflows/deploy*.yml'
|
||||||
- 'package.json'
|
- 'package.json'
|
||||||
|
|
||||||
|
permissions:
|
||||||
|
contents: read
|
||||||
|
pages: write
|
||||||
|
id-token: write
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
deploy:
|
guard:
|
||||||
if: ${{ github.repository == 'primer/css' }}
|
name: Guard
|
||||||
name: Production
|
|
||||||
runs-on: ubuntu-latest
|
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:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v2
|
||||||
|
|
||||||
# Check the number of changeset files, if it's 0 we deploy
|
|
||||||
- id: changeset-count
|
- 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 }}
|
# Log changeset count for debugging purposes
|
||||||
name: Vercel Action
|
- name: Log changeset count
|
||||||
uses: amondnet/vercel-action@v20
|
run: echo ${{ steps.changeset-count.outputs.change_count }}
|
||||||
id: vercel-action
|
|
||||||
with:
|
# Log guard output for debugging purposes
|
||||||
github-token: ${{ secrets.GITHUB_TOKEN }}
|
- name: Log guard output
|
||||||
vercel-token: ${{ secrets.VERCEL_TOKEN_SHARED }}
|
run: echo ${{ needs.guard.outputs.should_deploy }}
|
||||||
vercel-args: '--prod'
|
deploy:
|
||||||
github-comment: false
|
if: ${{ github.repository == 'primer/css' && needs.guard.outputs.should_deploy == true }}
|
||||||
vercel-org-id: ${{ secrets.VERCEL_ORG_ID_SHARED }}
|
name: Production
|
||||||
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
|
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).
|
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
|
## 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:
|
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.
|
- **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.
|
- **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.
|
- **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
|
### Paths
|
||||||
|
|
||||||
Here's what you need to know about how the files are structured in both git and in the published npm module:
|
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.
|
- 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:
|
- When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with:
|
||||||
|
|
||||||
```scss
|
```scss
|
||||||
@import "@primer/css/utilities/index.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`).
|
|
||||||
|
|
||||||
|
- 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
|
## Install
|
||||||
|
|
||||||
Run `npm install` to install the npm dependencies.
|
Run `npm install` to install the npm dependencies.
|
||||||
|
|
||||||
## Docs site
|
## 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:
|
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
|
```sh
|
||||||
@ -35,41 +38,43 @@ npm start
|
|||||||
Then visit http://localhost:8000 to view the site.
|
Then visit http://localhost:8000 to view the site.
|
||||||
|
|
||||||
### The docs directory
|
### The docs directory
|
||||||
|
|
||||||
The [docs directory](../docs/) contains all of the documentation files in our docs site. Files are nested in the `/content` folder.
|
The [docs directory](../docs/) contains all of the documentation files in our docs site. Files are nested in the `/content` folder.
|
||||||
|
|
||||||
|
|
||||||
### Code blocks
|
### 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).
|
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
|
## 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
|
```sh
|
||||||
npm run storybook
|
npm run storybook
|
||||||
```
|
```
|
||||||
|
|
||||||
### The Storybook directory
|
### 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)
|
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
|
||||||
|
|
||||||
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.
|
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
|
## 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>`:
|
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/`.
|
- `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`).
|
- `check-links` runs a link checker on your local development server (`localhost:3000`, started with `npm start`).
|
||||||
* `stylelint` lints the CSS source files.
|
- `stylelint` lints the CSS source files.
|
||||||
* `eslint` lints the JavaScript 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`).
|
||||||
* `start` runs the documentation site locally (alias: `dev`).
|
- `test` runs our test suite.
|
||||||
* `test` runs our test suite.
|
- `storybook` runs storybook local development server.
|
||||||
* `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.
|
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
|
[@primer/css]: https://www.npmjs.com/package/@primer/css
|
||||||
[run-scripts]: https://docs.npmjs.com/cli/run-script
|
[run-scripts]: https://docs.npmjs.com/cli/run-script
|
||||||
[now]: https://zeit.co/now
|
[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": {
|
"scripts": {
|
||||||
"clean": "gatsby clean",
|
"clean": "gatsby clean",
|
||||||
"develop": "ln -sf ../dist . && gatsby develop -H 0.0.0.0",
|
"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",
|
"storybook": "NODE_ENV=test start-storybook -p 6006",
|
||||||
"build-storybook": "./script/build-storybook.sh"
|
"build:storybook": "script/build-storybook"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/preset-react": "^7.16.7",
|
"@babel/preset-react": "^7.16.7",
|
||||||
|
@ -1,7 +1,11 @@
|
|||||||
#!/bin/bash
|
#!/bin/bash
|
||||||
|
set -e
|
||||||
# Add base url to be able to serve static files
|
# 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
|
# Build storybook inside docs
|
||||||
./node_modules/.bin/build-storybook -o public/storybook -s public/static
|
./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"
|
"design-system"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"build:docs": "script/build-docs",
|
||||||
|
"build:docs:preview": "script/build-docs preview",
|
||||||
"dist": "script/dist.js",
|
"dist": "script/dist.js",
|
||||||
"dist:watch": "chokidar \"src/**/*.scss\" -c \"script/dist.js\"",
|
"dist:watch": "chokidar \"src/**/*.scss\" -c \"script/dist.js\"",
|
||||||
"stylelint": "stylelint --quiet --rd 'src/**/*.scss'",
|
"stylelint": "stylelint --quiet --rd 'src/**/*.scss'",
|
||||||
@ -33,6 +35,7 @@
|
|||||||
"prepublishOnly": "script/prepublish",
|
"prepublishOnly": "script/prepublish",
|
||||||
"start": "yarn dev",
|
"start": "yarn dev",
|
||||||
"dev": "cd docs && yarn && yarn develop",
|
"dev": "cd docs && yarn && yarn develop",
|
||||||
|
"postinstall": "cd docs && yarn",
|
||||||
"pretest": "yarn dist && script/pretest",
|
"pretest": "yarn dist && script/pretest",
|
||||||
"test": "NODE_OPTIONS=--experimental-vm-modules yarn jest",
|
"test": "NODE_OPTIONS=--experimental-vm-modules yarn jest",
|
||||||
"release": "changeset publish",
|
"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