Website design

.gitignore

@@ -12,3 +12,4 @@ packages/*/*.tsbuildinfo
 coverage/
 .vscode/
 .idea/
+.gstack/

package.json

@@ -32,6 +32,7 @@
     "prepare": "husky || true"
   },
   "dependencies": {
+    "@lobehub/icons-static-svg": "^1.91.0",
     "ejs": "^3.1.10",
     "express": "^4.19.2",
     "js-yaml": "^4.1.0",

src/build/build.ts

@@ -21,6 +21,7 @@ import { modelId, type Model } from "../schema/model.js";
 import { buildModelJsonSchema } from "../schema/generate.js";
 import { bundleClientScript, compileStyles, copyStaticAssets } from "./assets.js";
 import { renderIndex } from "./render.js";
+import { renderApiPage } from "./render-api.js";
 import { renderGlossaryPage } from "./render-glossary.js";
 import { renderModelPage } from "./render-model.js";
 import { renderProviderPage } from "./render-provider.js";
@@ -93,6 +94,7 @@ async function writeHtmlPages(models: Model[]): Promise<void> {
   }
 
   await fs.writeFile(path.join(DIST_DIR, "glossary.html"), await renderGlossaryPage(models), "utf8");
+  await fs.writeFile(path.join(DIST_DIR, "api.html"), await renderApiPage(models), "utf8");
 }
 
 async function writeApiIndex(modelCount: number): Promise<void> {

src/build/render-api.ts

@@ -0,0 +1,28 @@
+import path from "node:path";
+import ejs from "ejs";
+import { VIEWS_DIR } from "../data/paths.js";
+import { SITE_NAME, SITE_URL } from "../data/site.js";
+import { absolute } from "../data/urls.js";
+import { type Model } from "../schema/model.js";
+import { hubLinks, renderShell, viewHelpers } from "./render.js";
+
+const API_TITLE = `API documentation · ${SITE_NAME}`;
+const API_DESCRIPTION =
+  "How to use the modelparams.dev JSON API, npm package, and provider logos. Static, CORS-enabled, served from the edge.";
+
+export async function renderApiPage(allModels: Model[]): Promise<string> {
+  const body = await ejs.renderFile(path.join(VIEWS_DIR, "api.ejs"), {
+    helpers: viewHelpers,
+  });
+
+  return renderShell(
+    {
+      title: API_TITLE,
+      description: API_DESCRIPTION,
+      canonicalUrl: absolute(SITE_URL, "/api"),
+      structuredData: "{}",
+      providerHubs: hubLinks(allModels),
+    },
+    body,
+  );
+}

src/build/render-model.ts

@@ -55,6 +55,7 @@ export async function renderModelPage(model: Model, allModels: Model[]): Promise
     modelName: modelLabel(model),
     providerPath: providerPagePath(model.provider),
     jsonPath: modelJsonPath(model),
+    modelJson: JSON.stringify({ $schema: "https://modelparams.dev/api/v1/schema.json", ...model }, null, 2),
     isSubscription: model.authType === "subscription",
   });
 

src/build/render.ts

@@ -6,6 +6,8 @@
   authLabel,
   conditionIcon,
   modelLabel,
+  paramGroupColor,
+  paramGroupColor,
   paramGroupIcon,
   paramGroupLabel,
   paramLabel,
@@ -28,6 +30,7 @@
   modelLabel,
   providerLabel,
   authLabel,
+  paramGroupColor,
   paramGroupLabel,
   paramGroupIcon,
   paramLabel,
@@ -42,13 +45,17 @@
 export interface HubLink {
   href: string;
   label: string;
+  provider: string;
+  count: number;
 }
 
 /** Sitewide footer links to each provider hub, ordered by model count. */
 export function hubLinks(models: Model[]): HubLink[] {
   return buildProviderFacets(models).map((facet) => ({
     href: providerPagePath(facet.provider),
     label: providerLabel(facet.provider),
+    provider: facet.provider,
+    count: facet.count,
   }));
 }
 
@@ -71,6 +78,7 @@
     structuredData: meta.structuredData,
     ogImageUrl: absolute(SITE_URL, OG_IMAGE_PATH),
     providerHubs: meta.providerHubs,
+    helpers: viewHelpers,
     usageGuide: usageGuideMarkdown(SITE_URL),
     initialThemeClass: meta.initialThemeClass ?? "",
     analytics: meta.analytics ?? false,