Updated UI and AI in search (#293)

* Merge branch 'heroku-migration-video-blog' of https://github.com/DefangLabs/defang-docs into heroku-migration-video-blog

* style: adjust heading sizes and fix breadcrumb icon display in docs theme

* spruce up the docs

* feat: integrate Algolia search and improve code block styling in docs

* feat: update Algolia search config and button hover states

* search and ai in docs

* upgrade node

* rm shadcn content

* rm unnecessary tests

* update node in test build

* rm playwright

* rm test result dir

* rm all refs to testing and cleanup extra line

* fix: update search tracking to use input event and add underline style to doc links

Author: raphaeltm

.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

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',
       {