Jesús Pérex 2f0f807331 feat: add dark mode functionality and improve navigation system

- Add complete dark mode system with theme context and toggle
- Implement dark mode toggle component in navigation menu
- Add client-side routing with SSR-safe signal handling
- Fix language selector styling for better dark mode compatibility
- Add documentation system with mdBook integration
- Improve navigation menu with proper external/internal link handling
- Add comprehensive project documentation and configuration
- Enhance theme system with localStorage persistence
- Fix arena panic issues during server-side rendering
- Add proper TypeScript configuration and build optimizations

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-07-11 20:53:20 +01:00

5.6 KiB

Raw Blame History

Logo Template for Markdown Documentation

This template provides examples for adding RUSTELO logos to your markdown documentation files.

Header Logo (Recommended)

<div align="center">
  <img src="logos/rustelo_dev-logo-h.svg" alt="RUSTELO" width="300" />
  
  # Your Page Title
</div>

Alternative Header Sizes

Large Header (400px)

<div align="center">
  <img src="logos/rustelo_dev-logo-h.svg" alt="RUSTELO" width="400" />
  
  # Your Page Title
</div>

Medium Header (250px)

<div align="center">
  <img src="logos/rustelo_dev-logo-h.svg" alt="RUSTELO" width="250" />
  
  # Your Page Title
</div>

Small Header (200px)

<div align="center">
  <img src="logos/rustelo_dev-logo-h.svg" alt="RUSTELO" width="200" />
  
  # Your Page Title
</div>

Inline Logo Usage

Small Inline Logo

![RUSTELO](logos/rustelo-imag.svg) **RUSTELO** - Your content here

Medium Inline Logo

<img src="logos/rustelo-imag.svg" alt="RUSTELO" width="24" height="24" style="vertical-align: middle;" /> **RUSTELO** - Your content here

Logo Variations by Context

For Light Backgrounds

<!-- Use standard logos -->
<img src="logos/rustelo_dev-logo-h.svg" alt="RUSTELO" width="300" />
<img src="logos/rustelo_dev-logo-v.svg" alt="RUSTELO" width="200" />
<img src="logos/rustelo-imag.svg" alt="RUSTELO" width="100" />

For Dark Backgrounds

<!-- Use dark theme logos -->
<img src="logos/rustelo_dev-logo-b-h.svg" alt="RUSTELO" width="300" />
<img src="logos/rustelo_dev-logo-b-v.svg" alt="RUSTELO" width="200" />
<img src="logos/rustelo-imag.svg" alt="RUSTELO" width="100" />

mdBook Specific (Documentation)

For mdBook Pages

<div align="center">
  <img src="../logos/rustelo_dev-logo-h.svg" alt="RUSTELO" width="400" />
</div>

# Welcome to Rustelo

For mdBook Sections

<div align="center">
  <img src="../logos/rustelo_dev-logo-v.svg" alt="RUSTELO" width="200" />
</div>

## Section Title

README.md Specific

Main README Header

<div align="center">
  <img src="logos/rustelo_dev-logo-h.svg" alt="RUSTELO" width="300" />
  
  # Rustelo - Modular Rust Web Application Template
</div>

Feature Section

## Features

<img src="logos/rustelo-imag.svg" alt="RUSTELO" width="32" height="32" style="vertical-align: middle;" /> **Feature Name** - Description of the feature

GitHub Specific

Issues Template

<img src="logos/rustelo-imag.svg" alt="RUSTELO" width="24" height="24" /> **Issue Title**

Pull Request Template

<img src="logos/rustelo-imag.svg" alt="RUSTELO" width="24" height="24" /> **Pull Request Title**

Responsive Logo (HTML)

Responsive with CSS

<div align="center">
  <img src="logos/rustelo_dev-logo-h.svg" alt="RUSTELO" style="max-width: 100%; height: auto; width: 300px;" />
  
  <h1>Your Page Title</h1>
</div>

Mobile-Friendly

<div align="center">
  <picture>
    <source media="(max-width: 768px)" srcset="logos/rustelo_dev-logo-v.svg">
    <img src="logos/rustelo_dev-logo-h.svg" alt="RUSTELO" style="max-width: 100%; height: auto; width: 300px;" />
  </picture>
  
  <h1>Your Page Title</h1>
</div>

Badge-Style Usage

With Shields.io Style

[![RUSTELO](https://img.shields.io/badge/RUSTELO-Framework-red?logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJMMTMuMDkgOC4yNkwyMCA5TDEzLjA5IDE1Ljc0TDEyIDIyTDEwLjkxIDE1Ljc0TDQgOUwxMC45MSA4LjI2TDEyIDJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K)](https://rustelo.dev)

Copy-Paste Templates

Basic Header Template

<div align="center">
  <img src="logos/rustelo_dev-logo-h.svg" alt="RUSTELO" width="300" />
  
  # [PAGE_TITLE]
</div>

[PAGE_DESCRIPTION]

Documentation Page Template

<div align="center">
  <img src="../logos/rustelo_dev-logo-h.svg" alt="RUSTELO" width="400" />
</div>

# [PAGE_TITLE]

[PAGE_CONTENT]

Feature Page Template

# [FEATURE_NAME]

<img src="logos/rustelo-imag.svg" alt="RUSTELO" width="32" height="32" style="vertical-align: middle;" /> This feature is part of the **RUSTELO** framework.

[FEATURE_DESCRIPTION]

Usage Guidelines

DO

✅ Use alt="RUSTELO" for accessibility
✅ Specify width for consistent sizing
✅ Use appropriate logo variant for theme
✅ Center align for headers
✅ Use relative paths when possible

DON'T

❌ Stretch or distort logo proportions
❌ Use extremely small sizes (< 100px for headers)
❌ Mix light and dark logo variants
❌ Use logos without alt text
❌ Hardcode absolute URLs unless necessary

Path References

Local Development

logos/rustelo_dev-logo-h.svg      # From root directory
../logos/rustelo_dev-logo-h.svg   # From subdirectory

GitHub Raw URLs

logos/rustelo_dev-logo-h.svg

CDN URLs (if using CDN)

https://cdn.rustelo.dev/logos/rustelo_dev-logo-h.svg

Logo Selection Guide

Context	Logo File	Size	Notes
README header	`rustelo_dev-logo-h.svg`	300px	Primary branding
Documentation header	`rustelo_dev-logo-h.svg`	400px	Large, readable
Section headers	`rustelo_dev-logo-v.svg`	200px	Vertical space
Inline mentions	`rustelo-imag.svg`	24-32px	Icon only
Dark themes	`rustelo_dev-logo-b-h.svg`	300px	Dark variant
Favicons	`rustelo-imag.svg`	32px	Icon only

Remember to always use the name "RUSTELO" in uppercase when referencing the project name in text.

5.6 KiB Raw Blame History