ezal-theme-example 0.0.1

package/layouts/article.tsx

@@ -0,0 +1,145 @@
+import { Article, URL } from 'ezal';
+import type { Context } from 'ezal-markdown';
+import base from './base';
+import Image from './components/Image';
+
+const { theme } = context;
+const page = context.page as Article;
+const markdown = page.renderedData as Context;
+
+const categories = [
+	...page.categories.values().map((cate) => (
+		<a
+			class="link"
+			href={URL.for(URL.encode(`/category/${cate.path.join('/')}/`))}
+		>
+			{cate.path.join('/')}
+		</a>
+	)),
+];
+
+const tags = [
+	...page.tags.keys().map((tag) => (
+		<a class="link tag" href={URL.for(URL.encode(`/tag/${tag}/`))}>
+			{tag}
+		</a>
+	)),
+];
+
+const date = page.date.toPlainDate().toString();
+const dateTime = page.date.toString({ timeZoneName: 'never' });
+const update = page.updated.toPlainDate().toString();
+const updatedTime = page.updated.toString({ timeZoneName: 'never' });
+
+const toc = <aside />;
+let current = toc;
+let currentLevel = 0;
+for (const item of markdown.toc.values()) {
+	const el = (
+		<li>
+			<a href={`#${item.anchor}`}>{item.name}</a>
+		</li>
+	);
+	if (currentLevel < item.level) {
+		const next = <ol />;
+		next.append(el);
+		current.append(next);
+		if (current === toc) next.attr.class = 'toc';
+	} else if (currentLevel === item.level) {
+		current.after(el);
+	} else {
+		while (currentLevel > item.level) {
+			current = current.parent.parent;
+			currentLevel--;
+		}
+		current.after(el);
+	}
+	current = el;
+	currentLevel = item.level;
+}
+
+const articles = Article.getAll().sort(context.compareByDate);
+const index = articles.indexOf(page);
+const prev: Article | undefined = articles[index - 1];
+const next: Article | undefined = articles[index + 1];
+
+/* const relatedMap = new Map<Article, number>();
+for (const tag of page.tags.values()) {
+	for (const article of tag.getArticles()) {
+		if (article === page) continue;
+		const count = relatedMap.get(article);
+		relatedMap.set(article, (count ?? 0) + 1);
+	}
+}
+const related = relatedMap
+	.entries()
+	.toArray()
+	.sort(([_, a], [__, b]) => b - a)
+	.slice(0, 6)
+	.map(([a]) => a);
+
+const relatedElements: JSX.Element[] = [];
+if (related.length > 0) {
+	relatedElements.push(<h2 class="related-title wrap">相关推荐</h2>);
+	relatedElements.push(
+		<div class="related wrap">
+			{related.map((article) => (
+				<a href={article.url}>{article.title}</a>
+			))}
+		</div>,
+	);
+} */
+
+export default base(
+	<header>
+		{page.data.cover ? <Image url={page.data.cover} alt={page.title} /> : null}
+		<div class="wrap">
+			<div class="cates">
+				{categories}
+				{tags}
+			</div>
+			<h1>{page.title}</h1>
+			<div class="article-info">
+				<span class="icon-word-count" title="字数">
+					{markdown.counter.value}
+				</span>
+				<span class="icon-timer" title="预计阅读时长">
+					~{markdown.counter.minute2read().toFixed(0)} 分钟
+				</span>
+				<time class="icon-date" title="发布日期" datetime={dateTime}>
+					{date}
+				</time>
+				<time class="icon-updated" title="更新日期" datetime={updatedTime}>
+					{update}
+				</time>
+				{theme.waline?.pageview && page.data?.comment !== false ? (
+					<span class="icon-hot waline-pageview-count" title="阅读量">
+						...
+					</span>
+				) : null}
+			</div>
+		</div>
+	</header>,
+	<main>
+		{toc}
+		<article>
+			<RawHTML html={page.content} />
+		</article>
+	</main>,
+	// ...relatedElements,
+	<div class="pagination wrap rounded">
+		{prev ? (
+			<a href={URL.for(prev.url)} class="prev">
+				<i class="icon-left"></i>
+				{prev.title}
+			</a>
+		) : null}
+		<div class="flex"></div>
+		{next ? (
+			<a href={URL.for(next.url)} class="next">
+				{next.title}
+				<i class="icon-right"></i>
+			</a>
+		) : null}
+	</div>,
+);

package/layouts/base.tsx

@@ -0,0 +1,20 @@
+import Footer from './components/Footer';
+import Head from './components/Head';
+import Nav from './components/Nav';
+import Search from './components/Search';
+import Waline from './components/Waline';
+
+export default (...elements: JSX.Element[]) => (
+	<Doc lang={context.site.language}>
+		<head>
+			<Head />
+		</head>
+		<body>
+			<Nav />
+			{elements}
+			<Search />
+			<Waline />
+			<Footer />
+		</body>
+	</Doc>
+);

package/layouts/category.tsx

@@ -0,0 +1,18 @@
+import base from './base';
+import ArchiveArticleList from './components/ArchiveArticleList';
+import type { CategoryPage } from './context';
+
+const page = context.page as CategoryPage;
+
+export default base(
+	<header>
+		<div class="wrap">
+			<h1>{page.title}</h1>
+		</div>
+	</header>,
+	<main>
+		<ArchiveArticleList
+			articles={page.data.category.getArticles().sort(context.compareByDate)}
+		/>
+	</main>,
+);

package/layouts/components/ArchiveArticleList.tsx

@@ -0,0 +1,14 @@
+import { type Article, URL } from 'ezal';
+
+export default ({ articles }: { articles: Article[] }) => (
+	<ul class="archive">
+		{articles.map((article) => (
+			<li>
+				<time datetime={article.date.toString({ timeZoneName: 'never' })}>
+					{article.date.toPlainDate().toString()}
+				</time>
+				<a href={URL.for(article.url)}>{article.title}</a>
+			</li>
+		))}
+	</ul>
+);

package/layouts/components/Article.tsx

@@ -0,0 +1,46 @@
+import { type Article, URL } from 'ezal';
+import Image from './Image';
+
+export default ({ article }: { article: Article }): JSX.Element => (
+	<a class="article rounded" href={URL.for(article.url)}>
+		{article.data?.cover
+			? [
+					<Image
+						class="bloom"
+						url={URL.for(URL.resolve(article.url, article.data.cover))}
+						alt={article.title}
+					/>,
+					<Image
+						url={URL.for(URL.resolve(article.url, article.data.cover))}
+						alt={article.title}
+					/>,
+				]
+			: null}
+		<div class="article-info">
+			<object>
+				{...article.categories
+					.values()
+					.map((category) => (
+						<a class="link" href={URL.for('category', ...category.path)}>
+							{category.path.join('/')}
+						</a>
+					))
+					.toArray()}
+			</object>
+			<h2>{article.title}</h2>
+			<object>
+				{article.tags
+					.values()
+					.map((tag) => (
+						<a class="tag link" href={URL.for(`/tag/${tag.name}/`)}>
+							{tag.name}
+						</a>
+					))
+					.toArray()}
+				<time datetime={article.date.toString({ timeZoneName: 'never' })}>
+					{article.date.toPlainDate().toString()}
+				</time>
+			</object>
+		</div>
+	</a>
+);

package/layouts/components/Contact.tsx

@@ -0,0 +1,14 @@
+import { URL } from 'ezal';
+
+export default (options?: { style?: JSX.IntrinsicAttributes['style'] }) => (
+	<div class="contact" style={options?.style}>
+		{context.theme.contact?.map(({ url, name, icon, color }) => (
+			<a
+				class={`icon-${icon}`}
+				href={URL.for(url)}
+				title={name}
+				style={{ $color: color }}
+			></a>
+		))}
+	</div>
+);

package/layouts/components/Footer.tsx

@@ -0,0 +1,44 @@
+import { Time } from 'ezal';
+import Contact from './Contact';
+
+const since = context.theme.since;
+const now = Time.now();
+const author = context.site.author;
+
+export default () => (
+	<footer>
+		<div class="wrap">
+			<Contact />
+			<br />
+			{'小站运行了'}
+			<time id="since" datetime={since?.toString({ timeZoneName: 'never' })}>
+				好多好多
+			</time>
+			{'天'}
+			<br />
+			{'上次更新于 '}
+			<time
+				id="last"
+				datetime={now.toString({ timeZoneName: 'never' })}
+			>{`${now.year} 年 ${now.year} 月 ${now.month} 日`}</time>
+			<br />
+			{'基于 '}
+			<a href="https://github.com/JonnyJong/ezal">Ezal</a>
+			{' 博客框架 | '}
+			<a href="https://github.com/JonnyJong/ezal/tree/main/packages/ezal-theme-example">
+				ezal-theme-example
+			</a>
+			{' 主题'}
+			<br />
+			{`©${since ? `${since.year}~` : ''}`}
+			<time id="now"></time>
+			{` By ${author}`}
+			<br />
+			{'若无特别说明，所有文章均采用 '}
+			<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
+				CC-BY-NC-SA 4.0
+			</a>
+			{' 许可协议'}
+		</div>
+	</footer>
+);

package/layouts/components/Head.tsx

@@ -0,0 +1,119 @@
+import { URL } from 'ezal';
+import * as mime from 'mime-types';
+
+const { site, page, theme } = context;
+
+function resolveFavicons(): [type: string, href: string][] {
+	if (!theme.favicon) return [];
+	let icons = theme.favicon;
+	if (!Array.isArray(icons)) icons = [icons];
+	return icons.map(String).map<[string, string]>((href) => {
+		const type = mime.lookup(href);
+		return [type ? type : '', href];
+	});
+}
+
+const favicons = resolveFavicons();
+const title = page.title ? `${page.title} - ${site.title}` : site.title;
+const description = page.description ?? site.description;
+const keywords = (page.keywords ?? site.keywords ?? []).join(',');
+const canonicalUrl = URL.full(page.url);
+const cover = page.data.cover ? URL.full(page.url, page.data.cover) : undefined;
+
+const katex =
+	theme.cdn?.katex ?? 'https://unpkg.com/katex@0.16.21/dist/katex.min.css';
+
+const enableComment =
+	theme.waline &&
+	(page.data?.comment || ('tags' in page && page.data?.comment !== false));
+const waline =
+	theme.cdn?.walineCSS ?? 'https://unpkg.com/@waline/client@v3/dist/waline.css';
+
+export default (slot?: any) => (
+	<head>
+		{/* 基本 */}
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="canonical" href={canonicalUrl} />
+		{favicons.map(([type, href]) => (
+			<link rel="icon" type={type} href={URL.full(href)} />
+		))}
+		<title>{title}</title>
+		<link rel="sitemap" href={URL.full('sitemap.xml')} />
+		<link
+			rel="alternate"
+			type="application/atom+xml"
+			title={site.title}
+			href={URL.full('atom.xml')}
+		/>
+		<link
+			rel="alternate"
+			type="application/rss+xml"
+			title={site.title}
+			href={URL.full('rss.xml')}
+		/>
+		<link
+			rel="alternate"
+			type="application/feed+json"
+			title={site.title}
+			href={URL.full('feed.json')}
+		/>
+		<meta name="theme-color" content="dark light" />
+		<meta name="author" content={site.author} />
+		{description ? <meta name="description" content={description} /> : null}
+		{keywords ? <meta name="keywords" content={keywords} /> : null}
+		{/* Open Graph */}
+		<meta property="og:site_name" content={site.title} />
+		<meta property="og:title" content={title} />
+		{cover ? <meta property="og:image" content={cover} /> : null}
+		<meta property="og:url" content={canonicalUrl} />
+		<meta property="og:locale" content={site.language} />
+		{favicons[0] ? (
+			<meta property="og:image" content={URL.full(favicons[0][1])} />
+		) : null}
+		<meta
+			property="og:type"
+			content={page.layout === 'article' ? 'article' : 'website'}
+		/>
+		{/* Twitter */}
+		<meta name="twitter:card" content="card" />
+		<meta name="twitter:author" content={site.author} />
+		<meta name="twitter:title" content={title} />
+		<meta name="twitter:description" content={description} />
+		{cover ? <meta name="twitter:image" content={cover} /> : null}
+		{'tags' in page
+			? [
+					<meta name="twitter:tag" content={page.tags.keys().toArray().join(',')} />,
+					<meta name="twitter:published_time" content={page.date.toString()} />,
+					<meta name="twitter:modified_time" content={page.updated.toString()} />,
+				]
+			: null}
+		{/* 资源 */}
+		{'renderedData' in page && page.renderedData.shared.tex ? (
+			<link rel="stylesheet" href={URL.for(katex)} />
+		) : null}
+		{enableComment ? <link rel="stylesheet" href={URL.for(waline)} /> : null}
+		<link
+			rel="preload"
+			href="https://unpkg.com/@fontsource/maple-mono@5.2.4/files/maple-mono-latin-400-normal.woff2"
+			as="font"
+			type="font/woff2"
+			crossorigin
+		/>
+		<link
+			rel="preload"
+			href="https://unpkg.com/@fontsource/maple-mono@5.2.4/files/maple-mono-latin-400-normal.woff"
+			as="font"
+			type="font/woff"
+			crossorigin
+		/>
+		<link rel="stylesheet" href={URL.for(`styles/${page.layout}.css`)} />
+		<script src={URL.for(`scripts/${page.layout}.js`)} async defer></script>
+		{'renderedData' in page && page.renderedData.shared.codeblock ? (
+			<link rel="stylesheet" href={URL.for('styles/code.css')} />
+		) : null}
+		{/* 额外 */}
+		{slot}
+		{theme.inject ? <RawHTML html={theme.inject} /> : null}
+	</head>
+);

package/layouts/components/Image.tsx

@@ -0,0 +1,42 @@
+import { URL } from 'ezal';
+
+const { page, getImageInfo, mime } = context;
+
+export default ({
+	url,
+	alt,
+	...extra
+}: { url: string; alt: string } & JSX.IntrinsicAttributes) => {
+	const info = getImageInfo(URL.resolve(page.url, url));
+	if (!info.rule)
+		return (
+			<img
+				src={URL.for(url)}
+				alt={alt}
+				width={info.metadata?.width}
+				height={info.metadata?.height}
+				style={{ $imgColor: info.metadata?.color }}
+				loading="lazy"
+				{...extra}
+			/>
+		);
+	return (
+		<picture>
+			{info.rule.slice(0, -1).map((ext) => (
+				<source
+					srcset={URL.for(URL.encode(URL.extname(url, `.opt${ext}`)))}
+					type={mime.lookup(ext) as any}
+				/>
+			))}
+			<img
+				src={URL.for(URL.encode(URL.extname(url, info.rule.at(-1))))}
+				alt={alt}
+				width={info.metadata?.width}
+				height={info.metadata?.height}
+				style={{ $imgColor: info.metadata?.color }}
+				loading="lazy"
+				{...extra}
+			/>
+		</picture>
+	);
+};

package/layouts/components/Nav.tsx

@@ -0,0 +1,33 @@
+import { URL } from 'ezal';
+
+const { site, theme } = context;
+
+export default () => (
+	<nav>
+		<a class="site link" href={URL.for('/')}>
+			{site.title}
+		</a>
+		<div class="flex"></div>
+		<ul class="nav">
+			{theme.nav?.map(({ name, link }) => (
+				<li>
+					<a class="link" href={URL.for(link)}>
+						{name}
+					</a>
+				</li>
+			))}
+		</ul>
+		<button
+			class="icon-search link"
+			id="search"
+			title="搜索"
+			type="button"
+		></button>
+		<button
+			class="icon-nav link"
+			id="nav"
+			title="导航菜单"
+			type="button"
+		></button>
+	</nav>
+);

package/layouts/components/Search.tsx

@@ -0,0 +1,20 @@
+export default () => (
+	<dialog class="rounded search">
+		<div class="search-bar">
+			<input
+				type="search"
+				id="search-input"
+				class="search-input"
+				placeholder="键入以搜索..."
+			/>
+			<button
+				class="icon-close link"
+				title="关闭"
+				type="button"
+				id="search-close"
+			></button>
+		</div>
+		<progress></progress>
+		<div class="search-result"></div>
+	</dialog>
+);

package/layouts/components/Waline.tsx

@@ -0,0 +1,22 @@
+import { Article, Page } from 'ezal';
+
+export default () => {
+	const { page, theme } = context;
+
+	if (!theme.waline) return;
+	if (!(page instanceof Page)) return;
+	if (page instanceof Article) {
+		if (page.data?.comment === false) return;
+	} else if (!page.data?.comment) return;
+
+	const options = { ...theme.waline, el: '#waline', path: page.url };
+
+	const module =
+		theme.cdn?.walineJS ?? 'https://unpkg.com/@waline/client@v3/dist/waline.js';
+	const script = `import{init}from'${module}';init(${JSON.stringify(options)})`;
+
+	return <Container>
+		<div id="waline" class="wrap"></div>
+		<script type="module" defer><RawHTML html={script}/></script>
+	</Container>;
+};

package/layouts/context.d.ts

@@ -0,0 +1,54 @@
+import type {
+	Article,
+	Category,
+	Page,
+	SiteConfig,
+	Tag,
+	VirtualPage,
+} from 'ezal';
+import type { Context as MarkdownContext } from 'ezal-markdown';
+import type mime from 'mime-types';
+import type { ThemeConfig } from '../src/config';
+import type { ImageInfo } from '../src/image';
+
+export interface HomePageData {
+	index: number;
+	getPages(): HomePage[];
+	getArticles(index: number): Article[];
+}
+export type HomePage = VirtualPage & { data: HomePageData };
+
+export interface ArchivePageData {
+	years: Map<number, number>;
+	getArticles(year: number): Article[];
+}
+export type ArchivePage = VirtualPage & { data: ArchivePageData };
+
+export interface CategoryPageData {
+	category: Category;
+}
+export type CategoryPage = VirtualPage & { data: CategoryPageData };
+
+export interface TagPageData {
+	tag: Tag;
+}
+export type TagPage = VirtualPage & { data: TagPageData };
+
+export interface Context {
+	site: SiteConfig;
+	theme: ThemeConfig;
+	page?:
+		| (Page & { renderedData: MarkdownContext })
+		| (Article & { renderedData: MarkdownContext })
+		| HomePage
+		| ArchivePage
+		| CategoryPage
+		| TagPage;
+	getImageInfo(url: string): ImageInfo | null;
+	mime: typeof mime;
+	compareByDate(a: Article, b: Article): number;
+}
+
+declare global {
+	const context: Context;
+}

package/layouts/home.tsx

@@ -0,0 +1,74 @@
+import { URL } from 'ezal';
+import base from './base';
+import Article from './components/Article';
+import Contact from './components/Contact';
+import type { HomePage } from './context';
+
+const { home } = context.theme;
+const page = context.page as HomePage;
+const pages = page.data.getPages();
+const current = pages.indexOf(page);
+
+const slogan = home?.slogan ? (
+	<RawHTML html={home.slogan} />
+) : (
+	<Container>
+		{'Hi there!👋'}
+		<br />
+		{`I'm ${context.site.author}.`}
+	</Container>
+);
+
+const logo = home?.logo ? (
+	<svg
+		class="home-logo"
+		viewBox={home.logo.viewBox}
+		role="img"
+		aria-label="logo"
+	>
+		<g id="logo">
+			<RawHTML html={home.logo.g} />
+		</g>
+	</svg>
+) : null;
+
+let header: JSX.Element;
+if (current) {
+	header = <header style={{ height: 70 }} />;
+} else {
+	header = (
+		<header>
+			<div class="wrap home">
+				<div class="home-title">
+					{slogan}
+					<Contact style={{ paddingTop: 8 }} />
+				</div>
+				{logo}
+			</div>
+			<div class="home-indicator icon-down"></div>
+		</header>
+	);
+}
+
+const pagination = pages.map((p, i) => {
+	if (p === page) return <div class="page rounded">{i + 1}</div>;
+	return (
+		<a class="page rounded" href={`${URL.for(p.url)}#posts`}>
+			{i + 1}
+		</a>
+	);
+});
+
+export default base(
+	header,
+	<main>
+		<div class="wrap">
+			<div class="article-list" id="posts">
+				{page.data.getArticles(page.data.index).map((article) => (
+					<Article article={article} />
+				))}
+			</div>
+			{pagination.length > 1 ? <div class="pages">{pagination}</div> : null}
+		</div>
+	</main>,
+);