Merge pull request #716 from hirosystems/feat/api-playground

Add API Playground

Author: ryanwaits

.gitignore

@@ -4,4 +4,5 @@ node_modules
 bun.lockb
 openapi
 .DS_Store
-**/.DS_Store
+**/.DS_Store
+tmp

app/(docs)/layout.tsx

@@ -10,7 +10,7 @@ export const layoutOptions: Omit<DocsLayoutProps, "children"> = {
   tree: utils.pageTree,
   nav: {
     transparentMode: "top",
-    title: <DocsLogo className="size-28" />,
+    title: <DocsLogo className="size-28 hidden sm:block" />,
     children: <NavChildren />,
     links: [
       {

app/global.css

@@ -131,7 +131,7 @@ h1, h2, h3, h4, h5, h6, code, button, .step {
   font-family: var(--font-aeonikFono), sans-serif;
 }
 
-a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, option {
   font-family: var(--font-aeonikFono), sans-serif;
 }
 
@@ -290,10 +290,41 @@ div.not-prose, div.prose-no-margin, div[role="tablist"] {
   background: hsl(var(--background));
 }
 
+/* Target the form tag with specific classes */
+form.not-prose.flex.flex-col.gap-4.rounded-lg.border.bg-card.p-4 {
+  background-color: hsl(var(--background));
+}
+
+/* Target the specific div with the given classes */
+.divide-y.divide-border.overflow-hidden.rounded-lg.bg-card.-m-4.mt-2.border-0.text-sm {
+  background-color: hsl(var(--background));
+}
+
+/* overrides the background of APIInfo and adjusts sticky header on scroll */
+div.prose-no-margin .sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.rounded-lg.border.bg-card.p-3.md\:top-10 {
+  background: hsl(var(--background));
+  top: 4.5rem;
+}
+
+/* For long endpoint names this will truncate the ending and add an ellipsis */
+div.prose-no-margin .sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.rounded-lg.border.bg-card.p-3.md\:top-10 span:nth-child(n+12) {
+  display: none;
+}
+
+/* And add an ellipsis */
+div.prose-no-margin .sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.rounded-lg.border.bg-card.p-3.md\:top-10 span:nth-child(11)::after {
+  content: '...';
+  display: inline;
+}
+
 div.prose div.footer.not-prose {
   background: hsl(var(--accent));
 }
 
+#radix-\:r3\: > div > div > div:nth-child(2) > select option {
+  font-family: var(--font-aeonikFono), sans-serif !important;
+}
+
 .steps > div:nth-child(2) > figure:nth-child(3) > div.flex.flex-row.items-center.gap-2.border-b.bg-muted.px-4.py-1\.5 {
   background: hsl(var(--background)) !important;
 }
@@ -333,14 +364,15 @@ div.api-example div.max-xl\:hidden > div:nth-child(1) {
 
 /* Add a deprecated strike through to sidebar links */
 a[href="/stacks/api/accounts/nft-events"],
-a[href="/stacks/api/blocks/recent-blocks"],
-a[href="/stacks/api/blocks/block-by-hash"],
-a[href="/stacks/api/blocks/block-by-height"],
-a[href="/stacks/api/blocks/block-by-burn-block-hash"],
-a[href="/stacks/api/blocks/block-by-burn-block-height"],
+a[href="/stacks/api/accounts/transaction-with-transfers"],
 a[href="/stacks/api/accounts/transactions"],
 a[href="/stacks/api/accounts/transactions-with-transfers"],
-a[href="/stacks/api/accounts/transaction-with-transfers"] {
+a[href="/stacks/api/blocks/block-by-burn-block-hash"],
+a[href="/stacks/api/blocks/block-by-burn-block-height"],
+a[href="/stacks/api/blocks/block-by-hash"],
+a[href="/stacks/api/blocks/block-by-height"],
+a[href="/stacks/api/blocks/recent-blocks"],
+a[href="/stacks/api/fees/fee-rate"] {
   text-decoration: line-through;
   color: hsl(var(--muted-foreground) / var(--tw-text-opacity));
 }

components/card.tsx

@@ -108,13 +108,13 @@ export function SmallCard({
     <Link
       {...props}
       className={cn(
-        "not-prose block text-sm text-card-foreground transition-colors",
+        "not-prose block text-sm text-card-foreground transition-colors space-y-3",
         props.className
       )}
     >
       <div className="group flex space-x-4 px-3 py-4 rounded-lg hover:bg-accent">
         {icon && (
-          <div className="h-fit w-fit rounded-md border bg-card group-hover:bg-background p-2 text-muted-foreground [&_svg]:size-4">
+          <div className="h-fit w-fit rounded-md border bg-card group-hover:bg-background group-hover:text-primary transition-colors duration-500 ease-in-out p-2 text-muted-foreground [&_svg]:size-4">
             {icon}
           </div>
         )}

components/ui/icon.tsx

@@ -78,27 +78,8 @@ export function Ordinals(): JSX.Element {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle
-        cx="7.58228"
-        cy="7.05255"
-        r="6.36257"
-        stroke="currentColor"
-        style={{
-          stroke: "currentColor",
-          strokeOpacity: 1,
-          strokeWidth: "1.2651",
-        }}
-      />
-      <circle
-        cx="7.53107"
-        cy="7.04505"
-        r="3.76642"
-        fill="currentColor"
-        style={{
-          fill: "currentColor",
-          fillOpacity: 1,
-        }}
-      />
+      <circle cx="7.58228" cy="7.05255" r="6.36257" stroke="currentColor" />
+      <circle cx="7.53107" cy="7.04505" r="3.76642" fill="currentColor" />
     </svg>
   );
 }

content/docs/bitcoin/get-started.mdx

@@ -48,8 +48,7 @@ import { API, Container, Chainhook, BitcoinIcon } from '@/components/ui/icon';
 
 <Cards>
   <SmallCard
-    className="group"
-    icon={<BitcoinIcon className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<BitcoinIcon />}
     href="/guides/sync-a-bitcoin-node"
     title="Sync a Bitcoin node"
     description="Set up and run a Bitcoin node to use tools like Ordhook."

content/docs/bitcoin/index.mdx

@@ -57,22 +57,19 @@ import heroImage from '@/public/bitcoin-hero.svg';
 
 <Cards>
   <SmallCard
-    className='group space-y-3'
-    icon={<Ordinals className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
-    href="/bitcoin/ordinals/ordhook"
-    title="Ordhook"
-    description="Create custom event streams for real-time data and analytics with Ordhook."
+    icon={<Ordinals />}
+    href="/bitcoin/ordinals/api"
+    title="Ordinals API"
+    description="Fetch on-chain data for Ordinals and meta-protocols with our hosted API."
   />
   <SmallCard
-    className='group space-y-3'
-    icon={<API className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<API />}
     href="/bitcoin/ordinals/api"
     title="Ordinals API"
     description="Fetch on-chain data for Ordinals and meta-protocols with our hosted API."
   />
   <SmallCard
-    className='group space-y-3'
-    icon={<Play className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Play />}
     href="/ordinals/explorer"
     title="Explorer"
     description="View on-chain data for Ordinals and meta-protocols with our explorer."
@@ -91,8 +88,7 @@ import heroImage from '@/public/bitcoin-hero.svg';
 
 <Cards>
   <SmallCard
-    className='group space-y-3'
-    icon={<API className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<API />}
     href="/bitcoin/runes/api"
     title="Runes API"
     description="Interact with the Runes protocol from your backend via our hosted API."