Merge pull request #13 from joharkhan99/replace-footer-logo-10

updated old twitter logo in the footer

.gitignore

@@ -0,0 +1,7 @@
+_site
+.sass-cache
+.jekyll-cache
+.jekyll-metadata
+vendor
+Gemfile.lock
+.DS_Store

404.html

@@ -0,0 +1,25 @@
+---
+permalink: /404.html
+layout: default
+---
+
+<style type="text/css" media="screen">
+  .container {
+    margin: 10px auto;
+    max-width: 600px;
+    text-align: center;
+  }
+  h1 {
+    margin: 30px 0;
+    font-size: 4em;
+    line-height: 1;
+    letter-spacing: -1px;
+  }
+</style>
+
+<div class="container">
+  <h1>404</h1>
+
+  <p><strong>Page not found :(</strong></p>
+  <p>The requested page could not be found.</p>
+</div>

CNAME

@@ -0,0 +1 @@
+blog.hmpl-lang.dev

Gemfile

@@ -0,0 +1,12 @@
+source "https://rubygems.org"
+gem "jekyll", "~> 4.3.3"
+gem "minima", "~> 2.5.2"
+group :jekyll_plugins do
+  gem "jekyll-feed", "~> 0.12"
+end
+platforms :mingw, :x64_mingw, :mswin, :jruby do
+  gem "tzinfo", ">= 1", "< 3"
+  gem "tzinfo-data"
+end
+gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
+gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]

_config.yml

@@ -0,0 +1,15 @@
+title: HMPL Blog
+author:
+  name: ""
+  email: ""
+description: >
+  HMPL - Server-oriented customizable 
+  templating for JavaScript
+theme: minima
+plugins:
+  - jekyll-feed
+minima:
+  social_links:
+    - { platform: github, user_url: "https://github.com/hmpl-language/hmpl" }
+    - { platform: x, user_url: "https://x.com/hmpljs" }
+    - { platform: rss, user_url: "/feed.xml" }

_includes/footer.html

@@ -0,0 +1,18 @@
+<footer class="site-footer h-card">
+  <data class="u-url" href="{{ "/" | relative_url }}"></data>
+
+  <div class="wrapper footer-wrapper">
+
+    <div class="footer-col-wrapper">
+      <div class="footer-col">
+        <p>{{ site.description | escape }}</p>
+      </div>
+    </div>
+
+    <div class="social-links">
+      {%- include social.html -%}
+    </div>
+
+  </div>
+
+</footer>

_includes/header.html

@@ -0,0 +1,23 @@
+<header class="site-header">
+  <div class="wrapper">
+    {%- assign default_paths = site.pages | map: "path" -%}
+    {%- assign page_paths = site.header_pages | default: default_paths -%}
+    {%- assign titles_size = site.pages | map: 'title' | join: '' | size -%}
+    <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">
+          <a class="page-link" href="https://hmpl-lang.dev">hmpl-lang.dev</a>
+        </div>
+      </nav>
+  </div>
+</header>

_includes/social-item.html

@@ -0,0 +1,11 @@
+<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">
+      {% 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>
+      {% else %}
+      <use xlink:href="{{ '/assets/minima-social-icons.svg#' | append: entry.platform | relative_url }}"></use>
+      {% endif %}
+    </svg>
+  </a>
+</li>

_includes/social.html

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

_includes/svg_symbol.html

@@ -0,0 +1,3 @@
+<symbol id="{{ include.key }}" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" viewBox="0 0 16 16">
+  {%- include social-icons/{{ include.key }}.svg -%}
+</symbol>

_layouts/base.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+
+  {%- include head.html -%}
+  <link rel="stylesheet" href="/css/style.css" />
+  <body>
+
+    {%- include header.html -%}
+
+    <main class="page-content" aria-label="Content">
+      <div class="wrapper">
+        {{ content }}
+      </div>
+    </main>
+
+    {%- include footer.html -%}
+
+  </body>
+
+</html>

_layouts/home.html

@@ -0,0 +1,61 @@
+---
+layout: base
+---
+
+<div class="home">
+  {%- if page.title -%}
+    <h1 class="page-heading">{{ page.title }}</h1>
+  {%- endif -%}
+
+  {{ content }}
+
+
+  {% if site.paginate %}
+    {% assign posts = paginator.posts %}
+  {% else %}
+    {% assign posts = site.posts %}
+  {% endif %}
+
+
+  {%- if posts.size > 0 -%}
+    {%- if page.list_title -%}
+      <h2 class="post-list-heading">{{ page.list_title }}</h2>
+    {%- endif -%}
+    <ul class="post-list">
+      {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
+      {%- for post in posts -%}
+      <li>
+        <span class="post-meta">{{ post.date | date: date_format }}</span>
+        <h3>
+          <a class="post-link" href="{{ post.url | relative_url }}">
+            {{ post.title | escape }}
+          </a>
+        </h3>
+        {%- if site.show_excerpts -%}
+          {{ post.excerpt }}
+        {%- endif -%}
+      </li>
+      {%- endfor -%}
+    </ul>
+
+    {% if site.paginate %}
+      <div class="pager">
+        <ul class="pagination">
+        {%- if paginator.previous_page %}
+          <li><a href="{{ paginator.previous_page_path | relative_url }}" class="previous-page">{{ paginator.previous_page }}</a></li>
+        {%- else %}
+          <li><div class="pager-edge">•</div></li>
+        {%- endif %}
+          <li><div class="current-page">{{ paginator.page }}</div></li>
+        {%- if paginator.next_page %}
+          <li><a href="{{ paginator.next_page_path | relative_url }}" class="next-page">{{ paginator.next_page }}</a></li>
+        {%- else %}
+          <li><div class="pager-edge">•</div></li>
+        {%- endif %}
+        </ul>
+      </div>
+    {%- endif %}
+
+  {%- endif -%}
+
+</div>

_layouts/page.html

@@ -0,0 +1,14 @@
+---
+layout: base
+---
+<article class="post">
+
+  <header class="post-header">
+    <h1 class="post-title">{{ page.title | escape }}</h1>
+  </header>
+
+  <div class="post-content">
+    {{ content }}
+  </div>
+
+</article>

_layouts/post.html

@@ -0,0 +1,38 @@
+---
+layout: base
+---
+<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
+
+  <header class="post-header">
+    <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
+    <p class="post-meta">
+      {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
+      <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+        {{ page.date | date: date_format }}
+      </time>
+      {%- if page.modified_date -%}
+        ~ 
+        {%- assign mdate = page.modified_date | date_to_xmlschema -%}
+        <time class="dt-modified" datetime="{{ mdate }}" itemprop="dateModified">
+          {{ mdate | date: date_format }}
+        </time>
+      {%- endif -%}
+      {%- if page.author -%}
+        • {% for author in page.author %}
+          <span itemprop="author" itemscope itemtype="http://schema.org/Person">
+            <span class="p-author h-card" itemprop="name">{{ author }}</span></span>
+            {%- if forloop.last == false %}, {% endif -%}
+        {% endfor %}
+      {%- endif -%}</p>
+  </header>
+
+  <div class="post-content e-content" itemprop="articleBody">
+    {{ content }}
+  </div>
+
+  {%- if site.disqus.shortname -%}
+    {%- include disqus_comments.html -%}
+  {%- endif -%}
+
+  <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
+</article>

_posts/2024-06-09-how-to-work-with-hmpl-file-extension-in-javascript.md

@@ -0,0 +1,37 @@
+---
+layout: post
+title: "How to work with .hmpl file extension in javascript?"
+date: 2024-06-09 2:10 PM
+categories: blog
+---
+
+In order to work with files with the `.hmpl` extension, you can install a [webpack](https://www.npmjs.com/package/webpack) and loader for it [hmpl-loader](https://www.npmjs.com/package/hmpl-loader). Since version `0.0.2`, the loader connection looks like this:
+
+### webpack.config.js
+
+```javascript
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.hmpl$/i,
+        use: ["hmpl-loader"],
+      },
+    ],
+  },
+};
+```
+
+### main.hmpl
+
+```html
+<div><request src="/api/test"></request></div>
+```
+
+### main.js
+
+```javascript
+const templateFn = require("./main.hmpl");
+
+const elementObj = templateFn();
+```

_posts/2024-07-22-how-to-get-html-from-api-and-display-in-dom-using-hmpljs-fetch.md

@@ -0,0 +1,74 @@
+---
+layout: post
+title: "How to GET HTML from API and Display In DOM using HMPL.js (fetch)?"
+date: 2024-07-22 2:10 PM
+categories: blog
+---
+
+Hello! In this post I would like to talk about how to GET HTML from API and Display In DOM using HMPL.js.
+
+This method is suitable for any api, because This module is based on the Fetch API and almost completely copies the work with the vanilla solution.
+
+Let's say if we take a route that returns HTML in response:
+
+API route - http://localhost:8000/api/test
+
+```html
+<span>123</span>
+```
+
+And, let’s say, there is a task in a `div` with `id` "wrapper" to display this HTML. To do this, you can connect the hmpl module via the `script` tag and write the following code:
+
+```html
+<div id="wrapper"></div>
+<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>
+<script>
+  const templateFn = hmpl.compile(
+    `<div>
+       { 
+         {
+           "src":"http://localhost:8000/api/test" 
+         } 
+       }
+    </div>`
+  );
+
+  const wrapper = document.getElementById("wrapper");
+
+  const obj = templateFn();
+
+  wrapper.appendChild(obj.response);
+</script>
+```
+
+In this code, thanks to hmpl markup, you can generate a DOM node that can be displayed in HTML. It is worth considering that this node will be updated automatically during the API request process.
+
+If you need to add a request indicator, you can slightly expand the existing code:
+
+```html
+<div id="wrapper"></div>
+<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>
+<script>
+  const templateFn = hmpl.compile(
+    `<div>
+       { 
+         {
+           "src":"http://localhost:8000/api/test",
+           "on": {
+              "trigger": "loading",
+              "content": "<div>Loading...</div>",
+           } 
+         } 
+       }
+    </div>`
+  );
+
+  const wrapper = document.getElementById("wrapper");
+
+  const obj = templateFn();
+
+  wrapper.appendChild(obj.response);
+</script>
+```
+
+In this example, the indicator will be triggered when the request is sent, but the response from the API has not yet arrived.