Updated UI and AI in search

.github/workflows/deploy.yml

@@ -35,7 +35,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           cache: npm
 
       - name: Install dependencies

.github/workflows/test-deploy.yml

@@ -15,7 +15,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           cache: npm
 
       - name: Install dependencies

.gitignore

@@ -23,3 +23,5 @@ defang
 samples
 /docs/samples.md
 /static/samples-v2.json
+playwright-report
+test-results

components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/css/custom.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

docs/intro/intro.mdx

@@ -9,11 +9,12 @@ import DocCardList from "@docusaurus/theme-classic/lib/theme/DocCardList";
 #  
 
 <div style={{textAlign: "center"}}>
-    <img src="/img/defang-logo.svg" alt="Defang Logo" style={{width: "200px", marginBottom: "2rem"}} />
+    <img src="/img/defang-logo.svg" alt="Defang Logo" className="w-48 mb-4 mx-auto" />
     <h1>Defang Documentation</h1>
     <p>
         Defang lets you take your app from Docker Compose to a secure and scalable deployment on your favorite cloud in minutes. Build cloud applications in any language and stack, deploy to your account on your favorite cloud with a single command, and iterate quickly with AI-assisted tooling.
     </p>
+    <div className="h-8"/>
     <h2>Getting Started</h2>
     <DocCardList
         items={[

docusaurus.config.js

@@ -1,6 +1,7 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 const { themes } = require('prism-react-renderer');
+const path = require('path');
 const lightCodeTheme = themes.github;
 const darkCodeTheme = themes.dracula;
 
@@ -105,7 +106,6 @@ const config = {
       },
     ],
   ],
-
   themeConfig: {
     image: '/img/defang-social-card-2.png',
     navbar: {
@@ -204,9 +204,40 @@ const config = {
       theme: lightCodeTheme,
       darkTheme: darkCodeTheme,
     },
+    algolia: {
+      // The application ID provided by Algolia
+      appId: 'O3VFCOSSZ6',
+
+      // Public API key: it is safe to commit it
+      apiKey: '43fd4ebb5bb9875aa8764793ff9a09ff',
+
+      indexName: 'prod_DOCS',
+
+      // Optional: see doc section below
+      contextualSearch: false,
+
+      // Optional: whether the insights feature is enabled or not on Docsearch (`false` by default)
+      insights: true,
+
+      // Optional: whether you want to use the new Ask AI feature (undefined by default)
+      askAi: 'MUO629LjH0L5',
+    },
   },
   plugins: [
-    require.resolve('docusaurus-lunr-search'),
+    async function shadcnTailwindPlugin() {
+      return {
+        name: 'defang-tailwind-shadcn',
+        configureWebpack() {
+          return {
+            resolve: {
+              alias: {
+                '@': path.resolve(__dirname, 'src'),
+              },
+            },
+          };
+        },
+      };
+    },
     [
       '@docusaurus/plugin-client-redirects',
       {