feat!: Refactor to static frozen-flask site

Rework of Flask to work support static site.

Author: matiusz

.gitignore

@@ -34,3 +34,4 @@ songbook-pdf.log
 songbook-py.log
 so.py
 .vscode/settings.json
+src/flask/build/

…torskie/Ameba (Disnejowski shit ;) ).sng data/Autorskie/Ameba.sngdata/Autorskie/Ameba (Disnejowski shit ;) ).sng renamed to data/Autorskie/Ameba.sng data/Autorskie/Ameba (Disnejowski shit ;) ).sng renamed to data/Autorskie/Ameba.sng

@@ -1,4 +1,4 @@
-#title Ameba (Disnejowski shit ;) )
+#title Ameba
 #author Jagoda Ciszewska
 #category Autorskie
 

data/Yapa 2023/Pańska 782.sng

@@ -1,4 +1,4 @@
-#title Pańska 7/8/2
+#title Pańska 7 8 2
 #author Słodki Całus od Buby
 #category Yapa 2023
 

frozen_flask.py

@@ -0,0 +1,19 @@
+from flask_frozen import Freezer
+from src.flask.flask import app
+from src.obj.Songbook import Songbook
+
+freezer = Freezer(app)
+#app.config['FREEZER_BASE_URL'] = "/Users/rjsp4n/Desktop/vscode/songbook/songbook/src/flask/build/"
+app.config['FREEZER_RELATIVE_URLS'] = True
+app.config['FREEZER_DEFAULT_MIMETYPE'] = 'text/html; charset=utf-8'
+
+@freezer.register_generator
+def start():
+    sb = Songbook()
+    for cat in sb.sb:
+        for sng in sb.sb[cat]:
+            for i in range(0, 12):
+                yield {'category': cat, 'song': sng.title, 'chordShift': i}
+
+if __name__ == '__main__':
+    freezer.freeze()

requirements.txt

@@ -2,6 +2,7 @@
 Flask>=2.0.2
 WTForms>=3.0.0
 Flask-WTF>=1.0.0
+Frozen-Flask
 requests>=2.27.1
 pre-commit
 markdown2

src/flask/flask.py

@@ -26,16 +26,15 @@ def __init__(self):
 
 sb = Songbook()
 
+
+
 @app.route("/")
-@app.route("/<category>/<song>")
-def start(category = None, song = None):
+@app.route("/<category>/<song>/<chordShift>.html")
+def start(category = None, song = None, chordShift = 0):
     filter = FilterForm()
     filter.validate_on_submit()
     filterString = request.args.get("filter")
-    try:
-        chordShift = int(request.args.get("chordShift", 0, int))
-    except ValueError:
-        chordShift = 0
+    chordShift = int(chordShift)
     if filterString:
         songs = sb.filteredSongs(filterString)
     else:

src/flask/templates/page.html

@@ -8,18 +8,49 @@
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
         integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
         crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
         integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
         crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
         integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
         crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
         integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
     <link rel="stylesheet" href={{url_for('static', filename='style.css' )}}>
-    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://use.fontawesome.com/releases/v4.7.0/css/font-awesome-css.min.css" rel="stylesheet">
     <title>Śpiewnik HK</title>
+    <script type="text/javascript">
+        (function($){
+            
+        }(jQuery || window.jQuery));
+        </script>
+    <script>
+        function filterFunction() {
+          var input, filter, ul, li, a, i, txtValue, matched;
+          input = document.getElementById('filterInput');
+          filter = input.value.toUpperCase();
+          {% for category in songList.keys() %}
+          ul = document.getElementById("{{category.replace(' ', '')}}");
+          li = ul.getElementsByTagName('li');
+          matched = false;
+          // Loop through all list items, and hide those who don't match the search query
+          for (i = 0; i < li.length; i++) {
+            a = li[i].getElementsByTagName("a")[0];
+            txtValue = a.textContent || a.innerText;
+            if (txtValue.toUpperCase().indexOf(filter) > -1) {
+              li[i].style.display = ""
+              matched = true;
+            } else {
+              li[i].style.display = "none";
+            }
+          }
+          if (matched) {
+              $("#{{category.replace(' ', '')}}").collapse('show')
+          }
+          {% endfor %}
+        }
+        </script>
 </head>
 
 <body>
@@ -31,24 +62,17 @@
                     <li data-toggle="collapse" data-target="#search">
                         <div class="input-group justify-content-center">
                             <div class="form-outline">
-                                <form method="GET" class="form-inline my-2 my-lg-0 w-auto"
-                                    action="/{{'{}/{}'.format(song.category, song.title) if song and song.category and song.title else ''}}">
-                                    {{ filter.filter(class_ = "form-control w-auto", placeholder="Search for songs...",
-                                    style="width: auto;") }}
-                                    <button type="submit" value="Search" class="btn btn-primary">
-                                        <i class="fa fa-search" type="submit" aria-hidden="true"></i>
-                                    </button>
-                                </form>
+                                <input type="text" id="filterInput" onkeyup="filterFunction()" placeholder="Search for songs..">
                             </div>
                         </div>
                     </li>
                     {% for category in songList.keys() %}
-                    <li data-toggle="collapse" data-target="#{{category}}" class="collapsed category">
+                    <li data-toggle="collapse" data-target="#{{category.replace(' ', '')}}" class="collapsed category">
                         <a href="#">{{category}}<span class="arrow"></span></a>
                     </li>
-                    <ul class="collapse song {{'show' if filterString or (hasattr(song, 'category') and category == song.category) else ''}}" id="{{category}}">
+                    <ul class="collapse song {{'show' if filterString or (hasattr(song, 'category') and category == song.category) else ''}}" id="{{category.replace(' ', '')}}">
                         {% for song in songList[category] %}
-                        <li><a href="/{{category}}/{{song.title.replace('/', '')}}">{{song.title}}</a></li>
+                        <li><a href="{{url_for('start', category=category, song=song.title.replace('/', ''), chordShift=0)}}">{{song.title}}</a></li>
                         {% endfor %}
                     </ul>
                     {% endfor %}
@@ -67,18 +91,16 @@
             <table width="100%">
                 <tr>
                     <td>
-                        <form method="GET" action="" align="center">
-                            <input type="hidden" name="chordShift" value="{{(chordShift-1) % 12}}">
+                        <form action="{{url_for('start', category=song.category, song=song.title.replace('/', ''), chordShift=(chordShift-1) % 12)}}">
                             <button type="submit" value="Down" class="btn btn-primary">
                                 <i class="fa fa-arrow-down" aria-hidden="true"></i>
                             </button>
                         </form>
                     </td>
                     <td>
-                        <form method="GET" action="" align="center">
-                            <input type="hidden" name="chordShift" value="{{(chordShift+1) % 12}}">
-                            <button type="submit" value="Up" class="btn btn-primary">
-                                <i class="fa fa-arrow-up" aria-hidden="true"></i>
+                        <form action="{{url_for('start', category=song.category, song=song.title.replace('/', ''), chordShift=(chordShift+1) % 12)}}">
+                            <button type="submit" value="Down" class="btn btn-primary">
+                                <i class="fa fa-arrow-down" aria-hidden="true"></i>
                             </button>
                         </form>
                     </td>

src/obj/Song.py

@@ -2,9 +2,14 @@
 import os
 import itertools
 import re
-
 from src.obj.Config import config
 
+try:
+    from flask import url_for
+except ImportError:
+    flaskSupported = False
+else:
+    flaskSupported = True
 
 class Song:
     def __init__(self, title: str, category: str):
@@ -41,7 +46,10 @@ def expandedSections(self):
 
     @property
     def linkedTitle(self) -> str:
-        return f"{'&nbsp;'*8}<a href=\"/{self.category}/{self.title}\">{self.title}</a>"
+        if flaskSupported:
+            return f"{'&nbsp;'*8}<a href={url_for('start', category=self.category, song=self.title.replace('/', ''), chordShift=0)}>{self.title}</a>"
+        else:
+            return f"""{'&nbsp;'*8}<a href={f'/{self.category}/{self.title.replace("/", "")}/0'}>{self.title}</a>"""
 
     @property
     def filterString(self) -> str:

src/obj/Songbook.py

@@ -10,7 +10,7 @@
 
 class Songbook:
     def __init__(self):
-        self.sb = {}
+        self.sb: dict[str, list[Song]] = {}
         for cat in getCategoriesFromDirs():
             self.sb[cat] = [Song.loadFromCatAndTitle(cat, songFilename[:-4]) for songFilename in getSongFilenamesFromCatDir(cat)]
             for song in self.sb[cat]: