fix: Update curl tools page to use new demo data

.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 .

blueprints/api.py

@@ -30,7 +30,7 @@ if 'time-zone' not in NC_CONFIG:
     NC_CONFIG['time-zone'] = 10
 
 
-@app.route("/")
+@app.route("/", strict_slashes=False)
 @app.route("/help")
 def help():
     """Provide API documentation and help."""
@@ -177,11 +177,6 @@ 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)
 
 @app.route("/playing")

blueprints/blog.py

@@ -108,7 +108,7 @@ def render_home(handshake_scripts: str | None = None):
     )
 
 
-@app.route("/")
+@app.route("/", strict_slashes=False)
 def index():
     if not isCLI(request):
         return render_home(handshake_scripts=getHandshakeScript(request.host))

blueprints/now.py

@@ -2,7 +2,7 @@ from flask import Blueprint, render_template, make_response, request, jsonify
 import datetime
 import os
 from tools import getHandshakeScript, error_response, isCLI
-from curl import get_header
+from curl import get_header, MAX_WIDTH
 from bs4 import BeautifulSoup
 import re
 
@@ -77,15 +77,17 @@ def render_curl(date=None):
 
     # 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"])
+        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")
+        p_tags = div.find_all("p") # type: ignore
 
         if header_tag and p_tags:
-            header_text = header_tag.get_text(strip=True)
+            header_text = header_tag.get_text(strip=True) # type: ignore
             content_lines = []
 
             for p in p_tags:
@@ -93,9 +95,24 @@ def render_curl(date=None):
                 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)]
+                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)
+                    text += "\nLinks: " + ", ".join(links) # type: ignore
 
                 content_lines.append(text)
 
@@ -111,7 +128,7 @@ def render_curl(date=None):
 
 
 
-@app.route("/")
+@app.route("/", strict_slashes=False)
 def index():
     if isCLI(request):
         return render_curl()
@@ -126,8 +143,7 @@ def path(path):
     return render(path, handshake_scripts=getHandshakeScript(request.host))
 
 
-@app.route("/old")
-@app.route("/old/")
+@app.route("/old", strict_slashes=False)
 def old():
     now_dates = list_dates()[1:]
     if isCLI(request):

blueprints/spotify.py

@@ -89,7 +89,7 @@ def callback():
     print("Refresh Token:", REFRESH_TOKEN)
     return redirect(url_for("spotify.currently_playing"))
 
-@app.route("/")
+@app.route("/", strict_slashes=False)
 @app.route("/playing")
 def currently_playing():
     """Public endpoint showing your current track."""

blueprints/template.py

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

blueprints/wellknown.py

@@ -1,4 +1,5 @@
-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
 
 app = Blueprint('well-known', __name__, url_prefix='/.well-known')
@@ -25,7 +26,7 @@ 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)
 
 
 @app.route("/nostr.json")

curl.py

@@ -6,6 +6,8 @@ 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

data/tools.json

@@ -33,55 +33,50 @@
         "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

@@ -28,7 +28,7 @@ CORS(app)
 
 # Register blueprints
 for module in [now, blog, wellknown, api, podcast, acme, spotify]:
-        app.register_blueprint(module.app)
+    app.register_blueprint(module.app)
 
 
 dotenv.load_dotenv()
@@ -45,7 +45,10 @@ RATE_LIMIT_WINDOW = 3600  # 1 hour in seconds
 RESTRICTED_ROUTES = ["ascii"]
 REDIRECT_ROUTES = {
     "contact": "/#contact",
-    "old": "/now/old"
+    "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"
@@ -178,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):
@@ -203,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
@@ -253,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]
@@ -376,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"},
@@ -386,6 +376,8 @@ def index():
     return resp
 
 # region Donate
+
+
 @app.route("/donate")
 def donate():
     if isCLI(request):
@@ -551,6 +543,7 @@ def qrcodee(data):
 
 # endregion
 
+
 @app.route("/supersecretpath")
 def supersecretpath():
     ascii_art = ""
@@ -676,6 +669,7 @@ def resume_pdf():
         return send_file("data/resume.pdf")
     return error_response(request, message="Resume not found")
 
+
 @app.route("/tools")
 def tools():
     if isCLI(request):
@@ -686,8 +680,6 @@ def tools():
 # region Error Catching
 
 # Catch all for GET requests
-
-
 @app.route("/<path:path>")
 def catch_all(path: str):
 

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/header.ascii

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

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 

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>
@@ -76,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>
@@ -89,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>