Nested sidebar nav for certification and Front-End Sites section (#9047)

* mdx and import ordering

* Update index.js

* whitespace fixes

* BackstopJS init for local VRT (#8989)

* removing potentially unneeded component

* Revert "removing potentially unneeded component"

This reverts commit d95bca8.

* removing releaseHeadlines from MdxWrapper

* adding more pages to backstop

* adding npx to instructions

* mdx customshortcodes

* Revert "BackstopJS init for local VRT (#8989)"

This reverts commit 5b9f380.

* starting on a new sidebar

* getting sidebar somewhat functional

* more sidebar nav playing

* Certification multilevel nav

* Getting certification working with multilevel menu

* more sidebar experimenting

* sidebar nav graphql-ing

* adding guides to omni nav

* adding subtitles

* adding stuff

* more nav

* link nesting

* more link mucking

* still working

* still working

* removing commented out code

* cleanup

* starting on omni component

* trying function in separate file

* functioning again

* submenus

* wrangling the guides

* getting decoupled guides

* more decouple guiding

* more simplification

* splitting up

* segmenting out guide function

* delete unused files

* guide!

* whitespace

* more re-arranging

* no errors

* remove unused stuff

* no errors with query coming from outside index.js

* more tweaks

* adding OmniSidebarNavWithFallback.js

* fallback is working in guide

* whitespace

* using fallback

* more cleanup

* getting rid of separate OmniSidebarNavWithFallback

* more cleanup

* link fix

* screenshot testing nav

* update prettier

* running prettier

* switching prettier standard based on internal discussion

* adding eslint

* adding eslint

* Revert "adding eslint"

This reverts commit f84fc28.

* Revert "adding eslint"

This reverts commit 7705f80.

* Revert "running prettier"

This reverts commit e4f05fb.

* small prettier formatting

* formatting

* manual spacing

* more manual

* manual formatting

* prettier with manual fix

* prettier fixes

* simplify regex

* prettier comment

* Revert "prettier comment"

This reverts commit 7f95a83.

* going back to work regex

* I do not even need the regex

* adding vitest

* adding unit tests samples

* moving helper functions to their own file

* more testing

* query in its own file

* more unit testing

* one more unit test

* fix

* removing helper functions that were too small

* more moving helper functions

* moving deck chairs

* removing a too small function. And removing sample unit test

* deleting separate sidebarNav component

* moving test fixture

* simplyfing a function

* simplify data structures

* running prettier

* checking for search js before adding it

* cleanup

* adding some doc blocks and minor refactor

* docs and cleanup

* more comments

* more cleanup

* more comments more tests

* adding all the front-end sites guides

* removing extra nav alert in the middle of decouple overview pages

* running prettier

* going back to old prettier config files. Redo this change under #9082

* starting to add a styling file for omnisidebarnav

* starting on styling

* getting external link indicator working

* remove extra arrow in link

* removing console.log

* Add vitest to GitHub actions (#9162)

* Add vitest to GHA

* Make a clean install

* switching from jsx to React.createElement()

* Update and rename test.yml to vitest.yml

---------

Co-authored-by: Steve Persch <steve.persch@pantheon.io>
Co-authored-by: Steve Persch <stevector@users.noreply.github.com>

* moving icon to back and setting to small

* testing readme

* fixing link

* copy fix

* changing addsearch back

* addsearch back

* adding vite.config.ts

* Updating import order

* update tests readme

* Apply Prettier formatting

* removing comment

* vitest fix, fingers crossed

* adding rollup

* package merges

* re-adding vitest stuff

---------

Co-authored-by: Rachel Whitton <rachel@pantheon.io>
Co-authored-by: Chris Reynolds <chris.reynolds@pantheon.io>
Co-authored-by: Pantheon Bot <bot@getpantheon.com>

Author: 4 people

.github/workflows/vitest.yml

@@ -0,0 +1,23 @@
+name: JavaScript Unit Tests
+on:
+  pull_request:
+    paths:
+      - 'src/**'
+      - '.github/workflows/vitest.yml'
+    types:
+      - opened
+      - synchronize
+      - reopened
+      - ready_for_review
+  workflow_dispatch:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'latest'
+      - run: npm ci
+      - run: npx vitest src/components

README.md

@@ -151,8 +151,19 @@ Be cautious when running this command, as it will automatically fix any formatti
 
 ## Testing
 
-We include several tools to test that new content doesn't break the documentation. Most of these tests are performed automatically by our continuous integration service, but pull requests created from external contributors aren't included in CI tests. If you want to manually test your branch, you can execute the following tests within the Docker container.
+To reduced the likelihood of regressions and bugs this site uses a few different testing tools:
 
-### Merge Conflicts
+### Visual Regression Tests
 
-To check for merge conflict messages accidentally committed into the docs, run `merge_conflicts.sh` from `scripts`.
+Within the [`tests`](/tests/) directory there are a number of visual regression tests that can be run to compare the current state of the site to a PR preview or the live site.
+These tests are meant to be run locally instead of CI as they have a high rate of false positives.
+
+### Unit Tests
+
+Unit tests for custom logic are written in in Vitest and can be executed with
+
+```bash
+npx vitest src/components
+```
+
+These tests are executed in CI via a [GitHub Action](.github/workflows/vitest.yml).