1313import fs from ' node:fs' ;
1414import { parse } from ' yaml' ;
1515import WarpTopbar from ' ../components/WarpTopbar.astro' ;
16- import FeedbackButtons from ' ../components/FeedbackButtons.astro' ;
1716const yamlContent = fs .readFileSync (' developers/agent-api-openapi.yaml' , ' utf-8' );
1817const specObject = parse (yamlContent );
1918const specJson = JSON .stringify (specObject );
20- // `PUBLIC_PUSHFEEDBACK_PROJECT_ID` is read directly inside `<FeedbackButtons />`
21- // (see `src/components/FeedbackButtons.astro`) — no need to plumb it through
22- // here.
2319---
2420
2521<!doctype html >
@@ -47,9 +43,6 @@ const specJson = JSON.stringify(specObject);
4743 <meta name =" twitter:description" content =" Interactive API reference for the Agent API. Create and manage cloud agent runs, schedules, and more." />
4844 <meta name =" twitter:image" content =" https://docs.warp.dev/assets/og/api.png" />
4945 <link rel =" shortcut icon" href =" /favicon.svg" type =" image/svg+xml" />
50- { /* PushFeedback CSS + JS are NOT loaded here — the lazy loader inside
51- `<FeedbackButtons />` (rendered below) injects them on idle so the
52- Scalar reference's first paint isn't blocked on a CDN fetch. */ }
5346 <script is:inline >
5447 // Theme persistence: shared between Starlight pages and this Scalar
5548 // /api page. `localStorage['starlight-theme']` is the single source
@@ -58,7 +51,8 @@ const specJson = JSON.stringify(specObject);
5851 // `prefers-color-scheme` and apply both `body.dark-mode` /
5952 // `body.light-mode` (Scalar's color contract — our customCss block
6053 // below keys all the brand tokens off these classes) and
61- // `<html data-theme>` (PushFeedback's contract).
54+ // `<html data-theme>` (which drives the first-paint canvas color
55+ // rules in the inline `<style>` block below).
6256 //
6357 // Runs synchronously in <head> so the body class is set before
6458 // Scalar's bundle parses, avoiding a flash from Scalar's default.
@@ -118,9 +112,9 @@ const specJson = JSON.stringify(specObject);
118112 apply(resolve(e.newValue));
119113 });
120114 // Belt-and-braces: any other actor that flips body.dark-mode /
121- // body.light-mode (Scalar internals, PushFeedback, future
122- // integrations) should still update html[data-theme] so
123- // PushFeedback's modal stays in sync with the visible page.
115+ // body.light-mode (Scalar internals, future integrations) should
116+ // still update html[data-theme] so the first-paint canvas rules
117+ // stay in sync with the visible page.
124118 var mirror = new MutationObserver(function () {
125119 var b = document.body;
126120 if (!b) return;
@@ -352,93 +346,5 @@ const specJson = JSON.stringify(specObject);
352346 })();
353347 </script >
354348 <script is:inline src =" https://cdn.jsdelivr.net/npm/@scalar/api-reference@1.57.1" crossorigin =" anonymous" ></script >
355- <FeedbackButtons
356- question =" Was this helpful?"
357- class =" api-feedback-widget"
358- questionClass =" api-feedback-label"
359- buttonClass =" api-feedback-btn"
360- page =" /api"
361- />
362- <style is:inline >
363- /* `.warp-topbar*` rules ship with `<WarpTopbar />` itself; only the
364- /api-specific feedback widget styling lives here.
365-
366- Anchored to the bottom-RIGHT so the widget sits where users naturally
367- look for inline page actions. Scalar's Shell client picker / dark-mode
368- toggle live inside the operations column rather than fixed to the
369- viewport, so the two don't actually collide at this z-index.
370-
371- Soft elevation (hairline + shadow) replaces the hard border so the
372- card reads as a layer above the page rather than a flat patch.
373- Light-mode swaps the shadow to a quieter alpha. */
374- .api-feedback-widget {
375- position : fixed ;
376- bottom : 1.25rem ;
377- right : 1.25rem ;
378- display : inline - flex ;
379- align - items : center ;
380- gap : 0.5rem ;
381- padding : 0.4375rem 0.625rem 0.4375rem 0.875rem ;
382- border - radius : 0.625rem ;
383- background : var (--scalar-background-2);
384- border : 1px solid var (--scalar-border-color);
385- box - shadow : 0 6px 20px rgba (0 , 0 , 0 , 0.18 ), 0 1px 2px rgba (0 , 0 , 0 , 0.12 );
386- z - index : 1000 ;
387- font - family : var (--scalar-font, 'Inter' , sans-serif);
388- }
389- .light-mode .api-feedback-widget {
390- box - shadow : 0 6px 20px rgba (0 , 0 , 0 , 0.06 ), 0 1px 2px rgba (0 , 0 , 0 , 0.04 );
391- }
392- .api-feedback-label {
393- color : var (--scalar-color-2);
394- font - size : 0.8125rem ;
395- font - weight : 500 ;
396- line - height : 1 ;
397- }
398- .api-feedback-btn {
399- display : inline - flex ;
400- align - items : center ;
401- justify - content : center ;
402- gap : 0.3125rem ;
403- padding : 0.25rem 0.5rem ;
404- border : none ;
405- border - radius : 0.4375rem ;
406- background : transparent ;
407- color : var (--scalar-color-2);
408- font - size : 0.75rem ;
409- font - weight : 500 ;
410- font - family : var (--scalar-font, 'Inter' , sans-serif);
411- line - height : 1 ;
412- cursor : pointer ;
413- transition : color 0.15s ease , background - color 0.15s ease ;
414- }
415- .api-feedback-btn svg {
416- width : 13px ;
417- height : 13px ;
418- opacity : 0.85 ;
419- }
420- .api-feedback-btn:hover {
421- color : var (--scalar-color-1);
422- background : var (--scalar-background-3);
423- }
424- .api-feedback-btn:hover svg {
425- opacity : 1 ;
426- }
427- .api-feedback-btn:focus-visible {
428- outline : 2px solid var (--scalar-color-accent);
429- outline - offset : 1px ;
430- }
431- @media (max-width: 640px) {
432- .api - feedback - widget {
433- bottom : 1rem ;
434- right : 1rem ;
435- padding : 0.375rem 0.5rem 0.375rem 0.75rem ;
436- gap : 0.375rem ;
437- }
438- .api - feedback - label {
439- font - size : 0.75rem ;
440- }
441- }
442- </style >
443349 </body >
444350</html >
0 commit comments