Update docs generation (#1280)

Add tailwind css mdx generation and update README.md

README.md

@@ -1,30 +1,43 @@
-#
-<p align="center">
+<div id="logo" align="center">
   <a href="https://www.nativelink.com">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tracemachina/nativelink/main/docs/src/assets/logo-dark.svg"/>
-      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tracemachina/nativelink/main/docs/src/assets/logo-light.svg"/>
-      <img alt="NativeLink" src="https://raw.githubusercontent.com/tracemachina/nativelink/main/docs/src/assets/logo-light.svg"/>
+      <source media="(prefers-color-scheme: dark)" srcset="docs/src/assets/logo-dark.svg" />
+      <source media="(prefers-color-scheme: light)" srcset="docs/src/assets/logo-light.svg" />
+      <img alt="NativeLink" src="docs/src/assets/logo-light.svg" width="376" height="100" />
     </picture>
   </a>
-</p>
 
-[![Homepage](https://img.shields.io/badge/Homepage-8A2BE2)](https://nativelink.com)
-[![GitHub stars](https://img.shields.io/github/stars/tracemachina/nativelink?style=social)](https://github.com/TraceMachina/nativelink)
-[![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/TraceMachina/nativelink/badge)](https://securityscorecards.dev/viewer/?uri=github.com/TraceMachina/nativelink)
-[![OpenSSF Best Practices](https://www.bestpractices.dev/projects/8050/badge)](https://www.bestpractices.dev/projects/8050)
-[![Slack](https://img.shields.io/badge/slack--channel-blue?logo=slack)](https://nativelink.slack.com/join/shared_invite/zt-281qk1ho0-krT7HfTUIYfQMdwflRuq7A#/shared-invite/email)
-[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
+  <br />
+</div>
+
+<div id="description" align="center">
+  enter the shipstorm
+</div>
+
+<br />
+
+
+<div id="badges" align="center">
+
+  [![Homepage](https://img.shields.io/badge/Homepage-8A2BE2)](https://nativelink.com)
+  [![GitHub stars](https://img.shields.io/github/stars/tracemachina/nativelink?style=social)](https://github.com/TraceMachina/nativelink)
+  [![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/TraceMachina/nativelink/badge)](https://securityscorecards.dev/viewer/?uri=github.com/TraceMachina/nativelink)
+  [![OpenSSF Best Practices](https://www.bestpractices.dev/projects/8050/badge)](https://www.bestpractices.dev/projects/8050)
+  [![Slack](https://img.shields.io/badge/slack--channel-blue?logo=slack)](https://nativelink.slack.com/join/shared_invite/zt-281qk1ho0-krT7HfTUIYfQMdwflRuq7A#/shared-invite/email)
+  [![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
+</div>
 
 ## What's NativeLink?
 
 NativeLink is an efficient, high-performance build cache and remote execution system that accelerates software compilation and testing while reducing infrastructure costs. It optimizes build processes for projects of all sizes by intelligently caching build artifacts and distributing tasks across multiple machines.
 
 NativeLink is trusted in production environments to reduce costs and developer iteration times--handling over **one billion requests** per month for its customers, including large corporations such as **Samsung**.
 
-<a href="https://www.youtube.com/watch?v=WLpqFuyLMUQ">
-    <img src="https://trace-github-resources.s3.us-east-2.amazonaws.com/harper-90-thumbnail.webp" alt="NativeLink Explained in 90 seconds" loading="lazy" width="480" height="360" />
-</a>
+<p align="center">
+  <a href="https://www.youtube.com/watch?v=WLpqFuyLMUQ">
+      <img src="https://trace-github-resources.s3.us-east-2.amazonaws.com/harper-90-thumbnail.webp" alt="NativeLink Explained in 90 seconds" loading="lazy" width="480" />
+  </a>
+</p>
 
 ## 🔑 Key Features
 

docs/astro.config.ts

@@ -4,14 +4,14 @@ import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
 import starlight from "@astrojs/starlight";
 import deno from "@deno/astro-adapter";
+import tailwindcss from "@tailwindcss/vite";
 // import partytown from "@astrojs/partytown";
 
 import { rehypeHeadingIds } from "@astrojs/markdown-remark";
 import { rehypeMermaid } from "@beoe/rehype-mermaid"; // "rehype-mermaid";
-import tailwindcss from "@tailwindcss/vite";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
-import { starlightConfig } from "./starlight.conf.ts";
-// import { default as playformCompress } from "@playform/compress";
+
+import { starlightConfig } from "./starlight.conf";
 
 // https://astro.build/config
 export default defineConfig({

docs/biome.json

@@ -14,8 +14,11 @@
     "rules": {
       "all": true,
       "style": {
-        "useNamingConvention": "off",
-        "noDefaultExport": "off"
+        "useBlockStatements": "error",
+        "useShorthandArrayType": "error",
+        "noShoutyConstants": "warn",
+        "noDefaultExport": "off",
+        "useNamingConvention": "off"
       }
     }
   },

docs/package.json

@@ -6,9 +6,9 @@
     "sync": "astro sync",
     "astro": "astro",
     "biome": "biome",
-    "docs": "bun run docs.build && bun run docs.generate",
-    "docs.build": "cd .. && unset TMPDIR TMP; bazelisk build nativelink-config:docs_json && cd docs && bun run src/utils/metaphase_aot.ts",
-    "docs.generate": "bun run src/utils/md_to_mdx_aot.ts",
+    "docs": "bun run build.docs && bun run generate.docs",
+    "build.docs": "cd .. && unset TMPDIR TMP; bazelisk build nativelink-config:docs_json && cd docs && bun run src/utils/metaphase_aot.ts",
+    "generate.docs": "bun run src/utils/md_to_mdx_aot.ts",
     "build": "bun fix && astro build",
     "check": "biome ci . && astro check",
     "dev": "astro dev",
@@ -24,19 +24,19 @@
     "setup": "bun install && bun run deno install -Arf jsr:@deno/deployctl@1.12.0"
   },
   "dependencies": {
-    "@astrojs/check": "^0.7.0",
+    "@astrojs/check": "0.9.3",
     "@astrojs/deno": "5.0.1",
-    "@astrojs/markdown-remark": "^5.1.0",
-    "@astrojs/partytown": "^2.1.1",
+    "@astrojs/markdown-remark": "5.2.0",
+    "@astrojs/partytown": "2.1.2",
     "@astrojs/sitemap": "^3.1.6",
-    "@astrojs/starlight": "^0.25.5",
+    "@astrojs/starlight": "0.27.0",
     "@beoe/pan-zoom": "^0.0.3",
     "@beoe/rehype-mermaid": "^0.0.1",
     "@deno/astro-adapter": "^0.1.3",
-    "@tailwindcss/vite": "^4.0.0-alpha.19",
-    "astro": "^4.5.12",
+    "@tailwindcss/vite": "^4.0.0-alpha.23",
+    "astro": "4.15.4",
     "rehype-mermaid": "^2.1.0",
-    "tailwindcss": "^4.0.0-alpha.19"
+    "tailwindcss": "^4.0.0-alpha.23"
   },
   "devDependencies": {
     "@bazel/bazelisk": "^1.19.0",

docs/src/styles/custom.css

@@ -18,3 +18,52 @@ html[data-theme="dark"] .beoe-light {
 html {
   scroll-behavior: smooth;
 }
+
+.buttons {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.buttons button {
+  background-color: #4A90E2; /* A nice blue color */
+  color: white;
+  font-size: 18px;
+  font-weight: bold;
+  border: none;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  cursor: pointer;
+  transition: transform 0.2s ease, background-color 0.2s ease;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.buttons button:hover {
+  background-color: #357ABD; /* Darker blue on hover */
+  transform: scale(1.1);
+}
+
+.buttons button:active {
+  background-color: #2C6BA1; /* Even darker blue on active */
+  transform: scale(1.05);
+}
+
+.buttons button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.5);
+}
+
+.buttons button:disabled {
+  background-color: #B0BEC5; /* Grey color for disabled state */
+  cursor: not-allowed;
+  transform: none;
+}
+
+.buttons button:disabled:hover {
+  transform: none;
+}

docs/src/styles/tailwind.css

@@ -1,4 +1,26 @@
-/* @import "tailwindcss"; */
+@import "tailwindcss";
+
+a {
+  @apply underline;
+}
+
+ /* Header Links and Sidebar classes generated by astro */
+a.astro-3ii7xxms,
+a.astro-vtgkq7vy {
+  @apply no-underline;
+}
+
+#logo {
+  @apply flex justify-center items-center;
+}
+
+#description {
+  @apply text-lg font-semibold;
+}
+
+#badges {
+  @apply flex-wrap gap-0.5 md:px-20;
+}
 
 /* @theme {
   --color-primaryColor: rgb(99, 102, 241);