Skip to content

PD-3811 merge tailwind.css into styles.css #33

PD-3811 merge tailwind.css into styles.css

PD-3811 merge tailwind.css into styles.css #33

name: Deploy UI Docs (PR Preview)
on:
pull_request:
branches:
- main
paths:
- 'projects/orcid-ui-docs/**'
- 'projects/orcid-ui/**'
- 'projects/orcid-tokens/**'
- 'package.json'
- 'angular.json'
- '.github/workflows/deploy-ui-docs-pr.yml'
workflow_dispatch:
# Allows manual triggering for testing
jobs:
build-and-deploy-preview:
runs-on: ubuntu-latest
permissions:
contents: write
pull-requests: write # To comment on PR with preview URL
steps:
- name: Checkout repository
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Extract ticket ID from branch name
id: extract-ticket
env:
HEAD_REF: ${{ github.head_ref }}
REF_NAME: ${{ github.ref_name }}
run: |
BRANCH_NAME="${HEAD_REF:-$REF_NAME}"
echo "Branch name: $BRANCH_NAME"
# Extract ticket ID (e.g., PD-1234 from lmendoza/PD-1234)
TICKET_ID=$(echo "$BRANCH_NAME" | grep -oE '[A-Z]+-[0-9]+' || echo "")
if [ -z "$TICKET_ID" ]; then
echo "WARNING: No ticket ID found in branch name, using full branch name"
# Sanitize branch name for URL (replace / with -)
TICKET_ID=$(echo "$BRANCH_NAME" | sed 's/\//-/g')
fi
echo "ticket_id=$TICKET_ID" >> "$GITHUB_OUTPUT"
echo "Extracted ticket ID: $TICKET_ID"
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'yarn'
- name: Install dependencies
run: yarn install --frozen-lockfile
- name: Build orcid-ui-docs with dynamic base-href
run: |
TICKET_ID="${{ steps.extract-ticket.outputs.ticket_id }}"
BASE_HREF="/orcid-angular/runway/$TICKET_ID/"
echo "Building with base-href: $BASE_HREF"
yarn build:ui-docs --base-href "$BASE_HREF"
continue-on-error: false
- name: Determine build output directory
id: set-output
run: |
if [ -d "dist/orcid-ui-docs/browser" ]; then
echo "directory=dist/orcid-ui-docs/browser" >> "$GITHUB_OUTPUT"
elif [ -d "dist/orcid-ui-docs" ]; then
echo "directory=dist/orcid-ui-docs" >> "$GITHUB_OUTPUT"
else
echo "ERROR: Build output directory not found" >&2
ls -la dist/ >&2
exit 1
fi
- name: Setup SPA support for GitHub Pages
run: |
BUILD_DIR="${{ steps.set-output.outputs.directory }}"
# Copy index.html to 404.html for SPA routing support
# This 404.html will handle routes within THIS specific PR preview SPA
cp "$BUILD_DIR/index.html" "$BUILD_DIR/404.html"
# Note: .nojekyll is already in the repo root and applies to all subdirectories
echo "✅ SPA support configured: 404.html created for PR preview"
- name: Deploy to GitHub Pages (PR Preview)
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ${{ steps.set-output.outputs.directory }}
destination_dir: runway/${{ steps.extract-ticket.outputs.ticket_id }}
keep_files: true # Keep other PR previews and main deployment
cname: false
- name: Comment on PR with preview URL
uses: actions/github-script@v7
if: github.event_name == 'pull_request'
with:
script: |
const ticketId = '${{ steps.extract-ticket.outputs.ticket_id }}';
const previewUrl = `https://orcid.github.io/orcid-angular/runway/${ticketId}/`;
const comment = `## 🚀 Preview Deployment
Your UI docs preview is ready!
**Preview URL:** ${previewUrl}
This preview will be updated automatically when you push new commits to this PR.
---
*Deployed from commit: \`${context.sha.substring(0, 7)}\`*`;
// Find existing comment
const { data: comments } = await github.rest.issues.listComments({
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: context.issue.number,
});
const botComment = comments.find(comment =>
comment.user.type === 'Bot' &&
comment.body.includes('🚀 Preview Deployment')
);
if (botComment) {
// Update existing comment
await github.rest.issues.updateComment({
owner: context.repo.owner,
repo: context.repo.repo,
comment_id: botComment.id,
body: comment
});
} else {
// Create new comment
await github.rest.issues.createComment({
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: context.issue.number,
body: comment
});
}