Skip to content

Commit 663bdf6

Browse files
brunoborgesCopilot
brunoborges
and
Copilot
committed
Add slug-template.html for generating detail pages
Mustache-style placeholders for all variable content: - {{title}}, {{summary}}, {{category}}, {{slug}}, {{difficulty}} - {{oldLabel}}, {{modernLabel}}, {{oldCode}}, {{modernCode}} - {{oldApproach}}, {{modernApproach}}, {{jdkVersion}} - {{explanation}}, {{support}} - {{#whyModernWins}} loop for why cards - {{#prev}}/{{#next}} conditional nav arrows - {{#related}} loop for related pattern cards - {{shareUrl}}, {{shareText}} for social links - {{categoryDisplay}} for human-readable category name Derived constants: 'How it works' heading, 'Available' badge, category display map (io→I/O, datetime→Date/Time, etc.) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent de70ad3 commit 663bdf6

File tree

1 file changed

+239
-0
lines changed

1 file changed

+239
-0
lines changed

‎slug-template.html‎

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>{{title}} | java.evolved</title>
7+
<meta name="description" content="{{summary}}">
8+
<meta name="robots" content="index, follow">
9+
<link rel="canonical" href="https://javaevolved.github.io/{{category}}/{{slug}}.html">
10+
<link rel="stylesheet" href="../styles.css">
11+
<link rel="icon" href="../favicon.svg" type="image/svg+xml">
12+
<link rel="manifest" href="../manifest.json">
13+
<meta name="theme-color" content="#f97316">
14+
<meta name="mobile-web-app-capable" content="yes">
15+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
16+
<meta name="apple-mobile-web-app-title" content="java.evolved">
17+
18+
<meta property="og:title" content="{{title}} | java.evolved">
19+
<meta property="og:description" content="{{summary}}">
20+
<meta property="og:url" content="https://javaevolved.github.io/{{category}}/{{slug}}.html">
21+
<meta property="og:type" content="article">
22+
<meta property="og:site_name" content="java.evolved">
23+
<meta property="og:locale" content="en_US">
24+
<meta property="og:image" content="https://javaevolved.github.io/images/social-card.png">
25+
<meta property="og:image:width" content="1200">
26+
<meta property="og:image:height" content="630">
27+
<meta property="og:image:type" content="image/png">
28+
29+
<meta name="twitter:card" content="summary_large_image">
30+
<meta name="twitter:title" content="{{title}} | java.evolved">
31+
<meta name="twitter:description" content="{{summary}}">
32+
<meta name="twitter:image" content="https://javaevolved.github.io/images/social-card.png">
33+
34+
<script type="application/ld+json">
35+
{
36+
"@context": "https://schema.org",
37+
"@type": "TechArticle",
38+
"headline": "{{title}}",
39+
"description": "{{summary}}",
40+
"url": "https://javaevolved.github.io/{{category}}/{{slug}}.html",
41+
"publisher": {
42+
"@type": "Organization",
43+
"name": "java.evolved",
44+
"url": "https://javaevolved.github.io"
45+
},
46+
"mainEntityOfPage": {
47+
"@type": "WebPage",
48+
"@id": "https://javaevolved.github.io/{{category}}/{{slug}}.html"
49+
}
50+
}
51+
</script>
52+
<script type="application/ld+json">
53+
{
54+
"@context": "https://schema.org",
55+
"@type": "BreadcrumbList",
56+
"itemListElement": [
57+
{
58+
"@type": "ListItem",
59+
"position": 1,
60+
"name": "Home",
61+
"item": "https://javaevolved.github.io/"
62+
},
63+
{
64+
"@type": "ListItem",
65+
"position": 2,
66+
"name": "{{categoryDisplay}}",
67+
"item": "https://javaevolved.github.io/?cat={{category}}"
68+
},
69+
{
70+
"@type": "ListItem",
71+
"position": 3,
72+
"name": "{{title}}"
73+
}
74+
]
75+
}
76+
</script>
77+
</head>
78+
<body data-page="single">
79+
<nav>
80+
<div class="nav-inner">
81+
<a href="/" class="logo">java.<span>evolved</span></a>
82+
<div class="nav-right">
83+
<a href="https://github.com/javaevolved/javaevolved.github.io" target="_blank" rel="noopener" class="github-link" aria-label="View on GitHub">
84+
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
85+
<circle cx="10" cy="10" r="9" fill="none" stroke="currentColor" stroke-width="1.5"/>
86+
<path d="M10 3C6.13 3 3 6.13 3 10c0 3.09 2 5.71 4.77 6.63.35.06.48-.15.48-.33v-1.16c-1.95.42-2.36-1.07-2.36-1.07-.32-.81-.78-1.03-.78-1.03-.64-.43.05-.42.05-.42.7.05 1.07.72 1.07.72.63 1.08 1.65.77 2.05.59.06-.46.24-.77.44-.95-1.57-.18-3.22-.78-3.22-3.48 0-.77.27-1.4.72-1.89-.07-.18-.31-.9.07-1.87 0 0 .59-.19 1.93.72.56-.16 1.16-.24 1.76-.24s1.2.08 1.76.24c1.34-.91 1.93-.72 1.93-.72.38.97.14 1.69.07 1.87.45.49.72 1.12.72 1.89 0 2.71-1.65 3.3-3.23 3.47.25.22.48.65.48 1.31v1.94c0 .19.13.4.48.33C15 15.71 17 13.09 17 10c0-3.87-3.13-7-7-7z"/>
87+
</svg>
88+
</a>
89+
<a href="/" class="back-link">← All patterns</a>
90+
91+
<div class="nav-arrows">
92+
{{#prev}}<a href="/{{prev}}.html" aria-label="Previous pattern">←</a>{{/prev}}
93+
{{#next}}<a href="/{{next}}.html" aria-label="Next pattern">→</a>{{/next}}
94+
</div>
95+
</div>
96+
</div>
97+
</nav>
98+
99+
<article class="article">
100+
<div class="breadcrumb">
101+
<a href="/">Home</a>
102+
<span class="sep">/</span>
103+
<a href="/?cat={{category}}">{{categoryDisplay}}</a>
104+
<span class="sep">/</span>
105+
<span>{{title}}</span>
106+
</div>
107+
108+
<div class="tip-header">
109+
<div class="tip-meta">
110+
<span class="badge {{category}}">{{categoryDisplay}}</span>
111+
<span class="badge {{difficulty}}">{{difficulty}}</span>
112+
</div>
113+
<h1>{{title}}</h1>
114+
<p>{{summary}}</p>
115+
</div>
116+
117+
<section class="compare-section">
118+
<div class="section-label">Code Comparison</div>
119+
<div class="compare-container">
120+
<div class="compare-panel old-panel">
121+
<div class="compare-panel-header">
122+
<span class="compare-tag old">✕ {{oldLabel}}</span>
123+
<button class="copy-btn" data-code="old">Copy</button>
124+
</div>
125+
<div class="compare-code">
126+
<pre class="code-text">{{oldCode}}</pre>
127+
</div>
128+
</div>
129+
<div class="compare-panel modern-panel">
130+
<div class="compare-panel-header">
131+
<span class="compare-tag modern">✓ {{modernLabel}}</span>
132+
<button class="copy-btn" data-code="modern">Copy</button>
133+
</div>
134+
<div class="compare-code">
135+
<pre class="code-text">{{modernCode}}</pre>
136+
</div>
137+
</div>
138+
</div>
139+
</section>
140+
141+
<section class="why-section">
142+
<div class="section-label">Why the modern way wins</div>
143+
<div class="why-grid">
144+
{{#whyModernWins}}
145+
<div class="why-card">
146+
<div class="why-icon">{{icon}}</div>
147+
<h3>{{title}}</h3>
148+
<p>{{desc}}</p>
149+
</div>
150+
{{/whyModernWins}}
151+
</div>
152+
</section>
153+
154+
<div class="info-grid">
155+
<div class="info-card">
156+
<div class="info-label">Old Approach</div>
157+
<div class="info-value red">{{oldApproach}}</div>
158+
</div>
159+
<div class="info-card">
160+
<div class="info-label">Modern Approach</div>
161+
<div class="info-value green">{{modernApproach}}</div>
162+
</div>
163+
<div class="info-card">
164+
<div class="info-label">Since JDK</div>
165+
<div class="info-value accent">{{jdkVersion}}</div>
166+
</div>
167+
<div class="info-card">
168+
<div class="info-label">Difficulty</div>
169+
<div class="info-value blue">{{difficulty}}</div>
170+
</div>
171+
</div>
172+
173+
<section class="bs-section">
174+
<div class="section-label">JDK Support</div>
175+
<div class="bs-card">
176+
<div class="bs-feature-name">{{title}}</div>
177+
<span class="baseline-badge widely">Available</span>
178+
<p class="bs-desc">{{support}}</p>
179+
</div>
180+
</section>
181+
182+
<section class="explanation">
183+
<h2>How it works</h2>
184+
<p>{{explanation}}</p>
185+
</section>
186+
187+
<section class="related">
188+
<h2>Related patterns</h2>
189+
<div class="related-grid">
190+
{{#related}}
191+
<a href="/{{path}}.html" class="tip-card">
192+
<div class="tip-card-body">
193+
<div class="tip-card-header">
194+
<div class="tip-badges">
195+
<span class="badge {{category}}">{{categoryDisplay}}</span>
196+
<span class="badge {{difficulty}}">{{difficulty}}</span>
197+
</div>
198+
</div>
199+
<h3>{{title}}</h3>
200+
</div>
201+
<div class="card-code">
202+
<div class="card-code-layer old-layer">
203+
<div class="mini-label">{{oldLabel}}</div>
204+
<pre class="code-text">{{oldCode}}</pre>
205+
</div>
206+
<div class="card-code-layer modern-layer">
207+
<div class="mini-label">{{modernLabel}}</div>
208+
<pre class="code-text">{{modernCode}}</pre>
209+
</div>
210+
<span class="hover-hint">Hover to see modern ➜</span>
211+
</div>
212+
<div class="tip-card-footer">
213+
<span class="browser-support"><span class="dot"></span>JDK {{jdkVersion}}+</span>
214+
<span class="arrow-link">→</span>
215+
</div>
216+
</a>
217+
{{/related}}
218+
</div>
219+
</section>
220+
</article>
221+
</section>
222+
223+
224+
<div class="social-share">
225+
<span class="share-label">Share</span>
226+
<a href="https://x.com/intent/tweet?url={{shareUrl}}&text={{shareText}}" target="_blank" rel="noopener" class="share-btn share-x" aria-label="Share on X">𝕏</a>
227+
<a href="https://bsky.app/intent/compose?text={{shareText}}%20{{shareUrl}}" target="_blank" rel="noopener" class="share-btn share-bsky" aria-label="Share on Bluesky">🦋</a>
228+
<a href="https://www.linkedin.com/sharing/share-offsite/?url={{shareUrl}}" target="_blank" rel="noopener" class="share-btn share-li" aria-label="Share on LinkedIn">in</a>
229+
<a href="https://www.reddit.com/submit?url={{shareUrl}}&title={{shareText}}" target="_blank" rel="noopener" class="share-btn share-reddit" aria-label="Share on Reddit">⬡</a>
230+
</div>
231+
232+
<footer>
233+
<p>A project by <a href="https://github.com/brunoborges" target="_blank" rel="noopener">Bruno Borges</a></p>
234+
<p><a href="https://github.com/javaevolved/javaevolved.github.io" target="_blank" rel="noopener">View on GitHub</a></p>
235+
</footer>
236+
237+
<script src="../app.js"></script>
238+
</body>
239+
</html>

0 commit comments

Comments
 (0)