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

@@ -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 }}
-

.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

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

docs/.storybook/manager-head.html

@@ -1,10 +0,0 @@
-<style>
-{# storybook ui overrides #}
-#color-picker {
-    max-width: 40vw;
-}
-
-.css-10x86lf-Colors {
-    width: 20ch !important;
-}
-</style>

docs/package.json

@@ -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",

docs/script/build-storybook

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

docs/script/now-build.sh

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

package.json

@@ -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",

script/build-docs

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

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