diff --git a/.github/workflows/hugo.yml b/.github/workflows/hugo.yml index 1fee48c..e1e03e7 100644 --- a/.github/workflows/hugo.yml +++ b/.github/workflows/hugo.yml @@ -48,6 +48,7 @@ jobs: uses: actions/configure-pages@v4 - name: Install Node.js dependencies run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true" + - run: npm run build --if-present - name: Build with Hugo working-directory: ./src env: diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 65efa8b..cdc7010 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -37,6 +37,7 @@ jobs: submodules: recursive - name: Install Node.js dependencies run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true" + - run: npm run build --if-present - name: Build with Hugo working-directory: ./src env: @@ -56,110 +57,41 @@ jobs: run: hugo server & # Wait till the server warms up - run: sleep 15 - - run: mkdir -p ${{ github.workspace }}/tmp/desktop - - run: mkdir -p ${{ github.workspace }}/tmp/mobile - - name: Lighthouse Desktop - uses: foo-software/lighthouse-check-action@v12.0.1 - id: lighthouseDesktop - with: - device: 'desktop' - locale: 'en' - tag: "desktop" - prCommentEnabled: false - prCommentSaveOld: true - gitAuthor: ${{ github.actor }} - gitBranch: ${{ github.ref }} - gitHubAccessToken: ${{ secrets.GITHUB_TOKEN }} - outputDirectory: ${{ github.workspace }}/tmp/desktop - # see https://github.com/GoogleChrome/lighthouse/blob/master/docs/configuration.md - # and https://github.com/GoogleChrome/lighthouse/blob/main/core/config/default-config.js - overridesJsonFile: ./lighthouse-overrides.json - sha: ${{ github.sha }} - urls: 'http://localhost:1313/' - - name: Lighthouse Mobile - uses: foo-software/lighthouse-check-action@v12.0.1 - id: lighthouseMobile - with: - device: 'mobile' - locale: 'en' - tag: "mobile" - prCommentEnabled: false - prCommentSaveOld: true - gitAuthor: ${{ github.actor }} - gitBranch: ${{ github.ref }} - gitHubAccessToken: ${{ secrets.GITHUB_TOKEN }} - outputDirectory: ${{ github.workspace }}/tmp/mobile - # see https://github.com/GoogleChrome/lighthouse/blob/master/docs/configuration.md - # and https://github.com/GoogleChrome/lighthouse/blob/main/core/config/default-config.js - overridesJsonFile: ./lighthouse-overrides.json - sha: ${{ github.sha }} - urls: 'http://localhost:1313/' - - name: Upload mobile report - id: lighthouseMobileReport - uses: actions/upload-artifact@master - with: - name: Lighthouse-mobile-report - path: ${{ github.workspace }}/tmp/mobile - - name: Upload desktop report - id: lighthouseDesktopReport + - name: Run Lighthouse Desktop + run: npm run lighthouse-desktop + - name: Run Lighthouse Mobile + run: npm run lighthouse-mobile + - name: Make Lighthouse Mobile Report Screenshot + run: npm run screenshot:mobile + - name: Make Lighthouse Desktop Report Screenshot + run: npm run screenshot:desktop + - name: Upload Lighthouse Report + id: lighthouseUploadReport uses: actions/upload-artifact@master with: - name: Lighthouse-desktop-report - path: ${{ github.workspace }}/tmp/desktop - - name: Parse Mobile Scores - id: mobileScores - uses: actions/github-script@v7 + name: Lighthouse-report + path: | + desktop.report.html + desktop.report.json + mobile.report.html + mobile.report.json + - name: Upload files to Imgbb + id: upload-files-imgbb + uses: McCzarny/upload-image@v1.2.5 with: - script: | - try { - const fs = require('fs') - const jsonString = fs.readFileSync("${{ github.workspace }}/tmp/mobile/results.json") - var score = JSON.parse(jsonString) - console.log(score[0].scores) - } catch(err) { - core.error("Error while reading or parsing the JSON") - core.setFailed(err) - } - - name: Parse Desktop Scores - id: desktopScores - uses: actions/github-script@v7 - with: - script: | - try { - const fs = require('fs') - const jsonString = fs.readFileSync("${{ github.workspace }}/tmp/desktop/results.json") - var score = JSON.parse(jsonString) - core.setOutput('scores', score[0].scores) - } catch(err) { - core.error("Error while reading or parsing the JSON") - core.setFailed(err) - } - - name: Publish the reports + path: | + mobile.jpg + desktop.jpg + uploadMethod: imgbb + apiKey: '${{ secrets.IMGBB_API_KEY }}' + - name: Publish info uses: peter-evans/create-or-update-comment@v4 with: issue-number: ${{ github.event.pull_request.number }} body: | - ### Lighthouse Reports - | Mode | Accessibility | Best Practicies | Performance | SEO | Report | - |----|----|----|----|----|----| - | Mobile | ${{ steps.mobileScores.outputs.scores.accessibility }} | ${{ steps.mobileScores.outputs.scores.bestPractices }} | ${{ steps.mobileScores.outputs.scores.performance }} | ${{ steps.mobileScores.outputs.scores.seo }} | [Mobile.zip](${{ steps.lighthouseMobileReport.outputs.artifact-url }}) | - | Desktop | ${{ steps.desktopScores.outputs.scores.accessibility }} | ${{ steps.desktopScores.outputs.scores.bestPractices }} | ${{ steps.desktopScores.outputs.scores.performance }} | ${{ steps.desktopScores.outputs.scores.seo }} | [Desktop.zip](${{ steps.lighthouseDesktopReport.outputs.artifact-url }}) | - - - name: Verify Lighthouse Desktop Results - uses: foo-software/lighthouse-check-status-action@v3.0.1 - with: - lighthouseCheckResults: ${{ steps.lighthouseDesktop.outputs.lighthouseCheckResults }} - minAccessibilityScore: "80" - minBestPracticesScore: "80" - minPerformanceScore: "40" - minProgressiveWebAppScore: "0" - minSeoScore: "70" - - name: Verify Lighthouse Mobile Results - uses: foo-software/lighthouse-check-status-action@v3.0.1 - with: - lighthouseCheckResults: ${{ steps.lighthouseMobile.outputs.lighthouseCheckResults }} - minAccessibilityScore: "80" - minBestPracticesScore: "80" - minPerformanceScore: "40" - minProgressiveWebAppScore: "0" - minSeoScore: "70" + ### Lighthouse Report + | Mobile | Desktop | + |----|----| + | ![Lighthouse Mobile Report Score](${{steps.upload-files-imgbb.outputs.url[0]}}) | ![Lighthouse Desktop Report Score](${{steps.upload-files-imgbb.outputs.url[1]}}) | + + [Download report ZIP](${{ steps.lighthouseUploadReport.outputs.artifact-url }}) diff --git a/.gitignore b/.gitignore index e0dd47a..763acc0 100644 --- a/.gitignore +++ b/.gitignore @@ -25,6 +25,8 @@ coverage # Lighthouse reports *.report.json *.report.html +desktop.jpg +mobile.jpg # Hugo stats hugo_stats.json diff --git a/package.json b/package.json index f561871..63780f6 100644 --- a/package.json +++ b/package.json @@ -22,16 +22,18 @@ "jshint": "jshint .", "json": "jsonlint -q ./*.json", "package": "npx npm-package-json-lint .", - "compile": "npx cpy ./node_modules/uikit/dist/css/uikit.min.css ./src/assets --flat && npx cpy ./node_modules/uikit/dist/js/uikit.min.js ./src/assets --flat && cd ./src && hugo --minify --environment production", + "build": "npx cpy ./node_modules/uikit/dist/css/uikit.min.css ./src/assets --flat && npx cpy ./node_modules/uikit/dist/js/uikit.min.js ./src/assets --flat && cd ./src && hugo --minify --environment production", "start-server": "cd ./src && hugo server --environment production", - "lighthouse-desktop": "npx lighthouse http://localhost:1313/ --no-enable-error-reporting --output=html --output=json --config-path=./lr-desktop-config.js", - "lighthouse-mobile": "npx lighthouse http://localhost:1313/ --no-enable-error-reporting --output=html --output=json --config-path=./lr-mobile-config.js", + "lighthouse-desktop": "npx lighthouse http://localhost:1313/ --no-enable-error-reporting --output-path=./desktop --output=html --output=json --config-path=./lr-desktop-config.js", + "lighthouse-mobile": "npx lighthouse http://localhost:1313/ --no-enable-error-reporting --output-path=./mobile --output=html --output=json --config-path=./lr-mobile-config.js", "markdownlint": "markdownlint --config .markdownlint.json \"src/**/*.md\" \"*.md\"", "markdown": "remark . --frail", "markdown:fix": "remark . --frail --output", "jest": "jest", "coverage": "jest --coverage", "screenshot": "pageres ./src/public/index.html 320x568 568x320 360x780 780x360 375x812 812x375 390x844 844x390 430x932 932x430 768x1024 1024x768 810x1080 1080x810 834x1112 1112x834 1024x1366 1366x1024 1440x900 2304x1440 1280x800 1366x768 2560x1440 1920x1080 3200x1800 2048x1152 --overwrite --format=jpg --crop --filename=\"<%= size %>\"", + "screenshot:mobile": "pageres ./mobile.report.html 800x1000 --overwrite --format=jpg --crop --filename=\"mobile\"", + "screenshot:desktop": "pageres ./desktop.report.html 800x1000 --overwrite --format=jpg --crop --filename=\"desktop\"", "stylelint": "stylelint -f verbose \"src/**/*.css\"", "stylelint:fix": "stylelint \"src/**/*.css\" --fix", "test": "npm run lint && npm run stylelint && npm run markdown && npm run markdownlint && npm run package && npm run json && npm run jest"