Skip to content

Commit 7628715

Browse files
ThomasRooneyThomasRooney
committed
chore: make it even prettier
1 parent 614b6fa commit 7628715

File tree

9 files changed

+173
-103
lines changed

9 files changed

+173
-103
lines changed

‎web/index.html‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html lang="en" class="dark">
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Speakeasy OpenAPI Overlay Playground</title>
7+
<meta property="og:title" content="OpenAPI Overlay Playground | Speakeasy?">
8+
<meta property="og:description" content="A tool to visualize and generate OpenAPI Overlays">
9+
<meta property="og:url" content="https://overlay.speakeasy.com">
10+
<meta content="/og-image-600x900.png" property="og:image" />
11+
<meta content="Speakeasy" property="og:image:alt" />
12+
<meta content="600" property="og:image:height" />
13+
<meta content="900" property="og:image:width" />
14+
<meta content="/og-image-2000x1333.png" property="og:image" />
15+
<meta content="Speakeasy" property="og:image:alt" />
16+
<meta content="1333" property="og:image:height" />
17+
<meta content="2000" property="og:image:width" />
18+
<title>OpenAPI Overlay Playground</title>
819
<style>
920
body {
1021
background-color: #000;

‎web/public/og-image-2000x1333.png‎

294 KB
Loading

‎web/public/og-image-600x900.png‎

115 KB
Loading

‎web/src/App.css‎

Lines changed: 53 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -2,116 +2,78 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
#root {
6-
display: flex;
7-
margin: 0 auto;
8-
text-align: center;
9-
width: 100vw;
10-
justify-content: space-between;
11-
background: #111
12-
}
13-
14-
#root > * {
15-
display: flex;
16-
}
17-
18-
.logo {
19-
height: 6em;
20-
padding: 1.5em;
21-
will-change: filter;
22-
transition: filter 300ms;
23-
}
24-
.logo:hover {
25-
filter: drop-shadow(0 0 2em #646cffaa);
26-
}
27-
.logo.react:hover {
28-
filter: drop-shadow(0 0 2em #61dafbaa);
29-
}
30-
31-
@keyframes logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
38-
}
39-
40-
@media (prefers-reduced-motion: no-preference) {
41-
a:nth-of-type(2) .logo {
42-
animation: logo-spin infinite 20s linear;
43-
}
44-
}
45-
46-
.card {
47-
padding: 2em;
48-
}
49-
50-
.read-the-docs {
51-
color: #888;
52-
}
53-
545
@layer base {
556
:root {
567
--background: 0 0% 100%;
57-
--foreground: 0 0% 3.9%;
8+
--foreground: 20 14.3% 4.1%;
589
--card: 0 0% 100%;
59-
--card-foreground: 0 0% 3.9%;
10+
--card-foreground: 20 14.3% 4.1%;
6011
--popover: 0 0% 100%;
61-
--popover-foreground: 0 0% 3.9%;
62-
--primary: 0 0% 9%;
63-
--primary-foreground: 0 0% 98%;
64-
--secondary: 0 0% 96.1%;
65-
--secondary-foreground: 0 0% 9%;
66-
--muted: 0 0% 96.1%;
67-
--muted-foreground: 0 0% 45.1%;
68-
--accent: 0 0% 96.1%;
69-
--accent-foreground: 0 0% 9%;
12+
--popover-foreground: 20 14.3% 4.1%;
13+
--primary: 24 9.8% 10%;
14+
--primary-foreground: 60 9.1% 97.8%;
15+
--secondary: 60 4.8% 95.9%;
16+
--secondary-foreground: 24 9.8% 10%;
17+
--muted: 60 4.8% 95.9%;
18+
--muted-foreground: 25 5.3% 44.7%;
19+
--accent: 60 4.8% 95.9%;
20+
--accent-foreground: 24 9.8% 10%;
7021
--destructive: 0 84.2% 60.2%;
71-
--destructive-foreground: 0 0% 98%;
72-
--border: 0 0% 89.8%;
73-
--input: 0 0% 89.8%;
74-
--ring: 0 0% 3.9%;
22+
--destructive-foreground: 60 9.1% 97.8%;
23+
--border: 20 5.9% 90%;
24+
--input: 20 5.9% 90%;
25+
--ring: 20 14.3% 4.1%;
7526
--chart-1: 12 76% 61%;
7627
--chart-2: 173 58% 39%;
7728
--chart-3: 197 37% 24%;
7829
--chart-4: 43 74% 66%;
7930
--chart-5: 27 87% 67%;
80-
--radius: 0.5rem
31+
--radius: 0.5rem;
8132
}
82-
.dark {
83-
--background: 0 0% 3.9%;
84-
--foreground: 0 0% 98%;
85-
--card: 0 0% 3.9%;
86-
--card-foreground: 0 0% 98%;
87-
--popover: 0 0% 3.9%;
88-
--popover-foreground: 0 0% 98%;
89-
--primary: 0 0% 98%;
90-
--primary-foreground: 0 0% 9%;
91-
--secondary: 0 0% 14.9%;
92-
--secondary-foreground: 0 0% 98%;
93-
--muted: 0 0% 14.9%;
94-
--muted-foreground: 0 0% 63.9%;
95-
--accent: 0 0% 14.9%;
96-
--accent-foreground: 0 0% 98%;
97-
--destructive: 0 62.8% 30.6%;
98-
--destructive-foreground: 0 0% 98%;
99-
--border: 0 0% 14.9%;
100-
--input: 0 0% 14.9%;
101-
--ring: 0 0% 83.1%;
102-
--chart-1: 220 70% 50%;
103-
--chart-2: 160 60% 45%;
104-
--chart-3: 30 80% 55%;
105-
--chart-4: 280 65% 60%;
106-
--chart-5: 340 75% 55%
33+
@media (prefers-color-scheme: dark) {
34+
:root {
35+
--background: 20 14.3% 4.1%;
36+
--foreground: 60 9.1% 97.8%;
37+
--card: 20 14.3% 4.1%;
38+
--card-foreground: 60 9.1% 97.8%;
39+
--popover: 20 14.3% 4.1%;
40+
--popover-foreground: 60 9.1% 97.8%;
41+
--primary: 60 9.1% 97.8%;
42+
--primary-foreground: 24 9.8% 10%;
43+
--secondary: 12 6.5% 15.1%;
44+
--secondary-foreground: 60 9.1% 97.8%;
45+
--muted: 12 6.5% 15.1%;
46+
--muted-foreground: 24 5.4% 63.9%;
47+
--accent: 12 6.5% 15.1%;
48+
--accent-foreground: 60 9.1% 97.8%;
49+
--destructive: 0 62.8% 30.6%;
50+
--destructive-foreground: 60 9.1% 97.8%;
51+
--border: 12 6.5% 15.1%;
52+
--input: 12 6.5% 15.1%;
53+
--ring: 24 5.7% 82.9%;
54+
--chart-1: 220 70% 50%;
55+
--chart-2: 160 60% 45%;
56+
--chart-3: 30 80% 55%;
57+
--chart-4: 280 65% 60%;
58+
--chart-5: 340 75% 55%;
59+
}
10760
}
108-
}
10961

62+
}
11063
@layer base {
11164
* {
11265
@apply border-border;
11366
}
11467
body {
11568
@apply bg-background text-foreground;
69+
display: flex;
70+
margin: 0 auto;
71+
text-align: center;
72+
width: 100vw;
73+
justify-content: space-between;
11674
}
11775
}
76+
77+
#root > * {
78+
display: flex;
79+
}

‎web/src/Playground.tsx‎

Lines changed: 79 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,13 @@ import "./App.css";
33
import { Editor } from "./components/Editor.tsx";
44
import { editor } from "monaco-editor";
55
import { ApplyOverlay, CalculateOverlay, GetInfo } from "./bridge.ts";
6-
import { Alert, PageHeader } from "@speakeasy-api/moonshine";
6+
import { Alert } from "@speakeasy-api/moonshine";
77
import { blankOverlay, petstore } from "./defaults.ts";
88
import { useAtom } from "jotai";
99
import { atomWithHash } from "jotai-location";
10+
import speakeasyWhiteLogo from "./assets/speakeasy-white.svg";
11+
import speakeasyBlackLogo from "./assets/speakeasy-black.svg";
12+
import openapiLogo from "./assets/openapi.svg";
1013

1114
const originalOpenAPI = atomWithHash("originalOpenAPI", petstore);
1215
const changedOpenAPI = atomWithHash("changedOpenAPI", petstore);
@@ -106,21 +109,88 @@ function Playground() {
106109
<div
107110
style={{
108111
display: "flex",
109-
color: "white",
110112
flexDirection: "column",
111113
alignItems: "center",
112114
minHeight: "100vh",
113115
width: "100%",
114116
}}
115117
>
116118
<div style={{ paddingBottom: "1rem", width: "100vw" }}>
117-
<PageHeader
118-
image="https://avatars.githubusercontent.com/u/91446104?s=200&v=4"
119-
subtitle="Best in class API tooling for robust SDKs, Terraform Providers and End to End Testing. OpenAPI Native."
120-
title="Speakeasy OpenAPI Overlay Playground"
121-
>
122-
<div style={{ width: "100%" }} />
123-
</PageHeader>
119+
<div className="border-b border-muted p-4 md:p-6 text-left">
120+
<div className="flex gap-2">
121+
<div className="flex flex-1">
122+
<div className="flex items-center pr-2">
123+
<img
124+
src={openapiLogo}
125+
alt="OpenAPI Logo"
126+
className="h-12 w-12 shrink-0 grow-0 origin-center rotate-180 rounded-full"
127+
/>
128+
</div>
129+
<div className="grow-1">
130+
<h1 className="text-xl font-semibold leading-none tracking-tight">
131+
<a
132+
className="underline hover:no-underline pr-1"
133+
href="https://github.com/OAI/Overlay-Specification"
134+
>
135+
OpenAPI Overlay
136+
</a>
137+
Playground
138+
</h1>
139+
<p className="max-w-prose text-sm text-muted-foreground pt-2">
140+
The OpenAPI Overlay Specification lets you update arbitrary
141+
values in an YAML document using{" "}
142+
<a
143+
className="border-b border-transparent pb-[2px] transition-all duration-200 hover:border-current"
144+
href="https://datatracker.ietf.org/doc/rfc9535/"
145+
>
146+
jsonpath
147+
</a>
148+
.
149+
</p>
150+
</div>
151+
</div>
152+
<div className="flex flex-1 flex-row-reverse">
153+
<ul className="flex gap-x-2">
154+
<li>
155+
<a
156+
className="border-b border-transparent pb-[2px] transition-all duration-200 hover:border-current"
157+
href="https://www.speakeasy.com"
158+
>
159+
Made by the team at{" "}
160+
<span className="sr-only">Speakeasy</span>
161+
<picture>
162+
<source
163+
srcSet={speakeasyWhiteLogo}
164+
media="(prefers-color-scheme: dark)"
165+
/>
166+
<img
167+
className="inline-block h-3 w-auto align-baseline"
168+
src={speakeasyBlackLogo}
169+
alt=""
170+
/>
171+
</picture>
172+
</a>
173+
</li>
174+
<li className="before:pe-2 before:content-['•']">
175+
<a
176+
className="border-b border-transparent pb-[2px] transition-all duration-200 hover:border-current"
177+
href="https://github.com/speakeasy-api/jsonpath"
178+
>
179+
GitHub
180+
</a>
181+
</li>
182+
<li className="before:pe-2 before:content-['•']">
183+
<a
184+
className="border-b border-transparent pb-[2px] transition-all duration-200 hover:border-current"
185+
href="https://github.com/OAI/Overlay-Specification"
186+
>
187+
OpenAPI Overlay
188+
</a>
189+
</li>
190+
</ul>
191+
</div>
192+
</div>
193+
</div>
124194
</div>
125195
{error && <Alert variant={"error"}>{error}</Alert>}
126196
<div

‎web/src/assets/openapi.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)