commit b2b39bac843f3bcb1dfc36764b74674780a627b2
parent f3447723647a30057b73ee16f422f0c2a99dd892
Author: Silas Brack <silasbrack@gmail.com>
Date: Wed, 1 Oct 2025 11:08:03 +0200
feat: start implementing kagi news clone
Diffstat:
7 files changed, 229 insertions(+), 54 deletions(-)
diff --git a/src/simple_web_app/app.py b/src/simple_web_app/app.py
@@ -2,6 +2,7 @@ import contextlib
import importlib.resources
import logging
import os
+import random
import sqlite3
from pathlib import Path
@@ -88,6 +89,25 @@ async def join_chat(request: Request):
return render(request, "chat.html")
+async def open_search(request: Request):
+ return render(request, "search.html")
+
+
+async def search(request: Request):
+ values = [
+ {"firstname": "Venus", "lastname": "Grimes", "email": "lectus.rutrum@Duisa.edu"},
+ {"firstname": "Fletcher", "lastname": "Owen", "email": "metus@Aenean.org"},
+ {"firstname": "William", "lastname": "Hale", "email": "eu.dolor@risusodio.edu"},
+ {"firstname": "TaShya", "lastname": "Cash", "email": "tincidunt.orci.quis@nuncnullavulputate.co.uk"},
+ ]
+ random.shuffle(values)
+ return render(request, "search_results.html", context={"people": values})
+
+
+async def open_settings(request: Request):
+ return render(request, "settings.html")
+
+
@contextlib.asynccontextmanager
async def lifespan(app: Starlette):
conn = sqlite3.connect(DATABASE_PATH)
@@ -105,6 +125,9 @@ async def lifespan(app: Starlette):
routes = [
Route("/", methods=["GET"], endpoint=show_home_page),
+ Route("/search", methods=["GET"], endpoint=open_search),
+ Route("/search", methods=["POST"], endpoint=search),
+ Route("/settings", methods=["GET"], endpoint=open_settings),
Route("/chat/join", methods=["POST"], endpoint=join_chat),
Mount("/static", StaticFiles(directory=STATIC_DIR), name="static"),
]
diff --git a/src/simple_web_app/static/style.css b/src/simple_web_app/static/style.css
@@ -1,21 +1 @@
-.hidden {
- display: none;
-}
-.msg {
- text-decoration: none;
- font-size: 5em;
- list-style: none;
- text-align:left;
- margin-top: 0px;
- margin-bottom: 0px;
-}
-
-.event {
- text-decoration: none;
- list-style: none;
- font-size: 2em;
- text-align:center;
- margin-top: 10px;
- margin-bottom: 10px;
-}
diff --git a/src/simple_web_app/templates/application.html b/src/simple_web_app/templates/application.html
@@ -6,11 +6,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/htmx-ext-preload@2.1.0"></script>-->
- <!--<script src="https://unpkg.com/hyperscript.org@0.9.14"></script>-->
+ <script src="https://unpkg.com/hyperscript.org@0.9.14"></script>
<link rel="stylesheet" href="{{ url_for('static', path='style.css') }}"/>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.blue.min.css"/>
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.amber.min.css"/>
</head>
- <body class="container" hx-ext="preload" style="--pico-font-family: Inter">
- <main><div id="content">{% include content %}</div></main>
+ <body hx-ext="preload">
+ <main class="container">
+ <div id="content">{% include content %}</div>
+ </main>
</body>
</html>
diff --git a/src/simple_web_app/templates/index.html b/src/simple_web_app/templates/index.html
@@ -1,37 +1,119 @@
<div id="login">
- <article>
- <hgroup>
- <h1>Welcome to RealTimeChat!</h1>
- <p>Type your username to enter the chat</p>
- </hgroup>
- <form hx-post="/chat/join" id="username-form">
- <input id="username" name="username" type="text" placeholder="Username" autocomplete="off" required>
- <button type="submit">Enter Chat</button>
- </form>
- </article>
-</div>
+ <!-- <article> -->
+ <nav>
+ <ul>
+ <li><a href="#" class="secondary"><img src="https://kite.kagi.com/svg/kagi_news_compact_dark.svg"></img></a></li>
+ </ul>
+ <ul>
+ <li><strong>Tuesday, September 30</strong></li>
+ </ul>
+ <ul>
+ <li><a style="cursor: pointer;" hx-get="/search" hx-target="#modal-placeholder" hx-swap="innerHTML" class="secondary"><svg height="20pt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z"/></svg></a></li>
+ <li><a class="secondary"><svg height="20pt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M349.1 114.7C343.9 103.3 332.5 96 320 96C307.5 96 296.1 103.3 290.9 114.7L123.5 480L112 480C94.3 480 80 494.3 80 512C80 529.7 94.3 544 112 544L200 544C217.7 544 232 529.7 232 512C232 494.3 217.7 480 200 480L193.9 480L215.9 432L424.2 432L446.2 480L440.1 480C422.4 480 408.1 494.3 408.1 512C408.1 529.7 422.4 544 440.1 544L528.1 544C545.8 544 560.1 529.7 560.1 512C560.1 494.3 545.8 480 528.1 480L516.6 480L349.2 114.7zM394.8 368L245.2 368L320 204.8L394.8 368z"/></svg></a></li>
+ <li><a style="cursor: pointer;" hx-get="/settings" hx-target="#modal-placeholder" hx-swap="innerHTML" class="secondary"><svg height="20pt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M259.1 73.5C262.1 58.7 275.2 48 290.4 48L350.2 48C365.4 48 378.5 58.7 381.5 73.5L396 143.5C410.1 149.5 423.3 157.2 435.3 166.3L503.1 143.8C517.5 139 533.3 145 540.9 158.2L570.8 210C578.4 223.2 575.7 239.8 564.3 249.9L511 297.3C511.9 304.7 512.3 312.3 512.3 320C512.3 327.7 511.8 335.3 511 342.7L564.4 390.2C575.8 400.3 578.4 417 570.9 430.1L541 481.9C533.4 495 517.6 501.1 503.2 496.3L435.4 473.8C423.3 482.9 410.1 490.5 396.1 496.6L381.7 566.5C378.6 581.4 365.5 592 350.4 592L290.6 592C275.4 592 262.3 581.3 259.3 566.5L244.9 496.6C230.8 490.6 217.7 482.9 205.6 473.8L137.5 496.3C123.1 501.1 107.3 495.1 99.7 481.9L69.8 430.1C62.2 416.9 64.9 400.3 76.3 390.2L129.7 342.7C128.8 335.3 128.4 327.7 128.4 320C128.4 312.3 128.9 304.7 129.7 297.3L76.3 249.8C64.9 239.7 62.3 223 69.8 209.9L99.7 158.1C107.3 144.9 123.1 138.9 137.5 143.7L205.3 166.2C217.4 157.1 230.6 149.5 244.6 143.4L259.1 73.5zM320.3 400C364.5 399.8 400.2 363.9 400 319.7C399.8 275.5 363.9 239.8 319.7 240C275.5 240.2 239.8 276.1 240 320.3C240.2 364.5 276.1 400.2 320.3 400z"/></svg></a></li>
+ </ul>
+ </nav>
+ <nav>
+ <ul>
+ <li><a href="#">World</a></li>
+ <li><a href="#">USA</a></li>
+ <li><a href="#">Business</a></li>
+ <li><a href="#">Technology</a></li>
+ <li><a href="#">Science</a></li>
+ <li><a href="#">Sports</a></li>
+ <li><a href="#">Gaming</a></li>
+ <li><a href="#">Today in History</a></li>
+ </ul>
+ </nav>
+ <div id="modal-placeholder"></div>
+ <p>
+ <article>
+ <header><small><a href="">US Politics</a></small></header>
+ <details>
+ <summary>
+ <strong>Trump, Congress deadlock as shutdown deadline nears</strong>
+ </summary>
+ <p><small>
+ Washington is bracing for a government shutdown as federal funding expires at midnight after President Trump and congressional leaders ended a White House meeting without an agreement [1][2][3][4][5][6]. Republicans are pressing a clean stopgap bill to fund agencies through November 21, while Democrats insist on extending health-care subsidies and reversing recent Medicaid cuts in any deal [7][8][9]. A lapse would quickly disrupt services and likely delay key economic reports on jobs and inflation, adding uncertainty for households and markets [10][11][12][13][14].
+ </small></p>
+ </details>
+ </article>
-<div id="chat" class="hidden">
- <article>
- <hgroup>
- <h1>RealTimeChat</h1>
- <p id="username">
- <div class="msg">Asdfdsfd</div>
+ <article>
+ <header><a href=""><small>Censorship</small></a></header>
+ <details>
+ <summary>
+ <strong>Taliban cuts internet nationwide, flights grounded in Afghanistan </strong>
+ </summary>
+ <p>
+ Washington is bracing for a government shutdown as federal funding expires at midnight after President Trump and congressional leaders ended a White House meeting without an agreement [1][2][3][4][5][6]. Republicans are pressing a clean stopgap bill to fund agencies through November 21, while Democrats insist on extending health-care subsidies and reversing recent Medicaid cuts in any deal [7][8][9]. A lapse would quickly disrupt services and likely delay key economic reports on jobs and inflation, adding uncertainty for households and markets [10][11][12][13][14].
</p>
- </hgroup>
+ </details>
+ </article>
+
+ <article>
+ <header><small><a href="">Disaster</a></small></header>
- <article aria-busy="true" id="loading"></article>
+ <details>
+ <summary>
+ <strong>
+ Indonesian school collapse leaves 38 missing, 77 hurt
+ </strong>
+ </summary>
+ <p>
+ Washington is bracing for a government shutdown as federal funding expires at midnight after President Trump and congressional leaders ended a White House meeting without an agreement [1][2][3][4][5][6]. Republicans are pressing a clean stopgap bill to fund agencies through November 21, while Democrats insist on extending health-care subsidies and reversing recent Medicaid cuts in any deal [7][8][9]. A lapse would quickly disrupt services and likely delay key economic reports on jobs and inflation, adding uncertainty for households and markets [10][11][12][13][14].
+ </p>
+ </details>
+ </article>
- <ul id="area">
- </ul>
+ <article>
+ <header><small><a href="">Social Media</a></small></header>
+ <details>
+ <summary>
+ <strong>Youtube settles Trump suspension lawsuit for $24.5m</strong>
+ </summary>
+ <p>
+ Washington is bracing for a government shutdown as federal funding expires at midnight after President Trump and congressional leaders ended a White House meeting without an agreement [1][2][3][4][5][6]. Republicans are pressing a clean stopgap bill to fund agencies through November 21, while Democrats insist on extending health-care subsidies and reversing recent Medicaid cuts in any deal [7][8][9]. A lapse would quickly disrupt services and likely delay key economic reports on jobs and inflation, adding uncertainty for households and markets [10][11][12][13][14].
+ </p>
+ </details>
+ </article>
- <form id="message-form">
- <fieldset role="group">
- <input id="message" type="text" placeholder="Type a message..." autocomplete="off" />
- <button type="submit">
- <svg width="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M568.4 37.7C578.2 34.2 589 36.7 596.4 44C603.8 51.3 606.2 62.2 602.7 72L424.7 568.9C419.7 582.8 406.6 592 391.9 592C377.7 592 364.9 583.4 359.6 570.3L295.4 412.3C290.9 401.3 292.9 388.7 300.6 379.7L395.1 267.3C400.2 261.2 399.8 252.3 394.2 246.7C388.6 241.1 379.6 240.7 373.6 245.8L261.2 340.1C252.1 347.7 239.6 349.7 228.6 345.3L70.1 280.8C57 275.5 48.4 262.7 48.4 248.5C48.4 233.8 57.6 220.7 71.5 215.7L568.4 37.7z"/></svg>
- </button>
- </fieldset>
- </form>
- </article>
+ <article>
+ <header><small><a href="">Espionage</a></small></header>
+ <details>
+ <summary>
+ <strong>German court jails AfD aide for China spying</strong>
+ </summary>
+ <p>
+ Washington is bracing for a government shutdown as federal funding expires at midnight after President Trump and congressional leaders ended a White House meeting without an agreement [1][2][3][4][5][6]. Republicans are pressing a clean stopgap bill to fund agencies through November 21, while Democrats insist on extending health-care subsidies and reversing recent Medicaid cuts in any deal [7][8][9]. A lapse would quickly disrupt services and likely delay key economic reports on jobs and inflation, adding uncertainty for households and markets [10][11][12][13][14].
+ </p>
+ </details>
+ </article>
+
+ <article>
+ <header><small><a href="">Migration</a></small></header>
+ <details>
+ <summary>
+ <strong>US deports 120 Iranians after deal</strong>
+ </summary>
+ <p>
+ Washington is bracing for a government shutdown as federal funding expires at midnight after President Trump and congressional leaders ended a White House meeting without an agreement [1][2][3][4][5][6]. Republicans are pressing a clean stopgap bill to fund agencies through November 21, while Democrats insist on extending health-care subsidies and reversing recent Medicaid cuts in any deal [7][8][9]. A lapse would quickly disrupt services and likely delay key economic reports on jobs and inflation, adding uncertainty for households and markets [10][11][12][13][14].
+ </p>
+ </details>
+ </article>
+ </p>
+ <button>Mark all as read</button>
+ <!-- </article> -->
+ <footer>
+ <nav>
+ <ul></ul>
+ <ul>
+ <li><a href=""><svg height="24pt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M237.9 461.4C237.9 463.4 235.6 465 232.7 465C229.4 465.3 227.1 463.7 227.1 461.4C227.1 459.4 229.4 457.8 232.3 457.8C235.3 457.5 237.9 459.1 237.9 461.4zM206.8 456.9C206.1 458.9 208.1 461.2 211.1 461.8C213.7 462.8 216.7 461.8 217.3 459.8C217.9 457.8 216 455.5 213 454.6C210.4 453.9 207.5 454.9 206.8 456.9zM251 455.2C248.1 455.9 246.1 457.8 246.4 460.1C246.7 462.1 249.3 463.4 252.3 462.7C255.2 462 257.2 460.1 256.9 458.1C256.6 456.2 253.9 454.9 251 455.2zM316.8 72C178.1 72 72 177.3 72 316C72 426.9 141.8 521.8 241.5 555.2C254.3 557.5 258.8 549.6 258.8 543.1C258.8 536.9 258.5 502.7 258.5 481.7C258.5 481.7 188.5 496.7 173.8 451.9C173.8 451.9 162.4 422.8 146 415.3C146 415.3 123.1 399.6 147.6 399.9C147.6 399.9 172.5 401.9 186.2 425.7C208.1 464.3 244.8 453.2 259.1 446.6C261.4 430.6 267.9 419.5 275.1 412.9C219.2 406.7 162.8 398.6 162.8 302.4C162.8 274.9 170.4 261.1 186.4 243.5C183.8 237 175.3 210.2 189 175.6C209.9 169.1 258 202.6 258 202.6C278 197 299.5 194.1 320.8 194.1C342.1 194.1 363.6 197 383.6 202.6C383.6 202.6 431.7 169 452.6 175.6C466.3 210.3 457.8 237 455.2 243.5C471.2 261.2 481 275 481 302.4C481 398.9 422.1 406.6 366.2 412.9C375.4 420.8 383.2 435.8 383.2 459.3C383.2 493 382.9 534.7 382.9 542.9C382.9 549.4 387.5 557.3 400.2 555C500.2 521.8 568 426.9 568 316C568 177.3 455.5 72 316.8 72zM169.2 416.9C167.9 417.9 168.2 420.2 169.9 422.1C171.5 423.7 173.8 424.4 175.1 423.1C176.4 422.1 176.1 419.8 174.4 417.9C172.8 416.3 170.5 415.6 169.2 416.9zM158.4 408.8C157.7 410.1 158.7 411.7 160.7 412.7C162.3 413.7 164.3 413.4 165 412C165.7 410.7 164.7 409.1 162.7 408.1C160.7 407.5 159.1 407.8 158.4 408.8zM190.8 444.4C189.2 445.7 189.8 448.7 192.1 450.6C194.4 452.9 197.3 453.2 198.6 451.6C199.9 450.3 199.3 447.3 197.3 445.4C195.1 443.1 192.1 442.8 190.8 444.4zM179.4 429.7C177.8 430.7 177.8 433.3 179.4 435.6C181 437.9 183.7 438.9 185 437.9C186.6 436.6 186.6 434 185 431.7C183.6 429.4 181 428.4 179.4 429.7z"/></svg> Contribute</a></li>
+ <li><a href=""><svg height="20pt" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" /> </svg> About Kagi News</a></li>
+
+ <li><a href=""><svg height="20pt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"> <path fill-rule="evenodd" d="M3.75 4.5a.75.75 0 0 1 .75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 0 1-.75-.75V4.5Zm0 6.75a.75.75 0 0 1 .75-.75h.75a8.25 8.25 0 0 1 8.25 8.25v.75a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75v-.75a6 6 0 0 0-6-6H4.5a.75.75 0 0 1-.75-.75v-.75Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" clip-rule="evenodd" /> </svg> RSS Feed</a></li>
+ </ul>
+ <ul></ul>
+ </nav>
+ </footer>
</div>
diff --git a/src/simple_web_app/templates/search.html b/src/simple_web_app/templates/search.html
@@ -0,0 +1,37 @@
+<div id="modal" class="modal-is-open modal-is-opening" _="on closeModal remove .modal-is-opening then wait 10 then add .modal-is-closing then wait for animationend then remove me">
+<dialog _="on click if target is me then trigger closeModal" open>
+ <article>
+ <h3>
+ Search News
+ <span class="htmx-indicator">
+ <img src="/img/bars.svg"/> Searching...
+ </span>
+ </h3>
+ <input class="form-control" type="search"
+ name="search" placeholder="Begin typing to search in news"
+ hx-post="/search"
+ hx-trigger="input changed delay:500ms, keyup[key=='Enter'], load"
+ hx-target="#search-results"
+ hx-indicator=".htmx-indicator">
+
+ <table class="table">
+ <thead>
+ <tr>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Email</th>
+ </tr>
+ </thead>
+ <tbody id="search-results">
+ </tbody>
+ </table>
+
+ <footer>
+ <button _="on click trigger closeModal" class="secondary">
+ Cancel
+ </button>
+ <button>Confirm</button>
+ </footer>
+ </article>
+</dialog>
+</div>
diff --git a/src/simple_web_app/templates/search_results.html b/src/simple_web_app/templates/search_results.html
@@ -0,0 +1,4 @@
+{% for person in people %}
+<tr><td>{{ person.firstname }}</td><td>{{ person.lastname }}</td><td>{{ person.email }}</td></tr>
+{% endfor %}
+
diff --git a/src/simple_web_app/templates/settings.html b/src/simple_web_app/templates/settings.html
@@ -0,0 +1,47 @@
+<div id="modal" class="modal-is-open modal-is-opening" _="on closeModal remove .modal-is-opening then wait 10 then add .modal-is-closing then wait for animationend then remove me">
+<dialog _="on click if target is me then trigger closeModal" open>
+ <article>
+ <nav>
+ <ul>
+ <li><small>General</small></li>
+ <li><small>Categories</small></li>
+ <li><small>Sections</small></li>
+ <li><small>Content Filter</small></li>
+ <li><small>Syncing</small></li>
+ <li><small>Experimental</small></li>
+ </ul>
+ </nav>
+ <p>
+ <h4>Appearance</h4>
+
+ <details class="dropdown">
+ <summary>Theme</summary>
+ <ul>
+ <li><a>System</a></li>
+ <li><a>Light</a></li>
+ <li><a>Dark</a></li>
+ </ul>
+ </details>
+
+ <fieldset>
+ <legend>Font Size</legend>
+ <details class="dropdown">
+ <summary>Dropdown</summary>
+ <ul>
+ <li><a href="#">Normal</a></li>
+ <li><a href="#">Small</a></li>
+ <li><a href="#">Large</a></li>
+ </ul>
+ </details>
+ </fieldset>
+
+ </p>
+ <footer>
+ <button _="on click trigger closeModal" class="secondary">
+ Cancel
+ </button>
+ <button>Confirm</button>
+ </footer>
+ </article>
+</dialog>
+</div>
