Skip to content

Commit a050e63

Browse files
aanthonymaxaanthonymax
committed
Copied changes from hmpl/blog
1 parent 2b6ccbd commit a050e63

9 files changed

+217
-51
lines changed

‎_config.yml‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,6 @@ seo:
2323
2424
# Social and Branding
2525
logo: "/favicon.ico"
26-
social:
27-
name: HMPL
28-
links:
29-
- "https://github.com/hmpl-language/hmpl"
30-
- "https://x.com/hmpljs"
31-
- "https://discord.gg/KFunMep36n"
3226

3327
# Site Configuration
3428
timezone: UTC
@@ -66,9 +60,9 @@ defaults:
6660
seo:
6761
type: "BlogPosting"
6862

69-
minima:
70-
social_links:
71-
- { platform: github, user_url: "https://github.com/hmpl-language/hmpl" }
72-
- { platform: x, user_url: "https://x.com/hmpljs" }
73-
- { platform: discord, user_url: "https://discord.gg/KFunMep36n" }
74-
- { platform: rss, user_url: "/feed.xml" }
63+
# Social Links
64+
social_links:
65+
- { platform: github, user_url: "https://github.com/hmpl-language/hmpl" }
66+
- { platform: x, user_url: "https://x.com/hmpljs" }
67+
- { platform: discord, user_url: "https://discord.gg/KFunMep36n" }
68+
- { platform: rss, user_url: "/feed.xml" }

‎_includes/header.html‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,11 @@
66
<a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
77

88
<nav class="site-nav">
9-
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
10-
<label for="nav-trigger">
11-
<span class="menu-icon">
12-
<svg viewBox="0 0 18 15" width="18px" height="15px">
13-
<path
14-
d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z" />
15-
</svg>
16-
</span>
17-
</label>
18-
<div class="trigger">
19-
<div class="search-container">
20-
<label for="search-box"><input type="text" id="search-box" placeholder="Search...">
21-
<ul id="results"></ul>
22-
</label>
23-
</div>
24-
<a class="page-link" href="https://hmpl-lang.dev">hmpl-lang.dev</a>
9+
<div class="search-container">
10+
<input type="text" id="search-box" placeholder="Search...">
11+
<ul id="results"></ul>
2512
</div>
13+
<a class="page-link" href="https://hmpl-lang.dev">hmpl-lang.dev</a>
2614
</nav>
2715
</div>
2816
</header>

‎_includes/social-icons/discord.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎_includes/social-item.html‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
<li>{% assign entry = include.item %}
2-
<a {% unless entry.platform=='rss' %}rel="me" {% endunless %}href="{{ entry.user_url }}" target="_blank" title="{{ entry.title | default: entry.platform }}">
3-
<svg class="svg-icon grey {{ entry.platform }}-platform">
4-
{% if entry.platform == 'x' %}
5-
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"></path>
6-
{% elsif entry.platform == 'discord' %}
7-
<path d="M13.8978 1.01879C12.8548 0.541742 11.747 0.194056 10.5908 0C10.4452 0.250658 10.2835 0.590249 10.1703 0.857084C8.94046 0.679189 7.7195 0.679189 6.50668 0.857084C6.39347 0.590249 6.22367 0.250658 6.08621 0C4.92189 0.194056 3.81415 0.541742 2.77838 1.01879C0.684199 4.10751 0.118199 7.12345 0.401195 10.099C1.79193 11.1096 3.13416 11.7242 4.45294 12.1285C4.77636 11.6919 5.06745 11.2229 5.31811 10.7296C4.84105 10.5518 4.38825 10.3335 3.95163 10.0747C4.06482 9.99389 4.17803 9.90497 4.28314 9.81598C6.91906 11.0208 9.77414 11.0208 12.3777 9.81598C12.4909 9.90497 12.596 9.99389 12.7092 10.0747C12.2725 10.3335 11.8198 10.5518 11.3427 10.7296C11.5933 11.2229 11.8845 11.6919 12.2079 12.1285C13.5259 11.7242 14.8762 11.1096 16.2596 10.099C16.6073 6.65453 15.709 3.66282 13.8978 1.01879ZM5.68195 8.26353C4.88955 8.26353 4.2427 7.54393 4.2427 6.66257C4.2427 5.78128 4.87338 5.06161 5.68195 5.06161C6.48242 5.06161 7.13734 5.78128 7.12116 6.66257C7.12116 7.54393 6.48242 8.26353 5.68195 8.26353ZM10.995 8.26353C10.2027 8.26353 9.555 7.54393 9.555 6.66257C9.555 5.78128 10.1864 5.06161 10.995 5.06161C11.7955 5.06161 12.4504 5.78128 12.4343 6.66257C12.4343 7.54393 11.8036 8.26353 10.995 8.26353Z"/>
2+
<a {% unless entry.platform=='rss' %}rel="me" {% endunless %}href="{{ entry.user_url }}" target="_blank" title="{{ entry.title | default: entry.platform | capitalize }}" class="social-link">
3+
<svg class="svg-icon social-icon {{ entry.platform }}-icon" viewBox="0 0 16 16" width="16" height="16" aria-labelledby="{{ entry.platform }}-title">
4+
<title id="{{ entry.platform }}-title">{{ entry.platform | capitalize }}</title>
5+
{% case entry.platform %}
6+
{% when 'github' %}
7+
{% include social-icons/github.svg %}
8+
{% when 'x' %}
9+
{% include social-icons/x.svg %}
10+
{% when 'discord' %}
11+
{% include social-icons/discord.svg %}
12+
{% when 'rss' %}
13+
{% include social-icons/rss.svg %}
814
{% else %}
9-
<use xlink:href="{{ '/assets/minima-social-icons.svg#' | append: entry.platform | relative_url }}"></use>
10-
{% endif %}
15+
<circle cx="8" cy="8" r="6" fill="currentColor"/>
16+
{% endcase %}
1117
</svg>
18+
<span class="username">{{ entry.platform | capitalize }}</span>
1219
</a>
13-
</li>
20+
</li>

‎_includes/social.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
{%- if site.social_links -%}
12
<ul class="social-media-list">
2-
{%- for entry in site.minima.social_links -%}
3+
{%- for entry in site.social_links -%}
34
{%- include social-item.html item = entry -%}
45
{%- endfor -%}
56
</ul>
7+
{%- endif -%}

‎_posts/2024-12-18-creating-a-gallery-app-in-javascript-with-hmpl.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ It is worth noting that there are two objects marked here. The first one is trig
113113
**Title.hmpl**
114114

115115
```html
116-
<h1 id="title">{{ src: "http://localhost:8000/api/title" }}</h1>
116+
<h1 id="title">{% raw %}{{ src: "http://localhost:8000/api/title" }}{% endraw %}</h1>
117117
```
118118

119119
Here, the objects will be changed to HTML from the server. Now, they should be connected. To do this, import them into main.js:

‎_posts/2025-02-27-how-to-reduce-web-application-bundle-size.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ Working with the module looks something like this:
9393
const templateFn = hmpl.compile(
9494
`<div>
9595
<button data-action="increment" id="btn">Click!</button>
96-
<div>Clicks: {{ src: "/api/clicks", after: "click:#btn" }}</div>
96+
<div>Clicks: {% raw %}{{ src: "/api/clicks", after: "click:#btn" }}{% endraw %}</div>
9797
</div>`
9898
);
9999

‎_posts/2025-04-27-client‑side-ssr-build-a-component‑based-landing-page-in-10-minutes.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -270,11 +270,11 @@ Append components dynamically using HMPL:
270270
const body = document.querySelector("body");
271271
const template = `
272272
<main>
273-
{{#request src="http://localhost:8000/api/get-header-component"}}{{/request}}
273+
{% raw %}{{#request src="http://localhost:8000/api/get-header-component"}}{{/request}}
274274
{{#request src="http://localhost:8000/api/get-features-component"}}{{/request}}
275275
{{#request src="http://localhost:8000/api/get-promo-component"}}{{/request}}
276276
{{#request src="http://localhost:8000/api/get-cta-component"}}{{/request}}
277-
{{#request src="http://localhost:8000/api/get-footer-component"}}{{/request}}
277+
{{#request src="http://localhost:8000/api/get-footer-component"}}{{/request}}{% endraw %}
278278
</main>
279279
`;
280280
const { response } = hmpl.compile(template)();

‎assets/main.scss‎

Lines changed: 183 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
---
33

4-
// Simple Blog Theme CSS (no external dependencies)
4+
// Complete Blog Theme CSS with Custom Header and Responsive Footer
55
body {
66
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
77
font-size: 16px;
@@ -18,26 +18,110 @@ body {
1818
padding: 0 20px;
1919
}
2020

21+
/* Header and Navigation Styles */
2122
.site-header {
22-
border-bottom: 1px solid #e8e8e8;
23-
padding: 20px 0;
23+
border-bottom: 1px solid #e5e7eb;
24+
padding: 25px 0;
25+
background-color: #ffffff;
26+
}
27+
28+
.site-header .wrapper {
29+
display: flex;
30+
justify-content: space-between;
31+
align-items: center;
32+
gap: 20px;
33+
min-height: 60px;
2434
}
2535

2636
.site-title {
2737
font-size: 26px;
28-
font-weight: 300;
38+
font-weight: 600;
2939
line-height: 1.2;
3040
margin: 0;
41+
font-family: Georgia, serif;
3142
}
3243

3344
.site-title a {
3445
color: #424242;
3546
text-decoration: none;
47+
font-weight: 600;
48+
font-family: Georgia, serif;
3649
}
3750

3851
.site-nav {
39-
float: right;
40-
line-height: 54px;
52+
display: flex;
53+
align-items: center;
54+
gap: 15px;
55+
flex-shrink: 0;
56+
}
57+
58+
.site-nav .page-link {
59+
color: #828282 !important;
60+
text-decoration: none !important;
61+
margin-left: 15px;
62+
font-weight: 400;
63+
font-size: 14px;
64+
white-space: nowrap;
65+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
66+
}
67+
68+
.site-nav .page-link:hover {
69+
color: #4c1d95 !important;
70+
text-decoration: underline !important;
71+
}
72+
73+
.site-nav .page-link:visited {
74+
color: #1f2937 !important;
75+
text-decoration: none !important;
76+
}
77+
78+
.search-container {
79+
position: relative;
80+
display: inline-block;
81+
margin: 0;
82+
flex-shrink: 0;
83+
}
84+
85+
#search-box {
86+
padding: 6px 10px;
87+
border: 1px solid #d1d5db;
88+
border-radius: 4px;
89+
font-size: 14px;
90+
outline: none;
91+
width: 160px;
92+
background-color: #ffffff;
93+
box-sizing: border-box;
94+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
95+
}
96+
97+
#results {
98+
list-style: none;
99+
padding: 0;
100+
margin: 4px 0 0;
101+
position: absolute;
102+
width: 100%;
103+
background: white;
104+
border: 1px solid #ccc;
105+
border-radius: 4px;
106+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
107+
display: none;
108+
overflow-y: auto;
109+
}
110+
111+
#results li {
112+
padding: 6px 10px;
113+
font-size: 14px;
114+
border-bottom: 1px solid #eee;
115+
cursor: pointer;
116+
text-align: left;
117+
}
118+
119+
#results li:last-child {
120+
border-bottom: none;
121+
}
122+
123+
#results li:hover {
124+
background-color: #f7f7f7;
41125
}
42126

43127
.page-content {
@@ -155,6 +239,7 @@ body {
155239
padding-left: 0;
156240
}
157241

242+
/* Footer Styles */
158243
.site-footer {
159244
border-top: 1px solid #e8e8e8;
160245
padding: 30px 0;
@@ -163,6 +248,69 @@ body {
163248
font-size: 14px;
164249
}
165250

251+
.footer-wrapper {
252+
text-align: center !important;
253+
max-width: 800px;
254+
margin: 0 auto;
255+
padding: 0 20px;
256+
}
257+
258+
.footer-col-wrapper {
259+
margin-bottom: 20px;
260+
}
261+
262+
.footer-col {
263+
margin-bottom: 15px;
264+
}
265+
266+
.social-links {
267+
margin-top: 20px;
268+
}
269+
270+
.social-media-list {
271+
display: flex;
272+
justify-content: center;
273+
list-style: none;
274+
margin: 0;
275+
padding: 0;
276+
gap: 15px;
277+
}
278+
279+
.social-media-list li {
280+
margin: 0;
281+
}
282+
283+
.social-media-list a {
284+
color: #828282;
285+
text-decoration: none;
286+
font-size: 16px;
287+
transition: color 0.3s ease;
288+
display: flex;
289+
align-items: center;
290+
gap: 5px;
291+
}
292+
293+
.social-media-list a:hover {
294+
color: #1e6bb8;
295+
}
296+
297+
.svg-icon.social-icon {
298+
fill: currentColor;
299+
width: 16px;
300+
height: 16px;
301+
display: inline-block;
302+
vertical-align: middle;
303+
}
304+
305+
.social-icon path {
306+
fill: currentColor;
307+
}
308+
309+
.social-media-list .username {
310+
font-size: 14px;
311+
display: none;
312+
}
313+
166314
// SEO Enhancement Styles
167315
.breadcrumb-list {
168316
display: flex;
@@ -270,9 +418,24 @@ body {
270418
padding: 0 15px;
271419
}
272420

421+
.site-header .wrapper {
422+
flex-direction: column;
423+
align-items: flex-start;
424+
gap: 15px;
425+
}
426+
273427
.site-nav {
274-
float: none;
275-
line-height: normal;
428+
width: 100%;
429+
justify-content: space-between;
430+
flex-wrap: wrap;
431+
}
432+
433+
.site-nav .page-link {
434+
margin-left: 0;
435+
}
436+
437+
#search-box {
438+
width: 150px;
276439
}
277440

278441
.post-title {
@@ -299,4 +462,16 @@ body {
299462
.post-tag-preview {
300463
font-size: 0.7em;
301464
}
465+
466+
.footer-wrapper {
467+
padding: 0 15px;
468+
}
469+
470+
.social-media-list {
471+
gap: 20px;
472+
}
473+
474+
.social-media-list .username {
475+
display: inline;
476+
}
302477
}

0 commit comments

Comments
 (0)