adds a credits page and tidies up some loose ends

app.py

@@ -12,7 +12,7 @@ app = flask.Flask('songbook')
     
 #     db = openbook()
 
-#     return flask.render_template('.html',
+#     return flask.render_template('.jinja',
 #     )
 
 # HOMEPAGE
@@ -25,7 +25,7 @@ def homepage():
 
 
 
-    return flask.render_template('home.html')
+    return flask.render_template('home.jinja')
 
 # SEARCH RESULTS
 
@@ -75,7 +75,7 @@ def searchpage():
     else:
         searchresult = []
 
-    return flask.render_template('searchresults.html',
+    return flask.render_template('searchresults.jinja',
         searchresult=searchresult
     )
 
@@ -116,7 +116,7 @@ def suggestsearchpage():
     else:
         searchresult = []
 
-    return flask.render_template('suggestsearchresults.html',
+    return flask.render_template('suggestsearchresults.jinja',
         searchresult=searchresult
     )
 
@@ -162,7 +162,7 @@ def songindex():
         track
     ''').fetchall()
 
-    return flask.render_template('songindex.html',
+    return flask.render_template('songindex.jinja',
         album_info=album_info,
         song_info=song_info
     )
@@ -208,7 +208,7 @@ def motifindex():
         min(clip.song_id)
     ''').fetchall()
 
-    return flask.render_template('motifindex.html',
+    return flask.render_template('motifindex.jinja',
         category_info = category_info,
         motif_info = motif_info
     )
@@ -246,7 +246,7 @@ def albumpage(id):
     (id,)
     ).fetchall()
 
-    return flask.render_template('album.html',
+    return flask.render_template('album.jinja',
         album_info=album_info,
         song_info=song_info
     )
@@ -312,7 +312,7 @@ def motifpage(id):
     (id,)
     ).fetchall()
 
-    return flask.render_template('motif.html',
+    return flask.render_template('motif.jinja',
         name=name,
         clip_info=clip_info,
         album_info=album_info
@@ -400,7 +400,7 @@ def songpage(id):
     (id,)
     ).fetchall()
 
-    return flask.render_template('song.html',
+    return flask.render_template('song.jinja',
         song_info=song_info,
         id=id,
         album_info=album_info,
@@ -411,7 +411,7 @@ def songpage(id):
 @app.route('/suggest')
 def suggestpage():
 
-    return flask.render_template('suggest.html',
+    return flask.render_template('suggest.jinja',
     )
 
 @app.route('/sent', methods=['POST'])
@@ -427,5 +427,11 @@ def sentpage():
             flask.request.form['connection-1-id'][:4],
             flask.request.form['suggest-description'][:10_000],
         ])
-    return flask.render_template('sent.html',
+    return flask.render_template('sent.jinja',
+    )
+
+@app.route('/credits')
+def creditpage():
+
+        return flask.render_template('credits.jinja',
     )

build_db.py

@@ -2,7 +2,11 @@ import sqlite3
 import os
 import pyexcel_odsr
 
+try:
     os.remove('songbook.sqlite')
+except FileNotFoundError:
+    pass
+
 db = sqlite3.connect("songbook.sqlite")
 
 cur = db.cursor()

docker-compose.yaml

@@ -3,4 +3,4 @@ services:
     build: .
     init: true
     ports:
-      - "127.0.0.1:5123:8000"
+      - "127.0.0.1:8000:8000"

static/style.css

@@ -18,7 +18,7 @@
     :root{
         --block: lch(20% 0 75);
         --box: lch(40% 2.5 75);
-        --back: radial-gradient(lch(20% 0 75), black );
+        --back: radial-gradient(lch(10% 0 75) 50%, black );
         --search-back: lch(35% 0 75);
         --thick-border: lch(60% 10 75);
         --thin-border: lch(60% 10 75);
@@ -202,7 +202,7 @@ header{
     position: absolute;
     right: .3rem;
     bottom: .3rem;
-    font-size: small;
+    /* font-size: small; */
     margin: 0;
     color: lch(80% 50 50);
 }
@@ -223,7 +223,7 @@ header{
 
 .home-nav{
     display: flex; gap: 1.2rem;
-    border-style: solid; border-width: 1px; border-color: var(--thin-border); border-left: 0; border-top: 0; border-right: 0;
+    /* border-style: solid; border-width: 1px; border-color: var(--thin-border); border-left: 0; border-top: 0; border-right: 0; */
     margin: 1.2rem; margin-bottom: 0;
     padding-bottom: 1.2rem;
 }
@@ -232,7 +232,7 @@ header{
     display: flex; flex-direction: column; list-style: none; justify-content: center; align-items: center;
     flex: auto;
     position: relative;
-    border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem;
+    border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem; border-width: 0.3rem;
     text-decoration: none;
     background-color: var(--block);
     padding-top: 1.2rem; padding-bottom: 1.2rem;
@@ -350,7 +350,7 @@ main{
     background-color: var(--block);
     max-width: 64rem;
     width: 100%;
-    margin-left: auto; margin-right: auto;
+    margin-left: auto; margin-right: auto; margin-bottom: auto;
 }
 
 main ul{
@@ -365,7 +365,7 @@ footer{
     background: linear-gradient(90deg, lch(10% 90 50), lch(35% 90 50) 25%, lch(35% 90 50) 75%, lch(10% 90 50));
     width: 100%;
     padding: 0;
-    margin-top: auto;
+    /* margin-top: auto; */
 }
 
 .footer-content{
@@ -376,7 +376,7 @@ footer{
 
 .footer-content span{
     font-size: calc(.7rem + .3vw);
-    margin-left: 1.2rem; margin-right: 1.2rem;
+    margin-left: .6rem; margin-right: .6rem;
     text-align: center;
     color: lch(90% 25 85);
 }
@@ -698,10 +698,10 @@ footer{
 /* SUGGEST PAGE */
 
 .suggestbox{
-    display: flex; flex-wrap: wrap; align-items: center; gap: 2.4rem; flex-direction: column;
+    display: flex; align-items: center; gap: 2.4rem; flex-direction: column;
     margin-top: 2.4rem;
     overflow: hidden;
-    height: 36rem;
+    height: 48 rem;
 }
 
 .suggestbox h2{
@@ -747,3 +747,33 @@ footer{
 .search-number{
     display: none;
 }
+
+/* CREDITS */
+
+.credit-box{
+    display: flex; flex-direction: column;
+    background: radial-gradient(lch(35% 90 50) 50%, lch(10% 90 50));
+    width: 48rem;
+    margin: auto;
+    border-style: outset; border-color: var(--thick-border);
+}
+
+.credit-text{
+    margin: 1.2rem; margin-bottom: 0;
+    display: flex; justify-content: space-between;
+    color: lch(90% 25 85);
+}
+
+.credit-text a{
+    text-decoration: underline;
+    color: lch(90% 25 85);
+}
+
+.credit-text img{
+    height: 14.4rem;
+    border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem; border-width: 0.3rem;
+}
+
+.credit-text p{
+    text-align: left;
+}

templates/base.jinja

@@ -25,11 +25,11 @@
   
     <body>
 
-        {% block nav %}{% include 'nav.html' %}{% endblock %}
+        {% block nav %}{% include 'nav.jinja' %}{% endblock %}
         {% block main %}<main>{% endblock %}
         {% block content required %}{% endblock %}
         {% block main2 %}</main>{% endblock %}
-        {% block footer %}{% include 'footer.html' %}{% endblock %}
+        {% block footer %}{% include 'footer.jinja' %}{% endblock %}
 
     </body>
 </html>

templates/credits.jinja

@@ -0,0 +1,36 @@
+{% extends 'base.jinja' %}
+{% block title %}Credits{% endblock %}
+{% block main %}{% endblock %}
+
+{% block content %}
+
+<div class="credit-box">
+    <div class="credit-text">
+        <div>
+            <h3>Developed by Esby</h3>
+            <ul>
+                <li>Aristide Majnheld - Bismarck</li>
+                <li><a href="https://octodon.social/@esbylion">@esbylion@octodon.social</a></li>
+                <li><a href="https://etheirys.masto.host/@esbylion">@esbylion@etheirys.masto.host</a></li>
+                <li><a href="mailto:eorzeasongbook@gmail.com">eorzeasongbook@gmail.com</a></li>
+            </ul>
+            
+        </div>
+        <div>
+            <img src="{{ url_for('static', filename='aristide.png') }}" alt="Song Index" />
+        </div>
+    </div>
+    <div class="credit-text">
+        <div>
+            <h3>Made with</h3>
+            <ul>
+                <li>Jinja, Flask, Python, sqlite, VS Code, Gunicorn, Docker, Caddy, HTMX, sox, pyexcel_odsr, LibreOffice Calc, Audacity</li>
+                <li>Osar'a Johve - Bismarck ♥</li>
+            </ul>
+            <p>Shout-outs to No Stress and Rainbow Connection</p>
+        </div>
+    </div>
+
+</div>
+
+{% endblock %}

templates/footer.jinja

@@ -1,6 +1,9 @@
 <footer>
 
     <div class="footer-content">
+        <span>
+            <a href="{{ url_for('creditpage') }}">Credits</a>
+        </span>
         <span>
             <a href="{{ url_for('suggestpage') }}"> Suggest a new connection </a>
         </span>

templates/home.jinja

@@ -1,4 +1,4 @@
-{% extends 'base.html' %}
+{% extends 'base.jinja' %}
 {% block title %}Home{% endblock %}
 {% block nav %}{% endblock %}
 {% block main %}{% endblock %}
@@ -9,7 +9,6 @@
     <hgroup class="home-title">
         <h1>The Eorzea Songbook</h1>
         <h3>An unofficial library of motifs in the Final Fantasy XIV soundtrack.</h3>
-        <!-- <p>Last updated: 26/06/2023</p> -->
     </hgroup>
 
     <div class="home-nav">

templates/motif.jinja

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "base.jinja" %}
 
 {% block title %}{{ name }}{% endblock %}
 
@@ -13,13 +13,13 @@
 <div class="entrypage-connections">
     <ul>
     {% for song_id, motif_id, song, feature in clip_info if feature %}
-            {% include "motifpageclipget.html" %}
+            {% include "motifpageclipget.jinja" %}
     {% endfor %}
     </ul>
     <h2>Featured In:</h2>
     <ul>
     {% for song_id, motif_id, song, feature in clip_info if not feature %}
-            {% include "motifpageclipget.html" %}
+            {% include "motifpageclipget.jinja" %}
     {% endfor %}
     </ul>
 </div>

templates/motifindex.jinja

@@ -1,4 +1,4 @@
-{% extends 'base.html' %}
+{% extends 'base.jinja' %}
 {% block title %}Motif Index{% endblock %}
 
 {% block sheet %}<link rel="stylesheet" href="{{ url_for('static', filename='motifbuttonpressed.css') }}" />{% endblock %}

templates/nav.jinja

@@ -24,7 +24,7 @@
 
 <div id="top-search" class="search-bar search-empty">
     <!-- <span class="search-icon"></span> -->
-    <button id="search-button" class="search-clear hidden" onclick="clearSearch('search-input', 'search-results-header', event)">🗙</button>
+    <button id="search-button" class="search-clear hidden" onclick="clearSearch('search-input', 'search-results-header', event)">✖</button>
     <div class="search-items">
         <input
             id="search-input"

templates/sent.jinja

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "base.jinja" %}
 
 {% block title %}Suggestion sent{% endblock %}
 

templates/song.jinja

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "base.jinja" %}
 {% block title %}
 {% for name, _, _ in song_info %}{{ name }}{% endfor %}
 {% endblock %}
@@ -77,7 +77,7 @@
         <ul>
         {% for song_id, motif_id, motif in clip_info %}
             {% set type = 'motif' %}
-            {% include "clipget.html" %}
+            {% include "clipget.jinja" %}
         {% endfor %}
         </ul>
     </div>

templates/songindex.jinja

@@ -1,4 +1,4 @@
-{% extends 'base.html' %}
+{% extends 'base.jinja' %}
 
 
 

templates/suggest.jinja

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "base.jinja" %}
 
 {% block title %}Suggest a connection{% endblock %}
 
@@ -17,7 +17,7 @@
                         <div>Nothing selected yet.</div>
                     </div>
                     <div id="suggest-bar-{{ i }}" class="search-bar search-empty">
-                        <button type="button" id="suggest-button-{{ i }}" class="search-clear hidden" onclick="clearSearch('search-input-suggest-{{ i }}', 'search-results-{{ i }}')">🗙</button>
+                        <button type="button" id="suggest-button-{{ i }}" class="search-clear hidden" onclick="clearSearch('search-input-suggest-{{ i }}', 'search-results-{{ i }}')">✖</button>
                         <div class="search-items">
                             <input
                                 id="search-input-suggest-{{ i }}"