search

hugo-toha / guides

Documentation Hugo theme Toha. https://github.com/hossainemruz/toha.
https://toha-guides.netlify.app/
MIT License
23 stars 57 forks source link

Automatic Site Validations #9

Open alex-bezek opened 4 years ago

alex-bezek commented 4 years ago

I'm assuming you use this repo for validating changes to the theme repo. I understand I'm opening a lot of PRs which can take a lot of time to validate and test. A tool i've found very useful for validating changes is percy.io which will automatically take screenshots of all of the pages and do a visual diff as a github check which highlights visual screenshot differences between branches. This creates views like this for each PR that you can then approve to check visual diffs across viewports and browsers image

If you wanted to set something similar up for this repo, I did so doing the following

For my site, this does generate 48 screenshots (each of my posts and home page across firefox and chrome across 2 viewports) which would give me ~100prs worth of screenshots per month. Since your site has many more posts, it would probably be good to restrict the number of pages it actually tests to be a more reasonable amount via https://docs.percy.io/docs/sdk-configuration#snapshot.

I also setup https://dependabot.com/submodules/ to automatically create PRs updating my submodule. This combined with percy + i use vercel to auto deploy all PR branches (which you use netlify but it does the same thing). These things combined make for some really nice automation around PR validation and consuming new theme changes (like this https://github.com/alex-bezek/blog/pull/47 ).

I just thought i would share to see if you were interested.

hossainemruz commented 4 years ago

Sound good to me. I will give a try.

hossainemruz commented 4 years ago

Todos:

alex-bezek commented 4 years ago

If you choose to do percy.io at some point, FYI i added the following configs to my own site

./.percy.yml

version: 1
snapshot:
  percy-css: |
    #ityped {
      display: none;
    }

Disables the ityped animations that would otherwise always show up as a diff

.github/workflows/percy.yml

          flags: --snapshot-files=index.html,404.html,posts/rails-environment-vs-deploy-environment/index.html
          config: ./.percy.yml

added configs so it just scans the main pages and 1 post. otherwise it scans every post and I could end up passing the free tier of 5k snapshots a month. Pr here https://github.com/alex-bezek/blog/pull/53/files

hossainemruz commented 4 years ago

Thank you @alex-bezek. I tried adding Percy. However, I wasn't able to open account in Browserstack. The login page seemed unresponsive. I will try again soon.

hossainemruz commented 4 years ago

Hi @alex-bezek I have completed percy.io integration. I have made some changes on how you passed the config and snapshot-files. Take a look here: https://github.com/hossainemruz/toha-example-site/pull/17

Let me know if there is any other tool we should add. :P

alex-bezek commented 4 years ago

Nice! I do like your lighthouse comment on that PR, my setup isn't as fleshed out. I did just finish writing a post on the tools I setup, the only other one I have right now is imgbot which will resize images automatically for you for performance https://alexbezek.io/posts/managed-by-robots/#image-bot-optimizer . Like it would probably flag and optimize this image https://github.com/hossainemruz/toha-example-site/blob/master/static/images/background.jpg since its huge and is impacting your lighthouse score image

Then again you aren't probably making new daily posts on this site, so we could optimize them manually once and be done, up to you. Regardless, I'm glad it worked out for you!