Responsive header (#4800)

Progress for #2564 Made the header responsive. Fixed up some styles issues/improved a few things Added tailwind.css to allow some simpler responsive based css class utils to be used instead of having to repeat the common things.
microsoft · Oct 21, 2024 · 1a27660 · 1a27660
1 parent a8c67ff
commit 1a27660
Show file tree

Hide file tree

Showing 20 changed files with 573 additions and 279 deletions.
diff --git a/packages/website-astro/astro.config.mjs b/packages/website-astro/astro.config.mjs
@@ -9,6 +9,8 @@ import rehypeMermaid from "rehype-mermaid";
 import remarkHeadingID from "remark-heading-id";
 import { resolveSideBars } from "./sidebars";
 
+import tailwind from "@astrojs/tailwind";
+
 const base = process.env.TYPESPEC_WEBSITE_BASE_PATH ?? "/";
 
 const grammarPath = resolve(import.meta.dirname, "../../grammars/typespec.json");
@@ -56,6 +58,7 @@ export default defineConfig({
       plugins: [],
     }),
     react(),
+    tailwind({ applyBaseStyles: false }),
   ],
   markdown: {
     // @ts-expect-error wrong type

diff --git a/packages/website-astro/package.json b/packages/website-astro/package.json
@@ -20,6 +20,8 @@
     "@astrojs/check": "^0.9.4",
     "@astrojs/react": "^3.6.2",
     "@astrojs/starlight": "^0.28.3",
+    "@astrojs/starlight-tailwind": "^2.0.3",
+    "@astrojs/tailwind": "^5.1.2",
     "@docsearch/css": "^3.6.2",
     "@docsearch/js": "^3.6.2",
     "@expressive-code/core": "^0.35.6",
@@ -35,6 +37,7 @@
     "react": "~18.3.1",
     "react-dom": "~18.3.1",
     "sharp": "^0.33.5",
+    "tailwindcss": "^3.4.14",
     "typescript": "~5.6.3"
   },
   "devDependencies": {

diff --git a/packages/website-astro/src/components/editor-tabs.astro b/packages/website-astro/src/components/editor-tabs.astro
@@ -0,0 +1,36 @@
+---
+import { Tabs } from "@astrojs/starlight/components";
+---
+
+<style>
+  .editor-style-tabs :global(> starlight-tabs .tablist-wrapper > [role="tablist"]) {
+    margin: 0;
+    border: 0;
+    box-shadow: var(--shadow8);
+  }
+  .editor-style-tabs :global(> starlight-tabs [role="tab"]) {
+    background: var(--colorNeutralBackground2);
+    padding: calc(var(--ec-uiPadBlk) + var(--ec-frm-edActTabIndHt)) var(--ec-uiPadInl);
+    border: 0;
+    border-top: 1px solid transparent;
+  }
+
+  .editor-style-tabs :global(> starlight-tabs [role="tab"][aria-selected="true"]) {
+    background: var(--ec-frm-edBg);
+    box-shadow: var(--shadow2);
+    border-top: 1px solid var(--colorBrandForeground1);
+  }
+  .editor-style-tabs :global(> starlight-tabs [role="tabpanel"]) {
+    margin: 0;
+    border-top: 1px solid var(--colorNeutralStroke3);
+  }
+
+  .editor-style-tabs :global(> starlight-tabs .tab) {
+    margin: 0;
+  }
+</style>
+<div class="editor-style-tabs">
+  <Tabs>
+    <slot />
+  </Tabs>
+</div>
diff --git a/packages/website-astro/src/components/fluent-img.astro b/packages/website-astro/src/components/fluent-img.astro
@@ -7,7 +7,7 @@ export interface Props extends HTMLAttributes<"img"> {
   name: FluentImageName;
 }
 
-const { name, alt, ...rest } = Astro.props;
+const { name, class: cls, alt, ...rest } = Astro.props;
 const srcLight = baseUrl(`/img/fluent/${name}-l-standard-128x128.png`);
 const srcDark = baseUrl(`/img/fluent/${name}-d-standard-128x128.png`);
 ---
@@ -21,5 +21,5 @@ const srcDark = baseUrl(`/img/fluent/${name}-d-standard-128x128.png`);
   }
 </style>
 
-<img class="light" src={srcLight} alt={alt ?? ""} {...rest} />
-<img class="dark" src={srcDark} alt={alt ?? ""} {...rest} />
+<img class:list={["light", cls]} src={srcLight} alt={alt ?? ""} {...rest} />
+<img class:list={["dark", cls]} src={srcDark} alt={alt ?? ""} {...rest} />