Docs refresh with Astro

.bazelignore

@@ -65,4 +65,5 @@ plugins/reference-assets/mocks/node_modules
 tools/storybook/node_modules
 tools/components/node_modules
 tools/mocks/node_modules
-docs/site/node_modules
+docs/site/node_modules
+docs/astro/node_modules

docs/site/.gitignore

@@ -0,0 +1 @@
+.astro

docs/site/BUILD

@@ -1,118 +1,59 @@
 load("@npm//:defs.bzl", "npm_link_all_packages")
-load("@npm//:webpack-cli/package_json.bzl", webpack_bin = "bin")
-load("@npm//:webpack-dev-server/package_json.bzl", webpack_dev_server_bin = "bin")
+load("@npm//:astro/package_json.bzl", astro_bin = "bin")
 
 npm_link_all_packages(
     name = "node_modules",
 )
 
 srcs = glob([
     "public/**/*",
-    "pages/**/*",
-    "styles/*",
-    "app/**/*",
-    "components/**/*",
-    "plugins/*",
-    "utils/*",
-    "config/*",
+    "src/**/*",
 ]) + [
     "package.json",
     "tsconfig.json",
-    "webpack.config.ts",
+    "astro.config.mjs",
+    "tailwind.config.mjs",
 ]
 
 build_deps = [
     "//:typings",
-    "//:node_modules/webpack",
-    "//:node_modules/ts-loader",
-    "//:node_modules/ts-node",
-    "//:node_modules/html-webpack-plugin",
-    "//:node_modules/css-loader",
-    "//:node_modules/style-loader",
-    "//:node_modules/postcss-loader",
-    "//:node_modules/babel-loader",
-    "//:node_modules/@babel/preset-env",
-    "//:node_modules/@babel/preset-react",
-    "//:node_modules/copy-webpack-plugin",
-    "//:node_modules/terser-webpack-plugin",
-]
-
-deps = [
-    ":node_modules/@player-ui/react",
-    ":node_modules/@player-ui/reference-assets-plugin-react",
-    ":node_modules/@player-ui/asset-provider-plugin-react",
-    "//:node_modules/typescript",
-    "//:node_modules/tslib",
-    "//:node_modules/@types/react",
-    "//:node_modules/@types/node",
-    "//:node_modules/tailwindcss",
-    "//:node_modules/tailwindcss-animate",
-    "//:node_modules/postcss",
-    "//:node_modules/autoprefixer",
-    "//:node_modules/@docsearch/react",
-    "//:node_modules/@docsearch/css",
-    "//:node_modules/@radix-ui/react-label",
-    "//:node_modules/@radix-ui/react-separator",
-    "//:node_modules/@radix-ui/react-slot",
-    "//:node_modules/class-variance-authority",
-    "//:node_modules/clsx",
-    "//:node_modules/@types/react-dom",
-    "//:node_modules/react-router",
-    "//:node_modules/react-router-dom",
-    "//:node_modules/path-browserify",
-    "//:node_modules/@types/path-browserify",
-    "//:node_modules/lucide-react",
-    "//:node_modules/tailwind-merge",
-    "//:node_modules/lunr",
-    "//:node_modules/@types/lunr",
-    "//:node_modules/globby",
+    "//:node_modules/@types/stringify-object",
+    "//:node_modules/@astrojs/starlight",
+    "//:node_modules/@astrojs/tailwind",
+    "//:node_modules/@astrojs/starlight-tailwind",
+    "//:node_modules/rehype-mermaid",
+    "//:node_modules/astro",
+    "//:node_modules/@astrojs/react",
     "//:node_modules/react",
     "//:node_modules/react-dom",
-    "//:node_modules/null-loader",
-    "//:node_modules/@chakra-ui/react",
-    "//:node_modules/@chakra-ui/skip-nav",
-    "//:node_modules/@chakra-ui/icons",
-    "//:node_modules/react-icons",
-    "//:node_modules/@mdx-js/loader",
-    "//:node_modules/@mdx-js/react",
-    "//:node_modules/@types/mdx-js__react",
-    "//:node_modules/react-syntax-highlighter",
-    "//:node_modules/@types/react-syntax-highlighter",
-    "//:node_modules/remark",
-    "//:node_modules/remark-html",
-    "//:node_modules/remark-smartypants",
-    "//:node_modules/rehype-slug",
-    "//:node_modules/rehype-autolink-headings",
-    "//:node_modules/remove-markdown",
-    "//:node_modules/github-slugger",
-    "//:node_modules/gray-matter",
-    # "//:node_modules/nextjs-google-analytics",
+    "//:node_modules/daisyui",
+    "//:node_modules/tailwindcss",
+    "//:node_modules/sharp",
+    "//:node_modules/@monaco-editor/react",
+    "//:node_modules/json5",
+    "//:node_modules/stringify-object",
+    "//:node_modules/esbuild-wasm",
+    "//:node_modules/@player-tools/dsl",
+    "//:node_modules/@astrojs/starlight-docsearch",
+    ":node_modules/@player-ui/player",
+    ":node_modules/@player-ui/react",
+    ":node_modules/@player-ui/reference-assets-plugin-components",
+    ":node_modules/@player-ui/reference-assets-plugin-react",
 ]
 
-webpack_bin.webpack_cli(
+astro_bin.astro(
     name = "site",
-    srcs = srcs + deps + build_deps,
-    args = [
-        "build",
-    ],
-    chdir = "docs/site",
-    env = {
-        "NODE_OPTIONS": "--loader ts-node/esm",
-        "NODE_ENV": "production",
-    },
+    srcs = srcs + build_deps,
+    args = ["build"],
+    chdir = package_name(),
     out_dirs = ["dist"],
-    visibility = ["//visibility:public"],
 )
 
-webpack_dev_server_bin.webpack_dev_server_binary(
-    name = "start",
-    args = [],
+astro_bin.astro_binary(
+    name = "dev",
+    args = ["dev"],
     chdir = package_name(),
-    data = srcs + deps + build_deps,
-    env = {
-        "NODE_OPTIONS": "--loader ts-node/esm",
-        "NODE_ENV": "development",
-    },
+    data = srcs + build_deps,
     tags = [
         "ibazel_notify_changes",
     ],

docs/site/astro.config.mjs

@@ -0,0 +1,127 @@
+import { defineConfig } from "astro/config";
+import tailwind from "@astrojs/tailwind";
+import starlight from "@astrojs/starlight";
+import rehypeMermaid from "rehype-mermaid";
+import react from "@astrojs/react";
+import starlightDocSearch from "@astrojs/starlight-docsearch";
+
+export const BASE_PREFIX =
+  process.env.NODE_ENV === "production" ? "DOCS_BASE_PATH" : undefined;
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    react(),
+    tailwind({
+      applyBaseStyles: false,
+    }),
+    starlight({
+      title: "Player",
+      logo: {
+        dark: "./src/assets/logo/logo-dark-large.png",
+        light: "./src/assets/logo/logo-light-large.png",
+        replacesTitle: true,
+      },
+      social: {
+        github: "https://github.com/player-ui/player",
+      },
+      editLink: {
+        baseUrl: "https://github.com/player-ui/player/edit/main/docs/site",
+      },
+      customCss: ["./src/styles/custom.css", "./src/tailwind.css"],
+      components: {
+        Sidebar: "./src/components/Sidebar.astro",
+        SocialIcons: "./src/components/NavBar.astro",
+      },
+      plugins: [
+        starlightDocSearch({
+          appId: "OX3UZKXCOH",
+          apiKey: "ALGOLIA_SEARCH_API_KEY",
+          indexName: "player-ui",
+        }),
+      ],
+      sidebar: [
+        {
+          label: "Player",
+          items: [
+            {
+              label: "Player",
+              autogenerate: { directory: "player" },
+            },
+            {
+              label: "Guides",
+              autogenerate: { directory: "guides" },
+            },
+            {
+              label: "Content",
+              autogenerate: { directory: "content" },
+            },
+            {
+              label: "Assets",
+              autogenerate: { directory: "assets" },
+            },
+            {
+              label: "Tools",
+              autogenerate: { directory: "tools" },
+            },
+            {
+              label: "XLR",
+              autogenerate: { directory: "xlr" },
+            },
+          ],
+        },
+        {
+          label: "Plugins",
+          items: [
+            {
+              label: "Plugins",
+              items: [
+                {
+                  label: "Plugins Overview",
+                  slug: "plugins",
+                },
+                {
+                  label: "Android/JVM Plugins",
+                  autogenerate: { directory: "plugins/android" },
+                },
+                {
+                  label: "Core Plugins",
+                  autogenerate: { directory: "plugins/core" },
+                },
+                {
+                  label: "iOS Plugins",
+                  autogenerate: { directory: "plugins/iOS" },
+                },
+                {
+                  label: "React Plugins",
+                  autogenerate: { directory: "plugins/react" },
+                },
+                {
+                  label: "Multiplatform Plugins",
+                  autogenerate: { directory: "plugins/multiplatform" },
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "Tools",
+          items: [
+            {
+              label: "View AST Explorer",
+              link: "/tools/view-ast-explorer",
+            },
+            {
+              label: "DSL Content Playground",
+              link: "/tools/dsl-content-playground",
+            },
+          ],
+        },
+      ],
+    }),
+  ],
+  base: BASE_PREFIX,
+  markdown: {
+    rehypePlugins: [[rehypeMermaid, { strategy: "img-svg", dark: true }]],
+  },
+});