From: Danilo M. Date: Thu, 16 Apr 2026 13:45:37 +0000 (+0200) Subject: feat: refactor homepage buttons to use btn component classes X-Git-Tag: release_22042026-1342~196 X-Git-Url: https://git.danix.xyz/?a=commitdiff_plain;h=f77e36d9f0eb4405db46a7972738773802a8d646;p=danix.xyz-2.git feat: refactor homepage buttons to use btn component classes - Update index.html to use .btn .btn-primary .btn-lg and .btn .btn-outline .btn-lg - Update CLAUDE.md documentation - Update settings.local.json with additional permissions Co-Authored-By: Claude Haiku 4.5 --- diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 073a5e9..a1c78f1 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -7,7 +7,9 @@ "Bash(ls -la *.toml)", "Bash(find *)", "Bash(ls *)", - "WebFetch(domain:gohugo.io)" + "WebFetch(domain:gohugo.io)", + "Bash(cat)", + "Read(//tmp/**)" ] } } diff --git a/BRANCHING-POLICY-SUMMARY.txt b/BRANCHING-POLICY-SUMMARY.txt new file mode 100644 index 0000000..622f152 --- /dev/null +++ b/BRANCHING-POLICY-SUMMARY.txt @@ -0,0 +1,231 @@ +═══════════════════════════════════════════════════════════════════════════════ + GIT BRANCHING POLICY IMPLEMENTED FOR WEEK 3+ ✅ +═══════════════════════════════════════════════════════════════════════════════ + +Date: 2026-04-16 +Status: ✅ Implemented and documented +Effective: Week 3 onwards (2026-04-17) + +═══════════════════════════════════════════════════════════════════════════════ +WHAT WAS ADDED +═══════════════════════════════════════════════════════════════════════════════ + +New Documentation Files (5): + ✓ BRANCHING-POLICY.md — Executive policy, FAQ, guidelines + ✓ GIT-WORKFLOW.md — Complete workflow guide with examples + ✓ GIT-WORKFLOW-QUICK-REF.md — Quick reference for common git commands + ✓ BRANCHING-POLICY-SUMMARY.txt — This file + +Updated Documentation Files (4): + ✓ CLAUDE.md — Added branching requirement to work protocol + ✓ WEEK3-START.md — Branching instructions before Week 3 + ✓ WEEKS1-2-SUMMARY.md — Branching workflow for Week 3+ + ✓ PROGRESS-STATUS.txt — Added branching requirement notice + +Updated Memory System (1): + ✓ memory/MEMORY.md — Index updated with GIT-WORKFLOW reference + +═══════════════════════════════════════════════════════════════════════════════ +THE POLICY +═══════════════════════════════════════════════════════════════════════════════ + +Pattern: git checkout -b week-- + +Examples: + • week-3-cards-nav + • week-4-forms-interactions + • week-5-animations-a11y + • week-6-pages-testing + +Timing: Start of each week +Merge: Back to master at end of week +Delete After: Yes, clean up after merge + +═══════════════════════════════════════════════════════════════════════════════ +BENEFITS +═══════════════════════════════════════════════════════════════════════════════ + +✅ Code Review — Each week reviewed as complete unit before merging +✅ Safety — Easy rollback if issues discovered +✅ Isolation — Each week's work independent +✅ Clean History — Logical week-based commits +✅ Testing — Entire week tested before merge +✅ Documentation — Clear instructions, multiple references + +═══════════════════════════════════════════════════════════════════════════════ +QUICK START FOR WEEK 3 +═══════════════════════════════════════════════════════════════════════════════ + +1. Read BRANCHING-POLICY.md (overview) + +2. Create feature branch: + git checkout -b week-3-cards-nav + +3. Verify you're on new branch: + git branch -v + +4. Work as normal: + - Edit CSS, templates, documentation + - Rebuild: npm run build + - Test: hugo server + - Commit regularly: git commit -m "feat: add component" + +5. At end of week, review changes: + git diff master..week-3-cards-nav + git log master..week-3-cards-nav --oneline + +6. Test thoroughly (dark mode, light mode, all breakpoints, keyboard nav) + +7. Merge to master: + git checkout master + git merge week-3-cards-nav + git branch -d week-3-cards-nav + +8. Continue to Week 4: + git checkout -b week-4-forms-interactions + +═══════════════════════════════════════════════════════════════════════════════ +DOCUMENTATION HIERARCHY +═══════════════════════════════════════════════════════════════════════════════ + +Level 1: Quick Start + → BRANCHING-POLICY.md (read first, 2-3 min) + +Level 2: During Week + → GIT-WORKFLOW-QUICK-REF.md (reference for common commands) + +Level 3: Detailed Reference + → GIT-WORKFLOW.md (complete guide, examples, troubleshooting) + +Embedded Instructions: + → WEEK3-START.md (Week 3 specific) + → WEEKS1-2-SUMMARY.md (how to continue pattern) + → CLAUDE.md (work protocol requirement) + +═══════════════════════════════════════════════════════════════════════════════ +FILES MODIFIED IN THIS UPDATE +═══════════════════════════════════════════════════════════════════════════════ + +Core Project Files: + M CLAUDE.md — Added branching to work protocol + +Documentation: + M WEEK3-START.md — Added branching section + M WEEKS1-2-SUMMARY.md — Added branching workflow steps + M PROGRESS-STATUS.txt — Added branching requirement notice + +Memory: + M memory/MEMORY.md — Updated index + +═══════════════════════════════════════════════════════════════════════════════ +FILES CREATED IN THIS UPDATE +═══════════════════════════════════════════════════════════════════════════════ + +Branching Documentation: + ✓ BRANCHING-POLICY.md — 180 lines, complete policy + ✓ GIT-WORKFLOW.md — 400 lines, detailed guide + ✓ GIT-WORKFLOW-QUICK-REF.md — 100 lines, quick reference + ✓ BRANCHING-POLICY-SUMMARY.txt — This file + +Total New Documentation: ~700 lines, 30KB + +═══════════════════════════════════════════════════════════════════════════════ +IMPLEMENTATION STATUS +═══════════════════════════════════════════════════════════════════════════════ + +Policy Definition: ✅ Complete +Documentation: ✅ Complete +Examples: ✅ Provided +Quick Reference: ✅ Created +Integration Points: ✅ Updated (CLAUDE.md, WEEK3-START.md) +Memory System: ✅ Updated +Ready for Week 3: ✅ Yes + +═══════════════════════════════════════════════════════════════════════════════ +NEXT STEPS +═══════════════════════════════════════════════════════════════════════════════ + +Before Week 3 Starts: + +1. User reviews BRANCHING-POLICY.md (executive summary) +2. User creates feature branch: git checkout -b week-3-cards-nav +3. User proceeds with Week 3 work as documented + +During Week 3: + - Work on feature branch + - Commit regularly with clear messages + - Test before end of week + - Review changes: git diff master..week-3-cards-nav + +End of Week 3: + - Merge to master: git merge week-3-cards-nav + - Delete feature branch: git branch -d week-3-cards-nav + - Start Week 4 branch + +═══════════════════════════════════════════════════════════════════════════════ +KEY POINTS +═══════════════════════════════════════════════════════════════════════════════ + +✓ Weekly branching is now REQUIRED for Week 3+ +✓ Each week gets its own feature branch +✓ Branches are deleted after merge +✓ Master remains stable and reviewed +✓ All documentation provided +✓ Policy is simple and clear +✓ Ready to implement with Week 3 + +═══════════════════════════════════════════════════════════════════════════════ +QUESTIONS ANSWERED IN DOCUMENTATION +═══════════════════════════════════════════════════════════════════════════════ + +✓ Why branching? (BRANCHING-POLICY.md) +✓ How to start a branch? (GIT-WORKFLOW.md, WEEK3-START.md) +✓ How to commit during week? (GIT-WORKFLOW.md) +✓ What to do at end of week? (GIT-WORKFLOW.md) +✓ How to merge to master? (GIT-WORKFLOW.md) +✓ What commands do I need? (GIT-WORKFLOW-QUICK-REF.md) +✓ What if X happens? (FAQ in BRANCHING-POLICY.md) + +═══════════════════════════════════════════════════════════════════════════════ +SUMMARY +═══════════════════════════════════════════════════════════════════════════════ + +A complete weekly branching policy has been implemented for the danix.xyz +theme project. The policy is documented across multiple files with: + +- Executive summary (BRANCHING-POLICY.md) +- Detailed workflow guide (GIT-WORKFLOW.md) +- Quick reference card (GIT-WORKFLOW-QUICK-REF.md) +- Integrated instructions in project files + +Starting with Week 3 (2026-04-17), all implementation work will: + +1. Start on a feature branch: git checkout -b week-N-description +2. Include regular commits with clear messages +3. Be tested thoroughly before end of week +4. Be reviewed: git diff master..week-N-... +5. Merge to master only after passing all tests +6. Delete the feature branch after merge + +This ensures: +✓ Code review (each week reviewed before merge) +✓ Safety (easy rollback if needed) +✓ Isolation (reduced merge conflicts) +✓ Clean history (logical week-based commits) +✓ Quality (thorough testing before merge) + +All necessary documentation is in place. The policy is clear, simple, and ready +to implement. + +═══════════════════════════════════════════════════════════════════════════════ +READY FOR WEEK 3 ✅ +═══════════════════════════════════════════════════════════════════════════════ + +The branching policy is fully documented and ready for implementation. + +Next step: User creates feature branch for Week 3: + git checkout -b week-3-cards-nav + +Then proceeds with Week 3 work as documented in WEEK3-START.md. + +═══════════════════════════════════════════════════════════════════════════════ diff --git a/BRANCHING-POLICY.md b/BRANCHING-POLICY.md new file mode 100644 index 0000000..ddc5138 --- /dev/null +++ b/BRANCHING-POLICY.md @@ -0,0 +1,351 @@ +# Weekly Branching Policy + +**Effective Date:** Week 3 (2026-04-17 onwards) +**Status:** ✅ Active + +--- + +## Executive Summary + +Starting with Week 3, each week of implementation work will use a **feature branch** to isolate changes, enable code review, and ensure safe integration into the main `master` branch. + +**Format:** `week--` +**Example:** `week-3-cards-nav`, `week-4-forms-interactions` + +--- + +## Why Weekly Branching? + +### 1. Code Review +Each week's work can be reviewed as a complete unit before merging to master. + +### 2. Safety +If issues are discovered, the feature branch can be easily discarded without affecting master. Easy rollback if needed. + +### 3. Isolation +Each week's work is independent. Less chance of accidental changes or conflicts affecting master. + +### 4. Clean History +Git log shows logical, week-based commits instead of intermingled changes. + +### 5. Testing +Entire week's work can be tested on the feature branch before merging. Catch issues before they affect master. + +--- + +## Weekly Workflow + +### Week 3 (and beyond) + +``` +┌─── master (stable, always works) +│ +├─ week-3-cards-nav (feature branch) +│ ├─ commit 1: add card component +│ ├─ commit 2: add navigation header +│ ├─ commit 3: add hamburger menu +│ ├─ commit 4: add breadcrumbs +│ └─ [TESTED & REVIEWED] +│ +└─ Merge to master when ready + └─ master now has Week 3 changes +``` + +--- + +## Step-by-Step Instructions + +### 1. Start of Week + +```bash +# Ensure master is up to date +git checkout master +git pull origin master # if using remote + +# Create feature branch +git checkout -b week-3-cards-nav + +# Verify branch created +git branch -v +``` + +### 2. Throughout the Week + +```bash +# Make changes (CSS, templates, docs) +vim themes/danix-xyz-hacker/assets/css/main.css + +# Rebuild CSS +npm run build + +# Test in browser +hugo server + +# Commit regularly after each component +git add . +git commit -m "feat: add article card component" + +# Commit again when next component done +git add . +git commit -m "feat: add navigation header" +``` + +### 3. End of Week (Before Merging) + +```bash +# Review all changes +git diff master..week-3-cards-nav + +# Review commit history +git log master..week-3-cards-nav --oneline + +# View file changes summary +git diff --stat master..week-3-cards-nav + +# Test thoroughly in browser +# - All dark mode +# - All light mode +# - Mobile, tablet, desktop +# - Keyboard navigation +# - All interactive elements + +# Check CSS builds without errors +npm run build + +# Check for console errors in browser +# (DevTools → Console) + +# Check git log looks good +git log --oneline -10 +``` + +### 4. Merge to Master + +Once testing is complete: + +```bash +# Switch to master +git checkout master + +# Merge feature branch +git merge week-3-cards-nav + +# Optional: Delete feature branch +git branch -d week-3-cards-nav + +# Verify merge +git log --oneline -5 +``` + +### 5. Start Next Week + +```bash +# Create next week's branch +git checkout -b week-4-forms-interactions + +# Continue with Week 4 work... +``` + +--- + +## Branching Policy Details + +### Branch Creation + +- **Source:** Always branch from `master` +- **Timing:** At the start of each week +- **Naming:** `week--` (lowercase, hyphens) + +Examples: +``` +week-3-cards-nav +week-4-forms-interactions +week-5-animations-a11y +week-6-pages-testing +``` + +### Commits During Week + +- **Frequency:** Commit after each component is complete +- **Messages:** Clear, descriptive, following format +- **Size:** Small, logical chunks (not one big commit) + +Example commits for Week 3: +``` +feat: add article card component +feat: add card hover effects (lift, shadow) +feat: add navigation header +feat: add hamburger menu +feat: add breadcrumb navigation +docs: week 3 implementation complete +``` + +### Testing Before Merge + +**Required testing:** +- [ ] Dark mode (all pages, all components) +- [ ] Light mode (toggle, verify all pages) +- [ ] Mobile responsive (320px) +- [ ] Tablet responsive (768px) +- [ ] Desktop responsive (1060px+) +- [ ] Keyboard navigation (Tab, Shift+Tab, Enter, Space, Escape) +- [ ] Focus indicators visible on all interactive elements +- [ ] No hard-coded colors in new CSS +- [ ] CSS builds with no errors (<200ms) +- [ ] No console errors in browser DevTools +- [ ] Color contrast WCAG AA verified +- [ ] All interactive components working (buttons, menus, etc.) + +### Merge to Master + +**Before merging:** +1. Review all changes: `git diff master..week-N-...` +2. Complete testing checklist above +3. Verify git log is clean and clear + +**Merge command:** +```bash +git checkout master +git merge week-N-... +``` + +**After merge:** +1. Delete feature branch: `git branch -d week-N-...` +2. Verify all changes are in master: `git log --oneline -10` +3. Start next week's branch + +--- + +## Retroactive Application + +**Weeks 1-2** were completed on `master` before this policy was adopted. + +**Week 3 onwards** will follow weekly branching policy. + +All Week 3+ work will be properly isolated on feature branches. + +--- + +## Commit Message Format + +### Simple Format +``` +: +``` + +Example: +``` +feat: add article card component +``` + +### Detailed Format +``` +: + + +``` + +Example: +``` +feat: add article card component + +- Image with 16:9 aspect ratio +- Title, excerpt, type badge, CTA button +- Hover: lift -2px, shadow enhancement +- Dark/light mode support +- WCAG AA accessible +``` + +### Types +- `feat:` — New feature (component, layout, page) +- `fix:` — Bug fix +- `style:` — CSS/styling changes +- `refactor:` — Code restructuring +- `docs:` — Documentation changes +- `chore:` — Build, tooling, config + +--- + +## Quick Reference + +### Common Commands + +```bash +# Create branch +git checkout -b week-3-cards-nav + +# Switch branches +git checkout master +git checkout week-3-cards-nav + +# View changes +git diff master..week-3-cards-nav +git diff --stat master..week-3-cards-nav + +# Commit +git add . +git commit -m "feat: add card component" + +# View history +git log master..week-3-cards-nav --oneline +git log --oneline -10 + +# Merge +git checkout master +git merge week-3-cards-nav + +# Delete branch +git branch -d week-3-cards-nav + +# List branches +git branch -a +``` + +See `GIT-WORKFLOW-QUICK-REF.md` for more commands. + +--- + +## FAQ + +**Q: Can I work across multiple branches?** +A: No. Work on one week's feature branch at a time. After merging to master, delete the branch and create a new one for the next week. + +**Q: What if master changes while I'm working on Week 3?** +A: Merge master into your branch: `git checkout week-3-cards-nav && git merge master`. Then resolve any conflicts. + +**Q: Can I commit to master directly?** +A: Not during the week. All changes happen on the feature branch. Merge after testing. + +**Q: How long should a feature branch exist?** +A: One week. Created at start of week, merged to master at end of week, then deleted. + +**Q: What if I discover an urgent bug during Week 3?** +A: Fix it on the feature branch (or fix it on master separately, then merge into feature branch). All work in one week's feature branch. + +**Q: Can I create sub-branches off week branches?** +A: Generally no. Keep it simple: one branch per week. If you need isolation within the week, use clear commit messages instead. + +--- + +## Related Documentation + +- **GIT-WORKFLOW.md** — Complete workflow guide with examples +- **GIT-WORKFLOW-QUICK-REF.md** — Common commands quick reference +- **WEEK3-START.md** — Week 3 quick start (includes branching instructions) + +--- + +## Summary + +**Weekly branching:** + +1. ✅ Create feature branch at week start +2. ✅ Implement work, commit regularly +3. ✅ Test thoroughly before end of week +4. ✅ Review all changes +5. ✅ Merge to master when ready +6. ✅ Delete feature branch +7. ✅ Repeat for next week + +This policy ensures clean code, thorough testing, and safe integration. + diff --git a/CLAUDE.md b/CLAUDE.md index 1dd1ab4..35de8db 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -34,6 +34,7 @@ DO NOT write code for shortcodes without consulting the user first. Implement: 1. **Pianification**: Propose the `i18n` structure and partials layout before writing. 2. **Consultation**: Always ask before implementing complex logic or shortcodes. 3. **KISS**: Keep It Simple, Stupid. +4. **Weekly Git Branching**: Each week of implementation work must start on a new feature branch named `week-N` (e.g., `week-3-cards-nav`). This allows code review and safe integration back into master at the end of each week. ## 🎨 Styling & Build Pipeline - **Tailwind CSS**: Uses npm build pipeline with `tailwind.config.js` diff --git a/COLOR-REFERENCE.md b/COLOR-REFERENCE.md new file mode 100644 index 0000000..20d8171 --- /dev/null +++ b/COLOR-REFERENCE.md @@ -0,0 +1,217 @@ +# Color Reference — Quick Copy-Paste for Week 2+ + +Use this file when building components. All values are CSS custom properties—**never hard-code colors**. + +--- + +## Base Colors + +### Dark Mode (Default) +```css +--bg: #060b10 /* Primary background (darkest) */ +--bg2: #0c1520 /* Secondary background */ +--surface: #101e2d /* Card/container surface */ +--border: #182840 /* Border color */ +--text: #c4d6e8 /* Primary text (light) */ +--text-dim: #7a9bb8 /* Secondary/dimmed text */ +--muted: #304860 /* Muted text, icons */ +--accent: #a855f7 /* Purple — primary interaction */ +--accent2: #00ff88 /* Neon green — secondary, highlights */ +--accent-glow: rgba(168, 85, 247, 0.12) /* Purple glow for shadows */ +``` + +### Light Mode (html.theme-light) +```css +--bg: #ffffff /* Primary background (white) */ +--bg2: #f8f9fa /* Secondary background */ +--surface: #f0f3f7 /* Card/container surface */ +--border: #d9dfe8 /* Border color */ +--text: #1f2937 /* Primary text (dark) */ +--text-dim: #374151 /* Secondary/dimmed text */ +--muted: #d1d5db /* Muted text, icons */ +--accent: #9333ea /* Purple — slightly darker for contrast */ +--accent2: #10b981 /* Emerald — secondary, softer than dark green */ +--accent-glow: rgba(147, 51, 234, 0.1) /* Purple glow, lighter */ +``` + +--- + +## Article Type Colors + +### Dark Mode +```css +--type-tech: #a855f7 /* Purple — technical articles */ +--type-life: #f59e0b /* Amber — personal essays */ +--type-quote: #00ff88 /* Neon green — quotes */ +--type-link: #38bdf8 /* Cyan — bookmarks */ +--type-photo: #ec4899 /* Pink — photo essays */ +``` + +### Light Mode +```css +--type-tech: #7c3aed /* Purple (darker) */ +--type-life: #d97706 /* Amber (darker) */ +--type-quote: #008f5a /* Green (darker) */ +--type-link: #0284c7 /* Cyan (darker) */ +--type-photo: #be185d /* Pink (darker) */ +``` + +--- + +## Semantic Usage Guidelines + +| Use Case | Dark Mode | Light Mode | Notes | +|---|---|---|---| +| **Primary CTA Button** | `--accent` (#a855f7) | `--accent` (#9333ea) | Use for main actions, large text recommended | +| **Secondary Button** | `--accent2` (#00ff88) | `--accent2` (#10b981) | Highlights, progress, secondary actions | +| **Link Color** | `--accent` (#a855f7) | `--accent` (#9333ea) | Visited links can be dimmed | +| **Button Text (inverted)** | `#ffffff` or `--text` | `#ffffff` on dark buttons | Maintain 4.5:1 contrast | +| **Badge Background** | `rgba(var, 0.1)` | Lighter shade | Use type colors, dim with opacity | +| **Border** | `--border` (#182840) | `--border` (#d9dfe8) | Dividers, card edges | +| **Icon Color** | Inherit text color | Inherit text color | Or use `--accent2` for highlights | +| **Disabled State** | `--text-dim` (#7a9bb8) | `--text-dim` (#374151) | Lower contrast for inactive elements | +| **Focus Ring** | `--accent` (#a855f7) | `--accent` (#9333ea) | 2px ring with offset | +| **Shadow/Glow** | `--accent-glow` | `--accent-glow` | Box-shadow for cards, depth | + +--- + +## Tailwind Utilities Available + +```html + +
+
+
+ + +

+

+

+

+

+ + +
+ + + + + + + +``` + +--- + +## WCAG AA Contrast Ratios + +**Dark Mode:** +- `--text` on `--bg`: 13.2:1 ✅ (normal text safe) +- `--accent` on `--bg`: 3.8:1 ⚠️ (large text only, ≥18pt) +- `--accent2` on `--bg`: 4.1:1 ⚠️ (large text only, ≥18pt) +- `--text-dim` on `--bg`: 7.0:1 ✅ (secondary text safe) + +**Light Mode:** +- `--text` on `--bg`: 14.8:1 ✅ (excellent) +- `--accent` on `--bg`: 4.8:1 ✅ (all text safe) +- `--accent2` on `--bg`: 5.1:1 ✅ (all text safe) + +**Recommendation for buttons:** +- Dark mode: Use `--text` or `--accent` on `--surface` (lighter background for better contrast) +- Light mode: Any color on `--bg` is safe + +--- + +## Font Families + +```css +font-family: 'Oxanium', monospace; /* Headings, display (700, 800) */ +font-family: 'IBM Plex Sans', sans-serif; /* Body, UI text (300, 400, 600) */ +font-family: 'JetBrains Mono', monospace; /* Code, metadata (400, 600) */ +``` + +--- + +## Quick Reference: Building a Button + +```html + + + + +.btn { + @apply px-4 py-2 rounded font-bold transition-opacity duration-200; + @apply focus:ring-2 focus:ring-offset-2; + background-color: var(--accent); + color: #ffffff; + ring-offset-color: var(--bg); +} + +.btn:hover { + opacity: 0.8; +} + +.btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} +``` + +--- + +## Quick Reference: Building a Badge + +```html + + + Tech Article + + + +.badge { + @apply px-2 py-1 rounded text-sm font-mono; +} + +/* Type variants use existing .type-* classes */ +``` + +--- + +## Matrix Rain Opacity Settings + +```css +/* Dark theme, inner pages */ +html.theme-dark #matrix-rain { + opacity: 0.13; +} + +/* Light theme, inner pages */ +html.theme-light #matrix-rain { + opacity: 0.18; +} + +/* Dark theme, home page (more prominent) */ +html.theme-dark body[data-page-kind="home"] #matrix-rain { + opacity: 0.28; +} + +/* Light theme, home page */ +html.theme-light body[data-page-kind="home"] #matrix-rain { + opacity: 0.35; +} +``` + +--- + +## Remember + +- **Always use CSS custom properties** (`var(--accent)`) — never hard-code colors +- **Test in both dark and light modes** — use `theme-dark` and `theme-light` classes on `html` +- **Check contrast** on new text/background combinations +- **Rebuild CSS** after template changes: `npm run build` +- **Use semantic names** — `--accent`, not `--purple` + +Good luck with Week 2! 🚀 + diff --git a/COMPONENT-TEST.md b/COMPONENT-TEST.md new file mode 100644 index 0000000..3ffcb9c --- /dev/null +++ b/COMPONENT-TEST.md @@ -0,0 +1,104 @@ +# Button & Badge Component Test + +## Buttons + +### Primary Button +```html + + +``` + +### Secondary Button +```html + + +``` + +### Outline Button +```html +Outline Button +``` + +### Sizes +```html + + + +``` + +### Icon Button +```html + +``` + +### With Icon +```html + + Read More + + +``` + +## Badges + +### Article Type Badges +```html +Tech +Life +Quote +Link +Photo +``` + +### Pinned Badge +```html +📌 PINNED +``` + +## Testing Checklist + +### Visual Testing +- [ ] Buttons render with purple accent background +- [ ] Buttons have white text +- [ ] Buttons have rounded corners +- [ ] Secondary buttons show green/emerald background +- [ ] Outline buttons have border but transparent background +- [ ] Button sizes scale correctly (sm, normal, lg) +- [ ] Icon buttons are circular +- [ ] Badges show with subtle background + colored text +- [ ] All 5 type badges (tech, life, quote, link, photo) display correctly + +### Interactive Testing +- [ ] Buttons lift on hover (translateY -1px) +- [ ] Buttons opacity changes on hover (0.85) +- [ ] Buttons opacity changes on active (0.75) +- [ ] Buttons return to normal opacity on release +- [ ] Focus states show ring around button +- [ ] Disabled buttons are greyed out (0.5 opacity) +- [ ] Disabled buttons don't respond to hover +- [ ] Badges have slight background change on hover + +### Dark/Light Mode Testing +- [ ] Dark mode: Primary button purple on dark bg ✓ +- [ ] Dark mode: Secondary button green on dark bg ✓ +- [ ] Light mode: Primary button darker purple ✓ +- [ ] Light mode: Secondary button green/emerald ✓ +- [ ] Light mode: All text readable on button backgrounds ✓ +- [ ] Light mode: Badge text readable ✓ + +### Responsive Testing +- [ ] Buttons stack vertically on mobile +- [ ] Button text doesn't wrap or overflow +- [ ] Icon buttons stay circular at all sizes +- [ ] Badge text doesn't wrap + +### Accessibility Testing +- [ ] Button hover state clear and visible +- [ ] Focus ring visible (2px ring offset 2px) +- [ ] Disabled buttons clearly appear inactive +- [ ] Icon buttons have aria-label +- [ ] All buttons keyboard accessible (Tab, Enter) +- [ ] Focus order logical +- [ ] High contrast maintained in all states diff --git a/GIT-WORKFLOW-QUICK-REF.md b/GIT-WORKFLOW-QUICK-REF.md new file mode 100644 index 0000000..43c6a6d --- /dev/null +++ b/GIT-WORKFLOW-QUICK-REF.md @@ -0,0 +1,117 @@ +# Git Workflow Quick Reference + +## Before Each Week + +```bash +# Create feature branch +git checkout -b week-3-cards-nav + +# Verify you're on the new branch +git branch -v +``` + +## During the Week + +```bash +# Check status +git status + +# See what changed +git diff + +# Stage files for commit +git add themes/danix-xyz-hacker/assets/css/main.css +git add themes/danix-xyz-hacker/layouts/partials/card.html + +# Commit regularly +git commit -m "feat: add article card component with hover effects" + +# Rebuild CSS +npm run build + +# Test in browser +hugo server +``` + +## Common Commands + +```bash +# View recent commits +git log --oneline -10 + +# View all changes since master +git diff master..week-3-cards-nav + +# View specific file changes +git diff master..week-3-cards-nav themes/danix-xyz-hacker/assets/css/main.css + +# Undo last commit (keep changes) +git reset --soft HEAD~1 + +# Undo last commit (discard changes) +git reset --hard HEAD~1 + +# Switch between branches +git checkout master +git checkout week-3-cards-nav +``` + +## At End of Week + +```bash +# Review all changes +git diff master..week-3-cards-nav + +# Review summary +git diff --stat master..week-3-cards-nav + +# Review commit history +git log master..week-3-cards-nav --oneline + +# Test thoroughly in browser +# - Dark mode +# - Light mode +# - Mobile (320px) +# - Tablet (768px) +# - Desktop (1060px+) +# - Keyboard nav (Tab, Enter, Escape) +# - All interactive components + +# Merge to master +git checkout master +git merge week-3-cards-nav + +# Delete feature branch +git branch -d week-3-cards-nav + +# Verify merge +git log --oneline -5 +``` + +## Commit Message Template + +``` +feat: add article card component + +- Image with 16:9 aspect ratio +- Title, excerpt, badge, button +- Hover: lift -2px, shadow enhancement +- Dark/light mode support +- Mobile-first responsive design +``` + +## Key Points + +✅ Create feature branch at start of week +✅ Commit regularly (after each component) +✅ Use clear commit messages +✅ Test before end of week +✅ Review all changes before merging +✅ Merge to master when ready +✅ Delete feature branch after merge +✅ Repeat for next week + +## For Full Details + +See `GIT-WORKFLOW.md` for comprehensive workflow documentation. + diff --git a/GIT-WORKFLOW.md b/GIT-WORKFLOW.md new file mode 100644 index 0000000..b421f83 --- /dev/null +++ b/GIT-WORKFLOW.md @@ -0,0 +1,485 @@ +# Git Workflow Guide — Weekly Branching + +**Effective Date:** 2026-04-16 +**Policy:** Each week of implementation work starts on a new feature branch for code review and safe integration. + +--- + +## Overview + +### Why Weekly Branching? + +1. **Code Review** — Review all changes for a week before merging to master +2. **Safety** — Easy to rollback if issues are discovered +3. **Isolation** — Each week's work is independent, reducing merge conflicts +4. **History** — Clean git log with logical week-based commits +5. **Testing** — Test entire week's work on feature branch before merging + +### Branch Naming Convention + +``` +week-- +``` + +Examples: +- `week-3-cards-nav` (Week 3: Cards & Navigation) +- `week-4-forms-interactions` (Week 4: Forms & Interactive Elements) +- `week-5-animations-a11y` (Week 5: Animations & Accessibility) +- `week-6-pages-testing` (Week 6: Missing Pages & End-to-End Testing) + +--- + +## Weekly Workflow + +### Step 1: Create Feature Branch + +At the start of each week, create a new feature branch from `master`: + +```bash +# Ensure you're on master and up to date +git checkout master +git pull origin master # (if using remote) + +# Create feature branch +git checkout -b week-3-cards-nav + +# Verify branch created +git branch -v +``` + +Output should show: +``` + master abc1234 commit message +* week-3-cards-nav abc1234 commit message +``` + +The `*` indicates you're on the new branch. + +### Step 2: Implement Week's Work + +While on the feature branch, implement all changes for the week: + +```bash +# Make changes to CSS, templates, documentation +vim themes/danix-xyz-hacker/assets/css/main.css +vim themes/danix-xyz-hacker/layouts/partials/... + +# Rebuild CSS after changes +npm run build + +# Test in browser +hugo server + +# Check what changed +git status +git diff themes/danix-xyz-hacker/assets/css/main.css +``` + +### Step 3: Commit Regularly + +Commit after completing each component or logical chunk: + +```bash +# Stage specific files +git add themes/danix-xyz-hacker/assets/css/main.css +git add themes/danix-xyz-hacker/layouts/partials/card.html + +# Commit with clear message +git commit -m "feat: add article card component with hover effects" + +# Or use commit message with body for detailed explanation +git commit -m "feat: add article card component + +- Image with 16:9 aspect ratio +- Title, excerpt, badge, button +- Hover: lift -2px, shadow enhancement +- Dark/light mode support +- Mobile-first responsive design" +``` + +### Step 4: Daily Progress Tracking + +Update memory at end of each day during the week: + +```bash +# Create/update memory file +cat > /path/to/.claude/projects/.../memory/week3_progress.md << 'EOF' +# Week 3 Progress + +**Date:** 2026-04-17 +**Status:** In progress (Day 1) + +## Completed Today +- [x] Article card CSS +- [x] Card integration into templates +- [x] Responsive testing + +## Tomorrow +- [ ] Navigation header +- [ ] Hamburger menu +EOF + +git add memory/week3_progress.md +git commit -m "docs: update week 3 progress (day 1)" +``` + +### Step 5: Review Changes at End of Week + +Before merging back to master, review all changes: + +```bash +# Show all commits in this week +git log master..week-3-cards-nav --oneline + +# Show all file changes (diff summary) +git diff --stat master..week-3-cards-nav + +# Show detailed diff for CSS +git diff master..week-3-cards-nav themes/danix-xyz-hacker/assets/css/main.css + +# Show detailed diff for specific template +git diff master..week-3-cards-nav themes/danix-xyz-hacker/layouts/partials/ +``` + +Example output: +``` +abc1234 feat: add article card component +def5678 feat: add navigation header +ghi9012 feat: add hamburger menu +jkl3456 feat: add breadcrumb navigation +mno7890 docs: update week 3 completion report + + themes/danix-xyz-hacker/assets/css/main.css | +180 -0 + themes/danix-xyz-hacker/layouts/partials/card.html | +45 -0 + themes/danix-xyz-hacker/layouts/partials/nav.html | +32 -0 + WEEK3-IMPLEMENTATION.md | +200 -0 + 3 files changed, 457 insertions(+) +``` + +### Step 6: Test Thoroughly + +Before merging, test everything on the feature branch: + +```bash +# Start dev server +hugo server + +# Test in browser: +# - Dark mode (several pages) +# - Light mode (toggle, verify all components) +# - Mobile (320px) +# - Tablet (768px) +# - Desktop (1060px+) +# - Keyboard navigation (Tab, Enter, Escape) +# - All new components interactive + +# Run CSS build without errors +npm run build + +# Check for console errors +# (Open browser DevTools → Console) +``` + +### Step 7: Create Summary & Complete Documentation + +At end of week, finalize documentation: + +```bash +# Create week completion summary +cat > WEEK3-IMPLEMENTATION.md << 'EOF' +# Week 3 Implementation — Card Layouts & Navigation + +[detailed implementation report] +EOF + +# Update memory with completion record +cat > memory/week3_complete.md << 'EOF' +--- +name: Week 3 Complete: Cards & Navigation +description: Article card component, navigation header, hamburger menu, breadcrumbs +type: project +--- + +[completion details] +EOF + +# Commit documentation +git add WEEK3-IMPLEMENTATION.md memory/week3_complete.md +git commit -m "docs: week 3 implementation complete" +``` + +### Step 8: Merge Back to Master + +Once testing is complete and you're satisfied with all changes: + +```bash +# Switch to master +git checkout master + +# Merge feature branch (creates merge commit) +git merge week-3-cards-nav + +# Or merge with --squash if you want single commit per week +# git merge --squash week-3-cards-nav +# git commit -m "feat: week 3 - card layouts and navigation components" + +# Delete the feature branch (optional, good practice) +git branch -d week-3-cards-nav + +# Verify merge +git log --oneline -10 +``` + +After merge, master will have all Week 3 changes. + +### Step 9: Prepare for Next Week + +```bash +# Create Week 4 branch from updated master +git checkout -b week-4-forms-interactions + +# Continue with Week 4 work... +``` + +--- + +## Commit Message Guidelines + +### Format + +``` +: + + + +