Better suggest page

assets/css/custom.css

@@ -314,3 +314,28 @@ img[alt=diagram] {
     background-color: rgba(var(--color-primary-600), 1);
     border-radius: 0.09rem;
 }
+
+.p-20 {
+    padding: 20px;
+}
+
+.rounded-md {
+    border-radius: 0.375rem;
+}
+
+
+.prose :where(ul):not(:where([class~="not-prose"] *)) {
+    list-style-type: disc;
+}
+
+.p-12 {
+    padding: 3rem;
+}
+
+.pt-20 {
+    padding-top: 5rem;
+}
+
+.pb-8 {
+    padding-bottom: 2rem;
+}

assets/js/formula-suggest.js

@@ -0,0 +1,162 @@
+function sanitizeInput(input) {
+    return DOMPurify.sanitize(input);
+  }
+  // Function to render the preview
+  function renderPreview() {
+    const title = sanitizeInput(document.getElementById('title').value);
+    const body = sanitizeInput(document.getElementById('body').value);
+    const latex = sanitizeInput(document.getElementById('latex').value);
+    const tags = sanitizeInput(document.getElementById('tags').value).split(',').map(tag => tag.trim());
+    const parsedBody = marked.parse(body);
+
+    const tagsHTML = tags
+      .map((tag) => {
+        return `
+          <a
+            class="rounded-md border border-neutral-200 px-2 py-[1px] hover:border-black hover:text-primary-700 dark:border-neutral-600 dark:hover:border-primary-600 dark:hover:text-primary-400"
+          >
+            ${tag}
+          </a>
+        `;
+      })
+      .join(' '); // Join the tags with a space
+
+    const previewContent = `
+      <article>
+        <header class="max-w-prose">
+          <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
+            ${title}
+          </h1>
+          <div class="my-2 text-xs text-neutral-500 dark:text-neutral-400">
+            ${tagsHTML}
+          </div>
+          <div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden prose">
+            ${parsedBody}
+          </div>
+        </header>
+      </article>
+    `;
+
+    document.getElementById('preview-content').innerHTML = previewContent;
+    document.getElementById('preview').classList.remove('hidden');
+
+    // Render LaTeX
+    if (typeof renderMathInElement !== 'undefined') {
+      renderMathInElement(document.getElementById('preview-content'), {
+        delimiters: [
+          { left: '$$', right: '$$', display: true },
+          { left: '\\(', right: '\\)', display: false }
+        ]
+      });
+    }
+  }
+
+  // Function to send data to Discord webhook
+  function submitToDiscord() {
+    const title = sanitizeInput(document.getElementById('title').value);
+    const description = sanitizeInput(document.getElementById('description').value);
+    const tags = sanitizeInput(document.getElementById('tags').value);
+    const latex = sanitizeInput(document.getElementById('latex').value);
+    const body = sanitizeInput(document.getElementById('body').value);
+
+    const webhookURL = 'https://discord.com/api/webhooks/1059998584889688134/eUqXbInp90bcFdL1A3ly141TAtn9jiPjbYwCzSfjPV2-4kx2UIX3M-soCJxWTrvSNbLP'; // Replace with your Discord webhook URL
+
+    const data = {
+      embeds: [
+        {
+          title: "New stemformulas.com formula suggestion",
+          fields: [
+            {
+              name: "Title",
+              value: title,
+              inline: true,
+            },
+            {
+              name: "Description",
+              value: description,
+              inline: true,
+            },
+            {
+              name: "Tags",
+              value: tags,
+              inline: true,
+            },
+            {
+              name: "LaTeX",
+              value: `\`\`\`latex\n${latex}\n\`\`\``,
+              inline: false,
+            },
+            {
+              name: "Body",
+              value: `\`\`\`markdown\n${body}\n\`\`\``,
+              inline: false,
+            },
+          ],
+          color: 0x00ff00, // Green color for the embed
+        },
+      ],
+    };
+
+    fetch(webhookURL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    })
+      .then((response) => {
+        if (response.ok) {
+          alert('Submission sent successfully. Thank you!');
+        } else {
+          alert('Failed to send submission. Please try again.');
+        }
+      })
+      .catch((error) => {
+        console.error('Error:', error);
+        alert('An error occurred. Please try again.');
+      });
+  }
+
+  // Attach the form submission handler
+  document.getElementById('formula-suggestion-form').addEventListener('submit', function(event) {
+    event.preventDefault();
+    renderPreview();
+    // Show the "Submit" button once the preview has been rendered once
+    document.getElementById('submit-button').classList.remove('hidden');
+  });
+
+  function handleRateLimit() {
+      // limit submissions so we can't get spammed
+      const submitButton = document.getElementById('submit-button');
+      const lastSubmissionTime = localStorage.getItem('lastSubmissionTime');
+      const currentTime = new Date().getTime();
+
+      // Check if 5 minutes have passed since the last submission
+      const timeLeft = 120000 - (currentTime - lastSubmissionTime);
+      if (lastSubmissionTime && timeLeft > 0) {
+          alert(`Please wait ${Math.ceil(timeLeft / 1000)} seconds before submitting again.`);
+          return;
+      }
+
+      // Disable the button and store the current time
+      submitButton.disabled = true;
+      localStorage.setItem('lastSubmissionTime', currentTime);
+
+      // Submit the data to Discord
+      submitToDiscord();
+
+      // Re-enable the button after the correct time has elapsed
+      setTimeout(() => {
+          submitButton.disabled = false;
+      }, timeLeft);
+  }
+
+  // Attach the "Submit" button click handler
+  document.getElementById('submit-button').addEventListener('click', function() {
+      handleRateLimit();
+  });
+
+  // Render the preview when the page loads
+  document.addEventListener('DOMContentLoaded', function() {
+    renderPreview();
+  });

assets/js/search.js

@@ -1,5 +1,6 @@
 var fuse;
 var onMainPage = document.getElementById("search-query-main");
+var onSubmitPage = document.getElementById("formula-suggestion-form")
 var showButtons = document.querySelectorAll("[id^='search-button']");
 if(onMainPage){
   var input = document.getElementById("search-query-main");
@@ -41,6 +42,12 @@ if (!(onMainPage)){
 document.addEventListener("keydown", function (event) {
   // Forward slash to open search wrapper
   if (event.key == "/") {
+    // ignore if we're on the suggest page
+    if (onSubmitPage){
+      event.preventDefault();
+      return;
+    }
+
     if (!searchVisible) {
       event.preventDefault();
       displaySearch();

config/_default/menus.en.toml

@@ -26,8 +26,8 @@
   weight = 30
 
 [[main]]
-  name = "suggest"
-  pageRef = "suggest"
+  name = "submit"
+  pageRef = "submit"
   weight = 40
 
 [[main]]

content/about/_index.md

@@ -5,7 +5,7 @@ showTableOfContents: true
 ---
 Stemformulas is a website dedicated to providing a single place to look for STEM formulas. It has a long way to go to become that, but the foundation is laid out.
 
-It was made by a few engineering students who were frustrated with the current state of formula searching online. This frustration lead to the focus of the features of the site, which include:
+It was made by a few engineering students (lead by [@linguinelabs](https://x.com/linguinelabs)) who were frustrated with the current state of formula searching online. This frustration lead to the focus of the features of the site, which include:
 
 - The search bar being in focus on site load, so you can search for a formula quickly
 - LaTeX being copyable by just clicking on it on any formula's page
@@ -24,7 +24,8 @@ It is hosted on [GitHub Pages](https://pages.github.com/), deployed conveniently
 ## Contributing
 If you want to add a formula to this site, there are two ways you can do so.
 
-1. Submit a suggestion for a formula on our [Google Form](https://forms.gle/EWjwFmiEQrrjsZEF9) (can also be filled out on our [suggest](/suggest) page). This form is also used for general feedback, e.g. if one of our pages has a mistake.
+1. Submit a formula on our [suggest](/suggest) page). This has been revamped to have a preview for ease of use.
 
-2. Create a pull request on the
-[GitHub repo](https://github.com/stemformulas/stemformulas.github.io). More detailed instructions can be found in the [README](https://github.com/stemformulas/stemformulas.github.io#adding-a-formula-by-submitting-a-pull-request).
+2. Create a pull request directly on the
+[GitHub repo](https://github.com/stemformulas/stemformulas.github.io). This is of course easier for us to merge, but requires more effort from you. 
+More detailed contribution instructions can be found in the [README](https://github.com/stemformulas/stemformulas.github.io?tab=readme-ov-file#adding-a-formula).

content/suggest/_index.md → content/submit/_index.md

@@ -2,6 +2,10 @@
 title: "Suggest"
 description: "Make a suggestion"
 ---
-<div class="form-container">
+{{<katex>}} 
+<!-- katex tag is required lol -->
+
+<!-- old google form -->
+<!-- <div class="form-container">
     <iframe allowfullscreen src="https://docs.google.com/forms/d/e/1FAIpQLScQP-w7M7BqscA68Htup4KYBE25EgntDg2EhhuVYX50PJHmTg/viewform?embedded=true" width="100%" height="2000" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
-</div>
+</div> -->

layouts/_default/submit.html

@@ -0,0 +1,133 @@
+{{ define "main" }}
+<!-- Custom html/js page for submitting formulas. Rather than use hugo templating, which has to be static, 
+ I kind of reverse engineered the formula pages and render a preview using the user's inputs-->
+
+  <article class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+    <header class="max-w-prose">
+      <h1 class="mt-0 mb-2 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
+        submit a formula
+      </h1>
+      <p class="text-lg text-neutral-500 dark:text-neutral-400 mb-6">
+        Replace the example fields below, preview your submission, and then submit!
+      </p>
+    </header>
+
+    <section class="bg-white dark:bg-neutral-800 rounded-md shadow-sm border border-neutral-200 dark:border-neutral-700">
+      <div class="p-6">
+        <form id="formula-suggestion-form" class="space-y-6 p-20">
+          <div class="space-y-2">
+            <label 
+              for="title" 
+              class="block text-lg mb-1 font-medium text-neutral-700 dark:text-neutral-300">
+              Title
+            </label>
+            <input 
+              type="text" 
+              id="title" 
+              name="title" 
+              placeholder="Gaussian/Normal Distribution"
+              value="Gaussian/Normal Distribution"
+              required
+              class="w-full px-4 py-2 mb-6 rounded-md dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+            >
+          </div>
+
+          <div class="space-y-2">
+            <label 
+              for="description" 
+              class="block text-lg mb-1 font-medium text-neutral-700 dark:text-neutral-300">
+              Short Description (used in search results only)
+            </label>
+            <input 
+              type="text" 
+              id="description" 
+              name="description" 
+              placeholder="The formula for the normal distribution."
+              value="The formula for the normal distribution."
+              required
+              class="w-full px-4 py-2 mb-6 rounded-md dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+            >
+          </div>
+
+          <div class="space-y-2">
+            <label for="tags" class="block text-lg mb-1 font-medium text-neutral-700 dark:text-neutral-300">
+              Tags (comma-separated)
+            </label>
+            <input 
+              type="text" 
+              id="tags" 
+              name="tags" 
+              placeholder="math, statistics, probability theory"
+              value="math, statistics, probability theory"
+              required
+              class="w-full px-4 py-2 mb-6 rounded-md dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+            >
+          </div>
+
+          <div class="space-y-2">
+            <label for="latex" class="block text-lg mb-1 font-medium text-neutral-700 dark:text-neutral-300">
+              LaTeX for card preview
+            </label>
+            <textarea 
+              id="latex" 
+              name="latex" 
+              placeholder="f(x) = \frac{1}{\sigma \sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}"
+              required
+              rows="2"
+              class="w-full px-4 py-2 mb-6 rounded-md dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+            >f(x) = \frac{1}{\sigma \sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}
+            </textarea>
+          </div>
+
+          <div class="space-y-2">
+            <label for="body" class="block text-lg mb-1 font-medium text-neutral-700 dark:text-neutral-300">
+              Body Text (Markdown, LaTeX)
+            </label>
+            <textarea 
+              id="body" 
+              name="body" 
+              required
+              rows="8"
+              class="w-full px-4 py-2 mb-6 rounded-md dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+            >The formula for the normal distribution as a function of the variable x is:
+$$ \frac{1}{\sigma \sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2} $$
+
+Where
+
+* \\( \small e\ \\) is Euler's number, 
+* \\( \small  \mu\ \\) is the mean of the distribution, and
+* \\\( \small  \sigma\ \\) is the standard deviation of the distribution.
+
+## Sources
+
+- [Wikipedia](https://en.wikipedia.org/wiki/Normal_distribution)
+- [Britannica](https://www.britannica.com/topic/uniform-distribution-statistics)</textarea>
+          </div>
+
+          <button 
+            type="submit"
+            class="px-6 py-2 text-base font-semibold text-white rounded-md border-neutral-200 dark:bg-neutral-700 hover:bg-primary-100 dark:hover:bg-primary-600 focus:outline-dotted focus:outline-transparent focus:outline-2"
+          >
+            Preview
+          </button>
+        </form>
+      </div>
+    </section>
+
+    <section id="preview" class="max-w-prose mt-8 hidden">
+      <h2 class="mb-6 text-2xl font-bold text-neutral-900 dark:text-neutral">Preview</h2>
+      <div id="preview-content" class="bg-white dark:bg-neutral-800 rounded-lg shadow-sm border border-neutral-200 dark:border-neutral-700 p-12 pt-20 pb-8">
+      </div>
+      <!-- Add a "Submit" button below the preview -->
+      <button 
+        id="submit-button"
+        class="mt-6 px-6 py-2 text-base font-semibold text-white rounded-md border-neutral-200 dark:bg-neutral-700 hover:bg-primary-100 dark:hover:bg-primary-600 focus:outline-dotted focus:outline-transparent focus:outline-2 hidden"
+      >
+        Submit
+      </button>
+    </section>
+  </article>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.2.3/purify.min.js"></script>
+  {{ $js := resources.Get "js/formula-suggest.js" | fingerprint }}
+  <script src="{{ $js.Permalink }}"></script>
+{{ end }}