refactor: cleaner codebase and best practices

12 files changed, 158 insertions, 140 deletions

diff --git a/includes/download-logic.php b/includes/download-logic.php
new file mode 100644
index 0000000..517115a
--- /dev/null
+++ b/includes/download-logic.php
@@ -0,0 +1,52 @@
+<div class="centered">
+    <h3>🎨 please select your presentation theme 🎭</h3>
+    <form action="download.php" method="post" onsubmit="showGeneratingIndicator()">
+        <table class="centered">
+            <thead>
+                <tr>
+                    <th>
+                        <h2>preview</h2>
+                    </th>
+                    <th>
+                        <h2>select</h2>
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php
+                $themes = [
+                    '90sMakeUpCommercial' => '90sMakeUpCommercial',
+                    'chicagoOlives' => 'chicagoOlives',
+                    'earlyCupertino' => 'earlyCupertino',
+                    'ohioCustard' => 'ohioCustard',
+                    'raleighAroundMe' => 'raleighAroundMe',
+                    'redmond2013' => 'redmond2013',
+                    'defaultIsKing' => 'defaultIsKing',
+                    'cuppertinoIsh' => 'cuppertinoIsh',
+                    'lazyProfessor' => 'lazyProfessor',
+                    'redmond2003' => 'redmond2003',
+                    'strengthInNumbers' => 'strengthInNumbers',
+                    'thatMagazine' => 'thatMagazine',
+                ];
+
+                foreach ($themes as $key => $theme) {
+                    echo "<tr>
+                            <td>
+                                <img loading='lazy' class='theme-select' src='img/{$key}.webp' alt='{$theme}'>
+                            </td>
+                            <td>
+                                <button type='submit' name='{$key}'>{$theme}</button>
+                            </td>
+                          </tr>";
+                }
+                ?>
+            </tbody>
+        </table>
+        <div id="generating-indicator" style="display: none;">
+            <p>📊</p>
+            <p>generating presentation...</p>
+            <p>please wait.</p>
+        </div>
+    </form>
+</div>
+<br>
diff --git a/includes/link-tags-in-head.php b/includes/link-tags-in-head.php
index 3b5f302..b05273b 100644
--- a/includes/link-tags-in-head.php
+++ b/includes/link-tags-in-head.php
@@ -1,2 +1,2 @@
-<link rel="icon" href="../img/site-icon.webp" type="image/x-icon">
-<link rel="stylesheet" href="../css/style.css">
+<link rel="icon" href="/img/site-icon.webp" type="image/x-icon">
+<link rel="stylesheet" href="/css/style.css">
diff --git a/includes/markdown-editor.php b/includes/markdown-editor.php
new file mode 100644
index 0000000..fa68bb8
--- /dev/null
+++ b/includes/markdown-editor.php
@@ -0,0 +1,11 @@
+        <div>
+            <label for="user-input">
+                <h2 class="centered">markdown goes here:</h2>
+            </label>
+            <form action="index.php" method="post">
+                <textarea id="user-input" name="user-input" rows="8" cols="80"><?php echo $_SESSION['user-input'] ?? ''; ?></textarea>
+                <div class="centered">
+                    <button type="submit" name="compile">create presentation</button>
+                </div>
+            </form>
+            <br><br>
diff --git a/includes/quick-how-to.php b/includes/quick-how-to.php
new file mode 100644
index 0000000..4460de9
--- /dev/null
+++ b/includes/quick-how-to.php
@@ -0,0 +1,33 @@
+
+            <details>
+                <summary style="font-size: 1.125rem;"><strong>← expand for a brief <emphasis>"how-to"</emphasis> 📖</strong></summary>
+                <p>
+                <ul>
+                    <li>type '#' to indicate that you are starting a new slide and then press ↵ (enter/return) twice.</li>
+                    <li>you can add a "slide title" after each '#' to name that portion of your presentation.</li>
+                    <ul>
+                        <li>a space between "#" and your slide title is required: <br><br> </li>
+                        <ul class="no-bullets">
+                            <li># [YOUR TITLE GOES HERE]</li>
+                        </ul>
+                        <br>
+                    </ul>
+                    <li>type/format text underneath the '#' for the slide contents.</li>
+                    <ul>
+                        <li>make sure to start typing your slide content two ↵'s ("enter key presses") away from the "#".</li>
+                        <li>lists require to be formatted in this manner as well: <br><br> </li>
+                        <ul class="no-bullets">
+                            <li># slide title <br><br>
+                                This is a list <br><br>
+                                * item 1 <br>
+                                * item 2 <br>
+                                * item 3 <br>
+                            </li>
+                        </ul>
+                    </ul>
+                </ul>
+                <br>
+                <p class="centered"> <i>It's highly recommended that you use markdown lists rather than plain text lists</i> </p><br>
+                </p>
+            </details>
+            <br>
diff --git a/includes/video-how-to.php b/includes/video-how-to.php
new file mode 100644
index 0000000..6745b4a
--- /dev/null
+++ b/includes/video-how-to.php
@@ -0,0 +1,14 @@
+            <details>
+                <summary style="font-size: 1.125rem;"><strong>← expand for a quick video demo 🎬</strong></summary>
+                <p>
+                    <video controls>
+                        <source src="vids/A4upxlH2mIHOXYRq.webm" type="video/webm">
+                        <source src="vids/A4upxlH2mIHOXYRq.ogg" type="video/ogg">
+                        <source src="vids/A4upxlH2mIHOXYRq.mp4" type="video/mp4">
+                        Your browser does not support modern open-source video implementations 😔.
+                    </video>
+                </p>
+            </details>
+            <br>
+        </div>
+    <br>
diff --git a/index.php b/index.php
index dbe46d0..b19bfce 100644
--- a/index.php
+++ b/index.php
@@ -21,123 +21,19 @@ session_start(); ?>
     include "includes/procrastislides-banner.php";
     include "includes/main-info.php";
     include "includes/nav-header.php";
-    ?>
-    <?php if (isset($_POST["compile"])) {
-        $_SESSION["user-input"] = $_POST["user-input"]; ?>
-        <div class="centered">
-            <h3>🎨 please select your presentation theme 🎭</h3>
-            <form action="download.php" method="post" onsubmit="showGeneratingIndicator()">
-                <table class="centered">
-                    <thead>
-                        <tr>
-                            <th>
-                                <h2>preview</h2>
-                            </th>
-                            <th>
-                                <h2>select</h2>
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <?php
-                        $themes = [
-                            '90sMakeUpCommercial' => '90sMakeUpCommercial',
-                            'chicagoOlives' => 'chicagoOlives',
-                            'earlyCupertino' => 'earlyCupertino',
-                            'ohioCustard' => 'ohioCustard',
-                            'raleighAroundMe' => 'raleighAroundMe',
-                            'redmond2013' => 'redmond2013',
-                            'defaultIsKing' => 'defaultIsKing',
-                            'cuppertinoIsh' => 'cuppertinoIsh',
-                            'lazyProfessor' => 'lazyProfessor',
-                            'redmond2003' => 'redmond2003',
-                            'strengthInNumbers' => 'strengthInNumbers',
-                            'thatMagazine' => 'thatMagazine',
-                        ];
-
-                        foreach ($themes as $key => $theme) {
-                            echo "<tr>
-                            <td>
-                                <img loading='lazy' class='theme-select' src='img/{$key}.webp' alt='{$theme}'>
-                            </td>
-                            <td>
-                                <button type='submit' name='{$key}'>{$theme}</button>
-                            </td>
-                          </tr>";
-                        }
-                        ?>
-                    </tbody>
-                </table>
-                <div id="generating-indicator" style="display: none;">
-                    <p>📊</p>
-                    <p>generating presentation...</p>
-                    <p>please wait.</p>
-                </div>
-            </form>
-        </div>
-        <br>
-    <?php } else { ?>
-        <div>
-            <label for="user-input">
-                <h2 class="centered">markdown goes here:</h2>
-            </label>
-            <form action="index.php" method="post">
-                <textarea id="user-input" name="user-input" rows="8" cols="80"><?php echo $_SESSION['user-input'] ?? ''; ?></textarea>
-                <div class="centered">
-                    <button type="submit" name="compile">create presentation</button>
-                </div>
-            </form>
-            <br><br>
-            <details>
-                <summary style="font-size: 1.125rem;"><strong>← expand for a brief <emphasis>"how-to"</emphasis> 📖</strong></summary>
-                <p>
-                <ul>
-                    <li>type '#' to indicate that you are starting a new slide and then press ↵ (enter/return) twice.</li>
-                    <li>you can add a "slide title" after each '#' to name that portion of your presentation.</li>
-                    <ul>
-                        <li>a space between "#" and your slide title is required: <br><br> </li>
-                        <ul class="no-bullets">
-                            <li># [YOUR TITLE GOES HERE]</li>
-                        </ul>
-                        <br>
-                    </ul>
-                    <li>type/format text underneath the '#' for the slide contents.</li>
-                    <ul>
-                        <li>make sure to start typing your slide content two ↵'s ("enter key presses") away from the "#".</li>
-                        <li>lists require to be formatted in this manner as well: <br><br> </li>
-                        <ul class="no-bullets">
-                            <li># slide title <br><br>
-                                This is a list <br><br>
-                                * item 1 <br>
-                                * item 2 <br>
-                                * item 3 <br>
-                            </li>
-                        </ul>
-                    </ul>
-                </ul>
-                <br>
-                <p class="centered"> <i>It's highly recommended that you use markdown lists rather than plain text lists</i> </p><br>
-                </p>
-            </details>
-            <br>
-            <details>
-                <summary style="font-size: 1.125rem;"><strong>← expand for a quick video demo 🎬</strong></summary>
-                <p>
-                    <video controls>
-                        <source src="vids/A4upxlH2mIHOXYRq.webm" type="video/webm">
-                        <source src="vids/A4upxlH2mIHOXYRq.ogg" type="video/ogg">
-                        <source src="vids/A4upxlH2mIHOXYRq.mp4" type="video/mp4">
-                        Your browser does not support modern open-source video implementations 😔.
-                    </video>
-                </p>
-            </details>
-            <br>
-        </div>
-    <?php } ?>
-    <br>
+    if (isset($_POST["compile"])) {
+        $_SESSION["user-input"] = $_POST["user-input"];
+        include "includes/download-logic.php";
+    } else {
+        include "includes/markdown-editor.php";
+        include "includes/quick-how-to.php";
+        include "includes/video-how-to.php";
+    } ?>
     <footer>
         <?php include "includes/nav-footer.php"; ?>
     </footer>
+
+    <!-- JS calls -->
     <script type="text/javascript">
         function showGeneratingIndicator() {
             const generatingIndicator = document.getElementById('generating-indicator');
@@ -150,6 +46,7 @@ session_start(); ?>
             element: document.getElementById("user-input")
         });
     </script>
+
 </body>
 
 </html>
diff --git a/licenses.php b/licenses.php
index 2ee145f..ebea509 100644
--- a/licenses.php
+++ b/licenses.php
@@ -22,10 +22,10 @@
     ?>
     <h3>licenses</h3>
     <ul>
-        <li> <a href="gpl2.php"> pandoc's license (gnu gpl v2)</a> </li>
-        <li><a href="LaTeX.php"> The LaTeX Project Public License (1.3)</a></li>
-        <li><a href="mit.php"> SimpleMDE's license (mit)</a></li>
-        <li><a href="isc.php"> suckless sent's license (isc)</a></li>
+        <li> <a href="licenses/gpl2.php"> pandoc's license (gnu gpl v2)</a> </li>
+        <li><a href="licenses/LaTeX.php"> The LaTeX Project Public License (1.3)</a></li>
+        <li><a href="licenses/mit.php"> SimpleMDE's license (mit)</a></li>
+        <li><a href="licenses/isc.php"> suckless sent's license (isc)</a></li>
 
     </ul>
 
diff --git a/LaTeX.php b/licenses/LaTeX.php
index 759cd47..8ee752e 100644
--- a/LaTeX.php
+++ b/licenses/LaTeX.php
@@ -10,15 +10,15 @@
     <title>procrastiSlides: great for procratinators who need to get a presentation out, quick! 😆</title>
     <meta name="description" content="create .pdf presentations from markdown! 🤗 procrastiSlides is a simple presentation(s) site that respects your dark mode setting and has responsive web design.
          non-intruisive ads, no tracking, nothing but quick slides from plain text/markdown. 🏫 try copy and pasting your school notes! that might even work 😂">
-    <?php include "includes/link-tags-in-head.php"; ?>
+    <?php include "../includes/link-tags-in-head.php"; ?>
     <meta name="color-scheme" content="light dark"> 
 </head>
 
 <body>
     <?php
-    include "includes/license-banner.php";
-    include "includes/secondary-info.php";
-    include "includes/nav-header.php";
+    include "../includes/license-banner.php";
+    include "../includes/secondary-info.php";
+    include "../includes/nav-header.php";
     ?>
     <div class="centered">
         <pre>
@@ -446,7 +446,7 @@ Important Recommendations
     <br>
     <footer>
 
-        <?php include "includes/nav-footer.php"; ?>
+        <?php include "../includes/nav-footer.php"; ?>
 
 
     </footer>
diff --git a/gpl2.php b/licenses/gpl2.php
index da77682..072e729 100644
--- a/gpl2.php
+++ b/licenses/gpl2.php
@@ -10,15 +10,15 @@
     <title>procrastiSlides: great for procratinators who need to get a presentation out, quick! 😆</title>
     <meta name="description" content="create .pdf presentations from markdown! 🤗 procrastiSlides is a simple presentation(s) site that respects your dark mode setting and has responsive web design.
          non-intruisive ads, no tracking, nothing but quick slides from plain text/markdown. 🏫 try copy and pasting your school notes! that might even work 😂">
-    <?php include "includes/link-tags-in-head.php"; ?>
+    <?php include "../includes/link-tags-in-head.php"; ?>
     <meta name="color-scheme" content="light dark"> 
 </head>
 
 <body>
     <?php
-    include "includes/license-banner.php";
-    include "includes/secondary-info.php";
-    include "includes/nav-header.php";
+    include "../includes/license-banner.php";
+    include "../includes/secondary-info.php";
+    include "../includes/nav-header.php";
     ?>
     <div class="centered">
         <pre>
@@ -160,7 +160,7 @@ This General Public License does not permit incorporating your program into prop
     <br>
     <footer>
 
-        <?php include "includes/nav-footer.php"; ?>
+        <?php include "../includes/nav-footer.php"; ?>
 
     </footer>
 </body>
diff --git a/licenses/index.php b/licenses/index.php
new file mode 100644
index 0000000..9f683d1
--- /dev/null
+++ b/licenses/index.php
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="color-scheme" content="light dark">
+    <meta http-equiv="refresh" content="0; URL='https://youtu.be/XGxIE1hr0w4'" />
+    <title>Art and Assets</title>
+</head>
+<body>
+    <p>If you are not redirected, <a href="https://youtu.be/XGxIE1hr0w4">click here for folder contents</a>.</p>
+</body>
+</html>
diff --git a/isc.php b/licenses/isc.php
index 9f3d53e..4ee5857 100644
--- a/isc.php
+++ b/licenses/isc.php
@@ -10,15 +10,15 @@
     <title>procrastiSlides: great for procratinators who need to get a presentation out, quick! 😆</title>
     <meta name="description" content="create .pdf presentations from markdown! 🤗 procrastiSlides is a simple presentation(s) site that respects your dark mode setting and has responsive web design.
          non-intruisive ads, no tracking, nothing but quick slides from plain text/markdown. 🏫 try copy and pasting your school notes! that might even work 😂">
-    <?php include "includes/link-tags-in-head.php"; ?>
+    <?php include "../includes/link-tags-in-head.php"; ?>
     <meta name="color-scheme" content="light dark"> 
 </head>
 
 <body>
     <?php
-    include "includes/license-banner.php";
-    include "includes/secondary-info.php";
-    include "includes/nav-header.php";
+    include "../includes/license-banner.php";
+    include "../includes/secondary-info.php";
+    include "../includes/nav-header.php";
     ?>
     <div class="centered">
         <pre>
@@ -59,7 +59,7 @@ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
     <br>
     <footer>
 
-        <?php include "includes/nav-footer.php"; ?>
+        <?php include "../includes/nav-footer.php"; ?>
 
     </footer>
 </body>
diff --git a/mit.php b/licenses/mit.php
index 2616d8f..ec50022 100644
--- a/mit.php
+++ b/licenses/mit.php
@@ -10,15 +10,15 @@
     <title>procrastiSlides: great for procratinators who need to get a presentation out, quick! 😆</title>
     <meta name="description" content="create .pdf presentations from markdown! 🤗 procrastiSlides is a simple presentation(s) site that respects your dark mode setting and has responsive web design.
          non-intruisive ads, no tracking, nothing but quick slides from plain text/markdown. 🏫 try copy and pasting your school notes! that might even work 😂">
-    <?php include "includes/link-tags-in-head.php"; ?>
+    <?php include "../includes/link-tags-in-head.php"; ?>
     <meta name="color-scheme" content="light dark"> 
 </head>
 
 <body>
     <?php
-    include "includes/license-banner.php";
-    include "includes/secondary-info.php";
-    include "includes/nav-header.php";
+    include "../includes/license-banner.php";
+    include "../includes/secondary-info.php";
+    include "../includes/nav-header.php";
     ?>
     <div class="centered">
         <pre>
@@ -50,7 +50,7 @@ SOFTWARE.
     <br>
     <footer>
 
-        <?php include "includes/nav-footer.php"; ?>
+        <?php include "../includes/nav-footer.php"; ?>
 
 
     </footer>