Brasa Docs

Official documentation for Brasa LST (Liquid Staking Token) protocol on Fogo.

🔗 Live Site: docs.brasa.finance

About

Brasa is a liquid staking protocol that allows users to stake tokens while maintaining liquidity. This repository contains the full documentation site built with Next.js and Nextra.

Tech Stack

• Framework: Next.js 14
• Documentation: Nextra (Docs Theme)
• Styling: Tailwind CSS (via Nextra)
• Language: TypeScript
• Package Manager: pnpm
• Deployment: Vercel
• CI/CD: GitHub Actions

Getting Started

Prerequisites

• Node.js 18+
• pnpm 8+

Installation

# Clone the repository
git clone https://github.com/brasa-finance/brasa-docs.git
cd brasa-docs
# Install dependencies
pnpm install
# Run development server
pnpm dev

Visit http://localhost:3000 to see the site.

Available Commands

pnpm dev # Start development server
pnpm build # Build for production
pnpm start # Start production server
pnpm lint # Run ESLint
pnpm typecheck # Run TypeScript type checking
pnpm format # Format code with Prettier
pnpm format:check # Check code formatting

Project Structure

brasa-docs/
├── .github/ # GitHub Actions workflows
├── .husky/ # Git hooks
├── components/ # React components
│ └── mdx/ # Custom MDX components
├── pages/ # Documentation pages (MDX)
│ ├── getting-started/
│ ├── concepts/
│ ├── integrate/
│ ├── validators/
│ ├── security/
│ ├── changelog/
│ └── legal/
├── public/ # Static assets
│ ├── fonts/ # Self-hosted fonts
│ ├── og/ # Open Graph images
│ └── ...
├── styles/ # Global styles
├── next.config.mjs # Next.js configuration
├── theme.config.tsx # Nextra theme configuration
└── tsconfig.json # TypeScript configuration

Writing Documentation

Creating a New Page

1. Create a new .mdx file in the appropriate directory under /pages
2. Add front-matter with title and description
3. Update the _meta.json file in the directory to add the page to navigation

Example:

---title: My New Pagedescription: A brief description of this page---# My New Page
Content goes here...

Using Custom Components

We provide several custom MDX components:

Callout

<Callouttype="info">This is an informational callout.</Callout>

Types: info, warn, success, danger

Tabs

<Tabs>
<Tabtitle="JavaScript">```js console.log('Hello') ```</Tab>
<Tabtitle="TypeScript">```ts console.log('Hello') ```</Tab>
</Tabs>

Steps

<Steps>
<Steptitle="First Step">Do this first</Step>
<Steptitle="Second Step">Then do this</Step>
</Steps>

Badge

<Badgetone="success">New</Badge>

Tones: neutral, success, warning, critical

Contract Address

<ContractAddresschain="Fogo"address="0x1234..."label="Brasa Staking Contract" />

Deployment

Vercel Setup

1. Import the repository in Vercel
2. Configure environment variables:
   • NEXT_PUBLIC_SITE_URL: https://docs.brasa.finance
3. Deploy!

Custom Domain

To set up the custom domain docs.brasa.finance:

1. In Vercel project settings, add the domain
2. Get the CNAME target from Vercel
3. In your DNS provider, add:

   CNAME docs → [vercel-cname-target]
   

4. Wait for DNS propagation and SSL certificate issuance

Contributing

See CONTRIBUTING.md for guidelines on contributing to the documentation.

Code Quality

This project uses:

• ESLint for code linting
• Prettier for code formatting
• TypeScript for type safety
• Husky for git hooks
• Commitlint for conventional commits

Pre-commit hooks automatically run linting and formatting.

CI/CD

GitHub Actions runs on every PR and push to main:

• ✅ Linting (ESLint)
• ✅ Type checking (TypeScript)
• ✅ Format checking (Prettier)
• ✅ Build verification
• ✅ Link checking

Assets

Fonts

Self-hosted Inter fonts are located in /public/fonts/. Download from Google Fonts or Inter GitHub.

Required files:

• inter-regular.woff2
• inter-semibold.woff2
• inter-bold.woff2

Open Graph Images

OG images (1200x630px) should be placed in /public/og/. These are used for social media previews.

License

This documentation is open source under the MIT License.

Support

• Documentation Issues: GitHub Issues
• Protocol Questions: Discord
• Email: support@brasa.finance

---

Built with ❤️ by the Brasa team.