json-renderers 1.17.3 → 1.18.4

package/docs/index.html

@@ -98,6 +98,10 @@
       </div>
 
       <div class="flex items-center gap-2.5">
+        <a href="subDoc/index.html"
+          class="px-3.5 py-1.5 text-xs font-semibold rounded-lg bg-purple-600 hover:bg-purple-500 text-white transition flex items-center gap-1.5 shadow-sm shadow-purple-600/30">
+          <span>📚</span> Sub Docs
+        </a>
         <a href="aboutSelect.html"
           class="px-3.5 py-1.5 text-xs font-semibold rounded-lg bg-cyan-600 hover:bg-cyan-500 text-white transition flex items-center gap-1.5 shadow-sm shadow-cyan-600/30">
           <span>▣</span> About Select Guide
@@ -149,6 +153,10 @@
       </p>
 
       <div class="flex flex-wrap items-center justify-center gap-3 pt-2">
+        <a href="subDoc/index.html"
+          class="px-5 py-2.5 rounded-xl bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-white font-semibold text-xs sm:text-sm transition flex items-center gap-2 shadow-lg shadow-purple-600/25">
+          <span>📚</span> Sub Docs (Simple &amp; Advanced)
+        </a>
         <a href="aboutSelect.html"
           class="px-5 py-2.5 rounded-xl bg-gradient-to-r from-cyan-600 to-teal-600 hover:from-cyan-500 hover:to-teal-500 text-white font-semibold text-xs sm:text-sm transition flex items-center gap-2 shadow-lg shadow-cyan-600/25">
           <span>▣</span> Select Guide (CDN &amp; KS)
@@ -509,7 +517,7 @@
           <span class="text-xs uppercase font-mono tracking-wider text-emerald-400">Browser Demos</span>
           <h3 class="text-xl sm:text-2xl font-bold text-white tracking-tight">Included Verification Samples</h3>
         </div>
-        <a href="abouutTable.html"
+        <a href="aboutTable.html"
           class="inline-flex items-center gap-1.5 text-xs font-semibold text-emerald-400 hover:text-emerald-300 font-mono transition">
           <span>📖</span> Read Complete Table Guide (CDN &amp; window.ks) &rarr;
         </a>
@@ -555,6 +563,35 @@
         </a>
       </div>
 
+      <!-- Spotlight Banner for SubDoc Guides -->
+      <div
+        class="glass-panel p-5 rounded-2xl border border-purple-500/30 bg-gradient-to-r from-purple-950/40 via-slate-900 to-indigo-950/40 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+        <div class="space-y-1">
+          <div
+            class="inline-flex items-center gap-2 px-2.5 py-0.5 rounded-full bg-purple-500/20 text-purple-300 border border-purple-500/30 text-xs font-mono">
+            SubDoc Directory &bull; Two Complementary Tracks
+          </div>
+          <h4 class="text-base font-bold text-white">Simple House-Building Story vs In-Depth Architectural Pipeline</h4>
+          <p class="text-xs text-slate-400 max-w-2xl leading-relaxed">
+            Choose between the 3-minute conceptual mental model (<code class="text-emerald-300 font-mono">simpleDoc.html</code>) or the comprehensive 15-minute runtime specification and build guide (<code class="text-purple-300 font-mono">advanceDoc.html</code>).
+          </p>
+        </div>
+        <div class="flex items-center gap-2 flex-wrap">
+          <a href="subDoc/index.html"
+            class="px-3.5 py-2 rounded-xl bg-purple-600 hover:bg-purple-500 text-white font-semibold text-xs transition whitespace-nowrap shadow-md shadow-purple-600/30 flex items-center gap-1.5">
+            <span>📚</span> SubDoc Hub &rarr;
+          </a>
+          <a href="subDoc/simpleDoc.html"
+            class="px-3.5 py-2 rounded-xl bg-emerald-600/30 hover:bg-emerald-600/50 text-emerald-300 border border-emerald-500/30 font-semibold text-xs transition whitespace-nowrap flex items-center gap-1.5">
+            <span>🌱</span> Simple Guide
+          </a>
+          <a href="subDoc/advanceDoc.html"
+            class="px-3.5 py-2 rounded-xl bg-purple-600/30 hover:bg-purple-600/50 text-purple-300 border border-purple-500/30 font-semibold text-xs transition whitespace-nowrap flex items-center gap-1.5">
+            <span>🚀</span> Advanced Guide
+          </a>
+        </div>
+      </div>
+
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 
         <a href="../samples/select/byCdn/index.html"
@@ -655,6 +692,54 @@
           <div class="text-[11px] font-mono text-emerald-400/80">docs/table/index.html</div>
         </a>
 
+        <!-- SubDoc Hub Card -->
+        <a href="subDoc/index.html"
+          class="glass-panel p-5 rounded-2xl group hover:border-purple-500/50 transition flex flex-col justify-between border-dashed border-purple-500/40">
+          <div>
+            <div class="flex items-center justify-between mb-3">
+              <span class="text-xl">📚</span>
+              <span class="text-xs text-purple-400 font-mono group-hover:translate-x-1 transition">Open Hub &rarr;</span>
+            </div>
+            <h4 class="text-base font-bold text-white mb-1 group-hover:text-purple-300 transition">SubDoc Guide Hub</h4>
+            <p class="text-xs text-slate-400 leading-relaxed mb-4">
+              Central guide directory comparing Simple vs Advanced guides with architecture matrices and quick links.
+            </p>
+          </div>
+          <div class="text-[11px] font-mono text-purple-400/80">docs/subDoc/index.html</div>
+        </a>
+
+        <!-- SubDoc Simple Guide Card -->
+        <a href="subDoc/simpleDoc.html"
+          class="glass-panel p-5 rounded-2xl group hover:border-emerald-500/50 transition flex flex-col justify-between">
+          <div>
+            <div class="flex items-center justify-between mb-3">
+              <span class="text-xl">🌱</span>
+              <span class="text-xs text-emerald-400 font-mono group-hover:translate-x-1 transition">Read Guide &rarr;</span>
+            </div>
+            <h4 class="text-base font-bold text-white mb-1 group-hover:text-emerald-300 transition">Simple Guide (House Story)</h4>
+            <p class="text-xs text-slate-400 leading-relaxed mb-4">
+              3-minute conceptual guide: Architect, Construction Worker, and Site Manager mounting student data.
+            </p>
+          </div>
+          <div class="text-[11px] font-mono text-slate-500">docs/subDoc/simpleDoc.html</div>
+        </a>
+
+        <!-- SubDoc Advanced Guide Card -->
+        <a href="subDoc/advanceDoc.html"
+          class="glass-panel p-5 rounded-2xl group hover:border-purple-500/50 transition flex flex-col justify-between">
+          <div>
+            <div class="flex items-center justify-between mb-3">
+              <span class="text-xl">🚀</span>
+              <span class="text-xs text-purple-400 font-mono group-hover:translate-x-1 transition">Read Reference &rarr;</span>
+            </div>
+            <h4 class="text-base font-bold text-white mb-1 group-hover:text-purple-300 transition">Advanced Documentation</h4>
+            <p class="text-xs text-slate-400 leading-relaxed mb-4">
+              Deep dive reference: multi-stage pipeline, API options, Vite bundling, and filterable section search.
+            </p>
+          </div>
+          <div class="text-[11px] font-mono text-slate-500">docs/subDoc/advanceDoc.html</div>
+        </a>
+
       </div>
     </section>
 
@@ -687,7 +772,11 @@
       <div>
         <strong class="text-slate-400">json-renderers</strong> &bull; KeshavSoft &bull; MIT License
       </div>
-      <div class="flex items-center gap-4 text-slate-400">
+      <div class="flex items-center gap-4 text-slate-400 flex-wrap">
+        <a href="subDoc/index.html" class="hover:text-purple-400 transition font-medium">SubDoc Hub</a>
+        <a href="subDoc/simpleDoc.html" class="hover:text-emerald-400 transition">Simple Guide</a>
+        <a href="subDoc/advanceDoc.html" class="hover:text-purple-400 transition">Advanced Guide</a>
+        <span class="text-slate-700 hidden sm:inline">|</span>
         <a href="https://github.com/keshavsoft/json-renderers" class="hover:text-white transition">json-renderers</a>
         <a href="https://github.com/keshavsoft/json-renderers-build"
           class="hover:text-white transition">json-renderers-build</a>