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

p08-seo-tweaks

Browse Source
This commit is contained in:
Santhosh Janardhanan
2026-02-13 00:49:22 -05:00
parent a1da041f14
commit 88a5540b7d
63 changed files with 2228 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/attribution.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Attribution and ownership disclaimer for ClawFort AI News content.">
<meta name="robots" content="index,follow">
<meta property="og:type" content="article">
<meta property="og:title" content="Attribution and Ownership Disclaimer - ClawFort">
<meta property="og:description" content="Understand content attribution and ownership boundaries for ClawFort AI-generated summaries.">
<meta property="og:url" content="/attribution">
<meta property="og:image" content="/static/images/placeholder.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Attribution and Ownership Disclaimer - ClawFort">
<meta name="twitter:description" content="Understand content attribution and ownership boundaries for ClawFort AI-generated summaries.">
<meta name="twitter:image" content="/static/images/placeholder.png">
<link rel="canonical" href="/attribution">
<title>Attribution and Ownership Disclaimer - ClawFort</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-950 text-slate-100 font-[Inter] min-h-screen">
<main class="max-w-3xl mx-auto px-4 py-12">
<a href="/" class="text-blue-400 hover:text-blue-300">&larr; Back to ClawFort</a>
<h1 class="text-3xl sm:text-4xl font-extrabold mt-6 mb-4">Attribution and Ownership Disclaimer</h1>
<div class="space-y-4 text-slate-300 leading-relaxed">
<p>
None of the content presented on this site is created by the owner as an individual person.
</p>
<p>
The content is AI-generated and automatically assembled from external sources and generated summaries.
</p>
<p>
The owner does not claim personal authorship, editorial ownership, or direct responsibility for
generated statements beyond operating the site interface.
</p>
</div>
</main>
<footer class="border-t border-white/10 py-6 text-center text-sm text-slate-400">
<a href="/" class="hover:text-white">Home</a>
<span class="mx-2">|</span>
<a href="/terms" class="hover:text-white">Terms of Use</a>
</footer>
</body>
</html>

655
frontend/index.html
View File

@@ -3,6 +3,23 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ClawFort brings you the latest AI news with hourly updates, concise summaries, and source links.">
<meta name="robots" content="index,follow,max-image-preview:large">
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta name="theme-color" content="#0f172a">
<meta property="og:type" content="website">
<meta property="og:site_name" content="ClawFort">
<meta property="og:title" content="ClawFort - AI News">
<meta property="og:description" content="The latest AI news, refreshed hourly with concise summaries and source attribution.">
<meta property="og:url" content="/" id="meta-og-url">
<meta property="og:image" content="/static/images/placeholder.png" id="meta-og-image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ClawFort - AI News">
<meta name="twitter:description" content="The latest AI news, refreshed hourly with concise summaries and source attribution.">
<meta name="twitter:image" content="/static/images/placeholder.png" id="meta-twitter-image">
<link rel="canonical" href="/" id="canonical-link">
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<title>ClawFort — AI News</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -25,7 +42,9 @@
}
</script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
<script id="structured-data-graph" type="application/ld+json">{"@context":"https://schema.org","@graph":[]}</script>
<style>
html { scroll-behavior: smooth; }
[x-cloak] { display: none !important; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.6s ease-out forwards; }
@@ -33,11 +52,148 @@
.skeleton { background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:root {
--cf-bg: #0f172a;
--cf-text: #f1f5f9;
--cf-text-strong: #e2e8f0;
--cf-text-muted: #94a3b8;
--cf-header-bg: rgba(15, 23, 42, 0.85);
--cf-card-bg: #1e293b;
--cf-modal-bg: #0f172a;
--cf-select-bg: #1e293b;
--cf-select-text: #e2e8f0;
--cf-select-border: rgba(148, 163, 184, 0.3);
}
html[data-theme='light'] {
--cf-bg: #f8fafc;
--cf-text: #0f172a;
--cf-text-strong: #0f172a;
--cf-text-muted: #475569;
--cf-header-bg: rgba(248, 250, 252, 0.92);
--cf-card-bg: #ffffff;
--cf-modal-bg: #ffffff;
--cf-select-bg: #ffffff;
--cf-select-text: #0f172a;
--cf-select-border: rgba(15, 23, 42, 0.2);
}
html[data-theme='dark'] {
--cf-bg: #0f172a;
--cf-text: #f1f5f9;
--cf-text-strong: #e2e8f0;
--cf-text-muted: #94a3b8;
--cf-header-bg: rgba(15, 23, 42, 0.85);
--cf-card-bg: #1e293b;
--cf-modal-bg: #0f172a;
--cf-select-bg: #1e293b;
--cf-select-text: #e2e8f0;
--cf-select-border: rgba(148, 163, 184, 0.3);
}
html[data-theme='contrast'] {
--cf-bg: #000000;
--cf-text: #ffffff;
--cf-text-strong: #ffffff;
--cf-text-muted: #f8fafc;
--cf-header-bg: rgba(0, 0, 0, 0.96);
--cf-card-bg: #000000;
--cf-modal-bg: #000000;
--cf-select-bg: #000000;
--cf-select-text: #ffffff;
--cf-select-border: rgba(255, 255, 255, 0.55);
}
.cf-body { background: var(--cf-bg); color: var(--cf-text); }
.cf-header { background: var(--cf-header-bg); }
.cf-card { background: var(--cf-card-bg) !important; }
.cf-modal { background: var(--cf-modal-bg); }
.cf-select {
background: var(--cf-select-bg);
color: var(--cf-select-text);
border: 1px solid var(--cf-select-border);
}
.theme-menu-panel {
background: var(--cf-card-bg);
border-color: var(--cf-select-border);
}
.theme-menu-item {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
border-radius: 6px;
padding: 6px 8px;
color: var(--cf-text-strong);
text-align: left;
font-size: 13px;
}
.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);
}
.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; }
.news-card-title { color: var(--cf-text-strong); }
.news-card-summary { color: var(--cf-text-muted); }
.news-card-meta { color: var(--cf-text-muted); }
.news-card-btn { color: #dbe4ff; }
.modal-article-title { color: var(--cf-text-strong); }
.modal-section-title { color: #5c7cfa; }
.modal-body-text { color: var(--cf-text-strong); }
.modal-citation { color: var(--cf-text-muted); }
.modal-powered { color: var(--cf-text-muted); }
.modal-close-btn { color: var(--cf-text-muted); }
.modal-close-btn:hover { color: var(--cf-text-strong); }
.modal-cta {
background: rgba(92, 124, 250, 0.18);
color: #dbe4ff;
}
.modal-cta:hover { background: rgba(92, 124, 250, 0.28); }
html[data-theme='light'] .news-card {
border-color: rgba(15, 23, 42, 0.14) !important;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}
html[data-theme='light'] .hero-title,
html[data-theme='light'] .hero-summary,
html[data-theme='light'] .hero-meta {
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);
}
html[data-theme='light'] .news-card-btn { color: #1e3a8a; }
html[data-theme='light'] .modal-cta {
color: #1e3a8a;
background: rgba(59, 91, 219, 0.14);
}
html[data-theme='light'] .modal-cta:hover { background: rgba(59, 91, 219, 0.22); }
html[data-theme='light'] .text-gray-500,
html[data-theme='light'] .text-gray-400 { color: #475569 !important; }
.theme-btn {
width: 28px;
height: 28px;
border-radius: 6px;
border: 1px solid var(--cf-select-border);
background: var(--cf-select-bg);
color: var(--cf-select-text);
font-size: 14px;
line-height: 1;
}
.theme-btn[data-active='true'] {
border-color: #5c7cfa;
box-shadow: 0 0 0 1px #5c7cfa inset;
}
*:focus-visible {
outline: 2px solid #5c7cfa;
outline-offset: 2px;
}
@media (max-width: 640px) {
.theme-btn { width: 26px; height: 26px; }
}
</style>
</head>
<body class="bg-cf-950 text-gray-100 font-sans min-h-screen">
<body class="font-sans min-h-screen overflow-x-hidden cf-body">
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 bg-cf-500 text-white px-3 py-2 rounded">Skip to content</a>
<header class="sticky top-0 z-50 bg-cf-950/80 backdrop-blur-lg border-b border-white/5">
<header class="sticky top-0 z-50 backdrop-blur-lg border-b border-white/5 cf-header">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
<a href="/" class="flex items-center gap-2.5 group">
<svg class="w-8 h-8 text-cf-500 group-hover:text-cf-400 transition-colors" viewBox="0 0 32 32" fill="none">
@@ -49,18 +205,27 @@
<div class="flex items-center gap-3">
<label for="language-select" class="text-xs text-gray-400 hidden sm:block">Language</label>
<select id="language-select"
class="bg-[#1e293b] border border-white/10 text-gray-200 text-xs rounded-md px-2 py-1 focus:outline-none focus:ring-2 focus:ring-cf-500"
class="cf-select text-xs rounded-md px-2 py-1 focus:outline-none focus:ring-2 focus:ring-cf-500"
onchange="setPreferredLanguage(this.value)">
<option value="en">English</option>
<option value="ta">Tamil</option>
<option value="ml">Malayalam</option>
</select>
<div class="relative" id="theme-menu-root">
<button id="theme-menu-button" type="button" class="theme-btn" aria-haspopup="menu" aria-expanded="false" aria-label="Open theme menu" title="Theme menu" onclick="toggleThemeMenu()">&#9788;</button>
<div id="theme-menu" class="hidden absolute right-0 mt-2 w-44 rounded-lg border theme-menu-panel p-2 z-50" role="menu" aria-label="Theme options">
<button type="button" data-theme-option="system" onclick="setThemePreference('system'); closeThemeMenu();" class="theme-menu-item" role="menuitem" aria-label="Use system theme">&#128421; <span>System</span></button>
<button type="button" data-theme-option="light" onclick="setThemePreference('light'); closeThemeMenu();" class="theme-menu-item" role="menuitem" aria-label="Use light theme">&#9728; <span>Light</span></button>
<button type="button" data-theme-option="dark" onclick="setThemePreference('dark'); closeThemeMenu();" class="theme-menu-item" role="menuitem" aria-label="Use dark theme">&#9790; <span>Dark</span></button>
<button type="button" data-theme-option="contrast" onclick="setThemePreference('contrast'); closeThemeMenu();" class="theme-menu-item" role="menuitem" aria-label="Use high contrast theme">&#9681; <span>High Contrast</span></button>
</div>
</div>
<span class="text-xs text-gray-500 hidden lg:block">AI News — Updated Hourly</span>
</div>
</div>
</header>
<main>
<main id="main-content">
<section x-data="heroBlock()" x-init="init()" class="relative">
<template x-if="loading">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
@@ -73,21 +238,35 @@
</div>
</template>
<template x-if="!loading && item">
<div class="fade-up">
<article class="fade-up" itemscope itemtype="https://schema.org/NewsArticle" :id="'news-' + item.id">
<meta itemprop="headline" :content="item.headline">
<meta itemprop="description" :content="item.summary">
<meta itemprop="datePublished" :content="item.published_at">
<meta itemprop="dateModified" :content="item.created_at || item.published_at">
<meta itemprop="image" :content="toAbsoluteUrl(preferredImage(item))">
<meta itemprop="url" :content="articlePermalink(item)">
<meta itemprop="inLanguage" :content="item.language || 'en'">
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
<div class="relative rounded-2xl overflow-hidden group">
<img :src="item.image_url" :alt="item.headline"
<div x-show="heroImageLoading" class="absolute inset-0 skeleton"></div>
<img :src="preferredImage(item)" :alt="item.headline"
width="1200" height="480" decoding="async" fetchpriority="high"
class="w-full h-[300px] sm:h-[400px] lg:h-[480px] object-cover transition-transform duration-700 group-hover:scale-105"
@error="$el.src='/static/images/placeholder.png'">
<div class="absolute inset-0 bg-gradient-to-t from-cf-950 via-cf-950/40 to-transparent"></div>
@load="heroImageLoading = false"
@error="$el.src='/static/images/placeholder.png'; heroImageLoading = false">
<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>
</div>
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold leading-tight mb-3 max-w-4xl" x-text="item.headline"></h1>
<p class="text-gray-300 text-base sm:text-lg max-w-3xl line-clamp-3 mb-4" x-text="item.summary"></p>
<div class="flex flex-wrap items-center gap-4 text-sm text-gray-400">
<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
</button>
<a :href="item.source_url" target="_blank" rel="noopener"
class="hover:text-cf-400 transition-colors"
@click="trackEvent('hero-source-click')"
@@ -99,7 +278,7 @@
</div>
</div>
</div>
</div>
</article>
</template>
<template x-if="!loading && !item">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
@@ -132,18 +311,27 @@
<div x-show="!initialLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<template x-for="item in items" :key="item.id">
<article class="bg-[#1e293b] rounded-xl overflow-hidden border border-white/5 hover:border-cf-500/30 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-cf-500/5 group cursor-pointer"
@click="window.open(item.source_url || '#', '_blank'); trackEvent('card-click')">
<article class="rounded-xl overflow-hidden border border-white/5 hover:border-cf-500/30 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-cf-500/5 group cf-card news-card" itemscope itemtype="https://schema.org/NewsArticle" :id="'news-' + item.id">
<meta itemprop="headline" :content="item.headline">
<meta itemprop="description" :content="item.summary">
<meta itemprop="datePublished" :content="item.published_at">
<meta itemprop="dateModified" :content="item.created_at || item.published_at">
<meta itemprop="image" :content="toAbsoluteUrl(preferredImage(item))">
<meta itemprop="url" :content="articlePermalink(item)">
<meta itemprop="inLanguage" :content="item.language || 'en'">
<div class="relative h-48 overflow-hidden">
<img :src="item.image_url" :alt="item.headline" loading="lazy"
<div x-show="isImageLoading(item.id)" class="absolute inset-0 skeleton"></div>
<img :src="preferredImage(item)" :alt="item.headline" loading="lazy"
width="640" height="384" decoding="async" fetchpriority="low"
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
@error="$el.src='/static/images/placeholder.png'">
@load="markImageLoaded(item.id)"
@error="handleImageError(item.id, $el)">
<div class="absolute inset-0 bg-gradient-to-t from-[#1e293b] to-transparent opacity-60"></div>
</div>
<div class="p-5">
<h3 class="font-bold text-base mb-2 line-clamp-2 group-hover:text-cf-400 transition-colors" x-text="item.headline"></h3>
<p class="text-gray-400 text-sm line-clamp-2 mb-3" x-text="item.summary"></p>
<div class="flex items-center justify-between text-xs text-gray-500">
<h3 class="font-bold text-base mb-2 line-clamp-2 group-hover:text-cf-400 transition-colors news-card-title" x-text="item.headline"></h3>
<p class="text-sm line-clamp-2 mb-3 news-card-summary" x-text="item.summary"></p>
<div class="flex items-center justify-between text-xs mb-3 news-card-meta">
<a :href="item.source_url" target="_blank" rel="noopener"
class="hover:text-cf-400 transition-colors truncate max-w-[60%]"
@click.stop="trackEvent('source-link-click')"
@@ -151,11 +339,64 @@
x-text="extractDomain(item.source_url)"></a>
<span x-text="timeAgo(item.published_at)"></span>
</div>
<button @click="openSummary(item)"
class="w-full text-center text-xs font-semibold rounded-md px-3 py-2 bg-cf-500/15 hover:bg-cf-500/25 transition-colors news-card-btn">
Read TL;DR
</button>
</div>
</article>
</template>
</div>
<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 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>
</div>
<div class="relative">
<div x-show="modalImageLoading" class="absolute inset-0 skeleton rounded-lg"></div>
<img :src="modalItem?.summary_image_url || modalItem?.image_url || '/static/images/placeholder.png'"
:alt="modalItem?.headline || 'Summary image'"
loading="lazy" decoding="async" width="1024" height="576"
class="w-full h-56 sm:h-72 object-cover rounded-lg"
@load="modalImageLoading = false"
@error="$el.src='/static/images/placeholder.png'; modalImageLoading = false">
</div>
<h2 class="text-xl sm:text-2xl font-bold leading-tight modal-article-title" x-text="modalItem?.headline || ''"></h2>
<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">
<template x-for="(point, idx) in (modalItem?.tldr_points || [])" :key="idx">
<li x-text="point"></li>
</template>
</ul>
</div>
<div>
<h3 class="text-sm uppercase tracking-wide font-semibold mb-2 modal-section-title">Summary</h3>
<p class="text-sm leading-relaxed modal-body-text" x-text="modalItem?.summary_body || modalItem?.summary || ''"></p>
</div>
<div>
<h3 class="text-sm uppercase tracking-wide font-semibold mb-2 modal-section-title">Source and Citation</h3>
<p class="text-xs mb-3 modal-citation" x-text="modalItem?.source_citation || 'Original source' "></p>
<a :href="modalItem?.source_url || '#'" target="_blank" rel="noopener"
class="inline-block px-3 py-2 rounded-md text-sm font-semibold modal-cta"
@click="trackSummarySource(modalItem)">
Read Full Article
</a>
</div>
<p class="text-xs modal-powered">Powered by Perplexity</p>
</div>
</div>
</div>
<div x-show="loadingMore" class="flex justify-center py-8">
<div class="w-8 h-8 border-2 border-cf-500/30 border-t-cf-500 rounded-full animate-spin"></div>
</div>
@@ -176,10 +417,25 @@
<footer class="border-t border-white/5 py-8 text-center text-sm text-gray-500">
<div class="max-w-7xl mx-auto px-4 space-y-2">
<p>Powered by <a href="https://www.perplexity.ai" target="_blank" rel="noopener" class="text-cf-400 hover:text-cf-300 transition-colors">Perplexity</a></p>
<p class="space-x-3">
<a href="/terms" class="underline hover:text-gray-300">Terms of Use</a>
<a href="/attribution" class="underline hover:text-gray-300">Attribution</a>
</p>
<p>&copy; <span x-data x-text="new Date().getFullYear()"></span> ClawFort. All rights reserved.</p>
</div>
</footer>
<div id="cookie-consent-banner" class="hidden fixed bottom-4 left-1/2 -translate-x-1/2 w-[95%] max-w-3xl z-50 rounded-lg border border-white/15 bg-slate-900/95 backdrop-blur p-4 transition-opacity duration-700 opacity-100">
<p class="text-sm text-slate-200 mb-3">
We use analytics cookies to improve the product experience. By choosing "Accept", you consent to analytics tracking.
</p>
<div class="flex justify-end">
<button id="cookie-consent-accept" type="button" class="px-4 py-2 rounded bg-cf-500 hover:bg-cf-600 text-white font-semibold" aria-label="Accept analytics cookies">
Accept
</button>
</div>
</div>
<script>
function extractDomain(url) {
if (!url) return '';
@@ -200,6 +456,143 @@ function timeAgo(dateStr) {
return 'just now';
}
function preferredImage(item) {
const primary = item?.image_url;
const summary = item?.summary_image_url;
if (primary && primary !== '/static/images/placeholder.png') return primary;
if (summary) return summary;
return '/static/images/placeholder.png';
}
function toAbsoluteUrl(url) {
if (!url) return `${window.location.origin}/`;
try {
return new URL(url, window.location.origin).toString();
} catch {
return `${window.location.origin}/`;
}
}
function articlePermalink(item) {
if (!item?.id) return toAbsoluteUrl('/');
return toAbsoluteUrl(`/#news-${item.id}`);
}
function setMetaContent(selector, content, attribute = 'content') {
if (!content) return;
const node = document.querySelector(selector);
if (node) node.setAttribute(attribute, content);
}
function syncSeoMeta(item) {
const canonical = toAbsoluteUrl(window.location.pathname || '/');
setMetaContent('#canonical-link', canonical, 'href');
setMetaContent('#meta-og-url', canonical);
if (!item) return;
const title = `${item.headline} | ClawFort`;
const description = item.summary || 'Latest AI news updates from ClawFort.';
const image = toAbsoluteUrl(preferredImage(item));
document.title = title;
setMetaContent('meta[name="description"]', description);
setMetaContent('meta[property="og:title"]', title);
setMetaContent('meta[property="og:description"]', description);
setMetaContent('#meta-og-image', image);
setMetaContent('meta[name="twitter:title"]', title);
setMetaContent('meta[name="twitter:description"]', description);
setMetaContent('#meta-twitter-image', image);
}
function buildNewsArticleSchema(item) {
if (!item?.headline) return null;
return {
'@type': 'NewsArticle',
headline: item.headline,
description: item.summary || '',
datePublished: item.published_at,
dateModified: item.created_at || item.published_at,
inLanguage: item.language || window._selectedLanguage || 'en',
url: articlePermalink(item),
mainEntityOfPage: articlePermalink(item),
image: [toAbsoluteUrl(preferredImage(item))],
author: { '@type': 'Organization', name: 'ClawFort AI Desk' },
publisher: {
'@type': 'Organization',
name: 'ClawFort',
logo: {
'@type': 'ImageObject',
url: toAbsoluteUrl('/static/images/placeholder.png')
}
},
articleSection: 'AI News',
isBasedOn: item.source_url ? toAbsoluteUrl(item.source_url) : undefined,
};
}
function syncStructuredData() {
const schemaNode = document.getElementById('structured-data-graph');
if (!schemaNode) return;
const heroItem = window.__heroNewsItem || null;
const feedItems = Array.isArray(window.__feedNewsItems) ? window.__feedNewsItems : [];
const articleSchemas = [];
if (heroItem) {
const heroSchema = buildNewsArticleSchema(heroItem);
if (heroSchema) articleSchemas.push(heroSchema);
}
for (const item of feedItems) {
const schema = buildNewsArticleSchema(item);
if (schema) articleSchemas.push(schema);
}
const deduped = [];
const seen = new Set();
for (const schema of articleSchemas) {
const key = schema.url || schema.headline;
if (!seen.has(key)) {
seen.add(key);
deduped.push(schema);
}
}
const payload = {
'@context': 'https://schema.org',
'@graph': [
{
'@type': 'Newspaper',
name: 'ClawFort',
url: toAbsoluteUrl('/'),
inLanguage: window._selectedLanguage || 'en',
description: 'ClawFort AI News - hourly AI news updates with source attribution and concise summaries.',
publisher: {
'@type': 'Organization',
name: 'ClawFort',
logo: {
'@type': 'ImageObject',
url: toAbsoluteUrl('/static/images/placeholder.png')
}
}
},
...deduped,
],
};
schemaNode.textContent = JSON.stringify(payload);
}
function toBulletPoints(text) {
if (!text) return [];
const clean = String(text).replace(/\s+/g, ' ').trim();
if (!clean) return [];
const parts = clean.split(/(?<=[.!?])\s+/).map(s => s.trim()).filter(Boolean);
if (parts.length > 1) return parts;
const chunks = clean.split(/[,;:]\s+/).map(s => s.trim()).filter(Boolean);
return chunks.length > 1 ? chunks : [clean];
}
function trackEvent(name, data) {
if (window.umami) window.umami.track(name, data);
}
@@ -213,6 +606,93 @@ function readCookie(name) {
return match ? decodeURIComponent(match[2]) : null;
}
function setCookie(name, value, maxAgeSeconds = 31536000) {
document.cookie = `${name}=${encodeURIComponent(value)}; path=/; max-age=${maxAgeSeconds}; SameSite=Lax`;
}
function safeSetStorage(key, value) {
try {
localStorage.setItem(key, value);
return true;
} catch {
return false;
}
}
function safeGetStorage(key) {
try {
return localStorage.getItem(key);
} catch {
return null;
}
}
function getPreferredTheme() {
const stored = safeGetStorage('clawfort_theme');
if (stored) return stored;
return readCookie('clawfort_theme') || 'system';
}
function getResolvedTheme(themeChoice) {
if (themeChoice === 'system') {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
if (themeChoice === 'contrast') return 'contrast';
return themeChoice;
}
function updateThemeButtons(themeChoice) {
document.querySelectorAll('[data-theme-option]').forEach(btn => {
btn.setAttribute('data-active', String(btn.getAttribute('data-theme-option') === themeChoice));
});
}
function applyTheme(themeChoice) {
const resolved = getResolvedTheme(themeChoice);
document.documentElement.setAttribute('data-theme', resolved);
document.documentElement.setAttribute('data-theme-choice', themeChoice);
updateThemeButtons(themeChoice);
}
function setThemePreference(themeChoice) {
safeSetStorage('clawfort_theme', themeChoice);
setCookie('clawfort_theme', themeChoice);
applyTheme(themeChoice);
}
function toggleThemeMenu() {
const menu = document.getElementById('theme-menu');
const button = document.getElementById('theme-menu-button');
if (!menu || !button) return;
const isHidden = menu.classList.contains('hidden');
if (isHidden) {
menu.classList.remove('hidden');
button.setAttribute('aria-expanded', 'true');
} else {
menu.classList.add('hidden');
button.setAttribute('aria-expanded', 'false');
}
}
function closeThemeMenu() {
const menu = document.getElementById('theme-menu');
const button = document.getElementById('theme-menu-button');
if (!menu || !button) return;
menu.classList.add('hidden');
button.setAttribute('aria-expanded', 'false');
}
function hasCookieConsent() {
const local = safeGetStorage('clawfort_cookie_consent');
if (local) return local === 'accepted';
return readCookie('clawfort_cookie_consent') === 'accepted';
}
function setCookieConsentAccepted() {
safeSetStorage('clawfort_cookie_consent', 'accepted');
setCookie('clawfort_cookie_consent', 'accepted');
}
function normalizeLanguage(language) {
const supported = ['en', 'ta', 'ml'];
if (supported.includes(language)) return language;
@@ -220,7 +700,7 @@ function normalizeLanguage(language) {
}
function getPreferredLanguage() {
const stored = localStorage.getItem('clawfort_language');
const stored = safeGetStorage('clawfort_language');
if (stored) return normalizeLanguage(stored);
const cookieValue = readCookie('clawfort_language');
if (cookieValue) return normalizeLanguage(cookieValue);
@@ -230,22 +710,51 @@ function getPreferredLanguage() {
function setPreferredLanguage(language) {
const normalized = normalizeLanguage(language);
window._selectedLanguage = normalized;
localStorage.setItem('clawfort_language', normalized);
document.cookie = `clawfort_language=${encodeURIComponent(normalized)}; path=/; max-age=31536000; SameSite=Lax`;
safeSetStorage('clawfort_language', normalized);
setCookie('clawfort_language', normalized);
const select = document.getElementById('language-select');
if (select && select.value !== normalized) {
select.value = normalized;
}
trackEvent('language-change', { language: normalized });
syncStructuredData();
window.dispatchEvent(new CustomEvent('language-changed', { detail: { language: normalized } }));
}
window._selectedLanguage = getPreferredLanguage();
window._themeChoice = getPreferredTheme();
window.__heroNewsItem = null;
window.__feedNewsItems = [];
applyTheme(window._themeChoice);
syncSeoMeta(null);
syncStructuredData();
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
const choice = getPreferredTheme();
if (choice === 'system') {
applyTheme('system');
}
});
document.addEventListener('click', (event) => {
const root = document.getElementById('theme-menu-root');
if (!root) return;
if (!root.contains(event.target)) {
closeThemeMenu();
}
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
closeThemeMenu();
}
});
function heroBlock() {
return {
item: null,
loading: true,
heroImageLoading: true,
async init() {
const select = document.getElementById('language-select');
@@ -258,16 +767,21 @@ function heroBlock() {
async loadHero() {
this.loading = true;
this.heroImageLoading = true;
this.item = null;
try {
const params = new URLSearchParams({ language: window._selectedLanguage || 'en' });
const resp = await fetch(`/api/news/latest?${params}`);
if (resp.ok) {
const data = await resp.json();
if (data) this.item = data;
this.item = data || null;
}
} catch (e) { console.error('Hero fetch failed:', e); }
this.loading = false;
window._heroId = this.item?.id;
window.__heroNewsItem = this.item;
syncSeoMeta(this.item);
syncStructuredData();
}
};
}
@@ -280,6 +794,10 @@ function newsFeed() {
initialLoading: true,
loadingMore: false,
observer: null,
modalOpen: false,
modalItem: null,
modalImageLoading: true,
imageLoaded: {},
async init() {
await this.waitForHero();
@@ -291,6 +809,8 @@ function newsFeed() {
this.nextCursor = null;
this.hasMore = true;
this.initialLoading = true;
this.imageLoaded = {};
window.__feedNewsItems = [];
await this.waitForHero();
await this.loadMore();
this.initialLoading = false;
@@ -324,8 +844,15 @@ function newsFeed() {
const data = await resp.json();
this.items = [...this.items, ...data.items];
for (const item of data.items) {
if (this.imageLoaded[item.id] === undefined) {
this.imageLoaded[item.id] = false;
}
}
this.nextCursor = data.next_cursor;
this.hasMore = data.has_more;
window.__feedNewsItems = this.items;
syncStructuredData();
} catch (e) {
console.error('Feed fetch failed:', e);
this.hasMore = false;
@@ -333,6 +860,19 @@ function newsFeed() {
this.loadingMore = false;
},
isImageLoading(id) {
return !this.imageLoaded[id];
},
markImageLoaded(id) {
this.imageLoaded[id] = true;
},
handleImageError(id, element) {
element.src = '/static/images/placeholder.png';
this.imageLoaded[id] = true;
},
setupObserver() {
this.observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting && this.hasMore && !this.loadingMore) {
@@ -340,21 +880,76 @@ function newsFeed() {
}
}, { rootMargin: '200px' });
this.observer.observe(this.$refs.sentinel);
},
openSummary(item) {
this.modalItem = item;
this.modalOpen = true;
this.modalImageLoading = true;
trackEvent('summary-modal-open', { article_id: item.id });
},
closeSummary() {
const id = this.modalItem ? this.modalItem.id : null;
this.modalOpen = false;
this.modalItem = null;
trackEvent('summary-modal-close', { article_id: id });
},
trackSummarySource(item) {
if (!item) return;
trackEvent('summary-modal-link-out', {
article_id: item.id,
source_url: item.source_url,
});
}
};
}
(async function initAnalytics() {
try {
async function loadUmami() {
if (window.__umamiLoaded) return;
const resp = await fetch('/config');
if (!resp.ok) return;
const cfg = await resp.json();
if (cfg.umami_script_url && cfg.umami_website_id) {
const s = document.createElement('script');
s.defer = true;
s.src = cfg.umami_script_url;
s.setAttribute('data-website-id', cfg.umami_website_id);
document.head.appendChild(s);
if (!cfg.umami_script_url || !cfg.umami_website_id) return;
const s = document.createElement('script');
s.defer = true;
s.src = cfg.umami_script_url;
s.setAttribute('data-website-id', cfg.umami_website_id);
document.head.appendChild(s);
window.__umamiLoaded = true;
}
try {
const banner = document.getElementById('cookie-consent-banner');
const accept = document.getElementById('cookie-consent-accept');
function hideBannerWithFade() {
if (!banner || banner.classList.contains('hidden')) return;
banner.classList.add('opacity-0');
setTimeout(() => {
banner.classList.add('hidden');
banner.classList.remove('opacity-0');
}, 700);
}
if (hasCookieConsent()) {
await loadUmami();
} else if (banner) {
banner.classList.remove('hidden');
setTimeout(() => {
hideBannerWithFade();
}, 10000);
}
if (accept) {
accept.addEventListener('click', async () => {
setCookieConsentAccepted();
hideBannerWithFade();
await loadUmami();
trackEvent('cookie-consent-accepted');
});
}
} catch {}
})();

49
frontend/terms.html Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Terms of Use for ClawFort AI News, including content limitations and user responsibility.">
<meta name="robots" content="index,follow">
<meta property="og:type" content="article">
<meta property="og:title" content="Terms of Use - ClawFort">
<meta property="og:description" content="Read ClawFort terms governing informational use of AI-generated and aggregated content.">
<meta property="og:url" content="/terms">
<meta property="og:image" content="/static/images/placeholder.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Terms of Use - ClawFort">
<meta name="twitter:description" content="Read ClawFort terms governing informational use of AI-generated and aggregated content.">
<meta name="twitter:image" content="/static/images/placeholder.png">
<link rel="canonical" href="/terms">
<title>Terms of Use - ClawFort</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-950 text-slate-100 font-[Inter] min-h-screen">
<main class="max-w-3xl mx-auto px-4 py-12">
<a href="/" class="text-blue-400 hover:text-blue-300">&larr; Back to ClawFort</a>
<h1 class="text-3xl sm:text-4xl font-extrabold mt-6 mb-4">Terms of Use</h1>
<div class="space-y-4 text-slate-300 leading-relaxed">
<p>
The information shown on this site is provided for general informational use only.
It is not independently verified by the site owner.
</p>
<p>
Any use of this content is entirely at your own risk. You are responsible for validating
facts, citations, and suitability before relying on or redistributing the information.
</p>
<p>
Content may originate from external and AI-generated sources and may include errors,
omissions, or outdated material.
</p>
</div>
</main>
<footer class="border-t border-white/10 py-6 text-center text-sm text-slate-400">
<a href="/" class="hover:text-white">Home</a>
<span class="mx-2">|</span>
<a href="/attribution" class="hover:text-white">Attribution</a>
</footer>
</body>
</html>