wann/startpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
startpage/worklog.md
Ivan Janjic c65b2b082a first commit
2026-02-28 06:59:23 +01:00

2.6 KiB
Raw Permalink Blame History

Project Worklog

Task ID: 1 - terminal-start-page

Work Task

Build a Terminal-Inspired Browser Start Page with Next.js 15, featuring search with bangs support, 4-column bookmark layout, configurable bookmarks with localStorage persistence, and terminal aesthetics (CRT effects, scanlines, blinking cursor).

Work Summary

Successfully implemented a complete terminal-inspired browser start page with all requested features:

Files Modified/Created:

  1. src/app/layout.tsx - Updated with JetBrains Mono font and terminal-appropriate metadata
  2. src/app/globals.css - Complete terminal theme with CRT effects, scanlines, blinking cursor, custom CSS variables
  3. src/app/page.tsx - Main application with all features

Features Implemented:

  1. Terminal Aesthetic:

    • Dark theme with classic terminal colors (green on black)
    • JetBrains Mono monospace font
    • CRT screen overlay effect with vignette
    • Subtle scanline effect
    • Blinking cursor animation
    • Text glow effects for green, amber, and cyan colors
    • Custom scrollbar styling

  2. Search Field with Bangs:

    • Terminal-style command line search input
    • Support for 8 search engines via bang prefixes:
      • !g / !google → Google
      • !ddg / !duckduckgo → DuckDuckGo
      • !yt / !youtube → YouTube
      • !gh / !github → GitHub
      • !so / !stackoverflow → StackOverflow
      • !w / !wiki → Wikipedia
      • !r / !reddit → Reddit
      • !b / !bing → Bing
    • Tab to cycle through matching bangs
    • Autocomplete dropdown showing available bangs
    • Default to Google if no bang specified

  3. 4-Column Bookmark Layout:

    • Responsive grid: 4 columns on desktop, 2 on tablet, 1 on mobile
    • Default categories: Work, Dev, Social, Media
    • Terminal-style list items with hover effects

  4. Configurable Bookmarks:

    • Full CRUD operations for columns and bookmarks
    • localStorage persistence
    • Settings panel styled as terminal editor
    • Reset to default option

  5. Keyboard Shortcuts:

    • / or Ctrl+K to focus search
    • Esc to close config mode
    • c to open config mode (when not in input field)

  6. Additional Features:

    • ASCII art logo (hidden on mobile)
    • Real-time clock display
    • Welcome message (MOTD style)
    • Keyboard shortcut hints
    • Fixed settings button in bottom-right corner

Technical Implementation:

  • Used React hooks for state management
  • localStorage for bookmark persistence
  • Portal-based modal for config panel
  • Key-based component remounting for state reset
  • Proper React 19 patterns following strict ESLint rules