dealplustech/AGENTS.md

DEAL PLUS TECH - PROJECT KNOWLEDGE BASE

Generated: 2026-03-10
Commit: 668f690
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/edit 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 TypeScript 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/*

DEPLOYMENT

Dockerfile (Production)

# Multi-stage build for Next.js
FROM node:20-alpine AS deps
# ... (see Dockerfile for full config)

Easypanel Configuration:

• Build Type: Dockerfile
• Dockerfile Path: ./Dockerfile
• Port: 3000

To Deploy:

1. Push to Git main branch
2. Easypanel auto-detects and rebuilds
3. Wait 2-3 minutes for build
4. Site is live

Alternative: Nixpacks

If Dockerfile build fails, Easypanel can auto-detect and use Nixpacks.

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, @ts-ignore, @ts-expect-error - strict mode enabled
• DO NOT modify CSS unless necessary - preserve existing design

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 via Easypanel
• 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

PAGES STRUCTURE

Route	File	Description
/	app/page.tsx	Homepage with hero, featured products
/about-us/	app/about-us/page.tsx	About company
/services/	app/services/page.tsx	Services offered
/products/	app/product/page.tsx	Product listing
/contact-us/	app/contact-us/page.tsx	Contact form & info
/join-us/	app/join-us/page.tsx	Careers/jobs
/sales-engineer/	app/sales-engineer/page.tsx	Sales engineer info
/portfolio/	app/portfolio/page.tsx	Project portfolio
/all-projects/	app/all-projects/page.tsx	FAQ page
/blog/	app/blog/page.tsx	Blog listing
/[slug]/	app/[slug]/page.tsx	Dynamic product pages

DATA STRUCTURE

site-config.ts

interface ProductCategory {
  id: string;
  name: string;  // Thai
  nameEn: string;  // English
  slug: string;  // Thai URL slug
  href: string;  // Full URL
  description: string;
  shortDescription: string;
  image: string;
  specifications: Array<{label: string; value: string; unit?: string}>;
  features: string[];
  applications: string[];
  faq: Array<{question: string; answer: string}>;
  schemaData: {...};
}

Key Config Sections:

• siteConfig - Company info, contact details
• mainNavigation - Header navigation items
• productCategories - All products (20+ items)
• workHours - Business hours
• socialLinks - Social media links

IMAGE HANDLING

Location: public/images/

Optimization:

• Next.js Image component auto-converts to AVIF/WebP
• Remote patterns configured for external images
• Sharp required for production builds

Best Practices:

• Use next/image component
• Always provide alt text in Thai
• Specify width and height to prevent layout shift

SEO

Metadata:

• Thai language meta tags
• Open Graph tags for social sharing
• Twitter Card support
• Structured data (JSON-LD) for LocalBusiness

Thai URLs:

• All URLs in Thai language
• URL-encoded where necessary
• Trailing slashes preserved

BACKUP

Old Next.js project backed up at: /Users/kunthawatgreethong/Gitea/dealplustech-backup-nextjs-{DATE}.tar.gz

---

Last Updated: 2026-03-10
Status: Production Ready