Fix API overview sidebars (#22468)

files/en-us/web/api/keyboard_api/index.md

@@ -15,7 +15,7 @@ browser-compat:
   - api.KeyboardLayoutMap
 ---
 
-{{SeeCompatTable}}{{APIRef("Keyboard API")}}
+{{SeeCompatTable}}{{DefaultAPISidebar("Keyboard API")}}
 
 The Keyboard API provides methods for working with a physical keyboard that is attached to a device running a browser.
 
@@ -34,9 +34,8 @@ The following example demonstrates how to get the location-specific or layout-sp
 ```js
 if (navigator.keyboard) {
   const keyboard = navigator.keyboard;
-  keyboard.getLayoutMap()
-  .then((keyboardLayoutMap) => {
-    const upKey = keyboardLayoutMap.get('KeyW');
+  keyboard.getLayoutMap().then((keyboardLayoutMap) => {
+    const upKey = keyboardLayoutMap.get("KeyW");
     window.alert(`Press ${upKey} to move up.`);
   });
 } else {

files/en-us/web/api/media_capture_and_streams_api/index.md

@@ -13,7 +13,7 @@ browser-compat: api.MediaStream
 page-type: web-api-overview
 ---
 
-{{APIRef("Media Capture and Streams")}}
+{{DefaultAPISidebar("Media Capture and Streams")}}
 
 The **Media Capture and Streams** API, often called the **Media Streams API** or **MediaStream API**, is an API related to [WebRTC](/en-US/docs/Web/API/WebRTC_API) which provides support for streaming audio and video data.
 

files/en-us/web/api/push_api/index.md

@@ -15,7 +15,7 @@ browser-compat:
   - api.PushMessageData
 ---
 
-{{ApiRef("Push API")}}
+{{DefaultAPISidebar("Push API")}}
 
 The **Push API** gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent. This lets developers deliver asynchronous notifications and updates to users that opt in, resulting in better engagement with timely new content.
 

files/en-us/web/api/reporting_api/index.md

@@ -12,7 +12,7 @@ tags:
 spec-urls: https://w3c.github.io/reporting/#intro
 ---
 
-{{SeeCompatTable}}{{APIRef("Reporting API")}}
+{{SeeCompatTable}}{{DefaultAPISidebar("Reporting API")}}
 
 The Reporting API provides a generic reporting mechanism for web applications to use to make reports available based on various platform features (for example [Content Security Policy](/en-US/docs/Web/HTTP/CSP), [Feature-Policy](/en-US/docs/Web/HTTP/Headers/Feature-Policy), or feature deprecation reports) in a consistent manner.
 
@@ -84,9 +84,9 @@ In our [deprecation_report.html](https://mdn.github.io/dom-examples/reporting-ap
 
 ```js
 const options = {
-  types: ['deprecation'],
-  buffered: true
-}
+  types: ["deprecation"],
+  buffered: true,
+};
 
 const observer = new ReportingObserver((reports, observer) => {
   reportBtn.onclick = () => displayReports(reports);
@@ -103,15 +103,9 @@ Later on in the example we deliberately use the deprecated version of {{domxref(
 
 ```js
 if (navigator.mozGetUserMedia) {
-  navigator.mozGetUserMedia(
-    constraints,
-    success,
-    failure);
+  navigator.mozGetUserMedia(constraints, success, failure);
 } else {
-  navigator.getUserMedia(
-    constraints,
-    success,
-    failure);
+  navigator.getUserMedia(constraints, success, failure);
 }
 ```
 

files/en-us/web/api/sensor_apis/index.md

@@ -13,7 +13,7 @@ tags:
 browser-compat: api.Sensor
 ---
 
-{{APIRef("Sensor API")}}
+{{DefaultAPISidebar("Sensor API")}}
 
 The **Sensor APIs** are a set of interfaces built to a common design that expose device sensors in a consistent way to the web platform.
 
@@ -33,15 +33,15 @@ The examples below show three methods for detecting sensor APIs. Additionally yo
 
 ```js
 if (typeof Gyroscope === "function") {
-    // run in circles…
+  // run in circles…
 }
 
 if ("ProximitySensor" in window) {
-    // watch out!
+  // watch out!
 }
 
 if (window.AmbientLightSensor) {
-    // go dark…
+  // go dark…
 }
 ```
 
@@ -60,27 +60,27 @@ The code example below illustrates these principles. The {{jsxref('statements/tr
 ```js
 let accelerometer = null;
 try {
-    accelerometer = new Accelerometer({ referenceFrame: 'device' });
-    accelerometer.addEventListener('error', (event) => {
-        // Handle runtime errors.
-        if (event.error.name === 'NotAllowedError') {
-            // Branch to code for requesting permission.
-        } else if (event.error.name === 'NotReadableError' ) {
-            console.log('Cannot connect to the sensor.');
-        }
-    });
-    accelerometer.addEventListener('reading', () => reloadOnShake(accelerometer));
-    accelerometer.start();
-} catch (error) {
-    // Handle construction errors.
-    if (error.name === 'SecurityError') {
-        // See the note above about feature policy.
-        console.log('Sensor construction was blocked by a feature policy.');
-    } else if (error.name === 'ReferenceError') {
-        console.log('Sensor is not supported by the User Agent.');
-    } else {
-        throw error;
+  accelerometer = new Accelerometer({ referenceFrame: "device" });
+  accelerometer.addEventListener("error", (event) => {
+    // Handle runtime errors.
+    if (event.error.name === "NotAllowedError") {
+      // Branch to code for requesting permission.
+    } else if (event.error.name === "NotReadableError") {
+      console.log("Cannot connect to the sensor.");
     }
+  });
+  accelerometer.addEventListener("reading", () => reloadOnShake(accelerometer));
+  accelerometer.start();
+} catch (error) {
+  // Handle construction errors.
+  if (error.name === "SecurityError") {
+    // See the note above about feature policy.
+    console.log("Sensor construction was blocked by a feature policy.");
+  } else if (error.name === "ReferenceError") {
+    console.log("Sensor is not supported by the User Agent.");
+  } else {
+    throw error;
+  }
 }
 ```
 
@@ -89,10 +89,9 @@ try {
 Sensor readings may not be taken unless the user grants permission to a specific sensor type. Do this using the [Permissions API](/en-US/docs/Web/API/Permissions_API). A brief example, shown below, requests permission before attempting to use the sensor.
 
 ```js
-navigator.permissions.query({ name: 'accelerometer' })
-.then((result) => {
-  if (result.state === 'denied') {
-    console.log('Permission to use accelerometer sensor is denied.');
+navigator.permissions.query({ name: "accelerometer" }).then((result) => {
+  if (result.state === "denied") {
+    console.log("Permission to use accelerometer sensor is denied.");
     return;
   }
   // Use the sensor.
@@ -104,8 +103,8 @@ An alternative approach is to attempt to use the sensor and listen for the `Secu
 ```js
 const sensor = new AbsoluteOrientationSensor();
 sensor.start();
-sensor.addEventListener('error', (error) => {
-  if (event.error.name === 'SecurityError')
+sensor.addEventListener("error", (error) => {
+  if (event.error.name === "SecurityError")
     console.log("No permissions to use AbsoluteOrientationSensor.");
 });
 ```
@@ -130,16 +129,16 @@ Sensor readings are received through the {{domxref('Sensor.reading_event', 'read
 The following example illustrates this using the {{domxref('Magnetometer')}} sensor.
 
 ```js
-let magSensor = new Magnetometer({frequency: 60});
+let magSensor = new Magnetometer({ frequency: 60 });
 
-magSensor.addEventListener('reading', (e) => {
+magSensor.addEventListener("reading", (e) => {
   console.log(`Magnetic field along the X-axis ${magSensor.x}`);
   console.log(`Magnetic field along the Y-axis ${magSensor.y}`);
   console.log(`Magnetic field along the Z-axis ${magSensor.z}`);
-})
-magSensor.addEventListener('error', (event) => {
+});
+magSensor.addEventListener("error", (event) => {
   console.log(event.error.name, event.error.message);
-})
+});
 magSensor.start();
 ```
 

files/en-us/web/api/web_locks_api/index.md

@@ -15,7 +15,7 @@ browser-compat:
   - api.Lock
 ---
 
-{{SeeCompatTable}}{{APIRef("Web Locks")}}{{DefaultAPISidebar}}{{securecontext_header}}
+{{SeeCompatTable}}{{DefaultAPISidebar("Web Locks API")}}{{securecontext_header}}
 
 The Web Locks API allows scripts running in one tab or worker to asynchronously acquire a lock, hold it while work is performed, then release it. While held, no other script executing in the same origin can acquire the same lock, which allows a web app running in multiple tabs or workers to coordinate work and the use of resources.
 
@@ -30,7 +30,7 @@ The API is used as follows:
 3. The lock is automatically released when the task completes.
 
 ```js
-navigator.locks.request('my_resource', async (lock) => {
+navigator.locks.request("my_resource", async (lock) => {
   // The lock has been acquired.
   await do_something();
   await do_something_else();
@@ -60,7 +60,7 @@ For example:
 await do_something_without_lock();
 
 // Request the lock.
-await navigator.locks.request('my_resource', async (lock) => {
+await navigator.locks.request("my_resource", async (lock) => {
   // The lock has been acquired.
   await do_something_with_lock();
   await do_something_else_with_lock();
@@ -97,9 +97,9 @@ const p = new Promise((res, rej) => {
 
 // Request the lock:
 navigator.locks.request(
-  'my_resource',
+  "my_resource",
   // Lock is acquired.
-  (lock) => p, // Now lock will be held until either resolve() or reject() is called.
+  (lock) => p // Now lock will be held until either resolve() or reject() is called.
 );
 ```
 

files/jsondata/GroupData.json

@@ -747,6 +747,11 @@
       "properties": [],
       "events": []
     },
+    "Keyboard API": {
+      "overview": ["Keyboard API"],
+      "interfaces": ["Keyboard", "KeyboardLayoutMap"],
+      "methods": ["Navigator.keyboard"]
+    },
     "Layout Instability API": {
       "overview": ["Layout Instability API"],
       "interfaces: ": ["LayoutShift", "LayoutShiftAttribution"],
@@ -1766,6 +1771,13 @@
       "properties": ["Navigator.hid"],
       "events": []
     },
+    "Web Locks API": {
+      "overview": ["Web Locks API"],
+      "interfaces": ["Lock", "LockManager"],
+      "methods": [],
+      "properties": [],
+      "events": []
+    },
     "Web MIDI API": {
       "overview": ["Web MIDI API"],
       "interfaces": [