263 lines
13 KiB
Plaintext
263 lines
13 KiB
Plaintext
---
|
|
import type { PostEntry } from '@/lib/content';
|
|
|
|
interface Props { posts: PostEntry[]; }
|
|
interface WeekCell { week: number; words: number; level: number; }
|
|
|
|
const { posts } = Astro.props;
|
|
const currentYear = new Date().getFullYear();
|
|
const years = Array.from({ length: 3 }, (_, index) => currentYear - 2 + index);
|
|
|
|
function countWords(source: string): number {
|
|
const text = source
|
|
.replace(/```[\s\S]*?```/g, '')
|
|
.replace(/`[^`]+`/g, '')
|
|
.replace(/!\[[^\]]*\]\([^)]*\)/g, '')
|
|
.replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
|
|
.replace(/<[^>]+>/g, '')
|
|
.replace(/https?:\/\/\S+/g, '')
|
|
.replace(/[#{*_~>`|+-]/g, ' ')
|
|
.replace(/\s+/g, ' ')
|
|
.trim();
|
|
const chineseCharacters = text.match(/[\u3400-\u4dbf\u4e00-\u9fff]/g)?.length ?? 0;
|
|
const otherWords = text
|
|
.replace(/[\u3400-\u4dbf\u4e00-\u9fff]/g, ' ')
|
|
.split(/\s+/)
|
|
.filter(Boolean).length;
|
|
return chineseCharacters + otherWords;
|
|
}
|
|
|
|
function getIsoWeek(date: Date): { year: number; week: number } {
|
|
const utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
|
|
const day = utcDate.getUTCDay() || 7;
|
|
utcDate.setUTCDate(utcDate.getUTCDate() + 4 - day);
|
|
const year = utcDate.getUTCFullYear();
|
|
const yearStart = new Date(Date.UTC(year, 0, 1));
|
|
const week = Math.ceil(((utcDate.getTime() - yearStart.getTime()) / 86_400_000 + 1) / 7);
|
|
return { year, week };
|
|
}
|
|
|
|
function getLevel(words: number): number {
|
|
if (words === 0) return 0;
|
|
if (words < 1_000) return 1;
|
|
if (words < 3_000) return 2;
|
|
if (words < 8_000) return 3;
|
|
return 4;
|
|
}
|
|
|
|
const wordsByWeek = new Map<string, number>();
|
|
let totalWords = 0;
|
|
for (const post of posts) {
|
|
const words = countWords(post.body ?? '');
|
|
totalWords += words;
|
|
const { year, week } = getIsoWeek(post.data.pubDate);
|
|
if (!years.includes(year)) continue;
|
|
const key = `${year}-${week}`;
|
|
wordsByWeek.set(key, (wordsByWeek.get(key) ?? 0) + words);
|
|
}
|
|
|
|
const yearRows = years.map((year) => ({
|
|
year,
|
|
weeks: Array.from({ length: 53 }, (_, index): WeekCell => {
|
|
const week = index + 1;
|
|
const words = wordsByWeek.get(`${year}-${week}`) ?? 0;
|
|
return { week, words, level: getLevel(words) };
|
|
})
|
|
}));
|
|
|
|
const totalWordsLabel = totalWords >= 10_000
|
|
? `${(totalWords / 10_000).toFixed(2)}W`
|
|
: totalWords.toLocaleString('zh-CN');
|
|
---
|
|
|
|
<section class="writing-heatmap" aria-labelledby="writing-heatmap-title" data-pagefind-ignore="all">
|
|
<header>
|
|
<div class="writing-heading">
|
|
<h2 id="writing-heatmap-title">写作热力图</h2>
|
|
<p class="writing-total">自博客建立以来，已输出 <span class="writing-total-value">{totalWordsLabel}</span><span class="writing-total-label">字</span></p>
|
|
</div>
|
|
<div class="heatmap-legend" aria-label="写作字数：从少到多">
|
|
<span>少</span>
|
|
{[0, 1, 2, 3, 4].map((level) => <i class={`level-${level}`} aria-hidden="true"></i>)}
|
|
<span>多</span>
|
|
</div>
|
|
</header>
|
|
<div class="heatmap-viewport" data-heatmap-viewport>
|
|
<div class="heatmap-scroll" aria-label="最近三年每周写作字数热力图" data-heatmap-scroll>
|
|
<div class="heatmap-grid">
|
|
{yearRows.map((row) => <div class="heatmap-row">
|
|
<strong>{row.year}</strong>
|
|
{row.weeks.map((cell) => <span
|
|
class={`heatmap-cell level-${cell.level}`}
|
|
aria-label={`${row.year} 年第 ${cell.week} 周，${cell.words.toLocaleString('zh-CN')} 字`}
|
|
>
|
|
<span class="heatmap-tooltip" role="tooltip"><span class="heatmap-tooltip-code">{row.year} W{String(cell.week).padStart(2, '0')} · {cell.words.toLocaleString('zh-CN')}</span><span class="heatmap-tooltip-label">字</span></span>
|
|
</span>)}
|
|
</div>)}
|
|
<div class="week-labels" aria-hidden="true">
|
|
<span></span>
|
|
{Array.from({ length: 53 }, (_, index) => <span>{[1, 14, 27, 40, 53].includes(index + 1) ? `W${String(index + 1).padStart(2, '0')}` : ''}</span>)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
let cleanupHeatmap: (() => void) | undefined;
|
|
|
|
const initHeatmap = () => {
|
|
cleanupHeatmap?.();
|
|
cleanupHeatmap = undefined;
|
|
|
|
const heatmapScroll = document.querySelector<HTMLElement>('[data-heatmap-scroll]');
|
|
if (!heatmapScroll) return;
|
|
|
|
const heatmapViewport = heatmapScroll.closest<HTMLElement>('[data-heatmap-viewport]');
|
|
const heatmapGrid = heatmapScroll.querySelector<HTMLElement>('.heatmap-grid');
|
|
const root = document.documentElement;
|
|
const baseRootFontSize = 16;
|
|
let baseCellSize = 0;
|
|
let activeTooltip: { cell: HTMLElement; tooltip: HTMLElement; placeholder: Comment } | undefined;
|
|
|
|
const updateTooltipPosition = () => {
|
|
if (!activeTooltip) return;
|
|
const { cell, tooltip } = activeTooltip;
|
|
const cellRect = cell.getBoundingClientRect();
|
|
const tooltipRect = tooltip.getBoundingClientRect();
|
|
const gap = 6;
|
|
const horizontalPadding = 8;
|
|
const left = Math.min(
|
|
Math.max(cellRect.left + cellRect.width / 2, tooltipRect.width / 2 + horizontalPadding),
|
|
window.innerWidth - tooltipRect.width / 2 - horizontalPadding
|
|
);
|
|
const fitsAbove = cellRect.top >= tooltipRect.height + gap;
|
|
const fitsBelow = cellRect.bottom + tooltipRect.height + gap <= window.innerHeight;
|
|
const top = fitsAbove || !fitsBelow
|
|
? cellRect.top - tooltipRect.height - gap
|
|
: cellRect.bottom + gap;
|
|
tooltip.style.left = `${left}px`;
|
|
tooltip.style.top = `${Math.max(horizontalPadding, top)}px`;
|
|
};
|
|
|
|
const closeTooltip = () => {
|
|
if (!activeTooltip) return;
|
|
const { tooltip, placeholder } = activeTooltip;
|
|
tooltip.removeAttribute('data-heatmap-portal');
|
|
tooltip.removeAttribute('style');
|
|
placeholder.parentNode?.insertBefore(tooltip, placeholder);
|
|
placeholder.remove();
|
|
activeTooltip = undefined;
|
|
};
|
|
|
|
const openTooltip = (cell: HTMLElement) => {
|
|
closeTooltip();
|
|
const tooltip = cell.querySelector<HTMLElement>('.heatmap-tooltip');
|
|
if (!tooltip) return;
|
|
const placeholder = document.createComment('heatmap-tooltip');
|
|
tooltip.replaceWith(placeholder);
|
|
tooltip.setAttribute('data-heatmap-portal', '');
|
|
document.body.append(tooltip);
|
|
activeTooltip = { cell, tooltip, placeholder };
|
|
updateTooltipPosition();
|
|
requestAnimationFrame(() => tooltip.classList.add('is-visible'));
|
|
};
|
|
|
|
const heatmapCells = [...heatmapScroll.querySelectorAll<HTMLElement>('.heatmap-cell')];
|
|
const cellListeners = heatmapCells.map((cell) => {
|
|
const onMouseEnter = () => openTooltip(cell);
|
|
cell.addEventListener('mouseenter', onMouseEnter);
|
|
cell.addEventListener('mouseleave', closeTooltip);
|
|
return { cell, onMouseEnter };
|
|
});
|
|
window.addEventListener('resize', updateTooltipPosition);
|
|
window.addEventListener('scroll', updateTooltipPosition, true);
|
|
|
|
const updateHeatmapFades = () => {
|
|
if (!heatmapViewport || !heatmapGrid) return;
|
|
const maxScrollLeft = Math.max(0, heatmapGrid.getBoundingClientRect().width - heatmapScroll.clientWidth);
|
|
heatmapViewport.classList.toggle('can-scroll-left', heatmapScroll.scrollLeft > 1);
|
|
heatmapViewport.classList.toggle('can-scroll-right', heatmapScroll.scrollLeft < maxScrollLeft - 1);
|
|
};
|
|
|
|
const updateHeatmapOverflow = () => {
|
|
if (!heatmapGrid) return;
|
|
const rootFontSize = Number.parseFloat(getComputedStyle(root).fontSize) || baseRootFontSize;
|
|
const scale = rootFontSize / baseRootFontSize;
|
|
const availableCellSize = (heatmapScroll.clientWidth - 3.25 * baseRootFontSize) / 53;
|
|
|
|
if (scale <= 1.01 || baseCellSize === 0) {
|
|
baseCellSize = Math.max(8, availableCellSize);
|
|
}
|
|
heatmapGrid.style.setProperty('--heatmap-cell-size', `${baseCellSize * scale}px`);
|
|
heatmapViewport?.classList.toggle('has-overflow', heatmapGrid.getBoundingClientRect().width > heatmapScroll.clientWidth + 1);
|
|
updateHeatmapFades();
|
|
};
|
|
|
|
const resizeObserver = new ResizeObserver(updateHeatmapOverflow);
|
|
const fontScaleObserver = new MutationObserver(updateHeatmapOverflow);
|
|
resizeObserver.observe(heatmapScroll);
|
|
fontScaleObserver.observe(root, { attributes: true, attributeFilter: ['style'] });
|
|
heatmapScroll.addEventListener('scroll', updateHeatmapFades, { passive: true });
|
|
updateHeatmapOverflow();
|
|
|
|
cleanupHeatmap = () => {
|
|
closeTooltip();
|
|
cellListeners.forEach(({ cell, onMouseEnter }) => {
|
|
cell.removeEventListener('mouseenter', onMouseEnter);
|
|
cell.removeEventListener('mouseleave', closeTooltip);
|
|
});
|
|
window.removeEventListener('resize', updateTooltipPosition);
|
|
window.removeEventListener('scroll', updateTooltipPosition, true);
|
|
resizeObserver.disconnect();
|
|
fontScaleObserver.disconnect();
|
|
heatmapScroll.removeEventListener('scroll', updateHeatmapFades);
|
|
};
|
|
};
|
|
|
|
document.addEventListener('astro:page-load', initHeatmap);
|
|
initHeatmap();
|
|
</script>
|
|
|
|
<style>
|
|
.writing-heatmap { margin-bottom: 3.5rem; }
|
|
.writing-heatmap header { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
|
|
.writing-heading { min-width: 0; }
|
|
.writing-heatmap h2 { margin: 0; font-size: 1.375rem; font-weight: 400; }
|
|
.writing-total { margin: .25rem 0 0; color: var(--color-muted); font-size: .8125rem; }
|
|
.writing-total-value { font-family: Consolas, Menlo, Monaco, 'lucida_console', 'Liberation_Mono', 'Courier_New', 'andale_mono', monospaceX, monospace, sans-serif; }
|
|
.writing-total-label { font-family: var(--reading-font-family); }
|
|
.heatmap-legend { display: flex; gap: .25rem; align-items: center; padding-top: .25rem; color: var(--color-muted); font-size: .75rem; }
|
|
.heatmap-legend i { width: .75rem; height: .75rem; }
|
|
.heatmap-viewport { position: relative; }
|
|
.heatmap-viewport::before,
|
|
.heatmap-viewport::after { display: none; position: absolute; z-index: 1; top: 0; bottom: .5rem; width: 1.75rem; content: ''; pointer-events: none; }
|
|
.heatmap-viewport::before { left: 0; background: linear-gradient(90deg, var(--color-bg) 15%, transparent); }
|
|
.heatmap-viewport::after { right: 0; background: linear-gradient(90deg, transparent, var(--color-bg) 85%); }
|
|
.heatmap-viewport.has-overflow.can-scroll-left::before,
|
|
.heatmap-viewport.has-overflow.can-scroll-right::after { display: block; }
|
|
.heatmap-scroll { overflow-x: hidden; padding: .125rem 0 .5rem; container-type: inline-size; scrollbar-width: thin; }
|
|
.heatmap-viewport.has-overflow .heatmap-scroll { overflow-x: auto; }
|
|
.heatmap-grid { --heatmap-label-width: 3.25rem; --heatmap-cell-size: clamp(8px, .75rem, 18px); display: grid; width: max-content; gap: 4px; }
|
|
.heatmap-row,
|
|
.week-labels { display: grid; grid-template-columns: var(--heatmap-label-width) repeat(53, var(--heatmap-cell-size)); column-gap: 0; row-gap: 2px; align-items: center; }
|
|
.heatmap-row strong { color: var(--color-text); font-family: Consolas, Menlo, Monaco, 'lucida_console', 'Liberation_Mono', 'Courier_New', 'andale_mono', monospaceX, monospace, sans-serif; font-size: .8125rem; }
|
|
.heatmap-cell { position: relative; display: block; width: var(--heatmap-cell-size); height: var(--heatmap-cell-size); }
|
|
.heatmap-tooltip { position: absolute; bottom: calc(100% + .375rem); left: 50%; z-index: 10; display: inline-block; padding: .3rem .5rem; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-soft); font-size: .75rem; line-height: 1.2; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, .25rem); transition: opacity 160ms ease, transform 160ms ease; }
|
|
.heatmap-cell:hover .heatmap-tooltip { opacity: 1; transform: translate(-50%, 0); }
|
|
.heatmap-tooltip[data-heatmap-portal] { position: fixed; top: 0; left: 0; z-index: 1000; bottom: auto; transform: translateX(-50%); opacity: 0; }
|
|
.heatmap-tooltip[data-heatmap-portal].is-visible { opacity: 1; }
|
|
.heatmap-tooltip-code { font-family: Consolas, Menlo, Monaco, 'lucida_console', 'Liberation_Mono', 'Courier_New', 'andale_mono', monospaceX, monospace, sans-serif; }
|
|
.heatmap-tooltip-label { font-family: var(--reading-font-family); }
|
|
.week-labels span { color: var(--color-muted); font-family: Consolas, Menlo, Monaco, 'lucida_console', 'Liberation_Mono', 'Courier_New', 'andale_mono', monospaceX, monospace, sans-serif; font-size: .625rem; text-align: center; white-space: nowrap; }
|
|
.level-0 { background: var(--heatmap-0); }
|
|
.level-1 { background: var(--heatmap-1); }
|
|
.level-2 { background: var(--heatmap-2); }
|
|
.level-3 { background: var(--heatmap-3); }
|
|
.level-4 { background: var(--heatmap-4); }
|
|
|
|
@media (max-width: 37.5rem) {
|
|
.writing-heatmap { display: none; }
|
|
}
|
|
</style>
|