docs: introduce custom version selector in api.html

[not-my-profile]

Resolves #27277.

Does this PR introduce a user-facing change?

Updated the REST API documentation page to hide the Read the Docs version selector (which didn't affect the API version) and introduced a new version selector for the API version.

[packit-as-a-service]

[NON-BLOCKING] Packit jobs failed. @containers/packit-build please check. Everyone else, feel free to ignore.

[Honny1]

I tried to build and display the changes, and I got a syntax error. You can find instructions on how to build the documentation locally here.

[not-my-profile]

Ah yeah sorry. I did build it locally but getting the specs from storage.googleapis.com fails locally because of CORS, so I had to use a relative URL and when I changed it back I introduced the syntax error. Fixed!

[TomSweeneyRedHat]

LGTM

[not-my-profile]

(Slightly corrected a comment: clearing the redoc-container led to errors rather than the delay.)

[Honny1]

I am not sure if this is a good style for a version selector.

How about this, or something similar?

    #versionSelect {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;

      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 1000;

      background-color: #272725;
      border: 1px solid #4a4a4a;
      border-radius: 4px;
      color: #E2E2E2;
      cursor: pointer;

      padding: 6px 30px 6px 12px;
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 14px;
      line-height: 1.5;

      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3e%3cpath d='M0 0l5 5 5-5z' fill='%23E2E2E2'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 10px 5px;
      
      transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    }

    #versionSelect::-ms-expand {
      display: none;
    }

    #versionSelect:hover {
      background-color: #383836;
      border-color: #636363;
    }

    #versionSelect:focus-visible {
      outline: 2px solid #0085CA;
      outline-offset: 2px;
    }

[not-my-profile]

I agree that the outline I added looks bad, I just removed it. But I don't think styling it to be dark makes sense because I just noticed that for narrow browser widths ReDoc puts a white menu button next to it (and I adjusted the position to be better aligned with that other button):

[Honny1]

LGTM

[flouthoc]

LGTM

[mheon]

@ashley-cui Mind doing final review?

[ashley-cui]

/lgtm

[baude]

/approve

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: baude, flouthoc, Honny1, not-my-profile

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [baude]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment