Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@sitdisch
sitdisch committed Apr 20, 2021
0 parents commit c2cb44c
Show file tree
Hide file tree
Showing 4 changed files with 233 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
:w
*~
*.swp
21 changes: 21 additions & 0 deletions LICENSE.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
The MIT License (MIT)

Copyright (c) 2021 Sitdisch

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
127 changes: 127 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
<h1 align="center">Lighthouse-Badger | GitHub Action</h1>
<p align="center"><img src="https://raw.githubusercontent.com/sitdisch/cloud/master/SVGs/badger.svg" width="300" /></p>
<p align="center"><a title="Check it out" target="_blank" href="https://github.com/GoogleChrome/lighthouse"><img src="https://raw.githubusercontent.com/GoogleChrome/lighthouse/master/assets/lighthouse-logo.svg" /></a></p>
<p align="center"><a title="Check it out" target="_blank" href="https://github.com/myactionway/lighthouse-badger-action/blob/master/LICENSE.txt"><img src="https://img.shields.io/github/license/myactionway/lighthouse-badger-action?label=License" /></a>
<img src="https://img.shields.io/github/repo-size/myactionway/lighthouse-badger-action?label=RepoSize" /></p>
<hr>

The [Lighthouse-Badger](https://github.com/myactionway/lighthouse-badger-action "Get it") GitHub action makes it easy to manually/automatically generate, add and update Lighthouse badges and reports from one/multiple input URL(s) to a selected target repository. If you've it [set up](#-setup "Go there"), you only need to add the result links to your use case once. Then the [Lighthouse-Badger](https://github.com/myactionway/lighthouse-badger-action "Get it") will automatically keep the badges up to date for you. So sit back and let the Badger do the job :wink:.

## | Credits

I, [Sitdisch](https://github.com/sitdisch "Visit me"), created the [Lighthouse-Badger](https://github.com/myactionway/lighthouse-badger-action "Get it") because I needed a GitHub action that would automatically update my Lighthouse badges on a regular basis and I haven't found a suitable solution. The badge creation is based on the [Lighthouse-Badges](https://github.com/emazzotta/lighthouse-badges "Go there") repository [License: [MIT](https://github.com/emazzotta/lighthouse-badges/blob/master/LICENSE.md "Go there"); Copyright (c) 2018 [Emanuele Mazzotta](https://github.com/emazzotta "Visit him")] and the pagespeed badge on the [Readme-Pagespeed-Insights](https://github.com/ankurparihar/readme-pagespeed-insights "Go there") repository [License: [Apache-2.0](https://github.com/ankurparihar/readme-pagespeed-insights/blob/master/LICENSE "Go there"); Copyright (c) 2021 [Ankur Parihar](https://github.com/ankurparihar "Visit him")]. Check out both. They are magnificent and maybe better suited for your use case than the [Lighthouse-Badger](https://github.com/myactionway/lighthouse-badger-action "Get it").

<div>The badger icon is made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>.</div>

## | Previews

### Pagespeed Badge

<img src="https://raw.githubusercontent.com/sitdisch/lighthouse-badges/master/assets/img/scores/pagespeed.svg">

### Plastic Badges

<img src="https://raw.githubusercontent.com/sitdisch/lighthouse-badges/master/assets/img/scores/lighthouse_performance.svg"> <img src="https://raw.githubusercontent.com/sitdisch/lighthouse-badges/master/assets/img/scores/lighthouse_accessibility.svg"> <img src="https://raw.githubusercontent.com/sitdisch/lighthouse-badges/master/assets/img/scores/lighthouse_best-practices.svg"> <img src="https://raw.githubusercontent.com/sitdisch/lighthouse-badges/master/assets/img/scores/lighthouse_seo.svg"> <img src="https://raw.githubusercontent.com/sitdisch/lighthouse-badges/master/assets/img/scores/lighthouse_pwa.svg">

### Single Plastic Badge

<img src="https://raw.githubusercontent.com/sitdisch/lighthouse-badges/master/assets/img/scores/lighthouse.svg">

### Reports

The awesome [htmlpreview.github.com](https://github.com/htmlpreview/htmlpreview.github.com) repository makes it easy to show up your Lighthouse reports instantly rendered. Just put this `https://htmlpreview.github.io/?` before the URL where you placed your Lighthouse report e.&nbsp;g. `https://htmlpreview.github.io/?https://github.com/sitdisch/cloud/blob/master/lighthouse-results/dark-particle/desktop/mythemeway_github_io_dark_particle_.html`<br>

Examples: <a href="https://htmlpreview.github.io/?https://raw.githubusercontent.com/sitdisch/cloud/master/lighthouse-results/dark-particle/desktop/mythemeway_github_io_dark_particle_.html" title="Check it out" target="_blank">Main Page </a> | <a href="https://htmlpreview.github.io/?https://raw.githubusercontent.com/sitdisch/cloud/master/lighthouse-results/dark-particle/desktop/mythemeway_github_io_dark_particle_projects_2020_10_31_project_1_html.html" title="Check it out" target="_blank">Project Page</a>

<img src="https://raw.githubusercontent.com/sitdisch/cloud/master/images/lighthousebadger_report.png" />

## | Setup

OK, let's do it.

1. add the [`lighthouse-badger.yml`](https://github.com/MyActionWay/lighthouse-badger-workflow/blob/master/.github/workflows/lighthouse-badger.yml "Get it") workflow file to a repository
* the path has to be `.github/workflows/lighthouse-badger.yml`
* it doesn't have to be the repository where you want to add the Lighthouse results; e.&nbsp;g., you can simply [fork](https://github.com/myactionway/lighthouse-badger-workflow/fork "fork it") the `myactionway/lighthouse-badger-workflow` repository
* CONSIDER: with a forked repository, you need to confirm that you want to use a workflow before you can actually use it (repo menu > actions tab > push the button)
2. create a new encrypted repository secret [[procedure]](https://docs.github.com/en/actions/reference/encrypted-secrets#creating-encrypted-secrets-for-a-repository "Learn how")
* add the secret to the same repository where you added the workflow file
* give the secret a name e.&nbsp;g. `LIGHTHOUSE_BADGER_TOKEN`
* the value of the secret must be the value of the personal access token for the repository where you want to add the Lighthouse results.
* [procedure for creating a personal access token](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token "Learn how")
* select only the minimum scopes and permissions required e.&nbsp;g. repo
3. adapt your `lighthouse-badger.yml` file
* for manual triggers
* all you have to do is enter your secret name e.&nbsp;g. `LIGHTHOUSE_BADGER_TOKEN`
```yml
env:
# Token for all triggers
TOKEN: ${{ secrets.LIGHTHOUSE_BADGER_TOKEN }}
```
* CONSIDER: never enter the actual value of the personal access token
* [procedure for manually running a workflow on GitHub](https://docs.github.com/en/actions/managing-workflow-runs/manually-running-a-workflow#running-a-workflow-on-github "Learn how")
<img src="https://raw.githubusercontent.com/sitdisch/cloud/master/images/lighthousebadger_manual_inputs.png" />
* CONSIDER: currently, you can't change the token in the UI
* [procedure for manually running a workflow using the REST API](https://docs.github.com/en/actions/managing-workflow-runs/manually-running-a-workflow#running-a-workflow-using-the-rest-api)
* for all other triggers
* adapt this section
```yml
##############################################################
# DEFINE YOUR TOKEN, INPUTS AND TRIGGERS IN THE FOLLOWING
##############################################################

# TOKEN and INPUTS as environmental variables
env:
# Token for all triggers
TOKEN: # e.g. ${{ secrets.LIGHTHOUSE_BADGER_TOKEN }}
#
# Inputs for not manually triggered workflows
URLS: # URL(s) to be checked e.g. 'https://github.com/sitdisch https://github.com/mythemeway'
REPOSITORY: # target repository e.g. 'dummy/mytargetrepo'
BRANCH: # target branch e.g. 'master'
BADGES-ARGS: # badge-style '-b {flat,...}', preceding-label '-l "Lighthouse "', output-path '-o lighthouse_results/dummy', save-report '-r', single-badge '-s'
RESULTS-TYPE: # 'mobile', 'desktop' or 'both'
MOBILE-LIGHTHOUSE-PARAMS: # Lighthouse parameters mobile audit
DESKTOP-LIGHTHOUSE-PARAMS: # Lighthouse parameters desktop audit
USER-NAME: # user who should commit e.g. 'dummy'
USER-EMAIL: # e.g. 'dummy@gmail.com'
COMMIT-MESSAGE: # e.g. 'Lighthouse results added'

# TRIGGERS
on:
# page_build:
# schedule:
# - cron: '55 23 * * 0'
```
* CONSIDER:
* token: never enter the actual value of the personal access token
* inputs:
* you only have to insert `URLS;` if any other input is blank, one of these default values will be used instead
```yml
DEFAULT-REPOSITORY: ${{ github.repository }} # repo with this file
DEFAULT-BRANCH: 'master'
DEFAULT-BADGES-ARGS: '-b pagespeed -o lighthouse_results -r'
DEFAULT-RESULTS-TYPE: 'both'
DEFAULT-MOBILE-LIGHTHOUSE-PARAMS: '--throttling.cpuSlowdownMultiplier=2'
DEFAULT-DESKTOP-LIGHTHOUSE-PARAMS: '--preset=desktop --throttling.cpuSlowdownMultiplier=1'
DEFAULT-USER-NAME: 'github-actions[bot]'
DEFAULT-USER-EMAIL: '41898282+github-actions[bot]@users.noreply.github.com'
DEFAULT-COMMIT-MESSAGE: 'Lighthouse-Badger[bot]: Results Added'
```
* badges-args:
* more information about the optional arguments can be found [here](https://github.com/sitdisch/lighthouse-badges#help "Go there")
* in contrast to the Lighthouse-Badges repository
* do not enter any URL(s) here
* mobile or/and desktop is/are always added to your output-path
* triggers:
* page_build: Lighthouse results are generated every time after the GitHub page is built
* schedule:
* e.&nbsp;g. `cron: '55 23 * * 0'` executes the [Lighthouse-Badger](https://github.com/myactionway/lighthouse-badger-action "Get it") every Sunday at 23:55
* you can check your inputs [here](https://crontab.guru/ "Go there")

That's it. Happy audits.

## | Known issues & possible solutions
* No scores are displayed in the pagespeed.svg file.
* They are there, if not, NA is inserted. Try opening the SVG with a browser and the scores will pop up, I promise.
* The repository size is growing continuously due to the automatic updating of the badges.
* The [Branch-Pruner](https://github.com/myactionway/branch-pruner-action "Get it") can help. E.&nbsp;g. put your Lighthouse results on a separate branch and automatically prune that branch with the Pruner, as you like.
82 changes: 82 additions & 0 deletions action.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
# Lighthouse-Badger | GitHub Action
#
# Description: Generates, adds & updates manually/automatically Lighthouse badges & reports from one/multiple input URL(s) to a selected target repository
# Author: Sitdisch
# Source: https://github.com/myactionway/lighthouse-badger-action
# License: MIT
# Copyright (c) 2021 Sitdisch

name: 'Lighthouse-Badger'
author: 'Sitdisch'
description: "Generates, adds & updates manually/automatically Lighthouse badges & reports from 1,2... input URL(s) to a target repository"
branding:
icon: bold
color: purple

inputs:
urls:
description: 'URL(s) to be checked'
required: true
badges-args:
description: 'Badges arguments: -b, -l, -o, -r, -s'
required: true
results-type:
description: 'Results type: mobile, desktop or both'
required: true
mobile-lighthouse-params:
description: 'Lighthouse parameters mobile audit'
required: true
desktop-lighthouse-params:
description: 'Lighthouse parameters desktop audit'
required: true
user-name:
description: 'User who should commit'
required: true
user-email:
description: 'User e-mail address'
required: true
commit-message:
description: 'Commit message'
required: true

runs:
using: "composite"
steps:
- name: Preparatory Tasks
run: |
echo 'export RESULTS_PATH=`expr "${{ inputs.badges-args }}" : ".* --\?ou\?t\?p\?u\?t\?-\?p\?a\?t\?h\? \([^ ]*\).*"`' >> ~/lighthouse_badger_env.txt
echo 'export BADGES_ARGS=$(sed -e "s/ \(\(--output-path\)\|\(-o\)\) \S*//g" <<< "${{ inputs.badges-args }}" )' >> ~/lighthouse_badger_env.txt
source ~/lighthouse_badger_env.txt
mkdir -p $RESULTS_PATH
shell: bash
- name: Create Mobile Results
run: |
if [ ${{ inputs.results-type }} = "both" ] || [ ${{ inputs.results-type }} = "mobile" ]; then
source ~/lighthouse_badger_env.txt
cd temp_lighthouse_badges_nested
export LIGHTHOUSE_BADGES_PARAMS="${{ inputs.mobile-lighthouse-params }}"
./src/index.js -u ${{ inputs.urls }} $BADGES_ARGS -o mobile
cp -r mobile ../$RESULTS_PATH
cd ..
fi
shell: bash
- name: Create Desktop Results
run: |
if [ ${{ inputs.results-type }} = "both" ] || [ ${{ inputs.results-type }} = "desktop" ]; then
source ~/lighthouse_badger_env.txt
cd temp_lighthouse_badges_nested
export LIGHTHOUSE_BADGES_PARAMS="${{ inputs.desktop-lighthouse-params }}"
./src/index.js -u ${{ inputs.urls }} $BADGES_ARGS -o desktop
cp -r desktop ../$RESULTS_PATH
cd ..
fi
shell: bash
- name: Commit Results
run: |
source ~/lighthouse_badger_env.txt
git config --local user.email ${{ inputs.user-email }}
git config --local user.name ${{ inputs.user-name }}
git add $RESULTS_PATH
git commit -am "${{ inputs.commit-message }}"
git push
shell: bash

0 comments on commit c2cb44c

Please sign in to comment.