Use base template

cofob · May 14, 2024 · 68ebab9 · 68ebab9
1 parent 183075c
commit 68ebab9
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 117 deletions.
diff --git a/templates/base.html b/templates/base.html
@@ -0,0 +1,60 @@
+<head>
+  <title>{% block title %}Fastside{% endblock %}</title>
+  <style>
+    html {
+      font-family: monospace;
+      font-size: 16px;
+      color: #66397C;
+    }
+
+    #parent-div {
+      text-align: center;
+    }
+
+    #child-div {
+      text-align: left;
+      width: 50%;
+      display: inline-block;
+    }
+
+    hr {
+      border: 1px dashed;
+    }
+
+    a:link,
+    a:visited {
+      color: #66397C;
+    }
+
+    @media only screen and (max-width: 1000px) {
+      #child-div {
+        width: 90%;
+      }
+    }
+
+    ul {
+      margin: 10px;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      html {
+        color: #fff;
+        background: #121517;
+      }
+
+      a:link,
+      a:visited {
+        color: #AA8AC1;
+      }
+    }
+  </style>
+  {% block head %}{% endblock %}
+</head>
+
+<body>
+  <div id="parent-div">
+    <div id="child-div">
+      {% block content %}{% endblock %}
+    </div>
+  </div>
+</body>
diff --git a/templates/cached_redirect.html b/templates/cached_redirect.html
@@ -1,21 +1,25 @@
-<head>
-  <title>Fastside Cached Redirect</title>
-  <script>
-    let instances = [{% for instance in urls %}"{{ instance }}", {% endfor %}];
-    let randomIndex = Math.floor(Math.random() * instances.length);
-    let randomEntry = instances[randomIndex];
-    let hash = window.location.hash;
-    let data = hash.substring(1);
-    if (data.startsWith("/")) {
-      data = data.substring(1);
-    }
-    window.location.href = randomEntry + data;
-  </script>
-</head>
+{% extends "base.html" %}
 
-<body>
-  <span>Redirecting...</span>
-  <ul>
-    {% for instance in urls %}<li>{{ instance }}</li>{% endfor %}
-  </ul>
-</body>
+{% block title %}Fastside Cached Redirect{% endblock %}
+
+{% block head %}
+<script>
+  let instances = [{% for instance in urls %}"{{ instance }}", {% endfor %}];
+  let randomIndex = Math.floor(Math.random() * instances.length);
+  let randomEntry = instances[randomIndex];
+  let hash = window.location.hash;
+  let data = hash.substring(1);
+  if (data.startsWith("/")) {
+    data = data.substring(1);
+  }
+  window.location.href = randomEntry + data;
+</script>
+{% endblock %}
+
+{% block content %}
+<h1>Redirecting...</h1>
+<h3>Online instances</h3>
+<ul>
+  {% for instance in urls %}<li><a href="{{ instance }}">{{ instance }}</a></li>{% endfor %}
+</ul>
+{% endblock %}
diff --git a/templates/error.html b/templates/error.html
@@ -1,9 +1,9 @@
-<head>
-  <title>Fastside Error</title>
-</head>
+{% extends "base.html" %}
 
-<body>
-  <h1>Error occurred</h1>
-  <p>Status code: {{ status_code }}</p>
-  <p>Detail: {{ detail }}</p>
-</body>
+{% block title %}Fastside Error{% endblock %}
+
+{% block content%}
+<h1>Error occurred</h1>
+<p>Status code: {{ status_code }}</p>
+<p>Detail: {{ detail }}</p>
+{% endblock %}
diff --git a/templates/history_redirect.html b/templates/history_redirect.html
@@ -1,12 +1,15 @@
-<head>
-  <title>Fastside Redirect</title>
-  <meta http-equiv="refresh" content="1; url={{ path }}">
-  <script>
-    history.pushState({ page: 1 }, "Fastside Redirect");
-    window.location.href = "{{ path }}";
-  </script>
-</head>
+{% extends "base.html" %}
 
-<body>
-  <span>Redirecting to {{ path }}...</span>
-</body>
+{% block title %}Fastside Redirect{% endblock %}
+
+{% block head %}
+<meta http-equiv="refresh" content="1; url={{ path }}">
+<script>
+  history.pushState({ page: 1 }, "Fastside Redirect");
+  window.location.href = "{{ path }}";
+</script>
+{% endblock %}
+
+{% block content %}
+<h1>Redirecting to {{ path }}...</h1>
+{% endblock %}
diff --git a/templates/index.html b/templates/index.html
@@ -1,78 +1,24 @@
-<head>
-  <title>Fastside</title>
-  <style>
-    html {
-      font-family: monospace;
-      font-size: 16px;
-      color: #66397C;
-    }
-
-    #parent-div {
-      text-align: center;
-    }
-
-    #child-div {
-      text-align: left;
-      width: 50%;
-      display: inline-block;
-    }
-
-    hr {
-      border: 1px dashed;
-    }
-
-    a:link,
-    a:visited {
-      color: #66397C;
-    }
-
-    @media only screen and (max-width: 1000px) {
-      #child-div {
-        width: 90%;
-      }
-    }
-
-    ul {
-      margin: 10px;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      html {
-        color: #fff;
-        background: #121517;
-      }
-
-      a:link,
-      a:visited {
-        color: #AA8AC1;
-      }
-    }
-  </style>
-</head>
-
-<body>
-  <div id="parent-div">
-    <div id="child-div">
-      <h1>Fastside [<a href="https://github.com/cofob/fastside">GitHub</a>]</h1>
-      <hr>
-      <h3>Last synced {{ time }}</h3>
-      <div>
-        <ul>
-          {% for service in services %}
-          <li><a href="/{{ service.name }}/">{{ service.name }}</a> Aliases: [{% for alias in service.aliases
-            %}{% if loop.index != 1 %}, {% endif %}<code>{{ alias }}</code>{% endfor %}]</li>
-          <ul>
-            {% let instances = service.instances|sort_list %}
-            {% for instance in instances %}
-            <li>
-              <a href="{{ instance.url }}">{{ instance.url }}</a> <span>Status:
-                <code>{{ instance.status }}</code></span>
-            </li>
-            {% endfor %}
-          </ul>
-          {% endfor %}
-        </ul>
-      </div>
-    </div>
-  </div>
-</body>
+{% extends "base.html" %}
+
+{% block content %}
+<h1>Fastside [<a href="https://github.com/cofob/fastside">GitHub</a>]</h1>
+<hr>
+<h3>Last synced {{ time }}</h3>
+<div>
+  <ul>
+    {% for service in services %}
+    <li><a href="/{{ service.name }}/">{{ service.name }}</a> Aliases: [{% for alias in service.aliases
+      %}{% if loop.index != 1 %}, {% endif %}<code>{{ alias }}</code>{% endfor %}]</li>
+    <ul>
+      {% let instances = service.instances|sort_list %}
+      {% for instance in instances %}
+      <li>
+        <a href="{{ instance.url }}">{{ instance.url }}</a> <span>Status:
+          <code>{{ instance.status }}</code></span>
+      </li>
+      {% endfor %}
+    </ul>
+    {% endfor %}
+  </ul>
+</div>
+{% endblock %}