@lukoweb/apitogo-module-landing 0.1.121 → 0.1.129

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo-module-landing",
-  "version": "0.1.121",
+  "version": "0.1.129",
   "type": "module",
   "exports": {
     ".": "./src/index.tsx"
@@ -14,7 +14,7 @@
   "devDependencies": {
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "@lukoweb/apitogo": "0.1.121",
+    "@lukoweb/apitogo": "0.1.129",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "typescript": "5.9.3"

package/src/hooks/useGatewayActions.ts

@@ -0,0 +1,131 @@
+import type { ResolvedLandingContent } from "@lukoweb/apitogo";
+import { useAuth } from "@lukoweb/apitogo/hooks";
+import { type UseQueryResult, useQuery } from "@lukoweb/apitogo/react-query";
+
+declare const VITE_APITOGO_AUTHENTICATION_API_BASE_URL: string | undefined;
+declare const VITE_APITOGO_DEV_PORTAL_API_URL: string | undefined;
+
+type ApiShowcaseItem = NonNullable<
+  NonNullable<ResolvedLandingContent["apiShowcase"]>["items"]
+>[number];
+
+const PLACEHOLDER_HOST = "dp-example.azurecontainerapps.io";
+
+/** One operation of your API, as synced by the dev portal backend from the gateway. */
+export type GatewayAction = {
+  /** Stable key, e.g. `get:/orders/{id}`. */
+  actionKey: string;
+  /** Upper-case HTTP method, e.g. `GET`. */
+  method: string;
+  /** Path template, e.g. `/orders/{id}`. */
+  path: string;
+  /** True when the action can be called without an API key. */
+  isPublic: boolean;
+};
+
+export type GatewayActionCatalog = {
+  actions: GatewayAction[];
+  lastSyncedAtUtc: string | null;
+};
+
+/** Server-side filters for `GET /api/v1/actions`. All filters are combined with AND. */
+export type GatewayActionFilters = {
+  /** Only actions included in at least one active plan. */
+  inPlan?: boolean;
+  /** Only actions included in this plan SKU. */
+  plan?: string;
+  isPublic?: boolean;
+  method?: string;
+  pathPrefix?: string;
+  /** Max number of actions (server caps at 500). */
+  limit?: number;
+};
+
+export type UseGatewayActionsOptions = GatewayActionFilters & {
+  /** Set to false to skip the request (e.g. behind a feature flag). */
+  enabled?: boolean;
+};
+
+type DevPortalProviderData = { type?: string; apiBaseUrl?: string };
+
+const trimUrl = (url: string | undefined) =>
+  url?.trim().replace(/\/+$/, "") || undefined;
+
+const resolveEnvApiBaseUrl = () =>
+  trimUrl(
+    (typeof VITE_APITOGO_AUTHENTICATION_API_BASE_URL === "string"
+      ? VITE_APITOGO_AUTHENTICATION_API_BASE_URL
+      : undefined) ||
+      (typeof VITE_APITOGO_DEV_PORTAL_API_URL === "string"
+        ? VITE_APITOGO_DEV_PORTAL_API_URL
+        : undefined),
+  );
+
+const toSearchParams = (filters: GatewayActionFilters) =>
+  new URLSearchParams(
+    Object.entries(filters).flatMap(([key, value]) =>
+      value === undefined || value === "" ? [] : [[key, String(value)]],
+    ),
+  );
+
+/**
+ * Loads your API's gateway actions from the dev portal backend (`GET /api/v1/actions`).
+ *
+ * Runs in the browser only, so prerendered pages never bake in a stale list. Disabled in
+ * preview/demo mode or when no dev portal backend URL is configured — render a fallback
+ * list while `data` is undefined.
+ */
+export const useGatewayActions = ({
+  enabled = true,
+  ...filters
+}: UseGatewayActionsOptions = {}): UseQueryResult<GatewayActionCatalog> => {
+  const auth = useAuth();
+  const providerData = auth.providerData as DevPortalProviderData | null;
+  const apiBaseUrl =
+    (providerData?.type === "dev-portal"
+      ? trimUrl(providerData.apiBaseUrl)
+      : undefined) ?? resolveEnvApiBaseUrl();
+
+  const isLive =
+    Boolean(apiBaseUrl) &&
+    !apiBaseUrl?.includes(PLACEHOLDER_HOST) &&
+    auth.authMode !== "preview" &&
+    auth.isBackendAvailable !== false &&
+    auth.isDemoSession !== true;
+
+  const search = toSearchParams(filters).toString();
+
+  return useQuery<GatewayActionCatalog>({
+    queryKey: ["dev-portal-gateway-actions", apiBaseUrl, search],
+    enabled: enabled && isLive,
+    staleTime: 5 * 60 * 1000,
+    queryFn: async ({ signal }) => {
+      const response = await fetch(
+        `${apiBaseUrl}/api/v1/actions${search ? `?${search}` : ""}`,
+        { headers: { Accept: "application/json" }, signal },
+      );
+
+      if (!response.ok) {
+        throw new Error("Failed to load API actions.");
+      }
+
+      const body = (await response.json()) as Partial<GatewayActionCatalog>;
+      return {
+        actions: Array.isArray(body.actions) ? body.actions : [],
+        lastSyncedAtUtc: body.lastSyncedAtUtc ?? null,
+      };
+    },
+  });
+};
+
+/** Maps gateway actions to `ApiShowcaseSection` items. Pass `summaries` to label actions by key. */
+export const toApiShowcaseItems = (
+  actions: GatewayAction[],
+  summaries: Record<string, string> = {},
+): ApiShowcaseItem[] =>
+  actions.map((action) => ({
+    name: summaries[action.actionKey] ?? `${action.method} ${action.path}`,
+    method: action.method,
+    path: action.path,
+    summary: summaries[action.actionKey],
+  }));

package/src/index.tsx

@@ -30,3 +30,13 @@ export { FooterSection } from "./sections/FooterSection.js";
 export type { FooterSectionProps } from "./sections/FooterSection.js";
 export { CodeExampleCard } from "./sections/CodeExampleCard.js";
 export type { CodeExampleCardProps } from "./sections/CodeExampleCard.js";
+export {
+  toApiShowcaseItems,
+  useGatewayActions,
+} from "./hooks/useGatewayActions.js";
+export type {
+  GatewayAction,
+  GatewayActionCatalog,
+  GatewayActionFilters,
+  UseGatewayActionsOptions,
+} from "./hooks/useGatewayActions.js";

package/src/sections/StepsSection.tsx

@@ -29,7 +29,9 @@ export const StepsSection = ({
               <div className="font-mono text-[2rem] font-bold text-primary">
                 {item.step}
               </div>
-              <h3 className="mt-2 mb-1.5 text-lg font-semibold">{item.title}</h3>
+              <h3 className="mt-2 mb-1.5 text-lg font-semibold">
+                {item.title}
+              </h3>
               <p className="text-sm leading-relaxed text-muted-foreground">
                 {item.description}
               </p>