Organize guides and resources.

Author: nearestnabors

.github/scripts/update-example-dates.js

@@ -90,7 +90,10 @@ async function updateExampleDates() {
   console.log("Parsing repositories from MDX file...");
 
   // Read the current MDX file
-  const mdxPath = path.join(__dirname, "../../app/en/home/examples/page.mdx");
+  const mdxPath = path.join(
+    __dirname,
+    "../../app/en/resources/examples/page.mdx"
+  );
   let content = fs.readFileSync(mdxPath, "utf8");
 
   // Parse repositories from the MDX file

.github/workflows/translate-docs.yml

@@ -32,7 +32,7 @@ on:
         type: boolean
 
       single_file:
-        description: "Single file to translate (relative to app/en, e.g. 'home/page.mdx')"
+        description: "Single file to translate (relative to app/en, e.g. 'resources/examples/page.mdx')"
         required: false
         default: ""
         type: string
@@ -121,14 +121,14 @@ jobs:
           else
             echo "Changes detected"
             echo "has_changes=true" >> $GITHUB_OUTPUT
-            
+
             # Count changed files
             CHANGED_FILES=$(git diff --name-only | wc -l)
             STAGED_FILES=$(git diff --cached --name-only | wc -l)
             TOTAL_CHANGES=$((CHANGED_FILES + STAGED_FILES))
-            
+
             echo "changed_files=$TOTAL_CHANGES" >> $GITHUB_OUTPUT
-            
+
             # Get list of changed locales
             CHANGED_LOCALES=$(git diff --name-only | grep -E '^app/(es|pt-BR)/' | cut -d'/' -f2 | sort -u | tr '\n' ',' | sed 's/,$//')
             if [ -z "$CHANGED_LOCALES" ]; then
@@ -213,22 +213,22 @@ jobs:
               head: '${{ steps.branch_name.outputs.branch_name }}',
               base: 'main',
               body: `## 📖 Automated Translation Update
-              
+
               This PR contains automated translations generated by the GitHub Actions workflow.
-              
+
               ### 📊 Translation Summary
               - **Target Locale**: ${{ inputs.target_locale }}
               - **Files Changed**: ${{ steps.check_changes.outputs.changed_files }}
               - **Locales Updated**: ${{ steps.check_changes.outputs.changed_locales }}
-              
+
               ### ⚙️ Configuration Used
               - **Force Translate**: ${{ inputs.force_translate }}
               - **Cleanup Deleted Files**: ${{ inputs.cleanup_deleted }}
               - **Dry Run**: ${{ inputs.dry_run }}
               - **Single File**: ${{ inputs.single_file || 'None (all files)' }}
               - **Concurrency**: ${{ inputs.concurrency }}
               - **Model**: gpt-4o-mini
-              
+
               ### 🔍 Review Guidelines
               Please review the translations for:
               - [ ] Accuracy and context preservation
@@ -237,10 +237,10 @@ jobs:
               - [ ] Code blocks and inline code unchanged
               - [ ] Markdown formatting preserved
               - [ ] Brand names (Arcade, Arcade Engine, Control Plane) kept in English
-              
+
               ### 🚀 Auto-generated
               This PR was automatically created by the \`translate-docs.yml\` GitHub Action.
-              
+
               **Triggered by**: @${{ github.actor }}
               **Workflow Run**: [${{ github.run_id }}](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})`,
               draft: false

_dictionaries/en.ts

@@ -9,7 +9,7 @@ export default {
   lastUpdated: "Last updated on",
   notFound: "This page could not be found",
   poweredBy: "Powered by",
-  editPage: "Edit this page on GitHub →",
+  editPage: "Edit this page on GitHub",
   by: "by",
   banner: {
     aiTranslation:

app/_components/logo.tsx

@@ -1,17 +1,17 @@
-import { Arcade, Badge } from "@arcadeai/design-system";
+import { Arcade } from "@arcadeai/design-system";
 import ArcadeLogo from "@arcadeai/design-system/assets/images/arcade-logo";
 
 export function Logo() {
   return (
     <>
       <div className="mr-2 hidden w-40 flex-row lg:flex lg:items-end lg:gap-2.5">
         <ArcadeLogo className="h-7 w-auto invert dark:invert-0" />
-        <Badge
+        {/* <Badge
           className="relative top-0.5 font-medium font-mono text-xs"
           variant="outline"
         >
           Docs
-        </Badge>
+        </Badge> */}
       </div>
 
       <div className="mr-16 block w-6 lg:hidden">

app/_components/starter-tool-info.tsx

@@ -10,7 +10,7 @@ const StarterToolInfo: React.FC<StarterToolInfoProps> = ({ toolkitName }) => (
     <p>
       {toolkitName} is a{" "}
       <u>
-        <a href="/home/use-tools/types-of-tools#starter-tools">
+        <a href="/create-tools/performance/types-of-tools#starter-tools">
           Starter MCP Server
         </a>
       </u>
@@ -21,15 +21,16 @@ const StarterToolInfo: React.FC<StarterToolInfoProps> = ({ toolkitName }) => (
     <p>
       Differently from{" "}
       <u>
-        <a href="/home/use-tools/types-of-tools#optimized-tools">
+        <a href="/create-tools/performance/types-of-tools#optimized-tools">
           Optimized MCP Servers
         </a>
       </u>
       , Starter tools are heavily influenced by the original API design, which
       is not usually optimized for LLM usage. For this reason, we recommend
       thoroughly evaluating the tools with your Agents or chatbots before using
-      it in production. <a href="/home/use-tools/types-of-tools">Read more</a>{" "}
-      about Optimized vs Starter tools.
+      it in production.{" "}
+      <a href="/create-tools/performance/types-of-tools">Read more</a> about
+      Optimized vs Starter tools.
     </p>
   </Callout>
 );

app/_components/tool-info.tsx

@@ -7,8 +7,8 @@ import {
 } from "@arcadeai/design-system";
 import { usePathname } from "next/navigation";
 import type React from "react";
-import { findToolkitFromPath } from "../en/mcp-servers/components/toolkit-utils";
-import { TYPE_CONFIG } from "../en/mcp-servers/components/type-config";
+import { findToolkitFromPath } from "../en/resources/integrations/components/toolkit-utils";
+import { TYPE_CONFIG } from "../en/resources/integrations/components/type-config";
 
 type ToolInfoProps = {
   description: string;

app/en/_meta.tsx

@@ -1,4 +1,11 @@
-import { BadgeHelp, Globe, Home, Shield } from "lucide-react";
+import {
+  Book,
+  BookOpen,
+  GraduationCap,
+  Home,
+  Pencil,
+  Ruler,
+} from "lucide-react";
 import type { MetaRecord } from "nextra";
 
 function TitleWithIcon({
@@ -9,7 +16,7 @@ function TitleWithIcon({
   children: React.ReactNode;
 }) {
   return (
-    <span className="flex items-center gap-2 font-medium">
+    <span className="flex items-center gap-2 font-medium text-gray-950 dark:text-white">
       <Icon className="size-4" />
       {children}
     </span>
@@ -22,143 +29,29 @@ export const meta: MetaRecord = {
       copyPage: true,
     },
   },
-  index: {
-    title: <TitleWithIcon icon={Home}>Home</TitleWithIcon>,
+  home: {
+    title: <TitleWithIcon icon={Home}>Docs Home</TitleWithIcon>,
     theme: {
       breadcrumb: false,
       layout: "full",
       toc: false,
       copyPage: false,
     },
   },
-  arcade: {
-    title: <TitleWithIcon icon={Globe}>Arcade.dev</TitleWithIcon>,
-    href: "https://arcade.dev",
+  "get-started": {
+    title: <TitleWithIcon icon={BookOpen}>Get Started</TitleWithIcon>,
   },
-  "-- Getting Started": {
-    type: "separator",
-    title: "Using Arcade",
+  resources: {
+    title: <TitleWithIcon icon={Pencil}>Resources</TitleWithIcon>,
   },
-  quickstart: {
-    title: "Calling tools in your agent",
+  guides: {
+    title: <TitleWithIcon icon={Ruler}>Guides</TitleWithIcon>,
   },
-  "mcp-gateway-quickstart": {
-    title: "Call a tool in your IDE/MCP Client",
+  learn: {
+    title: <TitleWithIcon icon={Book}>Learn</TitleWithIcon>,
   },
-  "custom-mcp-server-quickstart": {
-    title: "Build MCP Server QuickStart",
-  },
-  "api-keys": {
-    title: "Get an API key",
-  },
-  examples: {
-    title: "Example agents",
-  },
-  "-- Authoring Tools": {
-    type: "separator",
-    title: "Authoring Tools",
-  },
-  "build-tools": {
-    title: "Build tools",
-  },
-  "evaluate-tools": {
-    title: "Evaluate tools",
-  },
-  "serve-tools": {
-    title: "Serve tools",
-  },
-  "-- Agent Frameworks and MCP": {
-    type: "separator",
-    title: "Agent Frameworks and MCP",
-  },
-  "agent-frameworks-overview": {
-    title: "Overview",
-  },
-  "mcp-clients": {
-    title: "MCP Clients",
-  },
-  langchain: {
-    title: "LangChain",
-  },
-  crewai: {
-    title: "CrewAI",
-  },
-  "google-adk": {
-    title: "Google ADK",
-  },
-  mastra: {
-    title: "Mastra",
-  },
-  "oai-agents": {
-    title: "OpenAI Agents",
-  },
-  vercelai: {
-    title: "Vercel AI",
-  },
-  "-- Core Concepts": {
-    type: "separator",
-    title: "Core Concepts",
-  },
-  "use-tools": {
-    title: "Tool Calling",
-  },
-  auth: {
-    title: "Authorization",
-  },
-  "mcp-gateways": {
-    title: "MCP Gateways",
-  },
-  "arcade-cli": {
-    title: "Arcade CLI",
-  },
-  "-- Hosting options": {
-    type: "separator",
-    title: "Hosting options",
-  },
-  "hosting-overview": {
-    title: "Overview",
-  },
-  deployment: {
-    title: "Deployment",
-  },
-  "auth-providers": {
-    title: "Customizing Auth",
-  },
-  "-- Guides": {
-    type: "separator",
-    title: "Guides",
-  },
-  glossary: {
-    title: "Glossary",
-  },
-  faq: {
-    title: "FAQ",
-  },
-  "compare-server-types": {
-    title: "Compare Server Types",
-  },
-  "agentic-development": {
-    title: "Agentic Development",
-  },
-  changelog: {
-    title: "Changelog",
-  },
-  "-- Registry": {
-    type: "separator",
-    title: "Registry",
-  },
-  "registry-early-access": {
-    title: "Registry Early Access",
-  },
-  "-- Resources": {
-    type: "separator",
-    title: "Resources",
-  },
-  "contact-us": {
-    title: <TitleWithIcon icon={BadgeHelp}>Contact us</TitleWithIcon>,
-  },
-  security: {
-    title: <TitleWithIcon icon={Shield}>Security</TitleWithIcon>,
+  references: {
+    title: <TitleWithIcon icon={GraduationCap}>References</TitleWithIcon>,
   },
 };
 

app/en/get-started/_meta.tsx

@@ -0,0 +1,9 @@
+import type { MetaRecord } from "nextra";
+
+export const meta: MetaRecord = {
+  "about-arcade": "About Arcade",
+  setup: "Setup",
+  quickstarts: "Quickstarts",
+};
+
+export default meta;

app/en/get-started/about-arcade/page.mdx

@@ -5,6 +5,8 @@ description: "Learn how Arcade helps with auth and tool calling"
 
 import { Tabs } from "nextra/components";
 
+# About Arcade
+
 Applications that use models to perform tasks (_agentic applications_) commonly require access to sensitive data and services. Authentication complexities often hinder AI from performing tasks that require user-specific information, like what emails you recently received or what's coming up on your calendar.
 
 To retrieve this information, agentic applications need to be able to authenticate and authorize access to external services you use like Gmail or Google Calendar.

app/en/get-started/quickstarts/_meta.tsx

@@ -0,0 +1,9 @@
+import type { MetaRecord } from "nextra";
+
+export const meta: MetaRecord = {
+  "call-tool-agent": "Call tools in agents",
+  "call-tool-client": "Call tools in IDE/MCP clients",
+  "mcp-server-quickstart": "Build an MCP server for custom tools",
+};
+
+export default meta;