Docs / Index page

[TizianoT]

Create index page for each section of the documentations https://www.figma.com/design/yUhKCI1kiXSKQOuywyaadd/SQLiteCloud---Marketing-Site-%26-Blog?node-id=4264-9089&t=YGXRFBdxpWD1kTPP-1

• [ ] add custom icon for each card link: ask babco @jacobprall
• [ ] add custom description for each card link @jacobprall

[TizianoT]

In the _nav.ts I changed the following lines:

• { title: "Getting Started", type: "secondary", icon: "docs-star" } --> { title: "Getting Started", filePath:"getting-started", type: "secondary", icon: "docs-star" }
• { title: "Platform", type: "secondary", icon: "docs-plat" } --> { title: "Platform", filePath:"platform", type: "secondary", icon: "docs-plat" }
• { title: "SDKs", type: "secondary", icon: "docs-sdk" } --> { title: "SDKs", filePath:"sdks", type: "secondary", icon: "docs-sdk" }
• { title: "Reference", type: "secondary", icon: "docs-ref" } --> { title: "Reference", filePath:"reference", type: "secondary", icon: "docs-ref" }

All the filePath keys have as value the slug property set in the index.md in the corresponding folder. For example:

• filePath:"platform" corresponds to --> docs-website/content/docs/sqlite-cloud/platform/index.mdx

Plus I added an icon property in the index.md files to define the icon shown in the title:

---
title: Platform 
description: Index page for platform section
category: platform
status: publish
icon: docs-plat
slug: platform
---

The content of each index.md is defined in this way:

• the variable introduction sets the introduction description for the page
• the array sections defines all the card links to the subpages

Then these two variables are passed to the IndexPage component.

export const introduction = "SQLite Cloud is a distributed relational database system built on top of the SQLite database engine. It has been specifically designed from the ground up to ensure the strong consistency of your data across all nodes in a cluster while simultaneously managing the technical aspects of scaling, security, and data distribution."

export const sections = [
    {
        icon: "puzzle",
        title: "Edge Functions",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        href: "/docs/edge-functions",
    },
    {
        icon: "puzzle",
        title: "Webhooks",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        href: "/docs/webhooks",
    },
    {
        icon: "puzzle",
        title: "Pub/Sub",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        href: "/docs/pub-sub",
    },
    {
        icon: "puzzle",
        title: "Vector",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        href: "/docs/vector",
    },
    {
        icon: "puzzle",
        title: "Scaling",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        href: "/docs/scaling",
    },
    {
        icon: "puzzle",
        title: "Security and Access Control",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        href: "/docs/security",
    },
    {
        icon: "puzzle",
        title: "Backups",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        href: "/docs/backups",
    },
    {
        icon: "puzzle",
        title: "Query Analyzer",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        href: "/docs/analyzer",
    },
    {
        icon: "puzzle",
        title: "Extensions",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        href: "/docs/extensions",
    },
    {
        icon: "puzzle",
        title: "Weblite",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        href: "/docs/weblite",
    },
    {
        icon: "puzzle",
        title: "Settings",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        href: "/docs/settings",
    },
]

<IndexPage introduction={introduction} sections={sections} />