Skip to content

Commit 0a25f6f

Browse files
khadnikhadni
authored
add CRE Templates Hub (#3458)
1 parent 773b72f commit 0a25f6f

33 files changed

Lines changed: 4950 additions & 38 deletions

‎public/images/cre-templates/aws-icon.webp‎

5.27 KB
Loading

‎public/images/cre-templates/card-strip.png‎

44.1 KB
Loading

‎public/images/cre-templates/chainlink-logo-mark.png‎

759 Bytes
Loading

‎public/images/cre-templates/featured-template.png‎

504 KB
Loading

‎public/images/cre-templates/hero-pattern.webp‎

157 KB
Loading

‎public/images/cre-templates/single-template-hero-bg.png‎

6.09 MB
Loading

‎public/images/cre-templates/templates/aws-architecture.png‎

167 KB
Loading

‎public/images/cre-templates/templates/x402-minimal-system-flow.webp‎

29.4 KB
Loading

‎src/components/CRETemplate/CRETemplate.astro‎

Lines changed: 530 additions & 0 deletions
Large diffs are not rendered by default.

‎src/components/CRETemplate/CRETemplateOverview.astro‎

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
---
2+
import { CRETemplatesFrontmatter } from "~/content.config.ts"
3+
4+
interface Props {
5+
frontmatter: CRETemplatesFrontmatter
6+
templateSlug: string
7+
}
8+
const { frontmatter, templateSlug } = Astro.props
9+
---
10+
11+
<div class="hero-content">
12+
<div class="hero-text">
13+
<!-- Author Badge -->
14+
<div class="author-badge">
15+
{
16+
frontmatter.author === "Chainlink Labs" ? (
17+
<img src="/images/cre-templates/chainlink-logo-mark.png" alt="Chainlink" class="chainlink-logo" />
18+
) : frontmatter.author === "AWS" ? (
19+
<img src="/images/cre-templates/aws-icon.webp" alt="AWS" class="chainlink-logo" />
20+
) : null
21+
}
22+
CREATED BY {frontmatter.author.toUpperCase()}
23+
</div>
24+
25+
<!-- Title -->
26+
<h1 class="title">{frontmatter.title}</h1>
27+
28+
<!-- Description -->
29+
<p class="description">{frontmatter.description}</p>
30+
31+
<!-- Get the template section (hidden until CLI is available) -->
32+
<div class="get-template" style="display: none;">
33+
<span class="get-template-label">Get the template</span>
34+
<div class="template-actions">
35+
<div class="command-box">
36+
<code style="color: #fff !important;">cre init --template={templateSlug}</code>
37+
<button class="copy-btn" data-command={`cre init --template=${templateSlug}`} title="Copy command">
38+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
39+
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
40+
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
41+
</svg>
42+
</button>
43+
</div>
44+
</div>
45+
</div>
46+
47+
<!-- GitHub button -->
48+
<div class="github-buttons">
49+
<a href={frontmatter.githubUrl} class="github-btn" target="_blank" rel="noopener noreferrer">
50+
<svg class="github-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
51+
<path
52+
d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
53+
></path>
54+
</svg>
55+
View on GitHub
56+
</a>
57+
</div>
58+
</div>
59+
</div>
60+
61+
<script>
62+
document.addEventListener("DOMContentLoaded", () => {
63+
const copyBtns = document.querySelectorAll<HTMLButtonElement>(".copy-btn")
64+
copyBtns.forEach((btn) => {
65+
btn.addEventListener("click", async () => {
66+
const command = btn.dataset.command
67+
if (command) {
68+
await navigator.clipboard.writeText(command)
69+
btn.classList.add("copied")
70+
setTimeout(() => btn.classList.remove("copied"), 2000)
71+
}
72+
})
73+
})
74+
})
75+
</script>
76+
77+
<style>
78+
.hero-content {
79+
display: flex;
80+
flex-direction: column;
81+
gap: var(--space-8x);
82+
position: relative;
83+
}
84+
85+
.hero-text {
86+
flex: 1;
87+
position: relative;
88+
z-index: 2;
89+
}
90+
91+
.author-badge {
92+
display: inline-flex;
93+
align-items: center;
94+
gap: 6px;
95+
font-size: 11px;
96+
font-weight: 600;
97+
color: #5a6175;
98+
letter-spacing: 0.5px;
99+
margin-bottom: var(--space-4x);
100+
}
101+
102+
.chainlink-logo {
103+
width: 16px;
104+
height: 16px;
105+
object-fit: contain;
106+
}
107+
108+
.title {
109+
font-size: 28px;
110+
font-weight: 700;
111+
color: #0b101c;
112+
line-height: 1.2;
113+
margin: 0 0 var(--space-4x) 0;
114+
}
115+
116+
.description {
117+
font-size: 15px;
118+
color: #5a6175;
119+
line-height: 1.6;
120+
margin: 0 0 var(--space-6x) 0;
121+
max-width: 500px;
122+
}
123+
124+
/* Hidden until CLI is available — remove style="display: none;" from .get-template to re-enable */
125+
.get-template {
126+
display: flex;
127+
flex-direction: column;
128+
gap: var(--space-3x);
129+
}
130+
131+
.get-template-label {
132+
font-size: 13px;
133+
font-weight: 500;
134+
color: #5a6175;
135+
}
136+
137+
.template-actions {
138+
display: flex;
139+
flex-wrap: wrap;
140+
align-items: center;
141+
gap: var(--space-3x);
142+
}
143+
144+
.command-box {
145+
display: inline-flex;
146+
align-items: center;
147+
gap: var(--space-3x);
148+
padding: 12px 18px;
149+
background: #1e293b;
150+
border-radius: 6px;
151+
font-family: var(--font-mono, monospace);
152+
}
153+
154+
.command-box code,
155+
.command-box :global(code) {
156+
font-size: 13px !important;
157+
color: #ffffff !important;
158+
background: none !important;
159+
background-color: transparent !important;
160+
padding: 0 !important;
161+
border: none !important;
162+
font-weight: 600 !important;
163+
opacity: 1 !important;
164+
border-radius: 0 !important;
165+
letter-spacing: 0.02em !important;
166+
}
167+
168+
.copy-btn {
169+
display: flex;
170+
align-items: center;
171+
justify-content: center;
172+
padding: 0;
173+
background: none;
174+
border: none;
175+
cursor: pointer;
176+
color: rgba(255, 255, 255, 0.7);
177+
transition: color 0.2s ease;
178+
}
179+
180+
.copy-btn:hover {
181+
color: white;
182+
}
183+
184+
.copy-btn.copied {
185+
color: #4ade80;
186+
}
187+
188+
.github-buttons {
189+
display: flex;
190+
gap: var(--space-2x);
191+
}
192+
193+
.github-btn {
194+
display: inline-flex;
195+
align-items: center;
196+
justify-content: center;
197+
gap: 10px;
198+
padding: 12px 28px;
199+
background: #0847f7;
200+
color: white;
201+
font-size: 14px;
202+
font-weight: 600;
203+
border: 1px solid #0847f7;
204+
border-radius: 4px;
205+
text-decoration: none;
206+
transition: all 0.2s ease;
207+
min-width: 120px;
208+
}
209+
210+
.github-btn:hover {
211+
background: #0639c7;
212+
border-color: #0639c7;
213+
}
214+
215+
.github-icon {
216+
color: white;
217+
}
218+
219+
@media (min-width: 50em) {
220+
.hero-content {
221+
flex-direction: row;
222+
align-items: flex-start;
223+
justify-content: space-between;
224+
}
225+
226+
.hero-text {
227+
max-width: 55%;
228+
}
229+
230+
.title {
231+
font-size: 36px;
232+
}
233+
234+
.description {
235+
font-size: 16px;
236+
}
237+
}
238+
239+
@media (min-width: 72em) {
240+
.title {
241+
font-size: 40px;
242+
}
243+
}
244+
</style>

0 commit comments

Comments
 (0)