Tailwind builder, template operations, etc.

Cargo.toml

@@ -10,10 +10,12 @@ colored = "2.1.0"
 minijinja = { version = "2.5.0", features = ["loader"] }
 pulldown-cmark = "0.12.2"
 pulldown-cmark-to-cmark = "19.0.0"
+run_shell = "0.1.13"
 serde = { version = "1.0.215", features = ["derive", "rc"] }
 serde_json = "1.0.133"
 serde_yaml = "0.9"
 thiserror = "2.0.3"
+urlencoding = "2.1.3"
 
 [dev-dependencies]
 tempfile = "3.14.0"

blog/statics/style.css → blog/assets/style.css

@@ -1,37 +1,23 @@
-/* CSS */
-:root {
-    font-family: Inter, sans-serif;
-    font-feature-settings: 'liga' 1, 'calt' 1;
-    /* fix for Chrome */
-}
-
-@supports (font-variation-settings: normal) {
-    :root {
-        font-family: InterVariable, sans-serif;
-    }
-}
-
-
 blockquote {
-    font-family: 'Gotham SSm A', 'Gotham SSm B', 'Proxima Nova', Futura, Helvetica, sans-serif;
+    font-family: "Gotham SSm A", "Gotham SSm B", "Proxima Nova", Futura, Helvetica, sans-serif;
     font-weight: 400;
     letter-spacing: 1.5px;
     font-style: normal;
-    font-size: 20px;
+    font-size: 26px;
     line-height: 1.25em;
     text-transform: uppercase;
-    color: #A32B68;
+    color: #a32b68;
     background: -webkit-linear-gradient(top, #fd0b58 0px, #a32b68 100%);
     background: linear-gradient(top, #fd0b58 0px, #a32b68 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 
     &:before {
-        content: '';
+        content: "";
     }
 
     &:after {
-        content: '';
+        content: "";
     }
 }
 
@@ -49,4 +35,4 @@ blockquote.right {
     margin: 10px 0 10px 20px;
     float: right;
     max-width: 350px;
-}
+}

blog/pages/about.html

@@ -7,12 +7,16 @@
 {% extends "base.html" %}
 {% block body %}
 
-👨‍👦 Father of Timuçin <br>
-🧑🏻 Husband of Aysel <br>
-👨🏻‍💻 Technology addict <br>
-👨🏻‍💼 Engineering Manager <br>
-🐈‍⬛ Cat owner <br>
-🔬 a curious person <br>
-🇩🇰 Live in Denmark
+<div class="leading-8 place-content-center grid">
+    👨‍👦 Father of Timuçin <br>
+    🧑🏻 Husband of Aysel <br>
+    👨🏻‍💻 Technology addict <br>
+    👨🏻‍💼 Engineering Manager <br>
+    🐈‍⬛ Cat owner <br>
+    🔬 a curious person <br>
+    🇧🇬 Born in Denmark <br>
+    🇹🇷 Lived in Turkey <br>
+    🇩🇰 Lives in Denmark
+</div>
 
 {% endblock %}

blog/posts/How-do-I-track-my-baby-s-sleep.md

@@ -20,7 +20,7 @@ When it became a problem for us to keep track of when we put our baby to sleep,
 We started by determining the equipment we could use. The cradle we use is like the one below and instead of swinging sideways, it swings up and down.
 
 <figure>
-    <img style="display: block; margin-left: auto; margin-right: auto;" src="/statics/membantu.jpg">  
+    <img style="display: block; margin-left: auto; margin-right: auto;" src="/assets/membantu.jpg">  
     <figcaption style="text-align: center">Membantu Crib</figcaption>
 </figure>
 
@@ -37,7 +37,7 @@ The first thing that came to my mind was to track the crib with a motion sensor,
 
 
 <figure>
-    <img style="display: block; margin-left: auto; margin-right: auto;" src="/statics/SW420-Vibration-Sensor-Module.jpg">  
+    <img style="display: block; margin-left: auto; margin-right: auto;" src="/assets/SW420-Vibration-Sensor-Module.jpg">  
     <figcaption style="text-align: center">sw-420 vibration sensor module</figcaption>
 </figure>
 
@@ -78,7 +78,7 @@ While examining the sensors I had, I decided that I could experiment with the **
 
 
 <figure>
-    <img style="display: block; margin-left: auto; margin-right: auto;" src="/statics/Ultrasonic-Sensor-HC-SR04.jpg">  
+    <img style="display: block; margin-left: auto; margin-right: auto;" src="/assets/Ultrasonic-Sensor-HC-SR04.jpg">  
     <figcaption style="text-align: center">Ultrasonic Sensor HC-SR04</figcaption>
 </figure>
 
@@ -90,7 +90,7 @@ As shown in the figure, the expected distance per second is around 15cm.
 
 
 <figure>
-    <img style="display: block; margin-left: auto; margin-right: auto;" src="/statics/hareket.jpg">  
+    <img style="display: block; margin-left: auto; margin-right: auto;" src="/assets/hareket.jpg">  
     <figcaption style="text-align: center">Cradle Movement</figcaption>
 </figure>
 
@@ -109,7 +109,7 @@ Below is the screenshot of the **Home Assistant** screen.
 
 
 <figure>
-    <img style="display: block; margin-left: auto; margin-right: auto;" src="/statics/home-assistant-sc.jpg">  
+    <img style="display: block; margin-left: auto; margin-right: auto;" src="/assets/home-assistant-sc.jpg">  
     <figcaption style="text-align: center">Home Assistant Screenshot</figcaption>
 </figure>
 
@@ -172,7 +172,7 @@ If anyone is interested, they can check out [{% call fontawesome('fab', 'github'
 {% endcall %}
 
 <figure>
-    <img style="display: block; margin-left: auto; margin-right: auto;" src="/statics/face-mesh.png">  
+    <img style="display: block; margin-left: auto; margin-right: auto;" src="/assets/face-mesh.png">  
     <figcaption style="text-align: center">Face Scanned with Face Mesh</figcaption>
 </figure>
 
@@ -190,7 +190,7 @@ I'm now tracking my baby's sleep more accurately, but there's just one problem l
 
 
 <figure>
-    <img style="display: block; margin-left: auto; margin-right: auto;" src="/statics/home-assistant-sc2.jpg">  
+    <img style="display: block; margin-left: auto; margin-right: auto;" src="/assets/home-assistant-sc2.jpg">  
     <figcaption style="text-align: center">Home Assistant Screenshot</figcaption>
 </figure>
 
@@ -228,7 +228,7 @@ You can access the full source code of the project [{% call fontawesome('fab', '
 I developed a small **script** to monitor the baby's sleep status from the iPhone home screen with the **Scriptable** application.
 
 <figure>
-    <img style="display: block; margin-left: auto; margin-right: auto;" src="/statics/ios-sc.jpg">  
+    <img style="display: block; margin-left: auto; margin-right: auto;" src="/assets/ios-sc.jpg">  
     <figcaption style="text-align: center">IOS Screenshot</figcaption>
 </figure>
 
@@ -244,9 +244,9 @@ _Note_: I do not share the vibration and ultrasonic sensor connection diagrams,
 
 #### Links
 
-[^1]: https://www.arduino.cc/en/software
-[^2]: https://www.amazon.de/dp/B0754N794H?ref=ppx_yo2ov_dt_b_product_details&th=1
-[^3]: https://www.amazon.de/dp/B08X3GRK22?psc=1&ref=ppx_yo2ov_dt_b_product_details
-[^4]: https://www.amazon.de/dp/B0CDGHV276?psc=1&ref=ppx_yo2ov_dt_b_product_details
-[^5]: https://www.amazon.de/dp/B0B8ZT5HDW?psc=1&ref=ppx_yo2ov_dt_b_product_details
-[^6]: https://developers.google.com/mediapipe
+[^1]: [https://www.arduino.cc/en/software](https://www.arduino.cc/en/software)
+[^2]: [https://www.amazon.de/dp/B0754N794H?ref=ppx_yo2ov_dt_b_product_details&th=1](https://www.amazon.de/dp/B0754N794H?ref=ppx_yo2ov_dt_b_product_details&th=1)
+[^3]: [https://www.amazon.de/dp/B08X3GRK22?psc=1&ref=ppx_yo2ov_dt_b_product_details](https://www.amazon.de/dp/B08X3GRK22?psc=1&ref=ppx_yo2ov_dt_b_product_details)
+[^4]: [https://www.amazon.de/dp/B0CDGHV276?psc=1&ref=ppx_yo2ov_dt_b_product_details](https://www.amazon.de/dp/B0CDGHV276?psc=1&ref=ppx_yo2ov_dt_b_product_details)
+[^5]: [https://www.amazon.de/dp/B0B8ZT5HDW?psc=1&ref=ppx_yo2ov_dt_b_product_details](https://www.amazon.de/dp/B0B8ZT5HDW?psc=1&ref=ppx_yo2ov_dt_b_product_details)
+[^6]: [https://developers.google.com/mediapipe](https://developers.google.com/mediapipe)

blog/templates/default/_partial_posts.html

@@ -1,13 +1,13 @@
 <section class="mb-8">
   <ul class="flex flex-col divide-y divide-slate-200">
     {%- for post in posts %}
-    <li class="group">
+    <li class="group cursor-pointer rounded-lg hover:bg-neutral-100 active:bg-neutral-50">
       <a class="block px-0 md:px-6 py-4 text-inherit" href="{{ post_url(post.lang, post.slug) }}">
         <div class="summary flex flex-row gap-8 text-slate-700">
           <div class="flex flex-1 flex-col gap-2">
             <time class="text-xs text-slate-500 ">{{ post.date | formatdatetime("%B %d, %Y") }}</time>
             <h2 class="post_title text-balanced mb-0 ">{{ post.title -}}</h2>
-            <p class="text-balanced mb-0 text-slate-600 text-sm/6">{{ post.title -}}</p>
+            <p class="text-balanced mb-0 text-slate-600 text-sm/6">{{ post.description -}}</p>
           </div>
           <div class="my-auto group-hover:translate-x-2 transition-transform">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"

blog/templates/default/base.html

@@ -10,60 +10,19 @@
     {% block metas %}{% endblock %}
     {% block links %}{% endblock %}
     {% block scripts %}{% endblock %}
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="preconnect" href="https://rsms.me/">
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
-    <link rel="stylesheet" href="/statics/style.css">
+    <link rel="stylesheet" href="/assets/tailwindcss.css">
+    <link rel="stylesheet" href="/assets/style.css">
 
     <!-- Extension headers -->
     {%- for header in headers %}
         {{ header | safe }}
     {% endfor %}
     <!-- Extension headers -->
-
-    <link
-        href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-        rel="stylesheet">
-
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        clifford: '#da373d',
-                    }
-                }
-            }
-        }
-    </script>
-    <style type="text/tailwindcss">
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-        @layer components {
-            h1 {
-                @apply text-gray-900 font-bold text-3xl;
-            }
-            h2 {
-                @apply text-gray-900 font-bold text-lg;
-            }
-            .post > h2 {
-                @apply mt-10;
-            }
-            hr {
-                @apply my-6;
-            }
-            .post > p {
-                @apply text-base leading-8 my-5;
-            }
-            .post ol {
-                @apply list-decimal ml-5 text-base leading-7;
-            }
-        }
-    </style>
+
+    <link href="https://fonts.cdnfonts.com/css/segoe-ui-4" rel="stylesheet">
+    <link href="https://fonts.cdnfonts.com/css/proxima-nova-condensed" rel="stylesheet">   
+    <link href="https://fonts.cdnfonts.com/css/rogan" rel="stylesheet">
+    <link href="https://fonts.cdnfonts.com/css/uni-neue" rel="stylesheet">         
 </head>
 
 <body data-theme="light">
@@ -73,7 +32,7 @@
         <main class="relative p-4">
             <div class="max-w-3xl mx-auto">
                 <div
-                    class="mt-3 bg-white rounded-b lg:rounded-b-none lg:rounded-r flex flex-col justify-between leading-normal">
+                    class="mt-3 rounded-b lg:rounded-b-none lg:rounded-r flex flex-col justify-between leading-normal">
                     {% block body %}{% endblock %}
                 </div>
             </div>

blog/templates/default/footer.html

@@ -1,4 +1,4 @@
-<footer class="bg-white rounded-lg shadow m-4 dark:bg-gray-800">
+<footer class="rounded-lg shadow m-4">
     <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
         <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2024 <a
                 href="https://github.com/erhanbaris/timug" class="hover:underline">{{ config.description }}</a>. All

blog/templates/default/header.html

@@ -1,4 +1,4 @@
-<header class="lg:px-16 px-4 bg-white flex flex-wrap items-center py-4 shadow-md">
+<header class="lg:px-16 px-4 flex flex-wrap items-center shadow-md">
   <div class="flex-1 flex justify-between items-center">
       <a href="/" class="text-xl">{{ blog_name }}</a>
   </div>
@@ -14,7 +14,7 @@
 
   <div class="hidden md:flex md:items-center md:w-auto w-full" id="menu">
       <nav>
-          <ul class="md:flex items-center justify-between text-base text-gray-700 pt-4 md:pt-0">
+          <ul class="md:flex items-center justify-between text-lg text-gray-700 pt-4 md:pt-0">
             {%- for page in pages %}
             {% if page.render %}
             <li><a class="md:p-4 py-3 px-0 block" href="{{ page_url(page.slug) }}">{{ page.title }}</a></li>

blog/templates/default/index.html

@@ -5,6 +5,19 @@
 
 {% extends "base.html" %}
 {% block body %}
+{% set contacts_length = config.contacts|length %}
+
+{% if contacts_length > 0 %}
+<div class="mb-10">
+  <div class="columns is-centered column is-full">
+    Find me on
+    {%- for contact in config.contacts %}
+    <a class="hover:text-sky-700" href="{{ contact.link }}">
+      <i class="ml-1 mr-0.5 {{ contact.icon }}"></i>{% if contacts_length == loop.index %}.{% elif contacts_length-1 == loop.index %} and{% else %},{% endif %}</a>
+    {% endfor %}
+  </div>
+</div>
+{% endif %}
 
 <div class="content">
     <h1 class="columns is-centered column is-full">Posts</h1>