Skip to content

Commit dc793d2

Browse files
yuhattoryuhattor
authored
Merge pull request #1033 from InnerSourceCommons/copilot/fix-1028
Add website preview for all pull requests with GitHub Codespaces integration
2 parents 73a0eb0 + efa10c9 commit dc793d2

File tree

8 files changed

+315
-0
lines changed

8 files changed

+315
-0
lines changed

‎.devcontainer/devcontainer.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "Hugo (InnerSource Commons Website)",
3+
"image": "mcr.microsoft.com/devcontainers/base:ubuntu",
4+
"features": {
5+
"ghcr.io/devcontainers/features/git:1": {},
6+
"ghcr.io/devcontainers/features/node:1": {
7+
"version": "lts"
8+
}
9+
},
10+
"customizations": {
11+
"vscode": {
12+
"extensions": [
13+
"bungcip.better-toml",
14+
"davidanson.vscode-markdownlint",
15+
"esbenp.prettier-vscode",
16+
"ms-vscode.live-server",
17+
"tamasfe.even-better-toml",
18+
"ms-vscode.js-debug-nightly"
19+
],
20+
"settings": {
21+
"editor.formatOnSave": true,
22+
"editor.defaultFormatter": "esbenp.prettier-vscode",
23+
"debug.javascript.autoAttachFilter": "smart"
24+
}
25+
}
26+
},
27+
"forwardPorts": [1313],
28+
"remoteUser": "vscode",
29+
"postCreateCommand": "npm install; cd /tmp && wget -O hugo.deb https://github.com/gohugoio/hugo/releases/download/v0.133.1/hugo_extended_0.133.1_linux-amd64.deb && sudo dpkg -i hugo.deb && rm hugo.deb && npm init -y && npm install hugo-bin@latest && hugo version && echo 'Hugo server ready to run! Use the Run and Debug view to start the server.'"
30+
}

‎.github/PULL_REQUEST_TEMPLATE/default.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
## Description
2+
<!-- Describe the changes you are making -->
3+
4+
## Website Preview
5+
<!-- A preview of this PR will be automatically generated. -->
6+
<!-- It may take a few minutes after creation/update to appear. -->
7+
<!-- You'll see the preview link in a comment below. -->
8+
9+
## Checklist
10+
- [ ] I have tested these changes locally
11+
- [ ] I have updated documentation if necessary
12+
- [ ] I have verified the preview looks as expected (when the preview comment appears)

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

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
name: PR Preview
2+
3+
on:
4+
pull_request:
5+
types: [opened, synchronize, reopened]
6+
7+
jobs:
8+
build-preview:
9+
runs-on: ubuntu-latest
10+
permissions:
11+
contents: write
12+
pull-requests: write
13+
steps:
14+
- uses: actions/checkout@v3
15+
16+
- name: Setup Hugo
17+
uses: peaceiris/actions-hugo@v2
18+
with:
19+
hugo-version: '0.133.1'
20+
extended: true
21+
22+
- name: Copy the missing files from /content/en for publishing each language site
23+
run: |
24+
for i in fr ja pt-br; do
25+
rsync -rv --ignore-existing content/en/ content/$i/ --log-file=content/.gitignore;
26+
sed -i "s/^.\{37\} /$i\//g" content/.gitignore;
27+
sed -i '/total size\|file list/d' content/.gitignore;
28+
done
29+
30+
- name: Build
31+
run: hugo --minify
32+
33+
- name: Setup GitHub Pages
34+
id: pages
35+
uses: actions/configure-pages@v3
36+
37+
- name: Deploy Preview to GitHub Pages Branch
38+
run: |
39+
PR_NUMBER=${{ github.event.pull_request.number }}
40+
PREVIEW_DIR="pr-preview/pr-$PR_NUMBER"
41+
42+
git config --global user.name "github-actions[bot]"
43+
git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
44+
45+
git clone --quiet --branch=gh-pages --depth=1 https://${GITHUB_TOKEN}@github.com/${{ github.repository }}.git gh-pages
46+
47+
mkdir -p gh-pages/${PREVIEW_DIR}
48+
rm -rf gh-pages/${PREVIEW_DIR}/*
49+
cp -r public/* gh-pages/${PREVIEW_DIR}/
50+
51+
cd gh-pages
52+
git add .
53+
git commit -m "Update preview for PR #$PR_NUMBER" || echo "No changes to commit"
54+
git push origin gh-pages
55+
env:
56+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
57+
58+
- name: Add or Update PR Comment
59+
run: |
60+
PR_NUMBER=${{ github.event.pull_request.number }}
61+
PREVIEW_URL="${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/pr-preview/pr-$PR_NUMBER/"
62+
63+
# Check if comment already exists
64+
COMMENT_ID=$(gh pr view $PR_NUMBER --json comments --jq '.comments[] | select(.author.login == "github-actions[bot]" and contains(.body, "Preview this PR")) | .id')
65+
66+
if [ -z "$COMMENT_ID" ]; then
67+
# Create new comment
68+
gh pr comment $PR_NUMBER --body "### :rocket: Preview this PR
69+
70+
You can view a preview of the website changes at:
71+
https://${PREVIEW_URL}
72+
73+
This preview will be updated automatically as you make changes to the PR.
74+
75+
### :computer: Review in GitHub Codespaces
76+
77+
You can also review these changes directly in GitHub Codespaces:
78+
79+
1. Click the 'Code' button above and select the 'Codespaces' tab
80+
2. Create a codespace on this PR's branch
81+
3. Once loaded, press F5 or use the Run and Debug panel to start the Hugo server
82+
4. Make changes and see them update in real-time
83+
84+
For detailed instructions, refer to the [Codespaces documentation](../blob/main/CODESPACES.md).
85+
86+
_Note: The preview may take a few moments to deploy after changes are pushed._"
87+
else
88+
# Update existing comment
89+
gh pr comment $PR_NUMBER --edit-comment $COMMENT_ID --body "### :rocket: Preview this PR
90+
91+
You can view a preview of the website changes at:
92+
https://${PREVIEW_URL}
93+
94+
This preview will be updated automatically as you make changes to the PR.
95+
96+
### :computer: Review in GitHub Codespaces
97+
98+
You can also review these changes directly in GitHub Codespaces:
99+
100+
1. Click the 'Code' button above and select the 'Codespaces' tab
101+
2. Create a codespace on this PR's branch
102+
3. Once loaded, press F5 or use the Run and Debug panel to start the Hugo server
103+
4. Make changes and see them update in real-time
104+
105+
For detailed instructions, refer to the [Codespaces documentation](../blob/main/CODESPACES.md).
106+
107+
_Note: The preview may take a few moments to deploy after changes are pushed._"
108+
fi
109+
env:
110+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

‎.vscode/launch.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"name": "Hugo Server",
6+
"type": "pwa-node",
7+
"request": "launch",
8+
"program": "${workspaceFolder}/node_modules/.bin/hugo",
9+
"args": [
10+
"server",
11+
"--appendPort=false",
12+
"--baseURL=/",
13+
"-D"
14+
],
15+
"console": "integratedTerminal",
16+
"preLaunchTask": "Hugo: Check Environment",
17+
"serverReadyAction": {
18+
"pattern": "Web Server is available at //localhost:(\\d+)/",
19+
"uriFormat": "http://localhost:%s/",
20+
"action": "openExternally"
21+
}
22+
}
23+
]
24+
}

‎.vscode/tasks.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"version": "2.0.0",
3+
"tasks": [
4+
{
5+
"label": "Hugo: Check Environment",
6+
"type": "shell",
7+
"command": "which hugo || (echo 'Hugo not found. Please make sure Hugo is installed and in your PATH.' && exit 1)",
8+
"presentation": {
9+
"reveal": "silent",
10+
"panel": "dedicated"
11+
},
12+
"problemMatcher": []
13+
}
14+
]
15+
}

‎CODESPACES.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
# Using GitHub Codespaces for Website Preview
2+
3+
This guide will help you use GitHub Codespaces to preview changes to the InnerSource Commons website without needing to set up a local development environment.
4+
5+
## What is GitHub Codespaces?
6+
7+
GitHub Codespaces is a cloud-based development environment that allows you to work on projects directly from your browser. It's perfect for contributors who don't want to set up a local development environment.
8+
9+
## Getting Started with Codespaces
10+
11+
### Step 1: Navigate to the Repository
12+
13+
Go to the [InnerSource Commons website repository](https://github.com/InnerSourceCommons/innersourcecommons.org) on GitHub.
14+
15+
### Step 2: Create a New Codespace
16+
17+
1. Click the green "Code" button near the top right of the repository page
18+
2. Select the "Codespaces" tab
19+
3. Click "Create codespace on master"
20+
21+
![Create a Codespace](https://github.com/user-attachments/assets/e6bf365c-a119-4609-bbae-20efcb8cba18)
22+
23+
### Step 3: Wait for the Codespace to Load
24+
25+
The Codespace will take a minute or two to set up. You'll see a loading screen while it prepares the environment.
26+
27+
### Step 4: Run the Hugo Server
28+
29+
Once the Codespace is loaded:
30+
31+
1. Click the "Run and Debug" icon in the left sidebar (it looks like a play button with a bug)
32+
2. At the top of the Run and Debug panel, click on the dropdown and select "Hugo Server"
33+
3. Click the green play button to start the Hugo server
34+
35+
### Step 5: View the Website Preview
36+
37+
When the Hugo server starts:
38+
39+
1. A notification will appear in the bottom right corner saying "Your application running on port 1313 is available"
40+
2. Click "Open in Browser" to view the website in a new tab
41+
42+
### Step 6: Make and Preview Changes
43+
44+
1. Navigate to the `content` folder to find the files you want to edit
45+
2. Make your changes to the files
46+
3. Save your changes (Ctrl+S or Cmd+S)
47+
4. The website preview will automatically update with your changes
48+
49+
## Working with Branches and Pull Requests
50+
51+
### Creating a New Branch
52+
53+
1. Click the branch name in the bottom left corner of the Codespace
54+
2. Select "Create new branch..." from the dropdown menu
55+
3. Enter a name for your branch and press Enter
56+
57+
### Committing Your Changes
58+
59+
1. Click the "Source Control" icon in the left sidebar (it looks like a branch)
60+
2. Review your changes
61+
3. Enter a commit message in the text box
62+
4. Click the checkmark icon to commit your changes
63+
64+
### Creating a Pull Request
65+
66+
1. After committing your changes, click the "..." menu in the Source Control panel
67+
2. Select "Push" to push your changes to GitHub
68+
3. When prompted, click "Create Pull Request"
69+
4. Fill out the pull request form and click "Create"
70+
71+
## Troubleshooting
72+
73+
If you encounter any issues:
74+
75+
- **Hugo server not starting**: Try restarting the Codespace by clicking on the menu in the bottom left corner and selecting "Codespaces: Stop Current Codespace" and then restarting it.
76+
- **Changes not showing**: Make sure you've saved your files and that the Hugo server is running.
77+
- **Port not forwarding**: Click the "Ports" tab at the bottom of the Codespace and make sure port 1313 is forwarded.
78+
- **Container in recovery mode**: If you see a message about the container running in recovery mode, click the "Rebuild Container" button in the notification or run the "Codespaces: Rebuild Container" command from the command palette (F1).
79+
80+
## Getting Help
81+
82+
If you're stuck, you can:
83+
84+
1. Check the [Hugo documentation](https://gohugo.io/documentation/)
85+
2. Ask for help in the InnerSource Commons community channels
86+
3. Create an issue on the GitHub repository

‎README.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,25 @@ In case the widget adds cookies to the website please update the Privacy Policy
1818

1919
## Installation and local run
2020

21+
### Using GitHub Codespaces (Recommended for Non-Technical Contributors)
22+
23+
GitHub Codespaces provides an easy way to work on the website without installing anything on your local machine:
24+
25+
1. Navigate to the repository on GitHub
26+
2. Click the green "Code" button
27+
3. Select the "Codespaces" tab
28+
4. Click "Create codespace on master"
29+
5. Wait for the codespace to load (this may take a minute)
30+
6. Once loaded, click the "Run and Debug" icon in the sidebar (or press F5)
31+
7. Select "Hugo Server" from the dropdown menu and click the play button
32+
8. When prompted, click "Open in Browser" to view the website
33+
34+
The website will be displayed in a new browser tab, and any changes you make will automatically update in real-time.
35+
36+
For a more detailed guide with screenshots, please see our [Codespaces documentation](CODESPACES.md).
37+
38+
### Local Installation
39+
2140
If you want to test the page before commit you can run the site locally.
2241
you need to have `git` and [hugo][] installed. Please follow the official installation instructions.
2342

‎package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "innersourcecommons.org",
3+
"version": "1.0.0",
4+
"main": "",
5+
"author": "",
6+
"license": "ISC",
7+
"description": "",
8+
"scripts": {
9+
"build": "hugo",
10+
"build:preview": "hugo --baseURL \"${DEPLOY_PRIME_URL:-/}\" --buildDrafts --buildFuture",
11+
"start": "hugo server"
12+
},
13+
"devDependencies": {
14+
"autoprefixer": "^10.3.4",
15+
"hugo-extended": "^0.133.1",
16+
"postcss": "^8.4.38",
17+
"postcss-cli": "^8.3.1"
18+
}
19+
}

0 commit comments

Comments
 (0)