fix #387 - feat: Deploy released Editor versions to GitHub Pages

.github/actions/setup-ci/action.yml

@@ -22,6 +22,18 @@ inputs:
     description: "Enable pnpm cache. Disable if the workflow does not run pnpm install."
     required: false
     default: "true"
+  pnpmInstall:
+    description: "Run pnpm install after setup."
+    required: false
+    default: "true"
+  working_directory:
+    description: "Working directory for pnpm install."
+    required: false
+    default: "."
+  playwrightInstall:
+    description: "Install Playwright browsers after setup."
+    required: false
+    default: "false"
 
 runs:
   using: "composite"
@@ -36,3 +48,15 @@ runs:
       with:
         version: 10.31.0
         cache: ${{ inputs.pnpm_cache == 'true' }}
+
+    - name: Install dependencies
+      if: inputs.pnpmInstall == 'true'
+      shell: bash
+      working-directory: ${{ inputs.working_directory }}
+      run: pnpm install ${{ github.event_name == 'pull_request' && github.event.pull_request.user.login == 'dependabot[bot]' && '--no-frozen-lockfile' || '' }}
+
+    - name: Install Playwright browsers
+      if: inputs.playwrightInstall == 'true'
+      shell: bash
+      working-directory: ${{ inputs.working_directory }}
+      run: pnpm playwright:install:ci

.github/workflows/ci_build.yaml

@@ -47,12 +47,9 @@ jobs:
 
       - name: Setup CI
         uses: ./.github/actions/setup-ci
-
-      - name: Install dependencies
-        run: pnpm install ${{ github.event_name == 'pull_request' && github.event.pull_request.user.login == 'dependabot[bot]' && '--no-frozen-lockfile' || '' }}
-
-      - name: Install Playwright browsers
-        run: pnpm playwright:install:ci
+        with:
+          pnpmInstall: true
+          playwrightInstall: true
 
       - name: Check dependency and package version consistency
         run: pnpm dependencies:check

.github/workflows/ci_check_license_headers.yaml

@@ -40,7 +40,8 @@ jobs:
       - name: Setup CI
         uses: ./.github/actions/setup-ci
         with:
-          pnpm_cache: "false"
+          pnpm_cache: false
+          pnpmInstall: false
 
       - name: "Setup JDK 17"
         uses: actions/setup-java@dd06d9cba3e5552c54d9f8ea23572deb30010f7c # v6.0.0

.github/workflows/deploy-pages.yaml

@@ -0,0 +1,123 @@
+#
+# Copyright 2021-Present The Open Workflow Specification Authors
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+# http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+name: "Release :: Deploy to GitHub Pages"
+on:
+  workflow_call:
+    inputs:
+      version:
+        required: true
+        type: string
+      latest:
+        description: "Set this version as latest"
+        type: boolean
+        default: true
+      dry_run:
+        description: "Run without pushing or deploying"
+        type: boolean
+        default: false
+  workflow_dispatch:
+    inputs:
+      version:
+        description: "Release version, e.g. 1.1.0"
+        required: true
+        type: string
+      latest:
+        description: "Set this version as latest"
+        type: boolean
+        default: false
+      dry_run:
+        description: "Run without pushing or deploying"
+        type: boolean
+        default: false
+concurrency:
+  group: deploy-pages
+  cancel-in-progress: false
+env:
+  DEPLOY_VERSION: ${{ inputs.version }}
+  DEPLOY_PREVIEW_PACKAGE_NAME: ${{ vars.PREVIEW_PACKAGE_NAME }}
+  DEPLOY_PREVIEW_PACKAGE_DIR: ${{ vars.PREVIEW_PACKAGE_DIR }}
+  DEPLOY_PREVIEW_PACKAGE_TAG: ${{ vars.PREVIEW_PACKAGE_NAME }}@${{ inputs.version }}
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Checkout workflow source
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          path: workflow-source
+
+      - name: Checkout release
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          ref: ${{ env.DEPLOY_PREVIEW_PACKAGE_TAG }}
+          path: release
+
+      - name: Setup CI
+        uses: ./workflow-source/.github/actions/setup-ci
+        with:
+          pnpmInstall: true
+          working_directory: release
+          pnpm_cache: false # Disable pnpm cache because the release checkout lives under release/, not at the workspace root.
+
+      - name: Build Storybook
+        working-directory: release
+        run: |
+          pnpm -F "${DEPLOY_PREVIEW_PACKAGE_NAME}..." build:dev
+          pnpm -F "${DEPLOY_PREVIEW_PACKAGE_NAME}" build:storybook
+
+      - name: Checkout gh-pages
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          ref: gh-pages
+          path: pages
+
+      - name: Add release
+        run: |
+          BUILD="release/${DEPLOY_PREVIEW_PACKAGE_DIR}/dist-storybook"
+          rm -rf "pages/${DEPLOY_VERSION}"
+          cp -R "${BUILD}" "pages/${DEPLOY_VERSION}"
+          if [ "${{ inputs.latest }}" = "true" ]; then
+            rm -rf pages/latest
+            ln -s "${DEPLOY_VERSION}" pages/latest
+          fi
+
+      - name: Update gh-pages
+        run: |
+          cd pages
+          git config user.name "github-actions[bot]"
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git add -A
+          git commit -s -m "deploy: ${DEPLOY_PREVIEW_PACKAGE_NAME}@${DEPLOY_VERSION}"
+          git push ${{ inputs.dry_run && '--dry-run' || '' }}
+
+      - name: Upload Pages artifact
+        if: ${{ !inputs.dry_run }}
+        uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3
+        with:
+          path: pages
+
+      - name: Deploy
+        id: deployment
+        if: ${{ !inputs.dry_run }}
+        uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4

.github/workflows/prepare-release.yaml

@@ -32,9 +32,8 @@ jobs:
 
       - name: Setup CI
         uses: ./.github/actions/setup-ci
-
-      - name: Install dependencies
-        run: pnpm install
+        with:
+          pnpmInstall: true
 
       - name: Create Release Pull Request
         uses: changesets/action@ae32849d5ba541f9ae29e40e22a623bc13562f51 # v2.1.2

.github/workflows/publish-release.yaml

@@ -23,11 +23,6 @@ on:
       - main
       - "*.x"
 
-permissions:
-  contents: write
-  pull-requests: read
-  id-token: write
-
 jobs:
   publish:
     if: |
@@ -37,6 +32,13 @@ jobs:
       github.event.pull_request.title == 'chore: version packages' &&
       startsWith(github.event.pull_request.head.ref, 'changeset-release/')
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: read
+      id-token: write
+    outputs:
+      published: ${{ steps.publish.outputs.published }}
+      version: ${{ steps.released-version.outputs.version }}
     steps:
       - name: Checkout release branch
         uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
@@ -45,17 +47,36 @@ jobs:
 
       - name: Setup CI
         uses: ./.github/actions/setup-ci
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Install Playwright browsers
-        run: pnpm playwright:install:ci
+        with:
+          pnpmInstall: true
+          playwrightInstall: true
 
       - name: Build packages
         run: pnpm build:prod
 
       - name: Publish to npm
+        id: publish
         uses: changesets/action@ae32849d5ba541f9ae29e40e22a623bc13562f51 # v2.1.2
         with:
-          publish: pnpm changeset publish
+          publish-script: pnpm changeset publish
+
+      - name: Resolve released preview package version
+        id: released-version
+        if: steps.publish.outputs.published == 'true'
+        run: |
+          VERSION="$(node -p "require('./${{ vars.PREVIEW_PACKAGE_DIR }}/package.json').version")"
+          echo "version=${VERSION}" >> "$GITHUB_OUTPUT"
+
+  # Publishes the released Storybook to GitHub Pages.
+  deploy-pages:
+    needs: publish
+    if: needs.publish.outputs.published == 'true' && needs.publish.outputs.version != ''
+    uses: ./.github/workflows/deploy-pages.yaml
+    permissions:
+      contents: write
+      pages: write
+      id-token: write
+    with:
+      version: ${{ needs.publish.outputs.version }}
+      latest: ${{ github.event.pull_request.base.ref == 'main' }}
+      dry_run: false

README.md

@@ -21,6 +21,8 @@ The official **vendor-neutral visual editor** for the [Open Workflow Specificati
 [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
 [![CNCF Sandbox](https://img.shields.io/badge/CNCF-Sandbox-informational)](https://www.cncf.io/projects/serverless-workflow/)
 
+**[Try the editor](https://open-workflow-specification.github.io/editor/latest/)** — the latest released version.
+
 ## Overview
 
 This project provides an interactive, visual diagram editor designed to be:
@@ -199,6 +201,7 @@ The `commit-msg` hook will automatically verify DCO compliance.
 
 - **Automated Testing**: All PRs run linting, type checking, unit tests, and E2E tests
 - **Netlify Previews**: Storybook is automatically deployed for PRs modifying the diagram editor package
+- **GitHub Pages**: Each released version is published to [open-workflow-specification.github.io/editor/latest/](https://open-workflow-specification.github.io/editor/latest/), built from its git tag. Unlike the Netlify previews, this only ever shows what has been released to npm
 - **Dependency Updates**: Automated via Dependabot
 - **License Header Checks**: Apache 2.0 headers verified on all source files
 

RELEASE_PROCESS.md

@@ -39,10 +39,50 @@ On merge, the publish workflow automatically (no manual action needed):
 - Builds and tests packages
 - Publishes to npm
 - Creates git tags and GitHub releases
+- Deploys the Storybook to GitHub Pages, built from the new tag
 
-Check CI run at: [https://github.com/open-workflow-specification/editor/actions/workflows/publish-release.yaml](https://github.com/open-workflow-specification/editor/actions/workflows/publish-release.yaml)  
-GH Releases: [https://github.com/open-workflow-specification/editor/releases](https://github.com/open-workflow-specification/editor/releases)  
+Check CI run at: [https://github.com/open-workflow-specification/editor/actions/workflows/publish-release.yaml](https://github.com/open-workflow-specification/editor/actions/workflows/publish-release.yaml)
+GitHub Releases: [https://github.com/open-workflow-specification/editor/releases](https://github.com/open-workflow-specification/editor/releases)
 NPM publishing at: [https://www.npmjs.com/package/@openworkflowspec/diagram-editor?activeTab=versions](https://www.npmjs.com/package/@openworkflowspec/diagram-editor?activeTab=versions)
+GitHub Pages: [https://open-workflow-specification.github.io/editor/latest/](https://open-workflow-specification.github.io/editor/latest/)
+
+---
+
+# GitHub Pages Deployment
+
+Every release is published to GitHub Pages by `.github/workflows/deploy-pages.yaml`, run as the final job of the publish workflow.
+
+## What gets deployed
+
+The Storybook build, made from the **git tag** just published — never from `main`. The deployed site therefore shows only what is on npm. Unreleased work on `main` keeps its Netlify preview (see `netlify.toml`) and never reaches Pages.
+
+## Layout
+
+Versioned deployments are retained on the `gh-pages` branch:
+
+```
+/1.1.0/           permanent version URL
+/1.2.0/
+/latest/          current release
+```
+
+Link to `/latest/` for a URL that follows releases, or to a specific version for a stable versioned URL.
+
+`latest` is updated by releases published from `main`. Patch releases from an `X.Y.x` maintenance branch are published under their versioned URL without changing `latest`.
+
+## Deploying a tag manually
+
+To backfill an older release or redeploy after a failed run, run the ["Release :: Deploy to GitHub Pages"](https://github.com/open-workflow-specification/editor/actions/workflows/deploy-pages.yaml)
+workflow with the version number, e.g. `1.1.0`. The workflow builds from the corresponding git tag.
+
+Or using the GitHub CLI:
+
+```bash
+gh workflow run deploy-pages.yaml \
+  --repo open-workflow-specification/editor \
+  --field version=1.1.0 \
+  --field latest=false
+```
 
 ---
 

packages/open-workflow-diagram-editor/README.md

@@ -18,6 +18,8 @@
 
 Official visual diagram editor for the [Open Workflow Specification](https://github.com/open-workflow-specification/specification). A vendor-neutral, embeddable React component with strict separation between core logic and platform APIs.
 
+**[Try the editor](https://open-workflow-specification.github.io/editor/latest/)** — the latest released version.
+
 ## Getting Started
 
 ### Requirements
@@ -30,7 +32,7 @@ npm install react@^19 react-dom@^19
 
 ## Non-React Usage
 
-If your application doesn't use React, you can embed the editor as a Web Component.  
+If your application doesn't use React, you can embed the editor as a Web Component.
 See the [Vanilla Web Component example](https://github.com/open-workflow-specification/editor/tree/main/examples/vanilla-web-component) for a working setup.
 
 ## Installation