Merge pull request #2 from 0x01FE/album-square

Page Revamps

README.md

@@ -2,8 +2,5 @@
 
 Code of the website hosted at https://www.0x01fe.net
 
-Could I gitignore the config files?
-Yes.
-Do I?
-no.
+One might ask why my pretty simple website is written in Python. The answer is so that I can just drop markdown files in a folder and have them automatically formatted and uploaded. This is done using the fact that markdown translates to HTML perfectly and that Flask / Jinja2 templates are really easy to use!
 

app/app.py

@@ -1,7 +1,10 @@
+import os
 import glob
 import configparser
 import random
+import datetime
 
+import requests
 import flask
 import waitress
 import markdown
@@ -14,11 +17,15 @@ CONFIG_PATH = "./config.ini"
 config = configparser.ConfigParser()
 config.read(CONFIG_PATH)
 
+WRITING_FOLDER = 'static/writing/'
 POSTS_FOLDER = config['POSTS']['POSTS_FOLDER']
 STATUS_FILE = config['STATUS']['STATUS_FILE']
 PORT = int(config['NETWORK']['PORT'])
 DEV = int(config['NETWORK']['DEV'])
 
+MUSIC_API_TOKEN = config['AUTH']['MUSIC_API_TOKEN']
+MUSIC_API_URL = config['NETWORK']['MUSIC_API_URL']
+
 def get_posts(category_filter : str | None = None) -> list[Post]:
     post_files = glob.glob(f'{POSTS_FOLDER}/*')
     try:
@@ -105,7 +112,25 @@ def music():
     # Get status
     status = get_status()
 
-    return flask.render_template('music.html', posts=post_bodies, status=status)
+    # Get top albums
+    r = requests.get(
+        MUSIC_API_URL +'/top/albums',
+        headers={
+            'token' : MUSIC_API_TOKEN,
+            'user' : '1',
+            'limit' : '9'
+        })
+
+    top_albums = r.json()['top']
+    for album_index in range(0, len(top_albums)):
+        album = top_albums[album_index]
+
+        time = int(album['listen_time'])
+        hours = round(time/1000/60/60, 1)
+
+        top_albums[album_index]['listen_time'] = hours
+
+    return flask.render_template('music.html', posts=post_bodies, status=status, top_albums=top_albums)
 
 # Motion Pictures Page
 @app.route('/motion-pictures/')
@@ -139,6 +164,31 @@ def programming():
 
     return flask.render_template('programming.html', posts=post_bodies, status=status)
 
+@app.route('/writing/')
+def writing():
+
+    works = []
+
+    # Get all works in writing folder
+    files = glob.glob(WRITING_FOLDER + '*')
+
+    for path in files:
+
+        date: str = datetime.datetime.fromtimestamp(os.path.getctime(path)).strftime("%B %d, %Y")
+        name: str = path.split('/')[-1]
+
+        works.append({
+            'date' : date,
+            'name' : name,
+            'path' : path
+        })
+
+    return flask.render_template('writing.html', works=works)
+
+
+
+
+
 # About Page
 @app.route('/about/')
 def about():
@@ -148,6 +198,38 @@ def about():
 
     return flask.render_template('about.html', status=status)
 
+# MISC
+
+@app.route('/albumsquare/<user_id>/<int:rows>')
+def album_square(user_id, rows : int):
+
+    limit = rows ** 2
+
+    res = (1080/(rows))-rows
+
+    # Get top albums
+    r = requests.get(
+        MUSIC_API_URL +'/top/albums',
+        headers={
+            'token' : MUSIC_API_TOKEN,
+            'user' : user_id,
+            'limit' : str(limit)
+        })
+
+    top_albums = r.json()['top']
+    for album_index in range(0, len(top_albums)):
+        album = top_albums[album_index]
+
+        time = int(album['listen_time'])
+        hours = round(time/1000/60/60, 1)
+
+        top_albums[album_index]['listen_time'] = hours
+
+
+    return flask.render_template('album_square.html', top_albums=top_albums, limit=rows, res=res)
+
+
+
 if __name__ == "__main__":
     if DEV:
         app.run(port=PORT)

app/data/comments.json

@@ -0,0 +1,8 @@
+{
+    "2" : [
+        {
+            "username" : "0x01FE",
+            "content" : "Hello, this is an example comment!"
+        }
+    ]
+}

app/data/users.json

@@ -0,0 +1,5 @@
+{
+    "users" : {
+        "0x01FE" : "cGFzc3dvcmQ="
+    }
+}

app/static/albumsquare.css

@@ -0,0 +1,19 @@
+.albums {
+    height: 100%;
+
+    line-height: 0;
+    font-size: 0;
+}
+
+.albums img {
+    padding: 0 0;
+    margin: 0 0;
+    border: 0 0;
+}
+
+
+.body {
+    height: 100%;
+    padding: 0 0;
+    margin: 0 0;
+}

app/static/programming/vscode_extensions.txt

@@ -0,0 +1,12 @@
+EOF Mark,
+Glassit-VSC,
+JSON formatter,
+Pylance,
+Remote - SSH,
+Synthwave '84 Blues,
+Trailing Spaces,
+Helm Intellisense,
+background,
+Helium Icon Theme,
+SQLite Viewer,
+Docker

app/static/style.css

@@ -107,6 +107,39 @@ a:hover {
     text-decoration: none;
 }
 
+.rightbar {
+    height: fit-content;
+    align-self: flex-start;
+    top: 10px;
+
+    padding: 20pt;
+
+    margin: 5em 0;
+    margin-right: 2em;
+
+    border-style: var(--borders-style);
+    border-radius: var(--border-radius);
+    border-color: #1E2022;
+    background-color: var(--main-background);
+
+    opacity: 0.9;
+
+    /* box-shadow: -10px 10px var(--accent); */
+
+    /* Text Settings */
+    font-weight: bold;
+    line-height: 30pt;
+}
+
+.rightbar a {
+    text-decoration: none;
+}
+
+.rightbar h2 {
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    line-height: normal;
+}
+
 .dlog {
     flex: 3;
 
@@ -172,3 +205,49 @@ a:hover {
     line-height: 2.25;
     text-indent: 3em;
 }
+
+/* MUSIC */
+.albums {
+    height: fit-content;
+    align-self: flex-start;
+    top: 10px;
+
+    padding: 20pt;
+
+    margin: 5em 0;
+    margin-right: 2em;
+
+    border-style: var(--borders-style);
+    border-radius: var(--border-radius);
+    border-color: #1E2022;
+    background-color: var(--main-background);
+
+    /* Text Settings
+    font-weight: bold;
+    line-height: 30pt; */
+}
+
+
+.real-albums img {
+    height: 100px;
+    width: 100px;
+    padding: 0 0;
+    margin: 0 0;
+    border: 0 0;
+}
+
+.real-albums {
+    line-height: 0;
+    font-size: 0;
+    padding: 0 0;
+    margin: 0 0;
+}
+
+.albums h1 {
+    font-size: 2em;
+    text-align: center;
+    padding: 0 0;
+    margin: 15pt 0;
+    margin-top: -5pt;
+}
+

app/static/writing.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <body>
-        <a href="/">home</a>
-        <br>
-        <br>
-        <a href="/writing/scream.txt">Scream</a> March 27th, 2024
-    </body>
-</html>

app/templates/about.html

@@ -18,6 +18,7 @@
                 <a href="../music/">Music</a><br>
                 <a href="../motion-pictures/">Motion Picture</a><br>
                 <a href="../programming/">Programming</a><br>
+                <a href="/writing/">Writing</a><br>
                 <a href="."><u>About</u></a>
             </div>
 

app/templates/album_square.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+    <header>
+        <link rel="shortcut icon" href="index_favicon.ico">
+        <link rel="stylesheet" href="{{ url_for('static', filename='albumsquare.css') }}">
+        <title>Album Square</title>
+    </header>
+    <body>
+        <div class="albums">
+            {% for album in top_albums %}
+                    <a title="{{ album.album_name}} by {{ album.artist_name }} - {{ album.listen_time }} Hours">
+                        <img src="{{ album.album_cover }}" style="width: {{ res }}px; height: {{ res }}px;">
+                    </a>
+                    {% if loop.index % limit == 0 %}
+                        <br>
+                    {% endif %}
+                {% endfor %}
+        </div>
+    </body>
+</html>

app/templates/games.html

@@ -18,6 +18,7 @@
                 <a href="../music/">Music</a><br>
                 <a href="../motion-pictures/">Motion Picture</a><br>
                 <a href="../programming/">Programming</a><br>
+                <a href="/writing/">Writing</a><br>
                 <a href="../about/">About</a>
             </div>
 

app/templates/index.html

@@ -18,7 +18,7 @@
                 <a href="/music/">Music</a><br>
                 <a href="/motion-pictures/">Motion Picture</a><br>
                 <a href="/programming/">Programming</a><br>
-                <a href="/writing.html">Writing</a><br>
+                <a href="/writing/">Writing</a><br>
                 <a href="/about/">About</a>
             </div>
 

app/templates/motion-pictures.html

@@ -18,6 +18,7 @@
                 <a href="../music/">Music</a><br>
                 <a href="."><u>Motion Picture</u></a><br>
                 <a href="../programming/">Programming</a><br>
+                <a href="/writing/">Writing</a><br>
                 <a href="../about/">About</a>
             </div>
 

app/templates/music.html

@@ -18,6 +18,7 @@
                 <a href="."><u>Music</u></a><br>
                 <a href="../motion-pictures/">Motion Picture</a><br>
                 <a href="../programming/">Programming</a><br>
+                <a href="/writing/">Writing</a><br>
                 <a href="../about/">About</a>
             </div>
 
@@ -28,6 +29,20 @@
                     <div class="post">{{ post|safe }}</div>
                 {% endfor %}
             </div>
+
+            <div class="albums">
+                <h1>Top Albums</h1>
+                <div class="real-albums">
+                    {% for album in top_albums %}
+                        <a title="{{ album.album_name}} by {{ album.artist_name }} - {{ album.listen_time }} Hours">
+                            <img src="{{ album.album_cover }}">
+                        </a>
+                        {% if loop.index % 3 == 0 %}
+                            <br>
+                        {% endif %}
+                    {% endfor %}
+             </div>
+            </div>
         </div>
     </body>
 </html>

app/templates/programming.html

@@ -18,6 +18,7 @@
                 <a href="../music/">Music</a><br>
                 <a href="../motion-pictures/">Motion Picture</a><br>
                 <a href="."><u>Programming</u></a><br>
+                <a href="/writing/">Writing</a><br>
                 <a href="../about/">About</a>
             </div>
 
@@ -28,6 +29,12 @@
                     <div class="post">{{ post|safe }}</div>
                 {% endfor %}
             </div>
+
+            <!-- Other Sidear -->
+            <div class="rightbar">
+                <h2>Other</h2>
+                <a href="">Technologies I Use</a>
+            </div>
         </div>
     </body>
 </html>

app/templates/writing.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+    <body>
+        <a href="/">home</a>
+        <br>
+        <br>
+        {% for work in works %}
+        <a href="/{{ work.path }}">{{ work.name }}</a> {{ work.date }}
+        {% endfor %}
+    </body>
+</html>

requirements.txt

@@ -2,3 +2,4 @@ Markdown==3.5.2
 Flask==2.2.3
 waitress==2.1.2
 Werkzeug==2.2.3
+requests==2.31.0