ezal-theme-example 0.0.6 → 0.0.7

package/assets/styles/_index/contact.styl

@@ -1,3 +1,13 @@
+.sr-only
+	position absolute
+	overflow hidden
+	clip rect(0 0 0 0)
+	margin -1px
+	width 1px
+	height 1px
+	border 0
+	white-space nowrap
+
 .contact
 	display flex
 	flex-wrap wrap

package/layouts/404.tsx

@@ -2,7 +2,7 @@ import base from './base';
 
 export default base(
 	<main class="wrap">
-		<canvas width={400}/>
+		<canvas width={400} />
 		<h2>NOT FOUND</h2>
 	</main>,
 );

package/layouts/article.tsx

@@ -1,8 +1,8 @@
+import { Temporal } from '@js-temporal/polyfill';
 import { Article, Time, URL } from 'ezal';
 import type { Context } from 'ezal-markdown';
 import base from './base';
 import Image from './components/Image';
-import { Temporal } from '@js-temporal/polyfill';
 
 const { theme } = context;
 const page = context.page as Article;
@@ -95,11 +95,17 @@ let outdateTemplate: JSX.Element | undefined;
 if (page.data.outdate) {
 	const outdate = Time.parseDate(page.data.outdate.date, page.updated);
 	if (outdate) {
-		const outdated = outdate.epochMilliseconds <= Temporal.Now.zonedDateTimeISO().epochMilliseconds;
+		const outdated =
+			outdate.epochMilliseconds <=
+			Temporal.Now.zonedDateTimeISO().epochMilliseconds;
 		const classList = ['article-outdate'];
 		if (outdated) classList.push('article-outdate-show');
 		const time = outdate.toString({ timeZoneName: 'never' });
-		outdateTemplate = <div class={classList} data-time={time}>{page.data.outdate.message}</div>
+		outdateTemplate = (
+			<div class={classList} data-time={time}>
+				{page.data.outdate.message}
+			</div>
+		);
 	}
 }
 

package/layouts/components/Contact.tsx

@@ -6,9 +6,12 @@ export default (options?: { style?: JSX.IntrinsicAttributes['style'] }) => (
 			<a
 				class={`icon-${icon}`}
 				href={URL.for(url)}
+				aria-label={name}
 				title={name}
 				style={{ $color: color }}
-			></a>
+			>
+				<div class="sr-only">{name}</div>
+			</a>
 		))}
 	</div>
 );

package/layouts/components/Head.tsx

@@ -44,15 +44,15 @@ const mermaidScript =
 	'const charts=new Map();' +
 	`for(const e of document.querySelectorAll('pre.mermaid')){` +
 	'charts.set(e,e.textContent);' +
-	'}'+
-	'const render=()=>{'+
-	'for(const[e,t]of charts){'+
-	'e.textContent=t;'+
-	`e.removeAttribute('data-processed');`+
+	'}' +
+	'const render=()=>{' +
+	'for(const[e,t]of charts){' +
+	'e.textContent=t;' +
+	`e.removeAttribute('data-processed');` +
 	'}' +
 	'mermaid.initialize({theme:theme()});' +
 	'mermaid.run();' +
-	'};'+
+	'};' +
 	'render();' +
 	'media?.addListener(render);' +
 	'})';

package/layouts/components/Waline.tsx

@@ -15,8 +15,12 @@ export default () => {
 		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>;
+	return (
+		<>
+			<div id="waline" class="wrap"></div>
+			<script type="module" defer>
+				<RawHTML html={script} />
+			</script>
+		</>
+	);
 };

package/layouts/home.tsx

@@ -12,11 +12,11 @@ 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 ? (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ezal-theme-example",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "author": "jonnyjonny",
   "license": "MIT",
   "main": "dist/index.js",
@@ -33,7 +33,7 @@
     "shiki": "^3.15.0",
     "sitemap": "^9.0.0",
     "stylus": "^0.64.0",
-    "ezal-layout": "^0.0.2"
+    "ezal-layout": "^0.0.3"
   },
   "devDependencies": {
     "@types/better-sqlite3": "^7.6.13",