mirror of https://fastgit.cc/github.com/luongnv89/claude-howto synced 2026-04-21 21:20:27 +08:00

Files

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

favicons

design: Redesign logo to compass-bracket mark with minimal palette

2026-02-17 18:27:38 +01:00

icons

design: Redesign logo to compass-bracket mark with minimal palette

2026-02-17 18:27:38 +01:00

logos

design: Redesign logo to compass-bracket mark with minimal palette

2026-02-17 18:27:38 +01:00

DESIGN-SYSTEM.md

design: Redesign logo to compass-bracket mark with minimal palette

2026-02-17 18:27:38 +01:00

INDEX.txt

refactor(ci): shift quality checks to pre-commit, CI as 2nd pass (#34 )

2026-04-02 02:20:45 +02:00

MANIFEST.txt

refactor: Add new V2.0 logo with dark/light mode support to all markdown files

2026-01-09 10:36:58 +01:00

QUICK-START.md

design: Redesign logo to compass-bracket mark with minimal palette

2026-02-17 18:27:38 +01:00

README.md

design: Redesign logo to compass-bracket mark with minimal palette

2026-02-17 18:27:38 +01:00

README.md

Claude How To - Brand Assets

Complete collection of logos, icons, and favicons for the Claude How To project. All assets use the V3.0 design: a compass with code bracket (>) symbol, representing guided navigation through code — using a Black/White/Gray palette with Bright Green (#22C55E) accent.

Directory Structure

resources/
├── logos/
│   ├── claude-howto-logo.svg       # Main logo - Light mode (520×120px)
│   └── claude-howto-logo-dark.svg  # Main logo - Dark mode (520×120px)
├── icons/
│   ├── claude-howto-icon.svg       # App icon - Light mode (256×256px)
│   └── claude-howto-icon-dark.svg  # App icon - Dark mode (256×256px)
└── favicons/
    ├── favicon-16.svg              # Favicon - 16×16px
    ├── favicon-32.svg              # Favicon - 32×32px (primary)
    ├── favicon-64.svg              # Favicon - 64×64px
    ├── favicon-128.svg             # Favicon - 128×128px
    └── favicon-256.svg             # Favicon - 256×256px

Additional assets in assets/logo/:

assets/logo/
├── logo-full.svg       # Mark + wordmark (horizontal)
├── logo-mark.svg       # Compass symbol only (120×120px)
├── logo-wordmark.svg   # Text only
├── logo-icon.svg       # App icon (512×512, rounded)
├── favicon.svg         # 16×16 optimized
├── logo-white.svg      # White version for dark backgrounds
└── logo-black.svg      # Black monochrome version

Assets Overview

Design Concept (V3.0)

Compass with Code Bracket — guidance meets code:

Compass Ring = Navigation, finding your way
North Needle (Green) = Direction, progress on the learning path
South Needle (Black) = Grounding, solid foundation
> Bracket = Terminal prompt, code, CLI context
Tick Marks = Precision, structured learning

Logos

Files:

logos/claude-howto-logo.svg (Light mode)
logos/claude-howto-logo-dark.svg (Dark mode)

Specifications:

Size: 520×120 px
Purpose: Main header/branding logo with wordmark
Usage:
- Website headers
- README badges
- Marketing materials
- Print materials
Format: SVG (fully scalable)
Modes: Light (white background) & Dark (#0A0A0A background)

Icons

Files:

icons/claude-howto-icon.svg (Light mode)
icons/claude-howto-icon-dark.svg (Dark mode)

Specifications:

Size: 256×256 px
Purpose: Application icon, avatars, thumbnails
Usage:
- App icons
- Profile avatars
- Social media thumbnails
- Documentation headers
Format: SVG (fully scalable)
Modes: Light (white background) & Dark (#0A0A0A background)

Design Elements:

Compass ring with cardinal and intercardinal tick marks
Green north needle (direction/guidance)
Black south needle (foundation)
> code bracket at center (terminal/CLI)
Green center dot accent

Favicons

Optimized versions at multiple sizes for web use:

File	Size	DPI	Usage
`favicon-16.svg`	16×16 px	1x	Browser tabs (older browsers)
`favicon-32.svg`	32×32 px	1x	Standard browser favicon
`favicon-64.svg`	64×64 px	1x-2x	High-DPI displays
`favicon-128.svg`	128×128 px	2x	Apple touch icon, bookmarks
`favicon-256.svg`	256×256 px	4x	Modern browsers, PWA icons

Optimization Notes:

16px: Minimal geometry — ring, needles, chevron only
32px: Adds cardinal tick marks
64px+: Full detail with intercardinal ticks
All maintain visual consistency with main icon
SVG format ensures crisp display at any size

HTML Integration

Basic Favicon Setup

<!-- Browser favicon -->
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-32.svg">
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-16.svg" sizes="16x16">

<!-- Apple touch icon (mobile home screen) -->
<link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">

<!-- PWA & modern browsers -->
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-256.svg" sizes="256x256">

Complete Setup

<head>
  <!-- Primary favicon -->
  <link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-32.svg" sizes="32x32">
  <link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-16.svg" sizes="16x16">

  <!-- Apple touch icon -->
  <link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">

  <!-- PWA icons -->
  <link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-256.svg" sizes="256x256">

  <!-- Android -->
  <link rel="shortcut icon" href="/resources/favicons/favicon-256.svg">

  <!-- PWA manifest reference (if using manifest.json) -->
  <meta name="theme-color" content="#000000">
</head>

Color Palette

Primary Colors

Black: #000000 (Primary text, strokes, south needle)
White: #FFFFFF (Light backgrounds)
Gray: #6B7280 (Secondary text, minor tick marks)

Accent Color

Bright Green: #22C55E (North needle, center dot, accent lines — highlights only, never as background)

Dark Mode

Background: #0A0A0A (Near-black)

CSS Variables

--color-primary: #000000;
--color-secondary: #6B7280;
--color-accent: #22C55E;
--color-bg-light: #FFFFFF;
--color-bg-dark: #0A0A0A;

Tailwind Config

colors: {
  brand: {
    primary: '#000000',
    secondary: '#6B7280',
    accent: '#22C55E',
  }
}

Usage Guidelines

Use black for primary text and structural elements
Use gray for secondary/supporting elements
Use green only for highlights — needle, dots, accent lines
Never use green as a background color
Maintain WCAG AA contrast (4.5:1 minimum)

Design Guidelines

Logo Usage

Use on white or dark (#0A0A0A) backgrounds
Scale proportionally
Include clear space around logo (minimum: logo height / 2)
Use provided light/dark variants for appropriate backgrounds

Icon Usage

Use at standard sizes: 16, 32, 64, 128, 256px
Maintain the compass proportions
Scale proportionally

Favicon Usage

Use appropriate size for context
16-32px: Browser tabs, bookmarks
64px: Favicon site icons
128px+: Apple/Android home screens

SVG Optimization

All SVG files are flat design with no gradients or filters:

Clean stroke-based geometry
No embedded rasters
Optimized paths
Responsive viewBox

For web optimization:

# Compress SVG while maintaining quality
svgo --config='{
  "js2svg": {
    "indent": 2
  },
  "plugins": [
    "convertStyleToAttrs",
    "removeRasterImages"
  ]
}' input.svg -o output.svg

PNG Conversion

To convert SVG to PNG for older browser support:

# Using ImageMagick
convert -density 300 -background none favicon-256.svg favicon-256.png

# Using Inkscape
inkscape -D -z --file=favicon-256.svg --export-png=favicon-256.png

Accessibility

High contrast color ratios (WCAG AA compliant — 4.5:1 minimum)
Clean geometric shapes recognizable at all sizes
Scalable vector format
No text in icons (text added separately in wordmark)
No red-green color dependency for meaning

Attribution

These assets are part of the Claude How To project.

License: MIT (see project LICENSE file)

Version History

v3.0 (February 2026): Compass-bracket design with Black/White/Gray + Green accent palette
v2.0 (January 2026): Claude-inspired 12-ray starburst design with emerald palette
v1.0 (January 2026): Original hexagon-based progression icon design

Last Updated: February 2026 Current Version: 3.0 (Compass-Bracket) All Assets: Production-ready SVG, fully scalable, WCAG AA accessible

README.md Unescape Escape

Claude How To - Brand Assets

Directory Structure

Assets Overview

Design Concept (V3.0)

Logos

Icons

Favicons

HTML Integration

Basic Favicon Setup

Complete Setup

Color Palette

Primary Colors

Accent Color

Dark Mode

CSS Variables

Tailwind Config

Usage Guidelines

Design Guidelines

Logo Usage

Icon Usage

Favicon Usage

SVG Optimization

PNG Conversion

Accessibility

Attribution

Version History

README.md