මෙම ඉඟිය React 19 සහ Next.js 15 භාවිතා කිරීම සඳහා ස්වයංක්රීයව වෙබ් පිටපත් නිර්මාණය කිරීම සඳහා සම්පූර්ණ මාර්ගෝපදේශයේ පළමු කොටසක් වේ.අපගේ අවධානය වේගයට පමණක් නොවේ, නමුත් ආකෘති ඉලෙක්ට්රොනික ඉලෙක්ට්රොනිකතාව සහ අනුකූල, වෙළඳ නාමය නිර්මාණය. විවෘත මූලාශ්රය : (https://github.com/aifa-agi/aifa) මෙන්න Roadmap එක: Part 1 (You are here): Core architecture deep dive — catch-all routes, PageHtmlTransformer අංගය, සහ ශක්තිමත් ලෙස typed page configs. කොටසක් 2: උසස් පිටුව වර්ග - ස්වයංක්රීය ලේඛන පිටුව සහ අමුද්රව්ය උපාංග. 3 කොටස: AI යන්ත්රය සම්මත කිරීම-අපගේ අභ්යන්තර ආකෘති (ChatGPT, Claude) සහ අපගේ අභ්යන්තර Aifa නියෝජිතය සම්බන්ධ කිරීම, දිගුකාලීන, ස්වාධීන අන්තර්ගත නිෂ්පාදනය සඳහා. ප්රසාද: ප්රශ්න අධ්යයනය - පරිශීලක ලියාපදිංචි කිරීම සහ Stripe ගෙවීම් සහිත නිෂ්පාදන මට්ටමේ AI SaaS ස්ථාපනය කිරීම, මුදල් උපයා ගැනීම සහ පුළුල් කිරීම. මෙම පියවරෙන් පියවරකට ව්යාපෘතිය ඔබගේම ව්යාපාරික සූදානම් v0 ක්ලෝන් ගොඩනැගීම හරහා ගමන් කරයි, ඔප්පු කිරීම සහ ගෙවීම් ක්රියාකාරකම් සමඟ සම්පූර්ණ වේ. අදහස සිට ආරම්භය දක්වා සැබෑ AI නිෂ්පාදනයක් - සම්පූර්ණ මූලාශ්ර කේතය ලබා ගත හැකිය. නුඹ Technology Stack: React 19 · Next.js 15 · Vercel · Prisma · Stripe · AI SDK · ChatGPT අපගේ වේදිකාව ව්යාපාරික මට්ටමේ ස්ථාවරතාවය සහ Bloedingedge නවීනතාවය මිශ්ර කරයි: React 19 & Next.js 15 with App Router සපයන්නේ sub-100ms renderers සහ සැබෑ සමන්විත මාර්ගයයි. Vercel zero-downtime ස්ථාපනය කිරීම සහ ගෝලීය අර්බුද පුළුල් කිරීම සඳහා බලශක්ති. Prisma & Neon සහතික කරන්නේ type-safe, lightning-fast දත්ත ප්රවේශය. Stripe වහාම, PCI අනුකූල ගෙවීම් පෙට්ටියෙන් ඉවත් කරයි. AI SDK + ChatGPT මට්ටමේ Generative Intelligence, එබැවින් AIFA Dev Starter විනාඩි කිහිපයකින් සම්පූර්ණ UI, අන්තර්ගත මොඩියුලය සහ ප් රොටොටොටෝප් එකතු කළ හැක - ඇතුළත් ඔප්පු කිරීම සහ Multilingual AI චැට් සමඟ සම්පූර්ණ. කොහොමද වැඩ කරන්නේ තනි ස්වභාවික භාෂා ඉල්ලීමක් ChatGPT වෙත යවන්න. Generate: JSON මත පදනම් වන PageConfig ලබා ගැනීම, ඔබගේ පිටුවේ කොටස්, මෙටා දත්ත සහ මාලාවක් සකසයි. Build: Config ගොනුව ඔබේ Next.js යෙදුම වෙත තබන්න සහ npm run build ක්රියාත්මක කරන්න. Instantly you have a fully styled, SEO-ready page, complete with auth and AI-powered chat. ව්යාපාරික ඇතුළත් කිරීම අවශ්යද? අපගේ “v0 ව්යාපාරික තත්වයට” විවෘත කරන්න [තව අනාගතය aifa.dev(https://aifa.dev) උසස් ස්වයංක්රීයත්වය, රංගන මත පදනම්ව ප්රවේශය සහ පුළුල් කළ හැකි microservices ආකෘතිය සඳහා. ව්යාපාරික ඇතුළත් කිරීම අවශ්යද? අපගේ “v0 ව්යාපාරික තත්වයට” විවෘත කරන්න [තව අනාගතය aifa.dev(https://aifa.dev) උසස් ස්වයංක්රීයත්වය, රංගන මත පදනම්ව ප්රවේශය සහ පුළුල් කළ හැකි microservices ආකෘතිය සඳහා. AI-Powered Site Generator සමඟ ජයග්රාහකයා කවුද? Next-Generation Design Agency: Mockup සිට මිනිත්තු කිහිපයකින් ප්රමාණ නිෂ්පාදනය ස්ථීර mockups පමණක් නොව, පුළුල් කරගත හැකි තාක්ෂණය පරිසර පද්ධති ආකෘති කරන නියෝජිතයක් සිතා බලන්න.A single advance investment in a proprietary component library unlocks the ability to generate and deploy 50+ production-grade websites per hour. මෙය විද්යාත්මක සංකල්පයක් නොවේ. එය නිර්මාණාත්මක මූල්ය ස්වයංක්රීය ක්රියාත්මක කිරීම් හමුවන නව ක්රියාකාරී උදාහරණයකි. සහ Stripe සම්මත කිරීම ඇතුළත් කර ඇති අතර, ඔබ පළමු දින සිට මෙම නව වේගය මුදල් වියදම් කළ හැකිය. Enterprise Deployments: Brand Consistency සහ Radical Scalability සාමාන්ය ව්යාපාරික භාවිතය: ජාතික අවන්හල ප්රංශය සඳහා වෘත්තීය QR menu විසඳුමක්.You build a master design system for the core user experience – like product cards or menus – just once.This becomes a white-label solution you can deploy to hundreds of franchisees or locations. සෑම ස්ථානයකටම සරල පරිගණකයක් හරහා එහි වෙළඳ නාමය සහ අන්තර්ගතය Customizes වන අතර, ප්රධාන UX, ප්රතිඵලදායීත්වය සහ නිර්මාණ සම්පූර්ණත්වය වළක්වාගෙන යෑම.This is the trifecta enterprise market demands in 2025: , සහ . radical scalability bulletproof brand consistency unmatched speed-to-market The Core Engine: අපගේ JSON-to-React Transformer ආකෘතිය මෙම සම්පූර්ණ පද්ධතිය ප්රධාන කොටස් දෙකක් විසින් ශක්තිමත් වේ: Intelligent Prompt Engineering We use highly-tuned instructions that command the AI to pull battle-tested section templates from a vector database and tailor them to your specific request. The Component Transformer Architecture Our React components are engineered to interpret these JSON configs, instantly transforming them into fully-rendered, interactive pages. ChatGPT සහ Claude වැනි අභ්යන්තර ආකෘති අන්තර්ගතය නිෂ්පාදනය කළ හැකි අතර, අපගේ ස්වයංක්රීය ට්රැස්ටරක අමුද්රව්ය පද්ධතියේ මූලික යන්ත්රය වන අතර, අපගේ කාර්ය සාධනය සහ නිර්මාණ විශ්වාසය සහතික කිරීම සඳහා නිර්මාණය කරන කොටසක් වේ. AI-Native උපාංගය: මෙම උපාංගය සජීවී දැනුම පදනම ලෙස භාවිතා කරන්න නතර ලියාපදිංචිය - ආරම්භය ඒක කියවීම නියෝග මෙම මාර්ගෝපදේශයේ සැබෑ ශක්තිය එය cover-to-cover කියවීමට නොවේ.එය ඔබේ ව්යාපෘතියේ පෞද්ගලික, විශේෂඥ දැනුම පදනම බවට නිර්මාණය කර ඇත. එය වැඩ කරන්නේ කෙසේද: මෙම සම්පූර්ණ ලිපිනය ChatGPT වෙත එවන්න. නිශ්චිත, කොන්දේසිගත ප්රශ්න අහන්න: "මගේ Custom section ක්රියාත්මක කරන්නේ කෙසේද?", "FullScreenWrapper හි අරමුණ කුමක්ද?", "DoublePresentation අංගය සඳහා කේතය මට පෙන්වන්න." නිවැරදි, නිෂ්පාදන සූදානම් පිළිතුරු සම්පූර්ණ කේත ප්රතිපත්තිය සමඟ ලබා ගන්න. මෙය ලේඛන පමණක් නොවේ; එය ක්රියාකාරී ක්රීඩා පොතකි.මේ ප්රවේශය පරීක්ෂා කරන්න, ඔබ 2025 දී සියලුම තාක්ෂණික ලේඛන AI-native විය යුතු ඇයි තේරුම් ගනු ඇත. Introduction: Our Philosophy—Consistency Trumps Raw වේගය මෙම මාර්ගෝපදේශය හැකි වේගවත්ම AI පිටුව ජෙනරාටර් නිර්මාණය කිරීම ගැන නොවේ. v0 වැනි AI මෙවලම් ප්රමුඛතාවය ලබා දෙන අතර, අපගේ ක්රමය වඩාත් ප්රධාන ව්යාපාරික මාතෘකාව මත අවධානය යොමු කරයි: අපගේ ප්රධාන ඉලක්කය වන්නේ ඔබේ සම්පූර්ණ ඩිජිටල් පීඩනය පුරා වෙඩි තැබූ නිර්මාණ අනුකූලතාවය සහ ආකෘති සංසන්දනය ලබා දීමයි. Total Cost of Ownership (TCO) එක් පිටුවක ආරම්භක පරම්පරාව ටිකක් වැඩි කාලයක් ගත විය හැකි අතර, සංවර්ධනය, සංරක්ෂණය සහ වෙළඳ නාමය කළමනාකරණයේ පහළ ආදායම් ප්රමාණවත් වේ. Bulletproof Brand Consistency: සෑම AI-generated පිටුවක්ම ස්වයංක්රීයව ඔබගේ නිර්මාණ පද්ධතියට අනුකූල වේ. සැහැල්ලු පරිශීලක අත්දැකීම්: ආකෘතිය වේගයෙන් නිර්මාණය කරන වෙබ් අඩවි වල සාමාන්ය අසාමාන්යතාවයන් ඉවත් කිරීම සඳහා පරිශීලකයා සඳහා සංකීර්ණ හා සමීප ගමනක් සහතික කරයි. ප්රමාණයෙන් අඩු ප්රතිසංස්කරණය: නිෂ්පාදනයේදී ප්රමිතීන් සකස් කිරීමෙන්, අපි සාමාන් යයෙන් පසු පරම්පරාව සඳහා අවශ්ය වියදම් හා කාලය ගත කිරීම සඳහා අත්හදා බැලීම් සීමා කරමු. True Architectural Scalability: අපගේ ප්රවේශය ඔබ සංශෝධනය කරන විට වඩාත් ඵලදායී වනු ඇත.The more pages you create, the greater the returns in speed and consistency. The result isn't just a collection of pages; it's a cohesive, professional-grade digital asset that scales gracefully with minimal maintenance overhead. Basics වලට වඩා: සැබෑ ලෝකයේ සංකීර්ණතාව ප් රතිකාර කිරීම මෙම ආරම්භක උපාංගය අපගේ මූලද්රව්ය සමඟ සම්මත පිටු ගොඩනඟා ගැනීමේදී අවධානය යොමු කරයි , සහ කෙසේ වෙතත්, විවෘත මූලාශ්ර කේත පදනම වඩාත් සංකීර්ණ අවශ්යතා සඳහා උසස්, පෙට්ටිය පිටත විසඳුම් සපයයි: Header Body Footer Advanced, Nested Navigation සමඟ ලේඛන පිටුවකි. ස්ථාවර, පියවරෙන් පියවරක් අමුද්රව්ය සමඟ අමුද්රව්ය පිටු. අපගේ ආකෘතිය පුළුල් කිරීම සඳහා නිර්මාණය කර ඇත.නිර්මානුකූලව අමුද්රව්යීය විශේෂාංග සඳහා – සජීවී ප්රදර්ශන, සැබෑ කාලීන දත්ත ආකෘති, හෝ සංකීර්ණ තත්ව කළමනාකරණය සහිත අමුද්රව්ය – ඔබට ඉස්මතු කළ හැකිය. මෙය ඔබට පද්ධතියේ මූලික සම්පූර්ණත්වය කවදාවත් අවදානමකින් තොරව පෞද්ගලික ක්රියාකාරීත්වය ස්ථාපනය කිරීමට ප්ලස්ටික්තාවක් ලබා දෙයි. Custom Components Your Next Step: Hands-On with Custom Components මෙම පද්ධතිය සැබවින්ම පවත්වාගෙන යාම සඳහා, ඔබගේ ප්රායෝගික කාර්යය වන්නේ නව Custom Component නිර්මාණය හා ඇතුළත් කිරීමේ ක්රියාවලිය පරීක්ෂා කිරීමයි.This will solidify your understanding of the architecture's power and flexibility. 1.The Concept: ඔබගේ වෙළඳ නාමය steward ලෙස AI, පමණක් නොව අන්තර්ගත යන්ත්රය නවීන ඩිජිටල් ක්රියාකාරකම් වේගය, වෙළඳ නාමය සම්පූර්ණතාවය සහ වෙළෙඳපොළ සංවේදීතාවය අවශ්ය වේ.අපගේ ආකෘතිය ඔබේ සැලසුම් පද්ධතිය ආකෘතිගත, බුද්ධිමත් දැනුම පදනමක් ලෙස ප්රතිකාර කිරීමෙන් මෙය සාර්ථක වේ. ඔබගේ නිශ්චිත UI / UX ප්රමිතීන් සඳහා AI සපයමින්, එය අන්තර්ගත නිෂ්පාදකයට වඩා වැඩි වන අතර, එය ඔබගේ වෙළඳ නාමය හඳුනාගැනීමේ අවසාන ස්ථාවරයක් බවට පත් වන අතර, පිටුව නිර්මාණය ජීවිත චක්රයේ සෑම පියවරකදීම අනුකූලතාවය තහවුරු කරයි. 5.The 5 Step Workflow: From Design System to SEO-Optimized Build (සංස්කරණ පද්ධතිය සිට SEO-Optimized Build දක්වා) ඔබේ නිර්මාණ පද්ධතිය ලබා ගැනීම: අපි ඔබේ අමුද්රව්ය ආකෘති ආකෘති සහ ඒවා දර්ශනීය හා ව්යුහගතව ක්රියාත්මක කරන ආකාරය පිළිබඳ පැහැදිලි උපදෙස් සමඟ AI දැනුම පදනම උල්ලංඝනය, 100% වෙළඳ නාමය අනුකූලතාවය සහතික කරයි. ඉලක්කය සකස් කිරීම: පරිශීලකයා, ව්යාපෘති කළමනාකරු හෝ සංවර්ධකයා අවශ්ය පිටුව හෝ එහි අමුද්රව්ය විස්තර කරන සරල පෙළ සකස් කිරීමක් ඉදිරිපත් කරයි. AI පරිවර්තනය සහ ව්යුහය කිරීම: AI නියෝජිතයා ඉල්ලුම විශ්ලේෂණය කරයි, අර්ථකථන අන්තර්ගතය නිර්මාණය කරයි, සහ බුද්ධිමත් ලෙස දැනුම් පදනමෙන් සුදුසු, පෙර අනුමත කර ඇති ආකෘතිවලට එය මැප්ටර කරයි. Declarative PageConfig නිර්මාණය කිරීම: තෝරාගත් ආකෘති මත පදනම්ව, පද්ධතිය දැඩි ලෙස ටයිප් කරන ලද PageConfig - අවසාන පිටුවේ ප්රකාශනීය JSON විස්තරය. ස්වයංක්රීය ඉදිකිරීම් සහ ස්ථාපනය කිරීම: අපගේ සංස්කරණය කොටස් ඉදිකිරීම් ක්රියාවලිය තුළ පරිභෝජනය කරනු ලැබේ. නිෂ්පාදන සූදානම්, SEO-optimized පිටුව, ඔබේ සමාගමේ ප්රමිතීන් සමඟ දර්ශනීය හා තාක්ෂණිකව අනුකූල වේ. ව්යාපාරික බලපෑම: Drive Conversions සහ Slash TCO වේගවත් වෙළෙඳපොළට යන්න: එක් ප්රවේශයක් සහිතව නව ගමනාන්ත සහ නිෂ්පාදන පිටුව ආරම්භ කරන්න, අනාවැකි නොලැබෙන වේගය සඳහා පෙර අනුමත කර ඇති ආකෘති භාවිතා කරන්න. Ironclad වෙළඳ නාමය සම්පූර්ණත්වය: වෙළඳ නාමය අනුකූලත්වය සහ ගුණාත්මක පාලනය ස්වයංක්රීය වේ, සෑම නව පිටුවකටම ඔබේ නිර්මාණ පද්ධතිය සම්පූර්ණයෙන්ම ප්රදර්ශනය වේ. Reduced Manual Overhead & Scalable A/B Testing: ව්යාපාරික කණ්ඩායම් පිටුව වෙනස්කම් හා A/B පරීක්ෂණ අන්තර්ගතය ප්රමාණවත් කිරීම සඳහා සංවර්ධකයින් මැදිහත් නොකිරීම. ගෝලීය මට්ටමේ ඉදිකිරීම්: සියලුම teks සහ UI අමුද්රව්ය මධ්යස්ථානයෙන් සකස් කර ඇති අතර, දේශගුණය සහ වෙළෙඳපොළ අනුකූල කිරීම සෘජු වේ. ආකෘති මෘදුකාංග සංයෝග: නවීන CI / CD pipelines, hosting platforms, සහ වෙනත් AI-driven workflows සමඟ නිශ්චිතව ඇතුළත් කිරීමට සැලසුම් කර ඇත. 1.4.ඔබේ මාර්ගෝපදේශය මේ සංකල්පය හරහා මෙම පුළුල් ඉගැන්වීමේදී, අපි ඔබට මග පෙන්වන්නම්: ප්රධාන ආකෘතිය විනාශ කිරීම: PageHtmlTransformer, Wrapper/FullScreenWrapper පද්ධතිය සහ කොටස් කොටස් හුවමාරු කරන්නේ කෙසේද. Rendering Pipeline: section rendering, configuration typing, and the relationship between config files and React components පිටුපස ඇති සංකේතය තේරුම් ගන්න, ඔබ විසින්ම පද්ධතිය පුළුල් කළ හැකිය. ඉංජිනේරු ඉංජිනේරු පුහුණු කිරීම ඉගෙන ගන්න: මෙටා දත්ත, මාතෘකාව සහ පාද සඳහා සංයුක්ත උපදෙස් නිර්මාණය කරන්නේ කෙසේදැයි ඉගෙන ගන්න, JSX කොටසක් ලෙස ශරීර අන්තර්ගතය නිර්මාණය කිරීම සඳහා විශේෂාංග සකස් කරන්න. Pages on Demand Generation: ඔබේ දැනුම භාවිතයෙන් ඔබේ ආකෘතිය හා සැලසුම් ප්රමිතීන් සම්පූර්ණයෙන්ම අනුකූල වන පිටු නිර්මාණය කිරීමට AI භාවිතා කරන config ගොනු නිර්මාණය කරන්න. අපේ AI-Powered Architecture ගැන අපගේ ව්යාපෘතිය ක්රියාත්මක කිරීම, සංරක්ෂණය කිරීම සහ සංවර්ධන වේගය උපරිම කිරීම සඳහා සංවිධානය කරන ලදී.අපි Next.js 15 App Router කොන්දේසි භාවිතා කරති. ) සහ පෞද්ගලික ලිපිගොනු ( පිරිසිදු සහ ශක්තිමත් ව්යුහයක් නිර්මාණය කිරීම. @right _folder Project Directory ගස් app/@right/ ├── public/ │ ├── (_routing)/ │ │ └── [[...slug]]/ │ │ └── page.tsx # 1. Dynamic Catch-All Route Handler │ └── (_service)/ │ ├── (_config)/ │ │ └── public-pages-config.ts # 6. AI-Generated Page Configurations │ └── (_libs)/ │ └── utils.ts # 7. Configuration Utilities └── (_service)/ ├── (_types) │ └── page-wrapper-types.ts # 5. The TypeScript Data Contract (AI <-> UI) └── (_components)/ └── page-transformer-components/ ├── page-html-transformer.tsx # 2. The Core Page Transformer Engine ├── custom-sections/ # Directory for complex, interactive components ├── wrappers/ │ ├── full-screen-wrapper.tsx # 3. Immersive Full-Screen Wrapper │ └── wrapper.tsx # 4. Standard Content Section Wrapper ├── header-sections-components/ │ ├── header-section.tsx # 8. Standardized Header Component │ ├── page-header-elements.tsx # 9. Atomic Header Elements (H1/H2) │ └── announcement.tsx # 10. Announcement Banner Component ├── body-sections-components/ │ └── body-section.tsx # 12. Flexible Body Content Container └── footer-sections-components/ └── footer-section.tsx # 11. Standardized Footer Component Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode Key Component මාර්ගය 1. @/app/@right/public/(_routing)/[[...slug]]/page.tsx 2. @/app/@right/(_service)/(_components)/page-transformer-components/page-html-transformer.tsx 3. @/app/@right/(_service)/(_components)/page-transformer-components/wrappers/full-screen-wrapper.tsx 4. @/app/@right/(_service)/(_components)/page-transformer-components/wrappers/wrapper.tsx 5. @/app/@right/(_service)/(_types)/page-wrapper-types.ts 6. @/app/@right/public/(_service)/(_config)/public-pages-config.ts 7. @/app/@right/public/(_service)/(_libs)/utils.ts 8. @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/header-section.tsx 9. @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/page-header-elements.tsx 10. @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/announcement.tsx 11. @/app/@right/(_service)/(_components)/page-transformer-components/footer-sections-components/footer-section.tsx 12. @/app/@right/(_service)/(_components)/page-transformer-components/body-sections-components/body-section.tsx Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode The Core Component Toolkit: Production-Ready Pages Out of the Box - නිෂ්පාදන සූදානම් පිටපත් අරමුණ අපගේ සම්මත අමුද්රව්ය පුස්තකාලය ශක්තිමත් ටයිප් කරන ලද, වෙළඳ නාමය අනුකූල වන පිටු නිර්මාණය කිරීම සඳහා ඉංජිනේරුවාත්මක පදනමක් සපයයි.මෙම සංග්රහය අපගේ පද්ධතියේ අර්බුදික අමුද්රව්ය අමුද්රව්ය අමුද්රව්ය: දෛනික මාර්ගය, මධ්යම පරිවර්තකය යන්ත්රය, බහුල අන්තර්ගත ඇල්ලුම්කරුවන්, සංකීර්ණ මාතෘකාව සහ පාදක කොටස්, සහ ඒවා ක්රියාත්මක කිරීමේ ගොනු සහ දත්ත ගිවිසුම්. මූලික ආකෘති මූලධර්ම: Bulletproof UI අනුකූලත්වය: සෑම අංගයක්ම සංකීර්ණ නිර්මාණ පද්ධතිය සහ හැසිරීම් ආකෘති අනුගමනය කරයි, සෘජු සහ අනාවැකිමත් පරිශීලක අත්දැකීම් සපයයි. AI-Native by Design: ආකෘතිය ස්වයංක්රීය නිෂ්පාදනය සඳහා පරිශීලක කර ඇති අතර, අඛණ්ඩ මැදිහත්වීමක් නොමැතිව සංකීර්ණ පිටු ගොඩනඟා ගත හැකිය. SEO-Optimized from the Ground Up: Search engine optimization හා semantic HTML සඳහා හොඳම ක්රියාකාරකම් උයන අතර, එයට නොපැමිණිය. Type-Safe & Predictable: අපි පද්ධති ස්ථාවරත්වය සහතික කිරීම සඳහා AI සහ UI අතර විශ්වාසදායක දත්ත ගිවිසුම ක්රියාත්මක කිරීම සඳහා TypeScript හි දැඩි typing භාවිතා කරමු. Modular & Composable: සෑම කොටසක්ම ස්වයංක්රීය යන්ත්රය වන අතර එය උපරිම නැවත භාවිතය සහ පුළුල් කිරීම සඳහා නිර්මාණය කරන ලද විශේෂ ප්රශ්නයක් විසඳයි. එක්ව, මෙම අමුද්රව්යයන් පද්ධතියේ ප්රධාන පදනම බවට පත් වන අතර, AI විසින් නිර්මාණය කරන සෑම පිටුවක්ම දර්ශනීයව සංකීර්ණ නොව, තාක්ෂණිකව ශක්තිමත් සහ ව්යාපාරික සූදානම් බව සහතික කරයි. 2.1 The අමුද්රව්ය: Universal Catch-All Route for Dynamic URLs [[...slug]]/page.tsx 2.1.1.1 Catch-All Routes හි උපායමාර්ගික වටිනාකම: සංවේදීභාවය සහ ස්ථාපිත කිරීමේ වේගය catch-all routes යනු Next.js හි ක්රියාත්මක routing ආකෘතිය වන අතර, එක් පිටුවක කොටසක් අමුත්තන් අංක ගණනාවක් පාලනය කිරීමට ඉඩ සලසයි. කොමිසම, The Parameter යනු URL path එකේ සෑම කොටසක්ම ඇතුළත් වන මාතෘකාවක් වන අතර, එය කොතරම් ගැඹුරින් නිපදවන්නේ වුවත්. [[...slug]] slug ව්යාපාරික ප්රවේශමෙන්, මෙම ආකෘති තේරීම විශාල තරග වාසි වේ. Infinite Nesting and Content Depth: ඔබ ව්යාපෘතියේ ගොනු ව්යුහය විසින් තවදුරටත් සීමා නොකරනු ඇත. /public/category/nike/sneakers/black/12345 වැනි URL එක /public/test වැනි එකම කොටසක් විසින් පාලනය කරනු ලැබේ. අලංකාර ප්රවේශය සහ ඉස්මතු පිටුව ප්රවේශය: නව පිටුව ස්ථාපනය කිරීම මධ්යම ගොනුවකට එහි සැකසුම් එකතු කිරීම මෙන් සරල ය. පිටුව නව අමුද්රව්ය නිර්මාණය කිරීම හෝ සංකීර්ණ ගොනුව පද්ධතියට ප්රවේශ කිරීමකින් තොරව වහාම සජීවී වේ. Built-in Automation: මෙම ආකෘතිය සම්පූර්ණයෙන්ම ස්වයංක්රීය අන්තර්ගත පරිසරයක් සඳහා පදනම වේ.A auto-generated sidebar or menu can be programmed to read the page configurations and build the navigation dynamically.When you add a new page config, the navigation updates automatically, ensuring a consistent user experience with zero manual effort. AI Assistants සඳහා ඩිමැලි URL වල වටිනාකම: සීමිත අන්තර්ගත ප්රමාණය In today's competitive landscape, modern SaaS and AI platforms demand the agility to generate new pages on the fly. Whether initiated by a user, an administrator, or an autonomous AI agent, content must be architected for instant creation and deployment. Our catch-all routing architecture is the engine that drives this capability. Strategic Business Advantages: ආකෘති සීමාවන් ඉවත් කරයි: එය අන්තර්ගත ව්යුහය සහ මට්ටම් ගැඹුර පිළිබඳ සියලු සීමාවන් ඉවත් කරයි, ඔබේ ඩිජිටල් ප්රවේශය කේතය වෙනස් කිරීමක් නොමැතිව අසීමිතව ප්රමාණවත් කිරීමට ඉඩ සලසයි. Build complex content hierarchies for any use case. Navigation is driven purely by your business logic, not constrained by a rigid file system. This decouples your content strategy from engineering cycles, empowering product and marketing teams to execute faster. Unlocks Unmatched Agility: AI-Powered Automation ක්රියාත්මක කිරීම: මෙම ආකෘතිය AI-first ලෝකයක් සඳහා නිර්මාණය කර ඇති අතර එය ස්වයංක්රීයව ඔබේ වෙබ් අඩවියේ සම්පූර්ණ කොටස්, නිෂ්පාදන ලියාපදිංචිය සිට දැනුම පදනම දක්වා නිර්මාණය කිරීමට AI නියෝජිතයින් සඳහා ස්ථාවර පදනමක් සපයයි. 1.1.1.3 සැබෑ ලෝකයේ භාවිතය ප්රමාණයෙන් මෙම ආකෘතිය මාතෘකාවක් නොවේ; එය ව්යාපාරික වර්ධනය ප්රතික්ෂේප කරන උසස් වටිනාකමක් ඇති, ගැඹුරින් නූතන අන්තර්ගත ව්යුහයන් ස්ථාපනය කිරීම සඳහා සාක්ෂි සහිත ආකෘතියකි: Deploy a white-label solution for a national restaurant franchise. Each location can have a unique, deeply categorized menu (e.g., ), all while maintaining perfect brand consistency and UX integrity. Turnkey QR Menu Systems: /public/menu/dallas-tx/dinner/mains/pasta-dishes Launch extensive product lines with infinite variations instantly. A URL like becomes trivial to create and manage, enabling rapid market expansion and granular product organization. E-commerce Product Catalogs: /public/shop/apparel/mens/jackets/leather/fall-2025/black/sku-12345 ව්යාපාරික සහ අධ්යාපන පැටවුම්: අන්තර්ගතය කොපමණ ගැඹුරක් යාමට අවශ් ය වුවත් සංකේතයෙන් සංවිධානය කළ හැකි පුළුල් දැනුම පදනම හෝ පුහුණු පද්ධති ගොඩනැගීම (උදාහරණයක් ලෙස, /public/tutorials/enterprise-ai/onboarding/module-3/advanced-prompting). ##### 2.1.1.4. How It Works: The Engine of On-Demand Content මෙම ක්රියාවලිය මූලික වශයෙන් සරල නමුත් බලවත් වන අතර එය සෑම URL මාර්ගයක්ම දෛනිකව ගැලපෙන පිටු සැකසුම් බවට පරිවර්තනය කරයි, එවිට එය ප්ලයිට් මත render කරන ලදී.This is the technical foundation that unlocks the business agility described earlier. කොටස්වල මූලික කාර්යයන් වන්නේ: It captures the incoming URL path as an array of segments (e.g., ). Receive the URL: ["category", "nike", "sneakers"] The function proactively reads your file. It informs Next.js of all valid page routes defined in your configuration. For the business, this translates to comprehensive Static Site Generation (SSG), ensuring every page is pre-built for lightning-fast load times and optimal SEO. Generate Static Paths: generateStaticParams public-pages-config.ts export async function generateStaticParams() { const pages: PageConfig[] = getAllPublicPages(); return pages.map((page: PageConfig) => ({ slug: page.metadata.slug ? page.metadata.slug.slice(1) : [], })); } When a user requests a URL, the component receives the array. It then uses the utility to perform a high-speed lookup against the configuration array (prepending for an accurate match). If a match is found, the configuration is passed to our universal component for rendering. Fetch and Render: slug getPageBySlug "public" PageHtmlTransformer export default async function PublicDynamicSlugPage({ params }: Props) { const resolvedParams = await params; const slugArr = resolvedParams.slug ?? []; const pageConfig = getPageBySlug(["public", ...slugArr]); if (!pageConfig) { return Page not found; } return ; } මොකද ඒ can be of any length and the lookup is a direct match, this system provides infinite nesting depth with zero risk of route collisions. slugArr 2.1.5. ප් රධාන කාර්යයන් සහ ඔවුන්ගේ ව්යාපාරික බලපෑම generateStaticParams: Next.js පවසමින් Performance & SEO ධාවනය කරයි 2.1.1.7. The Component: The Execution Engine මෙම අංගය අපගේ AI-powered ආකෘතිය ජීවිතයට ගෙන එන්නේ යන්ත්රය වේ.එය එක්, ශක්තිමත් Next.js සේවාදායක අංගයක් වන අතර එය සෑම දෛනිකව නිර්මාණය කරන ලද පොදු පිටුවකටම විශ්ව ක්රියාකාරිය ලෙස ක්රියා කරයි.එය URL මත පදනම්ව නිවැරදි පිටුව සැකසුම් ලබා ගැනීම සහ අවසාන රන්ඩ් කිරීම ඔක්තෝබර් කිරීම සඳහා වගකිව යුතු අතර, උපරිම කාර්ය සාධනය සහ පිටපත් SEO අනුකූලතාව සහතික කරයි. // @/app/@right/public/(_routing)/[[...slug]]/page.tsx import { PageHtmlTransformer } from "@/app/@right/(_service)/(_components)/page-transformer-components/page-html-transformer"; import { getPageBySlug } from "@/app/@right/(_service)/(_config)/pages-config"; import { constructMetadata } from "@/lib/construct-metadata"; import type { PageConfig } from "@/app/@right/(_service)/(_types)/page-wrapper-types"; import { getAllPublicPages } from "../../(_servise)/(_libs)/get-all-public-pages"; interface Props { params: Promise<{ slug?: string[] }>; } export async function generateStaticParams() { const pages: PageConfig[] = getAllPublicPages(); return pages.map((page: PageConfig) => ({ slug: page.metadata.slug || [], })); } export async function generateMetadata({ params }: Props) { const resolvedParams = await params; const slugArr = resolvedParams.slug ?? []; const pageConfig = getPageBySlug(["public", ...slugArr]); if (!pageConfig) return {}; return constructMetadata(pageConfig.metadata); } export default async function PublicDynamicSlugPage({ params }: Props) { const resolvedParams = await params; const slugArr = resolvedParams.slug ?? []; const publicPageConfig = getPageBySlug(["public", ...slugArr]); if (!publicPageConfig) { return <div>Page not found</div>; } return <PageHtmlTransformer data={publicPageConfig} />; } Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode 2.1.1.7. ප්රතිපත්තිය: ඔබේ AI අන්තර්ගත යන්ත්රය ලෙස සියලුම මාර්ගය අල්ලන්න Combining catch-all routes with a centralized page configuration creates an architecture that is maximally flexible, extensible, and purpose-built for AI-driven content orchestration. This approach is friendly to both developers and AI agents, creating a seamless workflow from concept to deployment. The core principle is simple but transformative: No new code files, no complex folder structures. The navigation and rendering systems adapt automatically, making this the cornerstone of a truly agile and scalable AI-powered platform. A new page is just a new entry in a configuration file. FullScreenWrapper vs. Wrapper: සම්පූර්ණ ස්කෑන් අත්දැකීම් ක්රියාත්මක කිරීම 1.3.1 මූලික අරමුණ The පරිච්ඡේදයන් සඳහා විශේෂයෙන් නිර්මාණය කර ඇති අතර, පසුපසින් වීඩියෝ හෝ ඡායාරූප සහාය සහිත සම්පූර්ණ ස්කෑන් ප්රදර්ශනය අවශ්ය වේ.එය "වෝරෝ" කොටස් සඳහා ප්රමුඛ ප්රභේදයක් ලෙස සේවය කරයි, එහි අන්තර්ගතය ධනවත් මාධ්ය අමුද්රව්ය මත අලංකාරව පිරී ඇත. FullScreenWrapper 2.1.3.2. Layered Architecture The component uses a sophisticated layered structure to ensure content remains legible and visually distinct from the background. Technical Highlights: : Guarantees the section fills the entire viewport height, creating a captivating, full-bleed effect. min-h-screen Positioning: Enables precise control for stacking elements. relative z-index / ): Positioned with and to sit behind all other content. Background Elements ( video img absolute z-0 : Uses positioning with to ensure it always appears above the background. Content Container relative z-10 <section className="relative flex min-h-screen flex-col py-10 lg:py-14 bg-background"> {backgroundElement} // z-0 <div className="relative z-10 flex flex-col flex-1"> {children} // Header → Body → Footer </div> </section> Enter fullscreen mode Exit fullscreen mode 2.1.3.3 Customization සහ පුළුල් කිරීම The is designed for easy customization. You can add complex visual effects directly via the prop. FullScreenWrapper className <FullScreenWrapper className="bg-gradient-to-br from-blue-900 to-purple-900"> Enter fullscreen mode Exit fullscreen mode Opacity Control: Background videos automatically receive an opacity-40 class to improve text readability, but this can be easily overridden. : A class is built-in to ensure smooth changes to background properties. Smooth Transitions transition-all duration-500 2.1.3.4. Advanced Styling සහ නැවත භාවිත කළ හැකි උපාංග ඔබ කොටස් බෙදාහැරීම්, සීමාවන්, ආලෝකය බලපෑම්, හෝ පසුබිම අවුල් අවශ්ය විට, provides the ideal foundation for implementing these styles. This makes it perfect for creating highly stylized, reusable templates. FullScreenWrapper typescript <FullScreenWrapper className="border-t-4 border-gradient bg-blur-effect"> Enter fullscreen mode Exit fullscreen mode 1.3.5 කොටස් // @/app/@right/(_service)/(_components)/page-transformer-components/wrappers/full-screen-wrapper.tsx import React, { HTMLAttributes } from "react"; import { cn } from "@/lib/utils"; interface FullScreenWrapperProps extends HTMLAttributes<HTMLDivElement> { videoUrl?: string; imageUrl?: string; className?: string; children: React.ReactNode; } export function FullScreenWrapper({ videoUrl, imageUrl, className, children, ...props }: FullScreenWrapperProps) { let backgroundElement: React.ReactNode = null; if (videoUrl) { backgroundElement = ( <video className="absolute inset-0 size-full object-cover z-0 opacity-40 transition-all duration-500" autoPlay loop muted playsInline src={videoUrl} /> ); } else if (imageUrl) { backgroundElement = ( <img className="absolute inset-0 size-full object-cover z-0" src={imageUrl || "/placeholder.svg"} alt="Background" /> ); } return ( <section className={cn( "relative flex min-h-screen flex-col py-10 lg:py-14 bg-background", className )} {...props} > {backgroundElement} <div className="relative z-10 flex flex-col flex-1">{children}</div> </section> ); } Enter fullscreen mode Exit fullscreen mode 2.1.4. Wrapper: The Standard Sectional Container 2.1.4.1. Primary Use Case The is the default, go-to container for the majority of content sections. It's designed to provide standard padding, content centering, and a consistent, predictable layout for informational blocks. Wrapper 2.4.2 ව්යුහය සහ ස්ටයිල් typescript <section className="py-10 lg:py-14 bg-background"> <div className="container mx-auto px-4"> {children} // Header → Body → Footer </div> </section> Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode The component's structure is simple and optimized for performance, relying on a few key Tailwind CSS classes: : Applies responsive vertical padding for consistent spacing across devices. py-10 lg:py-14 : Creates a centered, max-width container with horizontal padding, ensuring content is well-aligned and readable. container mx-auto px-4 : Utilizes the current theme's CSS variable for the background color, ensuring seamless integration with light/dark modes. bg-background 2.1.4.3. Customization Points While minimalist by design, the is a flexible foundation for custom styling via the prop. It's the perfect base for adding: Wrapper className Custom background colors or gradient effects. සීමාවන් හෝ කොටස් අතර බෙදාහැරීම. Blur හෝ Glow වැනි දර්ශනීය වැඩි දියුණු කිරීම්. 2.1.4.4. Building Reusable Templates typescript // Пример для pricing-секций <Wrapper className="bg-gradient-to-br from-green-50 to-green-100 border-2 border-green-200"> <HeaderSection /> <PricingTable /> <FooterSection /> </Wrapper> Enter fullscreen mode Exit fullscreen mode ඔබගේ නිර්මාණයේ සුවිශේෂී ආකෘති ඇති නමුත් සම්මත, මධ්යස්ථාන අන්තර්ගත ව්යුහය සහිත උපාංගයක් අවශ් ය නම්, එය උපාංගයේ විශේෂ ස්වරූපයට අවධානය යොමු කිරීමට ඔබට ඉඩ සලසයි.It provides the structural backbone, allowing you to focus on the specific styles of the template. Wrapper 2.1.4.5. The Component // app/@right/(_service)/(_components)/page-transformer-components/wrappers/wrapper.tsx import React, { HTMLAttributes } from "react"; import { cn } from "@/lib/utils"; interface WrapperProps extends HTMLAttributes<HTMLDivElement> { className?: string; children: React.ReactNode; } export function Wrapper({ className, children, ...props }: WrapperProps) { return ( <section className={cn("py-10 lg:py-14 bg-background", className)} {...props} > <div className="container mx-auto px-4">{children}</div> </section> ); } Enter fullscreen mode Exit fullscreen mode 2.1.5. page-wrapper-types.ts: The AI-to-UI TypeScript Contract 2.1.5.1 ප්රධාන ගිවිසුම: AI Generation සහ UI Rendering පාලම ඒ file establishes a formal, strictly-typed contract between our AI content generator and the UI rendering system. This contract is fundamental to our architecture, defining the structure of all possible page components and the rules governing their interactions to ensure seamless integration and predictability. page-wrapper-types.ts 2.1.5.2 SectionType Category සහ AI-Driven Generation AI හි මෙහෙයුම් ආකෘතිය වටා පිහිටා ඇත පළමුව, AI මෙම enum ඇතුළත සංකේත කරන ලද ලබා ගත හැකි කොටස් වර්ග විශ්ලේෂණය කරයි. එවිට, පරිශීලකයාගේ ඉල්ලීම මත පදනම්ව, එය සංකේතයෙන් සකස් කළ යුතු කොටස් තෝරා ගනී. සම්පූර්ණයෙන්ම ස්වයංක්රීය හා උසස් තත්ත්වයේ අන්තර්ගත නිෂ්පාදනය පහසු කිරීම සඳහා, AI හි දැනුම පදනම සෑම 25+ කොටස් වර්ගයකටම සම්පූර්ණ උපදෙස් සහ විවිධ උදාහරණ සහිතව පිරිසිදු විය යුතුය. SectionType typescript export type SectionType = | "hero-section" | "cta-section" | "faq-section" | "features-section" | "testimonials-section" | "pricing-section" Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode 2.1.5.3. SEO Optimization and Metadata The මෙටා ටැග් සම්මත සම්ප්රදායික සම්ප්රදායික සම්ප්රදායික සම්ප්රදායික සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත සම්මත function. This function retrieves data from the page configuration and passes it to the ඒ වගේම හොඳින් හැඩගැසුණු HTML headers හදන්න පුළුවන්. PageMetadata generateMetadata() constructMetadata() typescript export interface PageMetadata { id: string; // Уникальный идентификатор title: string; // <title> тег для SEO description: string; // <meta description> для сниппетов image?: string; // Open Graph изображение slug?: string[]; // URL-структура страницы type: SectionType; // Тип основной секции } Enter fullscreen mode Exit fullscreen mode 2.1.5.4. HeaderContentConfig: Managing SEO Hierarchy Managing the heading hierarchy is critical for on-page SEO. ඒ section is optional. This is an intentional design choice because certain section types may embed / tags directly within their . While this provides flexibility, it introduces a potential risk to UI consistency, which is a primary objective of this architecture. Careful implementation is required to maintain a logical and SEO-friendly document structure. A note of caution: Header H1 H2 bodyContent typescript interface HeaderContentConfig { heading: string; headingLevel?: 1 | 2; // H1/H2 для поисковой иерархии description?: string; showBorder?: boolean; } Enter fullscreen mode Exit fullscreen mode 2.1.5.5. BodySection: Enabling Maximum Design Freedom typescript bodyContent?: React.ReactNode; Enter fullscreen mode Exit fullscreen mode By design, the body of a section is granted complete freedom to implement any layout or design. This architectural choice allows for maximum creative flexibility, enabling the AI to generate rich and varied content. This approach deliberately contrasts with the and , which are standardized to maintain a consistent look and feel across the entire application. Header Footer typescript interface FooterContentConfig { actions?: { label: string; href: string; variant?: "default" | "secondary" | "outline" | "ghost" | "link"; }[]; } Enter fullscreen mode Exit fullscreen mode 2.1.5.6. FooterContentConfig: A Minimalist Approach The current implementation of the footer is intentionally minimalist. It supports only optional call-to-action buttons. No additional elements are included, a decision made to prioritize simplicity, speed, and uniformity across all generated pages. 2.1.5.7. Principles for Extending Type Definitions To introduce a new , the following steps must be taken: SectionType The AI's knowledge base must be updated with comprehensive instructions and examples for the new section type. Update AI Knowledge: The new type must be added to the enum. Extend Enum: SectionType If the new section requires unique configuration parameters, the corresponding configuration interface must be extended. Expand Interfaces: මෙම ක්රියාවලිය ප්රධාන මූලද්රව්ය සංසන්දනය කරයි: The සහ are strictly typed to enforce SEO best practices and UI consistency, while the offers maximum flexibility for innovative, AI-driven design solutions. Header Footer Body 2.1.5.8. Component // app/@right/(_service)/(_types)/page-wrapper-types.ts export interface MetadataConfig { title?: string; description?: string; } export interface PageMetadata { id: string; title: string; description: string; image?: string; slug?: string[]; type: SectionType; } export type SectionType = | "hero-section" | "cta-section" | "faq-section" | "features-section" | "testimonials-section" | "pricing-section" | "contact-section" | "blog-posts-section" | "product-grid-section" | "image-gallery-section" | "text-block-section" | "video-section" | "team-section" | "about-us-section" | "newsletter-section" | "social-proof-section" | "comparison-table-section" | "map-section" | "custom-html-section" | "changelog-section" | "comparison-two-column-section" | "comparison-three-column-section" | "feature-showcase-section"; export interface BaseSection { id: string; type: SectionType; className?: string; } export interface HeaderContentConfig { announcement?: { badgeText?: string; descriptionText?: string; href?: string; }; heading: string; headingLevel?: 1 | 2; description?: string; showBorder?: boolean; } export interface FooterContentConfig { actions?: { label: string; href: string; variant?: | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"; }[]; } export interface SectionConfig extends BaseSection { type: SectionType; headerContent: HeaderContentConfig; bodyContent?: React.ReactNode; footerContent?: FooterContentConfig; videoUrl?: string; imageUrl?: string; sectionClassName?: string; contentWrapperClassName?: string; customComponentsAnyTypeData?: any; } export type Section = SectionConfig; export interface PageConfig { metadata: PageMetadata; sections: Section[]; } export type SlugType = string[]; Enter fullscreen mode Exit fullscreen mode 2.1.5.9. customComponentsAnyTypeData: Supporting Arbitrary Custom Components The ක්ෂේත් රය ඇතුළත එය අමුද්රව්ය නොවන දත්ත අපගේ සම්මත පරිගණකයට අනුකූල නොවන සංකීර්ණ හෝ සුවිශේෂී පෞද්ගලික අමුද්රව්ය අමුද්රව්ය වලින් ප්රයෝජනවත් වන කොටස් සඳහා නිර්මාණය කර ඇත. customComponentsAnyTypeData?: any; SectionConfig ආකෘති සම්පූර්ණත්වය පවත්වා ගැනීම සඳහා, මෙම දත්ත වර්ගය සහ ව්යුහය දැඩිව සකස් කළ යුතු අතර එය ලේඛනය කළ යුතුය. . This design choice provides the necessary flexibility to integrate highly interactive, dynamic, and advanced user-facing sections without compromising the core typing contract of the main page architecture. පුරුදු කොටස් ඇතුළත 2.1.6. public-pages-config.ts: The Public Page and Slug Route Registry 6.1 පද්ධති ආකෘතිය The file is an AI-generated registry of all public-facing pages within the application. This configuration is automatically generated by our AI based on system instructions and user prompts. Its structure is directly influenced by the available components in our knowledge base examples and the enumerations within the definitions. public-pages-config.ts SectionType ප්රතිඵලදායී සැකසීම පාලම ලෙස ක්රියා කරයි, පරිශීලක අවශ්යතා පිළිබඳ AI විශ්ලේෂණය අපගේ පිටුව rendering පද්ධතිය පරිවර්තනය කළ හැකි සහ ප්රදර්ශනය කළ හැකි ව්යුහයක් බවට පරිවර්තනය කරයි. 2.1.6.2. When to Use This File-Based Configuration මෙම ප්රවේශය සුදුසු වේ: සීමිත පිටු සංඛ්යාවක් සහිත ව් යාපෘති (10-15 සාමාන්යයෙන්). නිතිපතා යාවත්කාලීන කිරීම අවශ්ය වන ස්ටීක් අන්තර්ගතයන් සහිත වෙබ් අඩවි. Rapid prototyping and Minimum Viable Products (MVPs), allowing for a quick start without database setup. Landing pages with a fixed, predefined structure. When to Transition to a Database: For large-scale production applications, a file-based approach is only practical for a small set of pages. Most scenarios will benefit from storing this information in a database to enable dynamic content management and scalability. 2.1.6.3. Configuration Structure typescript export const PublicPagesConfig = { pages: [ { metadata: { id: "public", title: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit...", slug: ["public", "test"], type: "hero-section", }, sections: [ { id: "test-block", type: "hero-section", headerContent: { /* SEO-заголовки */ }, bodyContent: {}, footerContent: { /* Кнопки действий */ }, videoUrl: "/_static/video/ai-loop.mp4", contentWrapperClassName: "text-white", } as SectionConfig, ], }, ] as PageConfig[], }; Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode 2.1.6.4. Configuration Categorization Principle Placing the configuration file in the directory signifies its role in managing public-facing pages. Key Architectural Decision: public/(_service)/(_config)/ Scaling by Category: අපගේ ආකෘතිය සංයුක්ත කිරීම සහතික කර ඇති අතර, පිරිසිදු සහ සංවිධානාත්මක ව්යුහය සපයයි: public-pages-config.ts — පොදු පිටපත් සඳහා (උදාහරණයක් ලෙස, ලන්ඩන්, ගැන, සම්බන්ධතා). — for documentation sites with advanced navigation. docs-pages-config.ts — for administrative dashboards. admin-pages-config.ts blog-pages-config.ts – බ්ලොග් ලිපි සහ ලිපි සඳහා. Each category is designed to have its own: Dedicated configuration file. Specialized section types. Unique rendering logic. 2.1.6.5. Interaction with the AI Generation System For our AI system, this configuration file serves as: Defining how objects should be formed. A structural template: PageConfig දත්ත උදාහරණයක්: නිෂ්පාදන ක්රියාවලිය සඳහා ප්රවේශ වටිනාකම් සැපයීම. Type Validation Scheme (Type Validation Scheme) - ස්ථාවරව TypeScripts විසින් අනුගමනය කරන ලදී. The workflow is as follows: The AI analyzes the existing configuration file. It generates a new object based on the user's prompt. PageConfig එවිට සංවර්ධකයා පිටුවන්ට නව සැකසුම් එකතු කරයි. The system automatically recognizes and registers the new routes. 2.1.6.6. Advantages and Limitations Advantages of the File-Based Approach: Version Control: Git හරහා පහසුවෙන් කළමනාකරණය කිරීම සහ සංස්කරණය කිරීම. Benefits from compile-time type safety with TypeScript. Type Safety: No database queries result in faster page loads. Zero Latency: Works seamlessly with static site generation (SSG). Simplified Deployment: Limitations: Lacks dynamic content management capabilities. No Dynamic Updates: Any change necessitates a new build and deployment. Requires Redeployment: Unsuitable for user-generated content. Not for UGC: ප්රමාණවත්ත්වය ප්රශ්න: 20-30 පිටු වලට වඩා කළමනාකරණය කිරීම අමාරු වේ. 2.1.6.7. Component // @/app/@right/public/(_servise)/(_config)/public-pages-config.ts import { PageConfig, SectionConfig, } from "@/app/@right/(_service)/(_types)/page-wrapper-types"; export const PublicPagesConfig = { pages: [ { metadata: { id: "public", title: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit...", slug: ["public", "test"], type: "hero-section", }, sections: [ { id: "test-block", type: "hero-section", headerContent: { announcement: { badgeText: "Thanks", descriptionText: "AI-SDK V5 & Vercel AI", href: "https://github.com/aifa-agi/aifa", }, heading: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit to build, deploy, and scale intelligent AI applications. Artifacts Feature, features secure multi-provider auth, Stripe payments, vector knowledge bases, deep-research agents, and a unique fractal architecture designed for the future of AI.", showBorder: false, headingLevel: 1, }, bodyContent: {}, footerContent: { actions: [ { label: "Get Started", href: "/https://github.com/aifa-agi/aifa", variant: "default", }, { label: "Browse Docs", href: "/docs", variant: "ghost" }, ], }, videoUrl: "/_static/video/ai-loop.mp4", contentWrapperClassName: "text-white", } as SectionConfig, ], }, ] as PageConfig[], }; Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode 2.1.6.8. Conclusion is a practical solution for small to medium-sized projects, offering a balance between ease of management and functionality. For larger-scale applications, it serves as an excellent starting point before transitioning to a more robust, database-driven architecture. public-pages-config.ts 2.1.7. utils.ts: Configuration Utility Functions This module provides utility functions for managing page configurations. It includes two primary functions: , static generation සඳහා "publish" ප්රවර්ගය සහිත සියලු පිටුවලට ෆිල්ටරයක්, සහ , එහි slug මාතෘකාවේ නිශ්චිත, ප්රශ්න සංවේදී ගැලපීමකින් සෘජු පිටුවක් ස්ථාපනය කරන ලදී. getAllPublicPages() getPageBySlug() // @app/@right/public/(_servise)/(_libs)/utils.ts import { PageConfig, SlugType, } from "@/app/@right/(_service)/(_types)/page-wrapper-types"; import { PublicPagesConfig } from "../(_config)/public-pages-config"; export function getAllPublicPages(): PageConfig[] { return PublicPagesConfig.pages.filter( (page: PageConfig) => page.metadata.slug?.[0] === "public" ); } export function getPageBySlug(slug: SlugType): PageConfig | undefined { return PublicPagesConfig.pages.find( (page: PageConfig) => JSON.stringify( page.metadata.slug?.map((s: string) => s.toLowerCase()) ) === JSON.stringify(slug.map((s: string) => s.toLowerCase())) ); } Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode 2.1.8. header-section.tsx: Unified Section Header මෙම සම්මත උපාංගය සියලු කොටස් වර්ග සඳහා විශ්ව ප්රවර්ගයක් ලෙස සේවය කරයි, යෙදුම පුරා අනුකූලතාවය සහතික කරයි. එය ප්රකාශය, H1/H2 උපාංගය සහ විස්තරයක් වැනි විකෘති අමුද්රව්ය ඉදිරිපත් කරයි. // @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/header-section.tsx import React from "react"; import { cn } from "@/lib/utils"; import { PageHeaderDescription, PageHeaderHeading, } from "./page-header-elements"; import { Announcement } from "./announcement"; import { HeaderContentConfig } from "../../../(_types)/page-wrapper-types"; export type HeaderSectionProps = { headerContent: HeaderContentConfig; } & React.HTMLAttributes<HTMLDivElement>; export function HeaderSection({ headerContent, className, ...props }: HeaderSectionProps) { if (!headerContent) return null; const { announcement, heading, headingLevel = 1, description, showBorder = false, } = headerContent; return ( <section className={cn( showBorder && "border-t-4 border-b-4 border-primary", className )} {...props} > <div className="container mx-auto px-4"> <div className="flex flex-col items-center gap-1 py-8 md:py-10 lg:py-12"> {announcement && ( <Announcement badgeText={announcement.badgeText} descriptionText={announcement.descriptionText} href={announcement.href} /> )} <PageHeaderHeading level={headingLevel}>{heading}</PageHeaderHeading> {description && ( <PageHeaderDescription>{description}</PageHeaderDescription> )} </div> </div> </section> ); } Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode 2.1.9. header-section.tsx: සන්නිවේදනය කොටස් අංකය (Atomic Components) This section details the atomic components used to construct headers: (H1 සහ H2) for subheadings, and for placing buttons. These components leverage Dynamic HTML Tag Generation සඳහා, නිවැරදි SEO උපාංගය සහතික කිරීම. PageHeaderHeading PageHeaderDescription PageActions createElement // @app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/page-header-elements.tsx import { HTMLAttributes, createElement } from "react"; import { cn } from "@/lib/utils"; type HeadingTag = "h1" | "h2"; interface PageHeaderHeadingProps extends HTMLAttributes<HTMLHeadingElement> { level?: 1 | 2; } function PageHeaderHeading({ className, level = 1, ...props }: PageHeaderHeadingProps) { const Heading: HeadingTag = level === 1 ? "h1" : "h2"; const h1Classes = "text-2xl sm:text-3xl md:text-6xl lg:text-7xl"; const h2Classes = "text-lg sm:text-xl md:text-3xl lg:text-4xl"; return createElement(Heading, { className: cn( "text-center font-bold leading-tight tracking-tighter font-serif", level === 1 ? h1Classes : h2Classes, className ), ...props, }); } function PageHeaderDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) { return ( <p className={cn( "max-w-2xl text-balance text-center text-base font-light text-muted-foreground sm:text-lg", className )} {...props} /> ); } function PageActions({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return ( <div className={cn( "flex w-full items-center justify-center gap-2 pt-2", className )} {...props} /> ); } export { PageActions, PageHeaderDescription, PageHeaderHeading }; Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode 2.1.10. announcement.tsx: Announcement Component මෙම සන්නිවේදන හා දැනුම් දීම සඳහා නිර්මාණය කරන ලද අන්තර්ක්රීය බඩගිම් අංගය එය ප්රවේශය, ප්රවේශය සහ කොන්දේසි කළමනාකරණය සහාය වන අතර, අන්තර්ගතයක් නොමැති විට එය ස්වයංක්රීයව සැඟවනු ලැබේ. // @app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/announcement.tsx "use client"; import { useRouter } from "next/navigation"; import { Badge } from "@/components/ui/badge"; import { ArrowRight } from "lucide-react"; import { cn } from "@/lib/utils"; interface AnnouncementProps { badgeText?: string; descriptionText?: string; href?: string; className?: string; } export function Announcement({ badgeText, descriptionText, href, className, }: AnnouncementProps) { const router = useRouter(); const handleOnClick = () => { if (href) { router.push(href); } }; // Если нет текста для бейджа, описания или ссылки, возвращаем null if (!badgeText && !descriptionText && !href) { return null; } return ( <div className={cn( "flex cursor-pointer items-center gap-2 rounded-full border border-primary bg-muted px-3 py-1 text-sm transition-colors hover:bg-muted/80", className )} onClick={handleOnClick} role="link" tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { handleOnClick(); } }} > {badgeText && ( <Badge variant="secondary" className="text-xs"> {badgeText} </Badge> )} {descriptionText && ( <span className="text-muted-foreground">{descriptionText}</span> )} {href && <ArrowRight className=" h-3 w-3 text-muted-foreground" />} </div> ); } Enter fullscreen mode Exit fullscreen mode 2.1.11. footer-section.tsx: Unified Section Actions මෙම සම්මත උපාංගය ක්රියා බොත්තම් ඇතුළත් වේ.එය විවිධ ආකෘති විකල්ප සමග බොහෝ බොත්තම් සහාය වේ, සියලු කොටස් තුළ Call-to-Action (CTA) අමුද්රව්ය අනුකූලතාවය සහතික කරයි.එය ස්වයංක්රීයව ක්රියාත්මක නොවන විට සැඟවෙනවා. // @app/@right/(_service)/(_components)/page-transformer-components/footer-sections-components/footer-section.tsx "use client"; import { useRouter } from "next/navigation"; import type { HTMLAttributes } from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { PageActions } from "../header-sections-components/page-header-elements"; interface FooterAction { label: string; href: string; variant?: | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"; } interface FooterSectionProps extends HTMLAttributes<HTMLDivElement> { actions?: FooterAction[]; } export function FooterSection({ actions, className, ...props }: FooterSectionProps) { const router = useRouter(); if (!actions || actions.length === 0) { return null; } return ( <section className={cn("py-4 md:py-6 lg:py-8", className)} {...props}> <div className="container mx-auto px-4"> <PageActions> {actions.map((action) => ( <Button key={action.href} // href должен быть уникальным! size="sm" variant={action.variant || "default"} onClick={() => router.push(action.href)} > {action.label} </Button> ))} </PageActions> </div> </section> ); } Enter fullscreen mode Exit fullscreen mode 2.1.12. body-section.tsx: Arbitrary Content Container 2.1.12.1. Purpose and Philosophy serves as a highly flexible container for the main content within sections. Unlike the strictly standardized Header and Footer components, provides complete freedom for placing any React content. BodySection BodySection 2.1.12.2. Content Generation Principles සතුටින් සාමාන් ය TSX ලෙස නිෂ්පාදනය කළ යුතුය අමුද් රව් ය, සියලුම අමුද් රව් ය ප්රදර්ශනය වන්නේ පුළුල් ආකෘතියකින්. Crucially: bodyContent .map() typescript // ✅ bodyContent: ( <> <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="feature-card"> <h3>Feature 1</h3> <p>Description 1</p> </div> <div className="feature-card"> <h3>Feature 2</h3> <p>Description 2</p> </div> <div className="feature-card"> <h3>Feature 3</h3> <p>Description 3</p> </div> </div> </> ) Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode // ❌ bodyContent: ( <div className="grid"> {features.map(feature => <FeatureCard key={feature.id} {...feature} />)} </div> ) Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode 2.1.12.3. When to Use Custom Components එක් කොටසකට සංකීර්ණ ලෝහය අවශ් ය නම් (ආරක්ෂණය, බලපෑම, අන්තර් ක්රියාකාරීත්වය), ස්වාධීන අංගයක් නිර්මාණය කර එය එකතු කරන්න. ස්වාධීන ආයතනයක් ලෙස PageHtmlTransformer typescript // @/app/@right/(_service)/(_components)/page-transformer-components/body-sections-components/body-section.tsx export function BodySection({ children, className, ...props }: BodySectionProps) { const hasChildren = children !== null && children !== undefined && !(Array.isArray(children) && children.length === 0) && !(typeof children === "string" && children === ""); if (!hasChildren) return null; return ( <div className={cn(className)} {...props}> {children} </div> ); } Enter fullscreen mode Exit fullscreen mode 2.1.12.4 අංගය // @app/@right/(_service)/(_components)/page-transformer-components/body-sections-components/body-section.tsx import type { HTMLAttributes, ReactNode } from "react"; import { cn } from "@/lib/utils"; import { SectionType } from "../../../(_types)/page-wrapper-types"; interface BodySectionProps extends HTMLAttributes<HTMLDivElement> { children?: ReactNode | null; type: SectionType; } export function BodySection({ children, className, ...props }: BodySectionProps) { const defaultHeightRem = 0; const hasChildren = children !== null && children !== undefined && // Covers case when children = [] or "" !(Array.isArray(children) && children.length === 0) && !(typeof children === "string" && children === ""); if (!hasChildren && defaultHeightRem) { return ( <div className={cn(className)} style={{ height: `${defaultHeightRem}rem` }} {...props} > {/* Empty section with default height */} </div> ); } if (!hasChildren) { return null; } return ( <div className={cn(className)} {...props}> {children} </div> ); } Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode 2.1.12.5. Conclusion පද්ධතියේ ස්ථාවර ආකෘතිය සහ AI නිෂ්පාදනය කිරීමේ නිර්මාණශීලී නිදහස අතර පාලන හා මෘදුකාංගය අතර ගැලපෙන සාධකයක් ලෙස ක් රියා කරයි. BodySection 2.2 Advanced Custom කොටස් Advanced Custom Components are engineered to deliver complex, interactive functionality that extends beyond the capabilities of our standard architectural patterns. These components are reserved for scenarios requiring state management, sophisticated animations, real-time data handling, or unique business logic. Custom Components භාවිතා කරන විට: : Forms with validation, calculators, product configurators. Interactive Elements Animated Presentations: Complex Transitions, Parallax Effects, ස්වයංක්රීය sliders. : Chats, notifications, live data feeds. Real-Time Functionality Adaptive Logic: Desktop vs. Mobile හි මූලිකව වෙනස් හැසිරීම් සහිත කොටස්. : Non-standard interface elements specific to the project. Unique UI Patterns ආකෘති සංවර්ධනය: Custom Components ඇතුළත් වේ විවිධ ලෙස statements within a මෙම ප්රවේශය ඔවුන්ට පද්ධති සම්පූර්ණ පරිගණකයට ප්රවේශ කිරීමට ඉඩ සලසයි, වැනි මාතෘකාව හා උපාංග තොරතුරු, බෙදාහැරෙන CSS පන්ති සහ නිර්මාණ ටෝකන් හරහා අනුකූල පෙනුමක් සහ හැඟීමක් පවත්වාගෙන යන අතර. ඔවුන් පද්ධතියේ දර්ශනීය භාෂාව අනුගමනය කර ඇති අතර, ඔවුන් ඔවුන්ගේ අභ්යන්තර ලෝහය හා යෙදුම තුළ සම්පූර්ණ නිදහස ඉතිරි කර ඇත. PageHtmlTransformer case switch 2.2.1 Custom Components ක්රියාත්මක කිරීම සඳහා මාර්ගෝපදේශ 2.2.1.1 ප්රතිපත්තිය පිටුපස : Custom components must be returned directly without being enclosed හෝ ඔවුන් ඔවුන්ගේ ප්රදර්ශනය පිළිබඳ සම්පූර්ණ පාලනය සහතික කිරීම සඳහා ඔවුන්ගේම ප්රදර්ශනය කළමනාකරණය, පඩිපෙළ සහ පටිපාටිය කළමනාකරණය වගකිව යුතුය. No External Wrappers Wrapper FullScreenWrapper 2.2.1.2 අමුද් රව් ය අමුද් රව් ය : Custom component සඳහා prop interfaces යනු component file itself හි ඉහළට ප් රකාශ කළ යුතුය.All data is passed from the page configuration to the component via the component file itself. Config එක ඇතුලත් කරන්න. Local Prop Interfaces customComponentsAnyTypeData 2.2.1.3 පුළුල් කිරීම කොටසක් කොටසක් : සෑම පෞද්ගලික අංගයක්ම ඇණවුම් සඳහා එක් අමුද් රව් යයක් එකතු කිරීමට අවශ් ය වේ. එන්එම් මෙය නිවැරදිව පරීක්ෂා කළ හැකි අතර, පරිවර්තකයෙහි නිවැරදිව හඳුනා ගැනීම සහ අමුද්රව්ය render කිරීම සඳහා ප්රකාශය. Add a New Section Type SectionType page-wrapper-types.ts switch typescript // @/app/@right/(_service)/(_types)/page-wrapper-types.ts // ... export type SectionType ="hero-section" | “new-custom-section”; Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode 2.2.1.4. ageHtmlTransformer හි යාවත්කාලීන කිරීමේ සිද්ධීන් Custom case processingA new case is added to the PageHtmlTransformer to handle a custom section type with a direct // В PageHtmlTransformer: case "new-custom-section": return ( <NewCustomSection key={config.id} customData={section.customComponentsAnyTypeData.customData} /> ); Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode 2.2.1.5 Custom Config ව්යුහය : පහත දැක්වෙන උදාහරණයක් වන්නේ පෞද්ගලික අංශයක් ඇතුළත් වන පිටු සැකසුම් ය.All component-specific data is placed within the අංගය, අංගය අවශ්ය ඕනෑම ව්යුහයක් ඇති විය හැක. Configuration Structure customComponentsAnyTypeData export const PublicPagesConfig = { pages: [ { metadata: { id: "CIUD", title: "1", description: "2", slug: ["public", "name"], type: "new-custom-section", }, sections: [ { id: "new-custom-section", type: "new-custom-section", customComponentsAnyTypeData: { metaData: { metaTitle: "1", metaDescription: "2", }, customData: { mediaUrl: "/_static/illustrations/3.png", title: "4", description: "5", }, }, } as SectionConfig, ], }, ] as PageConfig[], Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode 2.2.2 Custom Component උදාහරණයක් 2.2.1 ක් රමය Double ප්රදර්ශනය Double ප්රදර්ශනය නුඹ 2.2.2.1.1 ප්රධාන වර්ග යාවත්කාලීන කිරීම පළමුව, නව කොටස වර්ගයට එකතු කරන්න එනිසා SectionType typescript // @/app/@right/(_service)/(_types)/page-wrapper-types.ts export type SectionType = | "hero-section" | "cta-section" | "double-presentation-section" Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode 2.2.2.1.2. Add New Case to PageHtmlTransformer පරිවර්තකය ඊළඟට, අනුකූලව එකතු කරන්න ටොයි කොටසක් බවට පත් කරන්න. case PageHtmlTransformer case "double-presentation-section": return ( <DoublePresentation key={section.id} metaData={section.customComponentsAnyTypeData.metaData} leftItem={section.customComponentsAnyTypeData.leftItem} rightItem={section.customComponentsAnyTypeData.rightItem} /> ); Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode 2.2.1.4 උදාහරණයක් සකස් කිරීම මෙන්න උදාහරණයක් How to Configure කොටසක් in . DoublePresentation public-pages-config.ts // app/@right/(_service)/(_types)/page-wrapper-types.ts export interface MetadataConfig { title?: string; description?: string; } export type CuidString = string; export interface PageMetadata { id: CuidString; title: string; description: string; image?: string; slug?: string[]; type: SectionType; } export type SectionType = | "hero-section" | "cta-section" | "faq-section" | "features-section" | "testimonials-section" | "pricing-section" | "contact-section" | "blog-posts-section" | "product-grid-section" | "image-gallery-section" | "text-block-section" | "video-section" | "team-section" | "about-us-section" | "newsletter-section" | "social-proof-section" | "comparison-table-section" | "map-section" | "custom-html-section" | "changelog-section" | "comparison-two-column-section" | "comparison-three-column-section" | "feature-showcase-section" | "double-presentation-section"; export interface BaseSection { id: string; type: SectionType; className?: string; } export interface HeaderContentConfig { announcement?: { badgeText?: string; descriptionText?: string; href?: string; }; heading: string; headingLevel?: 1 | 2; description?: string; showBorder?: boolean; } export interface FooterContentConfig { actions?: { label: string; href: string; variant?: | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"; }[]; } export interface SectionConfig extends BaseSection { type: SectionType; headerContent: HeaderContentConfig; bodyContent?: React.ReactNode; footerContent?: FooterContentConfig; videoUrl?: string; imageUrl?: string; sectionClassName?: string; contentWrapperClassName?: string; customComponentsAnyTypeData?: any; } export type Section = SectionConfig; export interface PageConfig { metadata: PageMetadata; sections: Section[]; } export type SlugType = string[]; Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode 2.2.2.1.5 අංගය සම්පූර්ණ කේතය සඳහා කොටසක් DoublePresentation // @/app/@right/public/(_servise)/(_config)/public-pages-config.ts import { PageConfig, SectionConfig, } from "@/app/@right/(_service)/(_types)/page-wrapper-types"; export const PublicPagesConfig = { pages: [ { metadata: { id: "public", title: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit...", slug: ["public", "test"], type: "hero-section", }, sections: [ { id: "test-block", type: "hero-section", headerContent: { announcement: { badgeText: "Thanks", descriptionText: "AI-SDK V5 & Vercel AI", href: "https://github.com/aifa-agi/aifa", }, heading: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit to build, deploy, and scale intelligent AI applications. Artifacts Feature, features secure multi-provider auth, Stripe payments, vector knowledge bases, deep-research agents, and a unique fractal architecture designed for the future of AI.", showBorder: false, headingLevel: 1, }, bodyContent: {}, footerContent: { actions: [ { label: "Get Started", href: "/https://github.com/aifa-agi/aifa", variant: "default", }, { label: "Browse Docs", href: "/docs", variant: "ghost" }, ], }, videoUrl: "/_static/video/ai-loop.mp4", contentWrapperClassName: "text-white", } as SectionConfig, ], }, { metadata: { id: "interactive-ai", title: "Interactive AI Demo", description: "Demo: DoublePresentation custom case", slug: ["public", "example"], type: "double-presentation-section", }, sections: [ { id: "double-presentation-demo", type: "double-presentation-section", customComponentsAnyTypeData: { metaData: { metaTitle: "Interactive AI: Where Conversation Builds the UI", metaDescription: "Discover what makes AIFA revolutionary...", }, leftItem: { mediaUrl: "/_static/illustrations/ai-chat.png", title: "Ai Artifacts Chatbot", description: "As the AI chatbot speaks, it highlights elements...", }, rightItem: { mediaUrl: "/_static/illustrations/ai-web.png", title: "Related Pages", description: "Click any UI element, and the AI provides instant context...", }, }, } as SectionConfig, ], }, ] as PageConfig[], }; Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode 2.2.2.1.3 සහතිකය පිටුපසින් පිටුපසින් පිටුපසින් පිටුපසින් මෙන්න සම්පූර්ණ අළුත් ලැයිස්තුව ඇතුළත් කරන ලදී. page-wrapper-types.ts // @/app/@right/(_service)/(_components)/page-transformer-components/custom-sections/custom-double-prsentation.tsx "use client"; import React, { useState, useEffect } from "react"; import { motion } from "framer-motion"; import Image from "next/image"; import { cn } from "@/lib/utils"; import { useMediaQuery } from "@/hooks/use-media-query"; interface PresentationMeta { metaTitle: string; metaDescription: string; } interface PresentationItem { mediaUrl: string; title: string; description: string; } interface DoublePresentationProps { metaData: PresentationMeta; leftItem: PresentationItem; rightItem: PresentationItem; } export default function DoublePresentation({ metaData, leftItem, rightItem, }: DoublePresentationProps) { const { isMobile } = useMediaQuery(); // Desktop animation state const [activeContainer, setActiveContainer] = useState<"left" | "right">( "left" ); const [sliderKey, setSliderKey] = useState(0); // Desktop auto-switching effect useEffect(() => { // Only run animation cycle on desktop if (isMobile) return; let sliderTimer: NodeJS.Timeout; let transitionTimer: NodeJS.Timeout; const startAnimationCycle = () => { setSliderKey((prev) => prev + 1); sliderTimer = setTimeout(() => { setActiveContainer((prev) => (prev === "left" ? "right" : "left")); transitionTimer = setTimeout(() => { startAnimationCycle(); }, 500); }, 9000); }; startAnimationCycle(); return () => { clearTimeout(sliderTimer); clearTimeout(transitionTimer); }; }, [isMobile]); // Return null while determining screen size if (isMobile === null) { return null; } // Common CSS classes const metaBlockClass = "text-center max-w-3xl flex flex-col items-center"; const descriptionClass = "mb-12 max-w-xl text-base text-muted-foreground text-center"; const desktopTitleClass = "mb-6 max-w-3xl font-serif font-bold leading-tight md:text-2xl lg:text-4xl"; const desktopDescriptionClass = "mb-12 max-w-xl text-lg text-muted-foreground md:text-xl text-center"; // Mobile card renderer const renderMobileCard = (item: PresentationItem) => ( <div className="relative flex flex-col rounded-xl bg-gray-900 text-white shadow-lg mb-6 overflow-hidden"> <div className="w-full relative" style={{ paddingTop: "56.25%" }}> <Image src={item.mediaUrl} alt={item.title} fill className="object-cover rounded-t-xl" sizes="100vw" priority /> </div> <div className="flex flex-col p-4"> <h2 className="text-xl font-bold mb-2">{item.title}</h2> <p className="text-gray-300 mb-2 text-base min-h-16"> {item.description} </p> </div> </div> ); // Desktop card renderer const renderDesktopCard = (item: PresentationItem, isActive: boolean) => ( <motion.div layout animate={{ flex: isActive ? "7 1 0%" : "3 1 0%" }} transition={{ duration: 0.5 }} className="relative flex flex-col rounded-lg overflow-hidden bg-transparent text-white p-0 shadow-lg h-[30rem] flex-shrink-0" > <div className="relative w-full h-60 mb-4 rounded-xl overflow-hidden border-4 border-gray-700"> <Image src={item.mediaUrl} alt={item.title} fill className="object-cover" priority sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" /> </div> <div className="flex flex-col pt-6"> <h2 className="text-2xl font-bold mb-2 whitespace-nowrap overflow-hidden text-ellipsis"> {item.title} </h2> <div className="relative w-full h-px bg-gray-700 mb-4"> <motion.div key={`slider-${item.title}-${sliderKey}`} className={cn( "absolute top-0 left-0 h-full", isActive ? "bg-primary" : "bg-gray-700" )} initial={{ width: 0 }} animate={{ width: isActive ? "100%" : "0%" }} transition={ isActive ? { duration: 9, ease: "linear" } : { duration: 0 } } /> </div> <p className="text-gray-300 mb-4 text-sm line-clamp-4 min-h-[4rem]"> {item.description} </p> </div> </motion.div> ); // Mobile layout if (isMobile) { return ( <section className="w-full pt-20"> <div className="container mx-auto px-4 flex flex-col items-center"> <div className={metaBlockClass}> <h2 className="text-xl font-bold mb-4">{metaData.metaTitle}</h2> <p className={descriptionClass}>{metaData.metaDescription}</p> </div> <div className="w-full flex flex-col"> {renderMobileCard(leftItem)} {renderMobileCard(rightItem)} </div> </div> </section> ); } // Desktop layout return ( <section className="w-full pt-28"> <div className="container mx-auto px-4 flex flex-col items-center gap-12"> <div className={metaBlockClass}> <h2 className={desktopTitleClass}>{metaData.metaTitle}</h2> <p className={desktopDescriptionClass}>{metaData.metaDescription}</p> </div> <div className="flex gap-6 w-full max-w-6xl"> {renderDesktopCard(leftItem, activeContainer === "left")} {renderDesktopCard(rightItem, activeContainer === "right")} </div> </div> </section> ); } Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode - Full Screen Mode ප්රතිඵලයක්: මෙම ලේඛන වලින් උපරිමයෙන් ලබා ගත හැකි ආකාරය මෙහි ඉදිරිපත් කරන උපදෙස් සහ අමුද්රව්යයන් එක් තනි තැපැල් සඳහා පුළුල් විය හැකි බව අපි තේරුම් ගනිමු.ඔබට එය වඩාත් ආකර්ෂණීය කියවීමක් නොවන බව ඔබට දැනෙනු ඇත, ඔබ නිවැරදි වනු ඇත.එය විනෝදාංශයක් නොවේ; එය ශක්තිමත් පද්ධතිය පිළිබඳ සම්පූර්ණ පාලනය ලබා දීම සඳහා නිර්මාණය කරන ලද විස්තරාත්මක තාක්ෂණික මාර්ගෝපදේශයකි. මෙම සංකීර්ණ පද්ධතිය පිළිබඳ අධ්යයනය අමුද්රව්ය හා නිෂ්පාදන ක්රියාවලිය බවට පරිවර්තනය කිරීම සඳහා, අපි පහත දැක්වෙන ප්රවේශය නිර්දේශ කරමු. වේගවත් ඉගෙනීම සඳහා AI භාවිතා කිරීම පෞද්ගලිකව කියවීම වෙනුවට, ඔබේ AI උපදේශකයා සඳහා මෙම ලේඛනය භාවිතා කරන්න. Your Action Plan: මෙම ලිපියේ සම්පූර්ණ අන්තර්ගතය, ප්රදර්ශනය සිට මෙම කොටස දක්වා සකස් කරන්න. ChatGPT සඳහා පද්ධති ප්රවේශයක් ලෙස එය භාවිතා කරන්න.මේක අපි සාකච්ඡා කරන අර්ධකාලීන සම්පූර්ණ සබැඳිය සමඟ AI ලබා දෙනු ඇත. You can now have a dialogue with an AI that "understands" our rules and conventions. For example: Ask questions about the source code. "Based on the provided documentation, explain how to create a new custom component to display customer testimonials." and ." "Show me a configuration example for a page that uses both DoublePresentation HeroSection මෙම ක්රමයෙන් ඔබට යෙදුමගේ මූලධර්මය ඉතා ඉක්මනින් තේරුම් ගැනීමට උදව් වනු ඇත.ඔබ මෙම ව්යාපෘතිය සඳහා සම්පූර්ණ මූලාශ්රය අපගේ . GitHub ගබඩාව ඊළඟ මොනවද මෙම ලිපිය තුළ, අපගේ වෙබ් අඩවිය නිර්මාණය පද්ධතියෙහි ප්රධාන කොටස් දෙකක්ගෙන් එකක් නිර්මාණය කර ඇත: භාවිතා කිරීමට සූදානම් React අමුද්රව්ය බවට ගොනු.This paves the way for automated page creation, where an AI can generate the configuration, and our එය ලස්සන පරිගණකයක් බවට පත් කරයි. a tool that transforms a Config Transformer අපගේ ව්යාපෘතිය ක්රියාකාරීව බලන්න, Live Demo වෙත යන්න . සංකල්පය.dev සංකල්පය.dev A Glimpse into Future Posts: ඊළඟ ලිපිය දෙවන ප්රධාන තාක්ෂණය මත අවධානය යොමු වනු ඇත: Markdown ගොනු වලින් පිටපත් නිර්මාණය කිරීම (ඩොක්ලට්, උපාංග, නිෂ්පාදන පිටපත්). Part 3: From Config to UI. අපි මෙම ලිපියේ මාතෘකාව නැවත බැලීමට සහ ChatGPT විසින් නිර්මාණය කරන ලද සැකසුම් React කොටස් බවට පරිවර්තනය කරන ආකාරය සහ මෙම ක්රියාවලිය පුළුල් කර ගත හැකි ආකාරයට ගැඹුරින් පිවිසෙනු ඇත. ඊළඟ උපාංගය තුළ, අපි ප්රධාන ප්රශ්නයකට පිළිතුරු දෙමින් පටන් ගමු: තනිව ඉන්න! Why was Markdown chosen for content management?
