add htmx

.vscode/settings.json

@@ -4,6 +4,8 @@
     "azuretools",
     "cssless",
     "devcontainer",
+    "htmx",
+    "HTMX",
     "hykin",
     "hypercorn",
     "Instapundit",

app/app.py

@@ -1,10 +1,8 @@
 import os
 import asyncio
-import json
 import signal
 from datetime import datetime
 import sys
-from typing import Any
 from flask import Flask, Response, request, render_template
 from flask_caching import Cache
 
@@ -29,9 +27,9 @@
 	from flask_minify import Minify
 	Minify(app=app, html=True, js=True, cssless=True)
 
-
 cache = Cache(app, config=cache_config)
 page_timeout = int(os.environ.get('ONBOARD_PAGE_TIMEOUT', 600))
+widgets = {}
 
 @app.context_processor
 def inject_current_date():
@@ -67,6 +65,13 @@ def save_tab_name():
 
 # Define route to render the template
 @app.route('/')
+async def test():
+	return render_template('test.html')
+
+@app.route('/clicked', methods = ['GET', 'POST'])
+async def clicked():
+	return render_template('clicked.html')
+
 @app.route('/tab/<tab_name>')
 @cache.cached(timeout=page_timeout)
 async def index(tab_name=None):
@@ -82,24 +87,25 @@ async def index(tab_name=None):
 
 	# Add feeds to the appropriate column
 	if current_tab['widgets']:
-		tasks = []
 		for widget in current_tab['widgets']:
+			widget['articles'] = []
+			widget['summary_enabled'] = widget.get('summary_enabled', True)
 			column_index = (widget['column'] - 1) % column_count
 			columns[column_index].append(widget)
-			if widget['type'] == 'feed':
-				widget['summary_enabled'] = widget.get('summary_enabled', True)
-				tasks.append(asyncio.create_task(rss.load_feed(widget)))
-			elif widget['type'] == 'bookmarks':
+			if widget['name'] not in widgets:
+				widgets[widget['name']] = widget
+			if widget['type'] == 'bookmarks':
 				widget['article_limit'] = -1
 				widget['articles'] = [{'title': entry['title'], 'link': entry['url']} for entry in widget['bookmarks']]
-
-		await asyncio.wait(tasks)
-		for column in columns:
-			column.sort(key = lambda x: x['position'])
 
 	# Pass column data to the template
 	return render_template('index.html', tabs=tabs, columns=columns, headers=headers, current_tab_name=current_tab['name'])
 
+@app.route('/widget/<widget_name>')
+@cache.cached(timeout=page_timeout)
+async def widget(widget_name):
+	widget = await rss.load_feed(widgets[widget_name])
+	return render_template('widget.html', widget=widget)
 
 if __name__ == '__main__':
 	port = int(os.environ.get("ONBOARD_PORT", 9830))

app/rss.py

@@ -26,7 +26,7 @@ async def load_feed(self, widget):
 		# check if feed is in self.feeds and that the last updated time is less than 15 minutes ago	
 		if cached_widget and 'last_updated' in cached_widget and (start_time - cached_widget['last_updated']) < 60 * 15:
 			widget['articles'] = cached_widget['articles']
-			# print(f"Loaded {widget['name']} from cache")
+			print(f"Loaded {widget['name']} from cache")
 		else:
 			headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36'}
 			async with aiohttp.ClientSession() as session:
@@ -48,8 +48,8 @@ async def load_feed(self, widget):
 						widget['last_updated'] = start_time
 						self.feed_cache.set(widget['name'], widget)
 
-		post_processor.process(widget)
-		self.feed_cache.set(widget['name'], widget)
+			post_processor.process(widget)
+			self.feed_cache.set(widget['name'], widget)
 
 		return widget
 

app/static/css/index.css

@@ -93,7 +93,8 @@ ul li:last-child {
 
 /* Feed Content */
 .feed-content {
-  max-height: 23.75em; /* 380px converted to 23.75em */
+  max-height: 23.75em;
+  min-height: 23.75em;
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: #666 #333;

app/templates/clicked.html

@@ -0,0 +1 @@
+Hello World

app/templates/index.html

@@ -32,6 +32,7 @@
       flex: 1 0 auto;
     }
   </style>
+  <script defer src="https://unpkg.com/[email protected]"></script>
   <script defer src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script defer src="{{ url_for('static', filename='js/script.js') }}"></script>
   <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
@@ -81,29 +82,8 @@
       <div class="row">
         {% for column in columns %}
         <div class="column">
-          {% for feed in column %}
-          <div class="box {{ feed.type }}-box">
-            <div class="box-header {{ feed.type }}-header">
-              <a href="{{ feed.link }}" target="_blank">{{ feed.name }}</a></div>
-            <div class="box-content {{ feed.type }}-content">
-              <ul>
-                {% for article in feed.articles[:feed.get('article_limit', 10)] %}
-                <li>
-                  <a href="{{ article.link }}" class="{{ feed.type }}-link">
-                    {% if article.title %}
-                      {{ article.title }}
-                    {% else %}
-                      No Title
-                    {% endif %}
-                  </a>
-                  {% if feed.summary_enabled and article.summary %}
-                  <div class="summary {{ feed.type }}">{{ article.summary }}</div>
-                  {% endif %}
-                </li>
-                {% endfor %}
-              </ul>
-            </div>
-          </div>
+          {% for widget in column %}
+            {% include "widget.html" ignore missing with context %}
           {% endfor %}
         </div>
         {% endfor %}

app/templates/test.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title></title>
+  <meta name="description" content="">
+
+  <meta property="og:title" content="">
+  <meta property="og:type" content="">
+  <meta property="og:url" content="">
+  <meta property="og:image" content="">
+  <meta property="og:image:alt" content="">
+
+  <meta name="theme-color" content="#fafafa">
+  <script defer src="https://unpkg.com/[email protected]"></script>
+  <style>
+  .htmx-settling img {
+    opacity: 0;
+  }
+  img {
+  transition: opacity 300ms ease-in;
+  }
+  </style>
+</head>
+
+<body>
+
+  <!-- Add your site or application content here -->
+  <p>Hello world! This is HTML5 Boilerplate.</p>
+  <button hx-post="/clicked" hx-swap="outerHTML">
+    Click Me
+  </button>
+
+  <div hx-get="/clicked" hx-trigger="load">
+    <img  alt="Result loading..." class="htmx-indicator" width="150" src="/static/img/bars.svg"/>
+  </div>
+
+</body>
+
+</html>

app/templates/widget.html

@@ -0,0 +1,28 @@
+<div class="box {{ widget.type }}-box"
+  {% if not widget.articles %}
+    hx-get="/widget/{{ widget.name }}" hx-trigger="load" hx-swap="outerHTML"
+  {% endif %}
+>
+  <div class="box-header {{ widget.type }}-header">
+    <a href="{{ widget.link }}" target="_blank">{{ widget.name }}</a></div>
+  <div class="box-content {{ widget.type }}-content">
+    <ul>
+      {% for article in widget.articles[:widget.get('article_limit', 10)] %}
+      <li>
+        <a href="{{ article.link }}" class="{{ widget.type }}-link">
+          {% if article.title %}
+            {{ article.title }}
+          {% else %}
+            No Title
+          {% endif %}
+        </a>
+        {% if widget.summary_enabled and article.summary %}
+        <div class="summary {{ widget.type }}">{{ article.summary }}</div>
+        {% endif %}
+      </li>
+      {% else %}
+      <li>Loading...</li>
+      {% endfor %}
+    </ul>
+  </div>
+</div>

requirements.txt

@@ -3,7 +3,8 @@ argcomplete
 bs4
 docker
 feedparser
-Flask-Minify
+#flask-htmx
+flask-minify
 flask[async]
 flask-caching
 hypercorn==0.15.0