ezal-theme-example 0.0.1

package/assets/scripts/archive.ts

@@ -0,0 +1,143 @@
+import cloud from 'd3-cloud';
+import {
+	type HierarchyNode,
+	hierarchy,
+	treemap,
+	treemapSquarify,
+} from 'd3-hierarchy';
+import { initBase } from './_base';
+import { $, $$, debounce, doc, handle, shuffle } from './_utils';
+
+interface Tag extends cloud.Word {
+	size: number;
+	text: string;
+	node: HTMLElement;
+}
+
+function initTags() {
+	const container = $<HTMLElement>('.tags')!;
+	const tags = [...$$<HTMLAnchorElement>('.tags a')];
+	let prevWidth = container.clientWidth;
+	let layout: ReturnType<typeof cloud<Tag>> | null = null;
+
+	const doLayout = () => {
+		if (layout) layout.stop();
+		const words = tags.map<Tag>((a) => ({
+			text: a.textContent,
+			size: Number(a.dataset.size),
+			node: a,
+		}));
+		const totalWeight =
+			words.reduce((prev, { size }) => prev + 1 + size * 0.1, 0) * 7000;
+		const width = container.clientWidth;
+		const height = Math.max(100, totalWeight / width);
+		const cx = width / 2;
+		const cy = height / 2;
+		layout = cloud<Tag>()
+			.size([width, height])
+			.words(words)
+			.padding(4)
+			.rotate(0)
+			.fontSize((d) => d.size ** 2 + 16)
+			.on('end', (words) => {
+				layout = null;
+				for (const { node, size, x, y } of words) {
+					node.style.left = `${x! + cx}px`;
+					node.style.top = `${y! + cy}px`;
+					node.style.fontSize = `${size}px`;
+				}
+				container.style.height = `${height}px`;
+				container.classList.add('ready');
+			});
+		layout.start();
+	};
+	doLayout();
+	const handleResize = debounce(doLayout, 50);
+	handle(window, 'resize', () => {
+		const width = container.clientWidth;
+		if (prevWidth === width) return;
+		prevWidth = width;
+		handleResize();
+	});
+}
+
+interface CategoryNode {
+	size: number;
+	node?: HTMLElement;
+	children?: CategoryNode[];
+}
+
+type CategoryResult = (HierarchyNode<CategoryNode> & {
+	x0: number;
+	y0: number;
+	x1: number;
+	y1: number;
+})[];
+
+function initCategories() {
+	const container = $<HTMLElement>('.categories')!;
+	let prevWidth = container.clientWidth;
+	const totalSize = $$('a', container).length;
+
+	const collect = (root: HTMLElement): CategoryNode[] =>
+		shuffle([...$$<HTMLElement>(':scope>li>a', root)].map(toData));
+	const toData = (node: HTMLElement): CategoryNode => {
+		let children: CategoryNode[] | undefined;
+		if (node.nextSibling) {
+			children = collect(node.nextSibling as HTMLElement);
+		}
+		return {
+			size: Number(node.dataset.size),
+			node,
+			children,
+		};
+	};
+	const root = hierarchy<CategoryNode>({
+		children: collect(container),
+		size: 0,
+	}).sum((d) => d.size);
+
+	const doLayout = () => {
+		const width = container.clientWidth;
+		const height = Math.max(100, (totalSize * 30000) / (width / 2 + 400)) + 32;
+		const layout = treemap<CategoryNode>()
+			.tile(treemapSquarify)
+			.size([width, height])
+			.paddingInner(8)
+			.paddingOuter(8)
+			.paddingTop(32)
+			.round(true);
+		layout(root);
+		for (const {
+			data: { node },
+			x0,
+			x1,
+			y0,
+			y1,
+		} of root.descendants() as CategoryResult) {
+			if (!node) continue;
+			node.classList.add('link');
+			node.style.left = `${x0}px`;
+			node.style.top = `${y0 - 32}px`;
+			node.style.width = `${x1 - x0}px`;
+			node.style.height = `${y1 - y0}px`;
+		}
+		container.style.height = `${height - 32}px`;
+		container.classList.add('ready');
+	};
+
+	doLayout();
+	const handleResize = debounce(doLayout, 50);
+	handle(window, 'resize', () => {
+		const width = container.clientWidth;
+		if (prevWidth === width) return;
+		prevWidth = width;
+		handleResize();
+	});
+}
+
+handle(doc, 'DOMContentLoaded', () => {
+	initBase();
+	initTags();
+	initCategories();
+});

package/assets/scripts/article.ts

@@ -0,0 +1,18 @@
+import {
+	initCodeblock,
+	initFootnote,
+	initImage,
+	initTabs,
+	initToc,
+} from './_article';
+import { initBase } from './_base';
+import { doc, handle } from './_utils';
+
+handle(doc, 'DOMContentLoaded', () => {
+	initBase();
+	initTabs();
+	initToc();
+	initCodeblock();
+	initFootnote();
+	initImage();
+});

package/assets/scripts/category.ts

@@ -0,0 +1,4 @@
+import { initBase } from './_base';
+import { doc, handle } from './_utils';
+
+handle(doc, 'DOMContentLoaded', initBase);

package/assets/scripts/home.ts

@@ -0,0 +1,73 @@
+import { initBase } from './_base';
+import { $, $$, doc, handle } from './_utils';
+
+let dx = 0;
+let dy = 0;
+let tx = 0;
+let ty = 0;
+let logo: HTMLElement;
+let prev = 0;
+let tick = 0;
+
+const nodes = () => $$('use', logo.parentNode!);
+
+const USE = () => {
+	const node = doc.createElementNS('http://www.w3.org/2000/svg', 'use');
+	node.setAttribute('href', '#logo');
+	(node as any).c = tick;
+	return node;
+};
+
+function next() {
+	const node = USE();
+	logo.after(node);
+	const animation = node.animate(
+		[{}, { translate: '128px 128px', opacity: '0' }],
+		{ duration: 5000 },
+	);
+	(node as any).a = animation;
+	animation.play();
+	animation.onfinish = () => node.remove();
+}
+
+function animate() {
+	if (dx < tx) dx = Math.min(dx + 0.1, tx);
+	else if (dx > tx) dx = Math.max(dx - 0.1, tx);
+	if (dy < ty) dy = Math.min(dy + 0.1, ty);
+	else if (dy > ty) dy = Math.max(dy - 0.1, ty);
+	if (tick - prev > 100) {
+		next();
+		prev = tick;
+	}
+	for (const node of nodes()) {
+		const diff = tick - (node as any).c;
+		node.setAttribute('x', String((dx * diff) / 20));
+		node.setAttribute('y', String((dy * diff) / 20));
+	}
+	tick++;
+	requestAnimationFrame(animate);
+}
+
+handle(doc, 'DOMContentLoaded', () => {
+	initBase();
+
+	logo = $('#logo')!;
+	if (!logo) return;
+	handle(window, 'blur', () => {
+		for (const node of nodes()) {
+			(node as any).a.pause();
+		}
+	});
+	handle(window, 'focus', () => {
+		for (const node of nodes()) {
+			(node as any).a.play();
+		}
+	});
+	handle(doc, 'mousemove', ({ x, y }: MouseEvent) => {
+		const rw = innerWidth / 2;
+		const rh = innerHeight / 2;
+		tx = (rw - x) / rw;
+		ty = (rh - y) / rh;
+	});
+	requestAnimationFrame(animate);
+});

package/assets/scripts/links.ts

@@ -0,0 +1,14 @@
+import { initCodeblock, initFootnote, initImage, initTabs } from './_article';
+import { initBase } from './_base';
+import { $$, doc, handle, shuffle } from './_utils';
+
+handle(doc, 'DOMContentLoaded', () => {
+	initBase();
+	initTabs();
+	initCodeblock();
+	initFootnote();
+	initImage();
+	for (const element of $$<HTMLElement>('article .links')) {
+		element.replaceChildren(...shuffle([...element.children]));
+	}
+});

package/assets/scripts/main.ts

@@ -0,0 +1,11 @@
+import { initCodeblock, initFootnote, initImage, initTabs } from './_article';
+import { initBase } from './_base';
+import { doc, handle } from './_utils';
+
+handle(doc, 'DOMContentLoaded', () => {
+	initBase();
+	initTabs();
+	initCodeblock();
+	initFootnote();
+	initImage();
+});

package/assets/scripts/page.ts

@@ -0,0 +1,11 @@
+import { initCodeblock, initFootnote, initImage, initTabs } from './_article';
+import { initBase } from './_base';
+import { doc, handle } from './_utils';
+
+handle(doc, 'DOMContentLoaded', () => {
+	initBase();
+	initTabs();
+	initCodeblock();
+	initFootnote();
+	initImage();
+});

package/assets/scripts/tag.ts

@@ -0,0 +1,4 @@
+import { initBase } from './_base';
+import { doc, handle } from './_utils';
+
+handle(doc, 'DOMContentLoaded', initBase);

package/assets/scripts/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"extends": "../../../../tsconfig.json",
+	"compilerOptions": {
+		"target": "es2024",
+		"lib": ["ES2024", "DOM", "DOM.Iterable"],
+		"types": [],
+		"noEmit": true,
+	},
+	"include": ["./**/*.ts"],
+}

package/assets/styles/404.styl

@@ -0,0 +1,31 @@
+@import '_index'
+
+body
+	display flex
+	flex-direction column
+	min-height 100vh
+	min-height 100svh
+	background:
+		linear-gradient(var(--color) 2%, #0000 0%) 0 16px / 1px 32px,
+		linear-gradient(to right, var(--color) 2%, #0000 0%) 16px / 32px,
+		var(--bg)
+	animation grid 10s infinite linear
+	--color s('color-mix(in srgb, var(--text), var(--bg) 90%)')
+
+main
+	display flex
+	flex 1
+	flex-direction column
+	justify-content center
+	align-items center
+	text-align center
+	text-wrap balance
+
+canvas
+	max-width 100%
+	width 400px
+	filter invert(1)
+
+@media (prefers-color-scheme dark)
+	canvas
+		filter invert(0)

package/assets/styles/_article/fold.styl

@@ -0,0 +1,15 @@
+details
+	margin 16px 0
+	border 1px solid var(--border)
+	background var(--panel)
+	&>*
+		padding 1px 16px
+
+summary
+	padding 8px
+	padding-left 12px
+	transition .1s
+	&:hover
+		background var(--text-a2)
+	&:active
+		background var(--text-a1)

package/assets/styles/_article/footnote.styl

@@ -0,0 +1,12 @@
+.preview
+	position fixed
+	z-index 100
+	padding 10px 16px
+	border 1px solid var(--panel)
+	background var(--panel)
+	backdrop-filter blur(12px)
+	&>*
+		margin-left 0
+
+dd
+	margin-left 20px

package/assets/styles/_article/heading.styl

@@ -0,0 +1,29 @@
+h2
+h3
+h4
+h5
+h6
+	margin 16px 0
+	--h '# '
+	&:before
+		content var(--h)
+		opacity .3
+
+h2
+	font-size 38px
+
+h3
+	font-size 32px
+	--h '#² '
+
+h4
+	font-size 28px
+	--h '#³ '
+
+h5
+	font-size 24px
+	--h '#⁴ '
+
+h6
+	font-size 20px
+	--h '#⁵ '

package/assets/styles/_article/image.styl

@@ -0,0 +1,30 @@
+p img
+	max-width 100%
+	max-height 80vh
+	width auto
+	height auto
+	vertical-align middle
+	transition .1s background
+	object-fit contain
+	&:not(.loaded)
+		background var(--img-color)
+
+.image
+	text-align center
+	figcaption
+		opacity .8
+	img
+		@extend p img
+
+html:has(.img-scale)
+	overflow hidden
+
+.img-scale
+	position fixed
+	z-index 200
+	margin auto
+	background #0008
+	inset 0
+	img
+		position absolute
+		height auto

package/assets/styles/_article/kbd.styl

@@ -0,0 +1,10 @@
+kbd
+	display inline-block
+	margin 0 2px
+	padding 4px
+	min-width 24px
+	border 1px solid var(--text-a8)
+	border-radius 4px
+	text-align center
+	text-transform uppercase
+	font 14px / 1 var(--font-mono)

package/assets/styles/_article/links.styl

@@ -0,0 +1,31 @@
+.links
+	display flex
+	flex-wrap wrap
+	justify-content center
+	margin 16px 0
+	gap 8px
+	a
+		position relative
+		flex 1 1 auto
+		padding 16px
+		max-width 340px
+		width 100%
+		border 1px solid var(--border)
+		background var(--panel)
+		color var(--text)
+		text-decoration none
+		transition .1s
+		&:hover
+			border-color var(--theme)
+	i
+		position absolute
+		top 16px
+		right 16px
+	img
+		margin-bottom 16px
+		width 48px
+		height 48px
+		object-fit cover
+
+.link-title
+	font-weight bold

package/assets/styles/_article/list.styl

@@ -0,0 +1,19 @@
+ol
+ul
+	padding-left 24px
+
+li:has(>input[type='checkbox'])
+	list-style none
+
+li>input[type='checkbox']
+	margin 0 4px -2px -22px
+	appearance none
+	&:before
+		display block
+		width 16px
+		height 16px
+		border 1px solid
+		border-radius 4px
+		content ''
+	&:checked:before
+		background var(--theme)

package/assets/styles/_article/note.styl

@@ -0,0 +1,18 @@
+.note
+	@extend blockquote
+	border-color var(--note)
+	&>:first-child
+		color var(--note)
+		font-weight bold
+		i
+			margin-right 4px
+			font-weight normal
+
+.note-tip
+	--note var(--note-tip)
+
+.note-warn
+	--note var(--note-warn)
+
+.note-danger
+	--note var(--note-danger)

package/assets/styles/_article/other.styl

@@ -0,0 +1,44 @@
+.sticky
+	position sticky
+	top var(--sticky)
+	z-index 4
+	background var(--panel)
+	backdrop-filter blur(4px)
+	--sticky 0px
+
+.sticky-content
+	.sticky
+		z-index 3
+		--sticky 40px
+	.sticky-content
+		.sticky
+			z-index 2
+			--sticky 80px
+		.sticky-content
+			.sticky
+				z-index 1
+				--sticky 80px
+			.sticky-content
+				.sticky
+					z-index 0
+					--sticky 80px
+
+hr
+	opacity .3
+
+blockquote
+	margin 16px 0
+	padding 1px 16px
+	border-left 4px solid var(--text)
+	border-radius 8px
+	background var(--panel)
+
+:not(pre):not(figcaption)>code
+	padding 0 .5ex
+	border-radius 8px
+	background var(--code-bg)
+	color var(--code)
+	word-break break-word
+
+figure
+	margin 16px 0

package/assets/styles/_article/table.styl

@@ -0,0 +1,29 @@
+.table
+	overflow auto
+	margin 16px 0
+	max-width 100%
+	max-height 80vh
+	width max-content
+	border 1px solid var(--border)
+
+table
+	border-collapse collapse
+	table-layout fixed
+
+thead
+	position sticky
+	top 0
+	background var(--text-a2)
+	backdrop-filter blur(8px)
+
+tr:nth-child(even)
+	background var(--text-a1)
+
+th
+td
+	padding 4px 8px
+	border 1px solid var(--border)
+	word-break break-word
+
+th
+	white-space nowrap

package/assets/styles/_article/tabs.styl

@@ -0,0 +1,25 @@
+.tabs
+	margin 16px 0
+	border 1px solid var(--border)
+	background var(--panel)
+
+.tab-nav
+	label
+		position relative
+		display inline-block
+		padding 8px 16px
+		transition .1s opacity, .1s background
+		&:not(:hover):not(:has(:checked))
+			opacity .7
+		&:has(:focus-visible)
+			outline 2px solid
+		&:has(:checked)
+			background var(--theme-a4)
+	input
+		position absolute
+		opacity 0
+
+.tab-content
+	padding 0 16px
+	&>:not(.active)
+		display none

package/assets/styles/_code.styl

@@ -0,0 +1,83 @@
+.code
+	border 1px solid var(--text-a2)
+	color var(--text)
+	figcaption
+		overflow hidden
+		padding 8px
+		code
+			padding 0 8px
+			opacity .8
+	button
+		display block
+		float right
+		padding 0
+		width 24px
+		height 24px
+		border 0
+		background #0000
+		font-size 16px
+	pre
+		overflow auto
+		margin 0
+		padding 16px 0
+		tab-size 2
+		hyphens none
+
+.line
+	display inline-block
+	padding 0 16px
+	width 100%
+
+.diff
+	position relative
+	padding-left 0
+	&:before
+		padding 0 3px
+		color var(--diff)
+	&:after
+		position absolute
+		z-index -1
+		display block
+		width s('min(100%, 512px)')
+		height 100%
+		background linear-gradient(90deg, var(--diff), #0000)
+		content ''
+		opacity .2
+		inset 0
+
+.diff.remove
+	--diff var(--note-danger)
+	&:before
+		content '-'
+
+.diff.add
+	--diff var(--note-tip)
+	&:before
+		content '+'
+
+.highlighted
+	background var(--text-a2)
+
+.has-focused
+	.line:not(.focused)
+		filter blur(4px)
+		transition .1s filter
+	&:hover
+	&:focus-visible
+		.line
+			filter blur(0px)
+
+.line.warning
+	background #ff02
+
+.line.error
+	background #f002
+
+@media (prefers-color-scheme dark)
+	.code span
+		color var(--shiki-dark)
+		text-decoration var(--shiki-dark-text-decoration)
+		font-weight var(--shiki-dark-font-weight)
+		font-style var(--shiki-dark-font-style)
+	.code
+		background var(--shiki-dark-bg)