whiteblog-theme 0.0.13 → 0.0.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bf7739d3efd1f44653467fd7244334f09fb84e47fa61a00b22a3f78da3f182b6
-  data.tar.gz: 9754f8d9f86bdfd016b586154c109ac86b748c05a9f4276b00fb66fad19d3fae
+  metadata.gz: 10bc04709c0ac729b145affc621390fc5b2a06c7f5e6e2c2853cc33db3197b82
+  data.tar.gz: 680363d5dd313280a5e95152f8cada0be0cfc446505a04654b1c16ff2b3a2933
 SHA512:
-  metadata.gz: 2aca0a17e4a40e01c8ac419f94882de2f4fe02b3473d9af14464e1677bb82d2a78bb226f19329073a8a4d3be72a6d470280d7414d693d0f5179172f46de989ef
-  data.tar.gz: 5fb0275efbba935ca86c97d7937e044712b4a2d27223e7caedae86b3349374374f520f56de2319b07c70c8b44fc04587e28faa78a39fa1aef3c5450eec4fda17
+  metadata.gz: 1adeff909b69796d1e0b8761538b0b21638ef6e21725a8cf33404ca326a4fa533e802e18a1c3503adbbaa2d2794c6a9cc685779ca19a19cb280ce209e2616f45
+  data.tar.gz: 2539e3a5f05aaa6bbe60bc43c712185c2e947db20afcf76b08e971049221b90a45179479ac0d39e750da4572e2c1d098c7d94e914c468c5013c9b68e7a65a674

data/_includes/backtotop.html

@@ -1,3 +1,8 @@
 <div class="col float-end">
-  <a class="float-end back" href="#"><i class="bi bi-chevron-double-up"></i></a>
+  <a class="float-end back" href="#">
+    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-chevron-double-up" viewBox="0 1 16 16">
+      <path fill-rule="evenodd" d="M7.646 2.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 3.707 2.354 9.354a.5.5 0 1 1-.708-.708z"/>
+      <path fill-rule="evenodd" d="M7.646 6.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 7.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"/>
+    </svg>
+  </a>
 </div>

data/_includes/footer.html

@@ -2,7 +2,16 @@
   <div class="container">  
     <div class="row">
       <div class="col-12 col-lg">
-        <p>Made with <i class="bi bi-suit-heart-fill"></i> and <i class="bi bi-cup-fill"></i>. Powered by <a class="link" href="https://jekyllrb.com/">Jekyll</a> and <a class="link" href="https://github.com/vmsilvamolina/whiteblog-theme">whiteblog-theme</a>.</p>
+        <p>
+          Made with 
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-suit-heart-fill" viewBox="0 0 16 16">
+            <path d="M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1"/>
+          </svg>
+          and 
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cup-fill" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" d="M.11 3.187A.5.5 0 0 1 .5 3h13a.5.5 0 0 1 .488.608l-.22.991a3.001 3.001 0 0 1-1.3 5.854l-.132.59A2.5 2.5 0 0 1 9.896 13H4.104a2.5 2.5 0 0 1-2.44-1.958L.012 3.608a.5.5 0 0 1 .098-.42Zm12.574 6.288a2 2 0 0 0 .866-3.899z"/>
+          </svg>
+          . Powered by <a class="link" href="https://jekyllrb.com/">Jekyll</a> and <a class="link" href="https://github.com/vmsilvamolina/whiteblog-theme">whiteblog-theme</a>.</p>
       </div>
     </div>
   </div>

data/_includes/sharepost.html

@@ -4,10 +4,20 @@
     <div class="col float-start">
       <ul>
         <li>
-          <a class="link" href="https://twitter.com/share?text={{ page.title | url_encode }}&url={{ site.url }}{{ page.url }}" target="_blank" rel="noopener" title="X.com"><i class="bi bi-twitter-x"></i> Share on X</a>
+          <a class="link" href="https://twitter.com/share?text={{ page.title | url_encode }}&url={{ site.url }}{{ page.url }}" target="_blank" rel="noopener" title="X.com">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
+              <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"/>
+            </svg>
+            Share on X
+          </a>
         </li>
         <li>
-          <a class="link" href="https://linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ page.url }}" target="_blank" rel="noopener" title="LinkedIn"><i class="bi bi-linkedin"></i> Share on LinkedIn</a>
+          <a class="link" href="https://linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ page.url }}" target="_blank" rel="noopener" title="LinkedIn">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
+              <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/>
+            </svg>
+            Share on LinkedIn
+          </a>
         </li>
       </ul>
 

data/_layouts/categories.html

@@ -15,11 +15,18 @@ title: Categories
       <p></p>
       <h5 style='color:white !important;'><a class="badge badge-{{ category_name }}">{{ category_name }}</a></h5>
       <a name="{{ category_name | slugize }}"></a>
+      <table>
       {% for post in site.categories[category_name] %}
-      <article class="archive-item">
-        <p><a href="{{ site.baseurl }}{{ post.url }}">{{post.title}}</a></p>
-      </article>
+        <tr>
+          <th style="padding-right: 10px;">
+              (<time datetime="{{ post.date | date_to_xmlschema }}" class="post-date">{{ post.date | date: "%b %-d, %Y" }}</time>)
+          </th>
+        <th>
+          <a href="{{ site.baseurl }}{{ post.url }}">{{post.title}}</a>
+        </th>
+      </tr>
       {% endfor %}
+    </table>
     </div>
 {% endfor %}
   </div>

data/_layouts/default.html

@@ -4,7 +4,7 @@
 <html lang="{{ page.lang | default: site.lang | default: "en" }}">
 
   <title>{{ page.title }}</title>
-
+  <link rel="icon" type="image/x-icon" href="/assets/images/favicon.svg">
   {% include head.html %}
 
   <body>
@@ -19,10 +19,7 @@
 
     {% include footer.html %}
 
-    <!-- jQuery, Popper.js, Bootstrap JS -->
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+    <script src="{{ '/assets/js/main.js' | relative_url }}"></script>
 
   </body>
 

data/_sass/whiteblog-theme/_layout.scss

@@ -1,18 +1,11 @@
 @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
-@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
 
 //Color palette variables:
-// $firstColor: #FFF;
 $firstColor: #F5F5F5;
-// $secondColor: #19E9E0;
 $secondColor: #44cdd5;
-// $thirdColor: #A64AC9;
 $thirdColor: #614bc3;
-// $fourthColor: #000;
 $fourthColor: #212529;
 $fifthColor: #6C757D;
-// $sixthColor: #FF8484;
-// $sixthColor: #26C485;
 $sixthColor: #25E498;
 
 
@@ -41,10 +34,7 @@ main {
 .navbar {
   background-color: $firstColor !important;
   padding: 30px 0px !important;
-  // a {
-  //   font-weight: 600;
-  //   // color: $firstColor !important;
-  // }
+  
   a#blog-title{
     position: relative;
     font-weight: bold;
@@ -172,6 +162,26 @@ blockquote {
   padding: 0.75rem;
   margin-bottom: 1rem;
   white-space: pre-wrap;
+
+  position: relative;
+  overflow: auto;
+
+  margin: 5px 0;
+  padding: 1.75rem 0 1.75rem 1rem;
+  border-radius: 10px;
+
+  button {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    color: $firstColor;
+    background: none; 
+    border: none; 
+  }
+
+  button:hover {
+    cursor: pointer;
+  }
 }
 
 #search-input {
@@ -239,6 +249,10 @@ a.badge {
   padding: 1px 10px;
 }
 
+svg {
+  vertical-align: sub !important;
+}
+
 #share-links ul {
   list-style-type: none;
   padding-left: 0px;
@@ -267,6 +281,7 @@ h1 > .underline {
   transition: box-shadow .3s;
   color: inherit;
   overflow: hidden;
+  font-size: 2rem;
 }
 
 a > .underline {
@@ -298,9 +313,9 @@ a > .underline {
 	}
 	
 	&:hover::before {
-		left: -5px;
+		left: -2px;
 		bottom: 0;
 		height: 100%;
-		width: calc(100% + 5px);
+		width: calc(100% + 2px);
 	}	
 }

data/assets/images/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 508 508"><path d="M425.6 6H390v192c0 9.6-5.6 20-15.6 20H70c-10 0-20-10-20-20V6H22.4C14.4 6 6 10.4 6 18v467.6c0 7.6 8.8 16.4 16.4 16.4H50V268c0-1.2.8-2 2-2h404c1.2 0 2 .8 2 2v234h32c7.6 0 12-8.4 12-16.4V82.8z" style="fill:#2884a9"/><path d="M54 266h400v236H54z" style="fill:#73badd"/><path d="M54 6v192c0 7.6 8.4 16 16 16h304.4c7.6 0 11.6-8.4 11.6-16V6z" style="fill:#e8e3e3"/><path d="M282 38h72v144h-72z" style="fill:#2884a9"/><path d="M278 184v2h2c-1.2 0-2-.8-2-2" style="fill:#c99"/><path d="M490 508H22.4C11.2 508 0 496.8 0 485.6V18C0 6.8 11.6 0 22.4 0h404c1.2 0 2 .4 2.8 1.2l77.6 78c.8.8 1.2 1.6 1.2 2.8v404c0 10.8-6.8 22-18 22M22.4 8C15.6 8 8 12 8 18v467.6C8 492 16 500 22.4 500H490c6 0 10-7.6 10-14.4v-402L424.8 8z"/><path d="M456 506c-2.4 0-4-1.6-4-4V268h-18c-2.4 0-4-1.6-4-4s1.6-4 4-4h22c2.4 0 4 1.6 4 4v238c0 2.4-1.6 4-4 4m-404 0c-2.4 0-4-1.6-4-4V264c0-2.4 1.6-4 4-4h350c2.4 0 4 1.6 4 4s-1.6 4-4 4H56v234c0 2.4-1.6 4-4 4m322.4-286H70c-10.8 0-22-11.2-22-22V6c0-2.4 1.6-4 4-4s4 1.6 4 4v192c0 6.8 7.6 14 14 14h304.4c6 0 9.6-7.2 9.6-14V6c0-2.4 1.6-4 4-4s4 1.6 4 4v192c0 10.4-6 22-17.6 22"/><path d="M158.4 220c-11.2 0-22.4-11.2-22.4-22V6c0-2.4 1.6-4 4-4s4 1.6 4 4v192c0 6.4 8 14 14.4 14 2.4 0 4 1.6 4 4s-1.6 4-4 4M356 188h-76c-2.4 0-4-1.6-4-4V36c0-2.4 1.6-4 4-4h38c2.4 0 4 1.6 4 4s-1.6 4-4 4h-34v140h68V40h-2c-2.4 0-4-1.6-4-4s1.6-4 4-4h6c2.4 0 4 1.6 4 4v148c0 2.4-1.6 4-4 4m54 136H102c-2.4 0-4-1.6-4-4s1.6-4 4-4h308c2.4 0 4 1.6 4 4s-1.6 4-4 4m0 64H102c-2.4 0-4-1.6-4-4s1.6-4 4-4h308c2.4 0 4 1.6 4 4s-1.6 4-4 4m0 64H102c-2.4 0-4-1.6-4-4s1.6-4 4-4h308c2.4 0 4 1.6 4 4s-1.6 4-4 4"/></svg>

data/assets/js/main.js

@@ -0,0 +1,44 @@
+const copyButtonSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-copy" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/>
+</svg>`;
+
+const checkmarkSVG = `Copied <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16">
+  <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/>
+</svg>`;
+
+// use a class selector if available
+let blocks = document.querySelectorAll("pre");
+
+blocks.forEach((block) => {
+  // only add button if browser supports Clipboard API
+  if (navigator.clipboard) {
+    let button = document.createElement("button");
+    button.innerHTML = copyButtonSVG;
+    button.style.position = "absolute";
+    button.style.top = "5px";
+    button.style.right = "5px";
+    block.style.position = "relative";
+    block.appendChild(button);
+    button.addEventListener("click", async () => {
+      await copyCode(block, button);
+    });
+  }
+});
+
+async function copyCode(block, button) {
+  let code = block.querySelector("code");
+  let text = code.innerText;
+  await navigator.clipboard.writeText(text);
+  
+  // visual feedback that task is completed
+  button.innerHTML = checkmarkSVG; // Checkmark symbol
+  button.style.backgroundColor = "green";
+  button.style.color = "white";
+  button.style.borderRadius = "4px";
+
+  setTimeout(() => {
+    button.innerHTML = copyButtonSVG;
+    button.style.backgroundColor = "";
+    button.style.color = "";
+  }, 1000);
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: whiteblog-theme
 version: !ruby/object:Gem::Version
-  version: 0.0.13
+  version: 0.0.14
 platform: ruby
 authors:
 - Victor Silva
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-07-05 00:00:00.000000000 Z
+date: 2024-08-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -95,12 +95,14 @@ files:
 - _sass/whiteblog-theme/_syntax-highlighting.scss
 - assets/css/main.scss
 - assets/css/previews.css
+- assets/images/favicon.svg
 - assets/images/previews/hello-world.png
 - assets/images/previews/otro-post.png
 - assets/images/previews/test-post.png
 - assets/images/previews/welcome-jekyll.png
 - assets/images/previews/yet-another-post.png
 - assets/js/jekyll-search.min.js
+- assets/js/main.js
 homepage: https://github.com/vmsilvamolina/whiteblog-theme
 licenses:
 - MIT