add a simple demo of how to talk to the iSamples API

Author: rdhyee

tutorials/index.qmd

@@ -4,3 +4,64 @@ title: "Tutorials: Overview"
 
 Here's where we park our various tutorials!
 
+Get the OpenAPI spec.
+
+```{ojs}
+//| echo: true
+
+// Get the OpenAPI specification and display detailed endpoint information
+viewof apiEndpointDetails = {
+  // Show loading indicator
+  const loadingElement = html`<div>Loading API endpoints...</div>`;
+  document.body.appendChild(loadingElement);
+
+  try {
+    const OPENAPI_URL = 'https://central.isample.xyz/isamples_central/openapi.json';
+
+    // Fetch the OpenAPI spec
+    const response = await fetch(OPENAPI_URL);
+    if (!response.ok) throw new Error(`Failed to fetch API spec: ${response.status}`);
+
+    const apiSpec = await response.json();
+
+    // Extract detailed information about each endpoint
+    const endpointDetails = [];
+
+    for (const [path, pathMethods] of Object.entries(apiSpec.paths)) {
+      for (const [method, details] of Object.entries(pathMethods)) {
+        endpointDetails.push({
+          endpoint: path,
+          method: method.toUpperCase(),
+          summary: details.summary || '',
+          operationId: details.operationId || '',
+          tags: (details.tags || []).join(', '),
+          parameters: (details.parameters || [])
+            .map(p => `${p.name} (${p.required ? 'required' : 'optional'})`)
+            .join(', ')
+        });
+      }
+    }
+
+    // Create a table with the detailed endpoint information
+    return Inputs.table(
+      endpointDetails,
+      {
+        label: "iSamples API Endpoints Details",
+        width: {
+          endpoint: 150,
+          method: 80,
+          summary: 200,
+          operationId: 200,
+          tags: 100,
+          parameters: 300
+        }
+      }
+    );
+  } catch (error) {
+    return html`<div style="color: red">Error fetching API endpoints: ${error.message}</div>`;
+  } finally {
+    // Remove loading indicator
+    loadingElement.remove();
+  }
+}
+```