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.

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

Conversation

saminarp
Copy link
Collaborator

@saminarp saminarp commented Dec 8, 2022

Fixes #5

This GitHub Action workflow takes the images uploaded from optimized directory and generates a website using GitHub pages. See the example of generated website from this link

Preview of the website

CleanShot 2022-12-08 at 00 56 20@2x

Note: The branch is currently named as issue#5-gen-web. Every test image that is currently in the optimized folder is in this branch. It copies over to gh-pages branch to generate the website.

Once this gets approved, we need to replace the branch name (issue#5-gen-web) in publish.yml to main

To test

You can change your branch to issue#5-gen-web and upload your desired pictures to optimized directory. After a successful commit and a push, this branch will result in a gh-pages website.

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.

@SerpentBytes SerpentBytes requested review from humphd and CDPhu December 8, 2022 14:10
@SerpentBytes SerpentBytes added the ✨ enhancement New feature or request label Dec 8, 2022
-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.

Copy link
Collaborator

@SerpentBytes SerpentBytes left a comment

Choose a reason for hiding this comment

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

Thank you for creating this PR 👍🏼
The overall demo is looking good. I have requested some minor changes.

@saminarp
Copy link
Collaborator Author

Thank you for creating this PR 👍🏼
The overall demo is looking good. I have requested some minor changes.

Thank you @SerpentBytes for reviewing this PR!

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.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

GitHub Action to Generate Website and Commit to Repo
3 participants