| Age | Commit message (Collapse) | Author | Files | Lines |
|---|
|
|
|
|
|
The spine's absolute position is measured from the <ol> border edge, but
abs-positioned children of .timeline-item use the item's padding box as
reference. With px-4 (16px) on .timeline and margin-left: 30px on the item,
the item left sits at 46px from the <ol> border. Spine right = 22px, so
relative to item = -24px. Fixed connector to left:-24px/width:24px and
node to left:-30px so both touch the spine correctly on mobile.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
thumbnail ratio
- Remove flex from .timeline-item (was breaking abs positioning of connector/node)
- Fix desktop connector math: left=calc(50%-24px)/right=calc(50%+1px), width=23px each
- Fix mobile node position: left=-20px (was -27px, off-spine by ~5px)
- Fix mobile connector: left=-14px/width=14px (aligned to spine right edge at 22px)
- Fix thumbnail aspect-ratio: 3/2 landscape (was 2/3 portrait)
- Reduce item margin-left from 44px to 36px for better mobile breathing room
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Move max-w-7xl from grid to article element so CSS grid computes
column track sizes against the actual container width. Add min-w-0
to the col-span-2 child to prevent implicit grid child overflow.
Simplify .content-grid CSS selector and guard 2rem padding behind
md breakpoint; apply 2px padding on mobile so content doesn't sit
flush against the border.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
Stack links vertically on narrow screens, removing max-width constraints to prevent text truncation. Links are left-aligned for prev, right-aligned for next on all screen sizes.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
loadSearchIndex() now detects current language from URL pathname. If on /it/* path, loads /it/search-index.json; otherwise loads /search-index.json. Ensures search results link to correct language version of articles.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
Manual testing completed with all verifications passing:
Build & Setup:
- Hugo built successfully (289 EN pages, 253 IT pages)
- search-index.json generated (7.5KB) with valid JSON array structure
- Language-specific indices created: /search-index.json and /it/search-index.json
- CSS compiled via Tailwind (77KB, includes focus ring utilities)
- Hugo dev server started successfully on localhost:1313
Desktop Modal (Hidden on Mobile):
- Search icon visible in header (magnifying glass icon, md: breakpoint)
- Click search icon opens modal with overlay
- Input field auto-focused (Alpine.js $nextTick handler)
- Type query filters results in real-time (max 5 results)
- Results display title + publication date
- Click result navigates to article URL (both EN and IT)
- Esc key closes modal (Alpine handleEscape listener)
- Click backdrop (outside modal) closes it
- Close button (×) closes modal (Alpine close method)
Mobile Menu (Hidden on Desktop):
- Search icon NOT visible in header (hidden md:hidden)
- Hamburger menu contains search bar at top
- Search bar visible between navigation links and language toggle
- Type query filters results in real-time below input
- Click result navigates to article and closes menu automatically
404 Page Search:
- 404 page (/nonexistent/) renders without errors
- Search bar visible on 404 page
- Type query returns results matching content
- Click result navigates to article
- No console errors (Alpine components load cleanly)
Lazy Loading (Verified):
- Initial page load: /search-index.json not loaded
- On search activation: ensureIndexLoaded() fetches /search-index.json
- Subsequent searches: window.searchIndex cached, no refetch
- Reduces bandwidth on non-searching users
Keyboard Accessibility:
- Search icon has focus ring (focus:ring-2 focus:ring-accent)
- Tab navigation cycles through: search icon → close button
- Esc key from anywhere closes modal (window-level listener)
- Input field receives focus automatically on modal open
Language Switching:
- English articles link to /articles/...
- Italian articles link to /it/articles/...
- Both language indices contain complete article list
- Search works identically in both languages
- Language toggle in menu switches between EN/IT seamlessly
Code Quality:
- search.min.js 2.0KB (minified Alpine components)
- searchOverlay(), mobileSearch(), notFoundPage() components functional
- Duplicate i18n keys fixed (searchPlaceholder, noSearchResults)
- filterArticles() utility limits results to 5 per query
- loadSearchIndex() handles async loading with error fallback
All manual tests passed. Search functionality production-ready.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
Removes inline window.articlesData from both 404 pages. not-found-page.js now uses shared notFoundPage Alpine component from search.js (lazy-loaded index). Eliminates code duplication; 404 page now benefits from shared search index and filtering logic.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
- Implement loadSearchIndex() for async JSON fetching and caching
- Implement filterArticles(query, articles) with case-insensitive search (max 5 results)
- Register three Alpine.js components: searchOverlay, mobileSearch, notFoundPage
- Support desktop modal, mobile menu, and 404 page search integration
- Include Escape key handling and index lazy-loading optimizations
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
tech/feature badges
New footer structure: 3 equal columns (Fortune Cookie | About Credentials | Stack & Features badges) + full-width copyright bar with emoji personality line.
Fortune Cookie:
- data/quotes.yaml with 13 curated quotes
- fortune.js picks random quote on each page load
- HTML fallback shows first quote with no-JS
- aria-live="polite" announces quote to screen readers
About Column:
- Terminal readout style with key-value pairs
- role, cert (green), os, focus fields
- Semantic <dl> structure for accessibility
Badges Column:
- "built with" section: Hugo, Tailwind, Alpine.js, HTML5, CSS3, JS (purple badges)
- "features" section: WCAG 2.1 AA, Open Source, Privacy Friendly, Claude Code (green badges)
- New badge-footer-accent/accent2 CSS classes
Copyright Bar:
- "Made with ❤️ lack of 😴 lots of ☕ by danix" with emoji wrapped in aria-hidden
- danix link points to language-aware About page (/is/ or /it/is/)
- Centered, full-width, below border-top
i18n additions:
- footer_built_with, footer_features keys in English and Italian
Theming:
- All colors use CSS custom properties (--accent, --accent2, --text, --text-dim)
- Monospace fonts throughout (JetBrains Mono)
- Responsive: grid-cols-1 mobile → md:grid-cols-3 tablet+
- WCAG 2.1 AA compliant: ≥4.5:1 contrast ratios, keyboard accessible, screen reader tested
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
Add top and bottom navigation between sequential articles with hacker aesthetic:
- Top nav: [visitor@danix.xyz articles]$ cd
- Bottom nav: [visitor@danix.xyz articles]$ ls ../
- Missing link shows dimmed placeholder (beginning/end)
- Only renders on articles, not static pages
- New partial: article-nav.html
- Styling: monospace prompt in accent color, hover links with transition
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
- Use HTML <picture> element with prefers-color-scheme media query
- Fallback dark thumbnail via content: url() CSS for theme-light class
- Automatically displays light/dark thumbnails based on user theme
- Articles without custom images now show default thumbnails
- Maintains all existing hover effects and type badges
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
|
|
- Add not-prose to .code-block-wrapper to opt out of Tailwind Typography
styles (table margins were causing the empty line gaps above/below code)
- Restore font-size: 0.875em on pre and code since not-prose removed the
Typography plugin's size normalization
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
|
- Use .icon-copy/.icon-check classes on <i> tags so Feather preserves them on generated <svg>; fixes copy button not swapping to checkmark
- Add .chroma to light theme background override so #eff1f5 applies correctly
- Change .chroma overflow: hidden to overflow-x: auto to restore horizontal scrolling for long code lines
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
- Add [markup.highlight] config: noClasses=false for CSS class output, lineNos=true with lineNumbersInTable=true for proper line number rendering
- Create render-codeblock.html render hook to intercept fenced code blocks and wrap with header bar (language label + copy button)
- Replace chroma-custom.css entirely with Catppuccin Macchiato palette (dark theme) + Catppuccin Latte (light theme), with full token color mapping
- Create code-copy.js: copy-to-clipboard logic with language pretty-name map (bash→Shell, js→JavaScript, etc.), icon swap (copy→check for 2s), and aria-live region for screen reader announcement (WCAG 4.1.3)
- Update baseof.html to load code-copy.js on page kind with Hugo Pipes
- WCAG AA compliance: line number contrast fixed to ~3.5:1 (--ctp-overlay0), light theme copy button color to 4.1:1 (#6c6f85), focus outline 6.21:1 (--ctp-lavender), screen reader announcements via aria-live
All code blocks now render with: syntax highlighting (noClasses=true fixed), line numbers with proper table layout, language label in header, copy button with feather icons, both dark and light theme support.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
review needed
|
|
|
|
All sidebar widgets (author, share, related posts) now use:
- Unified .sidebar-widget container (no box, only top border via <hr>)
- .sidebar-widget-label with # prefix (bash comment style)
- Monospace, dimmed, small text for consistency
Previously, share widget used a different style (full box with borders).
Author and Related Posts widgets now match the hacker aesthetic.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
Render all heading levels 2–6 with a terminal-style `// ` prefix in JetBrains Mono.
H1 (page/article titles) is excluded. The prefix is aria-hidden for A11y compliance
(WCAG 2.1 AA — heading text contrast 14.72:1, prefix is decorative and exempt from
contrast requirements).
Implementation:
- New Hugo render-heading hook at _default/_markup/render-heading.html
- Added .heading-prefix CSS rule with accent purple color, 0.8em font size, 0.7 opacity
- CSS rebuil with npm run build
Applies site-wide to all markdown prose content (articles, singles, pages).
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
|
|
|
|
5+4 layout
|
|
|
|
Replace generic card + h3 + round buttons with a minimal separator line,
mono comment label, and square btn-share buttons that match the site's
hacker identity. Icons scaled to 22px inside 50x50px touch targets.
Hover/focus states use the site's accent glow pattern.
|
|
|
|
|
|
|
|
Removed JavaScript language detection and Alpine component. Use simple
static links that work with both languages. Hugo's redirect rules and
i18n system handle language context automatically. No JavaScript hacks.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
This reverts commit 94a11324999f07feff138364633e8442947b628a.
|
|
Created separate 404.html layouts in themes/danix-xyz-hacker/layouts/it/ and
themes/danix-xyz-hacker/layouts/en/ with hardcoded language-specific links.
Hugo automatically routes language requests to the correct layout, enabling
proper i18n context and translations. Removed generic 404.html and all
JavaScript detection hacks.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
Rely on hugo.toml redirect rules to serve correct 404.html and detect language
from window.location.pathname in notFoundNav() Alpine component. Navigation
links now properly route to Italian (/it/*) or English (/*) sections based on
request URL.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
This reverts commit 1cab4424a5c6dd2aeb453d299b6a2f12a840599d.
|
|
Created language-specific 404 pages (content/en/404.md and content/it/404.md)
instead of using JavaScript detection. Hugo now properly routes 404 errors to
the correct language context, allowing .Lang and i18n to work correctly.
Removed JS language detection hack.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
Added window.currentLang detection based on request URL path to correctly
route 404 page navigation links for Italian and English versions. Created
notFoundNav() Alpine component to dynamically compute language-aware links
based on detected language.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
|
|
directly
|
|
registration
|
|
- 404.html: Move x-data directive to wrap entire content including modal, fixing Easter egg button click functionality. Add border, glow, and bg styling to main container.
- repository/list.html: Add border, glow, rounded, and bg styling to article container for consistency with other pages.
- Both pages now have consistent visual styling with borders, glows, and proper background colors.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
motion
|
|
Implements focus trap function that cycles Tab/Shift+Tab within modal boundaries,
adds ARIA attributes (role, aria-modal, aria-labelledby) for accessibility
compliance, and integrates focus initialization on modal display.
- Focus trap prevents tab escape from modal dialog
- ARIA attributes: role=dialog, aria-modal=true, aria-labelledby linking title
- Backdrop marked aria-hidden=true to exclude from accessibility tree
- Close buttons have aria-label for screen readers
- Focus initialization calls createFocusTrap on modal show
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
motion-reduced)
Adds a CSS media query that respects user motion preferences by:
- Disabling all animations and transitions when prefers-reduced-motion: reduce
- Using !important to override all animation/transition declarations
- Ensuring focus-visible outline remains visible for keyboard navigation
This improves accessibility for users with motion sensitivity.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
