Supra L1 Astro Documentation

Official documentation for Supra L1 on Astro.

Quick Start

# Clone the repo
git clone https://github.com/JatinSupra/Supra-docs-astro.git
cd Supra-docs-astro

# Install dependencies
npm install

# Start dev server
npm run dev

Current Documentation Sections

Overview - Introduction to Supra EVM
Build on SupraEVM Beta - Development guide
Network Information - RPC endpoints and configuration
Deploy Your First Contract - Step-by-step deployment

Tech Stack to Download Before You Start

Framework: Astro v5
Styling: Tailwind CSS v4
Components: MDX with custom components
Icons: Tabler Icons
Search: Pagefind
Theme: Solstice by Cosmic Themes

Contribution Guide

Fork and Clone the Repo.
Make changes & Test locally with npm run dev
Commit and push to your forked repo.
Create a Pull Request on the Main Repo on GitHub.

Project Structure

Main repo/
├── src/
│   ├── docs/
│   │   ├── components/          # Reusable UI components
│   │   ├── config/              # Site configuration
│   │   │   └── en/              # English config
│   │   │       ├── sidebarNavData.json.ts  # Sidebar/tabs structure
│   │   │       ├── navData.json.ts         # Top navigation
│   │   │       └── siteData.json.ts        # Site metadata
│   │   ├── data/
│   │   │   └── docs/
│   │   │       └── en/          # ALL DOCUMENTATION CONTENT HERE
│   │   │           ├── overview/
│   │   │           ├── build-on-supraev/
│   │   │           ├── network-info/
│   │   │           └── deploy-contract/
│   │   └── layouts/             # Page layouts
│   ├── styles/                  # Theme & colors
│   ├── icons/                   # Icon files
│   └── pages/                   # Page routing
├── public/                      # Static assets (images, etc.)
├── astro.config.mjs            # Astro configuration
└── tailwind.config.js          # Tailwind CSS config

Adding/Editing Content

Editing Existing Pages

All documentation content is in .mdx files located at:

src/docs/data/docs/en/[section-name]/index.mdx

Example: Editing "Overview"

Open src/docs/data/docs/en/overview/index.mdx
Edit the content (it's Markdown with React components)
Save - changes appear instantly!

Creating a New Page

Example: Adding "Advanced Topics" section

Step 1: Create the folder and file

cd src/docs/data/docs/en/
mkdir advanced-topics
cd advanced-topics
touch index.mdx

Step 2: Add frontmatter and content

---
title: Advanced Topics
description: Deep dive into Supra EVM
tab: advanced
sidebar:
  order: 1
  label: Advanced Topics
---

# Advanced Topics

Your content here...

## Section 1

More content...

Step 3: Add to sidebar configuration

Edit src/docs/config/en/sidebarNavData.json.ts:

{
  id: "advanced",
  title: "Advanced Topics",
  description: "Deep dive into Supra EVM",
  icon: "tabler/bulb",
  sections: [
    {
      id: "advanced-topics",
      title: "Advanced Topics",
    },
  ],
},

Important Notes:

tab: advanced in the .mdx file must match id: "advanced" in the sidebar config
Folder name (advanced-topics) must match the section id
The URL will be /docs/advanced-topics

Content Components

You can use these special components in your .mdx files:

Aside (Callout Boxes)

<Aside variant="tip">
  Helpful tip for users!
</Aside>

<Aside variant="caution">
  Warning: Be careful here!
</Aside>

<Aside variant="danger">
  Critical information!
</Aside>

<Aside variant="info">
  Additional information.
</Aside>

Steps

<Steps>
1. First step
2. Second step
3. Third step
</Steps>

Tabs

<Tabs>
  <TabsList>
    <TabsTrigger value="js">JavaScript</TabsTrigger>
    <TabsTrigger value="ts">TypeScript</TabsTrigger>
  </TabsList>
  
  <TabsContent value="js">
    ```javascript
    console.log("JavaScript code");
    ```
  </TabsContent>
  
  <TabsContent value="ts">
    ```typescript
    console.log("TypeScript code");
    ```
  </TabsContent>
</Tabs>

Code Blocks

```solidity
// Your Solidity code
contract Example {
    // ...
}
```

Managing Tabs & Sidebar

The sidebar with tabs is controlled by one file: src/docs/config/en/sidebarNavData.json.ts

Current Structure

const sidebarNavData: DocsSidebarNavData = {
  tabs: [
    {
      id: "overview",              // Unique ID (matches 'tab' in .mdx)
      title: "Overview",            // Display name
      description: "Intro text",    // Subtitle
      icon: "tabler/file-text",     // Icon name
      sections: [                   // Pages under this tab
        {
          id: "overview",           // Matches folder name
          title: "Overview",        // Display name
        },
      ],
    },
    // ... more tabs
  ],
};

Adding a New Tab

{
  id: "tutorials",
  title: "Tutorials",
  description: "Step-by-step guides",
  icon: "tabler/school",
  sections: [
    {
      id: "tutorial-defi",
      title: "Build a DeFi App",
    },
    {
      id: "tutorial-nft",
      title: "Create NFTs",
    },
  ],
},

Adding Multiple Pages to One Tab

{
  id: "build",
  title: "Build on SupraEVM Beta",
  description: "Start developing",
  icon: "tabler/stack-2",
  sections: [
    {
      id: "build-on-supraev",
      title: "Getting Started",
    },
    {
      id: "build-advanced",      // New page!
      title: "Advanced Patterns",
    },
    {
      id: "build-examples",      // Another new page!
      title: "Code Examples",
    },
  ],
},

Then create:

src/docs/data/docs/en/build-advanced/index.mdx
src/docs/data/docs/en/build-examples/index.mdx

Both with tab: build in their frontmatter.

Changing Theme & Colors

Edit src/styles/tailwind-theme.css:

@theme {
  /* Primary Colors */
  --color-primary: #FF0080;        /* Supra Pink */
  --color-primary-hover: #E0006B;
  
  /* Background Colors */
  --color-base-950: #0A0A0F;      /* Dark background */
  --color-base-900: #13131A;
  --color-base-800: #1F1F29;
  
  /* Accent Colors */
  --color-accent: #8B5CF6;        /* Purple accent */
  
  /* Success/Info/Warning */
  --color-success: #10B981;
  --color-info: #3B82F6;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
}

Changing Background Colors

/* Sidebar background */
--color-base-900: #13131A;

/* Content background */
--color-base-950: #0A0A0F;

/* Card backgrounds */
--color-base-800: #1F1F29;

Changing Button Colors

Edit src/docs/components/ button components or use Tailwind classes:

/* Primary button */
.btn-primary {
  background: var(--color-primary);
  color: white;
}

/* Secondary button */
.btn-secondary {
  background: var(--color-accent);
}

Changing Icons

Available Icons

Icons are in src/icons/tabler/. Currently available:

accessible.svg
alert-triangle.svg
api-app.svg
arrow-up-right.svg
bulb.svg
file-text.svg
flame.svg
info-circle.svg
school.svg
stack-2.svg
... and more

Using Icons in Tabs

In src/docs/config/en/sidebarNavData.json.ts:

{
  icon: "tabler/stack-2",     // Use existing icon
  icon: "tabler/bulb",        // Or another
  icon: "tabler/school",      // Or another
}

Adding New Icons

Download SVG from Tabler Icons
Save to src/icons/tabler/your-icon.svg
Use as icon: "tabler/your-icon"

Example:

# Download an icon SVG
curl -o src/icons/tabler/rocket.svg https://...

# Use in config
icon: "tabler/rocket"

Example

Change Supra Logo

File: public/logo.svg or public/images/logo.svg

Replace the file, keep the same filename.

Change Font

File: src/styles/tailwind-theme.css

@theme {
  --font-family: 'Inter', sans-serif;
  --font-mono: 'Fira Code', monospace;
}

Quick Reference Card

Task	File Location
Edit content	`src/docs/data/docs/en/[section]/index.mdx`
Add new tab	`src/docs/config/en/sidebarNavData.json.ts`
Change colors	`src/styles/tailwind-theme.css`
Change icons	`src/docs/config/en/sidebarNavData.json.ts`
Add icon	`src/icons/tabler/[name].svg`
Top navigation	`src/docs/config/en/navData.json.ts`
Site metadata	`src/docs/config/en/siteData.json.ts`

Name		Name	Last commit message	Last commit date
Latest commit History 13 Commits
.github		.github
.tours		.tours
public		public
src		src
.gitignore		.gitignore
.npmrc		.npmrc
.prettierignore		.prettierignore
.prettierrc.mjs		.prettierrc.mjs
README.md		README.md
astro.config.mjs		astro.config.mjs
eslint.config.mjs		eslint.config.mjs
netlify.toml		netlify.toml
package-lock.json		package-lock.json
package.json		package.json
starwind.config.json		starwind.config.json
tsconfig.json		tsconfig.json

Navigation Menu

Uh oh!

Repository files navigation

Supra L1 Astro Documentation

Quick Start

Current Documentation Sections

Tech Stack to Download Before You Start

Contribution Guide

Table of Contents

Project Structure

Adding/Editing Content

Editing Existing Pages

Creating a New Page

Step 1: Create the folder and file

Step 2: Add frontmatter and content

Step 3: Add to sidebar configuration

Content Components

Aside (Callout Boxes)

Steps

Tabs

Code Blocks

Managing Tabs & Sidebar

Current Structure

Adding a New Tab

Adding Multiple Pages to One Tab

Changing Theme & Colors

Changing Background Colors

Changing Button Colors

Changing Icons

Available Icons

Using Icons in Tabs

Adding New Icons

Example

Change Supra Logo

Change Font

Quick Reference Card

Before You Submit PR

About

Contributors

Languages

Uh oh!

Folders and files

Latest commit

History

Repository files navigation

Supra L1 Astro Documentation

Quick Start

Current Documentation Sections

Tech Stack to Download Before You Start

Contribution Guide

Table of Contents

Project Structure

Adding/Editing Content

Editing Existing Pages

Creating a New Page

Step 1: Create the folder and file

Step 2: Add frontmatter and content

Step 3: Add to sidebar configuration

Content Components

Aside (Callout Boxes)

Steps

Tabs

Code Blocks

Managing Tabs & Sidebar

Current Structure

Adding a New Tab

Adding Multiple Pages to One Tab

Changing Theme & Colors

Changing Background Colors

Changing Button Colors

Changing Icons

Available Icons

Using Icons in Tabs

Adding New Icons

Example

Change Supra Logo

Change Font

Quick Reference Card

Before You Submit PR

About

Resources

Stars

Watchers

Forks

Contributors

Languages