Add tutorials landing & components

content/@theme/components/XRPLCard.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import dynamicReact from '@markdoc/markdoc/dist/react';
+
+
+export interface XRPLCardProps {
+    title: string,
+    href: string,
+    body?: string,
+    image?: string,
+    imageAlt?: string,
+    external: boolean,
+}
+
+export function XRPLCard(props: XRPLCardProps) {
+    return (
+        <a className="card float-up-on-hover" href={props.href} >
+            <div className="card-body">
+              { props.image && (
+                <div className="card-icon-container">
+                    <img src={props.image} alt={props.imageAlt} />
+                </div>
+              )}
+              <h4 className="card-title h5">{props.title}</h4>
+              { props.body && (
+                <p className="card-text">{props.body}</p>
+              )}
+            </div>
+            <div className="card-footer">&nbsp;</div>
+        </a>
+    )
+}
+
+export function CardGrid(props) {
+    const gridClass = `card-grid card-grid-${props.layout}`
+    return (
+        <div id={props.id} className={gridClass}>{dynamicReact(props.children, React, {})}</div>
+    )
+}

content/@theme/markdoc/components.tsx

@@ -6,6 +6,7 @@ import { Link } from '@portal/Link';
 import { idify } from '../helpers';
 
 export {default as XRPLoader} from '../components/XRPLoader';
+export { XRPLCard, CardGrid } from '../components/XRPLCard';
 
 
 export function IndexPageItems() {

content/@theme/markdoc/schema.ts

@@ -132,3 +132,48 @@ export const notEnabled: Schema & { tagName: string } = {
   render: 'NotEnabled',
   selfClosing: true,
 };
+
+export const xrplCard: Schema & { tagName: string } = {
+  tagName: 'xrpl-card',
+  attributes: {
+    title: {
+      type: 'String',
+      required: true
+    },
+    href: {
+      type: 'String',
+      required: true
+    },
+    body: {
+      type: 'String',
+      required: false
+    },
+    image: {
+      type: 'String',
+      required: false
+    },
+    imageAlt: {
+      type: 'String',
+      required: false
+    },
+    external: { // Not actually implemented (yet)
+      type: 'Boolean',
+      required: false,
+      default: false
+    }
+  },
+  render: 'XRPLCard',
+  selfClosing: true
+}
+
+export const cardGrid: Schema & { tagName: string } = {
+  tagName: 'card-grid',
+  attributes: {
+    layout: {
+      type: 'String',
+      required: false,
+      default: '3xN'
+    }
+  },
+  render: 'CardGrid'
+}

content/sidebars.yaml

@@ -151,7 +151,7 @@
             items:
               - page: concepts/xrpl-sidechains/cross-chain-bridges.md
               - page: concepts/xrpl-sidechains/witness-servers.md
-      - group: Tutorials
+      - page: tutorials/index.md
         expanded: false
         items:
           - page: tutorials/get-started/public-servers.md

content/tutorials/index.md

@@ -0,0 +1,42 @@
+---
+seo:
+    description: The XRP Ledger tutorials walk you through the steps to learn and get started with the XRP Ledger and to use the ledger for advanced use cases.
+---
+# Tutorials
+
+The XRP Ledger tutorials walk you through the steps to learn and get started with the XRP Ledger and to use the ledger for advanced use cases.
+
+## Get Started with SDKs
+
+These tutorials walk you through the basics of building a very simple XRP Ledger-connected application using SDKs.
+
+{% card-grid %}
+
+{% xrpl-card title="Python" body="Using xrpl.py, a pure Python library." href="/tutorials/get-started/get-started-using-python/" image="/img/logos/python.svg" imageAlt="Python logo" /%}
+
+{% xrpl-card title="Java" body="Using xrpl4j, a pure Java library." href="/tutorials/get-started/get-started-using-java/" image="/img/logos/java.svg" imageAlt="Java logo" /%}
+
+{% xrpl-card title="Javascript" body="Using the xrpl.js client library." href="/tutorials/get-started/get-started-using-javascript/" image="/img/logos/javascript.svg" imageAlt="Javascript logo" /%}
+
+{% xrpl-card title="PHP" body="Using the XRPL_PHP client library." href="/tutorials/get-started/get-started-using-php/" image="/img/logos/php.svg" imageAlt="PHP logo" /%}
+
+{% xrpl-card title="HTTP & WebSocket APIs" body="Access the XRP Ledger directly through the APIs of its core server." href="/tutorials/get-started/get-started-using-http-websocket-apis/" image="/img/logos/globe.svg" imageAlt="globe icon" /%}
+
+{% /card-grid %}
+
+## XRP Ledger Use Cases
+
+{% card-grid %}
+{% xrpl-card title="Payments" body="Send and receive payments on the XRP Ledger." href="/use-cases/payments/index.md" /%}
+{% xrpl-card title="DeFi" body="Decentralized Finance (DeFi) is about enabling fast, secure financial transactions without a central authority." href="/use-cases/defi/index.md" /%}
+{% xrpl-card title="Tokens" body="Create and trade fungible and non-fungible tokens on the XRP Ledger." href="/use-cases/tokenization/index.md" /%}
+{% /card-grid %}
+
+## Manage XRP Ledger Servers
+
+{% card-grid %}
+{% xrpl-card title="Install rippled server" body="Set up the core XRP Ledger server." href="/infrastructure/installation/index.md" /%}
+{% xrpl-card title="Configure rippled server" body="Customize your core XRP Ledger server's settings." href="/infrastructure/configuration/index.md" /%}
+{% xrpl-card title="Troubleshooting" body="Diagnose and solve issues with XRP Ledger servers and infrastructure." href="/infrastructure/troubleshooting/index.md" /%}
+{% xrpl-card title="Install Clio server" body="Set up the Clio server for efficiently querying XRP Ledger data." href="/infrastructure/installation/install-clio-on-ubuntu.md" /%}
+{% /card-grid %}