Files

Kunthawat Greethong ede8e32591 feat: Fix product tables and responsive fonts

- 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

2026-03-02 12:22:13 +07:00

3.3 KiB

Raw Blame History

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

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

3.3 KiB Raw Blame History