ezal-theme-example 0.0.1

package/layouts/links.tsx

@@ -0,0 +1,53 @@
+import { type Page, URL } from 'ezal';
+import base from './base';
+
+const page = context.page as Page;
+
+const groups: JSX.Element[] = [];
+
+function shuffle<T>(array: T[]): T[] {
+	for (let i = array.length - 1; i > 0; i--) {
+		const j = Math.trunc(Math.random() * (i + 1));
+		if (i === j) continue;
+		[array[i], array[j]] = [array[j], array[i]];
+	}
+	return array;
+}
+
+for (const group of context.theme.links ?? []) {
+	const links: JSX.Element[] = [];
+	for (const item of group.items) {
+		links.push(
+			<a
+				class="rounded link"
+				href={URL.for(item.link)}
+				style={{ $theme: item.color }}
+			>
+				<img class="rounded loaded" src={URL.for(item.avatar)} alt={item.name} />
+				<div class="link-title">{item.name}</div>
+				<div>{item.description}</div>
+			</a>,
+		);
+	}
+	groups.push(
+		<hgroup>
+			<h2>{group.title}</h2>
+			<p>{group.description}</p>
+		</hgroup>,
+		<div class="links">{shuffle(links)}</div>,
+	);
+}
+
+export default base(
+	<header>
+		<div class="wrap">
+			<h1>{page.title}</h1>
+		</div>
+	</header>,
+	<main>
+		<article>
+			<RawHTML html={page.content}></RawHTML>
+			{groups}
+		</article>
+	</main>,
+);

package/layouts/page.tsx

@@ -0,0 +1,19 @@
+import type { Page } from 'ezal';
+import base from './base';
+import Image from './components/Image';
+
+const page = context.page as Page;
+
+export default base(
+	<header>
+		{page.data.cover ? <Image url={page.data.cover} alt={page.title} /> : null}
+		<div class="wrap">
+			<h1>{page.title}</h1>
+		</div>
+	</header>,
+	<main>
+		<article>
+			<RawHTML html={page.content} />
+		</article>
+	</main>,
+);

package/layouts/tag.tsx

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

package/layouts/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"extends": "../node_modules/ezal-layout/tsconfig.base.json",
+	"compilerOptions": {
+		"types": ["../node_modules/ezal-layout/runtime.d.ts", "./context.d.ts"]
+	},
+	"include": [
+		"./**/*",
+		"../node_modules/ezal-layout/runtime.d.ts",
+		"./context.d.ts"
+	]
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "ezal-theme-example",
+  "version": "0.0.1",
+  "author": "jonnyjong",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "peerDependencies": {
+    "ezal": "^3.0.0"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "dependencies": {
+    "@js-temporal/polyfill": "^0.5.1",
+    "@shikijs/colorized-brackets": "^3.15.0",
+    "@shikijs/transformers": "^3.15.0",
+    "@vscode/vscode-languagedetection": "^1.0.22",
+    "better-sqlite3": "^12.4.1",
+    "clean-css": "^5.3.3",
+    "d3-cloud": "^1.2.7",
+    "d3-hierarchy": "^3.1.2",
+    "esbuild": "^0.27.0",
+    "ezal-markdown": "^0.4.4",
+    "feed": "^5.1.0",
+    "hammerjs": "^2.0.8",
+    "indexnow": "^0.1.0",
+    "katex": "^0.16.25",
+    "mime-types": "^3.0.1",
+    "node-vibrant": "^4.0.3",
+    "pagefind": "^1.4.0",
+    "sharp": "^0.34.5",
+    "shiki": "^3.15.0",
+    "sitemap": "^9.0.0",
+    "stylus": "^0.64.0",
+    "ezal-layout": "^0.0.1"
+  },
+  "devDependencies": {
+    "@types/better-sqlite3": "^7.6.13",
+    "@types/clean-css": "^4.2.11",
+    "@types/d3-cloud": "^1.2.9",
+    "@types/d3-hierarchy": "^3.1.7",
+    "@types/hammerjs": "^2.0.46",
+    "@types/mime-types": "^3.0.1",
+    "@types/stylus": "^0.48.43"
+  }
+}

package/readme.md

@@ -0,0 +1,17 @@
+English | [中文](./readme_zh.md)
+
+# ezal-theme-example
+
+Sample theme for the ezal blog framework.
+
+## Install
+
+```sh
+pnpm install ezal-layout
+yarn add ezal-layout
+pnpm add ezal-layout
+```
+
+## Usage
+
+[docs](https://jonnyjong.github.io/ezal/docs/en/theme/)

package/readme_zh.md

@@ -0,0 +1,17 @@
+[English](./readme.md) | 中文
+
+# ezal-theme-example
+
+ezal 博客框架的示例主题。
+
+## 安装
+
+```sh
+pnpm install ezal-layout
+yarn add ezal-layout
+pnpm add ezal-layout
+```
+
+## 使用
+
+[文档](https://jonnyjong.github.io/ezal/docs/zh/theme/)