feat(docs): add get help button and mobile section

apps/docs/package.json

@@ -44,7 +44,7 @@
     "react-hook-form": "^7.50.0",
     "shiki": "^0.14.3",
     "tailwind-merge": "^1.14.0",
-    "tailwindcss": "^3.0.24",
+    "tailwindcss": "^3.4.3",
     "tailwindcss-animate": "^1.0.6",
     "zod": "^3.22.3"
   },

apps/docs/src/components/GetHelpButton.tsx

@@ -0,0 +1,65 @@
+import { useRef, useState } from "react";
+
+import clsx from "clsx";
+
+import { DISCORD_INVITE_LINK } from "@/utils/constants";
+
+import { Icon } from "@iconify/react";
+import questionFill from "@iconify/icons-ph/question-fill";
+
+export function GetHelpButton() {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  return (
+    <>
+      <dialog
+        ref={dialogRef}
+        className={clsx(
+          "fixed top-[calc(100vh-18rem)] left-[calc(100vw-20rem)] m-0 bg-primary-100 text-black dark:bg-primary-900 dark:text-white dark:border p-0 z-[1000] w-60 backdrop:bg-black/75",
+        )}
+      >
+        <form method="dialog" className="w-full text-right">
+          <button className="p-1 m-2" autoFocus>
+            close
+          </button>
+        </form>
+        <div className="flex flex-col gap-4 p-4 pt-0">
+          <div>
+            <strong>Need help?</strong> Check out our{" "}
+            <a href={DISCORD_INVITE_LINK} className="always-underline">
+              Discord.
+            </a>
+          </div>
+
+          <div>
+            <strong>Enterprise or Open Source?</strong> Reach out directly on
+            our{" "}
+            <a href="/services" className="always-underline">
+              Services
+            </a>{" "}
+            page.
+          </div>
+        </div>
+      </dialog>
+      <button
+        className="fixed bottom-4 right-4 rounded-full"
+        onClick={() => {
+          if (!dialogRef.current) {
+            return;
+          }
+          if (dialogRef.current.open) {
+            dialogRef.current.close();
+          } else {
+            dialogRef.current.showModal();
+          }
+        }}
+      >
+        <Icon
+          icon={questionFill}
+          width={"4rem"}
+          className="text-primary-500 bg-white rounded-full"
+        />
+      </button>
+    </>
+  );
+}

apps/docs/src/components/docs/GetHelpWidget.astro

@@ -0,0 +1,15 @@
+---
+
+import { DISCORD_INVITE_LINK } from "@/utils/constants";
+
+---
+
+<div class="p-4 flex flex-col gap-4 bg-primary-100 dark:bg-primary-800">
+  <span>
+    <strong>Need help?</strong> Check out our <a class="always-underline" href={DISCORD_INVITE_LINK}>Discord.</a>
+  </span>
+
+  <span>
+    <strong>Enterprise or Open Source?</strong> Reach out directly on our <a class="always-underline" href="/services">Services</a> page.
+  </span>
+</div>

apps/docs/src/layouts/Layout.astro

@@ -4,6 +4,8 @@ import { getCollection } from "astro:content";
 import { ViewTransitions } from "astro:transitions";
 
 import ResponsiveContainer from "@/components/ResponsiveContainer.astro";
+import GetHelpWidget from "@/components/docs/GetHelpWidget.astro";
+import { GetHelpButton } from "@/components/GetHelpButton";
 import { ThemeSelector } from "@/components/ThemeSelector";
 import { Search } from "@/components/Search";
 import { DISCORD_INVITE_LINK } from "@/utils/constants";
@@ -333,6 +335,10 @@ guidePages.sort((a, b) => {
       <slot />
     </ResponsiveContainer>
 
+    <div class="sm:hidden p-4">
+      <GetHelpWidget></GetHelpWidget>
+    </div>
+
     <footer class="mt-auto bg-primary-50 dark:bg-primary-900">
       <ResponsiveContainer>
         <div
@@ -401,5 +407,6 @@ guidePages.sort((a, b) => {
         </div>
       </ResponsiveContainer>
     </footer>
+    <GetHelpButton client:only></GetHelpButton>
   </body>
 </html>

apps/docs/src/styles/globals.css

@@ -15,7 +15,8 @@ a {
   padding: 2px;
 }
 
-a:hover {
+a:hover,
+a.always-underline {
   text-decoration: #257ddd underline;
 }