Skip to content

Commit 584c125

Browse files
ap0ughtap0ught
authored
Merge pull request #40 from ap0ught/copilot/merge-upstream-pr-66
Cherry-pick critical bug fixes from upstream PR #66 and add PR preview deployment
2 parents 5f8cb57 + 3f3d24e commit 584c125

File tree

7 files changed

+410
-37
lines changed

7 files changed

+410
-37
lines changed

‎.github/PR_PREVIEW.md‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# PR Preview Deployment
2+
3+
This repository has automated PR preview deployments set up via GitHub Actions.
4+
5+
## How It Works
6+
7+
When a Pull Request is created or updated:
8+
9+
1. The PR Preview workflow automatically deploys the PR branch to GitHub Pages
10+
2. Each PR gets its own subdirectory: `https://ap0ught.github.io/matrix/pr-{number}/`
11+
3. A comment is posted on the PR with links to test the preview
12+
4. The preview is automatically updated when new commits are pushed
13+
14+
## Manual Deployment
15+
16+
You can also manually trigger a preview deployment:
17+
18+
1. Go to the Actions tab
19+
2. Select "PR Preview Deployment"
20+
3. Click "Run workflow"
21+
4. Select the branch you want to deploy
22+
23+
## Preview URLs
24+
25+
After deployment, you can access your PR preview at:
26+
27+
- **Main preview:** `https://ap0ught.github.io/matrix/pr-{number}/`
28+
- **With options:** `https://ap0ught.github.io/matrix/pr-{number}/?suppressWarnings=true`
29+
30+
### Test Links
31+
32+
The automated PR comment includes convenient test links for different Matrix versions:
33+
34+
- Default Matrix effect
35+
- Mirror mode with mouse interaction
36+
- 3D volumetric mode
37+
- Resurrections version
38+
39+
## Cleanup
40+
41+
PR previews remain on GitHub Pages until manually removed. To clean up old previews:
42+
43+
1. Check out the `gh-pages` branch
44+
2. Remove the `pr-{number}` directory
45+
3. Commit and push
46+
47+
## Requirements
48+
49+
- GitHub Pages must be enabled for the repository
50+
- The workflow requires these permissions:
51+
- `contents: write` - to push to gh-pages branch
52+
- `pages: write` - to deploy to GitHub Pages
53+
- `pull-requests: write` - to comment on PRs
54+
55+
## Technical Details
56+
57+
- **Workflow file:** `.github/workflows/pr-preview.yml`
58+
- **Deployment branch:** `gh-pages`
59+
- **Directory structure:** Each PR gets its own subdirectory
60+
- **Files deployed:** `index.html`, `js/`, `lib/`, `assets/`, `shaders/`
61+
62+
## Limitations
63+
64+
- This is a static site deployment - no server-side processing
65+
- Previews don't require any build step (keeping with the project's philosophy)
66+
- Each preview is a complete copy of the web application
67+
68+
## Local Testing Alternative
69+
70+
If you prefer to test locally instead of using the preview:
71+
72+
```bash
73+
# Clone and checkout the PR branch
74+
git fetch origin pull/{PR_NUMBER}/head:pr-{PR_NUMBER}
75+
git checkout pr-{PR_NUMBER}
76+
77+
# Start a local server
78+
python3 -m http.server 8000
79+
80+
# Open in browser
81+
open http://localhost:8000/?suppressWarnings=true
82+
```

‎.github/workflows/pr-preview.yml‎

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
name: PR Preview Deployment
2+
3+
# Deploy PR branches to GitHub Pages at /pr-{number}/ for testing
4+
# This allows testing changes without merging to master
5+
6+
on:
7+
workflow_dispatch: # Allow manual trigger
8+
pull_request:
9+
types: [opened, synchronize, reopened]
10+
branches:
11+
- master
12+
13+
permissions:
14+
contents: write
15+
pages: write
16+
id-token: write
17+
pull-requests: write
18+
19+
jobs:
20+
deploy-preview:
21+
name: Deploy PR Preview
22+
runs-on: ubuntu-latest
23+
24+
steps:
25+
- name: Checkout PR branch
26+
uses: actions/checkout@v4
27+
with:
28+
ref: ${{ github.event.pull_request.head.sha || github.sha }}
29+
fetch-depth: 1
30+
token: ${{ github.token }}
31+
32+
- name: Determine preview path
33+
id: preview
34+
run: |
35+
if [ "${{ github.event_name }}" = "pull_request" ]; then
36+
PR_NUMBER="${{ github.event.pull_request.number }}"
37+
PREVIEW_PATH="pr-${PR_NUMBER}"
38+
else
39+
# Manual trigger - use branch name
40+
BRANCH_NAME="${GITHUB_REF#refs/heads/}"
41+
PREVIEW_PATH="pr-${BRANCH_NAME//\//-}"
42+
fi
43+
echo "path=${PREVIEW_PATH}" >> $GITHUB_OUTPUT
44+
echo "url=https://ap0ught.github.io/matrix/${PREVIEW_PATH}/" >> $GITHUB_OUTPUT
45+
echo "Preview will be deployed to: ${PREVIEW_PATH}"
46+
47+
- name: Checkout gh-pages branch
48+
uses: actions/checkout@v4
49+
with:
50+
ref: gh-pages
51+
path: gh-pages
52+
fetch-depth: 0
53+
token: ${{ github.token }}
54+
continue-on-error: true
55+
56+
- name: Initialize gh-pages if needed
57+
run: |
58+
if [ ! -d "gh-pages/.git" ]; then
59+
echo "Creating new gh-pages branch"
60+
rm -rf gh-pages
61+
mkdir -p gh-pages
62+
cd gh-pages
63+
git init
64+
git config user.name "github-actions[bot]"
65+
git config user.email "github-actions[bot]@users.noreply.github.com"
66+
git checkout -b gh-pages
67+
68+
# Set up remote with authentication
69+
git remote add origin "https://x-access-token:${{ github.token }}@github.com/${{ github.repository }}.git"
70+
71+
echo "# Matrix PR Previews" > README.md
72+
echo "" >> README.md
73+
echo "This branch contains PR preview deployments." >> README.md
74+
echo "Main site: https://ap0ught.github.io/matrix/" >> README.md
75+
76+
git add .
77+
git commit -m "Initialize gh-pages branch"
78+
cd ..
79+
else
80+
echo "gh-pages branch exists, configuring..."
81+
cd gh-pages
82+
git config user.name "github-actions[bot]"
83+
git config user.email "github-actions[bot]@users.noreply.github.com"
84+
cd ..
85+
fi
86+
87+
- name: Prepare preview directory
88+
run: |
89+
PREVIEW_PATH="${{ steps.preview.outputs.path }}"
90+
91+
# Create preview directory in gh-pages
92+
mkdir -p "gh-pages/${PREVIEW_PATH}"
93+
94+
# Copy web application files to preview directory
95+
cp index.html "gh-pages/${PREVIEW_PATH}/"
96+
cp -r js "gh-pages/${PREVIEW_PATH}/"
97+
cp -r lib "gh-pages/${PREVIEW_PATH}/"
98+
cp -r assets "gh-pages/${PREVIEW_PATH}/"
99+
cp -r shaders "gh-pages/${PREVIEW_PATH}/"
100+
101+
# Optional files (don't fail if missing)
102+
cp README.md "gh-pages/${PREVIEW_PATH}/" 2>/dev/null || true
103+
cp screenshot.png "gh-pages/${PREVIEW_PATH}/" 2>/dev/null || true
104+
105+
echo "✅ Preview files copied to gh-pages/${PREVIEW_PATH}"
106+
ls -la "gh-pages/${PREVIEW_PATH}"
107+
108+
- name: Update gh-pages index
109+
run: |
110+
cd gh-pages
111+
112+
# Create or update index.html with list of previews
113+
cat > index.html <<'HTMLEOF'
114+
<!DOCTYPE html>
115+
<html lang="en">
116+
<head>
117+
<meta charset="UTF-8">
118+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
119+
<title>Matrix PR Previews</title>
120+
<style>
121+
body {
122+
font-family: 'Courier New', monospace;
123+
background: #000;
124+
color: #0f0;
125+
padding: 20px;
126+
max-width: 800px;
127+
margin: 0 auto;
128+
}
129+
h1 { color: #0f0; text-shadow: 0 0 10px #0f0; }
130+
a { color: #0f0; text-decoration: none; }
131+
a:hover { text-decoration: underline; text-shadow: 0 0 5px #0f0; }
132+
.preview {
133+
margin: 10px 0;
134+
padding: 10px;
135+
border: 1px solid #0f0;
136+
border-radius: 4px;
137+
}
138+
.main-link {
139+
font-size: 1.2em;
140+
margin-bottom: 30px;
141+
padding: 15px;
142+
border: 2px solid #0f0;
143+
border-radius: 4px;
144+
}
145+
</style>
146+
</head>
147+
<body>
148+
<h1>Matrix PR Preview Deployments</h1>
149+
150+
<div class="main-link">
151+
<strong>Main Site:</strong> <a href="/">https://ap0ught.github.io/matrix/</a>
152+
</div>
153+
154+
<h2>Available PR Previews:</h2>
155+
<div id="previews"></div>
156+
157+
<script>
158+
const previews = [];
159+
HTMLEOF
160+
161+
# Add preview paths to the list
162+
for dir in pr-*/ ; do
163+
if [ -d "$dir" ]; then
164+
dir_name="${dir%/}"
165+
echo " previews.push('$dir_name');" >> index.html
166+
fi
167+
done
168+
169+
cat >> index.html <<'HTMLEOF'
170+
171+
const container = document.getElementById('previews');
172+
if (previews.length === 0) {
173+
container.innerHTML = '<p>No PR previews available yet.</p>';
174+
} else {
175+
previews.sort().reverse().forEach(preview => {
176+
const div = document.createElement('div');
177+
div.className = 'preview';
178+
div.innerHTML = `<strong>${preview}</strong>: <a href="/matrix/${preview}/">View Preview</a>`;
179+
container.appendChild(div);
180+
});
181+
}
182+
</script>
183+
</body>
184+
</html>
185+
HTMLEOF
186+
187+
echo "✅ Updated gh-pages index.html"
188+
189+
- name: Deploy to gh-pages
190+
run: |
191+
cd gh-pages
192+
193+
# Ensure git config is set
194+
git config user.name "github-actions[bot]"
195+
git config user.email "github-actions[bot]@users.noreply.github.com"
196+
197+
# Set up authentication for push
198+
git remote set-url origin "https://x-access-token:${{ github.token }}@github.com/${{ github.repository }}.git" || \
199+
git remote add origin "https://x-access-token:${{ github.token }}@github.com/${{ github.repository }}.git"
200+
201+
# Stage all changes
202+
git add .
203+
204+
# Check if there are changes to commit
205+
if git diff --staged --quiet; then
206+
echo "No changes to deploy"
207+
else
208+
git commit -m "Deploy preview: ${{ steps.preview.outputs.path }}"
209+
210+
# Push to gh-pages branch
211+
git push origin gh-pages --force
212+
echo "✅ Successfully deployed to gh-pages"
213+
fi
214+
215+
- name: Comment on PR with preview URL
216+
if: github.event_name == 'pull_request'
217+
uses: actions/github-script@v7
218+
with:
219+
script: |
220+
const previewUrl = '${{ steps.preview.outputs.url }}';
221+
const comment = `## 🎬 PR Preview Deployed!
222+
223+
Your changes are now available for testing:
224+
225+
**Preview URL:** ${previewUrl}
226+
227+
### Test Links:
228+
- [Default Matrix](${previewUrl}?suppressWarnings=true)
229+
- [Mirror Effect](${previewUrl}?effect=mirror&suppressWarnings=true)
230+
- [3D Mode](${previewUrl}?version=3d&suppressWarnings=true)
231+
- [Resurrections](${previewUrl}?version=resurrections&suppressWarnings=true)
232+
233+
The preview will be updated automatically when you push new commits.
234+
235+
---
236+
*Preview deployed from commit ${{ github.event.pull_request.head.sha }}*`;
237+
238+
// Find existing preview comment
239+
const { data: comments } = await github.rest.issues.listComments({
240+
owner: context.repo.owner,
241+
repo: context.repo.repo,
242+
issue_number: context.issue.number,
243+
});
244+
245+
const botComment = comments.find(comment =>
246+
comment.user.type === 'Bot' &&
247+
comment.body.includes('PR Preview Deployed')
248+
);
249+
250+
if (botComment) {
251+
// Update existing comment
252+
await github.rest.issues.updateComment({
253+
owner: context.repo.owner,
254+
repo: context.repo.repo,
255+
comment_id: botComment.id,
256+
body: comment
257+
});
258+
} else {
259+
// Create new comment
260+
await github.rest.issues.createComment({
261+
owner: context.repo.owner,
262+
repo: context.repo.repo,
263+
issue_number: context.issue.number,
264+
body: comment
265+
});
266+
}
267+
268+
- name: Summary
269+
run: |
270+
echo "## 🎉 PR Preview Deployed Successfully!" >> $GITHUB_STEP_SUMMARY
271+
echo "" >> $GITHUB_STEP_SUMMARY
272+
echo "**Preview URL:** ${{ steps.preview.outputs.url }}" >> $GITHUB_STEP_SUMMARY
273+
echo "" >> $GITHUB_STEP_SUMMARY
274+
echo "### Quick Test Links:" >> $GITHUB_STEP_SUMMARY
275+
echo "- [Default Matrix](${{ steps.preview.outputs.url }}?suppressWarnings=true)" >> $GITHUB_STEP_SUMMARY
276+
echo "- [Mirror Effect](${{ steps.preview.outputs.url }}?effect=mirror&suppressWarnings=true)" >> $GITHUB_STEP_SUMMARY
277+
echo "- [3D Mode](${{ steps.preview.outputs.url }}?version=3d&suppressWarnings=true)" >> $GITHUB_STEP_SUMMARY

‎js/regl/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export default async (canvas, config) => {
7373
};
7474
const effects = createEffectsMapping("regl", passModules);
7575
const effectPass = getEffectPass(config.effect, effects, "palette");
76-
const context = { regl, config, lkg, cameraTex, cameraAspectRatio };
76+
const context = { regl, canvas, config, lkg, cameraTex, cameraAspectRatio };
7777
const pipeline = makePipeline(context, [makeRain, makeBloomPass, effectPass, makeQuiltPass]);
7878
const screenUniforms = { tex: pipeline[pipeline.length - 1].outputs.primary };
7979
const drawToScreen = regl({ uniforms: screenUniforms });

0 commit comments

Comments
 (0)