fix(seo): fix seo score

[AntonLantukh]

Description

Fix seo score

Steps completed:

According to our definition of done, I have completed the following steps:

• Acceptance criteria met
• Unit tests added
• Docs updated (including config and env variables)
• Translations added
• UX tested
• Browsers / platforms tested
• Rebased & ready to merge without conflicts
• Reviewed own code

[github-actions]

Visit the preview URL for this PR (updated for commit 466e8e3):

https://ottwebapp--pr331-fix-seo-score-e42qzimy.web.app

_{(expires Sat, 12 Aug 2023 13:40:08 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c198f8a3a199ba8747819f7f1e45cf602b777529}

[AntonLantukh]

Looks like firebase adds a no-index header for PR envs:

[dbudzins]

It's probably good to fix some things on the demo config dialog, but what we really want to test is the home page with all the shelves. Can you also try to get the lhci action working appropriately with that?

[AntonLantukh]

@dbudzins I have added Lighthouse workflow to the Preview workflow as a separate job with only one (SEO) required check.

I have also increased numberOfRuns to 3 to improve the accuracy. One more thing I spotted is that a server created 'on the go' within Lighthouse workflow is quite slow and doesn't reflect actual performance results.

I decided to use a separate job in the same workflow to simplify the way we can pass the link. I tried several approaches:

1. I used workflow_dispatch in the Lighthouse workflow and triggered it from the Preview workflow manually using gh cli. It worked, but the check didn't appear in the PR.

2. I used workflow_run, but according to the docs "This event will only trigger a workflow run if the workflow file is on the default branch."

https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#workflow_run

"Default" one is a develop branch and it adds some complexity to debug and develop such workflow as the version of the default branch is taken. And I am not sure that the PR check will be present in this case.

  workflow_run:
    workflows: [Firebase Preview]
    types:
      - completed

3. I used lewagon/[email protected] package to wait for Preview job in the Lighthouse workflow and continue when preview link is present. I uploaded an artifact in Preview job and wanted to get acces to in Lighthouse job. However it didn't work out of the box. By default, you can only upload / download an artifact within one workflow. There is a custom job to make it possible within different workflows but it already adds too much complexity.

    steps:
      - name: Wait for preview link to be created
        uses: lewagon/[email protected]
        with:
          ref: ${{ github.event.pull_request.head.sha }}
          check-name: build_and_preview
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          wait-interval: 10
          allowed-conclusions: success,skipped,cancelled
          verbose: true
      - name: Grab preview link
        uses: actions/download-artifact@v3
        with:
          name: preview_link
      - name: Set env
        run: echo "PREVIEW_LINK=$(cat preview_link.txt)" >> $GITHUB_ENV
      - uses: actions/checkout@v2
      - name: Install Lighthouse CI
        run: sudo yarn global add @lhci/[email protected]
      - name: Run Lighthouse CI
        run: lhci autorun --collect.url=${{ env.PREVIEW_LINK }}?app-config=gnnuzabk --config=./lighthouserc.js

[dbudzins]

@AntonLantukh OK, so basically to summarize you are running the lighthouse SEO check on the preview build, right? That's a really clever way to do this. Nice work figuring it out and implementing it!

[dbudzins]

Nice work and clever solution to the lighthouse runs.