From 0d8d043109c58122300c27597a83d3c43f20e0ad Mon Sep 17 00:00:00 2001 From: unclecode Date: Tue, 30 Sep 2025 18:28:05 +0800 Subject: [PATCH] feat(docs): add brand book and page copy functionality - Add comprehensive brand book with color system, typography, components - Add page copy dropdown with markdown copy/view functionality - Update mkdocs.yml with new assets and branding navigation - Use terminal-style ASCII icons and condensed menu design --- docs/md_v2/assets/page_actions.css | 388 ++++++++ docs/md_v2/assets/page_actions.js | 346 +++++++ docs/md_v2/branding/index.md | 1371 ++++++++++++++++++++++++++++ mkdocs.yml | 9 +- 4 files changed, 2111 insertions(+), 3 deletions(-) create mode 100644 docs/md_v2/assets/page_actions.css create mode 100644 docs/md_v2/assets/page_actions.js create mode 100644 docs/md_v2/branding/index.md diff --git a/docs/md_v2/assets/page_actions.css b/docs/md_v2/assets/page_actions.css new file mode 100644 index 00000000..13fbffad --- /dev/null +++ b/docs/md_v2/assets/page_actions.css @@ -0,0 +1,388 @@ +/* ==== File: assets/page_actions.css ==== */ +/* Page Actions Dropdown - Terminal Style */ + +/* Wrapper - positioned in content area */ +.page-actions-wrapper { + position: absolute; + top: 1.3rem; + right: 1rem; + z-index: 1000; +} + +/* Floating Action Button */ +.page-actions-button { + position: relative; + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: #3f3f44; + border: 1px solid #50ffff; + color: #e8e9ed; + padding: 0.75rem 1rem; + border-radius: 6px; + font-family: 'Dank Mono', Monaco, monospace; + font-size: 0.875rem; + cursor: pointer; + transition: all 0.2s ease; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +.page-actions-button:hover { + background: #50ffff; + color: #070708; + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(80, 255, 255, 0.3); +} + +.page-actions-button::before { + content: '▤'; + font-size: 1.2rem; + line-height: 1; +} + +.page-actions-button::after { + content: '▼'; + font-size: 0.6rem; + transition: transform 0.2s ease; +} + +.page-actions-button.active::after { + transform: rotate(180deg); +} + +/* Dropdown Menu */ +.page-actions-dropdown { + position: absolute; + top: 3.5rem; + right: 0; + z-index: 1001; + background: #1a1a1a; + border: 1px solid #3f3f44; + border-radius: 8px; + min-width: 280px; + opacity: 0; + visibility: hidden; + transform: translateY(-10px); + transition: all 0.2s ease; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); + overflow: hidden; +} + +.page-actions-dropdown.active { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.page-actions-dropdown::before { + content: ''; + position: absolute; + top: -8px; + right: 1.5rem; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-bottom: 8px solid #3f3f44; +} + +/* Menu Header */ +.page-actions-header { + background: #3f3f44; + padding: 0.5rem 0.75rem; + border-bottom: 1px solid #50ffff; + font-family: 'Dank Mono', Monaco, monospace; + font-size: 0.7rem; + color: #a3abba; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.page-actions-header::before { + content: '┌─'; + margin-right: 0.5rem; + color: #50ffff; +} + +/* Menu Items */ +.page-actions-menu { + list-style: none; + margin: 0; + padding: 0.25rem 0; +} + +.page-action-item { + display: block; + padding: 0; +} + +ul>li.page-action-item::after{ + content: ''; +} +.page-action-link { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 0.75rem; + color: #e8e9ed; + text-decoration: none !important; + font-family: 'Dank Mono', Monaco, monospace; + font-size: 0.8rem; + transition: all 0.15s ease; + cursor: pointer; + border-left: 3px solid transparent; +} + +.page-action-link:hover:not(.disabled) { + background: #3f3f44; + border-left-color: #50ffff; + color: #50ffff; + text-decoration: none; +} + +.page-action-link.disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.page-action-link.disabled:hover { + background: transparent; + color: #e8e9ed; + text-decoration: none; +} + +/* Icons using ASCII/Terminal characters */ +.page-action-icon { + font-size: 1rem; + width: 1.5rem; + text-align: center; + font-weight: bold; + color: #50ffff; +} + +.page-action-link:hover:not(.disabled) .page-action-icon { + color: #50ffff; +} + +.page-action-link.disabled .page-action-icon { + color: #666; +} + +/* Specific icons */ +.icon-copy::before { + content: '⎘'; /* Copy/duplicate symbol */ +} + +.icon-view::before { + content: '⎙'; /* Document symbol */ +} + +.icon-ai::before { + content: '⚡'; /* Lightning/AI symbol */ +} + +/* Action Text */ +.page-action-text { + flex: 1; +} + +.page-action-label { + display: block; + font-weight: 600; + margin-bottom: 0.05rem; + line-height: 1.3; +} + +.page-action-description { + display: block; + font-size: 0.7rem; + color: #a3abba; + line-height: 1.2; +} + +/* Badge */ +.page-action-badge { + display: inline-block; + background: #f59e0b; + color: #070708; + padding: 0.125rem 0.5rem; + border-radius: 12px; + font-size: 0.65rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +/* External link indicator */ +.page-action-external::after { + content: '→'; + margin-left: 0.25rem; + font-size: 0.75rem; +} + +/* Divider */ +.page-actions-divider { + height: 1px; + background: #3f3f44; + margin: 0.25rem 0; +} + +/* Success/Copy feedback */ +.page-action-copied { + background: #50ff50 !important; + color: #070708 !important; + border-left-color: #50ff50 !important; +} + +.page-action-copied .page-action-icon { + color: #070708 !important; +} + +.page-action-copied .page-action-icon::before { + content: '✓'; +} + +/* Mobile Responsive */ +@media (max-width: 768px) { + .page-actions-wrapper { + top: 0.5rem; + right: 0.5rem; + } + + .page-actions-button { + padding: 0.6rem 0.8rem; + font-size: 0.8rem; + } + + .page-actions-dropdown { + min-width: 260px; + max-width: calc(100vw - 2rem); + right: -0.5rem; + } + + .page-action-link { + padding: 0.6rem 0.8rem; + font-size: 0.8rem; + } + + .page-action-description { + font-size: 0.7rem; + } +} + +/* Animation for tooltip/notification */ +@keyframes slideInFromTop { + from { + transform: translateY(-20px); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} + +.page-actions-notification { + position: fixed; + top: calc(var(--header-height) + 0.5rem); + right: 50%; + transform: translateX(50%); + z-index: 1100; + background: #50ff50; + color: #070708; + padding: 0.75rem 1.5rem; + border-radius: 6px; + font-family: 'Dank Mono', Monaco, monospace; + font-size: 0.875rem; + font-weight: 600; + box-shadow: 0 4px 12px rgba(80, 255, 80, 0.4); + animation: slideInFromTop 0.3s ease; + pointer-events: none; +} + +.page-actions-notification::before { + content: '✓ '; + margin-right: 0.5rem; +} + +/* Hide on print */ +@media print { + .page-actions-button, + .page-actions-dropdown { + display: none !important; + } +} + +/* Overlay for mobile */ +.page-actions-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 998; + opacity: 0; + transition: opacity 0.2s ease; +} + +.page-actions-overlay.active { + display: block; + opacity: 1; +} + +@media (max-width: 768px) { + .page-actions-overlay { + display: block; + } +} + +/* Keyboard focus styles */ +.page-action-link:focus { + outline: 2px solid #50ffff; + outline-offset: -2px; +} + +.page-actions-button:focus { + outline: 2px solid #50ffff; + outline-offset: 2px; +} + +/* Loading state */ +.page-action-link.loading { + pointer-events: none; + opacity: 0.7; +} + +.page-action-link.loading .page-action-icon::before { + content: '⟳'; + animation: spin 1s linear infinite; +} + +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* Terminal-style border effect on hover */ +.page-actions-dropdown:hover { + border-color: #50ffff; +} + +/* Footer info */ +.page-actions-footer { + background: #070708; + padding: 0.4rem 0.75rem; + border-top: 1px solid #3f3f44; + font-size: 0.65rem; + color: #666; + text-align: center; + font-family: 'Dank Mono', Monaco, monospace; +} + +.page-actions-footer::before { + content: '└─'; + margin-right: 0.5rem; + color: #3f3f44; +} \ No newline at end of file diff --git a/docs/md_v2/assets/page_actions.js b/docs/md_v2/assets/page_actions.js new file mode 100644 index 00000000..92893730 --- /dev/null +++ b/docs/md_v2/assets/page_actions.js @@ -0,0 +1,346 @@ +// ==== File: assets/page_actions.js ==== +// Page Actions - Copy/View Markdown functionality + +document.addEventListener('DOMContentLoaded', () => { + // Configuration + const config = { + githubRepo: 'unclecode/crawl4ai', + githubBranch: 'main', + docsPath: 'docs/md_v2', + excludePaths: ['/apps/c4a-script/', '/apps/llmtxt/', '/apps/crawl4ai-assistant/'], // Don't show on app pages + }; + + // Check if we should show the button on this page + function shouldShowButton() { + const currentPath = window.location.pathname; + + // Don't show on homepage + if (currentPath === '/' || currentPath === '/index.html') { + return false; + } + + // Don't show on excluded paths (apps) + for (const excludePath of config.excludePaths) { + if (currentPath.includes(excludePath)) { + return false; + } + } + + // Only show on documentation pages + return true; + } + + if (!shouldShowButton()) { + return; + } + + // Get current page markdown path + function getCurrentMarkdownPath() { + let path = window.location.pathname; + + // Remove leading/trailing slashes + path = path.replace(/^\/|\/$/g, ''); + + // Remove .html extension if present + path = path.replace(/\.html$/, ''); + + // Handle root/index + if (!path || path === 'index') { + return 'index.md'; + } + + // Add .md extension + return `${path}.md`; + } + + // Get GitHub raw URL for current page + function getGithubRawUrl() { + const mdPath = getCurrentMarkdownPath(); + return `https://raw.githubusercontent.com/${config.githubRepo}/${config.githubBranch}/${config.docsPath}/${mdPath}`; + } + + // Get GitHub file URL for current page (for viewing) + function getGithubFileUrl() { + const mdPath = getCurrentMarkdownPath(); + return `https://github.com/${config.githubRepo}/blob/${config.githubBranch}/${config.docsPath}/${mdPath}`; + } + + // Create the UI + function createPageActionsUI() { + // Find the main content area + const mainContent = document.getElementById('terminal-mkdocs-main-content'); + if (!mainContent) { + console.warn('Page Actions: Could not find #terminal-mkdocs-main-content'); + return null; + } + + // Create button + const button = document.createElement('button'); + button.className = 'page-actions-button'; + button.setAttribute('aria-label', 'Page copy'); + button.setAttribute('aria-expanded', 'false'); + button.innerHTML = 'Page Copy'; + + // Create overlay for mobile + const overlay = document.createElement('div'); + overlay.className = 'page-actions-overlay'; + + // Create dropdown + const dropdown = document.createElement('div'); + dropdown.className = 'page-actions-dropdown'; + dropdown.setAttribute('role', 'menu'); + dropdown.innerHTML = ` +
Page Copy
+ +
ESC to close
+ `; + + // Create a wrapper for button and dropdown + const wrapper = document.createElement('div'); + wrapper.className = 'page-actions-wrapper'; + wrapper.appendChild(button); + wrapper.appendChild(dropdown); + + // Inject into main content area + mainContent.appendChild(wrapper); + + // Append overlay to body + document.body.appendChild(overlay); + + return { button, dropdown, overlay, wrapper }; + } + + // Toggle dropdown + function toggleDropdown(button, dropdown, overlay) { + const isActive = dropdown.classList.contains('active'); + + if (isActive) { + closeDropdown(button, dropdown, overlay); + } else { + openDropdown(button, dropdown, overlay); + } + } + + function openDropdown(button, dropdown, overlay) { + dropdown.classList.add('active'); + // Don't activate overlay - not needed + button.classList.add('active'); + button.setAttribute('aria-expanded', 'true'); + } + + function closeDropdown(button, dropdown, overlay) { + dropdown.classList.remove('active'); + // Don't deactivate overlay - not needed + button.classList.remove('active'); + button.setAttribute('aria-expanded', 'false'); + } + + // Show notification + function showNotification(message, duration = 2000) { + const notification = document.createElement('div'); + notification.className = 'page-actions-notification'; + notification.textContent = message; + document.body.appendChild(notification); + + setTimeout(() => { + notification.remove(); + }, duration); + } + + // Copy markdown to clipboard + async function copyMarkdownToClipboard(link) { + const rawUrl = getGithubRawUrl(); + + // Add loading state + link.classList.add('loading'); + + try { + const response = await fetch(rawUrl); + + if (!response.ok) { + throw new Error(`Failed to fetch markdown: ${response.status}`); + } + + const markdown = await response.text(); + + // Copy to clipboard + await navigator.clipboard.writeText(markdown); + + // Visual feedback + link.classList.remove('loading'); + link.classList.add('page-action-copied'); + + showNotification('Markdown copied to clipboard!'); + + // Reset after delay + setTimeout(() => { + link.classList.remove('page-action-copied'); + }, 2000); + + } catch (error) { + console.error('Error copying markdown:', error); + link.classList.remove('loading'); + showNotification('Error: Could not copy markdown'); + } + } + + // View markdown in new tab + function viewMarkdown() { + const githubUrl = getGithubFileUrl(); + window.open(githubUrl, '_blank', 'noopener,noreferrer'); + } + + // Initialize + const { button, dropdown, overlay } = createPageActionsUI(); + + // Event listeners + button.addEventListener('click', (e) => { + e.stopPropagation(); + toggleDropdown(button, dropdown, overlay); + }); + + overlay.addEventListener('click', () => { + closeDropdown(button, dropdown, overlay); + }); + + // Copy markdown action + document.getElementById('action-copy-markdown').addEventListener('click', async (e) => { + e.preventDefault(); + e.stopPropagation(); + await copyMarkdownToClipboard(e.currentTarget); + }); + + // View markdown action + document.getElementById('action-view-markdown').addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + viewMarkdown(); + closeDropdown(button, dropdown, overlay); + }); + + // Ask AI action (disabled for now) + document.getElementById('action-ask-ai').addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + // Future: Integrate with Ask AI feature + // For now, do nothing (disabled state) + }); + + // Close on ESC key + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && dropdown.classList.contains('active')) { + closeDropdown(button, dropdown, overlay); + } + }); + + // Close when clicking outside + document.addEventListener('click', (e) => { + if (!dropdown.contains(e.target) && !button.contains(e.target)) { + closeDropdown(button, dropdown, overlay); + } + }); + + // Prevent dropdown from closing when clicking inside + dropdown.addEventListener('click', (e) => { + // Only stop propagation if not clicking on a link + if (!e.target.closest('.page-action-link')) { + e.stopPropagation(); + } + }); + + // Close dropdown on link click (except for copy which handles itself) + dropdown.querySelectorAll('.page-action-link:not(#action-copy-markdown)').forEach(link => { + link.addEventListener('click', () => { + if (!link.classList.contains('disabled')) { + setTimeout(() => { + closeDropdown(button, dropdown, overlay); + }, 100); + } + }); + }); + + // Handle window resize + let resizeTimer; + window.addEventListener('resize', () => { + clearTimeout(resizeTimer); + resizeTimer = setTimeout(() => { + // Close dropdown on resize to prevent positioning issues + if (dropdown.classList.contains('active')) { + closeDropdown(button, dropdown, overlay); + } + }, 250); + }); + + // Accessibility: Focus management + button.addEventListener('keydown', (e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + toggleDropdown(button, dropdown, overlay); + + // Focus first menu item when opening + if (dropdown.classList.contains('active')) { + const firstLink = dropdown.querySelector('.page-action-link:not(.disabled)'); + if (firstLink) { + setTimeout(() => firstLink.focus(), 100); + } + } + } + }); + + // Arrow key navigation within menu + dropdown.addEventListener('keydown', (e) => { + if (!dropdown.classList.contains('active')) return; + + const links = Array.from(dropdown.querySelectorAll('.page-action-link:not(.disabled)')); + const currentIndex = links.indexOf(document.activeElement); + + if (e.key === 'ArrowDown') { + e.preventDefault(); + const nextIndex = (currentIndex + 1) % links.length; + links[nextIndex].focus(); + } else if (e.key === 'ArrowUp') { + e.preventDefault(); + const prevIndex = (currentIndex - 1 + links.length) % links.length; + links[prevIndex].focus(); + } else if (e.key === 'Home') { + e.preventDefault(); + links[0].focus(); + } else if (e.key === 'End') { + e.preventDefault(); + links[links.length - 1].focus(); + } + }); + + console.log('Page Actions initialized for:', getCurrentMarkdownPath()); +}); \ No newline at end of file diff --git a/docs/md_v2/branding/index.md b/docs/md_v2/branding/index.md new file mode 100644 index 00000000..5741344d --- /dev/null +++ b/docs/md_v2/branding/index.md @@ -0,0 +1,1371 @@ +# 🎨 Crawl4AI Brand Book + + + +
+

Crawl4AI Brand Guidelines

+

A comprehensive design system for building consistent, terminal-inspired experiences

+
+ +## 📖 About This Guide + +This brand book documents the complete visual language of Crawl4AI. Whether you're building documentation pages, interactive apps, or Chrome extensions, these guidelines ensure consistency while maintaining the unique terminal-aesthetic that defines our brand. + +--- + +
+ 🎨 +

Color System

+
+ +Our color palette is built around a terminal-dark aesthetic with vibrant cyan and pink accents. Every color serves a purpose and maintains accessibility standards. + +### Primary Colors + +
+
+
+
+

Primary Cyan

+ #50ffff +

Main brand color, links, highlights, CTAs

+
+
+ +
+
+
+

Primary Teal

+ #09b5a5 +

Hover states, dimmed accents, progress bars

+
+
+ +
+
+
+

Primary Green

+ #0fbbaa +

Alternative primary, buttons, nav links

+
+
+ +
+
+
+

Accent Pink

+ #f380f5 +

Secondary accents, keywords, highlights

+
+
+
+ +### Background Colors + +
+
+
+
+

Deep Black

+ #070708 +

Main background, code blocks, deep containers

+
+
+ +
+
+
+

Secondary Dark

+ #1a1a1a +

Headers, sidebars, secondary containers

+
+
+ +
+
+
+

Tertiary Gray

+ #3f3f44 +

Cards, borders, code backgrounds, modals

+
+
+ +
+
+
+

Block Background

+ #202020 +

Block elements, alternate rows

+
+
+
+ +### Text Colors + +
+
+
+
+

Primary Text

+ #e8e9ed +

Headings, body text, primary content

+
+
+ +
+
+
+

Secondary Text

+ #d5cec0 +

Body text, descriptions, warm tone

+
+
+ +
+
+
+

Tertiary Text

+ #a3abba +

Captions, labels, metadata, cool tone

+
+
+ +
+
+
+

Dimmed Text

+ #8b857a +

Disabled states, comments, subtle text

+
+
+
+ +### Semantic Colors + +
+
+
+
+

Success Green

+ #50ff50 +

Success messages, completed states, valid

+
+
+ +
+
+
+

Error Red

+ #ff3c74 +

Errors, warnings, destructive actions

+
+
+ +
+
+
+

Warning Orange

+ #f59e0b +

Warnings, beta status, caution

+
+
+ +
+
+
+

Info Blue

+ #4a9eff +

Info messages, external links

+
+
+
+ +--- + +
+ ✍️ +

Typography

+
+ +Our typography system is built around **Dank Mono**, a monospace font that reinforces the terminal aesthetic while maintaining excellent readability. + +### Font Family + +```css +--font-primary: 'Dank Mono', dm, Monaco, Courier New, monospace; +--font-code: 'Dank Mono', 'Monaco', 'Menlo', 'Consolas', monospace; +``` + +**Font Weights:** +- Regular: 400 +- Bold: 700 +- Italic: 400 (italic variant) + +### Type Scale + +
+ H1 / Hero +
+ Size: 2.5rem (40px) + Weight: 700 + Line-height: 1.2 +
+

The Quick Brown Fox Jumps Over

+
+ +
+ H2 / Section +
+ Size: 1.75rem (28px) + Weight: 700 + Line-height: 1.3 +
+

Advanced Web Scraping Features

+
+ +
+ H3 / Subsection +
+ Size: 1.3rem (20.8px) + Weight: 600 + Line-height: 1.4 +
+

Installation and Setup Guide

+
+ +
+ H4 / Component +
+ Size: 1.1rem (17.6px) + Weight: 600 + Line-height: 1.4 +
+

Quick Start Instructions

+
+ +
+ Body / Regular +
+ Size: 14px + Weight: 400 + Line-height: 1.6 +
+

Crawl4AI is the #1 trending GitHub repository, actively maintained by a vibrant community. It delivers blazing-fast, AI-ready web crawling tailored for large language models and data pipelines.

+
+ +
+ Code / Monospace +
+ Size: 13px + Weight: 400 + Line-height: 1.5 +
+ async with AsyncWebCrawler() as crawler: +
+ +
+ Small / Caption +
+ Size: 12px + Weight: 400 + Line-height: 1.5 +
+

Updated 2 hours ago • v0.7.2

+
+ +--- + +
+ 🧩 +

Components

+
+ +### Buttons + +
+
+

Primary Button

+
+ + +
+
+
+ HTML + CSS + +
+ 
<button class="brand-btn brand-btn-primary">
+  Launch Editor →
+</button>
+
+
+ +
+

Secondary Button

+
+ + +
+
+
+ HTML + CSS + +
+ 
<button class="brand-btn brand-btn-secondary">
+  View Documentation
+</button>
+
+
+ +
+

Accent Button

+
+ + +
+
+
+ HTML + CSS + +
+ 
<button class="brand-btn brand-btn-accent">
+  Try Beta Features
+</button>
+
+
+ +
+

Ghost Button

+
+ + +
+
+
+ HTML + CSS + +
+ 
<button class="brand-btn brand-btn-ghost">
+  Learn More
+</button>
+
+
+
+ +### Badges & Status Indicators + +
+

Status Badges

+
+ Available + Beta + Alpha + New! + Coming Soon +
+
+
+ HTML + CSS + +
+ 
<span class="brand-badge badge-available">Available</span>
+<span class="brand-badge badge-beta">Beta</span>
+<span class="brand-badge badge-alpha">Alpha</span>
+<span class="brand-badge badge-new">New!</span>
+
+
+ +### Cards + +
+
+

🎨 C4A-Script Editor

+

A visual, block-based programming environment for creating browser automation scripts. Perfect for beginners and experts alike!

+ +
+ +
+

🧠 LLM Context Builder

+

Generate optimized context files for your favorite LLM when working with Crawl4AI. Get focused, relevant documentation based on your needs.

+ +
+
+ +
+
+ HTML + CSS + +
+ 
<div class="brand-card">
+  <h3 class="brand-card-title">Card Title</h3>
+  <p class="brand-card-description">Card description...</p>
+</div>
+
+ +### Terminal Window + +
+
+
+ + + +
+ crawl4ai@terminal ~ % +
+
+

$ pip install crawl4ai

+

Successfully installed crawl4ai-0.7.2

+
+
+ +
+
+ HTML + CSS + +
+ 
<div class="terminal-window">
+  <div class="terminal-header">
+    <div class="terminal-dots">
+      <span class="terminal-dot red"></span>
+      <span class="terminal-dot yellow"></span>
+      <span class="terminal-dot green"></span>
+    </div>
+    <span class="terminal-title">Terminal Title</span>
+  </div>
+  <div class="terminal-content">
+    Your content here
+  </div>
+</div>
+
+ +--- + +
+ 📐 +

Spacing & Layout

+
+ +### Spacing System + +Our spacing system is based on multiples of **10px** for consistency and ease of calculation. + +
+
+
+ 10px - Extra Small (xs) +
+
+
+ 20px - Small (sm) +
+
+
+ 30px - Medium (md) +
+
+
+ 40px - Large (lg) +
+
+
+ 60px - Extra Large (xl) +
+
+
+ 80px - 2XL +
+
+ +### Layout Patterns + +#### Terminal Container +Full-height, flex-column layout with sticky header + +```css +.terminal-container { + min-height: 100vh; + display: flex; + flex-direction: column; +} +``` + +#### Content Grid +Auto-fit responsive grid for cards and components + +```css +.component-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} +``` + +#### Centered Content +Maximum width with auto margins for centered layouts + +```css +.content { + max-width: 1200px; + margin: 0 auto; + padding: 2rem; +} +``` + +--- + +
+ ✅ +

Usage Guidelines

+
+ +### When to Use Each Style + +**Documentation Pages (`docs/md_v2/core`, `/advanced`, etc.)** +- Use main documentation styles from `styles.css` and `layout.css` +- Terminal theme with sidebar navigation +- Dense, informative content +- ToC on the right side +- Focus on readability and technical accuracy + +**Landing Pages (`docs/md_v2/apps/crawl4ai-assistant`, etc.)** +- Use `assistant.css` style approach +- Hero sections with gradients +- Feature cards with hover effects +- Video/demo sections +- Sticky header with navigation +- Marketing-focused, visually engaging + +**App Home (`docs/md_v2/apps/index.md`)** +- Grid-based card layouts +- Status badges +- Call-to-action buttons +- Feature highlights +- Mix of informational and promotional + +**Interactive Apps (`docs/md_v2/apps/llmtxt`, `/c4a-script`)** +- Full-screen application layouts +- Interactive controls +- Real-time feedback +- Tool-specific UI patterns +- Functional over decorative + +**Chrome Extension (`popup.css`)** +- Compact, fixed-width design (380px) +- Clear mode selection +- Session indicators +- Minimal but effective +- Fast loading, no heavy assets + +### Do's and Don'ts + +
+
+
✅ DO
+
+ +
+
+ Use primary cyan for main CTAs and important actions +
+
+ +
+
❌ DON'T
+
+ +
+
+ Don't use arbitrary colors not in the brand palette +
+
+
+ +
+
+
✅ DO
+
+
+ async with AsyncWebCrawler(): +
+
+
+ Use Dank Mono for all text to maintain terminal aesthetic +
+
+ +
+
❌ DON'T
+
+
+ async with AsyncWebCrawler(): +
+
+
+ Don't use non-monospace fonts (breaks terminal feel) +
+
+
+ +
+
+
✅ DO
+
+
+ Beta +

New Feature

+
+
+
+ Use status badges to indicate feature maturity +
+
+ +
+
❌ DON'T
+
+
+

New Feature (Beta)

+
+
+
+ Don't put status indicators in plain text +
+
+
+ +--- + +
+ 🎯 +

Accessibility

+
+ +### Color Contrast + +All color combinations meet WCAG AA standards: + +- **Primary Cyan (#50ffff) on Dark (#070708)**: 12.4:1 ✅ +- **Primary Text (#e8e9ed) on Dark (#070708)**: 11.8:1 ✅ +- **Secondary Text (#d5cec0) on Dark (#070708)**: 9.2:1 ✅ +- **Tertiary Text (#a3abba) on Dark (#070708)**: 6.8:1 ✅ + +### Focus States + +All interactive elements must have visible focus indicators: + +```css +button:focus, +a:focus { + outline: 2px solid #50ffff; + outline-offset: 2px; +} +``` + +### Motion + +Respect `prefers-reduced-motion` for users who need it: + +```css +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + transition-duration: 0.01ms !important; + } +} +``` + +--- + +
+ 💾 +

CSS Variables

+
+ +Use these CSS variables for consistency across all styles: + +```css +:root { + /* Colors */ + --primary-color: #50ffff; + --primary-dimmed: #09b5a5; + --primary-green: #0fbbaa; + --accent-color: #f380f5; + + /* Backgrounds */ + --background-color: #070708; + --bg-secondary: #1a1a1a; + --code-bg-color: #3f3f44; + --border-color: #3f3f44; + + /* Text */ + --font-color: #e8e9ed; + --secondary-color: #d5cec0; + --tertiary-color: #a3abba; + + /* Semantic */ + --success-color: #50ff50; + --error-color: #ff3c74; + --warning-color: #f59e0b; + + /* Typography */ + --font-primary: 'Dank Mono', dm, Monaco, Courier New, monospace; + --global-font-size: 14px; + --global-line-height: 1.6; + + /* Spacing */ + --global-space: 10px; + + /* Layout */ + --header-height: 65px; + --sidebar-width: 280px; + --toc-width: 340px; + --content-max-width: 90em; +} +``` + +--- + +
+ 📚 +

Resources

+
+ +### Download Assets + +- [Dank Mono Font Files](/docs/md_v2/assets/) (Regular, Bold, Italic) +- [Brand CSS Template](/docs/md_v2/branding/assets/brand-examples.css) +- [Component Library](/docs/md_v2/apps/) + +### Reference Files + +- Main Documentation Styles: `docs/md_v2/assets/styles.css` +- Layout System: `docs/md_v2/assets/layout.css` +- Landing Page Style: `docs/md_v2/apps/crawl4ai-assistant/assistant.css` +- App Home Style: `docs/md_v2/apps/index.md` +- Extension Style: `docs/md_v2/apps/crawl4ai-assistant/popup/popup.css` + +### Questions? + +If you're unsure about which style to use or need help implementing these guidelines: + +- Check existing examples in the relevant section +- Review the "When to Use Each Style" guidelines above +- Ask in our [Discord community](https://discord.gg/crawl4ai) +- Open an issue on [GitHub](https://github.com/unclecode/crawl4ai) + +--- + +
+

🎨 Keep It Terminal

+

+ When in doubt, ask yourself: "Does this feel like a terminal?" If yes, you're on brand. +

+
+ + diff --git a/mkdocs.yml b/mkdocs.yml index ff148547..50f19fce 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -1,5 +1,4 @@ site_name: Crawl4AI Documentation (v0.7.x) -site_favicon: docs/md_v2/favicon.ico site_description: 🚀🤖 Crawl4AI, Open-source LLM-Friendly Web Crawler & Scraper site_url: https://docs.crawl4ai.com repo_url: https://github.com/unclecode/crawl4ai @@ -66,10 +65,12 @@ nav: - "CrawlResult": "api/crawl-result.md" - "Strategies": "api/strategies.md" - "C4A-Script Reference": "api/c4a-script-reference.md" + - "Brand Book": "branding/index.md" theme: name: 'terminal' palette: 'dark' + favicon: favicon.ico custom_dir: docs/md_v2/overrides color_mode: 'dark' icon: @@ -98,6 +99,7 @@ extra_css: - assets/highlight.css - assets/dmvendor.css - assets/feedback-overrides.css + - assets/page_actions.css extra_javascript: - https://www.googletagmanager.com/gtag/js?id=G-58W0K2ZQ25 @@ -106,8 +108,9 @@ extra_javascript: - assets/highlight_init.js - https://buttons.github.io/buttons.js - assets/toc.js - - assets/github_stats.js + - assets/github_stats.js - assets/selection_ask_ai.js - assets/copy_code.js - assets/floating_ask_ai_button.js - - assets/mobile_menu.js \ No newline at end of file + - assets/mobile_menu.js + - assets/page_actions.js \ No newline at end of file