fix: Update curl tools page to use new demo data

Reviewed-on: #2

.gitea/workflows/check.yml

@@ -0,0 +1,18 @@
+name: Check Code Quality
+run-name: Ruff CI
+on:
+  push:
+
+jobs:
+  RuffCheck:
+    runs-on: [ubuntu-latest, amd]
+    steps:
+      - uses: actions/checkout@v2
+      - name: Set up Python
+        run: |
+          apt update
+          apt install -y python3 python3-pip
+      - name: Install Ruff
+        run: pip install ruff
+      - name: Run Ruff
+        run: ruff check .

Dockerfile

@@ -1,4 +1,4 @@
-FROM --platform=$BUILDPLATFORM python:3.10-alpine AS builder
+FROM --platform=$BUILDPLATFORM python:3.13-alpine AS builder
 
 RUN apk add curl
 WORKDIR /app

blueprints/acme.py

@@ -3,10 +3,10 @@ import os
 from cloudflare import Cloudflare
 from tools import json_response
 
-acme_bp = Blueprint('acme', __name__)
+app = Blueprint('acme', __name__)
 
 
-@acme_bp.route("/hnsdoh-acme", methods=["POST"])
+@app.route("/hnsdoh-acme", methods=["POST"])
 def post():
     # Get the TXT record from the request
     if not request.is_json or not request.json:

blueprints/api.py

@@ -5,8 +5,9 @@ import requests
 import re
 from mail import sendEmail
 from tools import getClientIP, getGitCommit, json_response, parse_date, get_tools_data
-from blueprints.sol import sol_bp
+from blueprints import sol
 from dateutil import parser as date_parser
+from blueprints.spotify import get_spotify_track
 
 # Constants
 HTTP_OK = 200
@@ -16,9 +17,9 @@ HTTP_NOT_FOUND = 404
 HTTP_UNSUPPORTED_MEDIA = 415
 HTTP_SERVER_ERROR = 500
 
-api_bp = Blueprint('api', __name__)
+app = Blueprint('api', __name__, url_prefix='/api/v1')
 # Register solana blueprint
-api_bp.register_blueprint(sol_bp)
+app.register_blueprint(sol.app)
 
 # Load configuration
 NC_CONFIG = requests.get(
@@ -29,8 +30,8 @@ if 'time-zone' not in NC_CONFIG:
     NC_CONFIG['time-zone'] = 10
 
 
-@api_bp.route("/")
-@api_bp.route("/help")
+@app.route("/", strict_slashes=False)
+@app.route("/help")
 def help():
     """Provide API documentation and help."""
     return jsonify({
@@ -39,12 +40,15 @@ def help():
             "/time": "Get the current time",
             "/timezone": "Get the current timezone",
             "/message": "Get the message from the config",
-            "/ip": "Get your IP address",
             "/project": "Get the current project from git",
             "/version": "Get the current version of the website",
             "/page_date?url=URL&verbose=BOOL": "Get the last modified date of a webpage (verbose is optional, default false)",
+            "/tools": "Get a list of tools used by Nathan Woodburn",
+            "/playing": "Get the currently playing Spotify track",
             "/status": "Just check if the site is up",
             "/ping": "Just check if the site is up",
+            "/ip": "Get your IP address",
+            "/headers": "Get your request headers",
             "/help": "Get this help message"
         },
         "base_url": "/api/v1",
@@ -53,18 +57,18 @@ def help():
         "status": HTTP_OK
     })
 
-@api_bp.route("/status")
-@api_bp.route("/ping")
+@app.route("/status")
+@app.route("/ping")
 def status():
     return json_response(request, "200 OK", HTTP_OK)
 
-@api_bp.route("/version")
+@app.route("/version")
 def version():
     """Get the current version of the website."""
     return jsonify({"version": getGitCommit()})
 
 
-@api_bp.route("/time")
+@app.route("/time")
 def time():
     """Get the current time in the configured timezone."""
     timezone_offset = datetime.timedelta(hours=NC_CONFIG["time-zone"])
@@ -80,7 +84,7 @@ def time():
     })
 
 
-@api_bp.route("/timezone")
+@app.route("/timezone")
 def timezone():
     """Get the current timezone setting."""
     return jsonify({
@@ -90,7 +94,7 @@ def timezone():
     })
 
 
-@api_bp.route("/message")
+@app.route("/message")
 def message():
     """Get the message from the configuration."""
     return jsonify({
@@ -100,7 +104,7 @@ def message():
     })
 
 
-@api_bp.route("/ip")
+@app.route("/ip")
 def ip():
     """Get the client's IP address."""
     return jsonify({
@@ -109,7 +113,7 @@ def ip():
     })
 
 
-@api_bp.route("/email", methods=["POST"])
+@app.route("/email", methods=["POST"])
 def email_post():
     """Send an email via the API (requires API key)."""
     # Verify json
@@ -131,7 +135,7 @@ def email_post():
     return sendEmail(data)
 
 
-@api_bp.route("/project")
+@app.route("/project")
 def project():
     """Get information about the current git project."""
     gitinfo = {
@@ -164,7 +168,7 @@ def project():
         "status": HTTP_OK
     })
 
-@api_bp.route("/tools")
+@app.route("/tools")
 def tools():
     """Get a list of tools used by Nathan Woodburn."""
     try:
@@ -173,14 +177,41 @@ def tools():
         print(f"Error getting tools data: {e}")
         return json_response(request, "500 Internal Server Error", HTTP_SERVER_ERROR)
         
-    # Remove demo and move demo_url to demo
-    for tool in tools:
-        if "demo_url" in tool:
-            tool["demo"] = tool.pop("demo_url")
-        
     return json_response(request, {"tools": tools}, HTTP_OK)
 
-@api_bp.route("/page_date")
+@app.route("/playing")
+def playing():
+    """Get the currently playing Spotify track."""
+    track_info = get_spotify_track()
+    if "error" in track_info:
+        return json_response(request, track_info, HTTP_OK)
+    return json_response(request, {"spotify": track_info}, HTTP_OK)
+
+
+@app.route("/headers")
+def headers():
+    """Get the request headers."""
+    headers = dict(request.headers)
+
+    # For each header, convert list-like headers to lists
+    toremove = []
+    for key, _ in headers.items():
+        # If header is like X- something
+        if key.startswith("X-"):
+            # Remove from headers
+            toremove.append(key)
+        
+
+    for key in toremove:
+        headers.pop(key)
+
+    return jsonify({
+        "headers": headers,
+        "ip": getClientIP(request),
+        "status": HTTP_OK
+    })
+
+@app.route("/page_date")
 def page_date():
     url = request.args.get("url")
     if not url:

blueprints/blog.py

@@ -3,9 +3,9 @@ from flask import Blueprint, render_template, request, jsonify
 import markdown
 from bs4 import BeautifulSoup
 import re
-from tools import isCurl, getClientIP, getHandshakeScript
+from tools import isCLI, getClientIP, getHandshakeScript
 
-blog_bp = Blueprint('blog', __name__)
+app = Blueprint('blog', __name__, url_prefix='/blog')
 
 
 def list_page_files():
@@ -108,9 +108,9 @@ def render_home(handshake_scripts: str | None = None):
     )
 
 
-@blog_bp.route("/")
+@app.route("/", strict_slashes=False)
 def index():
-    if not isCurl(request):
+    if not isCLI(request):
         return render_home(handshake_scripts=getHandshakeScript(request.host))
 
     # Get a list of pages
@@ -129,9 +129,9 @@ def index():
     }), 200
 
 
-@blog_bp.route("/<path:path>")
+@app.route("/<path:path>")
 def path(path):
-    if not isCurl(request):
+    if not isCLI(request):
         return render_page(path, handshake_scripts=getHandshakeScript(request.host))
 
     # Convert md to html
@@ -152,7 +152,7 @@ def path(path):
     }), 200
 
 
-@blog_bp.route("/<path:path>.md")
+@app.route("/<path:path>.md")
 def path_md(path):
     if not os.path.exists(f"data/blog/{path}.md"):
         return render_template("404.html"), 404

blueprints/now.py

@@ -1,10 +1,13 @@
 from flask import Blueprint, render_template, make_response, request, jsonify
 import datetime
 import os
-from tools import getHandshakeScript
+from tools import getHandshakeScript, error_response, isCLI
+from curl import get_header, MAX_WIDTH
+from bs4 import BeautifulSoup
+import re
 
 # Create blueprint
-now_bp = Blueprint('now', __name__)
+app = Blueprint('now', __name__, url_prefix='/now')
 
 
 def list_page_files():
@@ -44,27 +47,115 @@ def render(date, handshake_scripts=None):
     date = date.removesuffix(".html")
 
     if date not in list_dates():
-        return render_template("404.html"), 404
+        return error_response(request)
 
     date_formatted = datetime.datetime.strptime(date, "%y_%m_%d")
     date_formatted = date_formatted.strftime("%A, %B %d, %Y")
     return render_template(f"now/{date}.html", DATE=date_formatted, handshake_scripts=handshake_scripts)
 
+def render_curl(date=None):
+    # If the date is not available, render the latest page
+    if date is None:
+        date = get_latest_date()
 
-@now_bp.route("/")
+    # Remove .html if present
+    date = date.removesuffix(".html")
+
+    if date not in list_dates():
+        return error_response(request)
+
+    # Format the date nicely
+    date_formatted = datetime.datetime.strptime(date, "%y_%m_%d")
+    date_formatted = date_formatted.strftime("%A, %B %d, %Y")
+    
+    # Load HTML
+    with open(f"templates/now/{date}.html", "r", encoding="utf-8") as f:
+        raw_html = f.read().replace("{{ date }}", date_formatted)
+    soup = BeautifulSoup(raw_html, 'html.parser')
+    
+    posts = []
+
+    # Find divs matching your pattern
+    divs = soup.find_all("div", style=re.compile(r"max-width:\s*700px", re.IGNORECASE))
+    if not divs:
+        return error_response(request, message="No content found for CLI rendering.")
+
+    for div in divs:
+        # header could be h1/h2/h3 inside the div
+        header_tag = div.find(["h1", "h2", "h3"]) # type: ignore
+        # content is usually one or more <p> tags inside the div
+        p_tags = div.find_all("p") # type: ignore
+
+        if header_tag and p_tags:
+            header_text = header_tag.get_text(strip=True) # type: ignore
+            content_lines = []
+
+            for p in p_tags:
+                # Extract text
+                text = p.get_text(strip=False)
+
+                # Extract any <a> links in the paragraph
+                links = [a.get("href") for a in p.find_all("a", href=True)] # type: ignore
+                # Set max width for text wrapping
+                
+                # Wrap text manually
+                wrapped_lines = []
+                for line in text.splitlines():
+                    while len(line) > MAX_WIDTH:
+                        # Find last space within max_width
+                        split_at = line.rfind(' ', 0, MAX_WIDTH)
+                        if split_at == -1:
+                            split_at = MAX_WIDTH
+                        wrapped_lines.append(line[:split_at].rstrip())
+                        line = line[split_at:].lstrip()
+                    wrapped_lines.append(line)
+                text = "\n".join(wrapped_lines)
+
+                if links:
+                    text += "\nLinks: " + ", ".join(links) # type: ignore
+
+                content_lines.append(text)
+
+            content_text = "\n\n".join(content_lines)
+            posts.append({"header": header_text, "content": content_text})
+
+    # Build final response
+    response = ""
+    for post in posts:
+        response += f"{post['header']}\n\n{post['content']}\n\n"
+
+    return render_template("now.ascii", date=date_formatted, content=response, header=get_header())
+
+
+
+@app.route("/", strict_slashes=False)
 def index():
+    if isCLI(request):
+        return render_curl()
     return render_latest(handshake_scripts=getHandshakeScript(request.host))
 
 
-@now_bp.route("/<path:path>")
+@app.route("/<path:path>")
 def path(path):
+    if isCLI(request):
+        return render_curl(path)
+
     return render(path, handshake_scripts=getHandshakeScript(request.host))
 
 
-@now_bp.route("/old")
-@now_bp.route("/old/")
+@app.route("/old", strict_slashes=False)
 def old():
     now_dates = list_dates()[1:]
+    if isCLI(request):
+        response = ""
+        for date in now_dates:
+            link = date
+            date_fmt = datetime.datetime.strptime(date, "%y_%m_%d")
+            date_fmt = date_fmt.strftime("%A, %B %d, %Y")
+            response += f"{date_fmt} - /now/{link}\n"
+        return render_template("now.ascii", date="Old Now Pages", content=response, header=get_header())
+
+
     html = '<ul class="list-group">'
     html += f'<a style="text-decoration:none;" href="/now"><li class="list-group-item" style="background-color:#000000;color:#ffffff;">{get_latest_date(True)}</li></a>'
 
@@ -80,9 +171,9 @@ def old():
     )
 
 
-@now_bp.route("/now.rss")
-@now_bp.route("/now.xml")
-@now_bp.route("/rss.xml")
+@app.route("/now.rss")
+@app.route("/now.xml")
+@app.route("/rss.xml")
 def rss():
     host = "https://" + request.host
     if ":" in request.host:
@@ -99,7 +190,7 @@ def rss():
     return make_response(rss, 200, {"Content-Type": "application/rss+xml"})
 
 
-@now_bp.route("/now.json")
+@app.route("/now.json")
 def json():
     now_pages = list_page_files()
     host = "https://" + request.host

blueprints/podcast.py

@@ -2,9 +2,9 @@ from flask import Blueprint, make_response, request
 from tools import error_response
 import requests
 
-podcast_bp = Blueprint('podcast', __name__)
+app = Blueprint('podcast', __name__)
 
-@podcast_bp.route("/ID1")
+@app.route("/ID1")
 def index():
     # Proxy to ID1 url
     req = requests.get("https://podcasts.c.woodburn.au/ID1")
@@ -16,7 +16,7 @@ def index():
     )
 
 
-@podcast_bp.route("/ID1/")
+@app.route("/ID1/")
 def contents():
     # Proxy to ID1 url
     req = requests.get("https://podcasts.c.woodburn.au/ID1/")
@@ -27,7 +27,7 @@ def contents():
     )
 
 
-@podcast_bp.route("/ID1/<path:path>")
+@app.route("/ID1/<path:path>")
 def path(path):
     # Proxy to ID1 url
     req = requests.get("https://podcasts.c.woodburn.au/ID1/" + path)
@@ -38,7 +38,7 @@ def path(path):
     )
 
 
-@podcast_bp.route("/ID1.xml")
+@app.route("/ID1.xml")
 def xml():
     # Proxy to ID1 url
     req = requests.get("https://podcasts.c.woodburn.au/ID1.xml")
@@ -49,7 +49,7 @@ def xml():
     )
 
 
-@podcast_bp.route("/podsync.opml")
+@app.route("/podsync.opml")
 def podsync():
     req = requests.get("https://podcasts.c.woodburn.au/podsync.opml")
     if req.status_code != 200:

blueprints/sol.py

@@ -9,7 +9,7 @@ import binascii
 import base64
 import os
 
-sol_bp = Blueprint('sol', __name__)
+app = Blueprint('sol', __name__)
 
 SOLANA_HEADERS = {
     "Content-Type": "application/json",
@@ -55,7 +55,7 @@ def get_solana_address() -> str:
         raise ValueError("SOLANA_ADDRESS is not set. Please ensure the .well-known/wallets/SOL file exists and contains a valid address.")
     return str(SOLANA_ADDRESS) 
 
-@sol_bp.route("/donate", methods=["GET", "OPTIONS"])
+@app.route("/donate", methods=["GET", "OPTIONS"])
 def sol_donate():
     data = {
         "icon": "https://nathan.woodburn.au/assets/img/profile.png",
@@ -90,7 +90,7 @@ def sol_donate():
     return response
 
 
-@sol_bp.route("/donate/<amount>")
+@app.route("/donate/<amount>")
 def sol_donate_amount(amount):
     data = {
         "icon": "https://nathan.woodburn.au/assets/img/profile.png",
@@ -101,7 +101,7 @@ def sol_donate_amount(amount):
     return jsonify(data), 200, SOLANA_HEADERS
 
 
-@sol_bp.route("/donate/<amount>", methods=["POST"])
+@app.route("/donate/<amount>", methods=["POST"])
 def sol_donate_post(amount):
 
     if not request.json:

blueprints/spotify.py

@@ -0,0 +1,126 @@
+from flask import redirect, request, Blueprint, url_for
+from tools import json_response
+import os
+import requests
+import time
+import base64
+
+app = Blueprint('spotify', __name__, url_prefix='/spotify')
+
+CLIENT_ID = os.getenv("SPOTIFY_CLIENT_ID")
+CLIENT_SECRET = os.getenv("SPOTIFY_CLIENT_SECRET")
+ALLOWED_SPOTIFY_USER_ID = os.getenv("SPOTIFY_USER_ID")
+
+SPOTIFY_AUTH_URL = "https://accounts.spotify.com/authorize"
+SPOTIFY_TOKEN_URL = "https://accounts.spotify.com/api/token"
+SPOTIFY_CURRENTLY_PLAYING_URL = "https://api.spotify.com/v1/me/player/currently-playing"
+
+SCOPE = "user-read-currently-playing user-read-playback-state"
+
+ACCESS_TOKEN = None
+REFRESH_TOKEN = os.getenv("SPOTIFY_REFRESH_TOKEN")
+TOKEN_EXPIRES = 0
+
+def refresh_access_token():
+    """Refresh Spotify access token when expired."""
+    global ACCESS_TOKEN, TOKEN_EXPIRES
+
+    # If still valid, reuse it
+    if ACCESS_TOKEN and time.time() < TOKEN_EXPIRES - 60:
+        return ACCESS_TOKEN
+
+    auth_str = f"{CLIENT_ID}:{CLIENT_SECRET}"
+    b64_auth = base64.b64encode(auth_str.encode()).decode()
+
+    data = {
+        "grant_type": "refresh_token",
+        "refresh_token": REFRESH_TOKEN,
+    }
+    headers = {"Authorization": f"Basic {b64_auth}"}
+
+    response = requests.post(SPOTIFY_TOKEN_URL, data=data, headers=headers)
+    if response.status_code != 200:
+        print("Failed to refresh token:", response.text)
+        return None
+
+    token_info = response.json()
+    ACCESS_TOKEN = token_info["access_token"]
+    TOKEN_EXPIRES = time.time() + token_info.get("expires_in", 3600)
+    return ACCESS_TOKEN
+
+@app.route("/login")
+def login():
+    auth_query = (
+        f"{SPOTIFY_AUTH_URL}?response_type=code&client_id={CLIENT_ID}"
+        f"&redirect_uri={url_for('spotify.callback', _external=True)}&scope={SCOPE}"
+    )
+    return redirect(auth_query)
+
+@app.route("/callback")
+def callback():
+    code = request.args.get("code")
+    if not code:
+        return "Authorization failed.", 400
+
+    data = {
+        "grant_type": "authorization_code",
+        "code": code,
+        "redirect_uri": url_for("spotify.callback", _external=True),
+        "client_id": CLIENT_ID,
+        "client_secret": CLIENT_SECRET,
+    }
+    response = requests.post(SPOTIFY_TOKEN_URL, data=data)
+    token_info = response.json()
+    if "access_token" not in token_info:
+        return json_response(request, {"error": "Failed to obtain token", "details": token_info}, 400)
+
+    access_token = token_info["access_token"]
+    me = requests.get(
+        "https://api.spotify.com/v1/me",
+        headers={"Authorization": f"Bearer {access_token}"}
+    ).json()
+
+    if me.get("id") != ALLOWED_SPOTIFY_USER_ID:
+        return json_response(request, {"error": "Unauthorized user"}, 403)
+
+    global REFRESH_TOKEN
+    REFRESH_TOKEN = token_info.get("refresh_token")
+    print("Spotify authorization successful.")
+    print("Refresh Token:", REFRESH_TOKEN)
+    return redirect(url_for("spotify.currently_playing"))
+
+@app.route("/", strict_slashes=False)
+@app.route("/playing")
+def currently_playing():
+    """Public endpoint showing your current track."""
+    track = get_spotify_track()
+    return json_response(request, {"spotify":track}, 200)
+
+def get_spotify_track():
+    """Internal function to get current playing track without HTTP context."""
+    token = refresh_access_token()
+    if not token:
+        return json_response(request, {"error": "Failed to refresh access token"}, 500)
+
+    headers = {"Authorization": f"Bearer {token}"}
+    response = requests.get(SPOTIFY_CURRENTLY_PLAYING_URL, headers=headers)
+
+    if response.status_code == 204:
+        return {"error": "Nothing is currently playing."}
+    elif response.status_code != 200:
+        return {"error": "Spotify API error", "status": response.status_code}
+
+    data = response.json()
+    if not data.get("item"):
+        return {"error": "Nothing is currently playing."}
+
+    track = {
+        "song_name": data["item"]["name"],
+        "artist": ", ".join([artist["name"] for artist in data["item"]["artists"]]),
+        "album_name": data["item"]["album"]["name"],
+        "album_art": data["item"]["album"]["images"][0]["url"],
+        "is_playing": data["is_playing"],
+        "progress_ms": data.get("progress_ms",0),
+        "duration_ms": data["item"].get("duration_ms",1)
+    }
+    return track

blueprints/template.py

@@ -1,9 +1,9 @@
 from flask import Blueprint, request
 from tools import json_response
 
-template_bp = Blueprint('template', __name__)
+app = Blueprint('template', __name__)
 
 
-@template_bp.route("/")
+@app.route("/", strict_slashes=False)
 def index():
     return json_response(request, "Success", 200)

blueprints/wellknown.py

@@ -1,15 +1,16 @@
-from flask import Blueprint, render_template, make_response, request, jsonify, send_from_directory, redirect
+from flask import Blueprint, make_response, request, jsonify, send_from_directory, redirect
+from tools import error_response
 import os
 
-wk_bp = Blueprint('well-known', __name__)
+app = Blueprint('well-known', __name__, url_prefix='/.well-known')
 
 
-@wk_bp.route("/<path:path>")
+@app.route("/<path:path>")
 def index(path):
     return send_from_directory(".well-known", path)
 
 
-@wk_bp.route("/wallets/<path:path>")
+@app.route("/wallets/<path:path>")
 def wallets(path):
     if path[0] == "." and 'proof' not in path:
         return send_from_directory(
@@ -25,10 +26,10 @@ def wallets(path):
     if os.path.isfile(".well-known/wallets/" + path.upper()):
         return redirect("/.well-known/wallets/" + path.upper(), code=302)
 
-    return render_template("404.html"), 404
+    return error_response(request)
 
 
-@wk_bp.route("/nostr.json")
+@app.route("/nostr.json")
 def nostr():
     # Get name parameter
     name = request.args.get("name")
@@ -50,7 +51,7 @@ def nostr():
     )
 
 
-@wk_bp.route("/xrp-ledger.toml")
+@app.route("/xrp-ledger.toml")
 def xrp():
     # Create a response with the xrp-ledger.toml file
     with open(".well-known/xrp-ledger.toml") as file:

curl.py

@@ -1,10 +1,13 @@
 from flask import render_template
-from tools import error_response, getAddress, get_tools_data, getClientIP
+from tools import getAddress, get_tools_data, getClientIP
 import os
 from functools import lru_cache
 import requests
+from blueprints.spotify import get_spotify_track
 
 
+MAX_WIDTH = 80
+
 def clean_path(path:str):
     path = path.strip("/ ").lower()
     # Strip any .html extension
@@ -32,7 +35,9 @@ def get_current_project():
     repo_name = git["repo"]["name"]
     repo_name = repo_name.lower()
     repo_description = git["repo"]["description"]    
-    return f"{repo_name} - {repo_description}"
+    if not repo_description:
+        return f"{repo_name}"
+    return f"{repo_name} - {repo_description}"
 
 
 @lru_cache(maxsize=1)
@@ -81,7 +86,7 @@ def curl_response(request):
     # Handle special cases
     if path == "index":
         # Get current project
-        return render_template("index.ascii",repo=get_current_project(), ip=getClientIP(request)), 200, {'Content-Type': 'text/plain; charset=utf-8'}
+        return render_template("index.ascii",repo=get_current_project(), ip=getClientIP(request), spotify=get_spotify_track()), 200, {'Content-Type': 'text/plain; charset=utf-8'}
     if path == "projects":
         # Get projects
         return render_template("projects.ascii",header=get_header(),projects=get_projects()), 200, {'Content-Type': 'text/plain; charset=utf-8'}
@@ -112,7 +117,6 @@ def curl_response(request):
         tools = get_tools_data()
         return render_template("tools.ascii",header=get_header(),tools=tools), 200, {'Content-Type': 'text/plain; charset=utf-8'}
 
-
     if os.path.exists(f"templates/{path}.ascii"):
         return render_template(f"{path}.ascii",header=get_header()), 200, {'Content-Type': 'text/plain; charset=utf-8'}
     
@@ -120,4 +124,9 @@ def curl_response(request):
     if os.path.exists(f"templates/{path}.html"):
         return render_template(f"{path}.html")
     
-    return error_response(request)
+    # Return curl error page
+    error = {
+        "code": 404,
+        "message": "The requested resource was not found on this server."
+    }
+    return render_template("error.ascii",header=get_header(),error=error), 404, {'Content-Type': 'text/plain; charset=utf-8'}

data/tools.json

@@ -23,59 +23,60 @@
         "url": "https://code.visualstudio.com/",
         "description": "Source-code editor developed by Microsoft"
     },
+    {
+        "name": "Vesktop",
+        "type": "Desktop Applications",
+        "url": "https://vesktop.dev/",
+        "description": "Vesktop is a customizable and privacy friendly Discord desktop app!"
+    },
     {
         "name": "Zellij",
         "type": "Terminal Tools",
         "url": "https://zellij.dev/",
-        "description": "A terminal workspace and multiplexer"
+        "description": "A terminal workspace and multiplexer",
+        "demo": "https://asciinema.c.woodburn.au/a/10"
     },
     {
         "name": "Fx",
         "type": "Terminal Tools",
         "url": "https://fx.wtf/",
         "description": "A command-line JSON viewer and processor",
-        "demo": "<script src=\"https://asciinema.c.woodburn.au/a/4.js\" id=\"asciicast-4\" async=\"true\"></script>",
-        "demo_url": "https://asciinema.c.woodburn.au/a/4"
+        "demo": "https://asciinema.c.woodburn.au/a/4"
     },
     {
         "name": "Zoxide",
         "type": "Terminal Tools",
         "url": "https://github.com/ajeetdsouza/zoxide",
         "description": "cd but with fuzzy matching and other cool features",
-        "demo": "<script src=\"https://asciinema.c.woodburn.au/a/5.js\" id=\"asciicast-5\" async=\"true\"></script>",
-        "demo_url": "https://asciinema.c.woodburn.au/a/5"
+        "demo": "https://asciinema.c.woodburn.au/a/5"
     },
     {
         "name": "Atuin",
         "type": "Terminal Tools",
         "url": "https://atuin.sh/",
         "description": "A next-generation shell history manager",
-        "demo": "<script src=\"https://asciinema.c.woodburn.au/a/6.js\" id=\"asciicast-6\" async=\"true\"></script>",
-        "demo_url": "https://asciinema.c.woodburn.au/a/6"
+        "demo": "https://asciinema.c.woodburn.au/a/6"
     },
     {
         "name": "Tmate",
         "type": "Terminal Tools",
         "url": "https://tmate.io/",
         "description": "Instant terminal sharing",
-        "demo": "<script src=\"https://asciinema.c.woodburn.au/a/7.js\" id=\"asciicast-7\" async=\"true\"></script>",
-        "demo_url": "https://asciinema.c.woodburn.au/a/7"
+        "demo": "https://asciinema.c.woodburn.au/a/7"
     },
     {
         "name": "Eza",
         "type": "Terminal Tools",
         "url": "https://eza.rocks/",
         "description": "A modern replacement for 'ls'",
-        "demo": "<script src=\"https://asciinema.c.woodburn.au/a/8.js\" id=\"asciicast-8\" async=\"true\"></script>",
-        "demo_url": "https://asciinema.c.woodburn.au/a/8"
+        "demo": "https://asciinema.c.woodburn.au/a/8"
     },
     {
         "name": "Bat",
         "type": "Terminal Tools",
         "url": "https://github.com/sharkdp/bat",
         "description": "A cat clone with syntax highlighting and Git integration",
-        "demo": "<script src=\"https://asciinema.c.woodburn.au/a/9.js\" id=\"asciicast-9\" async=\"true\"></script>",
-        "demo_url": "https://asciinema.c.woodburn.au/a/9"
+        "demo": "https://asciinema.c.woodburn.au/a/9"
     },
     {
         "name": "Oh My Zsh",

server.py

@@ -19,25 +19,17 @@ from qrcode.constants import ERROR_CORRECT_L, ERROR_CORRECT_H
 from ansi2html import Ansi2HTMLConverter
 from PIL import Image
 # Import blueprints
-from blueprints.now import now_bp
-from blueprints.blog import blog_bp
-from blueprints.wellknown import wk_bp
-from blueprints.api import api_bp
-from blueprints.podcast import podcast_bp
-from blueprints.acme import acme_bp
-from tools import isCurl, isCrawler, getAddress, getFilePath, error_response, getClientIP, json_response, getHandshakeScript, get_tools_data
+from blueprints import now, blog, wellknown, api, podcast, acme, spotify
+from tools import isCLI, isCrawler, getAddress, getFilePath, error_response, getClientIP, json_response, getHandshakeScript, get_tools_data
 from curl import curl_response
 
 app = Flask(__name__)
 CORS(app)
 
 # Register blueprints
-app.register_blueprint(now_bp, url_prefix='/now')
-app.register_blueprint(blog_bp, url_prefix='/blog')
-app.register_blueprint(wk_bp, url_prefix='/.well-known')
-app.register_blueprint(api_bp, url_prefix='/api/v1')
-app.register_blueprint(podcast_bp)
-app.register_blueprint(acme_bp)
+for module in [now, blog, wellknown, api, podcast, acme, spotify]:
+    app.register_blueprint(module.app)
+
 
 dotenv.load_dotenv()
 
@@ -52,7 +44,11 @@ RATE_LIMIT_WINDOW = 3600  # 1 hour in seconds
 
 RESTRICTED_ROUTES = ["ascii"]
 REDIRECT_ROUTES = {
-    "contact": "/#contact"
+    "contact": "/#contact",
+    "old": "/now/old",
+    "/meet": "https://cloud.woodburn.au/apps/calendar/appointment/PamrmmspWJZr",
+    "/meeting": "https://cloud.woodburn.au/apps/calendar/appointment/PamrmmspWJZr",
+    "/appointment": "https://cloud.woodburn.au/apps/calendar/appointment/PamrmmspWJZr",
 }
 DOWNLOAD_ROUTES = {
     "pgp": "data/nathanwoodburn.asc"
@@ -185,21 +181,15 @@ def serviceWorker():
 
 
 # region Misc routes
-
-
-@app.route("/meet")
-@app.route("/meeting")
-@app.route("/appointment")
-def meetingLink():
-    return redirect(
-        "https://cloud.woodburn.au/apps/calendar/appointment/PamrmmspWJZr", code=302
-    )
-
-
 @app.route("/links")
 def links():
     return render_template("link.html")
 
+@app.route("/actions.json")
+def sol_actions():
+    return jsonify(
+        {"rules": [{"pathPattern": "/donate**", "apiPath": "/api/v1/donate**"}]}
+    )
 
 @app.route("/api/<path:function>")
 def api_legacy(function):
@@ -210,13 +200,6 @@ def api_legacy(function):
             return redirect(f"/api/v1/{function}", code=301)
     return error_response(request, message="404 Not Found", code=404)
 
-
-@app.route("/actions.json")
-def sol_actions():
-    return jsonify(
-        {"rules": [{"pathPattern": "/donate**", "apiPath": "/api/v1/donate**"}]}
-    )
-
 # endregion
 
 # region Main routes
@@ -242,7 +225,7 @@ def index():
     # Always load if load is in the query string
     if request.args.get("load"):
         loaded = False
-    if isCurl(request):
+    if isCLI(request):
         return curl_response(request)
 
     if not loaded and not isCrawler(request):
@@ -260,7 +243,7 @@ def index():
     try:
         git = requests.get(
             "https://git.woodburn.au/api/v1/users/nathanwoodburn/activities/feeds?only-performed-by=true&limit=1",
-            headers={"Authorization": os.getenv("GIT_AUTH") if os.getenv("GIT_AUTH") else os.getenv("git_token")},
+            headers={"Authorization": os.getenv("GIT_AUTH")},
         )
         git = git.json()
         git = git[0]
@@ -383,7 +366,7 @@ def index():
             sites=SITES,
             projects=PROJECTS,
             time=time,
-            message=NC_CONFIG.get("message",""),
+            message=NC_CONFIG.get("message", ""),
         ),
         200,
         {"Content-Type": "text/html"},
@@ -393,9 +376,11 @@ def index():
     return resp
 
 # region Donate
+
+
 @app.route("/donate")
 def donate():
-    if isCurl(request):
+    if isCLI(request):
         return curl_response(request)
 
     coinList = os.listdir(".well-known/wallets")
@@ -558,6 +543,7 @@ def qrcodee(data):
 
 # endregion
 
+
 @app.route("/supersecretpath")
 def supersecretpath():
     ascii_art = ""
@@ -683,9 +669,10 @@ def resume_pdf():
         return send_file("data/resume.pdf")
     return error_response(request, message="Resume not found")
 
+
 @app.route("/tools")
 def tools():
-    if isCurl(request):
+    if isCLI(request):
         return curl_response(request)
     return render_template("tools.html", tools=get_tools_data())
 
@@ -693,8 +680,6 @@ def tools():
 # region Error Catching
 
 # Catch all for GET requests
-
-
 @app.route("/<path:path>")
 def catch_all(path: str):
 
@@ -702,7 +687,7 @@ def catch_all(path: str):
         return error_response(request, message="Restricted route", code=403)
 
     # If curl request, return curl response
-    if isCurl(request):
+    if isCLI(request):
         return curl_response(request)
 
     if path in REDIRECT_ROUTES:

templates/assets/css/brand-reveal.min.css

@@ -1 +1 @@
-.name-container{display:inline-flex;align-items:center;overflow:hidden;position:absolute;width:fit-content;left:50%;transform:translateX(-50%)}.slider{position:relative;left:0;animation:1s linear 1s forwards slide}@keyframes slide{0%{left:0}100%{left:calc(100%)}}.brand{mask-image:linear-gradient(to right,black 50%,transparent 50%);-webkit-mask-image:linear-gradient(to right,black 50%,transparent 50%);mask-position:100% 0;-webkit-mask-position:100% 0;mask-size:200%;-webkit-mask-size:200%;animation:1s linear 1s forwards reveal}@keyframes reveal{0%{mask-position:100% 0;-webkit-mask-position:100% 0}100%{mask-position:0 0;-webkit-mask-position:0 0}}
+.name-container{display:inline-flex;align-items:center;overflow:hidden;position:absolute;width:fit-content;left:50%;transform:translateX(-50%)}.slider{position:relative;left:0;animation:1s linear 1s forwards slide}@keyframes slide{0%{left:0}100%{left:calc(100%)}}.brand{mask-image:linear-gradient(to right,black 50%,transparent 50%);-webkit-mask-image:linear-gradient(to right,black 50%,transparent 50%);mask-position:100% 0;-webkit-mask-position:100% 0;mask-size:200%;-webkit-mask-size:200%;animation:1s linear 1s forwards reveal}@keyframes reveal{0%{mask-position:100% 0;-webkit-mask-position:100% 0}100%{mask-position:0 0;-webkit-mask-position:0 0}}.now-playing{position:fixed;bottom:0;right:0;border-top-left-radius:10px;background:#10101039;padding:1em}

templates/assets/css/tools.min.css

@@ -0,0 +1 @@
+.card:hover{transform:translateY(-5px);box-shadow:0 .5rem 1rem rgba(0,0,0,.15);transition:transform .2s,box-shadow .2s}.btn:hover{transform:scale(1.05);transition:transform .2s}

templates/blog/blog.html

@@ -55,6 +55,7 @@ Find something interesting to read. Or maybe check one of my tutorials">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/blog/template.html

@@ -56,6 +56,7 @@ Find something interesting to read. Or maybe check one of my tutorials">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/donate.html

@@ -53,6 +53,7 @@
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/error.ascii

@@ -0,0 +1,9 @@
+{{header}}
+───────────────────────────────────────────────
+ ERROR: {{ error.code }} 
+────────────
+
+{{ error.message }}
+
+If you believe this is an error, please contact me via my socials listed at /contact
+

templates/header.ascii

@@ -9,4 +9,5 @@ Contact  [/contact]
 Projects [/projects]
 Tools    [/tools]
 Donate   [/donate]
+Now      [/now]
 

templates/hosting.html

@@ -51,6 +51,7 @@
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/index.ascii

@@ -9,7 +9,8 @@ Contact  [/contact]
 Projects [/projects]
 Tools    [/tools]
 Donate   [/donate]
-API      [/api/v1/]
+Now      [/now]
+API      [/api/v1]
 
 ───────────────────────────────────────────────
  ABOUT ME 
@@ -24,6 +25,7 @@ I'm also one of the founders of Handshake AU [https://hns.au],
 working to grow Handshake adoption across Australia.
 
 I'm currently working on: {{ repo | safe }}
+{% if not spotify.message %}Currently listening to: {{ spotify.song_name }} by {{ spotify.artist }}{% endif %}
 
 ───────────────────────────────────────────────
  SKILLS 

templates/index.html

@@ -49,7 +49,7 @@
     <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
     <link rel="stylesheet" href="/assets/css/swiper.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
-<script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
+<script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script><link rel="preload" as="image" href="/assets/img/bg/BlueMountains.jpg" type="image/jpeg">
 </head>
 
 <body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="77"><script>
@@ -69,6 +69,7 @@
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>
@@ -78,7 +79,7 @@
     <div class="text-end d-none d-xl-block d-xxl-block" id="downtime"><blockquote class="speech bubble"><em>G'day!</em><br>
 Some services are down.<br>
 Check them out here!</blockquote><img class="img-fluid" src="/assets/img/pfront.webp"></div>
-    <header class="masthead main" style="background: url(&quot;/assets/img/bg/BlueMountains.jpg&quot;) center / cover;position: relative;height: 400px;">
+    <header class="masthead main" style="position: relative;height: 400px;background: url(&quot;/assets/img/bg/BlueMountains.jpg&quot;) center / cover;">
         <div class="intro-body text parallax">
             <div class="name-container" style="padding-right: 1em;">
                 <div class="slider">
@@ -94,7 +95,7 @@ Check them out here!</blockquote><img class="img-fluid" src="/assets/img/pfront.
             <div class="row">
                 <div class="col-lg-8 mx-auto">
                     <h2>About ME</h2>
-                    <div class="profile-container" style="margin-bottom: 2em;"><img class="profile background" src="/assets/img/profile.jpg" style="border-radius: 50%;" alt="My Profile"><img class="profile foreground" src="/assets/img/pfront.webp" alt=""></div>
+                    <div class="profile-container" style="margin-bottom: 2em;"><img class="profile background" src="/assets/img/profile.webp" style="border-radius: 50%;" alt="My Profile"><img class="profile foreground" src="/assets/img/pfront.webp" alt=""></div>
                     <p style="margin-bottom: 5px;">Hi, I'm Nathan Woodburn and I live in Canberra, Australia.<br>I've been home schooled all the way to Yr 12.<br>I'm currently studying a&nbsp;Bachelor of Computer Science.<br>I create tons of random projects so this site is often behind.<br>I'm one of the founders of <a href="https://hns.au" target="_blank">Handshake AU</a>&nbsp;working to increase Handshake adoption in Australia.</p>
                     <p title="{{repo_description}}" style="margin-bottom: 0px;display: inline-block;">I'm currently working on</p>
                     <p data-bs-toggle="tooltip" data-bss-tooltip="" title="{{repo_description}}" style="display: inline-block;">{{repo | safe}}</p>
@@ -126,7 +127,7 @@ Check them out here!</blockquote><img class="img-fluid" src="/assets/img/pfront.
             <div class="swiper">
                 <div class="swiper-wrapper">{% for project in projects %}
             <div class="swiper-slide site" data-url="{{ project.html_url }}">
-                <img class="site-img" src="{{ project.avatar_url }}" />
+                <img class="site-img" src="{{ project.avatar_url }}" alt="{{ project.name }} Icon" />
                 <div class="site-body">
                     <div class="site-detail" style="width: 100%;">
                         <h2 class="site-name" style="text-align: left;">{{ project.name }}</h2>
@@ -291,7 +292,260 @@ Check them out here!</blockquote><img class="img-fluid" src="/assets/img/pfront.
     <div class="d-none d-print-none d-sm-none d-md-block d-lg-block d-xl-block d-xxl-block clock" style="padding: 1em;background: #10101039;border-top-right-radius: 10px;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20" fill="none" class="fs-2">
 
             <path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM11 6C11 5.44772 10.5523 5 10 5C9.44771 5 9 5.44772 9 6V10C9 10.2652 9.10536 10.5196 9.29289 10.7071L12.1213 13.5355C12.5118 13.9261 13.145 13.9261 13.5355 13.5355C13.9261 13.145 13.9261 12.5118 13.5355 12.1213L11 9.58579V6Z" fill="currentColor"></path>
-        </svg><span style="margin-left: 10px;font-family: 'Anonymous Pro', monospace;">{{time|safe}}</span></div>
+        </svg><span style="margin-left: 10px;font-family: 'Anonymous Pro', monospace;">{{time|safe}}</span></div><!-- Pop-out button for mobile -->
+<button id="spotify-toggle" style="
+    display: block;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 9999;
+    width: 50px;
+    height: 50px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    padding: 0;
+    transition: transform 0.5s ease;
+    transform: translateX(200%); /* start hidden off-screen *
+">
+<img src="/assets/img/external/spotify.png" alt="Spotify" style="
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+"></img>
+</button>
+
+<div id="spotify-widget" style="
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    display: flex;
+    align-items: center;
+    background: #121212;
+    color: white;
+    padding: 10px 15px;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+    font-family: sans-serif;
+    max-width: 300px;
+    z-index: 9999;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+    opacity: 0.9;
+    transform: translateX(120%); /* start hidden off-screen */
+">
+    <img id="spotify-album-art" src="" alt="Album Art" style="
+        width: 56px;
+        height: 56px;
+        border-radius: 6px;
+        margin-right: 12px;
+        flex-shrink: 0;
+    ">
+    <div style="flex: 1; overflow: hidden;">
+        <div id="spotify-song" style="
+            font-weight: bold;
+            font-size: 0.95rem;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        "></div>
+        <div id="spotify-artist" style="
+            font-size: 0.85rem;
+            color: #ccc;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        "></div>
+        <div id="spotify-album" style="
+            font-size: 0.75rem;
+            color: #888;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        "></div>
+        <!-- Progress Bar -->
+        <div style="
+            margin-top: 6px;
+            height: 4px;
+            background: #333;
+            border-radius: 2px;
+            overflow: hidden;
+        ">
+            <div id="spotify-progress" style="
+                width: 0%;
+                height: 100%;
+                background: #1DB954;
+                transition: width 1s linear;
+            "></div>
+        </div>
+    </div>
+</div>
+
+<script>
+const widget = document.getElementById('spotify-widget');
+const toggleBtn = document.getElementById('spotify-toggle');
+
+function isMobile() {
+    return window.innerWidth <= 768;
+}
+
+function updateVisibility() {
+    if(isMobile()){
+        widget.style.transform = 'translateX(120%)'; // hidden off-screen
+        toggleBtn.style.transform = 'translateX(0)'; // visible
+    } else {
+        widget.style.transform = 'translateX(0)'; // visible
+        toggleBtn.style.transform = 'translateX(200%)'; // hidden off-screen
+    }
+}
+
+// Toggle widget slide in/out on mobile
+toggleBtn.addEventListener('click', (e) => {
+    widget.style.transform = 'translateX(0)'; // slide in
+    toggleBtn.style.transform = 'translateX(200%)'; // hide button
+    e.stopPropagation();
+});
+
+// Close widget when clicking outside
+document.addEventListener('click', (e) => {
+    if(isMobile()){
+        if(!widget.contains(e.target) && e.target !== toggleBtn){
+            widget.style.transform = 'translateX(120%)'; // slide out
+            toggleBtn.style.transform = 'translateX(0)'; // show button
+        }
+    }
+});
+
+// Prevent clicks inside widget from closing it
+widget.addEventListener('click', (e) => {
+    e.stopPropagation();
+});
+
+// Variable to track progress bar animation
+let progressInterval = null;
+let progressSpeed = 0;
+let lastUpdateTime = Date.now();
+let currentProgress = 0;
+let targetProgress = 0;
+let trackDuration = 0;
+let currentTrackId = null;
+
+// --- Spotify fetch ---
+async function updateSpotifyWidget() {
+    try {
+        const res = await fetch('/api/v1/playing');
+        if (!res.ok) return;
+
+        const data = await res.json();
+        // Check if data contains an error or message indicating nothing is playing
+        if (data.error || data.message) {
+            // If existing data
+            if (document.getElementById('spotify-song').textContent) {
+                return;
+            }
+            // Alternate text when nothing is playing
+            document.getElementById('spotify-album-art').src = '/assets/img/external/spotify.png';
+            document.getElementById('spotify-song').textContent = 'Not Playing';
+            document.getElementById('spotify-artist').textContent = '';
+            document.getElementById('spotify-album').textContent = '';
+            document.getElementById('spotify-progress').style.width = '0%';
+            clearInterval(progressInterval);
+            progressInterval = null;
+            currentProgress = 0;
+            currentTrackId = null;
+            return;
+        }
+
+        const track = data.spotify;
+        var firstLoad = false;
+        // Check if this is the first time loading data
+        if (!document.getElementById('spotify-song').textContent) {
+            firstLoad = true;
+        }
+
+          // Check if track has changed (new song started)
+        const trackId = track.song_name + track.artist; // Simple track identifier
+        const isNewTrack = currentTrackId !== null && currentTrackId !== trackId;
+        
+        if (isNewTrack) {
+            // Reset progress bar instantly for new track
+            currentProgress = 0;
+            document.getElementById('spotify-progress').style.transition = 'none';
+            document.getElementById('spotify-progress').style.width = '0%';
+            // Force reflow to apply the instant reset
+            document.getElementById('spotify-progress').offsetHeight;
+            // Re-enable transition
+            document.getElementById('spotify-progress').style.transition = 'width 0.1s linear';
+        }
+        
+        currentTrackId = trackId;
+            
+
+        document.getElementById('spotify-album-art').src = track.album_art;
+        document.getElementById('spotify-song').textContent = track.song_name;
+        document.getElementById('spotify-artist').textContent = track.artist;
+        document.getElementById('spotify-album').textContent = track.album_name;
+        
+        // Update progress bar
+        if (track.is_playing) {
+            currentProgress = (track.progress_ms / track.duration_ms) * 100;
+            trackDuration = track.duration_ms;
+            lastUpdateTime = Date.now();
+            
+            document.getElementById('spotify-progress').style.width = currentProgress + '%';
+            
+            // Clear existing interval
+            if (progressInterval) {
+                clearInterval(progressInterval);
+            }
+            // Start interval to animate progress bar
+            progressInterval = setInterval(animateProgressBar, 100);
+        } else {
+            document.getElementById('spotify-progress').style.width = currentProgress + '%';
+            clearInterval(progressInterval);
+            progressInterval = null;
+        }
+        
+        // If first load and desktop, slide in the widget
+        if (firstLoad) {
+            updateVisibility();                   
+        }
+
+    } catch (err) {
+        console.error('Failed to fetch Spotify data', err);
+    }
+}
+
+// Animate progress bar
+function animateProgressBar() {
+    if (trackDuration === 0) return;
+    
+    const now = Date.now();
+    const elapsed = now - lastUpdateTime;
+    lastUpdateTime = now;
+    
+    // Calculate progress increment based on elapsed time
+    const progressIncrement = (elapsed / trackDuration) * 100;
+    currentProgress += progressIncrement;
+    
+    if (currentProgress >= 100) {
+        currentProgress = 100;
+        document.getElementById('spotify-progress').style.width = '100%';
+        clearInterval(progressInterval);
+        progressInterval = null;
+        // Refresh API when progress reaches 100%
+        setTimeout(updateSpotifyWidget, 500);
+    } else {
+        document.getElementById('spotify-progress').style.width = currentProgress + '%';
+    }
+}
+
+// Wait for Spotify API to have responded before initial display
+updateSpotifyWidget();
+
+window.addEventListener('resize', updateVisibility);
+setInterval(updateSpotifyWidget, 15000);
+</script>
+
     <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
     <script src="/assets/js/script.min.js"></script>
     <script src="/assets/js/grayscale.min.js"></script>

templates/now.ascii

@@ -0,0 +1,6 @@
+{{header}}
+───────────────────────────────────────────────
+ Now {{ date }} 
+────────────
+
+{{content | safe}}

templates/now/24_02_18.html

@@ -56,6 +56,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/24_02_25.html

@@ -56,6 +56,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/24_04_19.html

@@ -56,6 +56,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/24_05_20.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/24_05_28.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/24_06_06.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/24_06_17.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/24_06_24.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/24_07_15.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/24_08_05.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/24_09_07.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/24_09_27.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/24_10_07.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/24_10_15.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/24_10_22.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/24_12_19.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/25_01_01.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/25_01_30.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/25_03_27.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/25_05_28.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/25_06_19.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/25_07_21.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last little bit">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/25_08_15.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last little bit">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/25_10_23.html

@@ -55,6 +55,7 @@ Find out what I've been up to in the last little bit">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/old.html

@@ -56,6 +56,7 @@ Find out what I've been up to in the last week">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/now/template.html

@@ -56,6 +56,7 @@ Find out what I've been up to in the last little bit">
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/projects.ascii

@@ -5,3 +5,5 @@
 
 {{projects}}
 
+Look at more projects on my Git: https://git.woodburn.au
+

templates/projects.html

@@ -51,6 +51,7 @@
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>

templates/tools.ascii

@@ -11,7 +11,7 @@ Here are some of the tools I use regularly — most of them are open source!
 {{tool.name}}
 {{tool.description}}
 Website: {{tool.url}}
-{% if tool.demo_url %}Demo: {{tool.demo_url}}{% endif %}
+{% if tool.demo %}Demo: {{tool.demo}}{% endif %}
 {% endfor %}
 
 ───────────────────────────────────────────────

templates/tools.html

@@ -35,6 +35,7 @@
     <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
     <link rel="stylesheet" href="/assets/css/profile.min.css">
     <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
+    <link rel="stylesheet" href="/assets/css/tools.min.css">
 <link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
 <script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
 </head>
@@ -51,6 +52,7 @@
                     <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/tools">Tools</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
                     <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
                 </ul>
@@ -75,11 +77,15 @@
 <div class="row">
     {% for tool in tools_in_type %}
     <div class="col-md-6 col-lg-4 mb-4">
-        <div class="card h-100 shadow-sm transition-all" style="transition: transform 0.2s, box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 0.5rem 1rem rgba(0,0,0,0.15)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='';">
+        <div class="card h-100 shadow-sm transition-all" style="transition: transform 0.2s, box-shadow 0.2s;">
             <div class="card-body d-flex flex-column">
                 <h4 class="card-title">{{tool.name}}</h4>
                 <p class="card-text">{{ tool.description }}</p>
-                <div class="btn-group gap-3 mt-auto" role="group">{% if tool.demo %}<button class="btn btn-primary" type="button" data-bs-target="#modal-{{tool.name}}" data-bs-toggle="modal" style="transition: transform 0.2s, background-color 0.2s;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">View Demo</button>{% endif %}<a class="btn btn-primary" role="button" href="{{tool.url}}" target="_blank" style="transition: transform 0.2s, background-color 0.2s;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">{{tool.name}} Website</a></div>
+                <div class="btn-group gap-3 mt-auto" role="group">{% if tool.demo %}<button class="btn btn-primary"
+                        type="button" data-bs-target="#modal-{{tool.name}}" data-bs-toggle="modal"
+                        style="transition: transform 0.2s, background-color 0.2s;">View Demo</button>{% endif %}<a
+                        class="btn btn-primary" role="button" href="{{tool.url}}" target="_blank"
+                        style="transition: transform 0.2s, background-color 0.2s;">{{tool.name}} Website</a></div>
             </div>
         </div>
     </div>
@@ -88,49 +94,110 @@
 <!-- Modals for this type -->
 {% for tool in tools_in_type %}
 {% if tool.demo %}
-<div id="modal-{{tool.name}}" class="modal fade" role="dialog" tabindex="-1" style="z-index: 1055;">
+<div id="modal-{{tool.name}}" class="modal fade" role="dialog" tabindex="-1" style="z-index: 1055;"
+    data-demo-url="{{ tool.demo | e }}">
     <div class="modal-dialog modal-xl" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h4 class="modal-title">{{tool.name}}</h4><button class="btn-close" type="button" aria-label="Close" data-bs-dismiss="modal"></button>
+                <h4 class="modal-title">{{tool.name}}</h4><button class="btn-close" type="button" aria-label="Close"
+                    data-bs-dismiss="modal"></button>
             </div>
-            <div class="modal-body">
-                {{ tool.demo | safe }}
-            </div>
-            <div class="modal-footer"><button class="btn btn-light" type="button" data-bs-dismiss="modal">Close</button></div>
+            
+            <div class="modal-body" data-demo-loaded="false"></div>
+        </div>
+        <div class="modal-footer"><button class="btn btn-light" type="button" data-bs-dismiss="modal">Close</button>
         </div>
     </div>
 </div>
+</div>
 {% endif %}
 {% endfor %}
 {% endfor %}
 
 <script>
-document.addEventListener('DOMContentLoaded', function() {
-    const navbar = document.getElementById('mainNav');
-    const headers = document.querySelectorAll('.section-header');
+    document.addEventListener('DOMContentLoaded', function () {
+        const navbar = document.getElementById('mainNav');
+        const headers = document.querySelectorAll('.section-header');
 
-    if (navbar) {
-        const navbarHeight = navbar.offsetHeight;
-        headers.forEach(header => {
-            header.style.top = navbarHeight + 'px';
-            header.style.zIndex = '100';
-            header.style.scrollMarginTop = navbarHeight + 'px';
-        });
+        if (navbar) {
+            const navbarHeight = navbar.offsetHeight;
+            headers.forEach(header => {
+                header.style.top = navbarHeight + 'px';
+                header.style.zIndex = '100';
+                header.style.scrollMarginTop = navbarHeight + 'px';
+            });
 
-        // Handle hash navigation on page load
-        if (window.location.hash) {
-            setTimeout(() => {
-                const target = document.querySelector(window.location.hash);
-                if (target) {
-                    window.scrollTo({
-                        top: target.offsetTop - navbarHeight,
-                        behavior: 'smooth'
-                    });
-                }
-            }, 0);
+            // Handle hash navigation on page load
+            if (window.location.hash) {
+                setTimeout(() => {
+                    const target = document.querySelector(window.location.hash);
+                    if (target) {
+                        window.scrollTo({
+                            top: target.offsetTop - navbarHeight,
+                            behavior: 'smooth'
+                        });
+                    }
+                }, 0);
+            }
         }
-    }
+
+       // Load demo in modal
+    document.querySelectorAll('.modal').forEach(modal => {
+        modal.addEventListener('show.bs.modal', () => {
+            const body = modal.querySelector('.modal-body');
+            if (body.dataset.demoLoaded === 'false') {
+                const demoUrl = modal.dataset.demoUrl;
+                const iframeId = 'iframe-' + modal.id;
+
+                // Add a div on top of all content to show loading message
+                const loadingDiv = document.createElement('div');
+                loadingDiv.style.position = 'absolute';
+                loadingDiv.style.top = '0';
+                loadingDiv.style.left = '0';
+                loadingDiv.style.width = '100%';
+                loadingDiv.style.height = '100%';
+                loadingDiv.style.backgroundColor = 'rgb(0, 0, 0)';
+                loadingDiv.style.display = 'flex';
+                loadingDiv.style.justifyContent = 'center';
+                loadingDiv.style.alignItems = 'center';
+                loadingDiv.style.zIndex = '10';
+                const loadingMsg = document.createElement('p');
+                loadingMsg.className = 'text-center';
+                loadingMsg.textContent = 'Loading demo...';
+                loadingDiv.appendChild(loadingMsg);
+                body.style.position = 'relative';
+                body.appendChild(loadingDiv);
+
+                // Create iframe
+                const iframe = document.createElement('iframe');
+                iframe.src = demoUrl + '/iframe';
+                iframe.id = iframeId;
+                iframe.style.width = '100%';
+                iframe.style.height = '400px'; // temporary height
+                iframe.style.border = '0';
+                iframe.setAttribute('scrolling', 'no');
+                iframe.setAttribute('allowfullscreen', 'true');
+
+                body.appendChild(iframe);
+                body.dataset.demoLoaded = 'true';
+
+                // Listen for bodySize message from asciinema iframe
+                const origin = new URL(demoUrl).origin;
+                function onMessage(event) {
+                    if (event.origin !== origin || event.source !== iframe.contentWindow) return;
+                    if (event.data.type === 'bodySize' && event.data.payload.height) {
+                        iframe.style.height = event.data.payload.height + 'px';
+                        // Remove loading message
+                        body.removeChild(loadingDiv);
+                        // Optional: limit modal max height
+                        modal.querySelector('.modal-dialog').style.maxHeight = '90vh';
+                    }
+                }
+
+                window.addEventListener('message', onMessage, false);
+            }
+        });
+    });
 });
 </script></div>
     </section>

tests/api.hurl

@@ -6,10 +6,15 @@ GET http://127.0.0.1:5000/api/v1/ip
 HTTP 200
 [Asserts]
 jsonpath "$.ip" == "127.0.0.1"
+
 GET http://127.0.0.1:5000/api/v1/time
 HTTP 200
 GET http://127.0.0.1:5000/api/v1/timezone
 HTTP 200
+[Asserts]
+jsonpath "$.timezone" >= 10
+jsonpath "$.timezone" <= 12
+
 GET http://127.0.0.1:5000/api/v1/message
 HTTP 200
 GET http://127.0.0.1:5000/api/v1/project
@@ -18,3 +23,6 @@ GET http://127.0.0.1:5000/api/v1/tools
 HTTP 200
 [Asserts]
 jsonpath "$.tools" count > 5
+
+GET http://127.0.0.1:5000/api/v1/playing
+HTTP 200

tools.py

@@ -12,6 +12,29 @@ HTTP_OK = 200
 HTTP_BAD_REQUEST = 400
 HTTP_NOT_FOUND = 404
 
+CRAWLERS = [
+    "Googlebot",
+    "Bingbot",
+    "Chrome-Lighthouse",
+    "Slurp",
+    "DuckDuckBot",
+    "Baiduspider",
+    "YandexBot",
+    "Sogou",
+    "Exabot",
+    "facebot",
+    "ia_archiver",
+    "Twitterbot"
+]
+
+CLI_AGENTS = [
+    "curl",
+    "hurl",
+    "xh",
+    "Posting",
+    "HTTPie"
+]
+
 
 def getClientIP(request: Request) -> str:
     """
@@ -60,7 +83,7 @@ def getGitCommit() -> str:
     return "failed to get version"
 
 
-def isCurl(request: Request) -> bool:
+def isCLI(request: Request) -> bool:
     """
     Check if the request is from curl or hurl.
 
@@ -72,7 +95,7 @@ def isCurl(request: Request) -> bool:
     """
     if request.headers and request.headers.get("User-Agent"):
         user_agent = request.headers.get("User-Agent", "")
-        return "curl" in user_agent or "hurl" in user_agent
+        return any(agent in user_agent for agent in CLI_AGENTS)
     return False
 
 
@@ -88,7 +111,7 @@ def isCrawler(request: Request) -> bool:
     """
     if request.headers and request.headers.get("User-Agent"):
         user_agent = request.headers.get("User-Agent", "")
-        return "Googlebot" in user_agent or "Bingbot" in user_agent
+        return any(crawler in user_agent for crawler in CRAWLERS)
     return False
 
 @cache
@@ -187,7 +210,6 @@ def json_response(request: Request, message: Union[str, Dict] = "404 Not Found",
         "ip": getClientIP(request),
     }), code
 
-
 def error_response(
     request: Request,
     message: str = "404 Not Found",
@@ -206,7 +228,7 @@ def error_response(
     Returns:
         Union[Tuple[Dict, int], object]: The JSON or HTML response
     """
-    if force_json or isCurl(request):
+    if force_json or isCLI(request):
         return json_response(request, message, code)
 
     # Check if <error code>.html exists in templates