actions-gh-pages VS open-sauced

Check out the GitHub action you can use for deploying to GitHub pages: https://github.com/peaceiris/actions-gh-pages.

In addition to just sharing the .html generated files which would likely be cumbersome, you can host the docs on github pages and use something like https://github.com/peaceiris/actions-gh-pages + github actions to upload the documentation from your private repository to a public repo (required for non paid users).

I started by using runs-on: ubuntu-22.04 in this workflow to check if everything works ok. It run without any issues. After that I created PRs to add support for ubuntu-22.04 and ubuntu-latest version to GitHub Actions for Hugo and GitHub Pages Action

As a first-step measure, we changed the CI script to overwrite the gh-pages branch at every run, rather than just appending a new commit. We use this gh-pages action, so it was just a matter of adding a force_orphan: true parameter.

Interesting to note that GitHub stores this workflow in the "main" branch under .github/workflows folder. For more details on this Action please refer the documentation and code at https://github.com/peaceiris/actions-gh-pages.

My first workflow is to build and deploy or preview Client, It runs whenever a push or pull request creates for main branch containing changes to the code of client. It install dependencies and builds vue.js app. After build I use peaceiris/actions-gh-pages to deploy it to Github Pages. If the event is Pull Request then deploy to a sub-directory named preview and commit hash and leave a comment on PR.

If the data fetch from previous step succeeds, the workflow continues by building the static website with Hugo. Hugo is setup using action peaceiris/actions-hugo. When the files are ready, the result is published to GitHub pages, using another GitHub action, peaceiris/actions-gh-pages.

peaceiris/actions-gh-pages@v3 - deploys any folder(s) to gh-pages, can use it for multiple static endpoints

For more information about the actions used and their options, please see Hugo and Github pages on Github.

This quote is quite true. Without automation, we would spend a lot of out time on things that would have to be done repetitively, for example, manually building and deploying your GitHub pages every time there is a change. Luckily, you can easily use GitHub Actions to build and deploy your pages by just pushing your repository to GitHub! You don't even need to do anything except to add a configuration file to your repository. In this post, I will be creating a workflow and using peaceiris/actions-gh-pages@v3 from GitHub Marketplace (it's free).

OpenSauced cultivates a thriving community of developers through its interactive forum. This virtual space provides a platform for developers to exchange ideas, seek guidance, and collaborate on projects, fostering a sense of camaraderie and shared passion for open source. All wrapped up in a nice GitHub stromboli.

In Part 3 of this series, we'll talk about our use of various plugins for Vite on the Open Sauced project. Vite provides extensibility in the form of a Plugin API, based on that of Rollup. For reference on which Rollup plugins Vite is compatible with (and to what degree), see Vite Rollup Plugins

The most straightforward fix for the circular reference was to update react-markdown through one major revision, but this introduced a new snag. In this major revision, react-markdown changed to ESM only, which would be fine for Vite, but not for our testing approach for jest (other than experimentally, so I learned. @0vortex and I got some help from @jasonericdavis on Discord to mock the react-markdown component in Jest (bypassing the need for ESM support) as part of a preparatory PR, and we got back on track.

This is Part 1 of a series about how recently in Open Sauced, we converted the project from using Webpack v4 to using Vite! A lot of what we'll cover in this series deals with PR #1322. @bdougieyo started this as a create-react-app project 5+ years ago and so this conversion certainly turned out to be an undertaking!

In contributing to Open Sauced and other OSS projects as well, I've found time and time again that there are such ample opportunities to learn. However, contributing a feature and sticking with it on a longer term can cause those opportunities to multiply! In Part 3 of this series, I'm going to talk about some of the after-effects of implementing dark mode on Open Sauced in PR #1020.

This is Part 2 of the series on Implementing Dark Mode. This was done in open-sauced/open-sauced#1020, and handily demonstrated to me the wealth of learning opportunities in contributing to Open Source. I for one have learned a ton! On this one, I got the opportunity for learning in several areas. I was still pretty new to React (and I still am), so I had not yet used the Context API. For a lot of the same reasons, I hadn't used the styled-components library before.

This tool is meant to accelerate development on Open Sauced by giving contributors a way to access Docusaurus 2 powered developer documentation available at docs.opensauced.pizza.

Expanding the @open-sauced ecosystem, it became tedious to apply all the necessary tooling available in open-sauced/open-sauced to newly created repositories and synchronising existing ones with minor updates.

I'd like to share the story behind one of my favorite contributions to Open Sauced so far, which is the addition of "Dark Mode", PR #1020. This PR touched 25 files and was pretty substantial in scope, so I'm going to break this up into 3 parts. Part 1 is here is just the background - the what and the why, as @bdougieyo sometimes says. If there's one takeaway though, it's the value of opening a PR early in your process - you can share your progress and your roadblocks, and maintainers can help you get unblocked!