VODF-172 - Add Batch transaction integration considerations

Merge pull request #3600 from XRPLF/update-ai-config
Update AI config on site
2026-04-15 08:12:31 +00:00 · 2026-04-14 12:40:11 +01:00 · 2026-04-13 11:28:31 -07:00 · 2026-04-11 00:08:58 -07:00
10 changed files with 470 additions and 1296 deletions
--- a/@theme/plugin.js
+++ b/@theme/plugin.js
@@ -1,15 +1,13 @@
 import { indexPages } from './plugins/index-pages.js';
 import { codeSamples } from './plugins/code-samples.js';
 import { blogPosts } from './plugins/blog-posts.js';
-import { tutorialLanguages } from './plugins/tutorial-languages.js';
-import { tutorialMetadata } from './plugins/tutorial-metadata.js';
+import { tutorialLanguages } from './plugins/tutorial-languages.js'

 export default function customPlugin() {
  const indexPagesInst = indexPages();
  const codeSamplesInst = codeSamples();
  const blogPostsInst = blogPosts();
  const tutorialLanguagesInst = tutorialLanguages();
-  const tutorialMetadataInst = tutorialMetadata();


  /** @type {import("@redocly/realm/dist/server/plugins/types").PluginInstance } */
@@ -20,14 +18,12 @@ export default function customPlugin() {
      await codeSamplesInst.processContent?.(content, actions);
      await blogPostsInst.processContent?.(content, actions);
      await tutorialLanguagesInst.processContent?.(content, actions);
-      await tutorialMetadataInst.processContent?.(content, actions);
    },
    afterRoutesCreated: async (content, actions) => {
      await indexPagesInst.afterRoutesCreated?.(content, actions);
      await codeSamplesInst.afterRoutesCreated?.(content, actions);
      await blogPostsInst.afterRoutesCreated?.(content, actions);
      await tutorialLanguagesInst.processContent?.(content, actions);
-      await tutorialMetadataInst.processContent?.(content, actions);
    },
  };

--- a/@theme/plugins/tutorial-languages.js
+++ b/@theme/plugins/tutorial-languages.js
@@ -1,15 +1,7 @@
 // @ts-check

-import { getInnerText } from '@redocly/realm/dist/markdoc/helpers/get-inner-text.js'
-
 /**
- * Plugin to detect languages supported in tutorial pages.
- *
- * Detection methods (in priority order):
- * 1. Tab labels in the markdown (for multi-language tutorials)
- * 2. Filename patterns like "-js.md", "-py.md" (for single-language tutorials)
- * 3. Title containing language name (for single-language tutorials)
- *
+ * Plugin to detect languages supported in tutorial pages by scanning for tab labels.
 * This creates shared data that maps tutorial paths to their supported languages.
 */
 export function tutorialLanguages() {
@@ -29,18 +21,7 @@ export function tutorialLanguages() {
        for (const { relativePath } of tutorialFiles) {
          try {
            const { data } = await cache.load(relativePath, 'markdown-ast')
-
-            // Try to detect languages from tab labels first
-            let languages = extractLanguagesFromAst(data.ast)
-
-            // Fallback: detect language from filename/title for single-language tutorials
-            if (languages.length === 0) {
-              const title = extractFirstHeading(data.ast) || ''
-              const fallbackLang = detectLanguageFromPathAndTitle(relativePath, title)
-              if (fallbackLang) {
-                languages = [fallbackLang]
-              }
-            }
+            const languages = extractLanguagesFromAst(data.ast)

            if (languages.length > 0) {
              // Convert file path to URL path
@@ -73,31 +54,16 @@ function extractLanguagesFromAst(ast) {
  const languages = new Set()

  visit(ast, (node) => {
-    if (!isNode(node)) return
-
-    // Detect languages from tab labels
-    if (node.type === 'tag' && node.tag === 'tab') {
+    // Look for tab nodes with a label attribute
+    if (isNode(node) && node.type === 'tag' && node.tag === 'tab') {
      const label = node.attributes?.label
      if (label) {
-        const normalized = normalizeLanguage(label)
-        if (normalized) languages.add(normalized)
+        const normalizedLang = normalizeLanguage(label)
+        if (normalizedLang) {
+          languages.add(normalizedLang)
+        }
      }
    }
-
-    // Detect languages from code-snippet language attributes
-    if (node.type === 'tag' && node.tag === 'code-snippet') {
-      const lang = node.attributes?.language
-      if (lang) {
-        const normalized = normalizeLanguage(lang)
-        if (normalized) languages.add(normalized)
-      }
-    }
-
-    // Detect languages from fenced code blocks (```js, ```python, etc.)
-    if (node.type === 'fence' && node.attributes?.language) {
-      const normalized = normalizeLanguage(node.attributes.language)
-      if (normalized) languages.add(normalized)
-    }
  })

  return Array.from(languages)
@@ -132,70 +98,6 @@ function normalizeLanguage(label) {
  return null
 }

-/**
- * Detect language from file path and title for single-language tutorials.
- * This is a fallback when no tab labels are found in the markdown.
- */
-function detectLanguageFromPathAndTitle(relativePath, title) {
-  const pathLower = relativePath.toLowerCase()
-  const titleLower = (title || '').toLowerCase()
-
-  // Check filename suffixes like "-js.md", "-py.md"
-  if (pathLower.endsWith('-js.md') || pathLower.includes('-javascript.md') || pathLower.includes('-in-javascript.md')) {
-    return 'javascript'
-  }
-  if (pathLower.endsWith('-py.md') || pathLower.includes('-python.md') || pathLower.includes('-in-python.md')) {
-    return 'python'
-  }
-  if (pathLower.endsWith('-java.md') || pathLower.includes('-in-java.md')) {
-    return 'java'
-  }
-  if (pathLower.endsWith('-go.md') || pathLower.includes('-in-go.md') || pathLower.includes('-golang.md')) {
-    return 'go'
-  }
-  if (pathLower.endsWith('-php.md') || pathLower.includes('-in-php.md')) {
-    return 'php'
-  }
-
-  // Check title for language indicators
-  if (titleLower.includes('javascript') || titleLower.includes(' js ') || titleLower.endsWith(' js')) {
-    return 'javascript'
-  }
-  if (titleLower.includes('python')) {
-    return 'python'
-  }
-  if (titleLower.includes('java') && !titleLower.includes('javascript')) {
-    return 'java'
-  }
-  if (titleLower.includes('golang') || (titleLower.includes(' go ') || titleLower.endsWith(' go') || titleLower.includes('using go'))) {
-    return 'go'
-  }
-  if (titleLower.includes('php')) {
-    return 'php'
-  }
-
-  return null
-}
-
-const EXIT = Symbol('Exit visitor')
-
-/**
- * Extract the first heading from the markdown AST
- */
-function extractFirstHeading(ast) {
-  let heading = null
-
-  visit(ast, (node) => {
-    if (!isNode(node)) return
-    if (node.type === 'heading') {
-      heading = getInnerText([node])
-      return EXIT
-    }
-  })
-
-  return heading
-}
-
 function isNode(value) {
  return !!(value?.$$mdtype === 'Node')
 }
@@ -203,16 +105,14 @@ function isNode(value) {
 function visit(node, visitor) {
  if (!node) return

-  const res = visitor(node)
-  if (res === EXIT) return res
+  visitor(node)

  if (node.children) {
    for (const child of node.children) {
      if (!child || typeof child === 'string') {
        continue
      }
-      const res = visit(child, visitor)
-      if (res === EXIT) return res
+      visit(child, visitor)
    }
  }
 }
--- a/@theme/plugins/tutorial-metadata.js
+++ b/@theme/plugins/tutorial-metadata.js
@@ -1,207 +0,0 @@
-// @ts-check
-
-import { getInnerText } from '@redocly/realm/dist/markdoc/helpers/get-inner-text.js';
-import { readFileSync } from 'fs';
-import { dirname, resolve } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const PROJECT_ROOT = resolve(__dirname, '../..');
-
-/**
- * Plugin to extract tutorial metadata including last modified dates.
- * Uses Redocly's built-in git integration for dates (same as "Last updated" display).
- * Only includes tutorials that appear in the sidebar navigation (sidebars.yaml).
- * This creates shared data for displaying "What's New" tutorials and
- * auto-generating tutorial sections on the landing page.
- */
-export function tutorialMetadata() {
-  /** @type {import("@redocly/realm/dist/server/plugins/types").PluginInstance } */
-  const instance = {
-    processContent: async (actions, { fs, cache }) => {
-      try {
-        // Extract tutorial paths and categories from sidebars.yaml.
-        // Only tutorials present in the sidebar are included.
-        const { pageCategory, categories } = extractSidebarData();
-
-        /** @type {Array<{path: string, title: string, description: string, lastModified: string, category: string}>} */
-        const tutorials = [];
-        const allFiles = await fs.scan();
-
-        // Find all markdown files in tutorials directory
-        const tutorialFiles = allFiles.filter((file) =>
-          file.relativePath.match(/^docs[\/\\]tutorials[\/\\].*\.md$/)
-        );
-
-        for (const { relativePath } of tutorialFiles) {
-          try {
-            // Skip tutorials not present in sidebar navigation
-            const category = pageCategory.get(relativePath);
-            if (!category) continue;
-
-            const { data: { ast } } = await cache.load(relativePath, 'markdown-ast');
-            const { data: { frontmatter } } = await cache.load(relativePath, 'markdown-frontmatter');
-
-            // Get last modified date using Redocly's built-in git integration
-            const lastModified = await fs.getLastModified(relativePath);
-            if (!lastModified) continue; // Skip files without dates
-
-            // Extract title from first heading
-            const title = extractFirstHeading(ast) || '';
-            if (!title) continue;
-
-            // Get description from frontmatter or first paragraph
-            const description = frontmatter?.seo?.description || '';
-
-            // Convert file path to URL path
-            const urlPath = '/' + relativePath
-              .replace(/[\/\\]index\.md$/, '/')
-              .replace(/\.md$/, '/')
-              .replace(/\\/g, '/');
-
-            tutorials.push({
-              path: urlPath,
-              title,
-              description,
-              lastModified,
-              category,
-            });
-          } catch (err) {
-            continue; // Skip files that can't be parsed
-          }
-        }
-
-        // Sort by last modified date (newest first) for "What's New"
-        tutorials.sort((a, b) =>
-          new Date(b.lastModified).getTime() - new Date(a.lastModified).getTime()
-        );
-
-        // Create shared data including sidebar-derived categories
-        actions.createSharedData('tutorial-metadata', { tutorials, categories });
-        actions.addRouteSharedData('/docs/tutorials/', 'tutorial-metadata', 'tutorial-metadata');
-        actions.addRouteSharedData('/ja/docs/tutorials/', 'tutorial-metadata', 'tutorial-metadata');
-        actions.addRouteSharedData('/es-es/docs/tutorials/', 'tutorial-metadata', 'tutorial-metadata');
-      } catch (e) {
-        console.log('[tutorial-metadata] Error:', e);
-      }
-    },
-  };
-  return instance;
-}
-
-/**
- * Extract the first heading from the markdown AST
- */
-function extractFirstHeading(ast) {
-  let heading = null;
-
-  visit(ast, (node) => {
-    if (!isNode(node)) return;
-    if (node.type === 'heading') {
-      heading = getInnerText([node]);
-      return EXIT;
-    }
-  });
-
-  return heading;
-}
-
-function isNode(value) {
-  return !!(value?.$$mdtype === 'Node');
-}
-
-const EXIT = Symbol('Exit visitor');
-
-function visit(node, visitor) {
-  if (!node) return;
-
-  const res = visitor(node);
-  if (res === EXIT) return res;
-
-  if (node.children) {
-    for (const child of node.children) {
-      if (!child || typeof child === 'string') continue;
-      const res = visit(child, visitor);
-      if (res === EXIT) return res;
-    }
-  }
-}
-
-/**
- * Extract tutorial page paths and categories from sidebars.yaml.
- *
- * Returns:
- * - pageCategory: Map of relativePath to category id (slug)
- * - categories: Array of { id, title } in sidebar display order
- *
- * Top-level groups under the tutorials section become categories.
- * Pages not inside a group (e.g. public-servers.md) are skipped.
- */
-function extractSidebarData() {
-  /** @type {Map<string, string>} */
-  const pageCategory = new Map();
-  /** @type {Array<{id: string, title: string}>} */
-  const categories = [];
-
-  try {
-    const content = readFileSync(resolve(PROJECT_ROOT, 'sidebars.yaml'), 'utf-8');
-    const lines = content.split('\n');
-
-    let inTutorials = false;
-    let entryIndent = -1;       // indent of the tutorials entry itself
-    let topItemIndent = -1;     // indent of direct children (groups/pages)
-    let currentCategory = null; // current top-level group { id, title }
-
-    for (const line of lines) {
-      const trimmed = line.trim();
-      if (!trimmed) continue;
-      const indent = line.search(/\S/);
-
-      // Detect the tutorials section
-      if (trimmed.includes('page: docs/tutorials/index.page.tsx')) {
-        inTutorials = true;
-        entryIndent = indent;
-        continue;
-      }
-
-      if (!inTutorials) continue;
-
-      // Exit tutorials when we reach a sibling entry at the same indent
-      if (indent <= entryIndent && trimmed.startsWith('- ')) {
-        break;
-      }
-
-      // Detect the indent of top-level items (first `- ` under tutorials items)
-      if (topItemIndent === -1 && trimmed.startsWith('- ')) {
-        topItemIndent = indent;
-      }
-
-      // Top-level group - start a new category
-      if (indent === topItemIndent && trimmed.startsWith('- group:')) {
-        const title = trimmed.replace('- group:', '').trim();
-        const id = title.toLowerCase().replace(/\s+/g, '-');
-        currentCategory = { id, title };
-        categories.push(currentCategory);
-        continue;
-      }
-
-      // Top-level page (no group, e.g. public-servers.md) - reset current category
-      if (indent === topItemIndent && trimmed.startsWith('- page:')) {
-        currentCategory = null;
-        continue;
-      }
-
-      // Nested page under a group - assign to current category
-      if (currentCategory) {
-        const pageMatch = trimmed.match(/^- page:\s+(docs\/tutorials\/\S+\.md)/);
-        if (pageMatch) {
-          pageCategory.set(pageMatch[1], currentCategory.id);
-        }
-      }
-    }
-  } catch (err) {
-    console.log('[tutorial-metadata] Warning: Could not read sidebars.yaml:', String(err));
-  }
-
-  return { pageCategory, categories };
-}
--- a/docs/concepts/transactions/batch-transactions.md
+++ b/docs/concepts/transactions/batch-transactions.md
@@ -168,3 +168,40 @@ If Alice just signs her part of the Batch transaction, Bob can modify his transa
 An inner batch transaction is a special case. It doesn't include a signature or a fee (since those are both included in the outer transaction). Therefore, they must be handled carefully to ensure that someone can't somehow directly submit an inner `Batch` transaction without it being included in an outer transaction.

 Inner transactions cannot be broadcast (and won't be accepted if they happen to be broadcast, for example, from a malicious node). They must be generated from the `Batch` outer transaction instead. Inner transactions cannot be directly submitted via the submit RPC.
+
+## Integration Considerations
+
+`Batch` transactions have some unique integration considerations:
+
+- Since the outer transaction returns `tesSUCCESS` even when inner transactions fail (see [Metadata](#metadata)), you must check each inner transaction's metadata and result codes to determine its actual outcome.
+- If inner transactions are validated, they are included in the same ledger as the outer transaction. If an inner transaction appears in a different ledger, it is likely a fraud attempt.
+- Systems that don't specifically handle `Batch` transactions should be able to support them without any changes, since each inner transaction is a valid transaction on its own. All inner transactions that have a `tes` (success) or `tec` result code are accessible via standard transaction-fetching mechanisms such as [`tx`](/docs/references/http-websocket-apis/public-api-methods/transaction-methods/tx.md) and [`account_tx`](/docs/references/http-websocket-apis/public-api-methods/account-methods/account_tx.md).
+- In a multi-account `Batch` transaction, only the inner transactions and batch mode flags are signed by all parties. This means the submitter of the outer transaction can adjust the sequence number and fee of the outer transaction as needed, without coordinating with the other parties.
+
+The following sections cover additional recommendations for specific types of integrations.
+
+### Client Libraries
+
+Client libraries that implement `Batch` transaction support should:
+
+- Provide a helper method to calculate the fee for a `Batch` transaction, since the fee includes the sum of all inner transaction fees. See [XRPL Batch Transaction Fees](#xrpl-batch-transaction-fees).
+- Provide a helper method to construct and sign multi-account `Batch` transactions, where one party signs the outer transaction and the other parties sign the inner transactions.
+- Provide an auto-fill method that sets each inner transaction's `Fee` to `"0"` and the `SigningPubKey` to an empty string (`""`), while omitting the `TxnSignature` field.
+
+### Wallets
+
+Wallets that display or sign `Batch` transactions should:
+
+- Clearly display all inner transactions to users before requesting a signature, so users understand the full scope of what they are approving.
+- For multi-account `Batch` transactions, provide a workflow for users to review and sign their portion of the batch, then export it for other parties to sign.
+- Warn users if they are signing a `Batch` transaction that includes inner transactions from other accounts, since they are approving the entire batch.
+- Display the batch mode (`ALLORNOTHING`, `ONLYONE`, `UNTILFAILURE`, `INDEPENDENT`) and explain its implications.
+- Avoid auto-incrementing sequence numbers after successes or failures, since the number of validated transactions depends on the batch mode and which inner transactions succeed.
+
+### Explorers and Indexers
+
+Explorers and indexers that display `Batch` transactions should:
+
+- Display the relationship between outer `Batch` transactions and their inner transactions using the `ParentBatchID` field in the inner transaction metadata.
+- Show inner transactions in context with their parent `Batch` transaction, rather than as standalone transactions.
+- Consider grouping inner transactions with their outer transaction in transaction lists for clarity.
--- a/docs/tutorials/index.page.tsx
+++ b/docs/tutorials/index.page.tsx
@@ -1,52 +1,5 @@
 import { useThemeHooks } from "@redocly/theme/core/hooks"
 import { Link } from "@redocly/theme/components/Link/Link"
-import { useRef, useState } from "react"
-
-type TutorialLanguagesMap = Record<string, string[]>
-
-interface TutorialMetadataItem {
-  path: string
-  title: string
-  description: string
-  lastModified: string
-  category: string
-}
-
-interface Tutorial {
-  title: string
-  description?: string
-  path: string
-  // External community contribution fields (optional)
-  author?: { name: string; url: string }
-  github?: string
-  externalUrl?: string
-}
-
-interface TutorialSection {
-  id: string
-  title: string
-  description: string
-  tutorials: Tutorial[]
-  showFooter?: boolean
-}
-
-// External community contribution - manually curated with author/repo/demo info
-interface PinnedExternalTutorial {
-  title: string
-  description: string
-  author: { name: string; url: string }
-  github: string
-  url?: string
-}
-
-// Pinned tutorial entry:
-// - string: internal path (uses frontmatter title/description)
-// - object with `path`: internal path with optional description override
-// - PinnedExternalTutorial: external community contribution with author/repo/demo
-type PinnedTutorial = string | { path: string; description?: string } | PinnedExternalTutorial
-
-const MAX_WHATS_NEW = 3
-const MAX_TUTORIALS_PER_SECTION = 6

 export const frontmatter = {
  seo: {
@@ -66,90 +19,242 @@ const langIcons: Record<string, { src: string; alt: string }> = {
  xrpl: { src: "/img/logos/xrp-mark.svg", alt: "XRP Ledger" },
 }

-// ── Section configuration -----------------------------------------------------------
-// Categories and their titles are auto-detected by the tutorial-metadata plugin.
-// Use the config to customize the category titles, add descriptions, change the default category order, and pin tutorials.
-const sectionConfig: Record<string, {
-  title?: string
-  description?: string
-  pinned?: PinnedTutorial[]
-  showFooter?: boolean
-}> = {
-  "whats-new": {
-    title: "What's New",
-    description: "Recently added/updated tutorials to help you build on the XRP Ledger.",
+// Type for the tutorial languages map from the plugin
+type TutorialLanguagesMap = Record<string, string[]>
+
+interface Tutorial {
+  title: string
+  body?: string
+  path: string
+  icon?: string // Single language icon (for single-language tutorials)
+}
+
+interface TutorialSection {
+  id: string
+  title: string
+  description: string
+  tutorials: Tutorial[]
+}
+
+// Get Started tutorials -----------------
+const getStartedTutorials: Tutorial[] = [
+  {
+    title: "JavaScript",
+    body: "Using the xrpl.js client library.",
+    path: "/docs/tutorials/get-started/get-started-javascript/",
+    icon: "javascript",
  },
-  "get-started": {
-    showFooter: true,
-    title: "Get Started with SDKs",
-    description: "These tutorials walk you through the basics of building a very simple XRP Ledger-connected application using your favorite programming language.",
-    pinned: [
-      { path: "/docs/tutorials/get-started/get-started-javascript/", description: "Using the xrpl.js client library." },
-      { path: "/docs/tutorials/get-started/get-started-python/", description: "Using xrpl.py, a pure Python library." },
-      { path: "/docs/tutorials/get-started/get-started-go/", description: "Using xrpl-go, a pure Go library." },
-      { path: "/docs/tutorials/get-started/get-started-java/", description: "Using xrpl4j, a pure Java library." },
-      { path: "/docs/tutorials/get-started/get-started-php/", description: "Using the XRPL_PHP client library." },
-      { path: "/docs/tutorials/get-started/get-started-http-websocket-apis/", description: "Access the XRP Ledger directly through the APIs of its core server." },
-    ],
+  {
+    title: "Python",
+    body: "Using xrpl.py, a pure Python library.",
+    path: "/docs/tutorials/get-started/get-started-python/",
+    icon: "python",
  },
-  "tokens": {
+  {
+    title: "Go",
+    body: "Using xrpl-go, a pure Go library.",
+    path: "/docs/tutorials/get-started/get-started-go/",
+    icon: "go",
+  },
+  {
+    title: "Java",
+    body: "Using xrpl4j, a pure Java library.",
+    path: "/docs/tutorials/get-started/get-started-java/",
+    icon: "java",
+  },
+  {
+    title: "PHP",
+    body: "Using the XRPL_PHP client library.",
+    path: "/docs/tutorials/get-started/get-started-php/",
+    icon: "php",
+  },
+  {
+    title: "HTTP & WebSocket APIs",
+    body: "Access the XRP Ledger directly through the APIs of its core server.",
+    path: "/docs/tutorials/get-started/get-started-http-websocket-apis/",
+    icon: "http",
+  },
+]
+
+// Other tutorial sections -----------------
+// Languages are auto-detected from the markdown files by the tutorial-languages plugin.
+// Only specify `icon` for single-language tutorials without tabs.
+const sections: TutorialSection[] = [
+  {
+    id: "tokens",
+    title: "Tokens",
    description: "Create and manage tokens on the XRP Ledger.",
-    pinned: [
-      { path: "/docs/tutorials/tokens/mpts/issue-a-multi-purpose-token/", description: "Issue new tokens using the v2 fungible token standard." },
-      { path: "/docs/tutorials/tokens/fungible-tokens/issue-a-fungible-token/", description: "Issue new tokens using the v1 fungible token standard." },
-      { path: "/docs/tutorials/tokens/nfts/mint-and-burn-nfts-js/", description: "Create new NFTs, retrieve existing tokens, and burn the ones you no longer need." },
-      "/docs/tutorials/tokens/mpts/sending-mpts-in-javascript/",
-    ],
-  },
-  "payments": {
-    description: "Transfer XRP and issued currencies using various payment types.",
-    pinned: [
-      "/docs/tutorials/payments/send-xrp/",
-      "/docs/tutorials/payments/create-trust-line-send-currency-in-javascript/",
-      "/docs/tutorials/payments/send-a-conditional-escrow/",
-      "/docs/tutorials/payments/send-a-timed-escrow/",
-    ],
-  },
-  "defi": {
-    description: "Trade, provide liquidity, and lend using native XRP Ledger DeFi features.",
-    pinned: [
-      "/docs/tutorials/defi/dex/create-an-automated-market-maker/",
-      "/docs/tutorials/defi/dex/trade-in-the-decentralized-exchange/",
-      "/docs/tutorials/defi/lending/use-the-lending-protocol/create-a-loan/",
-      "/docs/tutorials/defi/lending/use-single-asset-vaults/create-a-single-asset-vault/",
-    ],
-  },
-  "best-practices": {
-    description: "Learn recommended patterns for building reliable, secure applications on the XRP Ledger.",
-    pinned: [
-      "/docs/tutorials/best-practices/api-usage/",
-    ],
-  },
-  "compliance-features": {
-    title: "Compliance",
-    description: "Implement compliance controls like destination tags, credentials, and permissioned domains.",
-  },
-  "programmability": {
-    description: "Set up cross-chain bridges and submit interoperability transactions.",
-  },
-  "advanced-developer-topics": {
-    description: "Explore advanced topics like WebSocket monitoring and testing Devnet features.",
-  },
-  "sample-apps": {
-    description: "Build complete, end-to-end applications like wallets and credential services.",
-    pinned: [
+    tutorials: [
      {
-        title: "XRPL Lending Protocol Demo",
-        description: "A full-stack web application that demonstrates the end-to-end flow of the Lending Protocol and Single Asset Vaults.",
-        author: { name: "Aaditya-T", url: "https://github.com/Aaditya-T" },
-        github: "https://github.com/Aaditya-T/lending_test",
-        url: "https://lending-test-lovat.vercel.app/",
+        title: "Issue a Multi-Purpose Token",
+        body: "Issue new tokens using the v2 fungible token standard.",
+        path: "/docs/tutorials/tokens/mpts/issue-a-multi-purpose-token/",
+      },
+      {
+        title: "Issue a Fungible Token",
+        body: "Issue new tokens using the v1 fungible token standard.",
+        path: "/docs/tutorials/tokens/fungible-tokens/issue-a-fungible-token/",
+      },
+      {
+        title: "Mint and Burn NFTs Using JavaScript",
+        body: "Create new NFTs, retrieve existing tokens, and burn the ones you no longer need.",
+        path: "/docs/tutorials/tokens/nfts/mint-and-burn-nfts-js/",
+        icon: "javascript",
      },
    ],
  },
-}
-
-// ── Components ──────────────────────────────────────────────────────────────
+  {
+    id: "payments",
+    title: "Payments",
+    description: "Transfer XRP and issued currencies using various payment types.",
+    tutorials: [
+      {
+        title: "Send XRP",
+        body: "Send a direct XRP payment to another account.",
+        path: "/docs/tutorials/payments/send-xrp/",
+      },
+      {
+        title: "Sending MPTs in JavaScript",
+        body: "Send a Multi-Purpose Token (MPT) to another account with the JavaScript SDK.",
+        path: "/docs/tutorials/tokens/mpts/sending-mpts-in-javascript/",
+        icon: "javascript",
+      },
+      {
+        title: "Create Trust Line and Send Currency in JavaScript",
+        body: "Set up trust lines and send issued currencies with the JavaScript SDK.",
+        path: "/docs/tutorials/payments/create-trust-line-send-currency-in-javascript/",
+        icon: "javascript",
+      },
+      {
+        title: "Create Trust Line and Send Currency in Python",
+        body: "Set up trust lines and send issued currencies with the Python SDK.",
+        path: "/docs/tutorials/payments/create-trust-line-send-currency-in-python/",
+        icon: "python",
+      },
+      {
+        title: "Send a Conditional Escrow",
+        body: "Send an escrow that can be released when a specific crypto-condition is fulfilled.",
+        path: "/docs/tutorials/payments/send-a-conditional-escrow/",
+      },
+      {
+        title: "Send a Timed Escrow",
+        body: "Send an escrow whose only condition for release is that a specific time has passed.",
+        path: "/docs/tutorials/payments/send-a-timed-escrow/",
+      },
+    ],
+  },
+  {
+    id: "defi",
+    title: "DeFi",
+    description: "Trade, provide liquidity, and lend using native XRP Ledger DeFi features.",
+    tutorials: [
+      {
+        title: "Create an Automated Market Maker",
+        body: "Set up an AMM for a token pair and provide liquidity.",
+        path: "/docs/tutorials/defi/dex/create-an-automated-market-maker/",
+      },
+      {
+        title: "Trade in the Decentralized Exchange",
+        body: "Buy and sell tokens in the Decentralized Exchange (DEX).",
+        path: "/docs/tutorials/defi/dex/trade-in-the-decentralized-exchange/",
+      },
+      {
+        title: "Create a Loan Broker",
+        body: "Set up a loan broker to create and manage loans.",
+        path: "/docs/tutorials/defi/lending/use-the-lending-protocol/create-a-loan-broker/",
+      },
+      {
+        title: "Create a Loan",
+        body: "Create a loan on the XRP Ledger.",
+        path: "/docs/tutorials/defi/lending/use-the-lending-protocol/create-a-loan/",
+      },
+      {
+        title: "Create a Single Asset Vault",
+        body: "Create a single asset vault on the XRP Ledger.",
+        path: "/docs/tutorials/defi/lending/use-single-asset-vaults/create-a-single-asset-vault/",
+      },
+      {
+        title: "Deposit into a Vault",
+        body: "Deposit assets into a vault and receive shares.",
+        path: "/docs/tutorials/defi/lending/use-single-asset-vaults/deposit-into-a-vault/",
+      },
+    ],
+  },
+  {
+    id: "best-practices",
+    title: "Best Practices",
+    description: "Learn recommended patterns for building reliable, secure applications on the XRP Ledger.",
+    tutorials: [
+      {
+        title: "API Usage",
+        body: "Best practices for using XRP Ledger APIs.",
+        path: "/docs/tutorials/best-practices/api-usage/",
+      },
+      {
+        title: "Use Tickets",
+        body: "Use tickets to send transactions out of the normal order.",
+        path: "/docs/tutorials/best-practices/transaction-sending/use-tickets/",
+      },
+      {
+        title: "Send a Single Account Batch Transaction",
+        body: "Group multiple transactions together and execute them as a single atomic operation.",
+        path: "/docs/tutorials/best-practices/transaction-sending/send-a-single-account-batch-transaction/",
+      },
+      {
+        title: "Assign a Regular Key Pair",
+        body: "Assign a regular key pair for signing transactions.",
+        path: "/docs/tutorials/best-practices/key-management/assign-a-regular-key-pair/",
+      },
+      {
+        title: "Set Up Multi-Signing",
+        body: "Configure multi-signing for enhanced security.",
+        path: "/docs/tutorials/best-practices/key-management/set-up-multi-signing/",
+      },
+      {
+        title: "Send a Multi-Signed Transaction",
+        body: "Send a transaction with multiple signatures.",
+        path: "/docs/tutorials/best-practices/key-management/send-a-multi-signed-transaction/",
+      },
+    ],
+  },
+  {
+    id: "sample-apps",
+    title: "Sample Apps",
+    description: "Build complete, end-to-end applications like wallets and credential services.",
+    tutorials: [
+      {
+        title: "Build a Browser Wallet in JavaScript",
+        body: "Build a browser wallet for the XRP Ledger using JavaScript and various libraries.",
+        path: "/docs/tutorials/sample-apps/build-a-browser-wallet-in-javascript/",
+        icon: "javascript",
+      },
+      {
+        title: "Build a Desktop Wallet in JavaScript",
+        body: "Build a desktop wallet for the XRP Ledger using JavaScript, the Electron Framework, and various libraries.",
+        path: "/docs/tutorials/sample-apps/build-a-desktop-wallet-in-javascript/",
+        icon: "javascript",
+      },
+      {
+        title: "Build a Desktop Wallet in Python",
+        body: "Build a desktop wallet for the XRP Ledger using Python and various libraries.",
+        path: "/docs/tutorials/sample-apps/build-a-desktop-wallet-in-python/",
+        icon: "python",
+      },
+      {
+        title: "Credential Issuing Service in JavaScript",
+        body: "Build a credential issuing service using the JavaScript SDK.",
+        path: "/docs/tutorials/sample-apps/credential-issuing-service-in-javascript/",
+        icon: "javascript",
+      },
+      {
+        title: "Credential Issuing Service in Python",
+        body: "Build a credential issuing service using the Python SDK.",
+        path: "/docs/tutorials/sample-apps/credential-issuing-service-in-python/",
+        icon: "python",
+      },
+    ],
+  },
+]

 function TutorialCard({
  tutorial,
@@ -162,10 +267,12 @@ function TutorialCard({
  showFooter?: boolean
  translate: (text: string) => string
 }) {
-  // Get icons from auto-detected languages, or fallback to XRPL icon.
-  const icons = detectedLanguages && detectedLanguages.length > 0
-    ? detectedLanguages.map((lang) => langIcons[lang]).filter(Boolean)
-    : [langIcons.xrpl]
+  // Get icons: manual icon takes priority, then auto-detected languages, then XRPL fallback
+  const icons = tutorial.icon && langIcons[tutorial.icon]
+      ? [langIcons[tutorial.icon]]
+      : detectedLanguages && detectedLanguages.length > 0
+        ? detectedLanguages.map((lang) => langIcons[lang]).filter(Boolean)
+        : [langIcons.xrpl]

  return (
    <Link to={tutorial.path} className="card">
@@ -178,220 +285,13 @@ function TutorialCard({
      </div>
      <div className="card-body">
        <h4 className="card-title h5">{translate(tutorial.title)}</h4>
-        {tutorial.description && <p className="card-text">{translate(tutorial.description)}</p>}
+        {tutorial.body && <p className="card-text">{translate(tutorial.body)}</p>}
      </div>
      {showFooter && <div className="card-footer"></div>}
    </Link>
  )
 }

-// Inline meta link used in ContributionCard
-function MetaLink({ href, icon, label }: {
-  href: string
-  icon: string
-  label: string
-}) {
-  return (
-    <a href={href} target="_blank" rel="noopener noreferrer" className="meta-link">
-      <i className={`fa fa-${icon}`} aria-hidden="true" />
-      {label}
-    </a>
-  )
-}
-
-// Community Contribution Card
-function ContributionCard({
-  tutorial,
-  translate,
-}: {
-  tutorial: Tutorial
-  translate: (text: string) => string
-}) {
-  const primaryUrl = tutorial.externalUrl || tutorial.github!
-
-  const handleCardClick = (e: React.MouseEvent | React.KeyboardEvent) => {
-    if ((e.target as HTMLElement).closest(".card-meta-row")) return
-    window.open(primaryUrl, "_blank", "noopener,noreferrer")
-  }
-
-  return (
-    <div
-      className="card contribution-card"
-      onClick={handleCardClick}
-      onKeyDown={(e) => { if (e.key === "Enter") handleCardClick(e) }}
-      role="link"
-      tabIndex={0}
-    >
-      <div className="card-header contribution-header">
-        <span className="circled-logo contribution-icon">
-          <i className="fa fa-users" aria-hidden="true" />
-        </span>
-        <div className="card-meta-row">
-          {tutorial.author && (
-            <>
-              <MetaLink href={tutorial.author.url} icon="user" label={tutorial.author.name} />
-              <span className="meta-dot" aria-hidden="true">·</span>
-            </>
-          )}
-          <MetaLink href={tutorial.github!} icon="github" label={translate("GitHub")} />
-        </div>
-      </div>
-      <div className="card-body">
-        <h4 className="card-title h5">
-          {translate(tutorial.title)}
-          <span className="card-external-icon" aria-label={translate("External link")}>
-            <i className="fa fa-external-link" aria-hidden="true" />
-          </span>
-        </h4>
-        {tutorial.description && <p className="card-text">{translate(tutorial.description)}</p>}
-      </div>
-    </div>
-  )
-}
-
-// Reusable section block for rendering tutorial sections
-function TutorialSectionBlock({
-  id,
-  title,
-  description,
-  tutorials,
-  tutorialLanguages,
-  showFooter = false,
-  maxTutorials,
-  className = "",
-  translate,
-}: {
-  id: string
-  title: string
-  description: string
-  tutorials: Tutorial[]
-  tutorialLanguages: TutorialLanguagesMap
-  showFooter?: boolean
-  maxTutorials?: number
-  className?: string
-  translate: (text: string) => string
-}) {
-  const [expanded, setExpanded] = useState(false)
-  const sectionRef = useRef<HTMLElement>(null)
-  const hasMore = maxTutorials ? tutorials.length > maxTutorials : false
-  const displayTutorials = maxTutorials && !expanded ? tutorials.slice(0, maxTutorials) : tutorials
-
-  const handleToggle = () => {
-    if (expanded && sectionRef.current) {
-      const offsetTop = sectionRef.current.getBoundingClientRect().top + window.scrollY
-      setExpanded(false)
-      requestAnimationFrame(() => {
-        window.scrollTo({ top: offsetTop - 20 })
-      })
-    } else {
-      setExpanded(true)
-    }
-  }
-
-  return (
-    <section ref={sectionRef} className={`container-new pt-10 pb-14 ${className}`.trim()} id={id}>
-      <div className="col-12 col-xl-8 p-0">
-        <h3 className="h4 mb-3">{translate(title)}</h3>
-        <p className="mb-4">{translate(description)}</p>
-      </div>
-      <div className="row tutorial-cards">
-        {displayTutorials.map((tutorial) => (
-          <div key={tutorial.path} className="col-lg-4 col-md-6 mb-5">
-            {tutorial.github ? (
-              <ContributionCard tutorial={tutorial} translate={translate} />
-            ) : (
-              <TutorialCard
-                tutorial={tutorial}
-                detectedLanguages={tutorialLanguages[tutorial.path]}
-                showFooter={showFooter}
-                translate={translate}
-              />
-            )}
-          </div>
-        ))}
-      </div>
-      {hasMore && (
-        <div className="explore-more-wrapper">
-          <button
-            className="explore-more-link"
-            onClick={handleToggle}
-          >
-            {expanded ? translate("Show less") : translate("Explore more")} {expanded ? "↑" : "→"}
-          </button>
-        </div>
-      )}
-    </section>
-  )
-}
-
-// Copyable URL component with click-to-copy functionality
-function CopyableUrl({ url, translate }: { url: string; translate: (text: string) => string }) {
-  const [copied, setCopied] = useState(false)
-
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(url)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    } catch (err) {
-      console.error("Failed to copy:", err)
-    }
-  }
-
-  return (
-    <button
-      type="button"
-      className={`quick-ref-value-btn ${copied ? "copied" : ""}`}
-      onClick={handleCopy}
-      title={copied ? translate("Copied!") : translate("Click to copy")}
-    >
-      <code className="quick-ref-value">{url}</code>
-      <span className="copy-icon">{copied ? "✓" : ""}</span>
-    </button>
-  )
-}
-
-// Quick reference card showing public server URLs and faucet link
-function QuickReferenceCard({ translate }: { translate: (text: string) => string }) {
-  return (
-    <div className="quick-ref-card">
-      <div className="quick-ref-section">
-        <span className="quick-ref-label">{translate("PUBLIC SERVERS")}</span>
-        <div className="quick-ref-group">
-          <span className="quick-ref-key"><strong>{translate("Mainnet")}</strong></span>
-          <div className="quick-ref-urls">
-            <span className="quick-ref-protocol">{translate("WebSocket")}</span>
-            <CopyableUrl url="wss://xrplcluster.com" translate={translate} />
-            <span className="quick-ref-protocol">{translate("JSON-RPC")}</span>
-            <CopyableUrl url="https://xrplcluster.com" translate={translate} />
-          </div>
-        </div>
-        <div className="quick-ref-group">
-          <span className="quick-ref-key"><strong>{translate("Testnet")}</strong></span>
-          <div className="quick-ref-urls">
-            <span className="quick-ref-protocol">{translate("WebSocket")}</span>
-            <CopyableUrl url="wss://s.altnet.rippletest.net:51233" translate={translate} />
-            <span className="quick-ref-protocol">{translate("JSON-RPC")}</span>
-            <CopyableUrl url="https://s.altnet.rippletest.net:51234" translate={translate} />
-          </div>
-        </div>
-        <Link to="/docs/tutorials/public-servers/" className="quick-ref-link">
-          {translate("View all servers")} →
-        </Link>
-      </div>
-      <div className="quick-ref-divider"></div>
-      <div className="quick-ref-section">
-        <Link to="/resources/dev-tools/xrp-faucets/" className="quick-ref-faucet">
-          <span>{translate("Get Test XRP")}</span>
-          <span className="quick-ref-arrow">→</span>
-        </Link>
-      </div>
-    </div>
-  )
-}
-
-// ── Page Component ──────────────────────────────────────────────────────────
-
 export default function TutorialsIndex() {
  const { useTranslate, usePageSharedData } = useThemeHooks()
  const { translate } = useTranslate()
@@ -399,160 +299,65 @@ export default function TutorialsIndex() {
  // Get auto-detected languages from the plugin (maps tutorial paths to language arrays).
  const tutorialLanguages = usePageSharedData<TutorialLanguagesMap>("tutorial-languages") || {}

-  // Get tutorial metadata and sidebar categories from the tutorial-metadata plugin.
-  const tutorialMetadata = usePageSharedData<{
-    tutorials: TutorialMetadataItem[]
-    categories: { id: string; title: string }[]
-  }>("tutorial-metadata")
-  const allTutorials = tutorialMetadata?.tutorials || []
-  const sidebarCategories = tutorialMetadata?.categories || []
-
-  // What's New: most recently modified tutorials, excluding Get Started.
-  const whatsNewConfig = sectionConfig["whats-new"]!
-  const getStartedPaths = new Set(
-    (sectionConfig["get-started"]?.pinned || []).map(getPinnedPath)
-  )
-  const whatsNewTutorials: Tutorial[] = allTutorials
-    .filter((tutorial) => !getStartedPaths.has(tutorial.path))
-    .slice(0, MAX_WHATS_NEW)
-    .map((tutorial) => toTutorial(tutorial))
-
-  // Category sections (including Get Started): ordered by sectionConfig, then any new sidebar categories.
-  const sections = buildCategorySections(sidebarCategories, allTutorials)
-
  return (
    <main className="landing page-tutorials landing-builtin-bg">
-      {/* Hero Section */}
-      <section className="container-new py-20">
-        <div className="row align-items-center">
-          <div className="col-lg-7">
-            <div className="d-flex flex-column-reverse">
-              <h1 className="mb-0">
-                {translate("Crypto Wallet and Blockchain Development Tutorials")}
-              </h1>
-              <h6 className="eyebrow mb-3">{translate("Tutorials")}</h6>
-            </div>
-            <nav className="mt-4">
-              <ul className="page-toc no-sideline d-flex flex-wrap gap-2 mb-0">
-                {whatsNewTutorials.length > 0 && (
-                  <li><Link to="#whats-new">{translate(whatsNewConfig.title)}</Link></li>
-                )}
-                {sections.map((section) => (
-                  <li key={section.id}><Link to={`#${section.id}`}>{translate(section.title)}</Link></li>
-                ))}
-              </ul>
-            </nav>
-          </div>
-          <div className="col-lg-5 mt-6 mt-lg-0">
-            <QuickReferenceCard translate={translate} />
+      <section className="container-new py-26">
+        <div className="col-lg-8 mx-auto text-lg-center">
+          <div className="d-flex flex-column-reverse">
+            <h1 className="mb-0">
+              {translate("Crypto Wallet and Blockchain Development Tutorials")}
+            </h1>
+            <h6 className="eyebrow mb-3">{translate("Tutorials")}</h6>
          </div>
+          {/* Table of Contents */}
+          <nav className="mt-4">
+            <ul className="page-toc no-sideline d-flex flex-wrap justify-content-center gap-2 mb-0">
+              <li><a href="#get-started">{translate("Get Started with SDKs")}</a></li>
+              {sections.map((section) => (
+                <li key={section.id}><a href={`#${section.id}`}>{translate(section.title)}</a></li>
+              ))}
+            </ul>
+          </nav>
        </div>
      </section>

-      {/* What's New */}
-      {whatsNewTutorials.length > 0 && (
-        <TutorialSectionBlock
-          id="whats-new"
-          title={whatsNewConfig.title!}
-          description={whatsNewConfig.description!}
-          tutorials={whatsNewTutorials}
-          tutorialLanguages={tutorialLanguages}
-          showFooter
-          className="whats-new-section pb-20"
-          translate={translate}
-        />
-      )}
+      {/* Get Started */}
+      <section className="container-new pt-10 pb-20" id="get-started">
+        <div className="col-12 col-xl-8 p-0">
+          <h3 className="h4 mb-3">{translate("Get Started with SDKs")}</h3>
+          <p className="mb-4">
+            {translate("These tutorials walk you through the basics of building a very simple XRP Ledger-connected application using your favorite programming language.")}
+          </p>
+        </div>
+        <div className="row tutorial-cards">
+          {getStartedTutorials.map((tutorial, idx) => (
+            <div key={idx} className="col-lg-4 col-md-6 mb-5">
+              <TutorialCard tutorial={tutorial} showFooter translate={translate} />
+            </div>
+          ))}
+        </div>
+      </section>

-      {/* Tutorial Sections */}
+      {/* Other Tutorials */}
      {sections.map((section) => (
-        <TutorialSectionBlock
-          key={section.id}
-          id={section.id}
-          title={section.title}
-          description={section.description}
-          tutorials={section.tutorials}
-          tutorialLanguages={tutorialLanguages}
-          maxTutorials={section.showFooter ? undefined : MAX_TUTORIALS_PER_SECTION}
-          showFooter={section.showFooter}
-          className={section.showFooter ? "pb-20" : "category-section"}
-          translate={translate}
-        />
+        <section className="container-new pt-10 pb-10" key={section.id} id={section.id}>
+          <div className="col-12 col-xl-8 p-0">
+            <h3 className="h4 mb-3">{translate(section.title)}</h3>
+            <p className="mb-4">{translate(section.description)}</p>
+          </div>
+          <div className="row tutorial-cards">
+            {section.tutorials.slice(0, 6).map((tutorial, idx) => (
+              <div key={idx} className="col-lg-4 col-md-6 mb-5">
+                <TutorialCard
+                  tutorial={tutorial}
+                  detectedLanguages={tutorialLanguages[tutorial.path]}
+                  translate={translate}
+                />
+              </div>
+            ))}
+          </div>
+        </section>
      ))}
    </main>
  )
 }
-
-// ── Helpers ──────────────────────────────────────────────────────────────────
-
-/** Type guard for external community contributions */
-function isExternalContribution(entry: PinnedTutorial): entry is PinnedExternalTutorial {
-  return typeof entry !== "string" && "github" in entry
-}
-
-/** Get path from pinned tutorial entry*/
-function getPinnedPath(entry: PinnedTutorial): string {
-  return typeof entry === "string" ? entry : isExternalContribution(entry) ? entry.github : entry.path
-}
-
-/** Convert tutorial metadata to the common Tutorial type */
-function toTutorial(t: TutorialMetadataItem, descriptionOverride?: string): Tutorial {
-  return {
-    title: t.title,
-    description: descriptionOverride || t.description,
-    path: t.path,
-  }
-}
-
-/** Build Tutorial objects from pinned entries, resolving metadata for internal paths */
-function buildPinnedTutorials(entries: PinnedTutorial[], allTutorials: TutorialMetadataItem[]): Tutorial[] {
-  return entries
-    .map((entry): Tutorial | null => {
-      if (isExternalContribution(entry)) {
-        return {
-          title: entry.title,
-          description: entry.description,
-          path: entry.url || entry.github,
-          author: entry.author,
-          github: entry.github,
-          externalUrl: entry.url,
-        }
-      }
-      const path = getPinnedPath(entry)
-      const descOverride = typeof entry === "string" ? undefined : entry.description
-      const metadata = allTutorials.find((t) => t.path === path)
-      return metadata ? toTutorial(metadata, descOverride) : null
-    })
-    .filter((t): t is Tutorial => t !== null)
-}
-
-/** Build category sections ordered by sectionConfig, with new sidebar categories appended */
-function buildCategorySections(
-  sidebarCategories: { id: string; title: string }[],
-  allTutorials: TutorialMetadataItem[],
-): TutorialSection[] {
-  const specialIds = new Set(["whats-new"])
-  const sidebarMap = new Map(sidebarCategories.map((category) => [category.id, category]))
-  const allPinnedPaths = new Set(
-    Object.values(sectionConfig).flatMap((config) => (config.pinned || []).map(getPinnedPath))
-  )
-
-  // Sections follow sectionConfig key order. New sidebar categories not in sectionConfig are appended at the end.
-  const configIds = Object.keys(sectionConfig).filter((id) => !specialIds.has(id))
-  const newIds = sidebarCategories
-    .filter((category) => !specialIds.has(category.id) && !sectionConfig[category.id])
-    .map((category) => category.id)
-
-  return [...configIds, ...newIds]
-    .filter((id) => sidebarMap.has(id))
-    .map((id) => {
-      const config = sectionConfig[id]
-      const title = config?.title || sidebarMap.get(id)!.title
-      const description = config?.description || ""
-      const pinned = buildPinnedTutorials(config?.pinned || [], allTutorials)
-      const remaining = allTutorials
-        .filter((t) => t.category === id && !allPinnedPaths.has(t.path))
-        .map((t) => toTutorial(t))
-      return { id, title, description, tutorials: [...pinned, ...remaining], showFooter: config?.showFooter }
-    })
-    .filter((section) => section.tutorials.length > 0)
-}
--- a/redocly.yaml
+++ b/redocly.yaml
@@ -28,10 +28,18 @@ responseHeaders:
      value: noindex
 search:
  engine: typesense
-  ai:
-    hide: true
  filters:
    hide: true
+aiAssistant:
+  hide: false
+mcp:
+  hide: false
+  docs:
+    hide: false
+    name: "xrpl.org MCP server"
+    ignore:
+      - ja/**
+      - es-es/**
 metadataGlobs:
  'docs/**':
    redocly_category: Documentation
--- a/static/css/devportal2024-v1.css
+++ b/static/css/devportal2024-v1.css
--- a/styles/_cards.scss
+++ b/styles/_cards.scss
@@ -320,3 +320,128 @@ main article .card-grid {
  margin-bottom: 0.25rem;
  margin-top: 0.5rem;
 }
+
+/* Tutorial cards */
+.page-tutorials .tutorial-cards {
+  > div {
+    display: flex;
+  }
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    min-height: 280px;
+    transition: all 0.35s ease-out;
+    cursor: pointer;
+
+    &:hover {
+      transform: translateY(-16px);
+    }
+
+    .card-header {
+      border-bottom: none;
+      background: transparent;
+      padding: 1.5rem 1.5rem 0 2rem;
+    }
+
+    .circled-logo {
+      margin-left: -10px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .card-body {
+      padding: 1rem 1.5rem;
+      flex: 1;
+    }
+
+    .card-title {
+      font-weight: 700;
+      margin-bottom: 1rem;
+    }
+
+    .card-text {
+      font-size: 1rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .card-footer {
+      background-color: transparent;
+      border-top: none;
+      padding: 0;
+      height: 40px;
+      background-size: cover;
+      background-position: bottom;
+      background-repeat: no-repeat;
+      margin-top: auto;
+    }
+  }
+
+  // Apply colored footers to each card
+  > div:nth-child(1) .card .card-footer {
+    background-image: url("../img/cards/3-col-pink.svg");
+  }
+  > div:nth-child(2) .card .card-footer {
+    background-image: url("../img/cards/3col-blue-light-blue.svg");
+  }
+  > div:nth-child(3) .card .card-footer {
+    background-image: url("../img/cards/3-col-light-blue.svg");
+  }
+  > div:nth-child(4) .card .card-footer {
+    background-image: url("../img/cards/3col-blue-green.svg");
+  }
+  > div:nth-child(5) .card .card-footer {
+    background-image: url("../img/cards/3col-magenta.svg");
+  }
+  > div:nth-child(6) .card .card-footer {
+    background-image: url("../img/cards/3-col-orange.svg");
+  }
+}
+
+.light .page-tutorials .tutorial-cards .circled-logo img[alt="HTTP / WebSocket"] {
+  filter: invert(1);
+}
+
+// TOC buttons for tutorials page
+.page-tutorials .page-toc.no-sideline {
+  border-left: none;
+  gap: 0.75rem;
+
+  li {
+    a {
+      border-radius: 100px;
+      padding: 0.5rem 1rem;
+      margin: 0;
+      background-color: $gray-800;
+      color: $gray-200;
+      font-weight: 500;
+      transition: all 0.2s ease;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: $blue-purple-500;
+        color: $white;
+        border-left: none;
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+.light .page-tutorials .page-toc.no-sideline {
+  li a {
+    background-color: $gray-200;
+    color: $gray-800;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: $blue-purple-500;
+      color: $white;
+    }
+  }
+}
--- a/styles/_tutorials.scss
+++ b/styles/_tutorials.scss
@@ -1,489 +0,0 @@
-// Tutorials landing page styles
-
-// Card footer gradient images
-$card-footers: (
-  "3-col-pink",
-  "3col-blue-light-blue",
-  "3-col-light-blue",
-  "3col-blue-green",
-  "3col-magenta",
-  "3-col-orange"
-);
-
-$whats-new-footers: (
-  "3col-green-purple",
-  "3col-purple-blue-green",
-  "3col-green-blue"
-);
-
-// Tutorial cards
-.page-tutorials .tutorial-cards {
-  > div {
-    display: flex;
-  }
-
-  .card {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-    min-height: 300px;
-    transition: all 0.35s ease-out;
-    cursor: pointer;
-
-    &:hover {
-      transform: translateY(-16px);
-    }
-
-    .card-header {
-      border-bottom: none;
-      background: transparent;
-      padding: 1.5rem 1.5rem 0 2rem;
-    }
-
-    .circled-logo {
-      margin-left: -10px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .card-body {
-      padding: 1rem 1.5rem;
-      flex: 1;
-    }
-
-    .card-title {
-      font-weight: 700;
-      margin-bottom: 1rem;
-    }
-
-    .card-text {
-      font-size: 1rem;
-      margin-bottom: 1.5rem;
-    }
-
-    .card-footer {
-      background-color: transparent;
-      border-top: none;
-      padding: 0;
-      height: 40px;
-      background-size: cover;
-      background-position: bottom;
-      background-repeat: no-repeat;
-      margin-top: auto;
-    }
-  }
-
-  // Apply colored footers to each card
-  @for $i from 1 through length($card-footers) {
-    > div:nth-child(#{$i}) .card .card-footer {
-      background-image: url("../img/cards/#{nth($card-footers, $i)}.svg");
-    }
-  }
-}
-
-// Light mode: invert HTTP/WebSocket icon
-.light .page-tutorials .tutorial-cards .circled-logo img[alt="HTTP / WebSocket"] {
-  filter: invert(1);
-}
-
-// Contribution Card - community contribution with meta links
-.page-tutorials .tutorial-cards .contribution-card {
-  .contribution-header {
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
-  }
-
-  .contribution-icon {
-    background: rgba($blue-purple-500, 0.15);
-    color: $blue-purple-300;
-    font-size: 26px;
-  }
-
-  .card-external-icon {
-    font-size: 0.85rem;
-    margin-left: 0.35rem;
-    color: $gray-500;
-    vertical-align: middle;
-  }
-
-  .card-meta-row {
-    display: flex;
-    align-items: center;
-    gap: 0.4rem;
-    font-size: 0.8rem;
-    flex-wrap: wrap;
-    margin-left: auto;
-    margin-top: -4px;
-
-    .meta-link {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.35rem;
-      color: $gray-300;
-      text-decoration: none;
-      transition: color 0.15s ease;
-
-      .fa {
-        font-size: 0.8rem;
-      }
-
-      &:hover {
-        color: $blue-purple-300;
-      }
-    }
-
-    .meta-dot {
-      color: $gray-500;
-      font-weight: bold;
-      user-select: none;
-    }
-  }
-}
-
-// Light mode: Contribution Card
-.light .page-tutorials .tutorial-cards .contribution-card {
-  .contribution-icon {
-    background: rgba($blue-purple-500, 0.1);
-    color: $blue-purple-600;
-  }
-
-  .card-meta-row {
-    .meta-link {
-      color: $gray-600;
-
-      &:hover {
-        color: $blue-purple-600;
-      }
-    }
-
-    .meta-dot {
-      color: $gray-500;
-    }
-  }
-}
-
-// Tutorial category section spacing
-.page-tutorials .category-section + .category-section {
-  margin-top: 2rem;
-}
-
-// Explore more link
-.page-tutorials .explore-more-wrapper {
-  margin-top: -1.5rem;
-  margin-bottom: 1.5rem;
-
-  .explore-more-link {
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    font-family: inherit;
-    font-size: 1.05rem;
-    color: $blue-purple-300;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
-
-.light .page-tutorials .explore-more-wrapper .explore-more-link {
-  color: $blue-purple-600;
-}
-
-// TOC navigation buttons
-.page-tutorials .page-toc.no-sideline {
-  border-left: none;
-  gap: 0.75rem;
-
-  li {
-    a {
-      border-radius: 100px;
-      padding: 0.5rem 1rem;
-      margin: 0;
-      background-color: $gray-800;
-      color: $gray-200;
-      font-weight: 500;
-      transition: all 0.2s ease;
-
-      &:hover,
-      &:focus,
-      &:active {
-        background-color: $blue-purple-500;
-        color: $white;
-        border-left: none;
-        margin-left: 0;
-      }
-    }
-  }
-}
-
-// Light mode: TOC buttons
-.light .page-tutorials .page-toc.no-sideline {
-  li a {
-    background-color: $gray-200;
-    color: $gray-800;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: $blue-purple-500;
-      color: $white;
-    }
-  }
-}
-
-// What's New section
-.whats-new-section {
-  // Gradient underline on section title
-  h3 {
-    display: inline-block;
-    position: relative;
-    padding-bottom: 8px;
-
-    &::after {
-      content: "";
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 60px;
-      height: 3px;
-      background: linear-gradient(90deg, $blue-purple-500, $green-400);
-      border-radius: 2px;
-    }
-  }
-
-  // Different footer colors for What's New cards
-  .tutorial-cards {
-    @for $i from 1 through length($whats-new-footers) {
-      > div:nth-child(#{$i}) .card .card-footer {
-        background-image: url("../img/cards/#{nth($whats-new-footers, $i)}.svg");
-      }
-    }
-  }
-}
-
-// Quick Reference Card
-.page-tutorials .quick-ref-card {
-  background: rgba($gray-800, 0.7);
-  border: 1px solid $gray-700;
-  border-left: 3px solid $blue-purple-500;
-  border-radius: 12px;
-  padding: 1rem 1.5rem;
-  backdrop-filter: blur(8px);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-  margin-left: auto;
-  max-width: 480px;
-
-  @media (max-width: 991px) {
-    margin-left: 0;
-    max-width: 100%;
-  }
-
-  .quick-ref-section {
-    padding: 0.25rem 0;
-  }
-
-  .quick-ref-label {
-    display: block;
-    font-size: 0.7rem;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    color: $blue-purple-300;
-    margin-bottom: 0.75rem;
-  }
-
-  .quick-ref-group {
-    margin-bottom: 0.75rem;
-
-    &:last-of-type {
-      margin-bottom: 0.5rem;
-    }
-  }
-
-  .quick-ref-key {
-    display: block;
-    font-size: 0.85rem;
-    color: $gray-300;
-    margin-bottom: 0.35rem;
-
-    strong {
-      font-weight: 700;
-      color: $white;
-    }
-  }
-
-  .quick-ref-urls {
-    display: grid;
-    grid-template-columns: auto auto;
-    gap: 0.25rem 0.75rem;
-    align-items: center;
-    width: fit-content;
-    max-width: 100%;
-
-    @media (max-width: 576px) {
-      grid-template-columns: 1fr;
-      gap: 0.2rem;
-    }
-  }
-
-  .quick-ref-protocol {
-    font-size: 0.7rem;
-    font-weight: 500;
-    color: $gray-500;
-    letter-spacing: 0.02em;
-  }
-
-  .quick-ref-value {
-    font-size: 0.75rem;
-    color: $blue-purple-300;
-    background: rgba($gray-900, 0.5);
-    padding: 0.2rem 0.5rem;
-    border-radius: 4px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 100%;
-  }
-
-  .quick-ref-value-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    transition: opacity 0.2s ease;
-    max-width: 100%;
-    overflow: hidden;
-
-    &:hover {
-      opacity: 0.8;
-
-      .quick-ref-value {
-        background: rgba($gray-800, 0.8);
-      }
-    }
-
-    &.copied .quick-ref-value {
-      background: rgba($green-500, 0.2);
-      color: $green-400;
-    }
-
-    .copy-icon {
-      font-size: 0.7rem;
-      color: $green-400;
-      min-width: 0.8rem;
-      flex-shrink: 0;
-    }
-
-    @media (max-width: 576px) {
-      margin-bottom: 0.5rem;
-    }
-  }
-
-  .quick-ref-link {
-    display: inline-block;
-    font-size: 0.8rem;
-    color: $blue-purple-300;
-    margin-top: 0.35rem;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  .quick-ref-divider {
-    height: 1px;
-    background: $gray-700;
-    margin: 0.5rem 0;
-  }
-
-  .quick-ref-faucet {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 0.9rem;
-    font-weight: 500;
-    color: $white;
-    text-decoration: none;
-    padding: 0.25rem 0;
-
-    &:hover {
-      color: $blue-purple-300;
-    }
-
-    .quick-ref-arrow {
-      color: $blue-purple-400;
-    }
-  }
-}
-
-// Light mode: Quick Reference Card
-.light .page-tutorials .quick-ref-card {
-  background: rgba($white, 0.95);
-  border-color: $gray-300;
-  border-left: 3px solid $blue-purple-500;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
-
-  .quick-ref-label {
-    color: $blue-purple-600;
-  }
-
-  .quick-ref-key {
-    color: $gray-700;
-
-    strong {
-      color: $gray-900;
-    }
-  }
-
-  .quick-ref-protocol {
-    color: $gray-500;
-  }
-
-  .quick-ref-value {
-    color: $blue-purple-600;
-    background: rgba($gray-300, 0.6);
-  }
-
-  .quick-ref-value-btn {
-    &:hover .quick-ref-value {
-      background: rgba($gray-400, 0.6);
-    }
-
-    &.copied .quick-ref-value {
-      background: rgba($green-500, 0.15);
-      color: $green-700;
-    }
-
-    .copy-icon {
-      color: $green-600;
-    }
-  }
-
-  .quick-ref-link {
-    color: $blue-purple-600;
-  }
-
-  .quick-ref-divider {
-    background: $gray-200;
-  }
-
-  .quick-ref-faucet {
-    color: $gray-900;
-
-    &:hover {
-      color: $blue-purple-600;
-    }
-
-    .quick-ref-arrow {
-      color: $blue-purple-500;
-    }
-  }
-}
--- a/styles/xrpl.scss
+++ b/styles/xrpl.scss
@@ -69,7 +69,6 @@ $line-height-base: 1.5;
@import "_pages.scss";
@import "_rpc-tool.scss";
@import "_blog.scss";
-@import "_tutorials.scss";
@import "_feedback.scss";
@import "_video.scss";
@import "_contribute.scss";
Author	SHA1	Message	Date
Maria Shodunke	9b72e6c6ff	VODF-172 - Add Batch transaction integration considerations	2026-04-14 12:40:11 +01:00
oeggert	7b42cbb02a	Merge pull request #3600 from XRPLF/update-ai-config Update AI config on site	2026-04-13 11:28:31 -07:00
Oliver Eggert	0e4ae322f7	update config to include ai search and exclude japanese/spanish from mcp server results	2026-04-11 00:08:58 -07:00