santhoshj/clawfort
1
0
Fork 0
Code Issues 64 Pull Requests Actions Packages Projects Releases Wiki Activity

bulk commit changes!

Browse Source
This commit is contained in:
Santhosh Janardhanan
2026-02-13 02:32:06 -05:00
parent c8f98c54c9
commit bf4a40f533
152 changed files with 2210 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/index.html
View File

@@ -126,11 +126,28 @@
}
.theme-menu-item:hover { background: rgba(92, 124, 250, 0.15); }
.hero-overlay {
background: linear-gradient(to top, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.45), transparent);
background: linear-gradient(to top, rgba(2, 6, 23, 0.94), rgba(15, 23, 42, 0.62), rgba(15, 23, 42, 0.22), transparent);
}
.hero-title { color: #e2e8f0; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55); }
.hero-summary { color: #cbd5e1; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); }
.hero-meta { color: #cbd5e1; }
.hero-meta { color: #e2e8f0; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); }
.hero-latest-pill {
background: rgba(59, 130, 246, 0.2);
color: #dbeafe;
border: 1px solid rgba(147, 197, 253, 0.45);
}
.hero-time-pill {
background: rgba(15, 23, 42, 0.55);
color: #e2e8f0;
border: 1px solid rgba(148, 163, 184, 0.35);
padding: 3px 8px;
border-radius: 9999px;
}
.tldr-shimmer {
height: 12px;
width: 85%;
border-radius: 9999px;
}
.news-card-title { color: var(--cf-text-strong); }
.news-card-summary { color: var(--cf-text-muted); }
.news-card-meta { color: var(--cf-text-muted); }
@@ -157,7 +174,17 @@
color: #f8fafc;
}
html[data-theme='light'] .hero-overlay {
background: linear-gradient(to top, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.35), transparent);
background: linear-gradient(to top, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.58), rgba(30, 41, 59, 0.2), transparent);
}
html[data-theme='light'] .hero-latest-pill {
background: rgba(37, 99, 235, 0.24);
border-color: rgba(37, 99, 235, 0.55);
color: #eff6ff;
}
html[data-theme='light'] .hero-time-pill {
background: rgba(15, 23, 42, 0.52);
border-color: rgba(226, 232, 240, 0.35);
color: #f8fafc;
}
html[data-theme='light'] .news-card-btn { color: #1e3a8a; }
html[data-theme='light'] .modal-cta {
@@ -257,15 +284,15 @@
<div class="absolute inset-0 hero-overlay"></div>
<div class="absolute bottom-0 left-0 right-0 p-6 sm:p-10">
<div class="flex items-center gap-3 mb-3">
<span class="px-2.5 py-1 bg-cf-500/20 text-cf-400 text-xs font-semibold rounded-full border border-cf-500/30">LATEST</span>
<span class="text-gray-400 text-sm" x-text="timeAgo(item.published_at)"></span>
<span class="px-2.5 py-1 text-xs font-semibold rounded-full hero-latest-pill">LATEST</span>
<span class="text-sm hero-time-pill" x-text="timeAgo(item.published_at)"></span>
</div>
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold leading-tight mb-3 max-w-4xl hero-title" x-text="item.headline"></h1>
<p class="text-base sm:text-lg max-w-3xl line-clamp-3 mb-4 hero-summary" x-text="item.summary"></p>
<div class="flex flex-wrap items-center gap-4 text-sm hero-meta">
<button class="px-3 py-1.5 rounded-md bg-cf-500/20 text-cf-300 hover:bg-cf-500/30 transition-colors"
@click="trackEvent('hero-cta-click', { article_id: item.id }); window.open(item.source_url || '#', '_blank')">
Read Full Article
@click="trackEvent('hero-cta-click', { article_id: item.id }); window.dispatchEvent(new CustomEvent('open-summary', { detail: item }))">
Read TL;DR
</button>
<a :href="item.source_url" target="_blank" rel="noopener"
class="hover:text-cf-400 transition-colors"
@@ -350,7 +377,7 @@
<div x-show="modalOpen" x-cloak class="fixed inset-0 z-50 flex items-center justify-center" @keydown.escape.window="closeSummary()">
<div class="absolute inset-0 bg-black/70" @click="closeSummary()"></div>
<div role="dialog" aria-modal="true" aria-label="Article summary" class="relative w-full max-w-2xl mx-4 max-h-[90vh] overflow-auto rounded-xl border border-white/10 bg-[#0f172a]">
<div role="dialog" aria-modal="true" aria-label="Article summary" class="relative w-full sm:w-[92vw] lg:w-[70vw] xl:w-[60vw] 2xl:w-[50vw] max-w-[1200px] mx-4 max-h-[96vh] overflow-auto rounded-xl border border-white/10 bg-[#0f172a]">
<div class="p-6 space-y-5 cf-modal" x-show="modalItem">
<div class="flex justify-end">
<button @click="closeSummary()" aria-label="Close summary modal" class="transition-colors modal-close-btn">Close</button>
@@ -370,7 +397,11 @@
<div>
<h3 class="text-sm uppercase tracking-wide font-semibold mb-2 modal-section-title">TL;DR</h3>
<ul class="list-disc pl-5 space-y-1 text-sm modal-body-text" x-show="modalItem?.tldr_points && modalItem.tldr_points.length > 0">
<div x-show="modalTldrLoading" class="space-y-2" aria-hidden="true">
<div class="skeleton tldr-shimmer"></div>
<div class="skeleton tldr-shimmer w-[70%]"></div>
</div>
<ul class="list-disc pl-5 space-y-1 text-sm modal-body-text" x-show="!modalTldrLoading && modalItem?.tldr_points && modalItem.tldr_points.length > 0">
<template x-for="(point, idx) in (modalItem?.tldr_points || [])" :key="idx">
<li x-text="point"></li>
</template>
@@ -797,6 +828,7 @@ function newsFeed() {
modalOpen: false,
modalItem: null,
modalImageLoading: true,
modalTldrLoading: true,
imageLoaded: {},
async init() {
@@ -815,6 +847,11 @@ function newsFeed() {
await this.loadMore();
this.initialLoading = false;
});
window.addEventListener('open-summary', (event) => {
if (!event?.detail) return;
this.openSummary(event.detail);
});
},
waitForHero() {
@@ -886,6 +923,10 @@ function newsFeed() {
this.modalItem = item;
this.modalOpen = true;
this.modalImageLoading = true;
this.modalTldrLoading = true;
setTimeout(() => {
if (this.modalOpen) this.modalTldrLoading = false;
}, 250);
trackEvent('summary-modal-open', { article_id: item.id });
},
@@ -893,6 +934,7 @@ function newsFeed() {
const id = this.modalItem ? this.modalItem.id : null;
this.modalOpen = false;
this.modalItem = null;
this.modalTldrLoading = true;
trackEvent('summary-modal-close', { article_id: id });
},