limitcool
ad44dde886
Some checks failed
docker-images / resolve-build-targets (push) Successful in 6s
ui-regression / playwright-regression (push) Failing after 13m3s
docker-images / build-and-push (admin) (push) Successful in 4s
docker-images / submit-indexnow (push) Has been cancelled
docker-images / build-and-push (frontend) (push) Has been cancelled
docker-images / build-and-push (backend) (push) Has been cancelled
1294 lines
58 KiB
Plaintext
1294 lines
58 KiB
Plaintext
---
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
import DiscoveryBrief from '../components/seo/DiscoveryBrief.astro';
|
|
import PageViewTracker from '../components/seo/PageViewTracker.astro';
|
|
import SharePanel from '../components/seo/SharePanel.astro';
|
|
import TerminalWindow from '../components/ui/TerminalWindow.astro';
|
|
import CommandPrompt from '../components/ui/CommandPrompt.astro';
|
|
import FilterPill from '../components/ui/FilterPill.astro';
|
|
import PostCard from '../components/PostCard.astro';
|
|
import ViewMoreLink from '../components/ui/ViewMoreLink.astro';
|
|
import StatsList from '../components/StatsList.astro';
|
|
import TechStackList from '../components/TechStackList.astro';
|
|
import { terminalConfig } from '../lib/config/terminal';
|
|
import { api, DEFAULT_SITE_SETTINGS } from '../lib/api/client';
|
|
import { formatReadTime, getI18n } from '../lib/i18n';
|
|
import { buildDiscoveryHighlights, buildFaqJsonLd, buildPageFaqs, buildPostItemList, compactJsonLd } from '../lib/seo';
|
|
import type { AppFriendLink } from '../lib/api/client';
|
|
import type { ContentOverview, ContentWindowHighlight, PopularPostHighlight, Post } from '../lib/types';
|
|
import { getAccentVars, getCategoryTheme, getPostTypeTheme, getTagTheme } from '../lib/utils';
|
|
|
|
export const prerender = false;
|
|
|
|
const url = new URL(Astro.request.url);
|
|
const selectedType = url.searchParams.get('type') || 'all';
|
|
const selectedTag = url.searchParams.get('tag') || '';
|
|
const selectedCategory = url.searchParams.get('category') || '';
|
|
const normalizedSelectedTag = selectedTag.trim().toLowerCase();
|
|
const normalizedSelectedCategory = selectedCategory.trim().toLowerCase();
|
|
const previewLimit = 5;
|
|
const popularPreviewLimit = 4;
|
|
const DEFAULT_HOME_RANGE_KEY = '7d';
|
|
|
|
let siteSettings = DEFAULT_SITE_SETTINGS;
|
|
let allPosts: Post[] = [];
|
|
let recentPosts: Post[] = [];
|
|
let filteredPostsCount = 0;
|
|
let pinnedPost: Post | null = null;
|
|
let tags: string[] = [];
|
|
let friendLinks: AppFriendLink[] = [];
|
|
let categories: Awaited<ReturnType<typeof api.getCategories>> = [];
|
|
const createEmptyContentRange = (key: string, label: string, days: number): ContentWindowHighlight => ({
|
|
key,
|
|
label,
|
|
days,
|
|
overview: {
|
|
pageViews: 0,
|
|
readCompletes: 0,
|
|
avgReadProgress: 0,
|
|
avgReadDurationMs: undefined,
|
|
},
|
|
popularPosts: [],
|
|
});
|
|
let contentRanges: ContentWindowHighlight[] = [
|
|
createEmptyContentRange('24h', '24h', 1),
|
|
createEmptyContentRange('7d', '7d', 7),
|
|
createEmptyContentRange('30d', '30d', 30),
|
|
];
|
|
let contentOverview: ContentOverview = {
|
|
totalPageViews: 0,
|
|
pageViewsLast24h: 0,
|
|
pageViewsLast7d: 0,
|
|
totalReadCompletes: 0,
|
|
readCompletesLast7d: 0,
|
|
avgReadProgressLast7d: 0,
|
|
avgReadDurationMsLast7d: undefined,
|
|
};
|
|
let apiError: string | null = null;
|
|
const { locale, t } = getI18n(Astro);
|
|
const isEnglish = locale.startsWith('en');
|
|
|
|
const formatDurationMs = (value: number | undefined) => {
|
|
if (!value || value <= 0) return locale === 'en' ? 'N/A' : '暂无';
|
|
if (value < 1000) return `${Math.round(value)} ms`;
|
|
|
|
const seconds = value / 1000;
|
|
if (seconds < 60) {
|
|
return locale === 'en'
|
|
? `${seconds.toFixed(seconds >= 10 ? 0 : 1)}s`
|
|
: `${seconds.toFixed(seconds >= 10 ? 0 : 1)} 秒`;
|
|
}
|
|
|
|
const minutes = Math.floor(seconds / 60);
|
|
const restSeconds = Math.round(seconds % 60);
|
|
return locale === 'en' ? `${minutes}m ${restSeconds}s` : `${minutes} 分 ${restSeconds} 秒`;
|
|
};
|
|
|
|
const formatProgressPercent = (value: number) => `${Math.round(value)}%`;
|
|
|
|
try {
|
|
const homeData = await api.getHomePageData();
|
|
|
|
siteSettings = homeData.siteSettings;
|
|
allPosts = homeData.posts;
|
|
tags = homeData.tags.map(tag => tag.name);
|
|
friendLinks = homeData.friendLinks.filter(friend => friend.status === 'approved');
|
|
categories = homeData.categories;
|
|
contentRanges = homeData.contentRanges;
|
|
contentOverview = homeData.contentOverview;
|
|
|
|
const filteredPosts = allPosts.filter(post => {
|
|
const normalizedCategory = post.category?.trim().toLowerCase() || '';
|
|
if (selectedType !== 'all' && post.type !== selectedType) return false;
|
|
if (selectedCategory && normalizedCategory !== normalizedSelectedCategory) return false;
|
|
if (selectedTag && !post.tags.some(tag => tag.trim().toLowerCase() === normalizedSelectedTag)) return false;
|
|
return true;
|
|
});
|
|
|
|
recentPosts = filteredPosts.slice(0, previewLimit);
|
|
filteredPostsCount = filteredPosts.length;
|
|
pinnedPost = allPosts.find(post => post.pinned) || null;
|
|
} catch (error) {
|
|
apiError = error instanceof Error ? error.message : t('common.apiUnavailable');
|
|
console.error('API Error:', error);
|
|
}
|
|
|
|
const systemStats = [
|
|
{ label: t('common.posts'), value: String(allPosts.length) },
|
|
{ label: t('common.tags'), value: String(tags.length) },
|
|
{ label: t('common.categories'), value: String(categories.length) },
|
|
{ label: t('common.friends'), value: String(friendLinks.length) },
|
|
];
|
|
const heroGlanceStats = [
|
|
{ label: t('common.posts'), value: String(allPosts.length), icon: 'fa-file-alt' },
|
|
{ label: t('common.categories'), value: String(categories.length), icon: 'fa-folder-open' },
|
|
{ label: t('common.tags'), value: String(tags.length), icon: 'fa-hashtag' },
|
|
];
|
|
|
|
const techStack = siteSettings.techStack.map(name => ({ name }));
|
|
const tagFrequency = new Map<string, number>();
|
|
|
|
for (const post of allPosts) {
|
|
for (const tag of post.tags) {
|
|
tagFrequency.set(tag, (tagFrequency.get(tag) ?? 0) + 1);
|
|
}
|
|
}
|
|
|
|
const tagEntries = tags
|
|
.map(name => ({
|
|
name,
|
|
count: tagFrequency.get(name) ?? 0,
|
|
}))
|
|
.sort((left, right) => right.count - left.count || left.name.localeCompare(right.name));
|
|
|
|
const getTagCloudStyle = (name: string) => {
|
|
return getAccentVars(getTagTheme(name));
|
|
};
|
|
const matchesSelectedFilters = (post: Post) => {
|
|
const normalizedCategory = post.category?.trim().toLowerCase() || '';
|
|
if (selectedType !== 'all' && post.type !== selectedType) return false;
|
|
if (selectedCategory && normalizedCategory !== normalizedSelectedCategory) return false;
|
|
if (selectedTag && !post.tags.some(tag => tag.trim().toLowerCase() === normalizedSelectedTag)) return false;
|
|
return true;
|
|
};
|
|
const activeContentRange =
|
|
contentRanges.find((range) => range.key === DEFAULT_HOME_RANGE_KEY) ??
|
|
contentRanges[0] ??
|
|
createEmptyContentRange(DEFAULT_HOME_RANGE_KEY, DEFAULT_HOME_RANGE_KEY, 7);
|
|
const popularRangeCards = contentRanges.flatMap((range) =>
|
|
range.popularPosts
|
|
.filter((item): item is PopularPostHighlight & { post: Post } => Boolean(item.post))
|
|
.map((item, index) => ({
|
|
rangeKey: range.key,
|
|
rank: index + 1,
|
|
item,
|
|
post: item.post,
|
|
})),
|
|
);
|
|
const popularRangeOptions = contentRanges.map((range) => ({
|
|
key: range.key,
|
|
label: range.label,
|
|
}));
|
|
const initialPopularCount = popularRangeCards.filter(
|
|
({ rangeKey, post }) => rangeKey === activeContentRange.key && matchesSelectedFilters(post),
|
|
).length;
|
|
const initialPopularVisibleKeys = new Set(
|
|
popularRangeCards
|
|
.filter(({ rangeKey, post }) => rangeKey === activeContentRange.key && matchesSelectedFilters(post))
|
|
.sort((left, right) => {
|
|
const scoreDiff = right.item.pageViews - left.item.pageViews;
|
|
if (scoreDiff !== 0) return scoreDiff;
|
|
return right.item.readCompletes - left.item.readCompletes;
|
|
})
|
|
.slice(0, popularPreviewLimit)
|
|
.map(({ rangeKey, post }) => `${rangeKey}:${post.slug}`),
|
|
);
|
|
const sidebarFriendLinks = friendLinks.slice(0, 3);
|
|
const buildHomeUrl = ({
|
|
type = selectedType,
|
|
tag = selectedTag,
|
|
category = selectedCategory,
|
|
}: {
|
|
type?: string;
|
|
tag?: string;
|
|
category?: string;
|
|
}) => {
|
|
const params = new URLSearchParams();
|
|
if (type && type !== 'all') params.set('type', type);
|
|
if (category) params.set('category', category);
|
|
if (tag) params.set('tag', tag);
|
|
const query = params.toString();
|
|
return query ? `/?${query}` : '/';
|
|
};
|
|
const homeTagHrefPrefix = `${buildHomeUrl({ tag: '' })}${buildHomeUrl({ tag: '' }).includes('?') ? '&' : '?'}tag=`;
|
|
const hasActiveFilters = selectedType !== 'all' || Boolean(selectedCategory) || Boolean(selectedTag);
|
|
const previewCount = Math.min(filteredPostsCount, previewLimit);
|
|
const categoryAccentMap = Object.fromEntries(
|
|
categories.map((category) => [category.name.trim().toLowerCase(), getAccentVars(getCategoryTheme(category.name))])
|
|
);
|
|
const tagAccentMap = Object.fromEntries(
|
|
tagEntries.map((tag) => [tag.name.trim().toLowerCase(), getAccentVars(getTagTheme(tag.name))])
|
|
);
|
|
const initialPinnedVisible = pinnedPost ? matchesSelectedFilters(pinnedPost) : false;
|
|
|
|
const postTypeFilters = [
|
|
{ id: 'all', name: t('common.all'), icon: 'fa-stream' },
|
|
{ id: 'article', name: t('common.article'), icon: 'fa-file-alt' },
|
|
{ id: 'tweet', name: t('common.tweet'), icon: 'fa-comment-dots' }
|
|
];
|
|
const activeFilterLabels = [
|
|
selectedType !== 'all' ? `type=${selectedType}` : '',
|
|
selectedCategory ? `category=${selectedCategory}` : '',
|
|
selectedTag ? `tag=${selectedTag}` : '',
|
|
].filter(Boolean);
|
|
const discoverPrompt = hasActiveFilters
|
|
? t('home.promptDiscoverFiltered', { filters: activeFilterLabels.join(' · ') })
|
|
: t('home.promptDiscoverDefault');
|
|
const postsPrompt = hasActiveFilters
|
|
? t('home.promptPostsFiltered', { count: previewCount, filters: activeFilterLabels.join(' · ') })
|
|
: t('home.promptPostsDefault', { count: previewCount });
|
|
const siteBaseUrl = (siteSettings.siteUrl || new URL(Astro.request.url).origin).replace(/\/$/, '');
|
|
const homeJsonLd = [
|
|
{
|
|
'@context': 'https://schema.org',
|
|
'@type': 'CollectionPage',
|
|
name: siteSettings.siteTitle,
|
|
description: siteSettings.siteDescription,
|
|
url: siteBaseUrl,
|
|
inLanguage: locale,
|
|
},
|
|
{
|
|
'@context': 'https://schema.org',
|
|
'@type': 'ItemList',
|
|
name: `${siteSettings.siteName} recent posts`,
|
|
itemListElement: buildPostItemList(recentPosts, siteBaseUrl),
|
|
},
|
|
];
|
|
const homeShareCopy = isEnglish
|
|
? {
|
|
badge: 'site entry',
|
|
title: 'Share the homepage',
|
|
description:
|
|
'Use the homepage as the canonical top-level entry for people and AI search to branch into articles, taxonomies, reviews, and profile context.',
|
|
}
|
|
: {
|
|
badge: '入口页',
|
|
title: '把首页甩出去',
|
|
description: '不知道发什么时，先发这个入口。轻松、不剧透，还挺省心。',
|
|
};
|
|
const homeShareSummary = isEnglish
|
|
? 'A light entry point for curious visitors. Click around and let the rest reveal itself.'
|
|
: '这是一个适合顺手转发的小入口，先逛逛，细节留到点开再说。';
|
|
const homeSidebarCopy = isEnglish
|
|
? {
|
|
quickLinks: 'Quick links',
|
|
quickLinksDesc: 'Keep the main channels pinned on the right so you can switch context without losing reading flow.',
|
|
quickLinksMore: 'More channels',
|
|
popularTitle: 'Hot now',
|
|
popularDesc: 'Track the most-read content in the selected window.',
|
|
friendsTitle: 'Friend links',
|
|
friendsDesc: 'A few recommended sites from the blogroll.',
|
|
statsTitle: 'Site stats',
|
|
statsDesc: 'A compact snapshot of current site scale.',
|
|
aiBriefTitle: 'AI site brief',
|
|
}
|
|
: {
|
|
quickLinks: '快速入口',
|
|
quickLinksDesc: '常用入口都放这儿，手别忙，点就行。',
|
|
quickLinksMore: '更多频道',
|
|
popularTitle: '最近热门',
|
|
popularDesc: '看看最近是谁在悄悄抢镜。',
|
|
friendsTitle: '友情链接',
|
|
friendsDesc: '隔壁摊位也许也有好东西。',
|
|
statsTitle: '站点概览',
|
|
statsDesc: '轻量围观一下站内气氛，不必知道太多。',
|
|
aiBriefTitle: '站点便签',
|
|
};
|
|
const primaryQuickLinks = [
|
|
{ icon: 'fa-file-code', text: t('nav.articles'), href: '/articles' },
|
|
{ icon: 'fa-folder', text: t('nav.categories'), href: '/categories' },
|
|
{ icon: 'fa-user-secret', text: t('nav.about'), href: '/about' },
|
|
...(siteSettings.ai.enabled ? [{ icon: 'fa-robot', text: t('nav.ask'), href: '/ask' }] : []),
|
|
];
|
|
const secondaryQuickLinks = [
|
|
{ icon: 'fa-tags', text: t('nav.tags'), href: '/tags' },
|
|
{ icon: 'fa-stream', text: t('nav.timeline'), href: '/timeline' },
|
|
{ icon: 'fa-star', text: t('nav.reviews'), href: '/reviews' },
|
|
{ icon: 'fa-link', text: t('nav.friends'), href: '/friends' },
|
|
];
|
|
const homeBriefHighlights = buildDiscoveryHighlights([
|
|
siteSettings.siteDescription,
|
|
siteSettings.heroSubtitle,
|
|
siteSettings.ownerBio,
|
|
`${t('common.posts')}: ${allPosts.length}`,
|
|
`${t('common.categories')}: ${categories.length}`,
|
|
`${t('common.tags')}: ${tags.length}`,
|
|
]);
|
|
const homeFaqs = buildPageFaqs({
|
|
locale,
|
|
pageTitle: siteSettings.siteTitle,
|
|
summary: siteSettings.heroSubtitle || siteSettings.siteDescription,
|
|
primaryLabel: isEnglish ? 'homepage' : '首页',
|
|
primaryUrl: siteBaseUrl,
|
|
relatedLinks: [
|
|
{ label: t('nav.articles'), url: `${siteBaseUrl}/articles` },
|
|
{ label: t('nav.categories'), url: `${siteBaseUrl}/categories` },
|
|
{ label: t('nav.about'), url: `${siteBaseUrl}/about` },
|
|
],
|
|
signals: homeBriefHighlights,
|
|
});
|
|
const homeFaqJsonLd = buildFaqJsonLd(homeFaqs);
|
|
---
|
|
|
|
<BaseLayout
|
|
title={siteSettings.siteTitle}
|
|
description={siteSettings.siteDescription}
|
|
siteSettings={siteSettings}
|
|
canonical="/"
|
|
noindex={hasActiveFilters}
|
|
jsonLd={compactJsonLd([...homeJsonLd, homeFaqJsonLd])}
|
|
>
|
|
<PageViewTracker pageType="home" entityId="homepage" />
|
|
<div class="mx-auto max-w-[1480px] px-4 py-6 sm:px-6 lg:px-8">
|
|
<TerminalWindow title={terminalConfig.title} class="w-full">
|
|
<div class="mb-5 px-4 overflow-x-auto">
|
|
<pre class="font-mono text-xs sm:text-sm text-[var(--primary)] whitespace-pre">{terminalConfig.asciiArt}</pre>
|
|
</div>
|
|
|
|
<div class="mb-6 px-4">
|
|
<CommandPrompt command={t('home.promptWelcome')} />
|
|
<div class="ml-4 home-hero-shell home-hero-shell--panel">
|
|
<div class="home-hero-copy">
|
|
<span class="terminal-kicker w-fit">
|
|
<i class="fas fa-terminal"></i>
|
|
home / overview
|
|
</span>
|
|
<p class="mb-1 text-lg font-bold text-[var(--primary)]">{siteSettings.heroTitle}</p>
|
|
<p class="text-sm leading-6 text-[var(--text-secondary)]">{siteSettings.heroSubtitle}</p>
|
|
|
|
<div class="home-hero-glance">
|
|
{heroGlanceStats.map((item) => (
|
|
<div class="home-hero-glance-item">
|
|
<span class="home-hero-glance-icon">
|
|
<i class={`fas ${item.icon} text-[11px]`}></i>
|
|
</span>
|
|
<div class="min-w-0">
|
|
<div class="text-[11px] uppercase tracking-[0.18em] text-[var(--text-tertiary)]">{item.label}</div>
|
|
<div class="text-sm font-semibold text-[var(--title-color)]">{item.value}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="home-hero-meta">
|
|
<span class="terminal-stat-pill">
|
|
<i class="fas fa-file-alt text-[10px]"></i>
|
|
<span id="home-results-count">{t('common.resultsCount', { count: filteredPostsCount })}</span>
|
|
</span>
|
|
{siteSettings.subscriptions.popupEnabled && (
|
|
<button type="button" class="terminal-subtle-link" data-subscription-popup-open>
|
|
<i class="fas fa-envelope text-[11px]"></i>
|
|
<span>订阅更新</span>
|
|
</button>
|
|
)}
|
|
{siteSettings.ai.enabled && (
|
|
<a href="/ask" class="terminal-subtle-link">
|
|
<i class="fas fa-robot text-[11px]"></i>
|
|
<span>{t('nav.ask')}</span>
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{apiError && (
|
|
<div class="mb-8 px-4">
|
|
<div class="ml-4 p-4 rounded-lg border border-[var(--danger)]/20 bg-[var(--danger)]/10 text-[var(--danger)] text-sm">
|
|
{apiError}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div class="grid gap-6 px-4 xl:grid-cols-[minmax(0,1fr)_320px] 2xl:grid-cols-[minmax(0,1fr)_340px]">
|
|
<div class="min-w-0 space-y-6">
|
|
<div id="discover">
|
|
<CommandPrompt promptId="home-discover-prompt" command={discoverPrompt} />
|
|
<div class="ml-4 terminal-panel home-discovery-shell">
|
|
<div class="home-discovery-head">
|
|
<div class="home-taxonomy-copy">
|
|
<span class="terminal-kicker">
|
|
<i class="fas fa-sliders-h"></i>
|
|
<span>home filters</span>
|
|
</span>
|
|
<div>
|
|
<h2 class="text-xl font-bold text-[var(--title-color)]">{t('common.browsePosts')}</h2>
|
|
<p class="mt-2 text-sm leading-6 text-[var(--text-secondary)]">
|
|
{t('common.categoriesCount', { count: categories.length })} · {t('common.tagsCount', { count: tags.length })} · <span id="home-discovery-results">{t('common.resultsCount', { count: filteredPostsCount })}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="home-discovery-actions">
|
|
<a id="home-clear-filters" href="/" class:list={['terminal-link-arrow', !hasActiveFilters && 'hidden']}>
|
|
<span>{t('common.clearFilters')}</span>
|
|
<i class="fas fa-rotate-left text-xs"></i>
|
|
</a>
|
|
<ViewMoreLink href="/articles" text={t('common.viewAllArticles')} command="cd ~/articles" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="home-filter-toolbar">
|
|
{postTypeFilters.map(filter => (
|
|
<FilterPill
|
|
tone={filter.id === 'all' ? 'neutral' : 'accent'}
|
|
active={selectedType === filter.id}
|
|
href={buildHomeUrl({ type: filter.id, category: selectedCategory, tag: selectedTag })}
|
|
data-home-type-filter={filter.id}
|
|
style={filter.id === 'all' ? undefined : getAccentVars(getPostTypeTheme(filter.id))}
|
|
>
|
|
<i class={`fas ${filter.icon}`}></i>
|
|
<span>{filter.name}</span>
|
|
</FilterPill>
|
|
))}
|
|
</div>
|
|
|
|
<div id="home-active-filters" class:list={['home-active-filter-row', !hasActiveFilters && 'hidden']}>
|
|
<span id="home-active-type" class:list={['terminal-chip max-w-full min-w-0', selectedType === 'all' && 'hidden']}>
|
|
<i id="home-active-type-icon" class={`fas ${postTypeFilters.find((item) => item.id === selectedType)?.icon || 'fa-stream'} text-[10px]`}></i>
|
|
<span id="home-active-type-text" class="min-w-0 truncate">{postTypeFilters.find((item) => item.id === selectedType)?.name || selectedType}</span>
|
|
</span>
|
|
<span
|
|
id="home-active-category"
|
|
class:list={['terminal-chip terminal-chip--accent max-w-full min-w-0', !selectedCategory && 'hidden']}
|
|
style={selectedCategory ? getAccentVars(getCategoryTheme(selectedCategory)) : undefined}
|
|
>
|
|
<i class="fas fa-folder-open text-[10px]"></i>
|
|
<span id="home-active-category-text" class="min-w-0 truncate">{selectedCategory}</span>
|
|
</span>
|
|
<span
|
|
id="home-active-tag"
|
|
class:list={['terminal-chip terminal-chip--accent max-w-full min-w-0', !selectedTag && 'hidden']}
|
|
style={selectedTag ? getAccentVars(getTagTheme(selectedTag)) : undefined}
|
|
>
|
|
<i class="fas fa-hashtag text-[10px]"></i>
|
|
<span id="home-active-tag-text" class="min-w-0 truncate">{selectedTag}</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="home-discovery-grid">
|
|
<section id="categories" class="home-discovery-panel">
|
|
<div class="home-discovery-panel__head">
|
|
<h3 class="text-sm font-semibold text-[var(--title-color)]">{t('nav.categories')}</h3>
|
|
<span class="terminal-stat-pill">{categories.length}</span>
|
|
</div>
|
|
<div class="home-category-grid home-category-grid--compact">
|
|
{categories.map(category => (
|
|
<a
|
|
href={buildHomeUrl({
|
|
category: normalizedSelectedCategory === category.name.trim().toLowerCase() ? '' : category.name,
|
|
tag: selectedTag,
|
|
})}
|
|
data-home-category-filter={category.name}
|
|
class:list={[
|
|
'home-category-card terminal-panel-accent terminal-interactive-card group',
|
|
normalizedSelectedCategory === category.name.trim().toLowerCase() && 'is-active'
|
|
]}
|
|
style={getAccentVars(getCategoryTheme(category.name))}
|
|
>
|
|
<div class="home-category-card__icon terminal-accent-icon">
|
|
<i class="fas fa-folder-open"></i>
|
|
</div>
|
|
<div class="min-w-0 flex flex-1 items-center justify-between gap-3">
|
|
<h3 class="truncate text-sm font-semibold text-[var(--title-color)] transition-colors group-hover:text-[var(--accent-color,var(--primary))]">
|
|
{category.name}
|
|
</h3>
|
|
<span class="terminal-stat-pill terminal-stat-pill--accent shrink-0" style={getAccentVars(getCategoryTheme(category.name))}>
|
|
<span>{category.count ?? 0}</span>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tags" class="home-discovery-panel home-tag-shell">
|
|
<div class="home-discovery-panel__head">
|
|
<h3 class="text-sm font-semibold text-[var(--title-color)]">{t('nav.tags')}</h3>
|
|
<span class="terminal-stat-pill">{tags.length}</span>
|
|
</div>
|
|
<div class="home-tag-cloud">
|
|
{tagEntries.map((tag) => (
|
|
<a
|
|
href={buildHomeUrl({
|
|
tag: normalizedSelectedTag === tag.name.trim().toLowerCase() ? '' : tag.name,
|
|
category: selectedCategory,
|
|
})}
|
|
data-home-tag-filter={tag.name}
|
|
class:list={[
|
|
'home-tag-cloud__item',
|
|
normalizedSelectedTag === tag.name.trim().toLowerCase() && 'is-active'
|
|
]}
|
|
style={getTagCloudStyle(tag.name)}
|
|
>
|
|
<span class="home-tag-cloud__hash">#</span>
|
|
<span>{tag.name}</span>
|
|
<span class="home-tag-cloud__count">{tag.count}</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{pinnedPost && (
|
|
<div>
|
|
<CommandPrompt command={t('home.promptPinned')} />
|
|
<div id="home-pinned-wrap" class:list={['ml-4', !initialPinnedVisible && 'hidden']}>
|
|
<div class="terminal-panel terminal-panel-accent terminal-interactive-card p-4" style={getAccentVars(getPostTypeTheme(pinnedPost.type))}>
|
|
<div class="mb-2 flex items-center gap-2">
|
|
<span class="rounded bg-[var(--primary)] px-2 py-0.5 text-xs font-bold text-[var(--terminal-bg)]">{t('home.pinned')}</span>
|
|
<span class="terminal-chip terminal-chip--accent px-2 py-1 text-[10px]" style={getAccentVars(getPostTypeTheme(pinnedPost.type))}>
|
|
{pinnedPost.type === 'article' ? t('common.article') : t('common.tweet')}
|
|
</span>
|
|
<a href={`/articles/${pinnedPost.slug}`} class="text-lg font-bold text-[var(--title-color)] transition hover:text-[var(--primary)]">
|
|
{pinnedPost.title}
|
|
</a>
|
|
</div>
|
|
<p class="mb-2 text-sm text-[var(--text-secondary)]">{pinnedPost.date} | {t('common.readTime')}: {formatReadTime(locale, pinnedPost.readTime, t)}</p>
|
|
<p class="text-[var(--text-secondary)]">{pinnedPost.description}</p>
|
|
<div class="mt-4">
|
|
<a href={`/articles/${pinnedPost.slug}`} class="terminal-action-button inline-flex">
|
|
<i class="fas fa-angle-right"></i>
|
|
<span>{t('common.readMore')}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div id="posts">
|
|
<CommandPrompt promptId="home-posts-prompt" command={postsPrompt} />
|
|
<div class="ml-4">
|
|
{allPosts.length > 0 ? (
|
|
<div id="home-posts-list" class="divide-y divide-[var(--border-color)]">
|
|
{allPosts.map((post) => {
|
|
const matchesCurrentFilter = matchesSelectedFilters(post);
|
|
const filteredIndex = matchesCurrentFilter
|
|
? allPosts.filter(matchesSelectedFilters).findIndex((item) => item.slug === post.slug)
|
|
: -1;
|
|
const isVisible = matchesCurrentFilter && filteredIndex < previewLimit;
|
|
|
|
return (
|
|
<div
|
|
data-home-post-card
|
|
data-home-type={post.type}
|
|
data-home-category={post.category?.trim().toLowerCase() || ''}
|
|
data-home-tags={post.tags.map((tag) => tag.trim().toLowerCase()).join('|')}
|
|
data-home-pinned={post.pinned ? 'true' : 'false'}
|
|
data-home-slug={post.slug}
|
|
class:list={[!isVisible && 'hidden']}
|
|
>
|
|
<PostCard post={post} selectedTag={selectedTag} tagHrefPrefix={homeTagHrefPrefix} />
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div id="home-posts-empty" class="terminal-empty">
|
|
<p class="text-base font-semibold text-[var(--title-color)]">{t('articlesPage.emptyTitle')}</p>
|
|
<p class="mt-2 text-sm leading-6 text-[var(--text-secondary)]">{t('articlesPage.emptyDescription')}</p>
|
|
<div class="mt-4 flex flex-wrap justify-center gap-2">
|
|
<a href="/" class="terminal-subtle-link">
|
|
<i class="fas fa-rotate-left text-[11px]"></i>
|
|
<span>{t('common.clearFilters')}</span>
|
|
</a>
|
|
<a href="/articles" class="terminal-subtle-link">
|
|
<i class="fas fa-file-code text-[11px]"></i>
|
|
<span>{t('common.viewAllArticles')}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{allPosts.length > 0 && (
|
|
<div id="home-posts-empty" class:list={['terminal-empty', recentPosts.length > 0 && 'hidden']}>
|
|
<p class="text-base font-semibold text-[var(--title-color)]">{t('articlesPage.emptyTitle')}</p>
|
|
<p class="mt-2 text-sm leading-6 text-[var(--text-secondary)]">{t('articlesPage.emptyDescription')}</p>
|
|
<div class="mt-4 flex flex-wrap justify-center gap-2">
|
|
<a href="/" class="terminal-subtle-link">
|
|
<i class="fas fa-rotate-left text-[11px]"></i>
|
|
<span>{t('common.clearFilters')}</span>
|
|
</a>
|
|
<a href="/articles" class="terminal-subtle-link">
|
|
<i class="fas fa-file-code text-[11px]"></i>
|
|
<span>{t('common.viewAllArticles')}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div class="mt-4">
|
|
<ViewMoreLink href="/articles" text={t('common.viewAllArticles')} command="cd ~/articles" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="home-sidebar-stack">
|
|
<section class="terminal-panel home-sidebar-card home-sidebar-card--quickmenu space-y-4 xl:sticky xl:top-24">
|
|
<div class="space-y-1">
|
|
<span class="terminal-kicker w-fit">
|
|
<i class="fas fa-compass"></i>
|
|
quick menu
|
|
</span>
|
|
<h3 class="text-lg font-semibold text-[var(--title-color)]">{homeSidebarCopy.quickLinks}</h3>
|
|
<p class="text-sm leading-6 text-[var(--text-secondary)]">{homeSidebarCopy.quickLinksDesc}</p>
|
|
</div>
|
|
<div class="home-sidebar-grid">
|
|
{primaryQuickLinks.map(link => (
|
|
<a
|
|
href={link.href}
|
|
class="home-sidebar-link group flex min-w-0 items-center gap-3 rounded-2xl border border-[var(--border-color)] bg-[var(--terminal-bg)]/75 px-3 py-2.5 text-sm text-[var(--title-color)] transition hover:-translate-y-0.5 hover:border-[var(--primary)] hover:text-[var(--primary)]"
|
|
>
|
|
<span class="home-sidebar-link__icon">
|
|
<i class={`fas ${link.icon} text-[11px]`}></i>
|
|
</span>
|
|
<span class="min-w-0 flex-1 truncate font-medium">{link.text}</span>
|
|
<i class="fas fa-arrow-right text-[10px] text-[var(--text-tertiary)] transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-[var(--primary)]"></i>
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
<div class="space-y-1 border-t border-[color:color-mix(in_oklab,var(--primary)_10%,var(--border-color))] pt-4">
|
|
<h4 class="text-sm font-semibold text-[var(--title-color)]">{homeSidebarCopy.quickLinksMore}</h4>
|
|
</div>
|
|
|
|
<div class="grid gap-2 sm:grid-cols-2 xl:grid-cols-2">
|
|
{secondaryQuickLinks.map(link => (
|
|
<a
|
|
href={link.href}
|
|
class="home-sidebar-mini-link group flex min-w-0 items-center gap-2.5 rounded-xl border border-[var(--border-color)] bg-[var(--terminal-bg)]/72 px-3 py-2 text-xs text-[var(--text-secondary)] transition hover:-translate-y-0.5 hover:border-[var(--primary)] hover:text-[var(--primary)]"
|
|
>
|
|
<span class="home-sidebar-mini-link__icon">
|
|
<i class={`fas ${link.icon} text-[10px]`}></i>
|
|
</span>
|
|
<span class="min-w-0 flex-1 truncate font-medium">{link.text}</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<SharePanel
|
|
shareTitle={siteSettings.siteTitle}
|
|
summary={homeShareSummary}
|
|
canonicalUrl={siteBaseUrl}
|
|
badge={homeShareCopy.badge}
|
|
title={homeShareCopy.title}
|
|
description={homeShareCopy.description}
|
|
wechatShareQrEnabled={siteSettings.seo.wechatShareQrEnabled}
|
|
variant="compact"
|
|
/>
|
|
|
|
<section class="terminal-panel home-sidebar-card space-y-4">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<span class="terminal-kicker w-fit">
|
|
<i class="fas fa-fire"></i>
|
|
traffic
|
|
</span>
|
|
<h3 class="text-lg font-semibold text-[var(--title-color)]">{homeSidebarCopy.popularTitle}</h3>
|
|
<p class="mt-1 text-sm leading-6 text-[var(--text-secondary)]">{homeSidebarCopy.popularDesc}</p>
|
|
</div>
|
|
<span id="home-popular-count" class="terminal-stat-pill">{initialPopularCount}</span>
|
|
</div>
|
|
|
|
<div class="home-popular-rangebar">
|
|
{popularRangeOptions.map((option) => (
|
|
<button
|
|
type="button"
|
|
data-home-popular-range={option.key}
|
|
class:list={[
|
|
'home-popular-range',
|
|
option.key === activeContentRange.key && 'is-active'
|
|
]}
|
|
>
|
|
<i class="fas fa-clock text-[10px]"></i>
|
|
<span>{option.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div id="home-popular-list" class="space-y-3">
|
|
{popularRangeCards.map(({ rangeKey, rank, item, post }) => (
|
|
<a
|
|
href={`/articles/${post.slug}`}
|
|
data-home-popular-card
|
|
data-home-range={rangeKey}
|
|
data-home-type={post.type}
|
|
data-home-category={post.category?.trim().toLowerCase() || ''}
|
|
data-home-tags={post.tags.map((tag) => tag.trim().toLowerCase()).join('|')}
|
|
data-home-slug={post.slug}
|
|
data-home-popular-views={item.pageViews}
|
|
data-home-popular-completes={item.readCompletes}
|
|
class:list={[
|
|
'home-sidebar-popular block rounded-2xl border border-[var(--border-color)] bg-[var(--terminal-bg)]/72 p-3 transition hover:-translate-y-0.5 hover:border-[var(--primary)]',
|
|
!initialPopularVisibleKeys.has(`${rangeKey}:${post.slug}`) && 'hidden'
|
|
]}
|
|
style={getAccentVars(getPostTypeTheme(post.type))}
|
|
>
|
|
<div class="flex items-start gap-3">
|
|
<span class="home-sidebar-popular__rank">
|
|
<span data-home-popular-rank-label>{rank}</span>
|
|
</span>
|
|
<div class="min-w-0 flex-1">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<span class="terminal-chip terminal-chip--accent px-2 py-1 text-[10px]" style={getAccentVars(getPostTypeTheme(post.type))}>
|
|
{post.type === 'article' ? t('common.article') : t('common.tweet')}
|
|
</span>
|
|
<span class="terminal-chip terminal-chip--accent px-2 py-1 text-[10px]" style={getAccentVars(getCategoryTheme(post.category))}>
|
|
{post.category}
|
|
</span>
|
|
</div>
|
|
<h4 class="mt-2 line-clamp-2 text-sm font-semibold leading-6 text-[var(--title-color)]">{post.title}</h4>
|
|
<div class="home-sidebar-popular__metrics">
|
|
<span>{t('home.views')}: {item.pageViews}</span>
|
|
<span>{t('home.completes')}: {item.readCompletes}</span>
|
|
<span>{t('home.avgProgress')}: {formatProgressPercent(item.avgProgressPercent)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
<div id="home-popular-empty" class:list={['terminal-empty py-6', initialPopularCount > 0 && 'hidden']}>
|
|
<p class="text-sm leading-6 text-[var(--text-secondary)]">{t('home.hotNowEmpty')}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="terminal-panel home-sidebar-card space-y-4">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<span class="terminal-kicker w-fit">
|
|
<i class="fas fa-chart-simple"></i>
|
|
stats
|
|
</span>
|
|
<h3 class="text-lg font-semibold text-[var(--title-color)]">{homeSidebarCopy.statsTitle}</h3>
|
|
<p class="mt-1 text-sm leading-6 text-[var(--text-secondary)]">{homeSidebarCopy.statsDesc}</p>
|
|
</div>
|
|
<span id="home-stats-window-pill" class="terminal-stat-pill">{activeContentRange.label}</span>
|
|
</div>
|
|
|
|
<div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-2">
|
|
<div class="home-sidebar-stat home-sidebar-stat--metric rounded-2xl border border-[color:color-mix(in_oklab,var(--primary)_10%,var(--border-color))] p-4">
|
|
<p class="text-xs uppercase tracking-[0.18em] text-[var(--text-tertiary)]">{t('home.views')}</p>
|
|
<p id="home-reading-views-value" class="mt-3 text-2xl font-semibold text-[var(--title-color)]">{activeContentRange.overview.pageViews}</p>
|
|
<p class="mt-2 text-xs text-[var(--text-secondary)]">{t('home.totalViews')}: {contentOverview.totalPageViews}</p>
|
|
</div>
|
|
<div class="home-sidebar-stat home-sidebar-stat--metric rounded-2xl border border-[color:color-mix(in_oklab,var(--primary)_10%,var(--border-color))] p-4">
|
|
<p class="text-xs uppercase tracking-[0.18em] text-[var(--text-tertiary)]">{t('home.completes')}</p>
|
|
<p id="home-reading-completes-value" class="mt-3 text-2xl font-semibold text-[var(--title-color)]">{activeContentRange.overview.readCompletes}</p>
|
|
<p class="mt-2 text-xs text-[var(--text-secondary)]">{t('home.totalCompletes')}: {contentOverview.totalReadCompletes}</p>
|
|
</div>
|
|
<div class="home-sidebar-stat home-sidebar-stat--metric rounded-2xl border border-[color:color-mix(in_oklab,var(--primary)_10%,var(--border-color))] p-4">
|
|
<p class="text-xs uppercase tracking-[0.18em] text-[var(--text-tertiary)]">{t('home.avgProgress')}</p>
|
|
<p id="home-reading-progress-value" class="mt-3 text-2xl font-semibold text-[var(--title-color)]">{formatProgressPercent(activeContentRange.overview.avgReadProgress)}</p>
|
|
<p id="home-reading-window-meta" class="mt-2 text-xs text-[var(--text-secondary)]">{t('home.statsWindowLabel', { label: activeContentRange.label })}</p>
|
|
</div>
|
|
<div class="home-sidebar-stat home-sidebar-stat--metric rounded-2xl border border-[color:color-mix(in_oklab,var(--primary)_10%,var(--border-color))] p-4">
|
|
<p class="text-xs uppercase tracking-[0.18em] text-[var(--text-tertiary)]">{t('home.avgDuration')}</p>
|
|
<p id="home-reading-duration-value" class="mt-3 text-2xl font-semibold text-[var(--title-color)]">{formatDurationMs(activeContentRange.overview.avgReadDurationMs)}</p>
|
|
<p class="mt-2 text-xs text-[var(--text-secondary)]">{t('common.posts')}: {allPosts.length}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="home-sidebar-meta-list">
|
|
{systemStats.slice(0, 4).map((item) => (
|
|
<div class="home-sidebar-meta-item">
|
|
<span class="text-[11px] uppercase tracking-[0.18em] text-[var(--text-tertiary)]">{item.label}</span>
|
|
<span class="text-sm font-semibold text-[var(--title-color)]">{item.value}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{sidebarFriendLinks.length > 0 && (
|
|
<section class="terminal-panel home-sidebar-card space-y-4">
|
|
<div class="space-y-1">
|
|
<span class="terminal-kicker w-fit">
|
|
<i class="fas fa-link"></i>
|
|
network
|
|
</span>
|
|
<h3 class="text-lg font-semibold text-[var(--title-color)]">{homeSidebarCopy.friendsTitle}</h3>
|
|
<p class="text-sm leading-6 text-[var(--text-secondary)]">{homeSidebarCopy.friendsDesc}</p>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
{sidebarFriendLinks.map((friend) => (
|
|
<a
|
|
href={friend.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="home-sidebar-friend group flex items-start gap-3 rounded-2xl border border-[var(--border-color)] bg-[var(--terminal-bg)]/75 p-3 transition hover:-translate-y-0.5 hover:border-[var(--primary)]"
|
|
>
|
|
{friend.avatar ? (
|
|
<img
|
|
src={friend.avatar}
|
|
alt={friend.name}
|
|
class="h-10 w-10 shrink-0 rounded-xl border border-[var(--border-color)] object-cover bg-[var(--code-bg)]"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
) : (
|
|
<span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-[var(--border-color)] bg-[var(--code-bg)] text-sm font-bold text-[var(--primary)]">
|
|
{friend.name.charAt(0).toUpperCase()}
|
|
</span>
|
|
)}
|
|
<div class="min-w-0 flex-1">
|
|
<div class="flex items-center gap-2">
|
|
<span class="truncate text-sm font-semibold text-[var(--title-color)] group-hover:text-[var(--primary)]">
|
|
{friend.name}
|
|
</span>
|
|
<i class="fas fa-arrow-up-right-from-square text-[10px] text-[var(--text-tertiary)] opacity-0 transition-opacity group-hover:opacity-100"></i>
|
|
</div>
|
|
{friend.description && (
|
|
<p class="mt-1 line-clamp-2 text-xs leading-6 text-[var(--text-secondary)]">
|
|
{friend.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
<ViewMoreLink href="/friends" text={t('common.viewAllLinks')} command="cd ~/friends" />
|
|
</section>
|
|
)}
|
|
</aside>
|
|
</div>
|
|
|
|
<div class="my-8 border-t border-[var(--border-color)]"></div>
|
|
|
|
<div id="about" class="px-4">
|
|
<CommandPrompt command={t('home.promptAbout')} />
|
|
<div class="ml-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<h3 class="text-lg font-bold mb-3 text-[var(--title-color)]">{t('home.about')}</h3>
|
|
<p class="text-[var(--text-secondary)] mb-4">{siteSettings.ownerBio}</p>
|
|
|
|
<h3 class="text-lg font-bold mb-3 text-[var(--title-color)]">{t('home.techStack')}</h3>
|
|
<TechStackList items={techStack} />
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-lg font-bold mb-3 text-[var(--title-color)]">{t('home.systemStatus')}</h3>
|
|
<StatsList stats={systemStats} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="my-8 border-t border-[var(--border-color)]"></div>
|
|
|
|
<div id="site-brief" class="px-4 pb-2">
|
|
<div class="ml-4">
|
|
<DiscoveryBrief
|
|
badge={isEnglish ? 'site brief' : homeSidebarCopy.aiBriefTitle}
|
|
kicker="geo / overview"
|
|
title={isEnglish ? 'AI-readable site brief' : '给 AI 看的站点摘要'}
|
|
summary={siteSettings.heroSubtitle || siteSettings.siteDescription}
|
|
highlights={homeBriefHighlights}
|
|
faqs={homeFaqs}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</TerminalWindow>
|
|
</div>
|
|
</BaseLayout>
|
|
|
|
<script
|
|
is:inline
|
|
define:vars={{
|
|
previewLimit,
|
|
popularPreviewLimit,
|
|
categoryAccentMap,
|
|
tagAccentMap,
|
|
contentRangesPayload: contentRanges.map((range) => ({
|
|
key: range.key,
|
|
label: range.label,
|
|
days: range.days,
|
|
overview: range.overview,
|
|
})),
|
|
initialHomeState: {
|
|
type: selectedType,
|
|
category: selectedCategory,
|
|
tag: selectedTag,
|
|
range: activeContentRange.key,
|
|
},
|
|
}}
|
|
>
|
|
(function() {
|
|
/** @type {Window['__termiCommandPrompt']} */
|
|
let promptApi;
|
|
|
|
const t = window.__termiTranslate;
|
|
const typeButtons = Array.from(document.querySelectorAll('[data-home-type-filter]'));
|
|
const categoryButtons = Array.from(document.querySelectorAll('[data-home-category-filter]'));
|
|
const tagButtons = Array.from(document.querySelectorAll('[data-home-tag-filter]'));
|
|
const postCards = Array.from(document.querySelectorAll('[data-home-post-card]'));
|
|
const postsRoot = document.getElementById('posts');
|
|
const resultsCount = document.getElementById('home-results-count');
|
|
const discoveryResults = document.getElementById('home-discovery-results');
|
|
const clearFilters = document.getElementById('home-clear-filters');
|
|
const activeFilters = document.getElementById('home-active-filters');
|
|
const activeType = document.getElementById('home-active-type');
|
|
const activeTypeIcon = document.getElementById('home-active-type-icon');
|
|
const activeTypeText = document.getElementById('home-active-type-text');
|
|
const activeCategory = document.getElementById('home-active-category');
|
|
const activeCategoryText = document.getElementById('home-active-category-text');
|
|
const activeTag = document.getElementById('home-active-tag');
|
|
const activeTagText = document.getElementById('home-active-tag-text');
|
|
const emptyState = document.getElementById('home-posts-empty');
|
|
const pinnedWrap = document.getElementById('home-pinned-wrap');
|
|
const popularCards = Array.from(document.querySelectorAll('[data-home-popular-card]'));
|
|
const popularEmpty = document.getElementById('home-popular-empty');
|
|
const popularList = document.getElementById('home-popular-list');
|
|
const popularCount = document.getElementById('home-popular-count');
|
|
const popularRangeButtons = Array.from(document.querySelectorAll('[data-home-popular-range]'));
|
|
const readingWindowPill = document.getElementById('home-stats-window-pill');
|
|
const readingViewsValue = document.getElementById('home-reading-views-value');
|
|
const readingCompletesValue = document.getElementById('home-reading-completes-value');
|
|
const readingProgressValue = document.getElementById('home-reading-progress-value');
|
|
const readingDurationValue = document.getElementById('home-reading-duration-value');
|
|
const readingWindowMeta = document.getElementById('home-reading-window-meta');
|
|
|
|
promptApi = window.__termiCommandPrompt;
|
|
const contentRanges = Array.isArray(contentRangesPayload) ? contentRangesPayload : [];
|
|
const contentRangesMap = contentRanges.reduce((map, item) => {
|
|
if (item?.key) {
|
|
map[item.key] = item;
|
|
}
|
|
return map;
|
|
}, {});
|
|
|
|
const typeMeta = {
|
|
all: { icon: 'fa-stream', label: t('common.all') },
|
|
article: { icon: 'fa-file-alt', label: t('common.article') },
|
|
tweet: { icon: 'fa-comment-dots', label: t('common.tweet') },
|
|
};
|
|
|
|
const state = {
|
|
type: initialHomeState.type || 'all',
|
|
category: initialHomeState.category || '',
|
|
tag: initialHomeState.tag || '',
|
|
range: initialHomeState.range || '7d',
|
|
};
|
|
|
|
function getActiveRange() {
|
|
return contentRangesMap[state.range] || contentRanges[0] || {
|
|
key: '7d',
|
|
label: '7d',
|
|
days: 7,
|
|
overview: {
|
|
pageViews: 0,
|
|
readCompletes: 0,
|
|
avgReadProgress: 0,
|
|
avgReadDurationMs: undefined,
|
|
},
|
|
};
|
|
}
|
|
|
|
function syncPopularRangeButtons() {
|
|
popularRangeButtons.forEach((button) => {
|
|
button.classList.toggle(
|
|
'is-active',
|
|
(button.getAttribute('data-home-popular-range') || '7d') === state.range
|
|
);
|
|
});
|
|
}
|
|
|
|
function sortPopularCards(cards) {
|
|
return [...cards].sort((left, right) => {
|
|
const leftViews = Number(left.getAttribute('data-home-popular-views') || '0');
|
|
const rightViews = Number(right.getAttribute('data-home-popular-views') || '0');
|
|
if (rightViews !== leftViews) {
|
|
return rightViews - leftViews;
|
|
}
|
|
|
|
const leftCompletes = Number(left.getAttribute('data-home-popular-completes') || '0');
|
|
const rightCompletes = Number(right.getAttribute('data-home-popular-completes') || '0');
|
|
if (rightCompletes !== leftCompletes) {
|
|
return rightCompletes - leftCompletes;
|
|
}
|
|
|
|
return String(left.getAttribute('data-home-slug') || '').localeCompare(
|
|
String(right.getAttribute('data-home-slug') || '')
|
|
);
|
|
});
|
|
}
|
|
|
|
function getActiveTokens() {
|
|
return [
|
|
state.type !== 'all' ? `type=${state.type}` : '',
|
|
state.category ? `category=${state.category}` : '',
|
|
state.tag ? `tag=${state.tag}` : '',
|
|
].filter(Boolean);
|
|
}
|
|
|
|
function syncPromptText(total) {
|
|
const tokens = getActiveTokens();
|
|
const discoverCommand = tokens.length
|
|
? t('home.promptDiscoverFiltered', { filters: tokens.join(' · ') })
|
|
: t('home.promptDiscoverDefault');
|
|
const postsCommand = tokens.length
|
|
? t('home.promptPostsFiltered', { count: Math.min(total, previewLimit), filters: tokens.join(' · ') })
|
|
: t('home.promptPostsDefault', { count: Math.min(total, previewLimit) });
|
|
promptApi?.set?.('home-discover-prompt', discoverCommand, { typing: false });
|
|
promptApi?.set?.('home-posts-prompt', postsCommand, { typing: false });
|
|
}
|
|
|
|
function syncRangeMetrics(filteredPopularCount) {
|
|
const activeRange = getActiveRange();
|
|
|
|
if (popularCount) {
|
|
popularCount.textContent = String(filteredPopularCount);
|
|
}
|
|
if (readingWindowPill) {
|
|
readingWindowPill.textContent = activeRange.label || state.range;
|
|
}
|
|
if (readingViewsValue) {
|
|
readingViewsValue.textContent = String(activeRange.overview?.pageViews ?? 0);
|
|
}
|
|
if (readingCompletesValue) {
|
|
readingCompletesValue.textContent = String(activeRange.overview?.readCompletes ?? 0);
|
|
}
|
|
if (readingProgressValue) {
|
|
readingProgressValue.textContent = `${Math.round(activeRange.overview?.avgReadProgress ?? 0)}%`;
|
|
}
|
|
if (readingDurationValue) {
|
|
const durationValue = activeRange.overview?.avgReadDurationMs;
|
|
if (!durationValue || durationValue <= 0) {
|
|
readingDurationValue.textContent = document.documentElement.lang === 'en' ? 'N/A' : '暂无';
|
|
} else if (durationValue < 1000) {
|
|
readingDurationValue.textContent = `${Math.round(durationValue)} ms`;
|
|
} else {
|
|
const seconds = durationValue / 1000;
|
|
if (seconds < 60) {
|
|
readingDurationValue.textContent =
|
|
document.documentElement.lang === 'en'
|
|
? `${seconds.toFixed(seconds >= 10 ? 0 : 1)}s`
|
|
: `${seconds.toFixed(seconds >= 10 ? 0 : 1)} 秒`;
|
|
} else {
|
|
const minutes = Math.floor(seconds / 60);
|
|
const restSeconds = Math.round(seconds % 60);
|
|
readingDurationValue.textContent =
|
|
document.documentElement.lang === 'en'
|
|
? `${minutes}m ${restSeconds}s`
|
|
: `${minutes} 分 ${restSeconds} 秒`;
|
|
}
|
|
}
|
|
}
|
|
if (readingWindowMeta) {
|
|
readingWindowMeta.textContent = t('home.statsWindowLabel', {
|
|
label: activeRange.label || state.range,
|
|
});
|
|
}
|
|
}
|
|
|
|
function updateUrl() {
|
|
const params = new URLSearchParams();
|
|
if (state.type && state.type !== 'all') params.set('type', state.type);
|
|
if (state.category) params.set('category', state.category);
|
|
if (state.tag) params.set('tag', state.tag);
|
|
const nextUrl = params.toString() ? `/?${params.toString()}` : '/';
|
|
window.history.replaceState({}, '', nextUrl);
|
|
}
|
|
|
|
function syncActiveButtons() {
|
|
typeButtons.forEach((button) => {
|
|
button.classList.toggle('is-active', (button.getAttribute('data-home-type-filter') || 'all') === state.type);
|
|
});
|
|
|
|
categoryButtons.forEach((button) => {
|
|
const value = (button.getAttribute('data-home-category-filter') || '').trim().toLowerCase();
|
|
const activeValue = state.category.trim().toLowerCase();
|
|
button.classList.toggle('is-active', Boolean(activeValue) && value === activeValue);
|
|
});
|
|
|
|
tagButtons.forEach((button) => {
|
|
const value = (button.getAttribute('data-home-tag-filter') || '').trim().toLowerCase();
|
|
const activeValue = state.tag.trim().toLowerCase();
|
|
button.classList.toggle('is-active', Boolean(activeValue) && value === activeValue);
|
|
});
|
|
}
|
|
|
|
function syncActiveSummary() {
|
|
const hasActive = state.type !== 'all' || Boolean(state.category) || Boolean(state.tag);
|
|
|
|
activeFilters?.classList.toggle('hidden', !hasActive);
|
|
clearFilters?.classList.toggle('hidden', !hasActive);
|
|
|
|
if (activeType && activeTypeIcon && activeTypeText) {
|
|
const typeInfo = typeMeta[state.type] || typeMeta.all;
|
|
activeType.classList.toggle('hidden', state.type === 'all');
|
|
activeTypeIcon.className = `fas ${typeInfo.icon} text-[10px]`;
|
|
activeTypeText.textContent = typeInfo.label;
|
|
}
|
|
|
|
if (activeCategory && activeCategoryText) {
|
|
activeCategory.classList.toggle('hidden', !state.category);
|
|
activeCategoryText.textContent = state.category;
|
|
if (state.category) {
|
|
activeCategory.setAttribute('style', categoryAccentMap[String(state.category).trim().toLowerCase()] || '');
|
|
} else {
|
|
activeCategory.removeAttribute('style');
|
|
}
|
|
}
|
|
|
|
if (activeTag && activeTagText) {
|
|
activeTag.classList.toggle('hidden', !state.tag);
|
|
activeTagText.textContent = state.tag;
|
|
if (state.tag) {
|
|
activeTag.setAttribute('style', tagAccentMap[String(state.tag).trim().toLowerCase()] || '');
|
|
} else {
|
|
activeTag.removeAttribute('style');
|
|
}
|
|
}
|
|
}
|
|
|
|
function syncPostTagSelection() {
|
|
if (!postsRoot) return;
|
|
|
|
const activeValue = state.tag.trim().toLowerCase();
|
|
const tagLinks = postsRoot.querySelectorAll('a[href*="tag="]');
|
|
|
|
tagLinks.forEach((link) => {
|
|
const href = link.getAttribute('href') || '';
|
|
let tagValue = '';
|
|
|
|
try {
|
|
tagValue = new URL(href, window.location.origin).searchParams.get('tag')?.trim().toLowerCase() || '';
|
|
} catch {
|
|
tagValue = '';
|
|
}
|
|
|
|
link.classList.toggle('is-active', Boolean(activeValue) && tagValue === activeValue);
|
|
});
|
|
}
|
|
|
|
function applyHomeFilters(pushHistory = true) {
|
|
const filtered = postCards.filter((card) => {
|
|
const type = card.getAttribute('data-home-type') || '';
|
|
const category = (card.getAttribute('data-home-category') || '').trim().toLowerCase();
|
|
const tags = `|${(card.getAttribute('data-home-tags') || '').trim().toLowerCase()}|`;
|
|
const typeMatch = state.type === 'all' || type === state.type;
|
|
const categoryMatch = !state.category || category === state.category.trim().toLowerCase();
|
|
const tagMatch = !state.tag || tags.includes(`|${state.tag.trim().toLowerCase()}|`);
|
|
return typeMatch && categoryMatch && tagMatch;
|
|
});
|
|
|
|
postCards.forEach((card) => card.classList.add('hidden'));
|
|
filtered.slice(0, previewLimit).forEach((card) => card.classList.remove('hidden'));
|
|
const filteredPopular = popularCards.filter((card) => {
|
|
const range = card.getAttribute('data-home-range') || '7d';
|
|
const type = card.getAttribute('data-home-type') || '';
|
|
const category = (card.getAttribute('data-home-category') || '').trim().toLowerCase();
|
|
const tags = `|${(card.getAttribute('data-home-tags') || '').trim().toLowerCase()}|`;
|
|
const rangeMatch = range === state.range;
|
|
const typeMatch = state.type === 'all' || type === state.type;
|
|
const categoryMatch = !state.category || category === state.category.trim().toLowerCase();
|
|
const tagMatch = !state.tag || tags.includes(`|${state.tag.trim().toLowerCase()}|`);
|
|
return rangeMatch && typeMatch && categoryMatch && tagMatch;
|
|
});
|
|
const sortedPopular = sortPopularCards(filteredPopular);
|
|
popularCards.forEach((card) => card.classList.add('hidden'));
|
|
sortedPopular.slice(0, popularPreviewLimit).forEach((card, index) => {
|
|
card.classList.remove('hidden');
|
|
const rankLabel = card.querySelector('[data-home-popular-rank-label]');
|
|
if (rankLabel) {
|
|
rankLabel.textContent = String(index + 1);
|
|
}
|
|
popularList?.appendChild(card);
|
|
});
|
|
|
|
const total = filtered.length;
|
|
const hasPinned = filtered.some((card) => card.getAttribute('data-home-pinned') === 'true');
|
|
|
|
if (resultsCount) {
|
|
resultsCount.textContent = t('common.resultsCount', { count: total });
|
|
}
|
|
if (discoveryResults) {
|
|
discoveryResults.textContent = t('common.resultsCount', { count: total });
|
|
}
|
|
if (emptyState) {
|
|
emptyState.classList.toggle('hidden', total > 0);
|
|
}
|
|
if (pinnedWrap) {
|
|
pinnedWrap.classList.toggle('hidden', !hasPinned);
|
|
}
|
|
if (popularEmpty) {
|
|
popularEmpty.classList.toggle('hidden', filteredPopular.length > 0);
|
|
}
|
|
|
|
syncActiveButtons();
|
|
syncActiveSummary();
|
|
syncPostTagSelection();
|
|
syncPopularRangeButtons();
|
|
syncRangeMetrics(filteredPopular.length);
|
|
syncPromptText(total);
|
|
|
|
if (pushHistory) {
|
|
updateUrl();
|
|
}
|
|
}
|
|
|
|
typeButtons.forEach((button) => {
|
|
button.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
state.type = button.getAttribute('data-home-type-filter') || 'all';
|
|
applyHomeFilters();
|
|
});
|
|
});
|
|
|
|
categoryButtons.forEach((button) => {
|
|
button.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
const nextValue = button.getAttribute('data-home-category-filter') || '';
|
|
const normalizedCurrent = state.category.trim().toLowerCase();
|
|
state.category = normalizedCurrent === nextValue.trim().toLowerCase() ? '' : nextValue;
|
|
applyHomeFilters();
|
|
});
|
|
});
|
|
|
|
tagButtons.forEach((button) => {
|
|
button.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
const nextValue = button.getAttribute('data-home-tag-filter') || '';
|
|
const normalizedCurrent = state.tag.trim().toLowerCase();
|
|
state.tag = normalizedCurrent === nextValue.trim().toLowerCase() ? '' : nextValue;
|
|
applyHomeFilters();
|
|
});
|
|
});
|
|
|
|
clearFilters?.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
state.type = 'all';
|
|
state.category = '';
|
|
state.tag = '';
|
|
applyHomeFilters();
|
|
});
|
|
|
|
popularRangeButtons.forEach((button) => {
|
|
button.addEventListener('click', () => {
|
|
state.range = button.getAttribute('data-home-popular-range') || '7d';
|
|
applyHomeFilters(false);
|
|
});
|
|
});
|
|
|
|
postsRoot?.addEventListener('click', (event) => {
|
|
const target = event.target instanceof Element ? event.target.closest('a[href*="tag="]') : null;
|
|
if (!target) return;
|
|
|
|
const href = target.getAttribute('href') || '';
|
|
|
|
try {
|
|
const nextTag = new URL(href, window.location.origin).searchParams.get('tag') || '';
|
|
if (!nextTag) return;
|
|
event.preventDefault();
|
|
const normalizedCurrent = state.tag.trim().toLowerCase();
|
|
state.tag = normalizedCurrent === nextTag.trim().toLowerCase() ? '' : nextTag;
|
|
applyHomeFilters();
|
|
} catch {
|
|
return;
|
|
}
|
|
});
|
|
|
|
applyHomeFilters(false);
|
|
document.body?.setAttribute('data-home-interactive-ready', 'true');
|
|
window.__termiHomeReady = true;
|
|
})();
|
|
</script>
|