Format

ascii-dresden · Nov 14, 2023 · 8130705 · 8130705
1 parent 756221b
commit 8130705
Show file tree

Hide file tree

Showing 18 changed files with 194 additions and 41 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,10 +1,12 @@
 {
+	"$schema": "http://json.schemastore.org/prettierrc",
 	"useTabs": true,
 	"singleQuote": true,
 	"trailingComma": "es5",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-astro"],
 	"proseWrap": "always",
+	"singleAttributePerLine": true,
 	"overrides": [
 		{
 			"files": ["*.yml", "*.yaml"],

diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
 		"build": "astro build",
 		"preview": "astro preview",
 		"astro": "astro",
-		"fmt": "prettier --write .",
+		"fmt": "prettier --write . --plugin=prettier-plugin-astro",
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx,.astro .",
 		"lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx,.astro .",
 		"check": "astro check"

diff --git a/src/components/business_hours.tsx b/src/components/business_hours.tsx
@@ -9,7 +9,10 @@ const openingHours = fetchOpeningHours();
 
 export const BusinessHours: Component<JSX.HTMLAttributes<HTMLDivElement>> = function (props) {
 	return (
-		<div {...props} class={props.class ? `${props.class} ${business_hours}` : business_hours}>
+		<div
+			{...props}
+			class={props.class ? `${props.class} ${business_hours}` : business_hours}
+		>
 			<div class={business_hours_section}>
 				<h6>Während der Vorlesungszeit</h6>
 				<dl class={dl}>

diff --git a/src/components/button.tsx b/src/components/button.tsx
@@ -56,11 +56,17 @@ export const IconButton: Component<IconButtonProps> = function (props) {
 	return (
 		<>
 			{props.href !== undefined ? (
-				<a {...props} class={clazz()}>
+				<a
+					{...props}
+					class={clazz()}
+				>
 					{props.children}
 				</a>
 			) : (
-				<button {...props} class={clazz()}>
+				<button
+					{...props}
+					class={clazz()}
+				>
 					{props.children}
 				</button>
 			)}

diff --git a/src/components/divider.tsx b/src/components/divider.tsx
@@ -21,7 +21,12 @@ export const Divider: Component<DividerProps> = function (props) {
 	const id = createMemo(() => `pattern-${btoa(props.class)}`);
 
 	return (
-		<svg class={props.class} preserve-aspect-ratio="none" width="100%" height={height}>
+		<svg
+			class={props.class}
+			preserve-aspect-ratio="none"
+			width="100%"
+			height={height}
+		>
 			<defs>
 				<pattern
 					id={id()}
@@ -31,7 +36,10 @@ export const Divider: Component<DividerProps> = function (props) {
 					height={height}
 				>
 					{/* from */}
-					<path class={gap_filler_from} d={`M0,${startY} L${width},${startY}`} />
+					<path
+						class={gap_filler_from}
+						d={`M0,${startY} L${width},${startY}`}
+					/>
 					<path
 						class={filler_from}
 						d={[
@@ -44,7 +52,10 @@ export const Divider: Component<DividerProps> = function (props) {
 					/>
 
 					{/* to */}
-					<path class={gap_filler_to} d={`M0,${endY} L${width},${endY}`}>
+					<path
+						class={gap_filler_to}
+						d={`M0,${endY} L${width},${endY}`}
+					>
 						{' '}
 					</path>
 					<path
@@ -58,7 +69,11 @@ export const Divider: Component<DividerProps> = function (props) {
 					/>
 				</pattern>
 			</defs>
-			<rect width="100%" height="100%" fill={`url(#${id()})`} />
+			<rect
+				width="100%"
+				height="100%"
+				fill={`url(#${id()})`}
+			/>
 		</svg>
 	);
 };
diff --git a/src/components/image.astro b/src/components/image.astro
@@ -11,6 +11,11 @@ const FORMATS = ['avif', 'webp'] as const;
 type Props = {
 	file: string;
 	alt: string;
+
+	/**
+	 * {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes}
+	 */
+	sizes: string;
 };
 
 type Format = (typeof FORMATS)[number];
@@ -34,6 +39,16 @@ const srcset: Record<Format, string> = Object.fromEntries(
 ---
 
 <picture class={pic}>
-	{FORMATS.map((format) => <source srcset={srcset[format]} type={`image/${format}`} />)}
-	<img src={(await imageMetadata).default.src} alt={Astro.props.alt} />
+	{
+		FORMATS.map((format) => (
+			<source
+				srcset={srcset[format]}
+				type={`image/${format}`}
+			/>
+		))
+	}
+	<img
+		src={(await imageMetadata).default.src}
+		alt={Astro.props.alt}
+	/>
 </picture>
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
@@ -15,7 +15,10 @@ export type Props = {
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1.0"
+		/>
 		<title>ascii</title>
 	</head>
 	<body class={body}>

diff --git a/src/layouts/base/footer.astro b/src/layouts/base/footer.astro
@@ -20,12 +20,18 @@ import { IconButton } from 'src/components/button';
 		<li class={contact}>
 			<ul>
 				<li>
-					<a href="mailto:[email protected]" class={text_link}>
+					<a
+						href="mailto:[email protected]"
+						class={text_link}
+					>
 						<p>[email protected]</p>
 					</a>
 				</li>
 				<li>
-					<a href="tel:+4935146342221" class={text_link}>
+					<a
+						href="tel:+4935146342221"
+						class={text_link}
+					>
 						<p>+49 351 46342221</p>
 					</a>
 				</li>
@@ -42,12 +48,18 @@ import { IconButton } from 'src/components/button';
 		<li>
 			<ul>
 				<li>
-					<a href="/datenschutz" class={text_link}>
+					<a
+						href="/datenschutz"
+						class={text_link}
+					>
 						<p>Datenschutz</p>
 					</a>
 				</li>
 				<li>
-					<a href="/impressum" class={text_link}>
+					<a
+						href="/impressum"
+						class={text_link}
+					>
 						<p>Impressum</p>
 					</a>
 				</li>
@@ -56,12 +68,18 @@ import { IconButton } from 'src/components/button';
 		<li>
 			<ul class={socials}>
 				<li>
-					<IconButton class={social_button} href="https://www.instagram.com/asciidresden/">
+					<IconButton
+						class={social_button}
+						href="https://www.instagram.com/asciidresden/"
+					>
 						<SvgInstagram />
 					</IconButton>
 				</li>
 				<li>
-					<IconButton class={social_button} href="https://github.com/ascii-dresden">
+					<IconButton
+						class={social_button}
+						href="https://github.com/ascii-dresden"
+					>
 						<SvgGithub />
 					</IconButton>
 				</li>

diff --git a/src/layouts/base/header.tsx b/src/layouts/base/header.tsx
@@ -19,8 +19,14 @@ export const Header: Component = function () {
 	});
 
 	return (
-		<header class={header} {...{ [SETTLE]: settle() ? '' : undefined }}>
-			<a class={header_logo} href="/">
+		<header
+			class={header}
+			{...{ [SETTLE]: settle() ? '' : undefined }}
+		>
+			<a
+				class={header_logo}
+				href="/"
+			>
 				<SvgLogo />
 			</a>
 			<div class={header_status}>

diff --git a/src/layouts/base/header/navigation.tsx b/src/layouts/base/header/navigation.tsx
@@ -47,19 +47,35 @@ export const Navigation: Component = function () {
 
 	return (
 		<>
-			<button class={navigation_toggle} type="button" onClick={open}>
+			<button
+				class={navigation_toggle}
+				type="button"
+				onClick={open}
+			>
 				<SvgMenu />
 			</button>
-			<dialog class={navigation} ref={dialog!} onCancel={close}>
-				<button type="submit" class={navigation_toggle} onClick={close}>
+			<dialog
+				class={navigation}
+				ref={dialog!}
+				onCancel={close}
+			>
+				<button
+					type="submit"
+					class={navigation_toggle}
+					onClick={close}
+				>
 					<SvgClose />
 				</button>
 				<nav class={navigation_links}>
 					<ul>
 						<For each={ROUTES}>
 							{({ name, path }) => (
 								<li>
-									<a href={path} class={navigation_link} onClick={close}>
+									<a
+										href={path}
+										class={navigation_link}
+										onClick={close}
+									>
 										<p class={navigation_link_label}>{name}</p>
 										<p class={navigation_link_label_slash}>{path === '/' ? '~' : '/'}</p>
 									</a>
@@ -84,7 +100,10 @@ export const Navigation: Component = function () {
 						</IconButton>
 					</li>
 					<li>
-						<IconButton href="https://github.com/ascii-dresden" class={navigation_button_social}>
+						<IconButton
+							href="https://github.com/ascii-dresden"
+							class={navigation_button_social}
+						>
 							<SvgGithub />
 						</IconButton>
 					</li>

diff --git a/src/layouts/base/header/status.tsx b/src/layouts/base/header/status.tsx
@@ -73,7 +73,11 @@ export const Status: Component = function () {
 	}
 
 	return (
-		<Collapsible.Root class={status_root} forceMount={forceMount()} {...{ [STATUS]: status() }}>
+		<Collapsible.Root
+			class={status_root}
+			forceMount={forceMount()}
+			{...{ [STATUS]: status() }}
+		>
 			<Collapsible.Trigger class={status_trigger}>
 				<div class={status_trigger_text}>
 					<p>
@@ -88,7 +92,10 @@ export const Status: Component = function () {
 				</div>
 			</Collapsible.Trigger>
 			<Collapsible.Content class={status_content}>
-				<BusinessHours class={status_business_hours} onAnimationEnd={onAnimationEnd} />
+				<BusinessHours
+					class={status_business_hours}
+					onAnimationEnd={onAnimationEnd}
+				/>
 			</Collapsible.Content>
 		</Collapsible.Root>
 	);