Make discord webhook url into an environment variable using github re…

…po secret, might not work. Defer scripts and only use them on relevant pages.

.github/workflows/gh-pages.yml

@@ -22,7 +22,9 @@ jobs:
           # extended: true
 
       - name: Build
-        run: hugo --minify
+        run: DISCORD_WEBHOOK_URL=$DISCORD_WEBHOOK_URL hugo --minify
+        env:
+          DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
 
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3

.gitignore

@@ -8,4 +8,5 @@ public/
 __pycache__/
 *.py[cod]
 pynecone.db
-.web
+.web
+.env

README.md

@@ -41,6 +41,7 @@ The first command runs the site, and the second monitors for file changes to syn
 
 4. If you ran the docker compose command you should also have a Python applet I wrote up at `localhost:8501` in your browser. This is a GUI that helps you write the tedious parts of a formula's page. You can read more about it in the ChatGPT workflow section at the bottom of this README.
 
+5. If you want to test the submitting to Discord feature, crete a `.env` file in the root directory of the repository with DISCORD_WEBHOOK_URL=<your webhook link>
 
 ## Adding a formula
 With the site running locally, you can now add a formula page to the site and preview how it'll look on the actual site.

assets/js/formula-suggest.js

@@ -59,8 +59,6 @@ function sanitizeInput(input) {
     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: [
         {
@@ -97,7 +95,7 @@ function sanitizeInput(input) {
       ],
     };
 
-    fetch(webhookURL, {
+    fetch(webhook_url, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

config/_default/config.toml

@@ -16,3 +16,9 @@ googleAnalytics= "G-055HWG7Q3V"
 [imaging]
   resampleFilter = "lanczos"
   quality = 100
+
+[security]
+  enableInlineShortcodes = false
+  [security.funcs]
+    getenv = ["DISCORD_WEBHOOK_URL"]
+

docker-compose.yml

@@ -4,18 +4,21 @@ services:
     build: .
     ports:
       - "1313:1313"
-    x-develop:
+    develop:
       watch:
         - action: sync
           path: .
           target: /src/
+    env_file:
+      - .env
+
   streamlit:
     build:
       context: .
       dockerfile: Dockerfile-streamlit
     ports:
       - "8501:8501"
-    x-develop:
+    develop:
       watch:
         - action: sync
           path: ./streamlit-app.py

layouts/_default/submit.html

@@ -127,7 +127,12 @@ <h2 class="mb-6 text-2xl font-bold text-neutral-900 dark:text-neutral">Preview</
       </button>
     </section>
   </article>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.2.3/purify.min.js"></script>
+  <!-- get the webhook url from the environment using hugo, don't know how to do it in js.-->
+  <script>
+    const webhook_url = "{{ getenv "DISCORD_WEBHOOK_URL" }}"; // '' doesn't work
+  </script>
+  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.2.3/purify.min.js"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   {{ $js := resources.Get "js/formula-suggest.js" | fingerprint }}
   <script src="{{ $js.Permalink }}"></script>
 {{ end }}

layouts/partials/head.html

@@ -142,6 +142,4 @@
     {{ end }}
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
     <!-- for parsing suggest markdown to html, since markdownify is not allowed in javascript -->
-    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-
-  </head>
+</head>

static/js/copy-katex.js

@@ -80,7 +80,6 @@ document.addEventListener('click', function(event) {
             if (fragment.querySelector('.katex-mathml')) {
                 const texContents = katexReplaceWithTex(fragment).textContent;
                 navigator.clipboard.writeText(texContents).then(function() {
-                    console.log("Copied");
 
                     // Create a temporary element to display the "Copied!" message
                     const tooltipElement = document.createElement('div');