Skip to content

Commit 3d5e040

Browse files
srikxciphersrikxcipher
authored
feat(catalog): introduce Templates section in index.html (#346)
* feat(catalog): introduce Templates section in index.html Replaces the 'Templates are coming soon' placeholder with a populated catalog of the 5 v1 blueprint templates, organized by tier: Foundational - cert-manager (security) - compute (compute) - gateway-api-crd (network) Leaf - observability (observability) - ingress (network) Each card surfaces displayName, category chip, resource count, description, requires: list, and the exact raptor get bp-templates command. CSS matches the existing cloud-card design system (same radii, surface colors, hover treatment, JetBrains Mono for the command snippets). Category chips reuse existing color tokens (--color-aws / --color-azure / --color-success / --accent-primary). Drops the 'Coming Soon' badge from the Templates tab button. No JS changes — the existing switchTab logic continues to work. * feat(catalog): match project-types pattern (Praxis + Raptor CLI) + rename tiers Two refinements on the Templates panel after preview review: * Replaced the simple intro paragraph with the same Praxis AI + Raptor CLI block pattern used for project-types. Reuses the existing .detail-section / .section-label / .praxis-label / .code-block / .copy-btn / .code-sublabel classes so the styling is pixel-identical to the AWS detail panel. Embedded the Praxis SVG inline (separate gradient id 'praxis-g-tpl' to avoid clashing with the JS-injected one). Ask Praxis AI: 'Fetch the observability blueprint template and apply it to my project.' with the equivalent raptor commands. Raptor CLI: 4 copy-buttoned snippets covering list, fetch, --save-to, and --details. * Renamed the tier sections from 'Foundational / Leaf' to 'Foundations / Stacks' (symmetric plurals, no dependency-graph jargon on a user-facing catalog page). Per-card tier badges updated accordingly: 'foundational' -> 'foundation', 'leaf' -> 'stack'. * Dropped the now-unused .templates-intro CSS block. * update praxis ai web ref
1 parent 8f0d2d4 commit 3d5e040

1 file changed

Lines changed: 301 additions & 15 deletions

File tree

‎index.html‎

Lines changed: 301 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -630,6 +630,152 @@
630630
max-width: 400px;
631631
}
632632

633+
/* Templates panel — populated state */
634+
.templates-section-label {
635+
font-size: 11px;
636+
font-weight: 700;
637+
letter-spacing: 0.08em;
638+
text-transform: uppercase;
639+
color: var(--text-tertiary);
640+
margin: 28px 0 12px;
641+
}
642+
643+
.template-grid {
644+
display: grid;
645+
grid-template-columns: repeat(2, 1fr);
646+
gap: 20px;
647+
}
648+
649+
.template-card {
650+
background: var(--bg-surface);
651+
border: 1px solid var(--border-default);
652+
border-radius: var(--radius-lg);
653+
padding: 22px;
654+
display: flex;
655+
flex-direction: column;
656+
gap: 14px;
657+
transition:
658+
transform 200ms var(--ease-default),
659+
border-color 200ms var(--ease-default),
660+
box-shadow 200ms var(--ease-default),
661+
background 200ms var(--ease-default);
662+
box-shadow: var(--shadow-card);
663+
}
664+
665+
.template-card:hover {
666+
border-color: var(--border-hover);
667+
background: var(--bg-surface-hover);
668+
box-shadow: var(--shadow-card-hover);
669+
transform: translateY(-2px);
670+
}
671+
672+
.template-card-head {
673+
display: flex;
674+
align-items: center;
675+
justify-content: space-between;
676+
gap: 10px;
677+
}
678+
679+
.template-cat-chip {
680+
font-size: 10.5px;
681+
font-weight: 700;
682+
letter-spacing: 0.08em;
683+
text-transform: uppercase;
684+
padding: 4px 10px;
685+
border-radius: 999px;
686+
white-space: nowrap;
687+
}
688+
689+
.template-cat-chip.cat-observability { background: var(--color-success-muted); color: var(--color-success); }
690+
.template-cat-chip.cat-network { background: var(--color-azure-muted); color: var(--color-azure); }
691+
.template-cat-chip.cat-compute { background: var(--color-aws-muted); color: var(--color-aws); }
692+
.template-cat-chip.cat-security { background: var(--accent-primary-muted); color: var(--accent-primary); }
693+
694+
.template-resource-count {
695+
font-family: 'JetBrains Mono', ui-monospace, monospace;
696+
font-size: 12px;
697+
font-weight: 600;
698+
color: var(--text-tertiary);
699+
}
700+
701+
.template-card-name {
702+
font-size: 18px;
703+
font-weight: 700;
704+
line-height: 1.3;
705+
letter-spacing: -0.005em;
706+
color: var(--text-primary);
707+
}
708+
709+
.template-card-name .tier-badge {
710+
display: inline-block;
711+
margin-left: 8px;
712+
vertical-align: middle;
713+
font-size: 10px;
714+
font-weight: 700;
715+
letter-spacing: 0.06em;
716+
text-transform: uppercase;
717+
padding: 2px 8px;
718+
border-radius: 4px;
719+
background: var(--bg-input);
720+
color: var(--text-secondary);
721+
border: 1px solid var(--border-default);
722+
}
723+
724+
.template-card-desc {
725+
font-size: 13.5px;
726+
font-weight: 400;
727+
line-height: 1.55;
728+
color: var(--text-secondary);
729+
}
730+
731+
.template-requires {
732+
font-size: 12px;
733+
display: flex;
734+
flex-direction: column;
735+
gap: 4px;
736+
}
737+
738+
.template-requires .req-label {
739+
font-weight: 600;
740+
letter-spacing: 0.04em;
741+
text-transform: uppercase;
742+
color: var(--text-tertiary);
743+
font-size: 10.5px;
744+
}
745+
746+
.template-requires .req-item {
747+
font-family: 'JetBrains Mono', ui-monospace, monospace;
748+
font-size: 11.5px;
749+
color: var(--text-code);
750+
background: var(--bg-code);
751+
padding: 3px 8px;
752+
border-radius: 4px;
753+
border: 1px solid var(--border-default);
754+
display: inline-block;
755+
margin-right: 6px;
756+
margin-top: 4px;
757+
}
758+
759+
.template-cmd {
760+
margin-top: auto;
761+
font-family: 'JetBrains Mono', ui-monospace, monospace;
762+
font-size: 12px;
763+
background: var(--bg-code);
764+
border: 1px solid var(--border-default);
765+
border-radius: var(--radius-sm);
766+
padding: 10px 12px;
767+
color: var(--text-code);
768+
box-shadow: var(--shadow-code);
769+
overflow-x: auto;
770+
white-space: nowrap;
771+
}
772+
773+
.template-cmd .cmd-prompt {
774+
color: var(--text-tertiary);
775+
user-select: none;
776+
margin-right: 6px;
777+
}
778+
633779
/* Footer */
634780
.footer {
635781
padding: 48px 0 32px;
@@ -741,7 +887,7 @@
741887
<nav class="tab-bar" role="tablist" aria-label="Catalog sections">
742888
<div class="tab-container">
743889
<button class="tab-btn active" role="tab" aria-selected="true" aria-controls="panel-project-types" id="tab-project-types" onclick="switchTab('project-types')">Project Types</button>
744-
<button class="tab-btn" role="tab" aria-selected="false" aria-controls="panel-templates" id="tab-templates" onclick="switchTab('templates')">Templates <span class="coming-soon-badge" aria-label="coming soon">Coming Soon</span></button>
890+
<button class="tab-btn" role="tab" aria-selected="false" aria-controls="panel-templates" id="tab-templates" onclick="switchTab('templates')">Templates</button>
745891
</div>
746892
</nav>
747893

@@ -803,28 +949,168 @@
803949

804950
<!-- Templates Panel -->
805951
<div class="tab-panel" id="panel-templates" role="tabpanel" aria-labelledby="tab-templates">
806-
<div class="templates-placeholder">
807-
<svg class="placeholder-icon" width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
808-
<rect x="10" y="10" width="44" height="44" rx="8" stroke="#645DF6" stroke-width="2" opacity="0.3"/>
809-
<rect x="66" y="10" width="44" height="44" rx="8" stroke="#645DF6" stroke-width="2" opacity="0.2"/>
810-
<rect x="10" y="66" width="44" height="44" rx="8" stroke="#645DF6" stroke-width="2" opacity="0.2"/>
811-
<rect x="66" y="66" width="44" height="44" rx="8" stroke="#645DF6" stroke-width="2" opacity="0.15"/>
812-
<path d="M32 28v8M28 32h8" stroke="#645DF6" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
813-
<path d="M88 28v8M84 32h8" stroke="#645DF6" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
814-
<path d="M32 84v8M28 88h8" stroke="#645DF6" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
815-
<path d="M88 84v8M84 88h8" stroke="#645DF6" stroke-width="2" stroke-linecap="round" opacity="0.2"/>
816-
</svg>
817-
<h2>Templates are coming soon</h2>
818-
<p>Pre-configured environment stacks for common deployment patterns like web apps, data pipelines, and API gateways.</p>
952+
953+
<div class="detail-section">
954+
<div class="section-label praxis-label"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="praxis-g-tpl" x1="2" y1="1" x2="22" y2="23" gradientUnits="userSpaceOnUse"><stop stop-color="#60a5fa"/><stop offset="0.5" stop-color="#a78bfa"/><stop offset="1" stop-color="#f472b6"/></linearGradient></defs><path d="M12.2112 1C13.5223 1.01464 14.4798 1.92647 15.0774 2.73047C15.6119 3.44961 15.9359 4.18521 16.0433 4.44727L16.0765 4.5293C16.1698 4.7717 16.2426 5.01313 16.3011 5.25098C16.4977 5.20755 16.7015 5.1735 16.9114 5.14941C17.0102 5.1382 17.9534 5.04241 19.014 5.21289C20.049 5.37928 21.3735 5.82994 21.9837 7.06055C22.5662 8.23558 22.1887 9.502 21.7434 10.3994C21.3735 11.145 20.9071 11.7341 20.6946 11.9863C20.9378 12.2802 21.3502 12.8177 21.6917 13.4775C22.1735 14.4085 22.5996 15.7415 21.9729 16.9639C21.3745 18.1307 20.1311 18.5801 19.1448 18.7559C18.1372 18.9354 17.2332 18.8604 17.0891 18.8467C16.8183 18.8208 16.5586 18.7753 16.3099 18.7178C16.2503 18.9658 16.1748 19.2179 16.0774 19.4707C16.0253 19.6055 15.6879 20.4482 15.0774 21.2695C14.4798 22.0735 13.5231 22.9853 12.2122 23H12.1477C10.807 22.9845 9.8264 22.0242 9.21806 21.1904C8.58436 20.3219 8.24076 19.4372 8.20634 19.3447C8.13309 19.1481 8.072 18.9525 8.02177 18.7588C7.78339 18.8147 7.53509 18.8599 7.27665 18.8867C7.1329 18.9016 6.22929 18.9838 5.22001 18.8125C4.24773 18.6474 3.02441 18.2194 2.40653 17.0977L2.37723 17.0439C1.74037 15.8267 2.15598 14.4897 2.63016 13.5547C2.96676 12.8911 3.3744 12.3489 3.61454 12.0537C3.39867 11.8018 2.93012 11.2164 2.55497 10.4756C2.10244 9.58197 1.71414 8.3192 2.28641 7.13965L2.31571 7.08203C2.9285 5.88928 4.22484 5.43956 5.24247 5.26758C6.16968 5.11092 7.00837 5.15941 7.26884 5.18066L7.34403 5.1875C7.57294 5.21172 7.794 5.24857 8.00712 5.2959C8.05984 5.08398 8.12567 4.8691 8.20634 4.65332C8.24327 4.55436 8.58601 3.67349 9.21708 2.80859C9.8254 1.97489 10.8061 1.01557 12.1468 1H12.2112Z" fill="url(#praxis-g-tpl)"/></svg> Ask Praxis AI</div>
955+
<div class="code-block-wrapper">
956+
<pre class="code-block praxis-code">Fetch the observability blueprint template and apply it to my project.
957+
958+
raptor get bp-templates observability
959+
raptor apply -f ./bp-templates/observability -p my-project</pre>
960+
<button class="copy-btn" aria-label="Copy Praxis AI prompt to clipboard" onclick="copyCode(this, 'Fetch the observability blueprint template and apply it to my project.\n\nraptor get bp-templates observability\nraptor apply -f ./bp-templates/observability -p my-project')">Copy</button>
961+
</div>
962+
</div>
963+
964+
<div class="detail-section">
965+
<div class="section-label">Raptor CLI</div>
966+
<div class="code-block-wrapper">
967+
<pre class="code-block">raptor get bp-templates</pre>
968+
<button class="copy-btn" aria-label="Copy raptor get bp-templates to clipboard" onclick="copyCode(this, 'raptor get bp-templates')">Copy</button>
969+
</div>
970+
<div class="code-sublabel">Fetch a specific template:</div>
971+
<div class="code-block-wrapper">
972+
<pre class="code-block">raptor get bp-templates observability</pre>
973+
<button class="copy-btn" aria-label="Copy fetch command to clipboard" onclick="copyCode(this, 'raptor get bp-templates observability')">Copy</button>
974+
</div>
975+
<div class="code-sublabel">Custom save location:</div>
976+
<div class="code-block-wrapper">
977+
<pre class="code-block">raptor get bp-templates observability --save-to ./obs/</pre>
978+
<button class="copy-btn" aria-label="Copy fetch-with-save-to command to clipboard" onclick="copyCode(this, 'raptor get bp-templates observability --save-to ./obs/')">Copy</button>
979+
</div>
980+
<div class="code-sublabel">Inspect metadata without downloading:</div>
981+
<div class="code-block-wrapper">
982+
<pre class="code-block">raptor get bp-templates observability --details</pre>
983+
<button class="copy-btn" aria-label="Copy details command to clipboard" onclick="copyCode(this, 'raptor get bp-templates observability --details')">Copy</button>
984+
</div>
985+
</div>
986+
987+
<div class="templates-section-label">Foundations</div>
988+
<div class="template-grid">
989+
990+
<article class="template-card">
991+
<div class="template-card-head">
992+
<span class="template-cat-chip cat-security">security</span>
993+
<span class="template-resource-count">1 resource</span>
994+
</div>
995+
<h3 class="template-card-name">Cert-Manager <span class="tier-badge">foundation</span></h3>
996+
<p class="template-card-desc">
997+
TLS certificate management via cert-manager. Apply this first if either
998+
observability or ingress needs cert-manager and your project doesn't
999+
already have one.
1000+
</p>
1001+
<div class="template-requires">
1002+
<span class="req-label">Requires</span>
1003+
<div>
1004+
<span class="req-item">kubernetes_cluster/cluster</span>
1005+
<span class="req-item">kubernetes_node_pool/nodepool</span>
1006+
</div>
1007+
</div>
1008+
<div class="template-cmd"><span class="cmd-prompt">$</span>raptor get bp-templates cert-manager</div>
1009+
</article>
1010+
1011+
<article class="template-card">
1012+
<div class="template-card-head">
1013+
<span class="template-cat-chip cat-compute">compute</span>
1014+
<span class="template-resource-count">2 resources</span>
1015+
</div>
1016+
<h3 class="template-card-name">EKS Compute Add-ons <span class="tier-badge">foundation</span></h3>
1017+
<p class="template-card-desc">
1018+
Karpenter controller + Karpenter-managed node pool on top of an
1019+
existing EKS cluster. Adds cost-efficient, just-in-time node
1020+
provisioning to a cluster your project already has.
1021+
</p>
1022+
<div class="template-requires">
1023+
<span class="req-label">Requires</span>
1024+
<div>
1025+
<span class="req-item">cloud_account/cloud</span>
1026+
<span class="req-item">network/network</span>
1027+
<span class="req-item">kubernetes_cluster/cluster</span>
1028+
</div>
1029+
</div>
1030+
<div class="template-cmd"><span class="cmd-prompt">$</span>raptor get bp-templates compute</div>
1031+
</article>
1032+
1033+
<article class="template-card">
1034+
<div class="template-card-head">
1035+
<span class="template-cat-chip cat-network">network</span>
1036+
<span class="template-resource-count">1 resource</span>
1037+
</div>
1038+
<h3 class="template-card-name">Gateway API CRDs <span class="tier-badge">foundation</span></h3>
1039+
<p class="template-card-desc">
1040+
Installs the Kubernetes Gateway API CustomResourceDefinitions.
1041+
Required by the ingress template; apply first if your project
1042+
doesn't already have a gateway_api_crd resource.
1043+
</p>
1044+
<div class="template-requires">
1045+
<span class="req-label">Requires</span>
1046+
<div>
1047+
<span class="req-item">kubernetes_cluster/cluster</span>
1048+
<span class="req-item">kubernetes_node_pool/nodepool</span>
1049+
</div>
1050+
</div>
1051+
<div class="template-cmd"><span class="cmd-prompt">$</span>raptor get bp-templates gateway-api-crd</div>
1052+
</article>
1053+
8191054
</div>
1055+
1056+
<div class="templates-section-label">Stacks</div>
1057+
<div class="template-grid">
1058+
1059+
<article class="template-card">
1060+
<div class="template-card-head">
1061+
<span class="template-cat-chip cat-observability">observability</span>
1062+
<span class="template-resource-count">3 resources</span>
1063+
</div>
1064+
<h3 class="template-card-name">Observability Stack <span class="tier-badge">stack</span></h3>
1065+
<p class="template-card-desc">
1066+
Prometheus + Grafana dashboards + alert rules. Baseline metrics and
1067+
alerting stack on top of an existing Kubernetes cluster. Ships with
1068+
5 baseline alert rules and a kube-state-metrics dashboard.
1069+
</p>
1070+
<div class="template-requires">
1071+
<span class="req-label">Requires</span>
1072+
<div>
1073+
<span class="req-item">kubernetes_cluster/cluster</span>
1074+
<span class="req-item">kubernetes_node_pool/nodepool</span>
1075+
</div>
1076+
</div>
1077+
<div class="template-cmd"><span class="cmd-prompt">$</span>raptor get bp-templates observability</div>
1078+
</article>
1079+
1080+
<article class="template-card">
1081+
<div class="template-card-head">
1082+
<span class="template-cat-chip cat-network">network</span>
1083+
<span class="template-resource-count">1 resource</span>
1084+
</div>
1085+
<h3 class="template-card-name">NGINX Gateway Fabric Ingress (AWS) <span class="tier-badge">stack</span></h3>
1086+
<p class="template-card-desc">
1087+
TLS-terminated Gateway API based ingress for AWS / EKS. Uses the
1088+
AWS-specific ingress flavor. Apply the cert-manager and
1089+
gateway-api-crd templates first if your project doesn't already
1090+
have them.
1091+
</p>
1092+
<div class="template-requires">
1093+
<span class="req-label">Requires</span>
1094+
<div>
1095+
<span class="req-item">kubernetes_cluster/cluster</span>
1096+
<span class="req-item">kubernetes_node_pool/nodepool</span>
1097+
<span class="req-item">cert_manager/cert-manager</span>
1098+
<span class="req-item">gateway_api_crd/gateway-api-crd</span>
1099+
</div>
1100+
</div>
1101+
<div class="template-cmd"><span class="cmd-prompt">$</span>raptor get bp-templates ingress</div>
1102+
</article>
1103+
1104+
</div>
1105+
8201106
</div>
8211107

8221108
<!-- Footer -->
8231109
<footer class="footer">
8241110
<div class="footer-inner">
8251111
<span>Built with <a href="https://facets.cloud" target="_blank" rel="noopener">Facets.cloud</a></span>
8261112
<span class="footer-sep">|</span>
827-
<span>Powered by <a href="https://facets.cloud" target="_blank" rel="noopener">Praxis AI</a></span>
1113+
<span>Powered by <a href="https://www.askpraxis.ai" target="_blank" rel="noopener">Praxis AI</a></span>
8281114
</div>
8291115
</footer>
8301116

0 commit comments

Comments
 (0)