rawfeed 0.1.3 → 0.2.0

data/_includes/toc

@@ -1,160 +1,20 @@
-<nav class="toc" id="toc" data-toc-selector="{{ include.selector | default: '.post-content' }}"
+{%- include layout/data.liquid -%}
+
+<nav id="toc"
+  style="border-top-left-radius: 0px !important; border-top-right-radius: 0px !important;"
+  class="toc{% if default_.rounding %} rounding-plugins{% endif %}{% if default_.background_focus %} background_focus{% endif %}"
+  data-toc-selector="{{ include.selector | default: '.post-content' }}"
   data-toc-max-level="{{ include.max_level | default: 3 }}"
-  data-toc-scroll-offset="{{ include.scroll_offset | default: 20 }}">
+  data-toc-scroll-offset="{{ include.scroll_offset | default: 20 }}"
+  data-btn-show="{{ include.btn_show }}"
+  data-btn-hidden="{{ include.btn_hidden }}">
+
   <div class="toc-head">
     <h2>{{ include.title | default: "TOC" }}</h2>
-    <button class="toc-toggle" aria-expanded="true" type="button">{{ include.btn_hidden }}</button>
+    <button class="toc-toggle" aria-expanded="true" type="button"></button>
   </div>
   <div class="toc-list-wrapper">
     <ul class="toc-list" role="list"></ul>
-    <p class="toc-empty" style="display:none">No titles found.</p>
+    <p class="toc-empty" style="display:none">No titles found. Remove TOC!</p>
   </div>
 </nav>
-
-<script>
-(function () {
-  function slugify(text) {
-    if (!text) return '';
-    return text.toString().toLowerCase().trim()
-      .normalize('NFKD').replace(/[\u0300-\u036f]/g, '')
-      .replace(/[^\w\s-]/g, '').replace(/\s+/g, '-').replace(/--+/g, '-');
-  }
-
-  function buildTOC(tocEl) {
-    const selector = tocEl.dataset.tocSelector || '.post-content' || '.page-content';
-    const maxLevel = parseInt(tocEl.dataset.tocMaxLevel || '3', 10);
-    const offset = parseInt(tocEl.dataset.tocScrollOffset || '20', 10);
-    const root = document.querySelector(selector);
-
-    if (!root) {
-      tocEl.querySelector('.toc-empty').textContent = `Content not found (${selector})`;
-      tocEl.querySelector('.toc-empty').style.display = 'block';
-      return;
-    }
-
-    const headings = Array.from(root.querySelectorAll(Array(maxLevel).fill(0).map((_, i) => `h${i + 1}`).join(',')))
-      .filter(h => !tocEl.contains(h))
-      .filter(h => parseInt(h.tagName.substring(1)) <= maxLevel);
-
-    if (headings.length === 0) {
-      tocEl.querySelector('.toc-empty').style.display = 'block';
-      return;
-    }
-
-    const tocRoot = tocEl.querySelector('.toc-list');
-    tocRoot.innerHTML = '';
-
-    const idCounts = {};
-    headings.forEach(h => {
-      if (!h.id) {
-        let id = slugify(h.textContent);
-        if (!id) id = 'section';
-        if (idCounts[id]) { idCounts[id] += 1; id = id + '-' + idCounts[id]; }
-        else idCounts[id] = 1;
-        h.id = id;
-      }
-    });
-
-    // Build hierarchical tree
-    const stack = [{ level: 0, ul: tocRoot }];
-    headings.forEach((h, i) => {
-      const level = parseInt(h.tagName.substring(1));
-      const li = document.createElement('li');
-      const a = document.createElement('a');
-      a.href = '#' + h.id;
-      a.textContent = h.textContent.trim();
-      a.addEventListener('click', e => {
-        e.preventDefault();
-        window.scrollTo({ top: h.getBoundingClientRect().top + window.scrollY - offset, behavior: 'smooth' });
-        history.replaceState(null, '', '#' + h.id);
-
-        // // Clicking on the TOC menu closes the TOC
-        // const wrapper = tocEl.querySelector('.toc-list-wrapper');
-        // const toggle = tocEl.querySelector('.toc-toggle');
-        // wrapper.style.display = 'none';
-        // toggle.setAttribute('aria-expanded', 'false');
-        // toggle.textContent = '{ { include.btn_show } }';
-      });
-      li.appendChild(a);
-
-      while (stack.length > 1 && level <= stack[stack.length - 1].level) stack.pop();
-      const parent = stack[stack.length - 1].ul;
-      parent.appendChild(li);
-
-      const next = headings[i + 1];
-      if (next) {
-        const nextLevel = parseInt(next.tagName.substring(1));
-        if (nextLevel > level) {
-          const newUl = document.createElement('ul');
-          li.appendChild(newUl);
-          stack.push({ level, ul: newUl });
-        }
-      }
-    });
-
-    // Active Highlight
-    const links = tocRoot.querySelectorAll('a');
-    function onScroll() {
-      const fromTop = window.scrollY + offset + 1;
-      let current = headings[0];
-      for (let i = 0; i < headings.length; i++) {
-        if (headings[i].offsetTop <= fromTop) current = headings[i];
-      }
-      links.forEach(l => l.classList.toggle('active', l.getAttribute('href') === '#' + current.id));
-    }
-    window.addEventListener('scroll', onScroll, { passive: true });
-    onScroll();
-  }
-
-  document.addEventListener('DOMContentLoaded', function () {
-    document.querySelectorAll('.toc').forEach(toc => {
-      buildTOC(toc);
-      const toggle = toc.querySelector('.toc-toggle');
-      const wrapper = toc.querySelector('.toc-list-wrapper');
-
-      wrapper.style.display = 'none';
-      toggle.setAttribute('aria-expanded', 'false');
-      toggle.textContent = '{{ include.btn_show }}';
-
-      toggle.addEventListener('click', () => {
-        const expanded = toggle.getAttribute('aria-expanded') === 'true';
-        wrapper.style.display = expanded ? 'none' : 'block';
-        toggle.setAttribute('aria-expanded', (!expanded).toString());
-        toggle.textContent = expanded ? '{{ include.btn_show }}' : '{{ include.btn_hidden }}';
-      });
-
-      const tocTop = toc.offsetTop;
-
-      function handleScrollFix() {
-        const scrollTop = window.scrollY || document.documentElement.scrollTop;
-
-        // Fixes pinning behavior in Chrome
-        if (scrollTop >= tocTop) {
-          toc.classList.add('fixed');
-          toc.style.position = 'fixed';
-          toc.style.top = '0';
-          toc.style.zIndex = '9999';
-          // toc.style.width = toc.offsetWidth + 'px';
-        } else {
-          toc.classList.remove('fixed');
-          toc.style.position = '';
-          toc.style.top = '';
-          toc.style.width = '';
-        }
-
-        // // Automatically closes the TOC if it is open and scrolled to it.
-        // const rect = toc.getBoundingClientRect();
-        // if (rect.top <= 0 && toggle.getAttribute('aria-expanded') === 'true') {
-        //   wrapper.style.display = 'none';
-        //   toggle.setAttribute('aria-expanded', 'false');
-        //   toggle.textContent = '{ { include.btn_show } }';
-        // }
-      }
-
-      window.addEventListener('scroll', handleScrollFix, { passive: true });
-      window.addEventListener('resize', handleScrollFix);
-      handleScrollFix();
-    });
-  });
-})();
-</script>

data/_includes/video

@@ -1,4 +1,7 @@
-<div class="video-wrapper">
+{%- include layout/data.liquid -%}
+
+
+<div class="video-wrapper{% if default_.rounding %} rounding-plugins{% endif %}">
   <iframe src="{{ include.url }}" title="{{ include.title | default: 'Video' }}"
     frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
   </iframe>

data/_layouts/blog.html

@@ -12,12 +12,15 @@ layout: default
   {%- endfor -%}
 {%- endif -%}
 
-<div class="container blog">
+<div id="blog" class="blog{% if default_.background_focus %} background_focus{% endif %} {% if default_.rounding %} rounding{% endif %}">
   {%- include layout/blog_search.html -%}
 
   <div id="posts" class="row">
+    {%- if page.description -%}
+      <div class="blog-description"><span>»&nbsp;</span>{{ page.description | markdownify }}</div>
+    {%- endif -%}
     {%- if page.title -%}
-      <h2 class="blog-subtitle">[&nbsp;{{ site.text.blog.subtitle | default: "posts" }}:&nbsp;&nbsp;{{ count_posts }}&nbsp;]</h2>
+      <h2 class="blog-subtitle">[&nbsp;{{ blog_.subtitle | default: "posts" }}:&nbsp;&nbsp;{{ count_posts }}&nbsp;]</h2>
     {%- endif -%}
 
     {%- if site.posts.size > 0 -%}
@@ -30,14 +33,12 @@ layout: default
 
         {%- for post in posts -%}
         <li class="blog-list__item">
-          {%- if site.datelang -%}
-            <span class="blog-list__meta">{% datelang post.date format:date_format %}</span>&nbsp;»&nbsp;
+          {%- if datelang_ -%}
+            <span class="blog-list__meta">{% datelang post.date format:datelang_.format %}</span>&nbsp;»&nbsp;
           {%- else -%}
             <span class="blog-list__meta">{{ post.date | date: "%b %-d, %Y" }}</span>&nbsp;»&nbsp;
           {%- endif -%}
-          <a class="blog-list__link" href="{{ post.url | relative_url }}">
-            {{ post.title | escape }}
-          </a>
+          <a class="blog-list__link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
           {%- if post.draft -%}
             <span class="draft-badge">[&nbsp;this is a draft&nbsp;]</span>
           {%- endif -%}

data/_layouts/contact.html

@@ -2,18 +2,21 @@
 layout: default
 ---
 
-{%- if site.google.recaptcha.pubkey and site.google.apps_script.url -%}
+{%- include layout/data.liquid -%}
+
+{%- if head_.google.recaptcha.pubkey and head_.google.apps_script.url -%}
 
 <script src="https://www.google.com/recaptcha/api.js" async defer></script>
 
-<div class="container contact">
+<div id="contact" class="contact{% if default_.background_focus %} background_focus{% endif %} {% if default_.rounding %} rounding{% endif %}">
+
   <div class="modal fade"
-  id="contactMessageModal"
-  tabindex="-1"
-  aria-labelledby="contactMessageModalLabel"
-  aria-hidden="true"
-  data-bs-backdrop="static"
-  data-bs-keyboard="false">
+    id="contactMessageModal"
+    tabindex="-1"
+    aria-labelledby="contactMessageModalLabel"
+    aria-hidden="true"
+    data-bs-backdrop="static"
+    data-bs-keyboard="false">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
@@ -29,41 +32,39 @@ layout: default
     <span class="contact-title"><strong>[&nbsp;{{ page.title | downcase }}&nbsp;]</strong></span>
     <form id="contactForm" class="mt-4 contact-form">
       <div class="mb-3">
-        {% comment %} <label for="inputName" class="form-label">{{ site.text.contact.name | default: "Name" | downcase }}</label> {% endcomment %}
         <input id="inputName"
         name="name"
         type="text"
-        placeholder="{{ site.text.contact.name.placeholder | default: 'First and last name' }}"
+        placeholder="{{ contact_.name.placeholder | default: 'First and last name' }}"
         class="form-control contact-form__name"
         required>
       </div>
       <div class="mb-3">
-        {% comment %} <label for="inputEmail" class="form-label">{{ site.text.contact.name | default: "Email address" | downcase }}</label> {% endcomment %}
         <input id="inputEmail"
         name="email"
         type="email"
-        placeholder="{{ site.text.contact.email.placeholder | default: 'Your best email address' }}"
+        placeholder="{{ contact_.email.placeholder | default: 'Your best email address' }}"
         class="form-control contact-form__email"
         aria-describedby="emailHelp"
         required>
         <div id="emailHelp" class="form-text contact-form__help">
-          {{ site.text.contact.email.help | default: "We'll never share your email with anyone else." }}
+          {{ contact_.email.help | default: "We'll never share your email with anyone else." }}
         </div>
       </div>
       <textarea id="textMessage"
       name="message"
       class="form-control contact-form__message"
-      placeholder="{{ site.text.contact.message.placeholder | default: 'Write your message here' }}"
+      placeholder="{{ contact_.message.placeholder | default: 'Write your message here' }}"
       style="min-height: 150px"
       required></textarea>
-      <small style="display: block; font-size: 8pt; opacity: .6">{{ site.text.contact.message.caracters.warning.content }}</small>
-      <!-- TODO: version: 0.2.0 Make reCaptcha change themes instantly -->
-      <div id="g-recaptcha" class="g-recaptcha mt-2" data-sitekey="{{ site.google.recaptcha.pubkey }}" style="display: inline-block; margin: 5px 0;"></div>
+      <small style="display: block; font-size: 8pt; opacity: .6">{{ contact_.message.caracters.warning.content }}</small>
+      <!-- TODO: version: 0.3.0 Make reCaptcha change themes instantly -->
+      <div id="g-recaptcha" class="g-recaptcha mt-2" data-sitekey="{{ head_.google.recaptcha.pubkey }}" style="display: inline-block; margin: 5px 0;"></div>
       <div class="d-flex justify-content-end mb-5">
         <button id="submitButton"
         type="submit"
         class="btn contact-form__submit">
-        {{ site.text.contact.button.text | default: 'Send!' }}
+        {{ contact_.button.text | default: 'Send!' }}
         </button>
       </div>
     </form>
@@ -73,119 +74,9 @@ layout: default
   </div>
 </div>
 
-<script>
-  const form = document.getElementById("contactForm");
-  const submitButton = document.getElementById("submitButton");
-  const endpoint = "{{ site.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(
-        "{{ site.text.contact.recaptcha.warning.title | default: 'Warning' }}",
-        "{{ site.text.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 < {{ site.text.contact.message.caracters.min }}) {
-      showModal(
-        "{{ site.text.contact.message.caracters.warning.title | default: 'Warning' }}",
-        "{{ site.text.contact.message.caracters.warning.content | default: "The message must have at least 50 characters." }}",
-        "warning"
-      );
-      return;
-    }
-
-    submitButton.disabled = true;
-    submitButton.textContent = "{{ site.text.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(
-          "{{ site.text.contact.message.success.title | default: 'Message Sent' }}",
-          "{{ site.text.contact.message.success.content | default: 'Your message has been sent successfully!' }}",
-          "success"
-        );
-      } else {
-        showModal(
-          "{{ site.text.contact.message.error.title | default: 'Error' }}",
-          "{{ site.text.contact.message.error.content | default: 'Something went wrong while sending your message.' }}",
-          "error"
-        );
-        throw new Error(result.message || "{{ site.text.contact.message.error.content | default: "An unknown error has occurred." }}");
-      }
-
-    } catch (error) {
-      console.error("Error sending:", error);
-      if (error.message.includes("reCAPTCHA")) {
-          showModal(
-            "{{ site.text.contact.message.error.title | default: 'Error' }}",
-            "{{ site.text.contact.recaptcha.fail | default: "Verification failed. Please reload the page and try again." }}",
-            "error"
-          );
-      } else {
-          showModal(
-            "{{ site.text.contact.message.error.title | default: 'Error' }}",
-            "{{ site.text.contact.recaptcha.error | default: "An error occurred while sending the message. Please try again." }}",
-            "error"
-          );
-      }
-      grecaptcha.reset();
-
-    } finally {
-      submitButton.disabled = false;
-      submitButton.textContent = "{{ site.text.contact.button.text | default: "Send!" }}";
-    }
-  });
-</script>
 {%- else -%}
 
-<div class="contat-disabled">
+<div class="contact-disabled{% if default_.background_focus %} background_focus{% endif %} {% if default_.rounding %} rounding{% endif %}">
   <h1 style="background-color: yellow;color: black;padding: 10px">Warning: Email form disabled</h1>
   <p>To use the email submission form, you need to:</p>
   <p>1 - Copy the script below and implement it in <a href="https://script.google.com" target="_blank">Google Apps Script</a>:</p>
@@ -194,92 +85,95 @@ layout: default
     <p>Note2: Without editing the script in Google Apps Script, you need to deploy it again.</p>
   </blockquote>
 
-{% highlight javascript linenos %}
-// IMPORTANT! You must put your gmail email here.
-const TO_ADDRESS = "YOUR EMAIL GMAIL";
+  {% highlight javascript linenos %}
+  // IMPORTANT! You must put your gmail email here.
+  const TO_ADDRESS = "YOUR EMAIL GMAIL";
 
-// Get the secret key from the Script Properties
-const RECAPTCHA_SECRET_KEY = PropertiesService.getScriptProperties().getProperty('RECAPTCHA_SECRET_KEY');
+  // Get the secret key from the Script Properties
+  const RECAPTCHA_SECRET_KEY = PropertiesService.getScriptProperties().getProperty('RECAPTCHA_SECRET_KEY');
 
-// Function to validate the reCAPTCHA token
-function validateRecaptcha(token) {
-  if (!token) {
-    throw new Error("Missing reCAPTCHA token.");
-  }
-  const url = "https://www.google.com/recaptcha/api/siteverify";
-  const payload = {
-    secret: RECAPTCHA_SECRET_KEY,
-    response: token
-  };
+  // Function to validate the reCAPTCHA token
+  function validateRecaptcha(token) {
+    if (!token) {
+      throw new Error("Missing reCAPTCHA token.");
+    }
+    const url = "https://www.google.com/recaptcha/api/siteverify";
+    const payload = {
+      secret: RECAPTCHA_SECRET_KEY,
+      response: token
+    };
+
+    const response = UrlFetchApp.fetch(url, {
+      method: "post",
+      payload: payload
+    });
 
-  const response = UrlFetchApp.fetch(url, {
-    method: "post",
-    payload: payload
-  });
+    const result = JSON.parse(response.getContentText());
 
-  const result = JSON.parse(response.getContentText());
+    if (!result.success) {
+      throw new Error("reCAPTCHA verification failed: " + (result['error-codes'] || 'Unknown error.'));
+    }
 
-  if (!result.success) {
-    throw new Error("reCAPTCHA verification failed: " + (result['error-codes'] || 'Unknown error.'));
+    return true;
   }
 
-  return true;
-}
-
-
-function doPost(e) {
-  try {
-    const data = JSON.parse(e.postData.contents);
 
-    // 1. Validate the reCAPTCHA token first!
-    validateRecaptcha(data['g-recaptcha-response']);
+  function doPost(e) {
+    try {
+      const data = JSON.parse(e.postData.contents);
 
-    // 2. If validation passed, continue with the rest of the code
-    const { name, email, message } = data;
+      // 1. Validate the reCAPTCHA token first!
+      validateRecaptcha(data['g-recaptcha-response']);
 
-    if (!name || !email || !message) {
-      throw new Error("Missing form data.");
-    }
+      // 2. If validation passed, continue with the rest of the code
+      const { name, email, message } = data;
 
-    const subject = "New website message " + name;
-    const htmlBody = `
-      <p>You have received a new message from your website.:</p><hr>
-      <p><b>Name:</b> ${name}</p>
-      <p><b>Email:</b> <a href="mailto:${email}">${email}</a></p>
-      <p><b>Message:</b></p>
-      <p style="white-space: pre-wrap;">${message}</p><hr>
-    `;
+      if (!name || !email || !message) {
+        throw new Error("Missing form data.");
+      }
 
-    MailApp.sendEmail({
-      to: TO_ADDRESS,
-      subject: subject,
-      htmlBody: htmlBody,
-      replyTo: email
-    });
+      const subject = "New website message " + name;
+      const htmlBody = `
+        <p>You have received a new message from your website.:</p><hr>
+        <p><b>Name:</b> ${name}</p>
+        <p><b>Email:</b> <a href="mailto:${email}">${email}</a></p>
+        <p><b>Message:</b></p>
+        <p style="white-space: pre-wrap;">${message}</p><hr>
+      `;
+
+      MailApp.sendEmail({
+        to: TO_ADDRESS,
+        subject: subject,
+        htmlBody: htmlBody,
+        replyTo: email
+      });
 
-    return ContentService
-      .createTextOutput(JSON.stringify({ 'result': 'success', 'message': 'Message sent!' }))
-      .setMimeType(ContentService.MimeType.JSON);
+      return ContentService
+        .createTextOutput(JSON.stringify({ 'result': 'success', 'message': 'Message sent!' }))
+        .setMimeType(ContentService.MimeType.JSON);
 
-  } catch (err) {
-    Logger.log(err.toString());
-    return ContentService
-      .createTextOutput(JSON.stringify({ 'result': 'error', 'message': err.toString() }))
-      .setMimeType(ContentService.MimeType.JSON);
+    } catch (err) {
+      Logger.log(err.toString());
+      return ContentService
+        .createTextOutput(JSON.stringify({ 'result': 'error', 'message': err.toString() }))
+        .setMimeType(ContentService.MimeType.JSON);
+    }
   }
-}
-{% endhighlight %}
+  {% endhighlight %}
+
   <p>2 - Create a <a href="https://console.cloud.google.com/security/recaptcha" target="_blank">reCaptcha</a>
   on Google and add the reCaptcha <strong>PRIVATE</strong> key to the <strong>Google Apps Script</strong> script property.</p>
   <p>3 - Copy the reCaptcha <strong>PUBLIC</strong> key and the <strong>Google Apps Script</strong> URL and place them in <strong>_config.yml:</strong></p>
+
   {% highlight yml linenos %}
-google:
-  ###
-  ###
-  apps_script:
-    url: "https://script.google.com/macros/s/BuD..."
-  recaptcha:
-    pubkey: "8Lci194rAAAAA70Sv..."
+  google:
+    ###
+    ###
+    apps_script:
+      url: "https://script.google.com/macros/s/BuD..."
+    recaptcha:
+      pubkey: "8Lci194rAAAAA70Sv..."
   {% endhighlight %}
+
 </div>
 {%- endif -%}