rawfeed 0.3.1 → 1.0.1

data/_sass/layouts/_post.scss

@@ -93,150 +93,20 @@
     margin: 40px 0px;
     font-size: 1.2rem;
   }
-}
-
-/* Automatic TOC */
-.auto-toc {
-  position: fixed;
-  left: 0;
-  top: 15vh;
-  height: auto;
-  max-height: 70vh;
-  width: 24px;
-  background: transparent;
-  z-index: 10000;
-  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, box-shadow 0.3s ease;
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  // border-radius: 0 12px 12px 0;
-  border: 2px solid transparent !important;
-  padding: 20px 0;
-
-  &:hover {
-    width: 380px;
-    background: var(--bg-color);
-    box-shadow: 8px 0 25px rgba(0, 0, 0, 0.15);
-    border: 2px dotted var(--background-focus-border-color) !important;
-    border-left: none;
-
-    .auto-toc-bars {
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    .auto-toc-content {
-      opacity: 1;
-      transform: translateX(0);
-      pointer-events: all;
-    }
-  }
 
-  .auto-toc-bars {
-    position: absolute;
-    left: 6px;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    transition: opacity 0.2s ease;
-
-    .toc-bar {
-      width: 12px;
-      height: 3px;
-      background: var(--primary-color);
-      border-radius: 2px;
-      opacity: 0.8;
-
-      &:nth-child(even) {
-        width: 8px;
-      }
-    }
-  }
-
-  .auto-toc-content {
-    width: 100%;
-    height: 100%;
-    max-height: 70vh;
-    padding: 1.5rem;
-    opacity: 0;
-    transform: translateX(-20px);
-    transition: opacity 0.3s ease, transform 0.3s ease;
-    pointer-events: none;
-    display: flex;
-    flex-direction: column;
-    background: var(--bg-color);
-
-    h2 {
-      font-size: 0.85rem;
-      text-transform: uppercase;
-      letter-spacing: 0.12em;
-      color: var(--text-muted-color);
-      margin-bottom: 1.2rem;
-      font-weight: 800;
-      border-bottom: 1px solid var(--border-color);
-      padding-bottom: 0.5rem;
-    }
-
-    .auto-toc-list {
-      flex: 1;
-      overflow-y: auto;
+  &-tags {
+    .tag-list {
       list-style: none;
-      padding: 0;
-      margin: 0;
-      padding-right: 10px;
-
-      &::-webkit-scrollbar {
-        width: 4px;
-      }
+      display: inline-flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 4px;
 
-      &::-webkit-scrollbar-thumb {
-        background: var(--border-color);
-        border-radius: 2px;
-      }
-
-      ul {
+      &__item {
         list-style: none;
-        padding-left: 1rem;
-        margin: 0.4rem 0;
-        border-left: 1px solid var(--border-color);
-      }
-
-      li {
-        margin: 0.5rem 0;
-        font-size: 0.88rem;
-
-        a {
-          color: var(--text-muted-color);
-          text-decoration: none;
-          transition: all 0.2s ease;
-          display: block;
-          line-height: 1.4;
-
-          &:hover {
-            color: var(--primary-color);
-            padding-left: 4px;
-          }
-
-          &.active {
-            color: var(--primary-color);
-            font-weight: 700;
-            border-left: 3px solid var(--primary-color);
-            padding-left: 12px;
-            margin-left: 0;
-
-            &::before {
-                display: none;
-            }
-          }
-        }
+        display: inline;
       }
     }
   }
 }
 
-/* Ensure post content doesn't get weird gaps if TOC is floating */
-@media (max-width: 1200px) {
-  .auto-toc {
-    display: none !important;
-  }
-}

data/_sass/layouts/{_tag-posts.scss → _posts_by_tag.scss}

@@ -1,10 +1,10 @@
 @use "../components/index";
 
-.tag-posts {
+.posts_by_tag {
   margin-top: -.1rem !important;
   margin-bottom: var(--margin-bottom);
 
-  &-title {
+  &__title {
     font-size: 1.05rem !important;
     font-weight: bold;
     font-style: italic;
@@ -15,7 +15,7 @@
     }
   }
 
-  &-list {
+  &__list {
     list-style: none !important;
     padding: 0 !important;
     margin: 0 !important;

data/_sass/layouts/_resume.scss

@@ -258,7 +258,7 @@
         }
       }
 
-      .sumary {
+      .summary {
         text-align: justify !important;
 
       }

data/_sass/layouts/{_tag.scss → _tags.scss}

@@ -1,6 +1,6 @@
 @use "../components/index";
 
-.tag {
+.tags {
   // box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
   // border: 1px solid #ddd;
   // background-color: white;
@@ -8,13 +8,13 @@
   @extend %markdown;
   margin-bottom: var(--margin-bottom);
 
-  &-title {
+  &__title {
     font-size: 1.05rem !important;
     font-weight: bold;
     margin: 0px 0px 30px 0px !important;
   }
 
-  &-description {
+  &__description {
     margin-bottom: 40px;
     display: flex;
     align-items: center;
@@ -24,10 +24,14 @@
     }
   }
 
-  &-list {
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+
     &__item {
-      display: inline-block;
-      margin-bottom: 12px;
+      margin-bottom: 8px;
       @extend %tags-badge;
     }
   }

data/_sass/main.scss

@@ -34,7 +34,7 @@ layout:
   --footer-border-color: #{theme.theme-color(footer-border-color, light)};
   --footer-bg-color: #{theme.theme-color(footer-bg-color, light)};
   --terminal-shadow: #{theme.theme-color(terminal-shadow, light)};
-  --sumary-bg-color: #{theme.theme-color(sumary-bg-color, light)};
+  --summary-bg-color: #{theme.theme-color(summary-bg-color, light)};
   --checkbox-border-color: #{theme.theme-color(checkbox-border-color, light)};
   --checkbox-border-color-after: #{theme.theme-color(checkbox-border-color-after, light)};
   --table-border-color: #{theme.theme-color(table-border-color, light)};
@@ -107,7 +107,7 @@ layout:
   --footer-border-color: #{theme.theme-color(footer-border-color, dark)};
   --footer-bg-color: #{theme.theme-color(footer-bg-color, dark)};
   --terminal-shadow: #{theme.theme-color(terminal-shadow, dark)};
-  --sumary-bg-color: #{theme.theme-color(sumary-bg-color, dark)};
+  --summary-bg-color: #{theme.theme-color(summary-bg-color, dark)};
   --checkbox-border-color: #{theme.theme-color(checkbox-border-color, dark)};
   --checkbox-border-color-after: #{theme.theme-color(checkbox-border-color-after, dark)};
   --table-color: #{theme.theme-color(table-color, dark)};

data/_sass/theme/_dark.scss

@@ -21,7 +21,7 @@ $theme-colors: (
   footer-border-color: #020202,
   footer-bg-color: #111111,
   terminal-shadow: 0 10px 30px rgba(0, 0, 0, 0.7),
-  sumary-bg-color: #303030,
+  summary-bg-color: #303030,
   checkbox-border-color: #2b2b2b,
   checkbox-border-color-after: #999999,
   table-border-color: #a5a5a5,
@@ -90,5 +90,5 @@ $theme-colors: (
 //   footer-border-color: #020202,
 //   footer-bg-color: #111111,
 //   terminal-shadow: 0 10px 30px rgba(0,0,0,0.7),
-//   sumary-bg-color: #1f1f1f,
+//   summary-bg-color: #1f1f1f,
 // );

data/_sass/theme/_light.scss

@@ -13,7 +13,7 @@ $theme-colors: (
   footer-border-color: #e4e4e4,
   footer-bg-color: #f3f3f3,
   terminal-shadow: 0 10px 30px rgba(0, 0, 0, 0.7),
-  sumary-bg-color: #fbfbfb,
+  summary-bg-color: #fbfbfb,
   checkbox-border-color: #d3d3d3,
   checkbox-border-color-after: #1f1f1f,
   table-border-color: #a5a5a5,

data/assets/js/blog.js

@@ -1,7 +1,7 @@
 ---
 ---
 
-{%- include layout/data.liquid -%}
+{%- include assigned -%}
 
 document.addEventListener("DOMContentLoaded", () => {
   const btn = document.getElementById('blog-search__btn');
@@ -9,9 +9,9 @@ document.addEventListener("DOMContentLoaded", () => {
   const searchInput = document.getElementById('blog-search__input');
   const blogPosts = document.getElementById('posts');
   const searchResults = document.getElementById('blog-search__results');
-  const searchResultsWrapper = document.getElementById('blog-search__results-wrapper');
+  const searchResultsWrap = document.getElementById('blog-search__results-wrap');
   const btnSearchClean = document.getElementById('blog-search__btn-clean');
-  const blogSeachInput = document.getElementById('blog-search__input');
+  const blogSearchInput = document.getElementById('blog-search__input');
 
 
   if (!btn || !box) return;
@@ -27,7 +27,7 @@ document.addEventListener("DOMContentLoaded", () => {
         box.removeEventListener('transitionend', onOpened);
       }
     });
-    blogSeachInput.focus();
+    blogSearchInput.focus();
   };
 
   const closeSearch = () => {
@@ -59,7 +59,7 @@ document.addEventListener("DOMContentLoaded", () => {
       closeSearch();
       searchInput.value = '';
       blogPosts.classList.remove('disabled');
-      searchResultsWrapper.classList.add('disabled');
+      searchResultsWrap.classList.add('disabled');
     } else {
       openSearch();
     }
@@ -75,11 +75,11 @@ document.addEventListener("DOMContentLoaded", () => {
   --------------------------------------------------------------------------------------------------
   */
   function clearSearch() {
-    blogSeachInput.value = '';
+    blogSearchInput.value = '';
     blogPosts.classList.remove('disabled');
     searchResults.classList.add('disabled');
-    searchResultsWrapper.classList.add('disabled');
-    blogSeachInput.focus();
+    searchResultsWrap.classList.add('disabled');
+    blogSearchInput.focus();
   }
   btnSearchClean.addEventListener('click', clearSearch);
   document.addEventListener('keydown', (e) => {
@@ -92,22 +92,56 @@ document.addEventListener("DOMContentLoaded", () => {
   /* open results and close posts in search (toggle)
   --------------------------------------------------------------------------------------------------
   */
+  /* Fuse.js search implementation
+  --------------------------------------------------------------------------------------------------
+  */
+  let fuse;
+  const searchJsonUrl = "{{ '/assets/json/blog_search.json' | relative_url }}";
+
+  fetch(searchJsonUrl)
+    .then(response => response.json())
+    .then(data => {
+      fuse = new Fuse(data, {
+        keys: ['title', 'tags'],
+        threshold: 0.3,
+        includeMatches: true
+      });
+    })
+    .catch(error => {
+      console.error('Error fetching search data:', error);
+    });
+
+  function renderResults(results) {
+    if (results.length === 0) {
+      searchResults.innerHTML = '<p>{{ blog.no_results | default: "No results found" }}</p>';
+      return;
+    }
+
+    const html = results.map(result => {
+      const item = result.item;
+      // Using existing template logic
+      return `<li><span class="blog-list__meta"><time datetime="${item.date}">${item.date}</time></span>&nbsp;»&nbsp; <a class="blog-list__link" href="${item.url}">${item.title}</a></li>`;
+    }).join('');
+
+    searchResults.innerHTML = html;
+  }
+
   searchInput.addEventListener('input', () => {
-    if (searchInput.value.trim().length > 0) {
+    const query = searchInput.value.trim();
+    if (query.length > 0) {
       blogPosts.classList.add('disabled');
       searchResults.classList.remove('disabled');
-      searchResultsWrapper.classList.remove('disabled');
+      searchResultsWrap.classList.remove('disabled');
+
+      if (fuse) {
+        const results = fuse.search(query);
+        renderResults(results);
+      }
     } else {
       blogPosts.classList.remove('disabled');
       searchResults.classList.add('disabled');
-      searchResultsWrapper.classList.add('disabled');
+      searchResultsWrap.classList.add('disabled');
+      searchResults.innerHTML = '';
     }
   });
-  var sjs = SimpleJekyllSearch({
-    searchInput: document.getElementById('blog-search__input'),
-    resultsContainer: document.getElementById('blog-search__results'),
-    searchResultTemplate: '<li><span class="blog-list__meta"><time datetime="{date}">{date}</time></span>&nbsp;»&nbsp; <a class="blog-list__link" href="{{ site.url }}{url}">{title}</a></li>',
-    noResultsText: '<p>{{ blog_.no_results | default: "No results found" }}</p>',
-    json: "{{ '/assets/json/blog_search.json' | relative_url }}"
-  })
 });

data/assets/js/contact.js

@@ -1,17 +1,18 @@
 ---
 ---
 
-{%- include layout/data.liquid -%}
+{%- include assigned -%}
 
 document.addEventListener("DOMContentLoaded", () => {
   const form = document.getElementById("contactForm");
   if (form) {
     const submitButton = document.getElementById("submitButton");
-    const endpoint = "{{ head_.google.apps_script.url }}"; // URL Google Apps Script
+    const endpoint = "{{ head.google.apps_script.url }}"; // URL Google Apps Script
 
     // get modal
     function showModal(title, message, type = 'success') {
       const modalEl = document.getElementById('contactMessageModal');
+      if (!modalEl) return;
       const modalTitle = modalEl.querySelector('.modal-title');
       const modalBody = modalEl.querySelector('.modal-body');
       const modalContent = modalEl.querySelector('.modal-content');
@@ -38,29 +39,29 @@ document.addEventListener("DOMContentLoaded", () => {
     form.addEventListener("submit", async (e) => {
       e.preventDefault();
 
-      const recaptchaResponse = grecaptcha.getResponse();
-      if (!recaptchaResponse) {
+      if (typeof grecaptcha === 'undefined' || !grecaptcha.getResponse()) {
         showModal(
-          "{{ contact_.recaptcha.warning.title | default: 'Warning' }}",
-          `{{ contact_.recaptcha.warning.content | default: "Please tick the 'I'm not a robot' box." }}`,
+          "{{ contact.recaptcha.warning.title | default: 'Warning' }}",
+          `{{ contact.recaptcha.warning.content | default: "Please tick the 'I'm not a robot' box." }}`,
           "warning"
         );
         return;
       }
 
       const textarea = document.getElementById('textMessage');
+      if (!textarea) return;
       const text = textarea.value.trim();
-      if (text.length < "{{ contact_.message.caracters.min }}" ) {
+      if (text.length < "{{ contact.message.characters.min }}" ) {
         showModal(
-          "{{ contact_.message.caracters.warning.title | default: 'Warning' }}",
-          "{{ contact_.message.caracters.warning.content | default: 'The message must have at least 50 characters.' }}",
+          "{{ contact.message.characters.warning.title | default: 'Warning' }}",
+          "{{ contact.message.characters.warning.content | default: 'The message must have at least 50 characters.' }}",
           "warning"
         );
         return;
       }
 
       submitButton.disabled = true;
-      submitButton.textContent = "{{ contact_.message.status | default: 'Sending...Wait' }}";
+      submitButton.textContent = "{{ contact.message.status | default: 'Sending...Wait' }}";
 
       const formData = new FormData(form);
       const data = Object.fromEntries(formData.entries());
@@ -80,31 +81,31 @@ document.addEventListener("DOMContentLoaded", () => {
           form.reset();
           grecaptcha.reset();
           showModal(
-            "{{ contact_.message.success.title | default: 'Message Sent' }}",
-            "{{ contact_.message.success.content | default: 'Your message has been sent successfully!' }}",
+            "{{ contact.message.success.title | default: 'Message Sent' }}",
+            "{{ contact.message.success.content | default: 'Your message has been sent successfully!' }}",
             "success"
           );
         } else {
           showModal(
-            "{{ contact_.message.error.title | default: 'Error' }}",
-            "{{ contact_.message.error.content | default: 'Something went wrong while sending your message.' }}",
+            "{{ contact.message.error.title | default: 'Error' }}",
+            "{{ contact.message.error.content | default: 'Something went wrong while sending your message.' }}",
             "error"
           );
-          throw new Error(result.message || "{{ contact_.message.error.content | default: 'An unknown error has occurred.' }}");
+          throw new Error(result.message || "{{ contact.message.error.content | default: 'An unknown error has occurred.' }}");
         }
 
       } catch (error) {
         console.error("Error sending:", error);
         if (error.message.includes("reCAPTCHA")) {
             showModal(
-              "{{ contact_.message.error.title | default: 'Error' }}",
-              "{{ contact_.recaptcha.fail | default: 'Verification failed. Please reload the page and try again.' }}",
+              "{{ contact.message.error.title | default: 'Error' }}",
+              "{{ contact.recaptcha.fail | default: 'Verification failed. Please reload the page and try again.' }}",
               "error"
             );
         } else {
             showModal(
-              "{{ contact_.message.error.title | default: 'Error' }}",
-              "{{ contact_.recaptcha.error | default: 'An error occurred while sending the message. Please try again.' }}",
+              "{{ contact.message.error.title | default: 'Error' }}",
+              "{{ contact.recaptcha.error | default: 'An error occurred while sending the message. Please try again.' }}",
               "error"
             );
         }
@@ -112,7 +113,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
       } finally {
         submitButton.disabled = false;
-        submitButton.textContent = "{{ contact_.button.text | default: 'Send!' }}";
+        submitButton.textContent = "{{ contact.button.text | default: 'Send!' }}";
       }
     });
   }

data/assets/js/default.js

@@ -14,7 +14,7 @@ document.addEventListener("DOMContentLoaded", () => {
   if (modalEl) {
     const flipperAvatars = document.querySelectorAll('.avatar-flipper__open-true');
     const modalAvatar = document.getElementById('modalAvatar');
-    const header = document.querySelector('.header');
+    const navigation = document.querySelector('.navigation');
     const bsModal = new bootstrap.Modal(modalEl);
 
     flipperAvatars.forEach((flipper) => {
@@ -43,7 +43,7 @@ document.addEventListener("DOMContentLoaded", () => {
       modalAvatar.classList.remove("modal-avatar");
       void modalAvatar.offsetWidth;
       modalAvatar.classList.add("modal-avatar");
-      header.classList.remove("modal-active");
+      navigation.classList.remove("modal-active");
 
       flipperAvatars.forEach((flipper) => flipper.classList.add("hidden"));
     });
@@ -60,18 +60,20 @@ document.addEventListener("DOMContentLoaded", () => {
   const topButton = document.getElementById("top-link");
   const scrollThreshold = 700;
 
-  window.addEventListener("scroll", () => {
-    if (window.scrollY > scrollThreshold) {
-      topButton.classList.add("show");
-    } else {
-      topButton.classList.remove("show");
-    }
-  });
+  if (topButton) {
+    window.addEventListener("scroll", () => {
+      if (window.scrollY > scrollThreshold) {
+        topButton.classList.add("show");
+      } else {
+        topButton.classList.remove("show");
+      }
+    });
 
-  topButton.addEventListener("click", (e) => {
-    e.preventDefault();
-    window.scrollTo({ top: 0, behavior: "smooth" });
-  });
+    topButton.addEventListener("click", (e) => {
+      e.preventDefault();
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    });
+  }
 
   /* function Giscus
   --------------------------------------------------------------------------------------------------
@@ -94,7 +96,7 @@ document.addEventListener("DOMContentLoaded", () => {
       // Let's use a timeout to ensure the Giscus iframe is ready
       const giscusInterval = setInterval(() => {
         const giscusFrame = document.querySelector('iframe.giscus-frame');
-        // Se o iframe existir no documento...
+        // If the iframe exists in the document...
         if (giscusFrame) {
           // ...we sent the message...
           giscusFrame.contentWindow.postMessage(message, 'https://giscus.app');
@@ -115,39 +117,43 @@ document.addEventListener("DOMContentLoaded", () => {
   --------------------------------------------------------------------------------------------------
   */
   const toggleButton = document.getElementById('toggle-theme');
-  const icon = toggleButton.querySelector('i');
-  // const avatar = document.getElementById('avatarImage');
   const root = document.documentElement;
 
-  function setTheme(theme) {
-    root.setAttribute('data-theme', theme);
+  if (toggleButton) {
+    const icon = toggleButton.querySelector('i');
 
-    icon.classList.remove('fa-sun', 'fa-moon');
-    icon.classList.add(theme === 'dark' ? 'fa-sun' : 'fa-moon');
+    function setTheme(theme) {
+      root.setAttribute('data-theme', theme);
 
-    if (typeof setGiscusTheme === 'function') {
-      setGiscusTheme(theme);
-    }
+      if (icon) {
+        icon.classList.remove('fa-sun', 'fa-moon');
+        icon.classList.add(theme === 'dark' ? 'fa-sun' : 'fa-moon');
+      }
 
-    // if (avatar) {
-    //   avatar.src = theme === 'light'
-    //     ? avatar.dataset.light
-    //     : avatar.dataset.dark;
-    // }
+      if (typeof setGiscusTheme === 'function') {
+        setGiscusTheme(theme);
+      }
 
-    localStorage.setItem('theme', theme);
+      // if (avatar) {
+      //   avatar.src = theme === 'light'
+      //     ? avatar.dataset.light
+      //     : avatar.dataset.dark;
+      // }
 
-  }
+      localStorage.setItem('theme', theme);
 
-  // boot with saved or light
-  setTheme(localStorage.getItem('theme') || 'light');
+    }
 
-  // change theme on click
-  toggleButton.addEventListener('click', () => {
-    const current = root.getAttribute('data-theme');
-    const next = current === 'light' ? 'dark' : 'light';
-    setTheme(next);
-  });
+    // boot with saved or light
+    setTheme(localStorage.getItem('theme') || 'light');
+
+    // change theme on click
+    toggleButton.addEventListener('click', () => {
+      const current = root.getAttribute('data-theme');
+      const next = current === 'light' ? 'dark' : 'light';
+      setTheme(next);
+    });
+  }
 
 
   /* highlight code
@@ -174,19 +180,30 @@ document.addEventListener("DOMContentLoaded", () => {
     highlightBlock.parentNode.insertBefore(container, highlightBlock);
     container.appendChild(header);
     container.appendChild(highlightBlock);
+  });
 
-    // event copy
-    button.addEventListener("click", () => {
-      const codeElement = highlightBlock.querySelector("td.code");
-      const textToCopy = codeElement ? codeElement.innerText.trim() : highlightBlock.innerText.trim();
-
-      navigator.clipboard.writeText(textToCopy).then(() => {
-        icon.className = "fa-solid fa-check";
-        setTimeout(() => (icon.className = "fa-solid fa-clipboard"), 2000);
-      }, () => {
-        icon.className = "fa-solid fa-xmark";
-        setTimeout(() => (icon.className = "fa-solid fa-clipboard"), 2000);
-      });
+  // event delegation for copy buttons (works even on cloned nodes inside <details>)
+  document.addEventListener("click", (e) => {
+    const btn = e.target.closest(".copy-btn");
+    if (!btn) return;
+
+    const container = btn.closest(".code-block-container");
+    if (!container) return;
+
+    const highlightBlock = container.querySelector(".highlight, figure.highlight");
+    if (!highlightBlock) return;
+
+    const codeElement = highlightBlock.querySelector("td.code");
+    const textToCopy = codeElement ? codeElement.innerText.trim() : highlightBlock.innerText.trim();
+
+    const icon = btn.querySelector("i");
+
+    navigator.clipboard.writeText(textToCopy).then(() => {
+      icon.className = "fa-solid fa-check";
+      setTimeout(() => (icon.className = "fa-solid fa-clipboard"), 2000);
+    }, () => {
+      icon.className = "fa-solid fa-xmark";
+      setTimeout(() => (icon.className = "fa-solid fa-clipboard"), 2000);
     });
   });