Safwa Network Documentation

Official documentation website for the Safwa Network decentralized referral protocol

A modern, bilingual (English/Arabic) documentation site built with vanilla JavaScript, featuring a clean UI, dark mode support, and comprehensive guides for the Safwa Network ecosystem.

---

🌟 Features

Core Functionality

• 📚 Bilingual Support: Full English and Arabic documentation with RTL layout support
• 🌓 Dark Mode: Beautiful dark theme with smooth transitions
• 📱 Responsive Design: Optimized for desktop, tablet, and mobile devices
• 🔍 Smart Navigation: Hierarchical collapsible sidebar with auto-expansion
• 📖 Table of Contents: Auto-generated on-page navigation for long documents
• 🔗 Hash-based Routing: Client-side routing for seamless navigation
• ✨ Modern UI: Clean, professional design with Tailwind CSS

Technical Features

• ⚡ Fast & Lightweight: No build process, runs directly in the browser
• 📝 Markdown Rendering: Full markdown support with KaTeX for mathematical equations
• 🎨 Syntax Highlighting: Code blocks with proper formatting
• 🔄 Dynamic Content: JSON-based structure for easy content management
• ♿ Accessible: Semantic HTML with proper ARIA labels

---

📁 Project Structure

docs.safwa.network/
├── index.html              # Main HTML file
├── structure.json          # Documentation structure definition
├── js/
│   └── app.js             # Main application logic
├── markdown/              # Markdown content files
│   ├── en/               # English documentation
│   │   ├── guides/       # User guides
│   │   ├── help/         # Help & tutorials
│   │   │   ├── tutorials/
│   │   │   ├── wallets/
│   │   │   └── education/
│   │   ├── legal/        # Legal documents
│   │   └── technical/    # Technical documentation
│   └── ar/               # Arabic documentation (same structure)
├── img/                  # Images and assets
└── ui-ux/               # UI/UX design references

---

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• Python 3 (for local development server) or any static file server

Local Development

1. Clone the repository

   git clone https://github.com/safwanetwork/docs.safwa.network.git
   cd docs.safwa.network

2. Start a local server

   python3 -m http.server 8080

3. Open in browser

   http://localhost:8080
   

Alternative Servers

Node.js (http-server)

npx http-server -p 8080

PHP

php -S localhost:8080

---

📝 Adding Content

1. Create Markdown Files

Add your markdown files to the appropriate directory:

• English: markdown/en/[category]/
• Arabic: markdown/ar/[category]/

Example: markdown/en/guides/My_New_Guide.md

# My New Guide

This is the content of my guide.

## Section 1
Content here...

2. Update structure.json

Add your new file to structure.json:

{
  "en": {
    "guides": {
      "_files": [
        "About.md",
        "My_New_Guide.md"  // Add here
      ]
    }
  }
}

3. Refresh the Browser

The new content will appear in the navigation automatically.

---

🎨 Customization

Theme Colors

Edit index.html to customize colors:

tailwind.config = {
  theme: {
    extend: {
      colors: {
        "primary": "#135bec",        // Primary brand color
        "background-light": "#f6f6f8", // Light mode background
        "background-dark": "#101622",  // Dark mode background
      }
    }
  }
}

Navigation Icons

Update category icons in js/app.js:

const categoryIcons = {
  'guides': 'book',
  'help': 'help',
  'legal': 'gavel',
  'technical': 'code',
};

---

🌐 Deployment

GitHub Pages

1. Push to GitHub
2. Go to Settings → Pages
3. Select branch and / (root) folder
4. Save

Netlify

1. Connect your repository
2. Build command: (leave empty)
3. Publish directory: /
4. Deploy

Vercel

vercel --prod

---

🔧 Configuration

Adding a New Language

1. Create directory: markdown/[lang-code]/
2. Add to structure.json:

   {
     "en": { ... },
     "ar": { ... },
     "fr": { ... }  // New language
   }

3. Update language toggle in js/app.js

Custom Markdown Rendering

Modify the marked configuration in js/app.js:

marked.setOptions({
  breaks: true,
  gfm: true,
  // Add custom options
});

---

📚 Documentation Categories

Guides

• About Safwa Network
• Onboarding Guide
• FAQ

Help

• Tutorials: How to join, earn, and participate
• Wallets: Binance, MetaMask, and other wallet guides
• Education: Blockchain basics and concepts

Legal

• Terms of Service
• Privacy Policy
• AML/CTF Policy
• Risk Disclosure
• Law Enforcement Policy
• And more...

Technical

• Smart Contract Documentation
• API References
• Integration Guides

---

🛠️ Technologies Used

• HTML5: Semantic markup
• Tailwind CSS: Utility-first CSS framework
• JavaScript (ES6+): Modern vanilla JavaScript
• Marked.js: Markdown parser
• KaTeX: Mathematical equation rendering
• Material Symbols: Icon library
• Google Fonts: Inter (English) & IBM Plex Sans Arabic (Arabic)

---

🤝 Contributing

We welcome contributions! Here's how you can help:

1. Report Issues: Found a bug or typo? Open an issue
2. Improve Documentation: Submit PRs with corrections or new content
3. Translate: Help translate documentation to new languages
4. Suggest Features: Share ideas for improvements

Contribution Guidelines

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🔗 Links

• Website: safwa.network
• Documentation: docs.safwa.network
• Smart Contract: PolygonScan
• GitHub: github.com/safwanetwork

---

💬 Support

Need help? Reach out:

• Email: support@safwa.network
• Twitter: @SafwaNetwork
• Telegram: t.me/SafwaNetwork

---

🙏 Acknowledgments

• Built with ❤️ by the Safwa Network team
• Icons by Material Symbols
• Fonts by Google Fonts

---

© 2026 Safwa Network. All rights reserved.