Files

Kunthawat Greethong 54c7a4407e 📚 Add AGENTS.md - Project knowledge base

Comprehensive documentation for AI agents:
✅ Project structure and conventions
✅ Deployment instructions (Dockerfile + Easypanel)
✅ Page structure and routing
✅ Data structure (site-config.ts)
✅ Styling guidelines (Tailwind + custom classes)
✅ Image handling and SEO
✅ Anti-patterns and best practices
✅ Commands and environment setup

Based on commit 668f690 (ideal Next.js setup)

2026-03-10 10:47:35 +07:00

6.1 KiB

Raw Blame History

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:

Push to Git main branch
Easypanel auto-detects and rebuilds
Wait 2-3 minutes for build
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

6.1 KiB Raw Blame History