go-duck-cli 1.0.9 → 1.1.12

package/templates/docs/pages/gdl-relationships.hbs

@@ -0,0 +1,80 @@
+<div class="prose prose-slate max-w-none">
+    <!-- Relationships Hero -->
+    <div class="flex items-center space-x-3 mb-10 text-purple-700">
+        <div class="p-4 bg-gradient-to-br from-purple-600 to-purple-800 rounded-3xl shadow-xl shadow-purple-100">
+            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+            </svg>
+        </div>
+        <div>
+            <h1 class="text-4xl font-black text-slate-900 m-0 tracking-tight leading-none">Relationships</h1>
+            <p class="text-purple-600 font-bold tracking-widest uppercase text-[10px] mt-2 ml-1">Entity Associations & Integrity</p>
+        </div>
+    </div>
+
+    <p class="text-xl text-slate-600 mb-12 italic leading-relaxed">
+        GDL makes modeling complex distributed associations trivial. Relations are defined outside of the entity blocks to maintain a clean, declarative architectural blueprint.
+    </p>
+
+    <!-- Syntax Overview -->
+    <div class="bg-purple-900 rounded-[2.5rem] p-12 text-white shadow-2xl relative overflow-hidden group mb-16">
+        <div class="absolute inset-0 bg-gradient-to-br from-indigo-900/40 to-transparent"></div>
+        <div class="relative z-10">
+            <h2 class="text-3xl font-black mb-6 text-white m-0">The Social Network of Data</h2>
+            <div class="bg-purple-800/50 backdrop-blur-md rounded-2xl p-8 border border-purple-500/30">
+                <pre class="text-indigo-200 font-mono text-base leading-relaxed overflow-x-auto m-0">
+<span class="text-purple-400">// relationship Type Parent to Child</span>
+relationship 1:m Customer to Order
+relationship m:1 Order to Customer
+                </pre>
+            </div>
+            <p class="mt-8 text-purple-200 text-sm italic font-medium leading-relaxed m-0 border-l-2 border-purple-400 pl-6">
+                Relationships in GO-DUCK are directional. The generator automatically injects foreign keys, GORM preloading logic, and Protobuf nested objects based on these declarations.
+            </p>
+        </div>
+    </div>
+
+    <!-- REL TYPES -->
+    <section class="mb-20">
+        <h2 class="text-3xl font-black text-slate-900 mb-8 tracking-tight">Supported Association Types</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div class="p-8 bg-white border border-slate-200 rounded-[2rem] shadow-sm hover:border-purple-200 transition-all group">
+                <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-6 text-2xl group-hover:scale-110 transition-transform">👨‍👩‍👧</div>
+                <h3 class="text-xl font-bold text-slate-900 mb-4 m-0 font-mono">1:m (One-to-Many)</h3>
+                <p class="text-sm text-slate-600 leading-relaxed mb-6 italic">One parent entity owns multiple children. Perfect for Customers having many Orders.</p>
+                <div class="p-4 bg-slate-50 rounded-xl font-mono text-xs text-purple-700 font-bold border border-slate-100">relationship 1:m Customer to Order</div>
+            </div>
+            <div class="p-8 bg-white border border-slate-200 rounded-[2rem] shadow-sm hover:border-purple-200 transition-all group">
+                <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-6 text-2xl group-hover:scale-110 transition-transform">🔗</div>
+                <h3 class="text-xl font-bold text-slate-900 mb-4 m-0 font-mono">m:1 (Many-to-One)</h3>
+                <p class="text-sm text-slate-600 leading-relaxed mb-6 italic">Multiple entities reference a single shared resource. Multiple Car entities belonging to a single Manufacturer.</p>
+                <div class="p-4 bg-slate-50 rounded-xl font-mono text-xs text-purple-700 font-bold border border-slate-100">relationship m:1 Car to Manufacturer</div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Integrity Modifiers -->
+    <section class="mb-20">
+        <h2 class="text-3xl font-black text-slate-900 mb-8 tracking-tight italic underline decoration-purple-500 underline-offset-8">Referential Integrity Modifiers</h2>
+        <div class="p-8 bg-purple-50 rounded-3xl border border-purple-100">
+            <div class="flex items-start space-x-6">
+                <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-xl shadow-sm flex-shrink-0">⚓</div>
+                <div>
+                    <h4 class="text-lg font-bold text-purple-900 mb-2 m-0 font-mono">required</h4>
+                    <p class="text-sm text-purple-800 leading-relaxed m-0 italic mb-4">By adding the `required` keyword to any relationship, GO-DUCK enforces strict existence checking at the database and API level.</p>
+                    <code class="px-3 py-1 bg-white text-purple-700 rounded-lg text-xs font-bold border border-purple-200">relationship 1:m Customer to Order required</code>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <div class="flex flex-col md:flex-row gap-4 mb-20">
+        <a href="gdl-annotations.html" class="flex-1 p-6 bg-slate-900 rounded-2xl text-white hover:bg-slate-800 transition-colors group">
+            <div class="text-xs font-bold text-slate-500 uppercase tracking-widest mb-2">Next Category</div>
+            <div class="text-xl font-bold flex items-center">
+                🎯 Power-up Annotations
+                <svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+            </div>
+        </a>
+    </div>
+</div>

package/templates/docs/pages/gdl.hbs

@@ -1,223 +1,79 @@
-<div class="mb-10 text-center lg:text-left border-b border-slate-200 pb-8">
-    <div class="inline-flex items-center px-3 py-1 rounded-full bg-emerald-100 text-emerald-700 text-xs font-semibold tracking-wide uppercase mb-4">
-        Domain Driven Design
-    </div>
-    <h1 class="text-4xl lg:text-5xl font-extrabold text-slate-900 tracking-tight leading-tight mb-4">GDL (Go-Duck Language)</h1>
-    <p class="text-lg lg:text-xl text-slate-600 max-w-2xl leading-relaxed">The standard DSL for generating your massive suite of code from a simple text file.</p>
-</div>
-
-<section class="mb-12">
-    <h2 class="text-2xl font-bold text-slate-800 mb-6 flex items-center">
-        <span class="w-8 h-8 rounded-lg bg-emerald-100 text-emerald-600 flex items-center justify-center mr-3 text-sm">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
-        </span>
-        GDL Syntax & Structure
-    </h2>
-    <p class="mb-6 text-slate-600 leading-relaxed">GDL allows you to define your core business entities and the relationships between them. It looks and acts slightly similarly to JHipster's JDL.</p>
-
-    <div class="bg-[#1e1e1e] rounded-xl overflow-hidden shadow-lg mb-4">
-        <div class="bg-[#2d2d2d] px-4 py-2 border-b border-[#404040] flex items-center justify-between">
-            <div class="flex items-center">
-                <div class="flex space-x-1.5 mr-4">
-                    <div class="w-3 h-3 rounded-full bg-rose-500"></div>
-                    <div class="w-3 h-3 rounded-full bg-amber-500"></div>
-                    <div class="w-3 h-3 rounded-full bg-emerald-500"></div>
-                </div>
-                <span class="text-xs text-slate-300 font-mono">schema.gdl</span>
-            </div>
+<div class="prose prose-slate max-w-none">
+    <!-- Marketing Hero -->
+    <div class="flex items-center space-x-3 mb-10 text-indigo-700">
+        <div class="p-4 bg-gradient-to-br from-indigo-600 to-indigo-800 rounded-3xl shadow-xl shadow-indigo-100">
+            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+            </svg>
         </div>
-        <div class="p-5 overflow-x-auto text-sm">
-<pre><code class="language-plaintext">@Audited 
-entity Article {
-  title String required unique
-  content Text required
-  status ArticleStatus required
-  publishedDate LocalDate
-  views Integer
-  metadata JSONB
-}
-
-enum ArticleStatus {
-  DRAFT, PUBLISHED, ARCHIVED
-}
-
-entity Author {
-  name String required
-  biography Text
-  settings JSON
-}
-
-relationship OneToMany {
-  Author{article} to Article{author} required
-}</code></pre>
+        <div>
+            <h1 class="text-4xl font-black text-slate-900 m-0 tracking-tight leading-none">Introduction to GDL</h1>
+            <p class="text-indigo-600 font-bold tracking-widest uppercase text-[10px] mt-2 ml-1">Go Duck Language Specification</p>
         </div>
     </div>
-</section>
 
-<section class="mb-12">
-    <h2 class="text-2xl font-bold text-slate-800 mb-6 flex items-center">
-        <span class="w-8 h-8 rounded-lg bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3 text-sm">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg>
-        </span>
-        Supported Data Types
-    </h2>
-    <div class="overflow-x-auto rounded-xl border border-slate-200">
-        <table class="min-w-full text-left bg-white">
-            <thead>
-                <tr class="bg-slate-50 border-b border-slate-200 text-slate-500 uppercase text-xs tracking-wider">
-                    <th class="p-4 font-semibold">GDL Type</th>
-                    <th class="p-4 font-semibold">Go Struct Type</th>
-                    <th class="p-4 font-semibold">Postgres / SQL Type</th>
-                    <th class="p-4 font-semibold">GraphQL / Proto</th>
-                </tr>
-            </thead>
-            <tbody class="text-sm text-slate-700 divide-y divide-slate-100">
-                <tr class="hover:bg-slate-50 transition-colors"><td class="p-4 font-semibold font-mono text-indigo-600">String</td><td class="p-4"><code class="bg-slate-100 px-1 py-0.5 rounded text-xs text-slate-800">string</code></td><td class="p-4">VARCHAR(255)</td><td class="p-4">String / string</td></tr>
-                <tr class="hover:bg-slate-50 transition-colors"><td class="p-4 font-semibold font-mono text-indigo-600">String(N)</td><td class="p-4"><code class="bg-slate-100 px-1 py-0.5 rounded text-xs text-slate-800">string</code></td><td class="p-4">VARCHAR(N)</td><td class="p-4">String / string</td></tr>
-                <tr class="hover:bg-slate-50 transition-colors"><td class="p-4 font-semibold font-mono text-indigo-600">Text</td><td class="p-4"><code class="bg-slate-100 px-1 py-0.5 rounded text-xs text-slate-800">string</code></td><td class="p-4">TEXT</td><td class="p-4">String / string</td></tr>
-                <tr class="hover:bg-slate-50 transition-colors"><td class="p-4 font-semibold font-mono text-indigo-600">JSON</td><td class="p-4"><code class="bg-slate-100 px-1 py-0.5 rounded text-xs text-slate-800">datatypes.JSON</code></td><td class="p-4 text-emerald-600 font-semibold">JSON</td><td class="p-4">String / string</td></tr>
-                <tr class="hover:bg-slate-50 transition-colors"><td class="p-4 font-semibold font-mono text-indigo-600">JSONB</td><td class="p-4"><code class="bg-slate-100 px-1 py-0.5 rounded text-xs text-slate-800">datatypes.JSON</code></td><td class="p-4 text-emerald-600 font-semibold">JSONB</td><td class="p-4">String / string</td></tr>
-                <tr class="hover:bg-slate-50 transition-colors"><td class="p-4 font-semibold font-mono text-indigo-600">Integer</td><td class="p-4"><code class="bg-slate-100 px-1 py-0.5 rounded text-xs text-slate-800">int</code></td><td class="p-4">INT</td><td class="p-4">Int / int32</td></tr>
-                <tr class="hover:bg-slate-50 transition-colors"><td class="p-4 font-semibold font-mono text-indigo-600">Long</td><td class="p-4"><code class="bg-slate-100 px-1 py-0.5 rounded text-xs text-slate-800">int64</code></td><td class="p-4">BIGINT</td><td class="p-4">ID / int64</td></tr>
-                <tr class="hover:bg-slate-50 transition-colors"><td class="p-4 font-semibold font-mono text-indigo-600">Float</td><td class="p-4"><code class="bg-slate-100 px-1 py-0.5 rounded text-xs text-slate-800">float64</code></td><td class="p-4">DECIMAL</td><td class="p-4">Float / float32</td></tr>
-                <tr class="hover:bg-slate-50 transition-colors"><td class="p-4 font-semibold font-mono text-indigo-600">BigDecimal</td><td class="p-4"><code class="bg-slate-100 px-1 py-0.5 rounded text-xs text-slate-800">float64</code></td><td class="p-4">DECIMAL</td><td class="p-4">Float / double</td></tr>
-                <tr class="hover:bg-slate-50 transition-colors"><td class="p-4 font-semibold font-mono text-indigo-600">Boolean</td><td class="p-4"><code class="bg-slate-100 px-1 py-0.5 rounded text-xs text-slate-800">bool</code></td><td class="p-4">BOOLEAN</td><td class="p-4">Boolean / bool</td></tr>
-                <tr class="hover:bg-slate-50 transition-colors"><td class="p-4 font-semibold font-mono text-indigo-600">LocalDate</td><td class="p-4"><code class="bg-slate-100 px-1 py-0.5 rounded text-xs text-slate-800">time.Time</code></td><td class="p-4">DATE</td><td class="p-4">String / string</td></tr>
-                <tr class="hover:bg-slate-50 transition-colors"><td class="p-4 font-semibold font-mono text-indigo-600">Instant</td><td class="p-4"><code class="bg-slate-100 px-1 py-0.5 rounded text-xs text-slate-800">time.Time</code></td><td class="p-4">TIMESTAMP</td><td class="p-4">String / string</td></tr>
-                <tr class="hover:bg-slate-50 transition-colors"><td class="p-4 font-semibold font-mono text-indigo-600">Enum</td><td class="p-4"><code class="bg-slate-100 px-1 py-0.5 rounded text-xs text-slate-800">CustomType</code></td><td class="p-4">VARCHAR(50)</td><td class="p-4">String / string</td></tr>
-            </tbody>
-        </table>
+    <div class="bg-indigo-50 border-l-4 border-indigo-500 p-8 rounded-r-3xl mb-12">
+        <p class="text-lg text-indigo-900 font-medium leading-relaxed m-0">
+            <strong>GDL (Go Duck Language)</strong> is the evolutionary blueprint of your ecosystem. It is a stateful, high-fidelity modeling language designed to describe entities, relationships, and infrastructure power-ups in a human-readable format.
+        </p>
     </div>
-</section>
 
-<section class="mb-12">
-    <h2 class="text-2xl font-bold text-slate-800 mb-6 flex items-center">
-        <span class="w-8 h-8 rounded-lg bg-pink-100 text-pink-600 flex items-center justify-center mr-3 text-sm">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
-        </span>
-        Enumerations
-    </h2>
-    <p class="mb-6 text-slate-600 leading-relaxed">GDL supports custom Enum types for fields that have a predefined set of allowed values. Enums are generated as Go types with constants and mapped to safe string columns in the database.</p>
-    
-    <div class="bg-[#1e1e1e] rounded-xl overflow-hidden shadow-lg">
-        <div class="p-5 overflow-x-auto text-sm text-slate-300">
-<pre><code class="language-plaintext">enum Language {
-  ENGLISH, FRENCH, GERMAN
-}
-
-entity Person {
-  name String required
-  nativeLanguage Language
-}</code></pre>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
+        <div class="group p-8 bg-white border border-slate-200 rounded-3xl shadow-sm hover:shadow-md transition-all">
+            <h3 class="text-xl font-bold text-slate-900 mb-4 flex items-center">
+                <span class="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center mr-3 text-sm">🌱</span>
+                One Truth
+            </h3>
+            <p class="text-slate-600 text-sm leading-relaxed mb-0">Unlike standard generators, GDL is the single source of truth for your Database schema, Protobuf definitions, GraphQL types, and Go Repository logic.</p>
         </div>
-    </div>
-</section>
-
-<section class="mb-12">
-    <h2 class="text-2xl font-bold text-slate-800 mb-6 flex items-center">
-        <span class="w-8 h-8 rounded-lg bg-teal-100 text-teal-600 flex items-center justify-center mr-3 text-sm">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg>
-        </span>
-        Modifiers & Annotations
-    </h2>
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-8">
-        <div class="p-5 rounded-2xl border border-slate-200 bg-white">
-            <h3 class="font-bold text-slate-900 mb-2 font-mono text-indigo-600">required</h3>
-            <p class="text-sm text-slate-600 leading-relaxed">Forces the field to be NOT NULL in the database, missing fields are blocked by the Gin validator natively.</p>
-        </div>
-        <div class="p-5 rounded-2xl border border-slate-200 bg-white">
-            <h3 class="font-bold text-slate-900 mb-2 font-mono text-indigo-600">unique</h3>
-            <p class="text-sm text-slate-600 leading-relaxed">Adds a standard UNIQUE constraint indexing configuration at the database level.</p>
-        </div>
-    </div>
-    <div class="p-6 rounded-2xl border border-rose-200 bg-rose-50/50">
-        <h3 class="font-bold text-rose-900 mb-2 font-mono drop-shadow-sm">@Audited</h3>
-        <p class="text-sm text-rose-800 leading-relaxed">An entity annotation that completely re-wires the structural behavior of the model. Standard <code class="bg-rose-100 px-1 py-0.5 rounded text-rose-900">created_at</code> triggers are bypassed and 5 highly-detailed audit columns are injected: <code>created_by, created_date, last_modified_by, last_modified_date, last_modified_user_id</code>. All changes are captured implicitly by the JWT middleware.</p>
-    </div>
-</section>
-
-<section class="mb-10">
-    <h2 class="text-2xl font-bold text-slate-800 mb-6 flex items-center">
-        <span class="w-8 h-8 rounded-lg bg-orange-100 text-orange-600 flex items-center justify-center mr-3 text-sm">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
-        </span>
-        Incremental Migration Engine
-    </h2>
-    <p class="mb-4 text-slate-600 leading-relaxed">Running <code class="bg-slate-100 px-1 py-0.5 rounded text-slate-800 font-mono text-sm">go-duck import-gdl app.gdl</code> compares your GDL file against the physical <code>.go-duck/</code> snapshot state securely stored in the repo.</p>
-    <p class="mb-6 text-slate-600 leading-relaxed">It detects exactly what changed (such as removing a field, changing field types, adding new nested JSON) and generates precise atomic standard Liquibase XML <code>migrations/liquibase/changelogs/</code> scripts to evolve the live database safely without destroying data.</p>
-    
-    <div class="bg-blue-50/80 border border-blue-200 p-5 rounded-xl flex items-start shadow-sm">
-        <svg class="w-6 h-6 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-        <div>
-            <h4 class="font-semibold text-blue-900 mb-1">Golden Rule</h4>
-            <p class="text-blue-800 text-sm leading-relaxed mb-2">Avoid editing Liquibase XML manually unless correcting an anomaly. Let the GDL manage your migrations.</p>
+        <div class="group p-8 bg-white border border-slate-200 rounded-3xl shadow-sm hover:shadow-md transition-all">
+            <h3 class="text-xl font-bold text-slate-900 mb-4 flex items-center">
+                <span class="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center mr-3 text-sm">🔄</span>
+                Stateful Evolution
+            </h3>
+            <p class="text-slate-600 text-sm leading-relaxed mb-0">The GDL engine tracks schema deltas. Adding a field in GDL automatically generates the corresponding <strong>Goose SQL Migration</strong> without wiping your data.</p>
         </div>
     </div>
-</section>
 
-<section class="mb-12">
-    <h2 class="text-2xl font-bold text-slate-800 mb-6 flex items-center">
-        <span class="w-8 h-8 rounded-lg bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3 text-sm">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
-        </span>
-        Managing Relationships
-    </h2>
-    <p class="mb-6 text-slate-600 leading-relaxed">Relationships in GDL define how entities connect at the database level (foreign keys) and how they are represented in Go structs and GraphQL schemas. Just like JHipster, we support four primary types.</p>
+    <h2 class="text-3xl font-black text-slate-900 mb-8 tracking-tight">The Basic Anatomy</h2>
+    <p class="text-slate-600 mb-8">A GDL file is composed of three primary building blocks: <strong>Entities</strong>, <strong>Enums</strong>, and <strong>Relationships</strong>.</p>
 
-    <!-- One-to-Many -->
-    <div class="mb-8">
-        <h3 class="text-xl font-semibold text-slate-800 mb-4 flex items-center">
-            One-to-Many
-            <span class="ml-3 px-2 py-0.5 rounded bg-blue-100 text-blue-700 text-xs font-bold uppercase tracking-wider">Most Common</span>
-        </h3>
-        <p class="text-slate-600 mb-4 text-sm bg-slate-50 p-3 border-l-4 border-blue-400 rounded-r-lg">Example: An <code class="font-bold">Author</code> has many <code class="font-bold">Articles</code>.</p>
-        <div class="bg-[#1e1e1e] rounded-xl overflow-hidden shadow-lg">
-            <div class="p-4 overflow-x-auto text-sm">
-<pre><code class="language-plaintext">relationship OneToMany {
-  Author{article} to Article{author}
-}</code></pre>
+    <div class="bg-slate-900 rounded-[2.5rem] p-10 text-white shadow-2xl relative overflow-hidden group mb-16">
+        <div class="absolute inset-0 bg-gradient-to-br from-indigo-900/40 to-transparent"></div>
+        <div class="relative z-10">
+            <div class="flex items-center justify-between mb-6">
+                <span class="px-4 py-1 bg-indigo-500/20 rounded-full text-indigo-300 text-xs font-bold border border-indigo-500/30">schema.gdl</span>
+                <span class="text-slate-500 text-xs font-mono select-none">DUCK-ENGINE-V3</span>
             </div>
-        </div>
-        <p class="mt-4 text-sm text-slate-500 italic">This generates a <code>author_id</code> foreign key in the <code>article</code> table and a slice of Articles in the Author struct.</p>
-    </div>
+            <pre class="text-indigo-400 font-mono text-base leading-relaxed overflow-x-auto selection:bg-indigo-500/30">
+<span class="text-slate-500">// Define an elite entity with power-ups</span>
+@Audited @Federated
+entity Customer {
+    string(100) fullName required
+    string(255) email unique
+    datetime    lastLogin
+}
 
-    <!-- Many-to-One -->
-    <div class="mb-8">
-        <h3 class="text-xl font-semibold text-slate-800 mb-4">Many-to-One</h3>
-        <p class="text-slate-600 mb-4 text-sm bg-slate-50 p-3 border-l-4 border-slate-300 rounded-r-lg">Essentially the inverse of One-to-Many, used to specify the owner side explicitly.</p>
-        <div class="bg-[#1e1e1e] rounded-xl overflow-hidden shadow-lg">
-            <div class="p-4 overflow-x-auto text-sm">
-<pre><code class="language-plaintext">relationship ManyToOne {
-  Article{author} to Author
-}</code></pre>
-            </div>
+<span class="text-slate-500">// Define a directional relationship</span>
+relationship Customer 1:m Order
+            </pre>
         </div>
     </div>
 
-    <!-- One-to-One -->
-    <div class="mb-8">
-        <h3 class="text-xl font-semibold text-slate-800 mb-4">One-to-One</h3>
-        <p class="text-slate-600 mb-4 text-sm bg-slate-50 p-3 border-l-4 border-indigo-400 rounded-r-lg">Example: A <code class="font-bold">User</code> has exactly one <code class="font-bold">Profile</code>.</p>
-        <div class="bg-[#1e1e1e] rounded-xl overflow-hidden shadow-lg">
-            <div class="p-4 overflow-x-auto text-sm">
-<pre><code class="language-plaintext">relationship OneToOne {
-  User{profile} to Profile{user}
-}</code></pre>
+    <div class="flex flex-col md:flex-row gap-4 mb-20">
+        <a href="gdl-entities.html" class="flex-1 p-6 bg-slate-900 rounded-2xl text-white hover:bg-slate-800 transition-colors group">
+            <div class="text-xs font-bold text-slate-500 uppercase tracking-widest mb-2">Next Category</div>
+            <div class="text-xl font-bold flex items-center">
+                Entities & Fields
+                <svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
             </div>
-        </div>
-    </div>
-
-    <!-- Many-to-Many -->
-    <div class="mb-8">
-        <h3 class="text-xl font-semibold text-slate-800 mb-4">Many-to-Many</h3>
-        <p class="text-slate-600 mb-4 text-sm bg-slate-50 p-3 border-l-4 border-purple-400 rounded-r-lg">Example: <code class="font-bold">Students</code> enrolled in many <code class="font-bold">Courses</code>.</p>
-        <div class="bg-[#1e1e1e] rounded-xl overflow-hidden shadow-lg">
-            <div class="p-4 overflow-x-auto text-sm">
-<pre><code class="language-plaintext">relationship ManyToMany {
-  Student{course} to Course{student}
-}</code></pre>
+        </a>
+        <a href="cli.html" class="flex-1 p-6 bg-white border border-slate-200 rounded-2xl text-slate-900 hover:bg-slate-50 transition-colors group">
+            <div class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-2">Reference</div>
+            <div class="text-xl font-bold flex items-center">
+                CLI Usage
+                <svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
             </div>
-        </div>
-        <p class="mt-4 text-sm text-slate-500 italic">This triggers the automatic generation of a join table (e.g., <code>student_course</code>) in Liquibase.</p>
+        </a>
     </div>
-</section>
+</div>

package/templates/docs/pages/graphql.hbs

@@ -1,51 +1,65 @@
-<h1 class="text-4xl font-extrabold text-gray-900 mb-4">GraphQL Integration</h1>
-<p class="text-lg text-gray-600 mb-8">Access all generated GDL entities through a single unified endpoint with high-efficiency queries.</p>
+<div class="prose prose-slate max-w-none">
+    <div class="flex items-center space-x-3 mb-8 text-rose-700">
+        <div class="p-4 bg-gradient-to-br from-rose-600 to-rose-800 rounded-2xl shadow-lg shadow-rose-100">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 00-1 1v1a2 2 0 11-4 0v-1a1 1 0 00-1-1H7a1 1 0 01-1-1v-3a1 1 0 011-1h1a2 2 0 100-4H7a1 1 0 01-1-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
+            </svg>
+        </div>
+        <h1 class="text-5xl font-black text-slate-900 m-0 tracking-tighter leading-none">Graph Discovery <br><span class="text-rose-600 italic leading-snug">The Entitlements Schema.</span></h1>
+    </div>
+
+    <p class="text-2xl text-slate-500 font-medium mb-12 leading-relaxed tracking-tight group hover:text-slate-600 font-serif italic transition-all duration-300">
+        Experience total query flexibility. GO-DUCK generates a unified, high-performance GraphQL schema that respects your multi-tenant isolation and OIDC entitlements out of the box.
+    </p>
 
-<section class="mb-10">
-    <h2 class="text-2xl font-bold text-gray-800 mb-4 border-b pb-2">Single Unified Endpoint</h2>
-    <p class="mb-4">Rather than relying entirely on REST endpoints, your application supports GraphQL via <code>POST /graphql</code>.</p>
-    
-    <div class="bg-indigo-50 border-l-4 border-indigo-500 p-4 mb-6 rounded-r">
-        <p class="text-indigo-900"><strong>Note:</strong> Just like REST, GraphQL requires standard Keycloak JWT headers to be attached to queries and mutations!</p>
+    <!-- The Graph Core Advantage -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-20 px-4">
+        <div class="p-10 bg-rose-50 rounded-[3rem] border border-rose-100 shadow-sm border-l-[1.5rem] border-l-rose-500">
+            <h5 class="font-black text-rose-900 mb-2 uppercase text-xs tracking-widest italic tracking-wide underline decoration-rose-300">Entitlements-Safe</h5>
+            <p class="text-sm text-rose-800 leading-relaxed font-medium italic underline decoration-rose-200">Our resolvers are natively integrated with the <strong>Federated Permission Engine</strong>, automatically filtering objects based on the user's active Realm Role.</p>
+        </div>
+        <div class="p-10 bg-slate-900 rounded-[3rem] border border-slate-800 shadow-xl border-b-[1.5rem] border-b-rose-700">
+            <h5 class="font-black text-rose-400 mb-2 uppercase text-xs tracking-widest italic tracking-wide">Complex Relations</h5>
+            <p class="text-indigo-100/70 leading-relaxed font-medium italic">Traverse the entire graph with deep parent-child relationships, all resolved efficiently through our <strong>Eager Loading</strong> repository layer.</p>
+        </div>
     </div>
 
-    <pre><code class="language-graphql"># Example: Querying Multiple Data Models (GORM Relational Mapping Handles JOINs)
+    <!-- The Query Masterclass Section -->
+    <section class="mb-20">
+        <h2 class="text-3xl font-black text-slate-900 mb-10 tracking-tight italic text-center uppercase tracking-[0.1em]">The Graph Masterclass</h2>
+        
+        <div class="bg-slate-950 rounded-[3rem] p-12 text-white shadow-2xl relative overflow-hidden flex flex-col items-center group transition-all duration-300 hover:scale-[1.01]">
+            <div class="w-full text-left bg-slate-900/50 rounded-3xl p-8 border border-white/5 backdrop-blur-sm shadow-lg shadow-black/20">
+                <pre class="text-rose-300 font-mono text-sm leading-8 whitespace-pre italic">
+<span class="text-slate-500">// Fetching Federated {{capitalize (defaultStr (lookup entities "0.name") "Entity")}} with Service History</span>
 query {
-  get{{capitalize (defaultStr (lookup entities "0.name") "Entity")}}(id: 1) {
+  {{toLowerCase (defaultStr (lookup entities "0.name") "entity")}}s {
     id
-    {{#if entities.length}}
-      {{#if entities.[0].fields.length}}
-        {{entities.[0].fields.[0].name}}
-      {{/if}}
-    {{/if}}
-  }
-}</code></pre>
-</section>
-
-<section class="mb-10">
-    <h2 class="text-2xl font-bold text-gray-800 mb-4 border-b pb-2">Working with Frontend Libraries</h2>
-    <p class="mb-4">Here is how to seamlessly execute your generated queries inside modern JavaScript frameworks using <code>fetch</code>.</p>
-    
-    <pre><code class="language-javascript">const fetchEntity = async () => {
-  const query = \`
-    query {
-      list{{capitalize (defaultStr (lookup entities "0.name") "Entity")}}s(page: 1, size: 5) {
-        id
-        {{#if entities.length}}{{#if entities.[0].fields.length}}{{entities.[0].fields.[0].name}}{{/if}}{{/if}}
-      }
+    make
+    history {
+      date
+      notes
     }
-  \`;
+  }
+}
+                </pre>
+            </div>
+        </div>
+    </section>
 
-  const response = await fetch('http://localhost:8080/graphql', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'Authorization': 'Bearer YOUR_JWT'
-    },
-    body: JSON.stringify({ query })
-  });
-  
-  const { data } = await response.json();
-  console.log('Result array:', data);
-};</code></pre>
-</section>
+    <!-- Federated Resolver Hook -->
+    <section class="mb-20">
+        <div class="bg-gradient-to-tr from-rose-950 via-rose-900 to-slate-950 border border-rose-800/50 rounded-[3rem] p-16 text-white text-center shadow-2xl relative overflow-hidden group">
+            <h2 class="text-4xl font-black mb-6 tracking-tight italic underline decoration-rose-500 underline-offset-8">Universal Graph Coverage</h2>
+            <p class="text-rose-100 text-lg mb-10 max-w-2xl mx-auto leading-relaxed italic font-medium">
+                Every entity, enum, and relationship you define in GDL is automatically exported to the GraphQL engine. <strong>Query what you need, exactly how you need it.</strong>
+            </p>
+            <div class="flex flex-col md:flex-row gap-6 justify-center">
+                <div class="px-8 py-4 bg-white/10 rounded-3xl border border-white/10 flex flex-col items-center hover:bg-white/20 transition-all duration-300 cursor-default shadow-md group-hover:scale-110">
+                    <span class="text-rose-400 font-black text-2xl uppercase italic font-mono font-serif mt-2 italic tracking-tighter">Automatic Resolvers</span>
+                    <span class="text-[0.6rem] text-white/50 tracking-[0.3em] font-bold uppercase mt-2">Zero Boilerplate</span>
+                </div>
+            </div>
+        </div>
+    </section>
+</div>