CalvinBackup/claude-howto
1
0
Fork 0
mirror of https://github.com/luongnv89/claude-howto.git synced 2026-04-30 21:57:48 +02:00
Code Issues Packages Projects Releases Wiki Activity
Files
main
claude-howto/resources/INDEX.txt
T
Luong NGUYEN 6d1e0ae4af refactor(ci): shift quality checks to pre-commit, CI as 2nd pass (#34) 
* refactor(ci): shift quality checks to pre-commit, CI as 2nd pass

- Remove ci.yml (lint, security, pytest were only for EPUB scripts)
- Move EPUB build to pre-commit local hook (runs on .md changes)
- Add check_cross_references.py, check_mermaid.py, check_links.py scripts
- Add markdown-lint, cross-references, mermaid-syntax, link-check as
  pre-commit hooks — mirrors all 4 CI doc-check jobs locally
- Remove spell check job from docs-check.yml (breaks on translations)
- Refactor docs-check.yml to reuse scripts/ instead of inline Python
- Add .markdownlint.json config shared by pre-commit and CI
- Update CONTRIBUTING.md with required dependencies and hook table

* fix(ci): resolve all CI check failures in docs-check workflow

- fix(check_cross_references): skip code blocks and inline code spans
  to avoid false positives from documentation examples; fix emoji
  heading anchor generation (rstrip not strip); add blog-posts,
  openspec, prompts, .agents to IGNORE_DIRS; ignore README.backup.md
- fix(check_links): strip trailing Markdown punctuation from captured
  URLs; add wikipedia, api.github.com to SKIP_DOMAINS; add placeholder
  URL patterns to SKIP_URL_PATTERNS; add .agents/.claude to IGNORE_DIRS
- fix(check_mermaid): add --no-sandbox puppeteer config support via
  MERMAID_PUPPETEER_NO_SANDBOX env var for GitHub Actions Linux runners
- fix(docs-check.yml): pass MERMAID_PUPPETEER_NO_SANDBOX=true to mermaid job
- fix(content): repair broken anchors in README.md, 09-advanced-features;
  fix #plugins -> #claude-code-plugins in claude_concepts_guide.md;
  remove non-existent ./docs/performance.md placeholder links; fix
  dependabot alerts URL in SECURITY_REPORTING.md; update auto-mode URL
  in resources.md; use placeholder pattern for 07-plugins example URL
- remove README.backup.md (stale file)

* fix(check-scripts): fix strip_code_blocks regex and URL fragment handling

- fix regex in strip_code_blocks to avoid conflicting MULTILINE+DOTALL
  flags that could fail to strip indented code fences; use DOTALL only
- strip URL fragments (#section) before dispatching link checks to avoid
  false-positive 404s on valid URLs with anchor fragments

* fix(check-scripts): fix anchor stripping, cross-ref enforcement, and mermaid temp file cleanup

- heading_to_anchor: use .strip("-") instead of .rstrip("-") to also strip leading hyphens
  produced by emoji-prefixed headings, preventing false-positive anchor errors
- check_cross_references: always exit with main()'s return code — filesystem checks
  should block pre-commit unconditionally, not silently pass on errors
- check_mermaid: wrap file-processing loop in try/finally so the puppeteer config
  temp file is cleaned up even if an unexpected exception (e.g. UnicodeDecodeError) occurs
- docs-check.yml: remove now-unused CROSS_REF_STRICT env var

* fix(scripts): fix anchor stripping and mermaid output path

- Replace .strip('-') with .rstrip('-') in heading_to_anchor() so leading
  hyphens from emoji-prefixed headings are preserved, matching GitHub's
  anchor generation behaviour.
- Use Path.with_suffix('.svg') in check_mermaid.py instead of
  str.replace('.mmd', '.svg') to avoid replacing all occurrences of .mmd
  in the full temp path.
2026-04-02 02:20:45 +02:00

242 lines
11 KiB
Plaintext
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
╔═══════════════════════════════════════════════════════════════════════════╗
║ CLAUDE HOW TO - BRAND ASSETS RESOURCE LIBRARY ║
║ Complete Asset Package ║
╚═══════════════════════════════════════════════════════════════════════════╝
📁 DIRECTORY STRUCTURE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
resources/
│
├── 📄 README.md (Complete Documentation)
│ └─ Full guide for all assets, usage patterns, HTML integration
│
├── 📄 QUICK-START.md (Copy & Paste Solutions)
│ └─ Fast setup, recommended sizes, color values
│
├── 📄 DESIGN-SYSTEM.md (Brand Guidelines)
│ └─ Visual identity, color system, typography, effects
│
├── 📁 logos/
│ └─ 📊 claude-howto-logo.svg (800×200px)
│ → Main horizontal logo with terminal icon
│ → Perfect for: Headers, marketing, print
│
├── 📁 icons/
│ └─ 🔷 claude-howto-icon.svg (256×256px)
│ → App icon with ascending hexagons
│ → Perfect for: Apps, avatars, thumbnails
│
└── 📁 favicons/
├─ 🔹 favicon-16.svg (16×16px) → Browser tabs
├─ 🔹 favicon-32.svg (32×32px) → Standard favicon
├─ 🔹 favicon-64.svg (64×64px) → High-DPI
├─ 🔹 favicon-128.svg (128×128px) → Apple touch icon
└─ 🔹 favicon-256.svg (256×256px) → Modern browsers/PWA
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📋 QUICK FILE REFERENCE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
FILE SIZE USE CASE
────────────────────────────────────────────────────────────────────────────
logos/claude-howto-logo.svg 800×200px Website headers, marketing
icons/claude-howto-icon.svg 256×256px App icons, avatars, social
favicons/favicon-32.svg 32×32px Browser favicon (primary)
favicons/favicon-16.svg 16×16px Browser tab (old browsers)
favicons/favicon-64.svg 64×64px Bookmarks, high-DPI
favicons/favicon-128.svg 128×128px Apple touch icon
favicons/favicon-256.svg 256×256px Android, PWA, modern
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎨 DESIGN CONCEPT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
The icon uses ASCENDING HEXAGONS to represent learning progression:
🟢 MINT (Top)
Advanced Features
Levels 7-10
🟢 EMERALD (Middle)
Intermediate Skills
Levels 4-6
🟢 DARK EMERALD (Bottom)
Beginner Fundamentals
Levels 1-3
Visual meaning: Upward progression = Learning journey from beginner to mastery
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎨 COLOR PALETTE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
COLOR HEX RGB USAGE
─────────────────────────────────────────────────────────────────────────────
Deep Forest #0d1f0d 13, 31, 13 Backgrounds
Emerald (Primary) #10b981 16, 185, 129 Main accents
Dark Emerald #059669 5, 150, 105 Secondary accents
Forest #047857 4, 120, 87 Tertiary accents
Mint (Highlight) #6ee7b7 110, 231, 183 Highlights
Light Mint #34d399 52, 211, 153 Secondary highlights
All colors maintain WCAG AAA contrast on dark backgrounds (8.2:1+)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📖 DOCUMENTATION FILES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. README.md
Complete guide covering:
• Asset descriptions and purposes
• HTML integration templates
• Favicon setup instructions
• Color palette and guidelines
• SVG optimization tips
• Accessibility considerations
2. QUICK-START.md
Fast reference with:
• Copy-paste code
• Recommended sizes
• Color CSS variables
• Icon meaning explanation
• Usage by platform
3. DESIGN-SYSTEM.md
Brand guidelines including:
• Visual identity principles
• Color system and contrast
• Gradient specifications
• Typography standards
• Icon geometry details
• Sizing recommendations
• Effects and filters
• Customization guide
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🚀 GETTING STARTED
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
STEP 1: Choose Your Use Case
• Website? → Use logos/claude-howto-logo.svg
• App/Avatar? → Use icons/claude-howto-icon.svg
• Browser? → Use favicons/favicon-32.svg
STEP 2: Read the Right Guide
• Quick setup? → Read QUICK-START.md
• Full details? → Read README.md
• Brand guidelines? → Read DESIGN-SYSTEM.md
STEP 3: Copy & Use
• Copy file to your project
• Use provided HTML code
• Or reference from CDN/web server
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ FILE CHECKLIST
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Logos:
✓ claude-howto-logo.svg (main logo)
Icons:
✓ claude-howto-icon.svg (app icon)
Favicons (all sizes):
✓ favicon-16.svg
✓ favicon-32.svg
✓ favicon-64.svg
✓ favicon-128.svg
✓ favicon-256.svg
Documentation:
✓ README.md (complete guide)
✓ QUICK-START.md (fast reference)
✓ DESIGN-SYSTEM.md (brand guidelines)
✓ INDEX.txt (this file)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📝 FILE FORMATS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
All assets are in SVG format:
• Scalable: Works at any size
• Lightweight: Smaller than PNG/JPG
• Sharp: No pixelation at any zoom
• Flexible: Can be styled with CSS/JS
• Universal: Works in all modern browsers
No raster images needed - SVG covers all use cases!
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🤝 INTEGRATION EXAMPLES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
HTML (Web):
<img src="resources/icons/claude-howto-icon.svg" alt="Claude How To">
Markdown:
![Claude How To](resources/icons/claude-howto-icon.svg)
CSS Background:
background-image: url('resources/icons/claude-howto-icon.svg');
React/JSX:
import logo from './resources/icons/claude-howto-icon.svg';
<img src={logo} alt="Claude How To" />
Next.js/Web Framework:
<Image src={logo} alt="Claude How To" />
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📊 ASSET STATISTICS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Total Assets: 7 SVG files
• 1 Logo
• 1 Icon
• 5 Favicon variants
Documentation: 4 files
• Complete guide (README.md)
• Quick reference (QUICK-START.md)
• Brand guidelines (DESIGN-SYSTEM.md)
• This index (INDEX.txt)
Total Size: ~150 KB (all files)
• Individual SVGs: 8-15 KB each
• Documentation: 20-50 KB each
Design System Version: 1.0
Last Updated: January 2026
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📞 SUPPORT & MORE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
For detailed information:
1. Start with QUICK-START.md for immediate use
2. Refer to README.md for complete documentation
3. Check DESIGN-SYSTEM.md for brand guidelines
Questions or customization needed?
• Review DESIGN-SYSTEM.md for customization guide
• All files are fully editable SVG
• Maintain color palette for brand consistency
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Happy building! 🚀
Reference in New Issue View Git Blame Copy Permalink