docs: navigation improvements

README.md

@@ -64,14 +64,14 @@ Hatchet replaces difficult to manage legacy queues or pub/sub systems so you can
 
 Hatchet is available as a cloud version or self-hosted. See the following docs to get up and running quickly:
 
-- [Hatchet Cloud Quickstart](https://docs.hatchet.run/home/hatchet-cloud-quickstart)
+- [Hatchet Cloud Quickstart](https://docs.hatchet.run/home/quickstart_cloud)
 - [Hatchet Self-Hosted](https://docs.hatchet.run/self-hosting)
 
 Hatchet supports your technology stack with open-source SDKs for Python, Typescript, and Go. To get started, see the language-specific guides here:
 
-- [Python SDK Docs](https://docs.hatchet.run/sdks/python-sdk) | [Python SDK Quickstart](https://github.com/hatchet-dev/hatchet-python-quickstart)
-- [Typescript SDK Docs](https://docs.hatchet.run/sdks/typescript-sdk) | [Typescript SDK Quickstart](https://github.com/hatchet-dev/hatchet-typescript-quickstart)
-- [Go SDK Docs](https://docs.hatchet.run/sdks/go-sdk) | [Go SDK Quickstart](https://github.com/hatchet-dev/hatchet-go-quickstart)
+- [Python SDK Docs](https://docs.hatchet.run/) | [Python SDK Quickstart](https://github.com/hatchet-dev/hatchet-python-quickstart)
+- [Typescript SDK Docs](https://docs.hatchet.run/) | [Typescript SDK Quickstart](https://github.com/hatchet-dev/hatchet-typescript-quickstart)
+- [Go SDK Docs](https://docs.hatchet.run/) | [Go SDK Quickstart](https://github.com/hatchet-dev/hatchet-go-quickstart)
 
 ### SDK repositories
 

frontend/app/src/components/molecules/nav-bar/nav-bar.tsx

@@ -95,7 +95,7 @@ export default function MainNav({ user }: MainNavProps) {
               <DropdownMenuItem
                 onClick={() =>
                   window.open(
-                    'https://docs.hatchet.run/home/basics/steps',
+                    'https://docs.hatchet.run/home/foundations_steps',
                     '_blank',
                   )
                 }

frontend/app/src/pages/main/workers/$worker/index.tsx

@@ -212,7 +212,7 @@ export default function ExpandedWorkflowRun() {
         <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
           A slot represents one step run on a worker to limit load.{' '}
           <a
-            href="https://docs.hatchet.run/sdks/python-sdk/worker"
+            href="https://docs.hatchet.run/home/foundations_workers"
             className="underline"
           >
             Learn more.
@@ -267,7 +267,7 @@ export default function ExpandedWorkflowRun() {
           assignment of steps to specific workers.{' '}
           <a
             className="underline"
-            href="https://docs.hatchet.run/home/features/worker-assignment/worker-affinity#specifying-worker-labels"
+            href="https://docs.hatchet.run/home/assignment_worker-affinity"
           >
             Learn more.
           </a>

frontend/app/src/pages/main/workers/components/worker-table.tsx

@@ -82,7 +82,7 @@ export function WorkersTable() {
       </CardHeader>
       <CardFooter>
         <a
-          href="https://docs.hatchet.run/home/basics/workers"
+          href="https://docs.hatchet.run/home/foundations_workers"
           className="flex flex-row item-center"
         >
           <Button onClick={() => {}} variant="link" className="p-0 w-fit">

frontend/app/src/pages/main/workers/webhooks/index.tsx

@@ -53,7 +53,7 @@ export default function Webhooks() {
           <a
             className="underline"
             target="_blank"
-            href="https://docs.hatchet.run/home/features/webhooks"
+            href="https://docs.hatchet.run/home/advanced_webhook-workers"
             rel="noreferrer"
           >
             Learn more.

frontend/app/src/pages/main/workflow-runs/$run/components/step-run-playground.tsx

@@ -375,7 +375,7 @@ export function StepRunPlayground({
                       Attempt Cancel
                     </>
                   </Button>
-                  <a href="https://docs.hatchet.run/home/features/cancellation">
+                  <a href="https://docs.hatchet.run/home/errors_cancellation-signaling">
                     <Button
                       onClick={handleOnCancel}
                       variant="link"

frontend/app/src/pages/main/workflows/components/workflow-table.tsx

@@ -69,7 +69,7 @@ export function WorkflowTable() {
       </CardHeader>
       <CardFooter>
         <a
-          href="https://docs.hatchet.run/home/basics/workflows"
+          href="https://docs.hatchet.run/home/foundations_workflows"
           className="flex flex-row item-center"
         >
           <Button onClick={() => {}} variant="link" className="p-0 w-fit">

frontend/app/src/pages/onboarding/get-started/index.tsx

@@ -291,7 +291,7 @@ export default function GetStarted() {
                 onClick={() => {
                   // Explore advanced topics in the docs
                   window.open(
-                    'https://docs.hatchet.run/home/basics/steps',
+                    'https://docs.hatchet.run/home/foundations_steps',
                     '_blank',
                   );
                 }}

frontend/docs/components/FrameworkSelector.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import React from 'react';
+import { useLanguage } from '../context/LanguageContext';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+    DialogClose,
+  } from "@/components/ui/dialog"
+import { Button } from '@/components/ui/button';
+import { BiChevronDown, BiPlus } from 'react-icons/bi';
+
+
+interface FrameworkSelectorProps {
+  className?: string;
+}
+
+export const FrameworkSelector: React.FC<FrameworkSelectorProps> = ({ className }) => {
+  const { selected, setSelectedLanguage, languages } = useLanguage();
+
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button className="inline-flex items-center gap-2 px-4 py-2 border rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 dark:border-gray-700 dark:bg-background dark:text-foreground">
+            {selected.worker?.icon} {selected.worker?.name || "Select Language"}
+            {selected['api-server'] && selected['api-server']?.name !== selected.worker?.name && <> <BiPlus /> {selected['api-server']?.icon} {selected['api-server']?.name}</>}
+            <BiChevronDown className="ml-2" />
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[725px] w-[95vw] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Personalize Your Docs</DialogTitle>
+            <DialogDescription>
+              Select the programming language and frameworks you want to use for code examples.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <h4 className="font-medium">Hatchet Worker Language</h4>
+              <p className="text-sm">
+                The worker language is the language that your hatchet functions and workflows will be written in.
+              </p>
+              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2">
+                {languages.worker.map((lang) => (
+                  <button
+                    key={lang.name}
+                    className={`
+                      aspect-square flex flex-col items-center justify-center gap-1.5
+                      border rounded-md hover:bg-gray-50 transition-colors p-1
+                      ${selected.worker?.name === lang.name
+                        ? 'border-blue-500 bg-blue-50 ring-1 ring-blue-500 ring-opacity-50 text-blue-900'
+                        : ''}
+                    `}
+                    onClick={() => setSelectedLanguage("worker", lang)}
+                  >
+                    <div className="text-3xl">{lang.icon}</div>
+                    <div className="text-xs font-medium leading-none text-center whitespace-pre-line">
+                      {lang.name.replace('(', '\n(')}
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <h4 className="font-medium">API Server</h4>
+              <p className="text-sm">
+                The API server framework is where you schedule work for your hatchet functions.
+              </p>
+              <div className="max-h-[230px] overflow-y-auto pr-2">
+                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2">
+                  {languages['api-server'].map((lang) => (
+                    <button
+                      key={lang.name}
+                      className={`
+                        aspect-square flex flex-col items-center justify-center gap-2.5
+                        border rounded-md hover:bg-gray-50 transition-colors p-1
+                        ${selected['api-server']?.name === lang.name
+                          ? 'border-blue-500 bg-blue-50 ring-1 ring-blue-500 ring-opacity-50 text-blue-900'
+                          : ''}
+                      `}
+                      onClick={() => setSelectedLanguage("api-server", lang)}
+                    >
+                      <div className="text-3xl">{lang.icon}</div>
+                      <div className="text-xs font-medium leading-none text-center whitespace-pre-line">
+                        {lang.name.replace('(', '\n(')}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col sm:flex-row justify-between mt-6 pt-4 border-t gap-4">
+            <p className="text-sm">
+              Don't see your favorite framework?
+              <a href="https://github.com/hatchet-dev/hatchet/issues/new?template=feature_request.md&labels=feature-request&title=Framework+Request:" target="_blank">
+                <Button variant="link" size="sm">Request a Framework</Button>
+              </a>
+            </p>
+            <DialogClose asChild>
+              <Button variant="outline">Save Changes</Button>
+            </DialogClose>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default FrameworkSelector;

frontend/docs/components/UniversalTabs.tsx

@@ -1,20 +1,24 @@
 import React from 'react';
 import { Tabs } from 'nextra/components';
-import { useLanguage } from '../context/LanguageContext';
+import { PersistenceKeys, useLanguage } from '../context/LanguageContext';
 
 interface UniversalTabsProps {
-  items: string[];
   children: React.ReactNode;
+  key?: PersistenceKeys;
 }
 
-export const UniversalTabs: React.FC<UniversalTabsProps> = ({ items, children }) => {
-  const { selectedLanguage, setSelectedLanguage } = useLanguage();
+export const UniversalTabs: React.FC<UniversalTabsProps> = ({ children, key = "worker" }) => {
+  const { selected, setSelectedLanguage, languages } = useLanguage();
+
+  const selectedIndex = selected[key]
+    ? languages[key].findIndex(lang => lang.name === selected[key]?.name)
+    : 0;
 
   return (
     <Tabs
-      items={items}
-      selectedIndex={items.includes(selectedLanguage) ? items.indexOf(selectedLanguage) : 0}
-      onChange={(index) => setSelectedLanguage(items[index])}
+      items={languages[key].map(lang => lang.name)}
+      selectedIndex={selectedIndex}
+      onChange={(index) => setSelectedLanguage(key, languages[key][index])}
     >
       {children}
     </Tabs>

frontend/docs/components/code/CodeBlock.tsx

@@ -15,15 +15,15 @@ export const CodeBlock = ({ source, target }: CodeRendererProps) => {
     const [plainText, setPlainText] = React.useState(false);
     const [copied, setCopied] = React.useState(false);
 
-    const parsed = parseDocComments(source.raw, target, collapsed);
+    const { text: parsed, expandable } = parseDocComments(source.raw, target, collapsed);
 
     return <>
-        <div className="sticky top-0 z-10 bg-background flex flex-row gap-4 justify-between items-center pl-2 mb-2">
+        <div className="sticky top-0 z-10 flex flex-row gap-4 justify-between items-center pl-2 mb-2">
             <a href={source.githubUrl} target="_blank" rel="noopener noreferrer" className="text-xs text-gray-500 font-mono hover:underline">{source.props.path}</a>
             <div className="flex gap-2 justify-end">
-                <Button variant="ghost" size="sm" onClick={() => setCollapsed(!collapsed)}>
+                {expandable &&<Button variant="ghost" size="sm" onClick={() => setCollapsed(!collapsed)}>
                     {collapsed ? <><UnfoldVertical className="w-4 h-4 mr-2" />Expand</> : <><FoldVertical className="w-4 h-4 mr-2" />Collapse</>}
-                </Button>
+                </Button>}
                 <Button variant="outline" size="sm" onClick={() => {
                     navigator.clipboard.writeText(parsed);
                     setCopied(true);

frontend/docs/components/code/codeParser.tsx

@@ -20,11 +20,12 @@ export const parseDocComments = (
     source: string,
     target: string,
     collapsed: boolean = false,
-): string => {
+): { text: string, expandable: boolean } => {
     const lines = source.split('\n');
     let isSnippet = false;
     let isCollecting = false;
     const resultLines: string[] = [];
+    let expandable = false;
 
     for (let i = 0; i < lines.length; i++) {
       const line = lines[i];
@@ -50,6 +51,7 @@ export const parseDocComments = (
 
         // Collect until '...'
         if (isCollecting && startsWithPrefixAndChar(line, '...')) {
+            expandable = true;
             if (collapsed) {
                 isCollecting = false;
                 resultLines.push(line);
@@ -59,7 +61,7 @@ export const parseDocComments = (
         }
 
         // Stop at ‼️
-        if (isSnippet && line.includes('‼️')) {
+        if (isSnippet && (line.includes('‼️') || line.includes('!!'))) {
             break;
         }
       }
@@ -75,8 +77,8 @@ export const parseDocComments = (
     }
 
     if (resultLines.length === 0) {
-      return `🚨 No snippet found for ${target} \n\n${source}`;
+      return { text: `🚨 No snippet found for ${target} \n\n${source}`, expandable: false };
     }
 
-    return resultLines.join('\n');
+    return { text: resultLines.join('\n'), expandable };
   };