ezal-theme-example 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Jonny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/assets/scripts/404.ts

@@ -0,0 +1,353 @@
+import { initBase } from './_base';
+import { $, doc, handle } from './_utils';
+
+class GlitchTextEffect {
+	canvas: HTMLCanvasElement;
+	text: string;
+	fontSize: number;
+	gl: WebGLRenderingContext | null = null;
+	program: WebGLProgram | null = null;
+	startTime: number;
+	timeLocation: WebGLUniformLocation | null = null;
+	resolutionLocation: WebGLUniformLocation | null = null;
+	textLocation: WebGLUniformLocation | null = null;
+	textTexture: WebGLTexture | null = null;
+
+	constructor(canvas: HTMLCanvasElement, text: string, fontSize: number) {
+		this.canvas = canvas;
+
+		this.text = text;
+		this.fontSize = fontSize;
+		this.startTime = Date.now();
+
+		this.initWebGL();
+		this.createShaders();
+		this.setupBuffers();
+		this.animate();
+	}
+
+	initWebGL(): void {
+		const gl =
+			this.canvas.getContext('webgl', { alpha: true, antialias: true }) ??
+			this.canvas.getContext('experimental-webgl', {
+				alpha: true,
+				antialias: true,
+			});
+		if (!gl) {
+			throw new Error('WebGL not supported');
+		}
+		this.gl = gl as any;
+		this.gl!.viewport(0, 0, this.canvas.width, this.canvas.height);
+	}
+
+	createShaders(): void {
+		if (!this.gl) return;
+
+		const vsSource = `
+      attribute vec2 aPosition;
+      varying vec2 vUv;
+
+      void main() {
+        vUv = aPosition * 0.5 + 0.5;
+        gl_Position = vec4(aPosition, 0.0, 1.0);
+      }
+    `;
+
+		const fsSource = `
+      precision mediump float;
+
+      varying vec2 vUv;
+      uniform float uTime;
+      uniform vec2 uResolution;
+      uniform sampler2D uTexture;
+
+      // 伪随机数生成器
+      float random (in vec2 st) {
+        return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
+      }
+
+      void main() {
+        vec2 st = gl_FragCoord.xy / uResolution.xy;
+
+        // 基础UV坐标
+        vec2 uv = vUv;
+
+        // 计算文字纹理坐标
+        vec2 textUV = vec2(uv.x, 1.0 - uv.y); // 翻转Y轴以匹配纹理
+
+        // 信号错位故障效果
+        float timeFactor = uTime * 1.5;
+        float glitchIntensity = abs(sin(timeFactor * 0.7)) * 0.8;
+
+        // 检查是否触发故障
+        float glitchEvent = random(vec2(floor(uTime * 4.0)));
+
+        // 初始化偏移
+        vec2 offset = vec2(0.0);
+
+        // 水平撕裂/错位效果
+        if (glitchEvent > 0.5) {
+          // 生成多个水平撕裂线
+          float tearCount = 3.0 + mod(uTime * 0.5, 3.0); // 撕裂线条数
+
+          for (float i = 0.0; i < 5.0; i++) {
+            if (i >= tearCount) break;
+
+            float tearY = random(vec2(i, floor(uTime * 2.0 + i))) * 1.0; // 随机水平线位置
+            float tearHeight = 0.02 + random(vec2(i * 2.0)) * 0.08; // 撕裂区域高度
+            float shiftAmount = (random(vec2(i * 3.0)) - 0.5) * 0.1 * glitchIntensity; // 偏移量
+
+            if (abs(textUV.y - tearY) < tearHeight) {
+              offset.x += shiftAmount;
+            }
+          }
+        }
+
+        // 垂直撕裂效果
+        float verticalGlitch = random(vec2(floor(uTime * 6.0), 2.0));
+        if (verticalGlitch > 0.8) {
+          float tearX = random(vec2(2.0, floor(uTime * 3.0))) * 1.0; // 随机垂直线位置
+          float tearWidth = 0.02 + random(vec2(4.0)) * 0.05; // 撕裂区域宽度
+          float shiftAmount = (random(vec2(5.0)) - 0.5) * 0.1 * glitchIntensity; // 垂直偏移量
+
+          if (abs(textUV.x - tearX) < tearWidth) {
+            offset.y += shiftAmount;
+          }
+        }
+
+        // 块状故障效果
+        float blockGlitch = random(vec2(floor(uTime * 2.0), 3.0));
+        if (blockGlitch > 0.9) {
+          vec2 blockSize = vec2(0.1, 0.05) + vec2(random(vec2(6.0)), random(vec2(7.0))) * 0.1;
+          vec2 blockPos = vec2(random(vec2(8.0, floor(uTime))), random(vec2(9.0, floor(uTime * 1.5))));
+
+          if (textUV.x > blockPos.x && textUV.x < blockPos.x + blockSize.x &&
+              textUV.y > blockPos.y && textUV.y < blockPos.y + blockSize.y) {
+            // 块状区域偏移
+            offset += vec2(
+              (random(vec2(10.0)) - 0.5) * 0.1 * glitchIntensity,
+              (random(vec2(11.0)) - 0.5) * 0.05 * glitchIntensity
+            );
+          }
+        }
+
+        // 颜色通道分离
+        vec2 offsetR = offset + vec2(
+          sin(uTime * 8.0 + textUV.y * 5.0) * 0.005 * glitchIntensity,
+          0.0
+        );
+        vec2 offsetG = offset + vec2(
+          cos(uTime * 7.0 + textUV.x * 4.0) * 0.003 * glitchIntensity,
+          0.0
+        );
+        vec2 offsetB = offset + vec2(
+          sin(uTime * 9.0 + (textUV.x + textUV.y) * 3.0) * 0.007 * glitchIntensity,
+          0.0
+        );
+
+        // 颜色通道分离
+        float r = texture2D(uTexture, textUV + offsetR).r;
+        float g = texture2D(uTexture, textUV + offsetG).g;
+        float b = texture2D(uTexture, textUV + offsetB).b;
+
+        // 主文字颜色
+        vec4 baseColor = texture2D(uTexture, textUV + offset);
+
+        // 创建故障颜色
+        vec3 glitchColor = vec3(r, g, b);
+
+        // 混合原始颜色和故障颜色
+        vec3 finalColor = mix(baseColor.rgb, glitchColor, 0.4);
+
+        // 偶尔的色差效果
+        if (random(vec2(floor(uTime * 5.0))) > 0.92) {
+          finalColor = vec3(r, b, g); // 随机交换颜色通道
+        }
+
+        // 透明度处理
+        gl_FragColor = vec4(finalColor, baseColor.a);
+      }
+    `;
+
+		const vertexShader = this.loadShader(this.gl.VERTEX_SHADER, vsSource);
+		const fragmentShader = this.loadShader(this.gl.FRAGMENT_SHADER, fsSource);
+
+		if (!(vertexShader && fragmentShader)) {
+			throw new Error('Failed to load shaders');
+		}
+
+		this.program = this.gl.createProgram();
+		if (!this.program) {
+			throw new Error('Failed to create WebGL program');
+		}
+
+		this.gl.attachShader(this.program, vertexShader);
+		this.gl.attachShader(this.program, fragmentShader);
+		this.gl.linkProgram(this.program);
+
+		if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) {
+			throw new Error(
+				'Unable to initialize the shader program: ' +
+					this.gl.getProgramInfoLog(this.program),
+			);
+		}
+
+		this.gl.useProgram(this.program);
+
+		// 获取 uniform 变量位置
+		this.timeLocation = this.gl.getUniformLocation(this.program, 'uTime');
+		this.resolutionLocation = this.gl.getUniformLocation(
+			this.program,
+			'uResolution',
+		);
+		this.textLocation = this.gl.getUniformLocation(this.program, 'uTexture');
+	}
+
+	loadShader(type: number, source: string): WebGLShader | null {
+		if (!this.gl) return null;
+
+		const shader = this.gl.createShader(type);
+		if (!shader) {
+			console.error('Unable to create shader');
+			return null;
+		}
+
+		this.gl.shaderSource(shader, source);
+		this.gl.compileShader(shader);
+
+		if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+			console.error(
+				'An error occurred compiling the shaders: ' +
+					this.gl.getShaderInfoLog(shader),
+			);
+			this.gl.deleteShader(shader);
+			return null;
+		}
+
+		return shader;
+	}
+
+	setupBuffers(): void {
+		if (!this.gl) return;
+
+		// 创建一个覆盖整个视口的四边形
+		const vertices = new Float32Array([
+			-1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0,
+		]);
+
+		const vertexBuffer = this.gl.createBuffer();
+		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer);
+		this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW);
+
+		const positionLocation = this.gl.getAttribLocation(
+			this.program!,
+			'aPosition',
+		);
+		if (positionLocation !== -1) {
+			this.gl.enableVertexAttribArray(positionLocation);
+			this.gl.vertexAttribPointer(positionLocation, 2, this.gl.FLOAT, false, 0, 0);
+		}
+
+		// 创建纹理并绘制文字
+		this.createTextTexture();
+	}
+
+	createTextTexture(): void {
+		if (!this.gl) return;
+
+		// 创建一个临时canvas来绘制文字
+		const tempCanvas = document.createElement('canvas');
+		const tempCtx = tempCanvas.getContext('2d');
+
+		if (!tempCtx) {
+			throw new Error('Could not get 2D context for text canvas');
+		}
+
+		// 设置canvas大小 - 使用更大的尺寸以获得更高分辨率的文字纹理
+		tempCanvas.width = 1600;
+		tempCanvas.height = 600;
+
+		// 绘制文字
+		tempCtx.fillStyle = 'white';
+		tempCtx.font = `bold ${this.fontSize}px sans-serif`;
+		tempCtx.textAlign = 'center';
+		tempCtx.textBaseline = 'middle';
+		tempCtx.fillText(this.text, tempCanvas.width / 2, tempCanvas.height / 2);
+
+		// 创建纹理
+		this.textTexture = this.gl.createTexture();
+		if (!this.textTexture) {
+			throw new Error('Failed to create WebGL texture');
+		}
+
+		this.gl.bindTexture(this.gl.TEXTURE_2D, this.textTexture);
+
+		// 设置纹理参数
+		this.gl.texParameteri(
+			this.gl.TEXTURE_2D,
+			this.gl.TEXTURE_WRAP_S,
+			this.gl.CLAMP_TO_EDGE,
+		);
+		this.gl.texParameteri(
+			this.gl.TEXTURE_2D,
+			this.gl.TEXTURE_WRAP_T,
+			this.gl.CLAMP_TO_EDGE,
+		);
+		this.gl.texParameteri(
+			this.gl.TEXTURE_2D,
+			this.gl.TEXTURE_MIN_FILTER,
+			this.gl.LINEAR,
+		);
+		this.gl.texParameteri(
+			this.gl.TEXTURE_2D,
+			this.gl.TEXTURE_MAG_FILTER,
+			this.gl.LINEAR,
+		);
+
+		// 将canvas内容上传到纹理
+		this.gl.texImage2D(
+			this.gl.TEXTURE_2D,
+			0,
+			this.gl.RGBA,
+			this.gl.RGBA,
+			this.gl.UNSIGNED_BYTE,
+			tempCanvas,
+		);
+	}
+
+	animate = (): void => {
+		if (!this.gl) return;
+		requestAnimationFrame(this.animate);
+		// 清除画布 - 使用透明色
+		this.gl.clearColor(0.0, 0.0, 0.0, 0.0);
+		this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+
+		// 激活纹理单元并绑定纹理
+		this.gl.activeTexture(this.gl.TEXTURE0);
+		this.gl.bindTexture(this.gl.TEXTURE_2D, this.textTexture as WebGLTexture);
+		if (this.textLocation) {
+			this.gl.uniform1i(this.textLocation, 0);
+		}
+
+		// 设置 uniform 变量
+		const currentTime = (Date.now() - this.startTime) / 1000;
+		if (this.timeLocation) {
+			this.gl.uniform1f(this.timeLocation, currentTime);
+		}
+		if (this.resolutionLocation) {
+			this.gl.uniform2f(
+				this.resolutionLocation,
+				this.canvas.width,
+				this.canvas.height,
+			);
+		}
+
+		// 绘制
+		this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
+	};
+}
+
+handle(doc, 'DOMContentLoaded', () => {
+	initBase();
+	new GlitchTextEffect($('canvas')!, '404', 600);
+});

package/assets/scripts/_article.ts

@@ -0,0 +1,290 @@
+import Hammer from 'hammerjs';
+import { $, $$, $new, doc, handle, offHandle, sleep } from './_utils';
+
+export function initTabs() {
+	handle(doc, 'change', (event) => {
+		let target: Element | null = event.target as Element;
+		if (!(target instanceof HTMLInputElement)) return;
+		if (target.type !== 'radio') return;
+		if (!target.id.startsWith('tab')) return;
+		if (!target.name.startsWith('tab')) return;
+		target = target.parentElement;
+		if (!target) return;
+		const content = target.parentElement?.nextElementSibling;
+		if (!(content instanceof HTMLElement)) return;
+		for (const element of $$(':scope>.active', content)) {
+			element.classList.remove('active');
+		}
+		const index = [...target.parentElement!.children].indexOf(target);
+		content.children.item(index)?.classList.add('active');
+	});
+}
+
+export function initToc() {
+	const toc = [...$$('aside a')];
+	if (toc.length === 0) return;
+	const headings = [...$$('h2,h3,h4,h5,h6', $('article')!)];
+	const docE = doc.documentElement;
+
+	function getIndex(): number {
+		if (docE.scrollTop < 100) return 0;
+		if (docE.scrollTop + innerHeight >= docE.scrollHeight - 5) {
+			return toc.length - 1;
+		}
+
+		const triggerLine = innerHeight / 3;
+		for (const [i, heading] of headings.entries()) {
+			const { top } = heading.getBoundingClientRect();
+			if (top > triggerLine) return Math.max(0, i - 1);
+		}
+		return toc.length - 1;
+	}
+
+	handle(doc, 'scroll', () => {
+		const index = getIndex();
+		const target = toc[index];
+
+		if (target.classList.contains('active')) return;
+		for (const element of $$('aside .active')) {
+			element.classList.remove('active');
+		}
+		target.classList.add('active');
+		target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+	});
+
+	const nav = $<HTMLElement>('nav')!;
+	const mobileToc = $('.toc')!.cloneNode(true) as HTMLElement;
+	nav.append(mobileToc);
+	const height = () => {
+		nav.style.maxHeight = `${nav.scrollHeight}px`;
+	};
+	handle(window, 'resize', height);
+	for (const a of $$('a', mobileToc)) {
+		handle(a, 'click', async () => {
+			nav.classList.remove('nav-show');
+			await sleep(10);
+			nav.classList.add('nav-hide');
+		});
+	}
+	height();
+}
+
+export function initCodeblock(scope: ParentNode = doc) {
+	for (const btn of $$<HTMLButtonElement>('.code button', scope)) {
+		handle(btn, 'click', async () => {
+			await navigator.clipboard.writeText(
+				btn.parentNode!.nextSibling!.textContent!,
+			);
+			btn.classList.replace('icon-copy', 'icon-check');
+			await sleep(1000);
+			btn.classList.replace('icon-check', 'icon-copy');
+		});
+	}
+}
+
+export function initFootnote() {
+	let hoveringRef = false;
+	let hoveringPreview = false;
+	const preview = $new('div');
+	preview.className = 'preview rounded';
+	async function refIn(this: HTMLAnchorElement) {
+		const [_, id] = this.href.split('#');
+		if (!id) return;
+		const dt = doc.getElementById(id);
+		if (!dt) return;
+		const dd = dt.nextSibling as HTMLElement;
+		if (dd?.tagName !== 'DD') return;
+		preview.replaceChildren(dd.cloneNode(true));
+		initCodeblock(preview);
+		for (const label of $$<HTMLLabelElement>('.tab-nav label', preview)) {
+			label.htmlFor += '-copy';
+		}
+		for (const radio of $$<HTMLInputElement>('.tab-nav input', preview)) {
+			radio.id += '-copy';
+			radio.name += '-copy';
+		}
+		doc.body.append(preview);
+		hoveringRef = true;
+
+		await sleep();
+
+		const { width, height } = preview.getBoundingClientRect();
+		const { top, right, bottom, left } = this.getBoundingClientRect();
+		if (left + width <= innerWidth) {
+			preview.style.left = `${left}px`;
+		} else if (right - width >= 0) {
+			preview.style.left = `${right - width}px`;
+		} else {
+			preview.style.left = `${innerWidth - width}px`;
+		}
+		if (bottom + height + 8 <= innerHeight) {
+			preview.style.top = `${bottom + 8}px`;
+		} else if (top - height >= 0) {
+			preview.style.top = `${top - height}px`;
+		} else {
+			preview.style.top = '0px';
+		}
+		preview.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 100 });
+	}
+	async function refOut(this: HTMLAnchorElement) {
+		hoveringRef = false;
+		await sleep(100);
+		if (hoveringPreview || hoveringRef) return;
+		preview.animate([{ opacity: 0 }], { duration: 100 }).onfinish = () =>
+			preview.remove();
+	}
+	for (const ref of $$<HTMLAnchorElement>('article .footnote')) {
+		handle(ref, 'mouseenter', refIn);
+		handle(ref, 'mouseout', refOut);
+		handle(ref, 'focusin', refIn);
+		handle(ref, 'focusout', refOut);
+	}
+	handle(preview, 'mouseenter', () => {
+		hoveringPreview = true;
+	});
+	handle(preview, 'mouseleave', async () => {
+		hoveringPreview = false;
+		await sleep(100);
+		if (hoveringPreview || hoveringRef) return;
+		preview.animate([{ opacity: 0 }], { duration: 100 }).onfinish = () =>
+			preview.remove();
+	});
+}
+
+function display(image: HTMLImageElement) {
+	const { top, left, width } = image.getBoundingClientRect();
+	const boxFrame = { background: '#0000' };
+	const frame = { top: `${top}px`, left: `${left}px`, width: `${width}px` };
+	const defaultDuration: number = 100;
+	const naturalWidth = image.naturalWidth;
+	const naturalHeight = image.naturalHeight;
+	let currentWidth = 0;
+	let currentHeight = 0;
+	const box = $new('div');
+	box.classList.add('img-scale');
+	const img = $new('img');
+	box.append(img);
+	img.src = image.currentSrc;
+	img.width = naturalWidth;
+	img.height = naturalHeight;
+	img.draggable = false;
+
+	let currentX = 0;
+	let currentY = 0;
+	let currentScale = 1;
+
+	const hammer = new Hammer(box, {
+		recognizers: [
+			[Hammer.Tap, { time: 250, threshold: 10 }],
+			[Hammer.Pan, { direction: Hammer.DIRECTION_ALL, threshold: 1 }],
+			[Hammer.Pinch, { enable: true }],
+		],
+	});
+	hammer.get('pinch').recognizeWith('pan');
+	hammer.get('pan').recognizeWith('pinch');
+
+	const hide = () => {
+		img.animate({ ...frame, scale: 1, translate: '0px 0px' }, defaultDuration);
+		const animation = box.animate(boxFrame, defaultDuration);
+		animation.onfinish = () => {
+			box.remove();
+			image.style.opacity = '';
+		};
+		animation.play();
+		hammer.destroy();
+		offHandle(window, 'resize', resize);
+	};
+
+	const fitScale = () => {
+		const min =
+			Math.min(innerWidth / currentWidth, innerHeight / currentHeight, 1) / 2;
+		const max =
+			Math.max(currentWidth / innerWidth, currentHeight / innerHeight) * 8;
+		currentScale = Math.min(Math.max(currentScale, min), max);
+		img.style.scale = `${currentScale}`;
+	};
+
+	const fitPosition = () => {
+		const displayWidth = currentWidth * currentScale;
+		const displayHeight = currentHeight * currentScale;
+		const limitX = Math.max((displayWidth - innerWidth) / 2, 0);
+		currentX = Math.min(Math.max(currentX, -limitX), limitX);
+		const limitY = Math.max((displayHeight - innerHeight) / 2, 0);
+		currentY = Math.min(Math.max(currentY, -limitY), limitY);
+		img.style.translate = `${currentX}px ${currentY}px`;
+	};
+
+	const resize = () => {
+		currentWidth = Math.min(
+			naturalWidth,
+			innerWidth,
+			(innerHeight / naturalHeight) * naturalWidth,
+		);
+		currentHeight = (naturalHeight / naturalWidth) * currentWidth;
+		img.style.top = `${(innerHeight - currentHeight) / 2}px`;
+		img.style.left = `${(innerWidth - currentWidth) / 2}px`;
+		img.style.width = `${currentWidth}px`;
+		fitPosition();
+		fitScale();
+	};
+
+	resize();
+	doc.body.append(box);
+	box.animate([boxFrame, {}], defaultDuration).play();
+	img.animate([frame, {}], { duration: 300, easing: 'ease-in-out' }).play();
+	image.style.opacity = '0';
+
+	let dragging = false;
+
+	// 点击
+	let tapTimer: number | null = null;
+	hammer.on('tap', ({ pointerType }) => {
+		if (pointerType !== 'touch') return hide();
+		if (tapTimer === null) {
+			tapTimer = setTimeout(hide, 200);
+			return;
+		}
+		clearTimeout(tapTimer);
+		tapTimer = null;
+		const prev = currentScale;
+		if (currentScale < 4) currentScale *= 2;
+		else currentScale = 1;
+		img.style.scale = `${currentScale}`;
+		img.animate([{ scale: prev }, {}], defaultDuration);
+	});
+	// 滚轮缩放
+	handle(box, 'wheel', (event: WheelEvent) => {
+		if (event.deltaY < 0) currentScale *= 1.5;
+		else currentScale /= 1.5;
+		fitScale();
+		if (!dragging) fitPosition();
+	});
+	// 缩放 & 移动
+	hammer.on('pan pinch', ({ deltaX, deltaY, scale }) => {
+		dragging = true;
+		img.style.translate = `${currentX + deltaX}px ${currentY + deltaY}px`;
+		img.style.scale = `${currentScale * scale}`;
+	});
+	hammer.on('panend', ({ deltaX, deltaY }) => {
+		currentX += deltaX;
+		currentY += deltaY;
+		dragging = false;
+		const prevX = currentX;
+		const prevY = currentY;
+		fitPosition();
+		img.animate([{ translate: `${prevX}px ${prevY}px` }, {}], defaultDuration);
+	});
+	hammer.on('pinchend', ({ scale }) => {
+		currentScale *= scale;
+		const prev = currentScale;
+		fitScale();
+		img.animate([{ scale: prev }, {}], defaultDuration);
+	});
+	handle(window, 'resize', resize);
+}
+
+export function initImage() {
+	for (const image of $$<HTMLImageElement>('.image img')) {
+		handle(image, 'click', () => display(image));
+	}
+}