feat: add share message and buttons on the top of posts

a-chacon · Sep 8, 2024 · a873c8d · a873c8d
1 parent 05ae840
commit a873c8d
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 50 deletions.
diff --git a/_data/en/strings.yml b/_data/en/strings.yml
@@ -11,3 +11,5 @@ footer:
 blog:
   read_more: "Read More ->"
   more_articles: "More Posts"
+post:
+  share: Like it? Share it!
diff --git a/_data/es/strings.yml b/_data/es/strings.yml
@@ -8,7 +8,8 @@ footer:
   title: "Mantengamosnos en contacto!"
   description: "Encuéntrame en cualquiera de estas plataformas:"
   pages: Páginas
-
 blog:
   read_more: "Read More ->"
   more_articles: "Más Artículos"
+post:
+  share: ¿Te gustó? ¡Compártelo!
diff --git a/_includes/sharing.html b/_includes/sharing.html
@@ -1,4 +1,4 @@
-<div class="sharing-buttons flex flex-wrap gap-1 justify-center ">
+<div class="sharing-buttons flex {{ include.custom_class }} flex-wrap gap-1 justify-center ">
   <a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition p-2 rounded-full text-white border-slate-600 bg-slate-600 hover:bg-slate-700 hover:border-slate-700"
     target="_blank" rel="noopener"
     href="https://facebook.com/sharer/sharer.php?u={{ site.url | uri_escape | append: site.baseurl | append: page.url }}"

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,42 +1,38 @@
 <!doctype html>
 <html lang="{{site.active_lang}}">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      href="{{ '/assets/css/dist-style.css' | relative_url }}"
-      rel="stylesheet"
-    />
-    <link
-      href="{{ '/assets/css/fonts.css' | relative_url }}"
-      rel="stylesheet"
-    />
-    {% if site.typewriter_effect %}
-    <script src="https://unpkg.com/[email protected]/dist/index.umd.js"></script>
-    {% endif %} {% seo %} {% include custom_head.html %}
-  </head>
 
-  <body class="bg-white text-gray-700 dark:bg-gray-700 dark:text-slate-100">
-    {% if site.typewriter_effect %}
-    <script>
-      document.addEventListener("DOMContentLoaded", function () {
-        new TypeIt("h1", {}).go();
-      });
-    </script>
-    {% endif %} {% include navbar.html %} {{ content }} {% include footer.html
-    %}
-    <script>
-      document.querySelectorAll("a").forEach(function (link) {
-        link.addEventListener("click", function (event) {
-          event.preventDefault(); // Prevent the default link action temporarily
-          link.classList.add("gentle-clicked");
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="{{ '/assets/css/dist-style.css' | relative_url }}" rel="stylesheet" />
+  <link href="{{ '/assets/css/fonts.css' | relative_url }}" rel="stylesheet" />
+  {% if site.typewriter_effect %}
+  <script src="https://unpkg.com/[email protected]/dist/index.umd.js"></script>
+  {% endif %} {% seo %} {% include custom_head.html %}
+</head>
+
+<body class="bg-white text-gray-900 dark:bg-gray-700 dark:text-slate-100">
+  {% if site.typewriter_effect %}
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      new TypeIt("h1", {}).go();
+    });
+  </script>
+  {% endif %} {% include navbar.html %} {{ content }} {% include footer.html
+  %}
+  <script>
+    document.querySelectorAll("a").forEach(function (link) {
+      link.addEventListener("click", function (event) {
+        event.preventDefault(); // Prevent the default link action temporarily
+        link.classList.add("gentle-clicked");
 
-          setTimeout(function () {
-            link.classList.remove("gentle-clicked");
-            window.location.href = link.href; // Navigate to the link after the animation
-          }, 300); // Duration of the gentle bounce animation
-        });
+        setTimeout(function () {
+          link.classList.remove("gentle-clicked");
+          window.location.href = link.href; // Navigate to the link after the animation
+        }, 300); // Duration of the gentle bounce animation
       });
-    </script>
-  </body>
+    });
+  </script>
+</body>
+
 </html>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -11,33 +11,44 @@
         {{ page.categories[0] | upcase }}
       </a>
     </div>
+
     <h1 class="text-left text-2xl font-bold md:text-5xl text-black">{{page.title}}</h1>
-    <div class="flex text-sm font-mulish">
-      <p>{{ page.author }}</p>
-      <p class="px-2">•</p>
-      <p>{{ page.date | date: "%-d %B %Y" }}</p>
-      <p class="px-2">•</p>
-      <p>
-        {% assign words = content | number_of_words %}
-        {% if words < 360 %} 1 min {% else %} {{ words | divided_by: 180 }} mins {% endif %} </p>
+
+    <div class="flex flex-col md:flex-row text-sm font-mulish justify-between items-center">
+      <div class="flex">
+        <p>{{ page.author }}</p>
+        <p class="px-2">•</p>
+        <p>{{ page.date | date: "%-d %B %Y" }}</p>
+        <p class="px-2">•</p>
+        <p>
+          {% assign words = content | number_of_words %}
+          {% if words < 360 %} 1 min {% else %} {{ words | divided_by: 180 }} mins {% endif %} </p>
+      </div>
+      <div>
+        {% include sharing.html %}
+      </div>
     </div>
 
-    <img class="mt-0" src="{{page.image | relative_url}}" alt="{{page.title}}">
+    <img class="w-full" src="{{page.image | relative_url}}" alt="{{page.title}}">
 
     <div class="my-6">
       {{content}}
     </div>
 
     <div class="mx-auto py-8">
+      <p class="text-center font-extrabold italic">
+        {{ site.data[site.active_lang].strings.post.share | default:
+        site.data['en'].strings.post.share}}
+      </p>
       {% include sharing.html %}
     </div>
 
     <div class="font-mulish flex justify-center mb-10">
       {% if page.previous.url %}
-      <a class="pr-2" href="{{page.previous.url}}">&laquo; {{ page.previous.title }}</a>
+      <a class="pr-2" href="{{page.previous.url | relative_url}}">&laquo; {{ page.previous.title }}</a>
       {% endif %}
       {% if page.next.url %}
-      <a class="pl-2" href="{{page.next.url}}">{{ page.next.title }} &raquo;</a>
+      <a class="pl-2" href="{{page.next.url | relative_url}}">{{ page.next.title }} &raquo;</a>
       {% endif %}
     </div>
 

diff --git a/assets/css/dist-style.css b/assets/css/dist-style.css