- Add product detail page ([slug].astro) with table rendering - Display productTables from site-config.ts on product pages - Add responsive font scaling for large screens (1280px+) - Base font scales from 16px to 24px on 4K displays - All text elements use responsive sizing (md/lg/xl breakpoints) - Tables styled with green headers and alternating rows - Add comprehensive documentation (FIXES_SUMMARY.md) Fixes: - Product specification tables now visible on product pages - Font too small on large screens - now responsive
95 lines
3.3 KiB
Markdown
95 lines
3.3 KiB
Markdown
# DEAL PLUS TECH - PROJECT KNOWLEDGE BASE
|
|
|
|
**Generated:** 2026-03-01
|
|
**Commit:** 13436b4
|
|
**Branch:** main
|
|
|
|
## OVERVIEW
|
|
|
|
Thai corporate website for pipe/HVAC materials supplier. Next.js 14 App Router + TypeScript + Tailwind CSS. Thai language content with Thai URL support.
|
|
|
|
## STRUCTURE
|
|
|
|
```
|
|
src/
|
|
├── app/ # Next.js App Router pages
|
|
├── components/ # UI, layout, analytics components
|
|
├── content/ # Blog markdown files
|
|
├── data/ # Product catalog & site config (HUGE)
|
|
├── lib/ # Utility functions
|
|
├── styles/ # Global CSS + Tailwind
|
|
└── types/ # TypeScript interfaces
|
|
```
|
|
|
|
## WHERE TO LOOK
|
|
|
|
| Task | Location | Notes |
|
|
|------|----------|-------|
|
|
| Add/edit pages | `src/app/*/page.tsx` | App Router conventions |
|
|
| Add products | `src/data/site-config.ts` | ProductCategory array |
|
|
| Add product tables | `src/data/product-tables.ts` | Table data for specs |
|
|
| UI components | `src/components/ui/` | Button, Card, Badge |
|
|
| Layout | `src/components/layout/` | Header, Footer, FloatingContact |
|
|
| Types | `src/types/index.ts` | All interfaces |
|
|
| Styling | `src/styles/globals.css` | Custom component classes |
|
|
| SEO/Metadata | `src/app/layout.tsx` | Root metadata + schema |
|
|
|
|
## CONVENTIONS
|
|
|
|
**Thai-first content**: All UI text, URLs, metadata in Thai. English `nameEn` fields for product IDs.
|
|
|
|
**URL format**: Thai URLs with trailing slash (e.g., `/ท่อพีพีอาร์ตราช้าง/`)
|
|
|
|
**Product data structure**: Each product in `productCategories` has:
|
|
- Thai `name`, `description`, `seoContent`
|
|
- English `nameEn`, `id`, `slug`
|
|
- `specifications[]`, `features[]`, `applications[]`, `faq[]`
|
|
- `schemaData` for structured data
|
|
- Optional `productTables[]` for spec tables
|
|
|
|
**Styling**: Tailwind + custom classes in globals.css:
|
|
- `.btn-primary`, `.btn-secondary`, `.btn-outline`
|
|
- `.card`, `.card-industrial`
|
|
- `.section-title`, `.section-subtitle`
|
|
|
|
**Font**: Kanit (Thai Google Font) via `next/font/google`
|
|
|
|
**Path alias**: `@/*` maps to `./src/*`
|
|
|
|
## ANTI-PATTERNS (THIS PROJECT)
|
|
|
|
- **DO NOT** use `output: 'standalone'` in dev mode (breaks HMR)
|
|
- **DO NOT** hardcode contact info - use `siteConfig` from `@/data/site-config`
|
|
- **DO NOT** add tests - project has no test infrastructure
|
|
- **DO NOT** use `as any` or `@ts-ignore` - strict mode enabled
|
|
|
|
## UNIQUE STYLES
|
|
|
|
**Design System**: Industrial/construction theme with:
|
|
- Primary green (#22c55e) - trust, growth
|
|
- Secondary slate grays - professional, industrial
|
|
- Accent yellow - highlights
|
|
- Industrial-specific shadows and gradients
|
|
|
|
**Product pages**: SEO-heavy with structured data (LocalBusiness schema, Product schema)
|
|
|
|
**Blog**: Headless WordPress integration via `NEXT_PUBLIC_WORDPRESS_API_URL`
|
|
|
|
**Image optimization**: AVIF/WebP auto-converted, Thai domain patterns in `next.config.mjs`
|
|
|
|
## COMMANDS
|
|
|
|
```bash
|
|
npm run dev # Development server (localhost:3000)
|
|
npm run build # Production build
|
|
npm run start # Production server
|
|
npm run lint # ESLint check
|
|
```
|
|
|
|
## NOTES
|
|
|
|
- No CI/CD configured - manual deployments
|
|
- Environment variables in `.env.local` (copy from `.env.example`)
|
|
- Large data files in `src/data/` - edit with care
|
|
- Thai URLs require URL-encoded characters in some contexts
|
|
- `public/llm.txt` contains AI-readable content for the site |