revert-to-html

Author: Tomal-kuet

_config.yml

@@ -58,7 +58,7 @@ posts_in_search: false
 bib_search: false
 
 # Dimensions
-max_width: 1000px
+max_width: 930px
 
 # TODO: add layout settings (single page vs. multi-page)
 

_includes/figure.html

@@ -0,0 +1,36 @@
+{%- assign img_path = include.path | remove: ".jpg" | remove: ".jpeg" | remove: ".png" | remove: ".tiff" -%}
+
+<figure>
+
+  <picture>
+    {% if site.imagemagick.enabled %}
+    {% for i in site.imagemagick.widths -%}
+      <source 
+        class="responsive-img-srcset"
+        media="(max-width: {{ i }}px)" 
+        srcset="{{ img_path | relative_url }}-{{ i }}.webp"
+      />
+    {% endfor -%}
+    {% endif %}
+
+    <!-- Fallback to the original file -->
+    <img 
+      src="{{ include.path | relative_url }}"
+      {% if include.class %}class="{{ include.class }}"{% endif %}  
+      {% if include.width %}width="{{ include.width }}"{% else %}width="auto"{% endif %} 
+      {% if include.height %}height="{{ include.height }}"{% else %}height="auto"{% endif %} 
+      {% if include.min-width %}min-width="{{ include.min-width }}"{% endif %} 
+      {% if include.min-height %}min-height="{{ include.min-height }}"{% endif %} 
+      {% if include.max-width %}max-width="{{ include.max-width }}"{% endif %} 
+      {% if include.max-height %}height="{{ include.max-height }}"{% endif %} 
+      {% if include.alt %}alt="{{ include.alt }}"{% endif %} 
+      {% if include.title %}title="{{ include.title }}"{% endif %} 
+      {% if include.zoomable %}data-zoomable{% endif %}
+      onerror="this.onerror=null; $('.responsive-img-srcset').remove();"
+    />
+
+  </picture>
+
+  {%- if include.caption -%}<figcaption class="caption">{{ include.caption }}</figcaption>{%- endif %}
+
+</figure>

_includes/projects.html

@@ -0,0 +1,36 @@
+<!-- _includes/projects.html -->
+<div class="grid-sizer"></div>
+<div class="grid-item">
+  {% if project.redirect -%}
+  <a href="{{ project.redirect }}">
+    {%- else -%}
+    <a href="javascript:undefined">
+      {%- endif %}
+      <div class="card hoverable">
+        {%- if project.img %}
+        {%- include figure.html
+          path=project.img
+          alt="project thumbnail" -%}
+        {%- endif %}
+        <div class="card-body">
+          <h2 class="card-title">{{ project.title }}</h2>
+          <p class="card-text">{{ project.description }}</p>
+          <div class="row ml-1 mr-1 p-0">
+            {%- if project.github -%}
+            <div class="github-icon">
+              <div class="icon" data-toggle="tooltip" title="Code Repository">
+                <a href="{{ project.github }}"><i class="fab fa-github gh-icon"></i></a>
+              </div>
+              {%- if project.github_stars -%}
+              <span class="stars" data-toggle="tooltip" title="GitHub Stars">
+                <i class="fas fa-star"></i>
+                <span id="{{ project.github_stars }}-stars"></span>
+              </span>
+              {%- endif %}
+            </div>
+            {%- endif %}
+          </div>
+        </div>
+      </div>
+    </a>
+</div>

_includes/projects_horizontal.html

@@ -0,0 +1,40 @@
+<div class="card-item col">
+  {%- if project.redirect -%}
+  <a href="{{ project.redirect }}">
+  {%- else -%}
+  <a href="{{ project.url | relative_url }}">
+  {%- endif -%}
+    <div class="card hoverable">
+      <div class="row g-0">
+        {%- if project.img -%}
+        <div class="card-img col-md-6">
+          {% include figure.html path=project.img alt="project thumbnail" %}
+        </div>
+        <div class="col-md-6">
+        {%- else -%}
+        <div class="col-md-12">
+        {%- endif -%}
+          <div class="card-body">
+            <h3 class="card-title text-lowercase">{{ project.title }}</h3>
+            <p class="card-text">{{ project.description }}</p>
+            <div class="row ml-1 mr-1 p-0">
+              {%- if project.github -%}
+              <div class="github-icon">
+                <div class="icon" data-toggle="tooltip" title="Code Repository">
+                  <a href="{{ project.github }}"><i class="fab fa-github gh-icon"></i></a>
+                </div>
+                {%- if project.github_stars -%}
+                <span class="stars" data-toggle="tooltip" title="GitHub Stars">
+                  <i class="fas fa-star"></i>
+                  <span id="{{ project.github_stars }}-stars"></span>
+                </span>
+                {%- endif -%}
+              </div>
+              {%- endif -%}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </a>
+</div>

_pages/member.md

@@ -21,14 +21,14 @@ horizontal: false
   <div class="container">
     <div class="row row-cols-2">
     {%- for project in sorted_projects -%}
-      {% include projects_horizontal.liquid %}
+      {% include projects_horizontal.html %}
     {%- endfor %}
     </div>
   </div>
   {%- else -%}
   <div class="grid">
     {%- for project in sorted_projects -%}
-      {% include projects.liquid %}
+      {% include projects.html %}
     {%- endfor %}
   </div>
   {%- endif -%}
@@ -42,14 +42,14 @@ horizontal: false
   <div class="container">
     <div class="row row-cols-2">
     {%- for project in sorted_projects -%}
-      {% include projects_horizontal.liquid %}
+      {% include projects_horizontal.html %}
     {%- endfor %}
     </div>
   </div>
   {%- else -%}
   <div class="grid">
     {%- for project in sorted_projects -%}
-      {% include projects.liquid %}
+      {% include projects.html %}
     {%- endfor %}
   </div>
   {%- endif -%}