some more styles

Author: Ankcorn

src/components/CollapsibleSection.tsx

@@ -0,0 +1,28 @@
+import { type ReactNode, useState } from "react";
+
+interface CollapsibleSectionProps {
+	title: string;
+	children: ReactNode;
+	defaultOpen?: boolean;
+}
+
+export const CollapsibleSection = ({
+	title,
+	children,
+	defaultOpen = false,
+}: CollapsibleSectionProps) => {
+	const [isOpen, setIsOpen] = useState(defaultOpen);
+
+	return (
+		<div className="mb-4 rounded-lg border">
+			<button
+				onClick={() => setIsOpen(!isOpen)}
+				className="flex h-full w-full cursor-pointer items-center justify-between rounded-t-lg bg-gray-50 p-4 hover:bg-gray-100"
+			>
+				<h3 className="text-lg font-semibold">{title}</h3>
+				<span className="text-lg">{isOpen ? "▼" : "▶"}</span>
+			</button>
+			{isOpen && <span className="border-t">{children}</span>}
+		</div>
+	);
+};

src/pages/analytics/graphql-api/api/[name].astro

@@ -5,6 +5,7 @@ import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
 import SchemaViewer from "~/components/models/SchemaViewer.astro";
 import { Code } from "~/components";
 import { LinkButton } from "~/components";
+import { CollapsibleSection } from "~/components/CollapsibleSection";
 import {
 	GraphQLToJSONSchemaBuilder,
 	type Field,
@@ -59,7 +60,10 @@ const typescriptInput = await compile(
 	{ additionalProperties: false, bannerComment: "" },
 );
 
-const [group, queryName] = name.split(".");
+const [group, queryName] = name.split(".") as [
+	"account" | "zone" | "organization",
+	string,
+];
 const gqlQuery = graphQLJSONSchemaToExample(
 	`${group}s`,
 	queryName,
@@ -74,19 +78,26 @@ const gqlQuery = graphQLJSONSchemaToExample(
 >
 	<h2>{name.split(".").join(" ")}</h2>
 	<p>{query.description}</p>
-	<h3>Example</h3>
-	<LinkButton href={`/analytics/graphql-api/graphiql?query=${btoa(gqlQuery)}`}
-		>Open in GraphiQL</LinkButton
-	>
-	<Code code={gqlQuery} lang="graphql" />
-	<h3 id="Parameters">Parameters</h3>
-	<SchemaViewer schema={completeInputType} />
-	<h4>Typescript definition</h4>
-	<Code code={typescriptInput} lang="typescript" />
-	<h3 id="Output">Output</h3>
-	<SchemaViewer schema={completeResponseType} />
-	<h4>Typescript definition</h4>
-	<Code code={typescriptOutput} lang="typescript" />
+	<div class="mt-4">
+		<CollapsibleSection client:load title="Example GraphQL Query" defaultOpen>
+			<LinkButton
+				href={`/analytics/graphql-api/graphiql?query=${btoa(gqlQuery)}`}
+				>Open in GraphiQL</LinkButton
+			>
+			<Code code={gqlQuery} lang="graphql" />
+		</CollapsibleSection>
+
+		<CollapsibleSection client:load title="Parameters">
+			<SchemaViewer schema={completeInputType} />
+			<h4>Typescript definition</h4>
+			<Code code={typescriptInput} lang="typescript" />
+		</CollapsibleSection>
+		<CollapsibleSection client:load title="Output">
+			<SchemaViewer schema={completeResponseType} />
+			<h4>Typescript definition</h4>
+			<Code code={typescriptOutput} lang="typescript" />
+		</CollapsibleSection>
+	</div>
 </StarlightPage>
 
 <style>

src/pages/analytics/graphql-api/graphiql.astro

@@ -14,6 +14,7 @@ import "~/tailwind.css";
 		},
 	}}
 />
+
 <style>
 	:root {
 		--sl-content-width: 100% !important;

src/util/graphQLJSONSchemaToExample.ts

@@ -26,7 +26,6 @@ export function graphQLJSONSchemaToExample(
 	const outputSections = Object.keys(output.properties || {}).reduce(
 		(outputQuery, key) => {
 			const type = output.properties?.[key].type;
-			console.log(type);
 
 			let outputQueryType = "";
 			if (type === "object") {