Do SikiandClaude Sonnet 5
74e40329a0
CI Pipeline with Test Management / 🧪 Run Tests & Generate Reports (push) Canceled after 0s
Test Reporting & Gherkin Analysis / 🧪 Run Tests & Generate Reports (push) Canceled after 0s
CI Pipeline with Test Management / 🐳 Docker Integration Tests (push) Canceled after 0s
CI Pipeline with Test Management / 🏗️ Build Docker Image (push) Canceled after 0s
CI Pipeline with Test Management / 📊 Generate Test Summary (push) Canceled after 0s
Test Reporting & Gherkin Analysis / 📊 Analyze Test Coverage (push) Canceled after 0s
Test Reporting & Gherkin Analysis / 🔄 Sync with Linear (push) Canceled after 0s
Test Reporting & Gherkin Analysis / ⚡ Performance Monitoring (push) Canceled after 0s
Adds a search box to the top of every Payload admin page (admin.components.header) that searches by text across every field of every Global and Collection, in both locales — something Payload has no built-in equivalent for: collection list views only search their own title/slug fields, and Globals have no list view at all. Implementation is deliberately client-side and index-free rather than @payloadcms/plugin-search (a server-side search collection kept in sync via hooks): this project's entire content is 5 Globals + 2 small Collections, so a plugin-managed search index would be disproportionate maintenance for the actual data volume — the same reasoning already applied to the logo editor (MITHOME-118). On first use, the component fetches every Global/Collection doc in both locales via the existing REST API (same-origin, admin session cookie), recursively flattens every field to (path, value) pairs client-side, and filters by case-insensitive substring as the user types. Each result links straight to the right edit view (global or collection/id). New: src/components/admin/QuickSearch.tsx. Registered via payload.config.ts admin.components.header, which required a generate:importmap run — the useful gotcha this surfaced: Payload resolves component paths against admin.importMap.baseDir, which defaults to process.cwd() (the proto/ the CLI is run from), not dirname(payload.config.ts) — so the path needed to be './src/components/admin/QuickSearch#QuickSearch', not './components/admin/QuickSearch#QuickSearch'. Documented inline. Verified live in the browser (not just tsc/lint): search finds matches in both a Global (Home hero.cta.secondary.text / services description) and a Collection (Partners name/url), shows source + field path + locale + a snippet per result, clicking a result navigates to the correct edit view, and the search state persists across client-side admin navigation since the header component doesn't remount. Zero console errors in a fresh tab. Full gate green: tsc, lint, unit tests (51 passed), production build. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
mozdIT Bt. Website - Next.js Application
Modern Next.js 15 website for mozdIT Bt. - Hungarian IT services company.
🚀 Quick Start
# Install dependencies
npm install
# Development server (with Turbopack)
npm run dev
# Production build
npm run build
# Run tests
npm test
Open http://localhost:3000 to view the site.
📁 Project Structure
src/
├── app/ # Next.js App Router
│ ├── page.tsx # Homepage
│ ├── rolunk/ # About page
│ ├── szolgaltatasok/ # Services page
│ ├── kapcsolat/ # Contact page
│ ├── api/ # API routes
│ └── globals.css # Design system & styles
├── components/ # React components
│ ├── Header.tsx # Navigation header
│ ├── Footer.tsx # Site footer
│ └── ThemeProvider.tsx # Dark mode provider
├── content/ # JSON content management
│ ├── types.ts # Content type definitions
│ ├── index.ts # Content loader
│ ├── common.json # Shared texts
│ └── pages/ # Page-specific content
├── config/ # Site configuration
├── lib/ # Utilities
└── types/ # TypeScript definitions
🎨 Design System
The project uses a comprehensive design system defined in globals.css:
CSS Variables
- Brand colors (
--color-primary-*) - Semantic colors (
--color-background,--color-foreground) - Shadows, transitions, border radius
Dark Mode
- Automatic system preference detection
- Manual toggle via ThemeProvider
- Uses
data-theme="dark"attribute
Animations
animate-fade-in-up- Fade in with upward motionanimate-float- Floating effectanimate-pulse-slow- Slow pulsinghover-lift,hover-scale,hover-glow- Hover effects
Utility Classes
.card- Card component styling.btn,.btn-primary,.btn-secondary- Button styles.icon-container- Icon wrapper styling
📝 Content Management
All page content is managed through JSON files in src/content/:
import { content, getPageContent } from '@/content'
// Access specific page content
const aboutContent = content.pages.about
// Or use the helper function
const servicesContent = getPageContent('services')
Content Files
| File | Description |
|---|---|
common.json |
Shared texts (buttons, labels, validation) |
pages/home.json |
Homepage CTA section |
pages/about.json |
About page (hero, story, mission, team, CTA) |
pages/services.json |
Services (hero, details, support, CTA) |
pages/contact.json |
Contact (form labels, FAQ, info) |
🧪 Testing
# Unit tests
npm test
# Watch mode
npm run test:watch
# Coverage report
npm run test:coverage
# All test suites
npm run test:all
🐳 Docker Development
For full-stack development with MongoDB and monitoring:
# From project root
docker-compose -f docker-compose.dev.yml up -d
Services:
- Website: http://localhost:3000
- MongoDB UI: http://localhost:8081
- Grafana: http://localhost:3001