rawfeed 0.1.4 → 0.2.0

data/assets/js/contact.coffee

@@ -0,0 +1,105 @@
+---
+---
+
+{%- include layout/data.liquid -%}
+
+document.addEventListener "DOMContentLoaded", ->
+
+  contact = document.getElementById "contact"
+
+  if contact
+    form = document.getElementById "contactForm"
+    submitButton = document.getElementById "submitButton"
+    endpoint = "{{ head_.google.apps_script.url }}"  # URL Google Apps Script
+
+    # função para exibir modal
+    showModal = (title, message, type = 'success') ->
+      modalEl = document.getElementById 'contactMessageModal'
+      modalTitle = modalEl.querySelector '.modal-title'
+      modalBody = modalEl.querySelector '.modal-body'
+      modalContent = modalEl.querySelector '.modal-content'
+
+      modalContent.classList.remove 'contact-message-success', 'contact-message-error', 'contact-message-warning'
+
+      # Aplica a cor de acordo com o tipo
+      if type is 'success'
+        modalContent.classList.add 'contact-message-success'
+      else if type is 'error'
+        modalContent.classList.add 'contact-message-error'
+      else if type is 'warning'
+        modalContent.classList.add 'contact-message-warning'
+
+      modalTitle.innerHTML = title
+      modalBody.innerHTML = message
+
+      bsModal = new bootstrap.Modal modalEl
+      bsModal.show()
+
+    form.addEventListener "submit", (e) ->
+      e.preventDefault()
+
+      recaptchaResponse = grecaptcha.getResponse()
+      unless recaptchaResponse
+        showModal(
+          """{{ contact_.recaptcha.warning.title | default: "Warning" }}""",
+          """{{ contact_.recaptcha.warning.content | default: "Please tick the 'I'm not a robot' box." }}""",
+          "warning"
+        )
+        return
+
+      textarea = document.getElementById 'textMessage'
+      text = textarea.value.trim()
+      if text.length < "{{ contact_.message.caracters.min }}"
+        showModal(
+          """{{ contact_.message.caracters.warning.title | default: "Warning" }}""",
+          """{{ contact_.message.caracters.warning.content | default: "The message must have at least 50 characters." }}""",
+          "warning"
+        )
+        return
+
+      submitButton.disabled = true
+      submitButton.textContent = """{{ contact_.message.status | default: "Sending...Wait" }}"""
+
+      formData = new FormData form
+      data = Object.fromEntries formData.entries()
+
+      fetch(endpoint,
+        method: "POST"
+        redirect: "follow"
+        body: JSON.stringify data
+      ).then (response) ->
+        response.json()
+      .then (result) ->
+        if result.result is 'success'
+          form.reset()
+          grecaptcha.reset()
+          showModal(
+            """{{ 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." }}""",
+            "error"
+          )
+          throw new Error result.message or "{{ 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." }}""",
+            "error"
+          )
+        else
+          showModal(
+            """{{ contact_.message.error.title | default: "Error" }}""",
+            """{{ contact_.recaptcha.error | default: "An error occurred while sending the message. Please try again." }}""",
+            "error"
+          )
+        grecaptcha.reset()
+      .finally ->
+        submitButton.disabled = false
+        submitButton.textContent = """{{ contact_.button.text | default: "Send!" }}"""

data/assets/js/default.coffee

@@ -0,0 +1,172 @@
+---
+---
+
+{%- include layout/data.liquid -%}
+
+# Script that will be used throughout the site
+
+document.addEventListener "DOMContentLoaded", ->
+  # lock menu context (click right mouse)
+  # ------------------------------------------------------------------------------------------------
+
+  document.addEventListener 'contextmenu', (e) -> e.preventDefault()
+
+  # avatar
+  #-------------------------------------------------------------------------------------------------
+  do ->
+    flipperAvatars = document.querySelectorAll('.avatar-flipper__open-true')
+    modalEl = document.getElementById('avatarModal')
+    modalAvatar = document.getElementById('modalAvatar')
+    header = document.querySelector('.header')
+    bsModal = new bootstrap.Modal(modalEl)
+
+    for flipper in flipperAvatars
+      do (flipper) -> # the 'do' creates a new scope and passes the 'flipper' as an argument
+        flipper.addEventListener "click", ->
+          # NOW, 'flipper' refers to the correct avatar as it was isolated by IIFE
+          card = flipper.querySelector('.avatar-card')
+          backImage = flipper.querySelector('.avatar-back img')
+          backImageSrc = backImage.src
+
+          card.classList.add "flip-avatar"
+
+          card.addEventListener "animationend", (event) ->
+            card.classList.remove "flip-avatar"
+            modalAvatar.src = backImageSrc
+            bsModal.show()
+          , { once: true }
+
+    modalEl.addEventListener "shown.bs.modal", ->
+      modalAvatar.classList.remove "modal-avatar"
+      modalAvatar.offsetWidth
+      modalAvatar.classList.add "modal-avatar"
+      header.classList.remove "modal-active"
+
+      for f in flipperAvatars
+        f.classList.add "hidden"
+
+    modalEl.addEventListener "hidden.bs.modal", ->
+      for f in flipperAvatars
+        f.classList.remove "hidden"
+
+  # change theme light/dark
+  # ------------------------------------------------------------------------------------------------
+  #
+  toggleButton = document.getElementById 'toggle-theme'
+  iconToggleButton = toggleButton.querySelector 'i'
+  root = document.documentElement
+
+  setTheme = (theme) ->
+    root.setAttribute 'data-theme', theme
+
+    iconToggleButton.classList.remove 'fa-sun', 'fa-moon'
+    iconToggleButton.classList.add if theme is 'dark' then 'fa-sun' else 'fa-moon'
+
+    if typeof setGiscusTheme is 'function'
+      setGiscusTheme theme
+
+    localStorage.setItem 'theme', theme
+
+  # boot with saved or light
+  setTheme localStorage.getItem('theme') or 'light'
+
+  # change theme on click
+  toggleButton.addEventListener 'click', ->
+    current = root.getAttribute 'data-theme'
+    next = if current is 'light' then 'dark' else 'light'
+    setTheme next
+
+  # Show/disappear top button
+  # ------------------------------------------------------------------------------------------------
+
+  topButton = document.getElementById "top-link"
+  scrollThreshold = 700
+  window.onscroll = -> scrollFunction()
+
+  scrollFunction = ->
+    if document.body.scrollTop > scrollThreshold or document.documentElement.scrollTop > scrollThreshold
+      topButton.style.display = "block"
+    else
+      topButton.style.display = "none"
+
+  topButton.addEventListener "click", -> topFunction()
+
+  topFunction = ->
+    window.scrollTo
+      top: 0
+      behavior: 'smooth'
+
+  # function Giscus
+  # ------------------------------------------------------------------------------------------------
+  #
+  setGiscusTheme = (theme) ->
+    # The function only executes if the themes object exists
+    if window.giscusThemes
+      giscusTheme = if theme is 'light' then window.giscusThemes.light else window.giscusThemes.dark
+
+      message =
+        giscus:
+          setConfig:
+            theme: giscusTheme
+
+      # Let's use a timeout to ensure the Giscus iframe is ready
+      giscusInterval = setInterval ->
+        giscusFrame = document.querySelector 'iframe.giscus-frame'
+        # Se o iframe existir no documento...
+        if giscusFrame
+          # ...we sent the message...
+          giscusFrame.contentWindow.postMessage message, 'https://giscus.app'
+          # ...and we stopped trying.
+          clearInterval giscusInterval
+      , 500
+
+      # As an extra safeguard, we stop trying after a few seconds
+      # to avoid creating an infinite loop if something goes wrong.
+      setTimeout ->
+        clearInterval giscusInterval
+      , 4000  # Stop trying after 4 seconds
+
+  # giscus theme
+  #-------------------------------------------------------------------------------------------------
+  giscus = document.getElementById "giscus"
+  if giscus
+    window.giscusThemes
+      light: "{{ blog_.post.comments.giscus.theme_light | default: 'light' }}"
+      dark: "{{ blog_.post.comments.giscus.theme_dark | default: 'dark' }}"
+
+
+  # highlight code
+  #-------------------------------------------------------------------------------------------------
+  document.querySelectorAll("div.highlight, figure.highlight").forEach (highlightBlock) ->
+    container = document.createElement "div"
+    container.className = "code-block-container"
+    header = document.createElement "div"
+    header.className = "code-block-header"
+
+    # button copy
+    button = document.createElement "button"
+    button.className = "copy-btn"
+    button.type = "button"
+    button.setAttribute "aria-label", "Copy code"
+
+    icon = document.createElement "i"
+    icon.className = "fa-solid fa-clipboard"
+    button.appendChild icon
+
+    header.appendChild button
+
+    highlightBlock.parentNode.insertBefore container, highlightBlock
+    container.appendChild header
+    container.appendChild highlightBlock
+
+    # event copy
+    button.addEventListener "click", ->
+      codeElement = highlightBlock.querySelector "td.code"
+      textToCopy = if codeElement then codeElement.innerText.trim() else 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

data/assets/js/discus.coffee

@@ -0,0 +1,30 @@
+---
+---
+
+{%- include layout/data.liquid -%}
+
+document.addEventListener "DOMContentLoaded", ->
+  # discus
+  # ------------------------------------------------------------------------------------------------
+  discus = document.getElementById 'disqus_thread'
+
+  if discus
+    ###*
+    * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES
+    ###
+    disqus_shortname = '{{ blog_.post.comments.disqus.shortname }}'
+
+    disqus_config = ->
+      @page.url = '{{ page.url | absolute_url }}' # substitua pelo seu permalink completo
+      @page.identifier = '{{ page.id }}' # ID unico para a discussão
+      @page.disable_ads = true # desativa anuncios
+      @page.recommendations = false # sesativa recomendações
+
+    do ->
+      d = document
+      s = d.createElement 'script'
+
+      s.src = '//' + disqus_shortname + '.disqus.com/embed.js'
+      s.setAttribute 'data-timestamp', +new Date()
+
+      (d.head or d.body).appendChild s

data/assets/js/fallback/README.md

@@ -0,0 +1,3 @@
+TODO: **If you experience issues with CoffeeScript, revert to standard Javascript.**
+
+> Note: Maintain the fallback in parallel development with CoffeeScript.

data/assets/js/fallback/blog.js

@@ -0,0 +1,113 @@
+---
+---
+
+{%- include layout/data.liquid -%}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const btn = document.getElementById('blog-search__btn');
+  const box = document.querySelector('.blog-search');
+  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 btnSearchClean = document.getElementById('blog-search__btn-clean');
+  const blogSeachInput = document.getElementById('blog-search__input');
+
+
+  if (!btn || !box) return;
+
+  const openSearch = () => {
+    box.classList.add('is-open');
+    box.removeAttribute('inert');
+    box.style.maxHeight = box.scrollHeight + 'px';
+    box.style.opacity = '1';
+    box.addEventListener('transitionend', function onOpened(e) {
+      if (e.propertyName === 'max-height') {
+        box.style.maxHeight = 'none';
+        box.removeEventListener('transitionend', onOpened);
+      }
+    });
+    blogSeachInput.focus();
+  };
+
+  const closeSearch = () => {
+    box.style.maxHeight = box.scrollHeight + 'px';
+    void box.offsetHeight; // reflow force
+    requestAnimationFrame(() => {
+      box.style.maxHeight = '0';
+      box.style.opacity = '0';
+    });
+    box.setAttribute('inert', '');
+    box.classList.remove('is-open');
+  };
+
+  btn.addEventListener('click', (e) => {
+    e.preventDefault();
+
+    // if are already in /blog/, toggle
+    const pathname = location.pathname.replace(/\/$/, '');
+    const isBlog = pathname === '/blog' || pathname === '/blog/index.html';
+
+    if (!isBlog) {
+      // if are on another page, go to /blog/ and open it
+      window.location.href = "{{ search_url }}";
+      return;
+    }
+
+    // toggle
+    if (box.classList.contains('is-open')) {
+      closeSearch();
+      searchInput.value = '';
+      blogPosts.classList.remove('disabled');
+      searchResultsWrapper.classList.add('disabled');
+    } else {
+      openSearch();
+    }
+  });
+
+  // opens automatically if arrived from another link with ?search=open
+  const params = new URLSearchParams(location.search);
+  if (params.get('search') === 'open') {
+    setTimeout(openSearch, 30);
+  }
+
+  /* clean button input blog search
+  --------------------------------------------------------------------------------------------------
+  */
+  function clearSearch() {
+    blogSeachInput.value = '';
+    blogPosts.classList.remove('disabled');
+    searchResults.classList.add('disabled');
+    searchResultsWrapper.classList.add('disabled');
+    blogSeachInput.focus();
+  }
+  btnSearchClean.addEventListener('click', clearSearch);
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      clearSearch();
+      closeSearch();
+    }
+  });
+
+  /* open results and close posts in search (toggle)
+  --------------------------------------------------------------------------------------------------
+  */
+  searchInput.addEventListener('input', () => {
+    if (searchInput.value.trim().length > 0) {
+      blogPosts.classList.add('disabled');
+      searchResults.classList.remove('disabled');
+      searchResultsWrapper.classList.remove('disabled');
+    } else {
+      blogPosts.classList.remove('disabled');
+      searchResults.classList.add('disabled');
+      searchResultsWrapper.classList.add('disabled');
+    }
+  });
+  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/fallback/contact.js

@@ -0,0 +1,116 @@
+---
+---
+
+{%- include layout/data.liquid -%}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const form = document.getElementById("contactForm");
+  const submitButton = document.getElementById("submitButton");
+  const endpoint = "{{ head_.google.apps_script.url }}"; // URL Google Apps Script
+
+  // get modal
+  function showModal(title, message, type = 'success') {
+    const modalEl = document.getElementById('contactMessageModal');
+    const modalTitle = modalEl.querySelector('.modal-title');
+    const modalBody = modalEl.querySelector('.modal-body');
+    const modalContent = modalEl.querySelector('.modal-content');
+
+    modalContent.classList.remove('contact-message-success', 'contact-message-error', 'contact-message-warning');
+
+
+    // Apply the color according to the type
+    if (type === 'success') {
+      modalContent.classList.add('contact-message-success');
+    } else if (type === 'error') {
+      modalContent.classList.add('contact-message-error');
+    } else if (type === 'warning') {
+      modalContent.classList.add('contact-message-warning');
+    }
+
+    modalTitle.innerHTML = title;
+    modalBody.innerHTML = message;
+
+    const bsModal = new bootstrap.Modal(modalEl);
+    bsModal.show();
+  }
+
+  form.addEventListener("submit", async (e) => {
+    e.preventDefault();
+
+    const recaptchaResponse = grecaptcha.getResponse();
+    if (!recaptchaResponse) {
+      showModal(
+        "{{ 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');
+    const text = textarea.value.trim();
+    if (text.length < "{{ contact_.message.caracters.min }}" ) {
+      showModal(
+        "{{ contact_.message.caracters.warning.title | default: 'Warning' }}",
+        "{{ contact_.message.caracters.warning.content | default: 'The message must have at least 50 characters.' }}",
+        "warning"
+      );
+      return;
+    }
+
+    submitButton.disabled = true;
+    submitButton.textContent = "{{ contact_.message.status | default: 'Sending...Wait' }}";
+
+    const formData = new FormData(form);
+    const data = Object.fromEntries(formData.entries());
+
+    try {
+      const response = await fetch(endpoint, {
+        method: "POST",
+        redirect: "follow",
+        body: JSON.stringify(data)
+      });
+
+      const result = await response.json();
+
+      if (result.result === 'success') {
+        form.reset();
+        grecaptcha.reset();
+        showModal(
+          "{{ 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.' }}",
+          "error"
+        );
+        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.' }}",
+            "error"
+          );
+      } else {
+          showModal(
+            "{{ contact_.message.error.title | default: 'Error' }}",
+            "{{ contact_.recaptcha.error | default: 'An error occurred while sending the message. Please try again.' }}",
+            "error"
+          );
+      }
+      grecaptcha.reset();
+
+    } finally {
+      submitButton.disabled = false;
+      submitButton.textContent = "{{ contact_.button.text | default: 'Send!' }}";
+    }
+  });
+
+});

data/assets/js/{default.js → fallback/default.js}

@@ -1,9 +1,59 @@
+---
+---
+
 document.addEventListener("DOMContentLoaded", () => {
   /* lock menu context (click right mouse)
   --------------------------------------------------------------------------------------------------
   */
   document.addEventListener('contextmenu', e => e.preventDefault());
 
+  /* avatar
+  -------------------------------------------------------------------------------------------------
+  */
+  const modalEl = document.getElementById('avatarModal');
+  if (modalEl) {
+    const flipperAvatars = document.querySelectorAll('.avatar-flipper__open-true');
+    const modalAvatar = document.getElementById('modalAvatar');
+    const header = document.querySelector('.header');
+    const bsModal = new bootstrap.Modal(modalEl);
+
+    flipperAvatars.forEach((flipper) => {
+      flipper.addEventListener("click", () => {
+        const card = flipper.querySelector('.avatar-card');
+        const backImage = flipper.querySelector('.avatar-back img');
+        const backImageSrc = backImage.src;
+
+        card.classList.add("flip-avatar");
+
+        card.addEventListener(
+          "animationend",
+          () => {
+            card.classList.remove("flip-avatar");
+
+            modalAvatar.src = backImageSrc;
+
+            bsModal.show();
+          },
+          { once: true }
+        );
+      });
+    });
+
+    modalEl.addEventListener("shown.bs.modal", () => {
+      modalAvatar.classList.remove("modal-avatar");
+      void modalAvatar.offsetWidth;
+      modalAvatar.classList.add("modal-avatar");
+      header.classList.remove("modal-active");
+
+      flipperAvatars.forEach((flipper) => flipper.classList.add("hidden"));
+    });
+
+    modalEl.addEventListener("hidden.bs.modal", () => {
+      flipperAvatars.forEach((flipper) => flipper.classList.remove("hidden"));
+    });
+  }
+
+
   /* Show/disappear top button
   --------------------------------------------------------------------------------------------------
   */

data/assets/js/fallback/discus.js

@@ -0,0 +1,32 @@
+---
+---
+
+{%- include layout/data.liquid -%}
+
+
+document.addEventListener("DOMContentLoaded", () => {
+  const discus = document.getElementById('disqus_thread');
+
+  if (discus) {
+    /**
+     * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES
+     */
+    var disqus_shortname = '{{ blog_.post.comments.disqus.shortname }}';
+
+    // The unique URL for the discussion, usually the post's permalink.
+    var disqus_config = function () {
+      this.page.url = '{{ page.url | absolute_url }}'; // Replace with your full permalink
+      this.page.identifier = '{{ page.id }}'; // Unique ID for the discussion, use page.id or page.url
+      this.page.disable_ads = true; // disabled ads
+      this.page.recommendations = false; // disabled recommendations
+    };
+
+    (function() {
+      var d = document, s = d.createElement('script');
+      s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+      s.setAttribute('data-timestamp', +new Date());
+      (d.head || d.body).appendChild(s);
+    })();
+  }
+});
+

data/{_includes/layout/google_analytics.html → assets/js/fallback/google_analytics.js}

@@ -1,11 +1,15 @@
-<script>
+---
+---
+
+{%- include layout/data.liquid -%}
+
+
 if(!(window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1")) {
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
   })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 
-  ga('create', '{{ site.google.analytics.id }}', 'auto');
+  ga('create', '{{ head_.google.analytics.id }}', 'auto');
   ga('send', 'pageview');
 }
-</script>