DEV Community

Cover image for Update wallpaper previews on each push
Venkata Naga Sai Nivas Mangu
Venkata Naga Sai Nivas Mangu

Posted on

Update wallpaper previews on each push

I maintain a wallpaper collection repository nordic-wallpapers and I have a wallpaper-preview.md in that repo to preview all the available wallpapers. I used to have a script that needed to be run before each commit to update the wallpapers. I shifted that to GitHub Actions because I thought all wallpaper enthusiasts might not be able to run the scripts.

My Workflow

These are the steps involved in my workflow (not including cloning the repository into the system:

  • Get a list of all the available wallpapers
    • This uses the ls command and redirects the output of that command into the wallpaper-preview.md file wiping the file clean in the process to avoid duplicate previews.
  • Add the markdown syntax for previewing images around the file name
    • This step is executed as a multi-line script in the workflow.
    • The first step adds the ![]( in-front of each line using the sed tool.
    • The second step adds the ) at the end of each line using the sed tool.
  • Add a heading and an empty line between the heading and the wallpapers
    • This adds the page heading # Wallpapers in this repository using the sed tool.
    • To add a new line, I used the sed tool to search for "# Wallpapers" and add an empty line in the immediately next line.
  • Commit and push changes to the repository
    • I used EndBug/add-and-commit to commit the changes to the repository and ad-m/github-push-action to push the changes.

GitHub logo EndBug / add-and-commit

Add & commit files from a path directly from GitHub Actions

Add & Commit

Public workflows that use this action. All Contributors

You can use this GitHub Action to commit changes made in your workflow run directly to your repo: for example, you use it to lint your code, update documentation, commit updated builds, etc....

This is heavily inspired by git-auto-commit-action (by Stefan Zweifel): that action automatically detects changed files and commits them. While this is useful for most situations, this doesn't commit untracked files and can sometimes commit unintended changes (such as package-lock.json or similar, that may have happened during previous steps).
This action lets you choose the path that you want to use when adding & committing changes so that it works as you would normally do using git on your machine.

Inputs

Add a step like this to your workflow:

- uses: EndBug/add-and-commit@v7 # You can change this to use a specific version.
  with
    # The arguments for the `git add` command (see
Enter fullscreen mode Exit fullscreen mode

GitHub logo ad-m / github-push-action

GitHub actions to push back to repository eg. updated code

GitHub Action for GitHub Push

The GitHub Actions for pushing to GitHub repository local changes authorizing using GitHub token.

With ease:

  • update new code placed in the repository, e.g. by running a linter on it,
  • track changes in script results using Git as archive,
  • publish page using GitHub-Pages,
  • mirror changes to a separate repository.

Usage

Example Workflow file

An example workflow to authenticate with GitHub Platform:

jobs
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
      with:
        persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal access token.
        fetch-depth: 0 # otherwise, there would be errors pushing refs to the destination repository.
    - name: Create local changes
      run: |
        ...
    - name: Commit files
      run: |
        git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
        git config --local user.name "github-actions[bot]"
        git commit -m "Add changes" -a
    - name: 
Enter fullscreen mode Exit fullscreen mode

Submission Category:

Wacky Wildcards

Yaml File

Additional Resources / Info

Link to the repository:

GitHub logo linuxdotexe / nordic-wallpapers

A collection of wallpapers that go well with the rices inspired by the Nord Colorscheme

Website:

I made a website using gatsby to preview all the wallpapers more easily. Here is a link for the website.

The website is also open source. I am new to web development and can use all the help I can get from the community. PRs are very welcome.

GitHub logo linuxdotexe / nordic-wallpapers-website

A Gatsby website that uses the GitHub API to easily preview all the wallpapers in my nordic-wallpapers repository,

This is my first time sharing a post here. Very glad to be on dev.to :)

Top comments (0)