Add website build to CI (#4994)

Using the same steps as what is used in the github action to publish it.

.github/workflows/website-gh-pages.yml

@@ -33,7 +33,6 @@ jobs:
 
       - name: Install browsers
         run: pnpm exec playwright install
-        working-directory: packages/playground-website
 
       - name: Build
         run: pnpm --filter "@typespec/website..." run build

eng/tsp-core/pipelines/jobs/website.yml

@@ -0,0 +1,11 @@
+steps:
+  - template: /eng/tsp-core/pipelines/templates/install.yml
+
+  - script: pnpm exec playwright install
+    displayName: Install browsers
+
+  - script: pnpm --filter "@typespec/website..." run build
+    displayName: Build
+
+  - script: node eng/common/scripts/check-for-changed-files.js
+    displayName: Check Git Status For Changed Files

eng/tsp-core/pipelines/stages/ci-stages.yml

@@ -61,6 +61,16 @@ stages:
               nodeVersion: $(nodeVersion)
               os: linux
 
+      - job: website
+        displayName: Website
+        pool:
+          name: $(LINUXPOOL)
+          image: $(LINUXVMIMAGE)
+          os: linux
+
+        steps:
+          - template: /eng/tsp-core/pipelines/jobs/website.yml
+
       - template: /eng/tsp-core/pipelines/jobs/publish-artifacts.yml
       - template: /eng/tsp-core/pipelines/jobs/e2e.yml
 

package.json

@@ -57,6 +57,7 @@
     "eslint-plugin-vitest": "^0.5.4",
     "micromatch": "^4.0.8",
     "picocolors": "~1.1.0",
+    "playwright": "^1.48.2",
     "prettier": "~3.3.3",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-organize-imports": "~4.1.0",

packages/tspd/package.json

@@ -24,16 +24,16 @@
   "main": "./dist/src/index.js",
   "exports": {
     ".": {
-      "types": "./dist/src/index.d.ts",
-      "default": "./dist/src/index.js"
+      "import": "./dist/src/index.js"
     },
     "./ref-doc": {
-      "types": "./dist/src/ref-doc/index.d.ts",
-      "default": "./dist/src/ref-doc/index.js"
+      "import": "./dist/src/ref-doc/index.js"
     },
     "./ref-doc/emitters/docusaurus": {
-      "types": "./dist/src/ref-doc/emitters/docusaurus.d.ts",
-      "default": "./dist/src/ref-doc/emitters/docusaurus.js"
+      "import": "./dist/src/ref-doc/emitters/docusaurus.js"
+    },
+    "./ref-doc/emitters/starlight": {
+      "import": "./dist/src/ref-doc/emitters/starlight.js"
     }
   },
   "engines": {

packages/tspd/src/ref-doc/emitters/starlight.ts

@@ -20,7 +20,7 @@ import { MarkdownRenderer, groupByNamespace } from "./markdown.js";
  * Render doc to a markdown using docusaurus addons.
  */
 export function renderToAstroStarlightMarkdown(refDoc: TypeSpecRefDoc): Record<string, string> {
-  const renderer = new DocusaurusRenderer(refDoc);
+  const renderer = new StarlightRenderer(refDoc);
   const files: Record<string, string> = {
     "index.mdx": renderIndexFile(renderer, refDoc),
   };
@@ -52,7 +52,7 @@ export function renderToAstroStarlightMarkdown(refDoc: TypeSpecRefDoc): Record<s
   return files;
 }
 
-function renderIndexFile(renderer: DocusaurusRenderer, refDoc: TypeSpecLibraryRefDoc): string {
+function renderIndexFile(renderer: StarlightRenderer, refDoc: TypeSpecLibraryRefDoc): string {
   const content: MarkdownDoc = [
     "---",
     `title: Overview`,
@@ -97,7 +97,7 @@ export type DecoratorRenderOptions = {
 };
 
 export function renderDecoratorFile(
-  renderer: DocusaurusRenderer,
+  renderer: StarlightRenderer,
   refDoc: TypeSpecRefDocBase,
   options?: DecoratorRenderOptions,
 ): string | undefined {
@@ -118,7 +118,7 @@ export function renderDecoratorFile(
 }
 
 function renderInterfacesFile(
-  renderer: DocusaurusRenderer,
+  renderer: StarlightRenderer,
   refDoc: TypeSpecRefDoc,
 ): string | undefined {
   if (!refDoc.namespaces.some((x) => x.operations.length > 0 || x.interfaces.length > 0)) {
@@ -152,7 +152,7 @@ export type DataTypeRenderOptions = {
 };
 
 export function renderDataTypes(
-  renderer: DocusaurusRenderer,
+  renderer: StarlightRenderer,
   refDoc: TypeSpecRefDoc,
   options?: DataTypeRenderOptions,
 ): string | undefined {
@@ -193,7 +193,7 @@ export function renderDataTypes(
 }
 
 function renderEmitter(
-  renderer: DocusaurusRenderer,
+  renderer: StarlightRenderer,
   refDoc: TypeSpecLibraryRefDoc,
 ): string | undefined {
   if (refDoc.emitter?.options === undefined) {
@@ -209,7 +209,7 @@ function renderEmitter(
   return renderMarkdowDoc(content, 2);
 }
 function renderLinter(
-  renderer: DocusaurusRenderer,
+  renderer: StarlightRenderer,
   refDoc: TypeSpecLibraryRefDoc,
 ): string | undefined {
   if (refDoc.linter === undefined) {
@@ -225,7 +225,7 @@ function renderLinter(
   return renderMarkdowDoc(content, 2);
 }
 
-export class DocusaurusRenderer extends MarkdownRenderer {
+export class StarlightRenderer extends MarkdownRenderer {
   headingTitle(item: NamedTypeRefDoc): string {
     // Set an explicit anchor id.
     return `${inlinecode(item.name)} {#${item.id}}`;

website/.scripts/regen-compiler-docs.ts

@@ -1,10 +1,10 @@
 import { NodeHost, joinPaths, logDiagnostics } from "@typespec/compiler";
 import { generateJsApiDocs, resolveLibraryRefDocsBase } from "@typespec/tspd/ref-doc";
 import {
-  DocusaurusRenderer,
+  StarlightRenderer,
   renderDataTypes,
   renderDecoratorFile,
-} from "@typespec/tspd/ref-doc/emitters/docusaurus";
+} from "@typespec/tspd/ref-doc/emitters/starlight";
 
 import assert from "assert";
 import { writeFile } from "fs/promises";
@@ -15,7 +15,7 @@ export const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), "../.."
 
 const diagnostics = new Map();
 
-class CompilerDocusaurusRenderer extends DocusaurusRenderer {
+class CompilerRenderer extends StarlightRenderer {
   /**
    * @param {import("../../tspd/dist/src/ref-doc/types.js").RefDocEntity} type
    */
@@ -59,7 +59,7 @@ async function generateCompilerDocs() {
   });
   assert(results, "Unexpected ref doc should have been resolved for compiler.");
   const [refDoc, diagnostics] = results;
-  const renderer = new CompilerDocusaurusRenderer(refDoc as any);
+  const renderer = new CompilerRenderer(refDoc as any);
   const decoratorContent = renderDecoratorFile(renderer, refDoc, { title: "Built-in Decorators" });
   assert(decoratorContent, "Unexpected decorator file shouldn't be empty for compiler.");
   await writeFile(join(outputDir, "built-in-decorators.md"), decoratorContent);

website/src/content/docs/docs/standard-library/built-in-data-types.md

@@ -1,7 +1,5 @@
 ---
 title: "Built-in Data types"
-toc_min_heading_level: 2
-toc_max_heading_level: 3
 ---
 ## TypeSpec
 ### `Array` {#Array}