rawfeed 0.0.1 → 0.1.0

data/_layouts/contact.html

@@ -0,0 +1,285 @@
+---
+layout: default
+---
+
+{%- if site.google.recaptcha.pubkey and site.google.apps_script.url -%}
+
+<script src="https://www.google.com/recaptcha/api.js" async defer></script>
+
+<div class="container contact">
+  <div class="modal fade"
+  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">
+          <h5 class="modal-title" id="contactMessageModalLabel"></h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <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' }}"
+        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' }}"
+        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." }}
+        </div>
+      </div>
+      <textarea id="textMessage"
+      name="message"
+      class="form-control contact-form__message"
+      placeholder="{{ site.text.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>
+      <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!' }}
+        </button>
+      </div>
+    </form>
+  </div>
+  <div class="row">
+    <div class="contact-content">{{ content }}</div>
+  </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">
+  <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>
+  <blockquote>
+    <p>Note1: Don't forget to put your gmail in the script.</p>
+    <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";
+
+// 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
+  };
+
+  const response = UrlFetchApp.fetch(url, {
+    method: "post",
+    payload: payload
+  });
+
+  const result = JSON.parse(response.getContentText());
+
+  if (!result.success) {
+    throw new Error("reCAPTCHA verification failed: " + (result['error-codes'] || 'Unknown error.'));
+  }
+
+  return true;
+}
+
+
+function doPost(e) {
+  try {
+    const data = JSON.parse(e.postData.contents);
+
+    // 1. Validate the reCAPTCHA token first!
+    validateRecaptcha(data['g-recaptcha-response']);
+
+    // 2. If validation passed, continue with the rest of the code
+    const { name, email, message } = data;
+
+    if (!name || !email || !message) {
+      throw new Error("Missing form 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>
+    `;
+
+    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);
+
+  } catch (err) {
+    Logger.log(err.toString());
+    return ContentService
+      .createTextOutput(JSON.stringify({ 'result': 'error', 'message': err.toString() }))
+      .setMimeType(ContentService.MimeType.JSON);
+  }
+}
+{% 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..."
+  {% endhighlight %}
+</div>
+{%- endif -%}

data/_layouts/default.html

@@ -0,0 +1,248 @@
+<!-- Theme for Jekyll.rb by: © William C. Canin -->
+{%- if site.maintenance.enable -%}
+  {%- include layout/maintenance.html -%}
+{%- else -%}
+
+{%- assign index = site.pages | where: "path", "index.md" | first -%}
+
+<!DOCTYPE html>
+<html id="top" lang="{{ site.lang | default: 'en-US' }}" data-theme="light">
+  {%- include layout/head.html -%}
+  <body data-layout="{{ page.layout | default: '' }}" data-terminal-enabled="{{ site.home.terminal.enable | default: false }}">
+    {%- if site.home.terminal.enable and page.url == "/" and index.layout == "home" -%}
+      <div class="default default-terminal" style="max-width: {{ site.layout.width | default: '780px' }} !important;">
+        {%- include layout/header.html -%}
+      </div>
+      <main class="content">{{ content }}</main>
+      {%- include layout/footer.html -%}
+    {%- else -%}
+      <div class="default" style="max-width: {{ site.layout.width | default: '780px' }} !important;">
+        {%- include layout/header.html -%}
+        <main class="content">{{ content }}</main>
+
+        {%- include layout/footer.html -%}
+      </div>
+    {%- endif -%}
+  </body>
+
+  <!-- Scripts -->
+  <script src="{{ '/assets/vendor/bootstrap/js/bootstrap.bundle.js' | relative_url }}"></script>
+
+  {%- if page.comments != false and site.blog.post.comments.provider == 'giscus' -%}
+  <script>
+    window.giscusThemes = {
+      light: "{{ site.blog.post.comments.giscus.theme_light | default: 'light' }}",
+      dark: "{{ site.blog.post.comments.giscus.theme_dark | default: 'dark' }}"
+    };
+  </script>
+  {%- endif -%}
+
+  <script src="{{ '/assets/js/default.js' | relative_url }}"></script>
+
+  {%- if page.url == '/' and site.home.terminal.enable -%}
+    <script src="{{ '/assets/js/terminal.js' | relative_url }}"></script>
+  {%- endif -%}
+
+  {%- if site.avatar.open -%}
+    <script src="{{ '/assets/js/avatar.js' | relative_url }}"></script>
+  {%- endif -%}
+
+  {%- if site.blog.search.enable -%}
+    {%- if page.url == '/blog/' or page.url == '/blog/index.html' -%}
+      <script src="{{ '/assets/vendor/simple-jekyll-search.min.js' | relative_url }}"></script>
+      <script src="{{ '/assets/js/blog_search.js' | relative_url }}"></script>
+      <script>
+        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>{{ site.text.blog.no_results | default: "No results found" }}</p>',
+          json: '/assets/json/blog_search.json'
+        })
+      </script>
+    {%- endif -%}
+  {%- endif -%}
+
+  {%- if site.home.terminal.enable and page.url == "/" -%}
+  <script>
+    document.addEventListener("DOMContentLoaded", () => {
+      const screen = document.getElementById('screen');
+      const terminal = document.getElementById("terminal");
+      const socialsEl = document.getElementById("terminal-screen--socials");
+
+      const commands = {
+        help: `{{ site.text.home.terminal.commands }}`,
+        about: document.getElementById("home-content").innerHTML,
+        socials: socialsEl ? socialsEl.innerHTML : `{{ site.text.home.terminal.no_socials }}`,
+      };
+
+      function createInputLine() {
+        const line = document.createElement('div');
+        line.className = 'line';
+
+        const prompt = document.createElement('span');
+        prompt.className = 'prompt';
+        prompt.textContent = `[{{ site.text.home.terminal.user }}@{{ site.text.home.terminal.hostname }}:~]$`;
+
+        // wrapper para conter input, cursor e measure
+        const wrapper = document.createElement('span');
+        wrapper.className = 'input-wrapper';
+
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.className = 'input';
+        input.placeholder = `{{ site.text.home.terminal.welcome }}`;
+        input.spellcheck = false;
+        input.autocomplete = 'off';
+        input.autocorrect = 'off';
+        input.autocapitalize = 'off';
+
+        const cursor = document.createElement('span');
+        cursor.className = 'cursor';
+
+        const measure = document.createElement('span');
+        measure.className = 'measure';
+
+        wrapper.appendChild(input);
+        wrapper.appendChild(cursor);
+        wrapper.appendChild(measure);
+
+        line.appendChild(prompt);
+        line.appendChild(wrapper);
+        screen.appendChild(line);
+
+        input.focus();
+        screen.scrollTop = screen.scrollHeight;
+
+        // Updates the fake cursor position based on the input's selectionStart
+        function updateCursor() {
+          const sel = input.selectionStart || 0;
+          // measure the text to the position of the caret
+          measure.textContent = input.value.slice(0, sel);
+          const textWidth = measure.offsetWidth; // largura do texto sem scroll
+          const visibleLeft = textWidth - input.scrollLeft;
+          cursor.style.left = visibleLeft + 'px';
+
+          // ensure the caret is visible (for long texts): adjust input's scrollLeft
+          const paddingRight = 10;
+          if (textWidth - input.scrollLeft > input.clientWidth - paddingRight) {
+            input.scrollLeft = textWidth - input.clientWidth + paddingRight;
+            cursor.style.left = (textWidth - input.scrollLeft) + 'px';
+          } else if (textWidth < input.scrollLeft) {
+            input.scrollLeft = textWidth;
+            cursor.style.left = (textWidth - input.scrollLeft) + 'px';
+          }
+        }
+
+        // show/hide cursor animation as focus changes
+        function onFocus() { cursor.style.opacity = '1'; updateCursor(); }
+        function onBlur()  { cursor.style.opacity = '0'; }
+
+        input.addEventListener('input', updateCursor);
+        input.addEventListener('keydown', (e) => {
+          // Update position on keys that do not trigger input immediately (arrows, delete, etc.)
+          setTimeout(updateCursor, 0);
+
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            const cmd = input.value.trim().toLowerCase();
+            if (cmd) {
+              // remove input/cursor/measure and place fixed text
+              wrapper.removeChild(input);
+              wrapper.removeChild(cursor);
+              wrapper.removeChild(measure);
+              const cmdText = document.createElement('span');
+              cmdText.textContent = cmd;
+              wrapper.appendChild(cmdText);
+              processCommand(cmd);
+            } else {
+              // if you enter without command, it just creates a new empty line (with prompt)
+              wrapper.removeChild(input);
+              wrapper.removeChild(cursor);
+              wrapper.removeChild(measure);
+              const blank = document.createElement('span');
+              blank.textContent = '';
+              wrapper.appendChild(blank);
+            }
+            // New linr input
+            createInputLine();
+          } else if (e.key === 'Escape') {
+            e.preventDefault();
+            screen.innerHTML = '';
+            createInputLine();
+          }
+        });
+
+        // arrows, mouse click, mouseup (position caret), etc.
+        input.addEventListener('keyup', updateCursor);
+        input.addEventListener('click', () => {
+          // updates after click (selectionStart already set)
+          setTimeout(updateCursor, 0);
+        });
+        input.addEventListener('mouseup', () => setTimeout(updateCursor, 0));
+        input.addEventListener('focus', onFocus);
+        input.addEventListener('blur', onBlur);
+
+        updateCursor();
+      }
+
+      // processes commands
+      function processCommand(cmd) {
+        switch(true){
+          case cmd === 'help': commandsPrint(commands.help, mode='html'); break;
+          case cmd === 'date': commandsPrint(new Date().toString(), mode='text'); break;
+          // case cmd.startsWith('echo '): commandsPrint(cmd.split(' ').slice(1).join(' ')); break;
+          case cmd === 'about': writeLineHTML(commands.about); break;
+          case cmd === 'socials': writeLineHTML(commands.socials); break;
+          case cmd === 'clear': screen.innerHTML=''; break;
+          default: if(cmd) commandsPrint(cmd + `{{ site.text.home.terminal.error }}`, mode='text');
+        }
+      }
+
+      function writeLineHTML(content, mode = 'html') {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'line-wrapper';
+
+        if (mode === 'html') {
+          wrapper.innerHTML = content;
+        } else {
+          wrapper.textContent = content;
+        }
+        screen.appendChild(wrapper);
+        screen.scrollTop = screen.scrollHeight;
+      }
+
+      function commandsPrint(text, mode = 'html') {
+        // creates the wrapper to group all the lined
+        const wrapper = document.createElement('div');
+        wrapper.className = 'line-wrapper';
+
+        text.split('\n').forEach((t) => {
+          const line = document.createElement('div');
+          line.className = 'line';
+          if (mode === 'html') {
+            line.innerHTML = t;
+          } else {
+            line.textContent = t;
+          }
+          wrapper.appendChild(line);
+        });
+
+        screen.appendChild(wrapper);
+        screen.scrollTop = screen.scrollHeight;
+      }
+
+      // start terminal
+      createInputLine();
+
+      // when clicking on the terminal, it always focuses on the last existing input
+      terminal.addEventListener("click", (e) => {
+        // avoids focusing when clicking a header button, etc.
+        const lastInput = screen.querySelector('.input:last-of-type');
+        if (lastInput) lastInput.focus();
+      });
+    });
+  </script>
+  {%- endif -%}
+</html>
+{%- endif -%}

data/_layouts/error.html

@@ -0,0 +1,15 @@
+---
+layout: default
+---
+
+<div class="container error">
+  <div class="row">
+    <div class="col-sm text-center">
+       {%- if site.text.error.image -%}
+          <img class="error-image" src="{{ site.text.error.image }}" alt="error 404">
+       {%- endif -%}
+      <h1 class="error-title">{{ site.text.error.title | escape }}</h1>
+      <h2 class="error-description">{{ site.text.error.message | markdownify }}</h2>
+    </div>
+  </div>
+</div>

data/_layouts/home.html

@@ -0,0 +1,58 @@
+---
+layout: default
+---
+
+{%- if site.home.terminal.enable and page.url == "/" -%}
+<div class="d-flex justify-content-center align-items-center mb-5 home home-terminal">
+  <div id="terminal" class="terminal">
+    <div class="terminal-header">
+      <div class="terminal-header__btn terminal-header__close" title="close"></div>
+      <div class="terminal-header__btn terminal-header__min" title="minimize"></div>
+      <div class="terminal-header__btn terminal-header__max" title="maximize"></div>
+      <div class="terminal-header__title">{{ site.text.home.terminal.user }}@{{ site.text.home.terminal.hostname }}</div>
+    </div>
+
+    <div id="screen" class="terminal-screen">
+      <div id="home-content" style="display:none !important;">
+        {{ content }}
+      </div>
+
+      <div id="terminal-screen--socials" style="display:none">
+        {% assign links = site.socials.links %}<strong>.&nbsp;</strong>
+        {% for item in links %}
+          <a class="socials-link" title="{{ item.title }}" href="{{ item.url }}" target="_blank">
+            {{ item.title }}
+          </a><strong>&nbsp;.&nbsp;</strong>
+        {% endfor %}
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<div class="home-text">
+  <div class="container home">
+    <div class="row">
+      <div class="content" style="{%- if page.text_center -%} text-align: center; {%- endif -%}">
+        {{ content }}
+      </div>
+    </div>
+  </div>
+  {%- include socials pos="center" -%}
+</div>
+
+{%- else -%}
+<div class="container home">
+  <div class="row">
+    <div class="content" style="{%- if page.text_center -%} text-align: center; {%- endif -%}">
+      {{ content }}
+    </div>
+  </div>
+</div>
+{%- endif -%}
+
+{%- if site.home.terminal.enable == false -%}
+  {%- if page.url == "/" and site.socials.enable -%}
+    {%- include socials pos="center" -%}
+  {%- endif -%}
+{%- endif -%}

data/_layouts/page.html

@@ -0,0 +1,9 @@
+---
+layout: default
+---
+
+<div class="container page">
+  <div class="row">
+    <div class="page-content">{{ content }}</div>
+  </div>
+</div>