Astro website migrate all components to astro components (#4710)

progress for #2564
- Get rid of fluent ui jsx apart from the playground as it cannot be SSr
with astro
- Use pure astro components for everything which force them to be fully
rendered on the UI

packages/website-astro/astro.config.mjs

@@ -1,13 +1,13 @@
 // @ts-check
 import react from "@astrojs/react";
 import starlight from "@astrojs/starlight";
+import astroExpressiveCode from "astro-expressive-code";
 import { defineConfig } from "astro/config";
 import { readFile } from "fs/promises";
 import { resolve } from "path";
 import rehypeMermaid from "rehype-mermaid";
 import remarkHeadingID from "remark-heading-id";
 import { resolveSideBars } from "./sidebars";
-import tspTryitCode from "./src/plugins/tsp-tryit-code";
 
 const base = process.env.TYPESPEC_WEBSITE_BASE_PATH ?? "/";
 
@@ -27,22 +27,16 @@ export default defineConfig({
   base,
   trailingSlash: "always",
   integrations: [
+    astroExpressiveCode(),
     starlight({
       title: "TypeSpec",
       sidebar: await resolveSideBars(),
       customCss: ["./src/css/custom.css"],
       components: {
         Header: "./src/components/header/header.astro",
+        PageFrame: "./src/components/starlight-overrides/PageFrame.astro",
       },
-      expressiveCode: {
-        themes: ["one-light", "one-dark-pro"],
-        styleOverrides: {
-          frames: {
-            frameBoxShadowCssValue: "",
-          },
-        },
-        plugins: [tspTryitCode(base + "playground/")],
-      },
+      expressiveCode: false, // defined directly above
       head: [
         {
           tag: "script",

packages/website-astro/ec.config.mjs

@@ -0,0 +1,49 @@
+// @ts-check
+import { addClassName } from "@expressive-code/core/hast";
+import { defineEcConfig } from "astro-expressive-code";
+import tspTryitCode from "./src/plugins/tsp-tryit-code.js";
+
+const base = process.env.TYPESPEC_WEBSITE_BASE_PATH ?? "/";
+
+export default defineEcConfig({
+  themeCssSelector: (theme, { styleVariants }) => {
+    // If one dark and one light theme are available, and the user has not disabled it,
+    // generate theme CSS selectors compatible with Starlight's dark mode switch
+    const baseTheme = styleVariants[0]?.theme;
+    const altTheme = styleVariants.find((v) => v.theme.type !== baseTheme?.type)?.theme;
+    if (theme === baseTheme || theme === altTheme) return `[data-theme='${theme.type}']`;
+    // Return the default selector
+    return `[data-theme='${theme.name}']`;
+  },
+  styleOverrides: {
+    // Starlight theme overrides
+    borderRadius: "0px",
+    borderWidth: "1px",
+    codePaddingBlock: "0.75rem",
+    codePaddingInline: "1rem",
+    codeFontFamily: "var(--__sl-font-mono)",
+    codeFontSize: "var(--sl-text-code)",
+    codeLineHeight: "var(--sl-line-height)",
+    uiFontFamily: "var(--__sl-font)",
+    textMarkers: {
+      lineDiffIndicatorMarginLeft: "0.25rem",
+      defaultChroma: "45",
+      backgroundOpacity: "60%",
+    },
+    frames: {
+      frameBoxShadowCssValue: "none",
+    },
+  },
+  plugins: [
+    {
+      name: "Starlight Plugin",
+      hooks: {
+        postprocessRenderedBlock: ({ renderData }) => {
+          addClassName(renderData.blockAst, "not-content");
+        },
+      },
+    },
+    // @ts-expect-error type version mismatch
+    tspTryitCode(base + "playground/"),
+  ],
+});

packages/website-astro/package.json

@@ -40,9 +40,10 @@
     "@types/react": "~18.3.11",
     "@types/react-dom": "~18.3.0",
     "@types/remark-heading-id": "^1.0.0",
-    "@typespec/playground-website": "workspace:*",
     "@typespec/internal-build-utils": "workspace:~",
+    "@typespec/playground-website": "workspace:*",
     "@typespec/website": "workspace:*",
+    "astro-expressive-code": "^0.37.0",
     "rehype-mermaid": "^3.0.0",
     "remark-heading-id": "^1.0.1",
     "rimraf": "~6.0.1"

packages/website-astro/src/components/asset-img.astro

@@ -0,0 +1,21 @@
+---
+/**
+ * Component for rendering an image resolving the relative path.
+ */
+import { baseUrl } from "@site/src/utils";
+import type { HTMLAttributes } from "astro/types";
+
+export interface AssetImgProps extends HTMLAttributes<"img"> {
+  src: string;
+}
+
+const { src, alt, ...rest } = Astro.props;
+---
+
+<img class="img" src={baseUrl(`/img/${src}`)} alt={alt ?? ""} {...rest} />
+
+<style>
+  .img {
+    display: block;
+  }
+</style>

packages/website-astro/src/components/button.astro

@@ -0,0 +1,67 @@
+---
+import Link from "./link.astro";
+
+export interface Props {
+  appearance?: "primary" | "outline";
+  as?: "a";
+  href: string;
+  className?: string;
+}
+const { href, className, appearance } = Astro.props;
+const appearanceCls = `appearance-${appearance ?? "primary"}`;
+---
+
+<style>
+  .button {
+    align-items: center;
+    box-sizing: border-box;
+    display: inline-flex;
+    justify-content: center;
+    text-decoration-line: none;
+    vertical-align: middle;
+    margin: 0px;
+    overflow: hidden;
+    background-color: var(--colorNeutralBackground1);
+    color: var(--colorNeutralForeground1);
+    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
+    font-family: var(--fontFamilyBase);
+    outline-style: none;
+    padding: 5px var(--spacingHorizontalM);
+    min-width: 96px;
+    border-radius: var(--borderRadiusMedium);
+    font-size: var(--fontSizeBase300);
+    font-weight: var(--fontWeightSemibold);
+    line-height: var(--lineHeightBase300);
+    transition-duration: var(--durationFaster);
+    transition-property: background, border, color;
+    transition-timing-function: var(--curveEasyEase);
+  }
+
+  .button:hover {
+    color: var(--colorNeutralForeground1);
+  }
+
+  .appearance-primary {
+    color: var(--colorNeutralForegroundOnBrand);
+    background-color: var(--colorBrandBackground);
+    border-color: transparent;
+  }
+
+  .appearance-primary:hover {
+    color: var(--colorNeutralForegroundOnBrand);
+    background-color: var(--colorBrandBackgroundHover);
+  }
+
+  .appearance-outline {
+    background-color: transparent;
+  }
+
+  .appearance-outline:hover {
+    background-color: var(--colorNeutralBackground1Hover);
+    border-color: var(--colorNeutralStroke1Hover);
+    color: var(--colorNeutralForeground1Hover);
+  }
+</style>
+<Link class:list={["button", appearanceCls, className]} href={href}>
+  <slot />
+</Link>

packages/website-astro/src/components/card.astro

@@ -0,0 +1,47 @@
+---
+export interface Props {
+  /** Should skip padding. */
+  noPadding?: boolean;
+  /** Should the background blend. */
+  blend?: boolean;
+
+  children?: React.ReactNode;
+  class?: string;
+}
+
+const { class: cls, noPadding, blend } = Astro.props;
+---
+
+<style>
+  .card {
+    border-radius: 22px;
+    position: relative;
+  }
+
+  .bg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 22px;
+    background-color: var(--colorNeutralBackground1);
+  }
+
+  .content {
+    position: relative;
+    z-index: 100;
+    padding: 20px;
+  }
+
+  .no-padding .content {
+    padding: 0px;
+  }
+
+  .blend > .bg {
+    opacity: 0.2;
+  }
+</style>
+
+<div class:list={["card", noPadding && "no-padding", blend && "blend", cls]}>
+  <div class="bg"></div>
+  <div class="content"><slot /></div>
+</div>