Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GitHub Action to Generate Website and Commit to Repository #34

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

GitHub Action to Generate Website and Commit to Repository #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a4112ac
add gh-action
Dec 8, 2022
282e111
push on branch
Dec 8, 2022
886aafc
add some test images to optimized directory
Dec 8, 2022
d0245e5
fix workflow
Dec 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions .github/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>My Photohub</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { margin: 0; background: #333; }
header {
padding: .5vw;
font-size: 0;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: column;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: flex;
}
header div {
-webkit-box-flex: auto;
-ms-flex: auto;
flex: auto;
width: 200px;
margin: .5vw;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible to move the styles to an external CSS file?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The final UI is going to come from #8 which is why I thought it is not necessary to move the CSS to another final.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@saminarp fair enough.

}
header div img {
width: 100%;
height: auto;
}
@media screen and (max-width: 400px) {
header div { margin: 0; }
header { padding: 0; }
}
</style>
<body>
<header id="gallery">
</header>
<script>
const addImg = (url) => {
if (!url) return
const gallery = document.querySelector('#gallery')
const img = document.createElement("img")
img.src = `./optimized/${url}`
const division = document.createElement("div")
division.appendChild(img)
gallery.appendChild(division)
}

fetch("./filelist.txt")
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This technique is fine as a first pass, but we don't need to dynamically load the file list and build the DOM, since we already have a build step (i.e., GitHub Actions) and can generate the static HTML with all images before we commit the file to git. This will give a much better experience to the user, since the initial load will be faster, and the images can be properly positioned and sized (i.e., our build step can also figure this out, and add intrinsic sizes).

If you want to leave this optimization for later, that's fine. File a follow-up issue.

.then( response => response.text() )
.then( text => {
const files = text.split(/\r?\n/i)
files.forEach(addImg)
})
.catch(console.error)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible to add more context toconsole.error, i.e. make the log message more meaningful?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am looking into this.

</script>
</body>
</html>
29 changes: 29 additions & 0 deletions .github/workflows/publish.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
name: Copy folder to other branch

on:
push:
branches:
- issue#5-gen-web

jobs:
copy:
name: Copy my folder
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: copy
env:
SRC_FOLDER_PATH: 'optimized'
TARGET_BRANCH: 'gh-pages'
run: |
files=$(find $SRC_FOLDER_PATH -type f) # get the file list
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be moved to a shell script in the repo, and run as a single command from there.

git config --global user.name 'GitHub Action'
git config --global user.email '[email protected]'
git pull # fetch branches
git checkout $TARGET_BRANCH # checkout to your branch
git checkout ${GITHUB_REF##*/} -- $files # copy files from the source branch
ls -1 $SRC_FOLDER_PATH > filelist.txt # put filelist to root
test -e index.html || git show issue#5-gen-web:.github/index.html > index.html # copy index file
git add -A # Add all files
git diff-index --quiet HEAD || git commit -am "Optimized Files Updated" # commit to the repository (ignore if no mod)
git push origin $TARGET_BRANCH # push to remote branch
Binary file added optimized/jpegTest.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added optimized/jpegTest2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added optimized/pngTest.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added optimized/pngTest2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.