Initial Commit

public/js/blog.js

@@ -0,0 +1,27 @@
+fetch('/blog/blog-posts')
+  .then(response => response.json())
+  .then(posts => {
+    const blogContainer = document.getElementById('blog-container');
+    posts.forEach(post => {
+      // Create a clickable link wrapping the entire blog preview
+      const blogLink = document.createElement('a');
+      blogLink.href = `/blog/${post.slug}`;
+      blogLink.className = 'blog-link'; // Optional class for styling
+      blogLink.style.textDecoration = 'none'; // Remove the underline from the link
+
+      const blogPreview = document.createElement('div');
+      blogPreview.className = 'blog-preview';
+
+      // Create the blog preview with the title, date, and preview
+      blogPreview.innerHTML = `
+        <h3 class="post-title">${post.title}</h3> <!-- Apply the pink color to the title -->
+        <p class="post-date">Published on ${post.date}</p> <!-- Apply the amber color to the date -->
+        <p class="post-preview">${post.preview}...</p> <!-- Apply the amber color to the preview -->
+      `;
+
+      // Append the preview div inside the link, then add the link to the container
+      blogLink.appendChild(blogPreview);
+      blogContainer.appendChild(blogLink);
+    });
+  })
+  .catch(error => console.error('Error fetching blog posts:', error));

public/js/clickableHeader.js

@@ -0,0 +1,9 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const clickableContainer = document.querySelector('.clickable-container');
+
+  if (clickableContainer) {
+    clickableContainer.addEventListener('click', function() {
+      window.location.href = 'https://kleinpanic.com/';
+    });
+  }
+});

public/js/contact.js

@@ -0,0 +1,72 @@
+document.querySelector('button').addEventListener('click', function(event) {
+  event.preventDefault(); // Prevent form submission
+
+  // Grab the form inputs
+  const name = document.querySelector('input[type="text"]').value.trim();
+  const email = document.querySelector('input[type="email"]').value.trim();
+  const message = document.querySelector('textarea').value.trim();
+
+  // Simple frontend validation
+  if (!name || !email || !message) {
+    alert("Please fill in all fields.");
+    return;
+  }
+
+  // Validate email format
+  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  if (!emailPattern.test(email)) {
+    alert("Please enter a valid email address.");
+    return;
+  }
+
+  // Disable the button to prevent spamming
+  const sendButton = document.querySelector('button');
+  sendButton.disabled = true;
+  sendButton.innerText = "Sending...";
+
+  // Prepare data to send
+  const data = {
+    name: name,
+    email: email,
+    message: message
+  };
+
+  // Send data to the backend via fetch API
+  fetch('/contact/submit-contact-form', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(data),
+  })
+  .then(response => {
+    // Check if the response is OK (status code 200)
+    if (!response.ok) {
+      // If response status is not ok, attempt to get error message
+      return response.json().then(errData => {
+        throw new Error(errData.message || "Unknown error occurred.");
+      });
+    }
+    return response.json(); // Parse the success response JSON
+  })
+  .then(data => {
+    if (data.success) {
+      // Show success message and reset the form
+      alert("Message sent successfully! Thank you for reaching out.");
+      document.querySelector('form').reset(); // Reset the form after successful submission
+    } else {
+      // Show error message returned from server
+      alert(data.message || "There was an error sending your message. Please try again later.");
+    }
+  })
+  .catch((error) => {
+    // Log the error and display the error message to the user
+    console.error('Error:', error);
+    alert(error.message || "There was an error sending your message. Please try again later.");
+  })
+  .finally(() => {
+    // Always re-enable the button and reset the button text
+    sendButton.disabled = false;
+    sendButton.innerText = "Send Message";
+  });
+});

public/js/projects.js

@@ -0,0 +1,64 @@
+async function fetchProjects() {
+  let repos = [];
+  let page = 1;
+  let perPage = 100;
+
+  try {
+    // Fetch all repositories using pagination
+    while (true) {
+      const response = await fetch(`/projects/fetch?page=${page}&per_page=${perPage}`);
+      const pageRepos = await response.json();
+
+      if (pageRepos.length === 0) {
+        break; // No more repos to fetch
+      }
+
+      repos = repos.concat(pageRepos);
+      page++;
+    }
+
+    // Function to truncate text with "..." only if necessary
+    function truncateText(text, maxLength) {
+      return text.length > maxLength ? text.slice(0, maxLength - 3) + '...' : text;
+    }
+
+    // Function to pad text with spaces to ensure proper column alignment
+    function padText(text, length) {
+      return text.padEnd(length, ' ');
+    }
+
+    // Function to dynamically pad the repo_id (install command) for alignment
+    function padRepoId(index) {
+      const id = index + 1; // Repo index starts from 1
+      return `/install.sh?repo_id=${id}`; // Removed the "example.com" part
+    }
+
+    // Column widths to match the HTML header size
+    const maxNameLength = 24; // Adjusted to ensure proper width
+    const maxDescriptionLength = 63; // Adjusted for consistency
+    const maxInstallCommandLength = 30; // Adjusted for the install command path
+
+    // Build table rows (without the header since it's in HTML)
+    const tableContent = repos.map((repo, index) => {
+      const name = padText(truncateText(repo.name || 'Unknown', maxNameLength), maxNameLength); // Pad and truncate name
+      const description = padText(truncateText(repo.description || 'No description', maxDescriptionLength), maxDescriptionLength); // Pad and truncate description
+
+      // Make the project name clickable, linking to the GitHub URL
+      const clickableName = `<a href="${repo.html_url}" class="clickable-repo" target="_blank">${name}</a>`;
+
+      // Curl install command dynamically generated based on the index with proper padding
+      const curlInstall = padText(padRepoId(index), maxInstallCommandLength);
+
+      // Return the formatted ASCII table row with the clickable project name
+      return `| ${clickableName} | ${description} | ${curlInstall} |`;
+    }).join('\n');
+
+    // Add the table rows to the pre-existing header and footer in HTML
+    document.getElementById('projects-table-content').innerHTML = tableContent; // Insert as HTML to preserve the clickable links
+  } catch (error) {
+    console.error('Error fetching projects:', error);
+  }
+}
+
+// Fetch projects when the page loads
+fetchProjects();