From ed1ff38dcc2fb111cfa883318f4d582134ba3151 Mon Sep 17 00:00:00 2001
From: Britton Hayes <me@brittonhayes.com>
Date: Thu, 26 Dec 2024 18:25:08 -0800
Subject: [PATCH] fix: remove ejs jquery and bootstrap requirements for
 homepage (#638)

* fix: remove ejs jquery and bootstrap requirements for homepage

* fix: remove index controller

---------

Co-authored-by: brittonhayes <brittonhayes@users.noreply.github.com>
---
 src/controllers/indexController.ts |   5 -
 src/css/custom.css                 | 402 +++++++++++++----------------
 src/js/code.js                     |  33 ---
 src/public/index.html              | 151 +++++++++++
 src/server.ts                      |   7 +-
 5 files changed, 328 insertions(+), 270 deletions(-)
 delete mode 100644 src/controllers/indexController.ts
 delete mode 100644 src/js/code.js
 create mode 100644 src/public/index.html

diff --git a/src/controllers/indexController.ts b/src/controllers/indexController.ts
deleted file mode 100644
index 8c683239..00000000
--- a/src/controllers/indexController.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Request, Response } from 'express';
-
-export default (req: Request, res: Response) => {
-  res.render('pages/index');
-};
diff --git a/src/css/custom.css b/src/css/custom.css
index 0449a72e..b3e0c1fd 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -1,262 +1,208 @@
-html {
-  padding-top: 50px;
+/* Reset and base styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p {
-  color: #263238;
+
+:root {
+  --primary-color: #d81921;
+  --primary-dark: #c62828;
+  --text-color: #263238;
+  --bg-dark: #21201e;
+  --bg-light: #f5f5f5;
+  --link-color: #1b95e0;
+  --spacing: 1rem;
+}
+
+body {
   font-family: 'Helvetica', sans-serif;
+  color: var(--text-color);
+  line-height: 1.6;
+  padding-top: 3.5rem;
 }
+
+/* Typography */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  margin-top: 0;
-}
-h1,
-h2 {
+  margin: 0 0 var(--spacing) 0;
   font-weight: 900;
 }
-h2 {
-  margin-bottom: 10px;
-}
+
 a {
-  color: #1b95e0;
-}
-p,
-pre,
-table,
-ul {
-  margin-bottom: 30px;
-}
-pre {
-  position: relative;
-}
-hr {
-  border-color: #ccc;
-  border-width: 1px;
-  margin: 3px 0;
-}
-.center-block {
-  float: none;
-  margin: 0 auto;
-}
-.header {
-  background-color: #21201e;
-  color: #fff;
-  height: 200px;
-  text-align: center;
-  width: 100%;
-}
-.header h1,
-.header h2,
-.header h3,
-.header h4,
-.header h5 {
-  color: #fff;
-  margin: 0 10%;
-  text-align: center;
-}
-.footer {
-  padding: 30px;
+  color: var(--link-color);
+  text-decoration: none;
 }
+
+/* Navigation */
 .navbar {
-  background: #d81921;
-  border-width: 0px;
-  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
-  webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
-}
-.navbar-collapse {
-  padding: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: var(--primary-color);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  height: 3.5rem;
+  overflow: hidden;
+}
+
+.nav-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--spacing);
 }
-.navbar-inverse .navbar-nav li a {
-  color: #fff;
+
+.nav-links {
+  display: flex;
+  justify-content: flex-end;
+  list-style: none;
 }
-.navbar-inverse .navbar-nav .active a,
-.navbar-inverse .navbar-nav .active a:hover,
-.navbar-inverse .navbar-nav .active a:focus {
-  background-color: #c62828 !important;
+
+.nav-links li a {
+  display: block;
+  padding: 1rem;
+  color: white;
+  transition: background-color 0.3s;
 }
-.navbar-brand {
-  width: 100px;
+
+.nav-links li.active a,
+.nav-links li a:hover {
+  background-color: var(--primary-dark);
 }
-.center {
+
+/* Header */
+.header {
+  background-color: var(--bg-dark);
+  padding: 4rem 1rem;
   text-align: center;
 }
-.input-group-addon {
-  background-color: #f5f5f5;
-}
-.input-group-addon,
-.btn,
-.well,
-pre {
-  border-radius: 0px;
-}
-.well p:last-child {
-  margin-bottom: 0px;
-}
-.pad_top {
-  padding-top: 15px;
-}
-.pad_bot {
-  padding-bottom: 15px;
-}
-.do_image {
-  width: 300px;
-}
-.twitter-tweet {
-  margin: 0 auto !important;
-  padding-bottom: 12px !important;
-  padding-top: 12px !important;
-}
-.twitter-share-button {
-  float: left !important;
-  width: 85px !important;
-}
-.fb-like {
-  float: left !important;
+
+.header h1 {
+  color: white;
+  margin: 0 auto;
+  max-width: 800px;
+  font-size: 3.5rem;
+  line-height: 1.2;
+}
+
+.header h2 {
+  color: white;
+  margin: 0.5rem auto 0;
+  max-width: 800px;
+  font-weight: 300;
+  font-size: 1.5rem;
+  opacity: 0.9;
 }
+
+/* CTA Section */
 .cta {
-  background-color: #f5f5f5;
-  font-size: 21px;
-  font-weight: 300;
-  margin-bottom: 30px;
-  padding: 30px 0 30px;
+  background-color: var(--bg-light);
+  padding: 3rem 1rem;
   text-align: center;
-}
-.cta p:last-child {
-  margin-bottom: 0;
-}
-#home .header {
-  padding-top: 45px;
-}
-#home .header h1 {
-  display: inline-block;
-  position: relative;
-}
-#home .header h2 {
+  font-size: 1.3rem;
   font-weight: 300;
-  margin-bottom: 20px;
-  margin-top: 15px;
 }
-#home .header h4 {
-  font-weight: 300;
-}
-#home .header h4 .count {
-  font-weight: 900;
-}
-#home .btn-primary {
-  background-color: #1b95e0;
-  color: #fff;
-}
-#home pre {
-  margin-bottom: 30px;
+
+/* Interactive Section */
+.content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem var(--spacing);
 }
-#about .header {
-  padding-top: 65px;
+
+.interactive-section {
+  max-width: 800px;
+  margin: 0 auto;
 }
-@media (min-width: 628px) {
-  #about .header {
-    padding-top: 80px;
+
+.api-input {
+  display: flex;
+  margin: 1rem 0;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.api-prefix {
+  padding: 0.5rem 1rem;
+  background: var(--bg-light);
+  border-right: 1px solid #ddd;
+  white-space: nowrap;
+}
+
+#interactive {
+  flex: 1;
+  padding: 0.5rem;
+  border: none;
+  outline: none;
+}
+
+.api-input button {
+  padding: 0.5rem 1.5rem;
+  background: var(--link-color);
+  color: white;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.api-input button:hover {
+  background-color: #1576b3;
+}
+
+.hints {
+  font-size: 0.9rem;
+  margin: 1rem 0;
+}
+
+.output {
+  background: var(--bg-light);
+  padding: 1rem;
+  border-radius: 4px;
+  overflow: auto;
+  max-height: 400px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .nav-links {
+    display: none;
   }
-}
-#docs .hide {
-  display: none;
-}
-#docs .header {
-  padding-top: 65px;
-}
-#docs .container {
-  margin-top: 20px;
-}
-@media (min-width: 516px) {
-  #docs .header {
-    padding-top: 80px;
+
+  .menu-toggle {
+    display: block;
+  }
+
+  .api-input {
+    flex-direction: column;
+  }
+
+  .api-prefix {
+    border-right: none;
+    border-bottom: 1px solid #ddd;
   }
 }
-#docs table {
-  width: 100%;
-}
-#docs table th:first-child,
-#docs table tr:first-child {
-  width: 140px;
-}
-#docs table th:last-child,
-#docs table tr:last-child {
-  width: 180px;
-}
-#docs table th,
-#docs table td {
-  border: 1px solid #ccc;
-  padding: 8px;
-}
-#docs h1,
-#docs h2,
-#docs h3,
-#docs h4,
-#docs #resourcename {
-  margin-top: -65px;
-  padding-top: 65px;
-}
-#docs .docs-body h1 {
-  border-bottom: 1px solid #ccc;
-  margin-bottom: 30px;
-}
-#docs h3 {
-  font-weight: 300;
-}
-#docs h5 {
-  margin-top: 10px;
-  font-weight: 600;
-}
-#docs h6 {
-  display: none;
-}
-#docs .side-nav ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-#docs .side-nav ul li ul {
-  margin-left: 10px;
-}
-#docs .side-nav .doc-select li a {
-  box-sizing: border-box;
-  moz-box-sizing: border-box;
-  padding-left: 10px;
-  webkit-box-sizing: border-box;
-}
-#docs .side-nav .doc-select li.active > a {
-  border-left: 2px solid #1b95e0;
-  padding-left: 8px;
-}
-#docs .side-nav .doc-select li ul {
+
+.menu-toggle {
   display: none;
+  background: none;
+  border: none;
+  padding: 1rem;
+  cursor: pointer;
 }
-#docs .side-nav .doc-select li.active ul {
+
+.menu-toggle span {
   display: block;
-}
-#docs .side-nav hr {
-  width: 50%;
-}
-#docs .nav-group {
-  position: relative;
-  z-index: 20;
-}
-#docs .nav-group.stick {
-  position: fixed;
-  top: 65px;
-  z-index: 20;
-}
-#docs pre {
-  max-height: 280px;
-  /*min-height: 40px;*/
-  overflow: scroll;
+  width: 25px;
+  height: 3px;
+  background: white;
+  margin: 4px 0;
+  transition: 0.3s;
 }
diff --git a/src/js/code.js b/src/js/code.js
deleted file mode 100644
index 327ba2e2..00000000
--- a/src/js/code.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function update(call) {
-  $('#interactive').val(call);
-  interactive_call();
-}
-
-function interactive_call() {
-  var content = $('#interactive').val();
-
-  if (content == '') {
-    content = 'spells/acid-arrow/';
-  }
-
-  var call_url = 'api/' + content;
-
-  $.ajax({
-    dataType: 'json',
-    url: call_url,
-    context: document.body,
-    complete: (data) => {
-      if (data['status'] == 200) {
-        var d = $.parseJSON(data['responseText']);
-        $('#interactive_name').html(d['name'] + ':');
-        if (d['name'] === undefined) {
-          $('#interactive_name').html('this request:');
-        }
-        $('#interactive_output').text(JSON.stringify(d, null, '\t'));
-      } else if (data['status'] == 404) {
-        $('#interactive_output').text(data['status'] + ' ' + data['statusText']);
-      }
-    },
-  });
-}
diff --git a/src/public/index.html b/src/public/index.html
new file mode 100644
index 00000000..24d8f47e
--- /dev/null
+++ b/src/public/index.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>D&D 5th Edition API</title>
+
+    <!-- Primary Meta Tags -->
+    <meta name="title" content="D&D 5th Edition API">
+    <meta name="description" content="REST API to access D&D 5th Edition SRD database">
+    <meta name="keywords" content="Dungeons, Dragons, 5th, Edition, API, SRD" />
+    <meta name="theme-color" content="#D81921" />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://www.dnd5eapi.co/">
+    <meta property="og:title" content="D&D 5th Edition API">
+    <meta property="og:description" content="REST API to access D&D 5th Edition SRD database">
+    <meta property="og:image" content="/public/DnD-5e-meta-4k.png">
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://www.dnd5eapi.co/">
+    <meta property="twitter:title" content="D&D 5th Edition API">
+    <meta property="twitter:description" content="REST API to access D&D 5th Edition SRD database">
+    <meta property="twitter:image" content="/public/dnd-5e-meta.jpg">
+
+    <link rel="stylesheet" href="/css/custom.css" />
+    <link rel="shortcut icon" href="/public/favicon.ico" type="image/x-icon" />
+</head>
+
+<body>
+    <!-- Navbar -->
+    <nav class="navbar">
+        <div class="nav-container">
+            <button class="menu-toggle" aria-label="Toggle menu">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
+            <ul class="nav-links">
+                <li class="active"><a href="/">Home</a></li>
+                <li><a href="https://5e-bits.github.io/docs">Documentation</a></li>
+                <li><a href="https://discord.gg/TQuYTv7">Chat</a></li>
+                <li><a href="https://github.com/bagelbits/5e-srd-api">Contribute</a></li>
+            </ul>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <section id="home">
+        <div class="header">
+            <h1>D&D 5e API</h1>
+            <h2>The 5th Edition Dungeons and Dragons API</h2>
+        </div>
+
+        <div class="cta">
+            <p>
+                Just a simple api for things within the Official 5th Edition SRD<br />
+                and easily accessible through a modern RESTful API.
+            </p>
+            <p>Enjoy the D&D 5th Edition API!</p>
+        </div>
+
+        <div class="content">
+            <div class="interactive-section">
+                <h1>Try it now!</h1>
+                <div class="api-input">
+                    <span class="api-prefix">https://www.dnd5eapi.co/api/</span>
+                    <input id="interactive" type="text" placeholder="spells/acid-arrow/" />
+                    <button onclick="interactiveCall();return false;">
+                        submit
+                    </button>
+                </div>
+
+                <div class="hints">
+                    Need a hint? try
+                    <a href="#" onClick="update('classes/');return false;">classes/</a>,
+                    <a href="#" onClick="update('features/');return false;">features/</a>,
+                    <a href="#"
+                        onClick="update('monsters/adult-black-dragon/');return false;">monsters/adult-black-dragon/</a>
+                    or
+                    <a href="#" onClick="update('spells/?name=Acid+Arrow');return false;">spells/?name=Acid+Arrow</a>
+                </div>
+
+                <p class="result-label">Resource for <span id="interactive_name">Acid Arrow</span></p>
+                <pre id="interactive_output" class="output"></pre>
+            </div>
+        </div>
+    </section>
+
+    <!-- Replace old scripts with modern JS -->
+    <script>
+        // Update input field and trigger API call
+        function update(call) {
+            document.getElementById('interactive').value = call;
+            interactiveCall();
+        }
+
+        // Make API call and update the output
+        async function interactiveCall() {
+            const input = document.getElementById('interactive');
+            const nameSpan = document.getElementById('interactive_name');
+            const output = document.getElementById('interactive_output');
+
+            let content = input.value;
+            if (!content) {
+                content = 'spells/acid-arrow/';
+            }
+
+            try {
+                const response = await fetch('api/' + content);
+
+                if (response.ok) {
+                    const data = await response.json();
+                    nameSpan.textContent = data.name ? `${data.name}:` : 'this request:';
+                    output.textContent = JSON.stringify(data, null, 2);
+                } else {
+                    output.textContent = `${response.status} ${response.statusText}`;
+                }
+            } catch (err) {
+                output.textContent = 'Error: ' + err.message;
+            }
+        }
+
+        // Initialize with default data
+        document.addEventListener('DOMContentLoaded', interactiveCall);
+    </script>
+
+    <!-- Google Analytics -->
+    <script>
+        (function (i, s, o, g, r, a, m) {
+            i['GoogleAnalyticsObject'] = r;
+            (i[r] =
+                i[r] ||
+                function () {
+                    (i[r].q = i[r].q || []).push(arguments);
+                }),
+                (i[r].l = 1 * new Date());
+            (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+            a.async = 1;
+            a.src = g;
+            m.parentNode.insertBefore(a, m);
+        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+
+        ga('create', 'UA-89541269-1', 'auto');
+        ga('send', 'pageview');
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/server.ts b/src/server.ts
index 430ab543..7189befa 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -7,7 +7,6 @@ import { createApolloMiddleware } from './middleware/apolloServer.js';
 import { expressMiddleware } from '@apollo/server/express4';
 import express from 'express';
 import { fileURLToPath } from 'url';
-import indexController from './controllers/indexController.js';
 import morgan from 'morgan';
 import docsController from './controllers/docsController.js';
 import path from 'path';
@@ -27,8 +26,6 @@ export default async () => {
   const app = express();
 
   // Middleware stuff
-  app.set('view engine', 'ejs');
-  app.set('views', __dirname + '/views');
   if (bugsnagMiddleware) {
     app.use(bugsnagMiddleware.requestHandler);
   }
@@ -56,7 +53,9 @@ export default async () => {
   );
 
   // Register routes
-  app.get('/', indexController);
+  app.get('/', (req, res) => {
+    res.sendFile(path.join(__dirname, 'public/index.html'));
+  });
   app.get('/docs', docsController);
   app.use('/api', apiRoutes);