Move CSS/JS to separate files

src/main.rs

@@ -24,6 +24,8 @@ async fn main() -> std::io::Result<()> {
         login_path: login_path.clone(),
     });
 
+    app.at("/static").serve_dir("static")?;
+
     app.with(After(errors));
     app.with(session());
 

static/script.js

@@ -0,0 +1,16 @@
+document.querySelectorAll('[data-delete]').forEach((el) => {
+  el.addEventListener('click', (e) => {
+    if (confirm('Are you sure? This cannot be undone.')) {
+      let postId = e.target.dataset.delete;
+      fetch(`/posts/${postId}`, {
+        method: 'DELETE',
+      }).then((r) => {
+        r.json().then((data) => {
+          if (data.success) {
+            window.location = '/';
+          }
+        });
+      });
+    }
+  });
+});

static/style.css

@@ -0,0 +1,161 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: #aab5a9;
+  color: #000;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  font-size: 12px;
+}
+
+a {
+  color: #000;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+.btn {
+  cursor: pointer;
+  background: #ffffff;
+  border: 1px solid #383e37;
+  border-radius: 0;
+  padding: 0.15em 0.3em;
+}
+
+.btn:hover {
+  background-color: #f0f0f0;
+}
+
+.danger {
+  color: #942626;
+}
+
+.container {
+  margin: auto;
+  max-width: 800px;
+  padding: 1em;
+}
+
+.header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin: 1em 0;
+}
+
+.header__logo {
+  background-color: #ffffff;
+  border: 1px solid #383e37;
+  font-size: 14px;
+  font-style: italic;
+  font-weight: bold;
+  letter-spacing: 2px;
+  padding: 0.25em 0.5em;
+  text-decoration: none;
+}
+
+.header__logo:hover {
+  background-color: #f0f0f0;
+}
+
+.form__field {
+  margin: 1em 0;
+}
+
+.form__label {
+  display: block;
+  margin-bottom: 0.5em;
+}
+
+.form__textarea,
+.form__text-field {
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  font-size: 12px;
+  padding: 0.25em;
+  width: 100%;
+}
+
+.form__textarea {
+  height: 200px;
+  resize: vertical;
+}
+
+.post:not(:last-child) {
+  margin: 3em 0;
+}
+
+.post__heading {
+  align-items: center;
+  background: white;
+  border: 1px solid #383e37;
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 12px;
+  font-weight: bold;
+  justify-content: space-between;
+  margin-bottom: 1em;
+  padding: 0.5em;
+}
+
+.post__title {
+  flex: 1;
+  margin-right: 1em;
+  min-width: 220px;
+}
+
+.post__date {
+  font-style: italic;
+  white-space: nowrap;
+}
+
+.post__link {
+  cursor: pointer;
+  font-style: normal;
+  font-weight: normal;
+  text-decoration: underline;
+}
+
+.post__link:hover {
+  text-decoration: none;
+}
+
+.post__body {
+  border-top: none;
+  padding: 0.5em;
+}
+
+.message {
+  border: 1px solid #383e37;
+  color: #fff;
+  margin: 0.5em 0;
+  padding: 0.25em 1.5em;
+  text-align: center;
+  width: 100%;
+}
+
+.message--error {
+  background-color: #942626;
+}
+
+.message--success {
+  background-color: #289426;
+}
+
+.error__heading {
+  margin: 2em 0 1em;
+}
+
+.error__message {
+  font-size: 18px;
+}
+
+@media (max-width: 500px) {
+  .form__button {
+    width: 100%;
+  }
+}

templates/layout.html

@@ -5,169 +5,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>bngl://ws/</title>
-    <style>
-      * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-      }
-
-      body {
-        background: #aab5a9;
-        color: #000;
-        font-family: Verdana, Geneva, Tahoma, sans-serif;
-        font-size: 12px;
-      }
-
-      a {
-        color: #000;
-      }
-
-      a:hover {
-        text-decoration: none;
-      }
-
-      .btn {
-        cursor: pointer;
-        background: #ffffff;
-        border: 1px solid #383e37;
-        border-radius: 0;
-        padding: 0.15em 0.3em;
-      }
-
-      .btn:hover {
-        background-color: #f0f0f0;
-      }
-
-      .danger {
-        color: #942626;
-      }
-
-      .container {
-        margin: auto;
-        max-width: 800px;
-        padding: 1em;
-      }
-
-      .header {
-        align-items: center;
-        display: flex;
-        justify-content: space-between;
-        margin: 1em 0;
-      }
-
-      .header__logo {
-        background-color: #ffffff;
-        border: 1px solid #383e37;
-        font-size: 14px;
-        font-style: italic;
-        font-weight: bold;
-        letter-spacing: 2px;
-        padding: 0.25em 0.5em;
-        text-decoration: none;
-      }
-
-      .header__logo:hover {
-        background-color: #f0f0f0;
-      }
-
-      .form__field {
-        margin: 1em 0;
-      }
-
-      .form__label {
-        display: block;
-        margin-bottom: 0.5em;
-      }
-
-      .form__textarea,
-      .form__text-field {
-        font-family: Verdana, Geneva, Tahoma, sans-serif;
-        font-size: 12px;
-        padding: 0.25em;
-        width: 100%;
-      }
-
-      .form__textarea {
-        height: 200px;
-        resize: vertical;
-      }
-
-      .post:not(:last-child) {
-        margin: 3em 0;
-      }
-
-      .post__heading {
-        align-items: center;
-        background: white;
-        border: 1px solid #383e37;
-        display: flex;
-        flex-wrap: wrap;
-        font-size: 12px;
-        font-weight: bold;
-        justify-content: space-between;
-        margin-bottom: 1em;
-        padding: 0.5em;
-      }
-
-      .post__title {
-        flex: 1;
-        margin-right: 1em;
-        min-width: 220px;
-      }
-
-      .post__date {
-        font-style: italic;
-        white-space: nowrap;
-      }
-
-      .post__link {
-        cursor: pointer;
-        font-style: normal;
-        font-weight: normal;
-        text-decoration: underline;
-      }
-
-      .post__link:hover {
-        text-decoration: none;
-      }
-
-      .post__body {
-        border-top: none;
-        padding: 0.5em;
-      }
-
-      .message {
-        border: 1px solid #383e37;
-        color: #fff;
-        margin: .5em 0;
-        padding: .25em 1.5em;
-        text-align: center;
-        width: 100%;
-      }
-
-      .message--error {
-        background-color: #942626;
-      }
-
-      .message--success {
-        background-color: #289426;
-      }
-
-      .error__heading {
-        margin: 2em 0 1em;
-      }
-
-      .error__message {
-        font-size: 18px;
-      }
-
-      @media (max-width: 500px) {
-        .form__button {
-          width: 100%;
-        }
-      }
-    </style>
+    <link rel="stylesheet" href="/static/style.css" />
   </head>
   <body>
     <div class="container">
@@ -181,32 +19,13 @@
       </header>
       <div class="messages">
         {% if flash_error %}
-          <p class="message message--error">{{ flash_error }}</p>
-        {% endif %}
-
-        {% if flash_success %}
-          <p class="message message--success">{{ flash_success }}</p>
+        <p class="message message--error">{{ flash_error }}</p>
+        {% endif %} {% if flash_success %}
+        <p class="message message--success">{{ flash_success }}</p>
         {% endif %}
       </div>
       {% block content %} {% endblock %}
     </div>
-    <script>
-      document.querySelectorAll('[data-delete]').forEach((el) => {
-        el.addEventListener('click', (e) => {
-          if (confirm('Are you sure? This cannot be undone.')) {
-            let postId = e.target.dataset.delete;
-            fetch(`/posts/${postId}`, {
-              method: 'DELETE',
-            }).then((r) => {
-              r.json().then((data) => {
-                if (data.success) {
-                  window.location = '/';
-                }
-              });
-            });
-          }
-        });
-      });
-    </script>
+    <script src="/static/script.js"></script>
   </body>
 </html>