From 40b9e1674cead3257dd8275b7e4010f74c7cbdca Mon Sep 17 00:00:00 2001 From: Rez Date: Wed, 20 Apr 2022 00:26:47 +0100 Subject: [PATCH] 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 --- .github/workflows/deploy_preview.yml | 77 ++++++++----------- .github/workflows/deploy_production.yml | 48 ++++++++---- DEVELOP.md | 47 ++++++----- docs/.storybook/manager-head.html | 10 --- docs/package.json | 4 +- .../{build-storybook.sh => build-storybook} | 8 +- docs/script/now-build.sh | 12 --- package.json | 3 + script/build-docs | 14 ++++ vercel.json | 36 --------- 10 files changed, 111 insertions(+), 148 deletions(-) delete mode 100644 docs/.storybook/manager-head.html rename docs/script/{build-storybook.sh => build-storybook} (59%) delete mode 100755 docs/script/now-build.sh create mode 100755 script/build-docs delete mode 100644 vercel.json diff --git a/.github/workflows/deploy_preview.yml b/.github/workflows/deploy_preview.yml index 2bcfc1ee..95afb117 100644 --- a/.github/workflows/deploy_preview.yml +++ b/.github/workflows/deploy_preview.yml @@ -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 }} - diff --git a/.github/workflows/deploy_production.yml b/.github/workflows/deploy_production.yml index 99423b56..45d351c0 100644 --- a/.github/workflows/deploy_production.yml +++ b/.github/workflows/deploy_production.yml @@ -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 diff --git a/DEVELOP.md b/DEVELOP.md index 308d215a..ce4a34dd 100644 --- a/DEVELOP.md +++ b/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