Copied changes from hmpl/blog

Author: aanthonymax

_config.yml

@@ -23,12 +23,6 @@ seo:
 
 # Social and Branding
 logo: "/favicon.ico"
-social:
-  name: HMPL
-  links:
-    - "https://github.com/hmpl-language/hmpl"
-    - "https://x.com/hmpljs"
-    - "https://discord.gg/KFunMep36n"
 
 # Site Configuration
 timezone: UTC
@@ -66,9 +60,9 @@ defaults:
       seo:
         type: "BlogPosting"
 
-minima:
-  social_links:
-    - { platform: github, user_url: "https://github.com/hmpl-language/hmpl" }
-    - { platform: x, user_url: "https://x.com/hmpljs" }
-    - { platform: discord, user_url: "https://discord.gg/KFunMep36n" }
-    - { platform: rss, user_url: "/feed.xml" }
+# Social Links
+social_links:
+  - { platform: github, user_url: "https://github.com/hmpl-language/hmpl" }
+  - { platform: x, user_url: "https://x.com/hmpljs" }
+  - { platform: discord, user_url: "https://discord.gg/KFunMep36n" }
+  - { platform: rss, user_url: "/feed.xml" }

_includes/header.html

@@ -6,23 +6,11 @@
     <a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
 
     <nav class="site-nav">
-      <input type="checkbox" id="nav-trigger" class="nav-trigger" />
-      <label for="nav-trigger">
-        <span class="menu-icon">
-          <svg viewBox="0 0 18 15" width="18px" height="15px">
-            <path
-              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" />
-          </svg>
-        </span>
-      </label>
-      <div class="trigger">
-        <div class="search-container">
-          <label for="search-box"><input type="text" id="search-box" placeholder="Search...">
-            <ul id="results"></ul>
-          </label>
-        </div>
-        <a class="page-link" href="https://hmpl-lang.dev">hmpl-lang.dev</a>
+      <div class="search-container">
+        <input type="text" id="search-box" placeholder="Search...">
+        <ul id="results"></ul>
       </div>
+      <a class="page-link" href="https://hmpl-lang.dev">hmpl-lang.dev</a>
     </nav>
   </div>
 </header>

_includes/social-icons/discord.svg

@@ -1,13 +1,20 @@
 <li>{% assign entry = include.item %}
-  <a {% unless entry.platform=='rss' %}rel="me" {% endunless %}href="{{ entry.user_url }}" target="_blank" title="{{ entry.title | default: entry.platform }}">
-    <svg class="svg-icon grey {{ entry.platform }}-platform">
-      {% if entry.platform == 'x' %}
-      <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>
-      {% elsif entry.platform == 'discord' %}
-      <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"/>
+  <a {% unless entry.platform=='rss' %}rel="me" {% endunless %}href="{{ entry.user_url }}" target="_blank" title="{{ entry.title | default: entry.platform | capitalize }}" class="social-link">
+    <svg class="svg-icon social-icon {{ entry.platform }}-icon" viewBox="0 0 16 16" width="16" height="16" aria-labelledby="{{ entry.platform }}-title">
+      <title id="{{ entry.platform }}-title">{{ entry.platform | capitalize }}</title>
+      {% case entry.platform %}
+        {% when 'github' %}
+          {% include social-icons/github.svg %}
+        {% when 'x' %}
+          {% include social-icons/x.svg %}
+        {% when 'discord' %}
+          {% include social-icons/discord.svg %}
+        {% when 'rss' %}
+          {% include social-icons/rss.svg %}
       {% else %}
-      <use xlink:href="{{ '/assets/minima-social-icons.svg#' | append: entry.platform | relative_url }}"></use>
-      {% endif %}
+        <circle cx="8" cy="8" r="6" fill="currentColor"/>
+      {% endcase %}
     </svg>
+    <span class="username">{{ entry.platform | capitalize }}</span>
   </a>
-</li>
+</li>

_includes/social-item.html

@@ -1,5 +1,7 @@
+{%- if site.social_links -%}
 <ul class="social-media-list">
-{%- for entry in site.minima.social_links -%}
+{%- for entry in site.social_links -%}
   {%- include social-item.html item = entry -%}
 {%- endfor -%}
 </ul>
+{%- endif -%}

_includes/social.html

@@ -113,7 +113,7 @@ It is worth noting that there are two objects marked here. The first one is trig
 **Title.hmpl**
 
 ```html
-<h1 id="title">{{ src: "http://localhost:8000/api/title" }}</h1>
+<h1 id="title">{% raw %}{{ src: "http://localhost:8000/api/title" }}{% endraw %}</h1>
 ```
 
 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/2024-12-18-creating-a-gallery-app-in-javascript-with-hmpl.md

@@ -93,7 +93,7 @@ Working with the module looks something like this:
 const templateFn = hmpl.compile(
   `<div>
       <button data-action="increment" id="btn">Click!</button>
-      <div>Clicks: {{ src: "/api/clicks", after: "click:#btn" }}</div>
+      <div>Clicks: {% raw %}{{ src: "/api/clicks", after: "click:#btn" }}{% endraw %}</div>
   </div>`
 );
 

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

@@ -270,11 +270,11 @@ Append components dynamically using HMPL:
   const body = document.querySelector("body");
   const template = `
     <main>
-      {{#request src="http://localhost:8000/api/get-header-component"}}{{/request}}
+      {% raw %}{{#request src="http://localhost:8000/api/get-header-component"}}{{/request}}
       {{#request src="http://localhost:8000/api/get-features-component"}}{{/request}}
       {{#request src="http://localhost:8000/api/get-promo-component"}}{{/request}}
       {{#request src="http://localhost:8000/api/get-cta-component"}}{{/request}}
-      {{#request src="http://localhost:8000/api/get-footer-component"}}{{/request}}
+      {{#request src="http://localhost:8000/api/get-footer-component"}}{{/request}}{% endraw %}
     </main>
   `;
   const { response } = hmpl.compile(template)();

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

@@ -1,7 +1,7 @@
 ---
 ---
 
-// Simple Blog Theme CSS (no external dependencies)
+// Complete Blog Theme CSS with Custom Header and Responsive Footer
 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   font-size: 16px;
@@ -18,26 +18,110 @@ body {
   padding: 0 20px;
 }
 
+/* Header and Navigation Styles */
 .site-header {
-  border-bottom: 1px solid #e8e8e8;
-  padding: 20px 0;
+  border-bottom: 1px solid #e5e7eb;
+  padding: 25px 0;
+  background-color: #ffffff;
+}
+
+.site-header .wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+  min-height: 60px;
 }
 
 .site-title {
   font-size: 26px;
-  font-weight: 300;
+  font-weight: 600;
   line-height: 1.2;
   margin: 0;
+  font-family: Georgia, serif;
 }
 
 .site-title a {
   color: #424242;
   text-decoration: none;
+  font-weight: 600;
+  font-family: Georgia, serif;
 }
 
 .site-nav {
-  float: right;
-  line-height: 54px;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  flex-shrink: 0;
+}
+
+.site-nav .page-link {
+  color: #828282 !important;
+  text-decoration: none !important;
+  margin-left: 15px;
+  font-weight: 400;
+  font-size: 14px;
+  white-space: nowrap;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.site-nav .page-link:hover {
+  color: #4c1d95 !important;
+  text-decoration: underline !important;
+}
+
+.site-nav .page-link:visited {
+  color: #1f2937 !important;
+  text-decoration: none !important;
+}
+
+.search-container {
+  position: relative;
+  display: inline-block;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+#search-box {
+  padding: 6px 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 14px;
+  outline: none;
+  width: 160px;
+  background-color: #ffffff;
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+#results {
+  list-style: none;
+  padding: 0;
+  margin: 4px 0 0;
+  position: absolute;
+  width: 100%;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: none;
+  overflow-y: auto;
+}
+
+#results li {
+  padding: 6px 10px;
+  font-size: 14px;
+  border-bottom: 1px solid #eee;
+  cursor: pointer;
+  text-align: left;
+}
+
+#results li:last-child {
+  border-bottom: none;
+}
+
+#results li:hover {
+  background-color: #f7f7f7;
 }
 
 .page-content {
@@ -155,6 +239,7 @@ body {
   padding-left: 0;
 }
 
+/* Footer Styles */
 .site-footer {
   border-top: 1px solid #e8e8e8;
   padding: 30px 0;
@@ -163,6 +248,69 @@ body {
   font-size: 14px;
 }
 
+.footer-wrapper {
+  text-align: center !important;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.footer-col-wrapper {
+  margin-bottom: 20px;
+}
+
+.footer-col {
+  margin-bottom: 15px;
+}
+
+.social-links {
+  margin-top: 20px;
+}
+
+.social-media-list {
+  display: flex;
+  justify-content: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 15px;
+}
+
+.social-media-list li {
+  margin: 0;
+}
+
+.social-media-list a {
+  color: #828282;
+  text-decoration: none;
+  font-size: 16px;
+  transition: color 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.social-media-list a:hover {
+  color: #1e6bb8;
+}
+
+.svg-icon.social-icon {
+  fill: currentColor;
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.social-icon path {
+  fill: currentColor;
+}
+
+.social-media-list .username {
+  font-size: 14px;
+  display: none;
+}
+
 // SEO Enhancement Styles
 .breadcrumb-list {
   display: flex;
@@ -270,9 +418,24 @@ body {
     padding: 0 15px;
   }
 
+  .site-header .wrapper {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
+  }
+  
   .site-nav {
-    float: none;
-    line-height: normal;
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+  
+  .site-nav .page-link {
+    margin-left: 0;
+  }
+  
+  #search-box {
+    width: 150px;
   }
 
   .post-title {
@@ -299,4 +462,16 @@ body {
   .post-tag-preview {
     font-size: 0.7em;
   }
+  
+  .footer-wrapper {
+    padding: 0 15px;
+  }
+  
+  .social-media-list {
+    gap: 20px;
+  }
+  
+  .social-media-list .username {
+    display: inline; 
+  }
 }