Merge pull request #29 from torontojs/feat/implement-components

Feature: implement (some) components
torontojs · Jul 8, 2024 · 871ab26 · 871ab26
2 parents f5daad2 + a200694
commit 871ab26
Show file tree

Hide file tree

Showing 15 changed files with 189 additions and 112 deletions.
diff --git a/src/components/AuthorCard/index.astro b/src/components/AuthorCard/index.astro
@@ -28,9 +28,7 @@ const description = await parseMarkdown(body);
 	</a>
 
 	<div class="author-bio">
-		<small>
-			{/* eslint-disable-next-line astro/no-set-html-directive */}
-			<Fragment set:html={description} />
-		</small>
+		{/* eslint-disable-next-line astro/no-set-html-directive */}
+		<Fragment set:html={description} />
 	</div>
 </div>
diff --git a/src/components/AuthorCard/styles.css b/src/components/AuthorCard/styles.css
@@ -1,17 +1,21 @@
 .author-card {
 	display: grid;
-	padding-inline: var(--spacing-large);
-	grid-template-columns: 1fr auto;
-	grid-template-rows: 1fr auto;
-	gap: var(--spacing-large);
+	padding-inline: var(--size-3);
+	grid-template-columns: auto 1fr;
+	grid-template-rows: auto 1fr;
+	gap: var(--size-3);
 	place-items: center;
 	grid-template-areas:
 		"avatar name"
 		"avatar bio";
-	margin: var(--spacing-large) 0;
+	margin: var(--size-3) 0;
 }
 
-.author-card .author-name * { margin: 0; }
+.author-card .author-name * {
+	margin: 0;
+	color: var(--tjs-red-6);
+	text-shadow: var(--size-1) var(--size-1) var(--gray-12);
+}
 
 .author-card .author-picture {
 	grid-area: avatar;
@@ -22,7 +26,12 @@
 	grid-area: name;
 	justify-self: start;
 }
-.author-card .author-bio { grid-area: bio; }
+
+.author-card .author-bio {
+	grid-area: bio;
+	width: 100%;
+	place-self: start start;
+}
 
 @media (max-width: 768px) {
 	.author-card {

diff --git a/src/components/Avatar/styles.css b/src/components/Avatar/styles.css
@@ -1,12 +1,15 @@
 .user-avatar {
-	--image-size: var(--avatar-size);
+	--image-size: var(--size-13);
 
 	display: block;
 
 	width: var(--image-size);
 	height: var(--image-size);
-	border-radius: 100vmax;
+	aspect-ratio: var(--ratio-square);
+	border-radius: var(--radius-round);
 	overflow: hidden;
+	border: solid var(--tjs-red-6) var(--size-2);
+	box-shadow: var(--size-1) var(--size-1) var(--gray-12);
 }
 
 .user-avatar img {
@@ -17,5 +20,5 @@
 }
 
 @media (max-width: 768px) {
-	.user-avatar { --image-size: var(--avatar-small-size); }
+	.user-avatar { --image-size: var(--size-12); }
 }
diff --git a/src/components/PostHeader/index.astro b/src/components/PostHeader/index.astro
@@ -53,32 +53,36 @@ const formatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'long', timeStyl
 		</blockquote>
 
 		<aside id="post-metadata">
-			<small>
-				<span>
+			<p>
+				<small>
 					Published on <time itemprop="datePublished" class="dt-published" datetime={createdAt.toISOString()}>{formatter.format(createdAt)}</time>.
-				</span>
+				</small>
+			</p>
 
-				{updatedAt && (
-					<span>
+			{updatedAt && (
+				<p>
+					<small>
 						Updated on <time itemprop="dateModified" class="dt-updated" datetime={updatedAt.toISOString()}>{formatter.format(updatedAt)}</time>
 						{hasUpdates && (
 							<a href="#update-history" aria-label="Go to updates section">
 								<Icon name="uil:sync-exclamation" />
 							</a>
 						)}
-					</span>
-				)}
-			</small>
+					</small>
+				</p>
+			)}
 
 			{readingTime && (
-				<small>
-					<time itemprop="timeRequired" class="dt-duration" datetime={`PT${readingTime}M`}>
-						{readingTime} minute read
-					</time>
-					{wordCount && (
-						<span> &mdash; {wordCount} words</span>
-					)}
-				</small>
+				<p>
+					<small>
+						<time itemprop="timeRequired" class="dt-duration" datetime={`PT${readingTime}M`}>
+							{readingTime} minute read
+						</time>
+						{wordCount && (
+							<span> &mdash; {wordCount} words</span>
+						)}
+					</small>
+				</p>
 			)}
 		</aside>
 

diff --git a/src/components/PostHeader/styles.css b/src/components/PostHeader/styles.css
@@ -2,37 +2,26 @@
 	width: 100%;
 	max-width: var(--max-width);
 	margin-inline: auto;
+	margin-block-end: var(--size-8);
 }
 
 #post-header-wrapper {
 	justify-self: stretch;
 	display: grid;
 	place-items: end center;
-	gap: var(--spacing-large);
+	gap: var(--size-3);
 	grid-template-rows: 1fr auto auto auto;
-	grid-template-columns: 1fr 1fr;
+	grid-template-columns: 100%;
 	grid-template-areas:
-		'title hero-image'
-		'summary hero-image'
-		'metadata metadata'
-		'share share';
-	padding: var(--spacing-large);
-	margin: var(--spacing-large);
-}
-
-#post-header-wrapper:not(:has(#hero-image)) {
-	grid-template-rows: 1fr auto auto auto;
-	grid-template-columns: 1fr;
-	grid-template-areas:
-		'title'
+		'hero-title'
 		'summary'
 		'metadata'
 		'share';
 }
 
 #post-header h1 {
 	height: auto;
-	font-size: clamp(2rem, 5vmax, 4rem);
+	font-size: var(--font-size-fluid-3);
 	font-weight: bold;
 
 	overflow-wrap: break-word;
@@ -53,21 +42,43 @@
 	padding: 0;
 }
 
-#post-header #post-title { grid-area: title; }
+#post-header #post-title {
+	grid-area: hero-title;
+	z-index: 1;
+	place-self: end end;
+
+	background-color: white;
+	color: var(--tjs-red-6);
+	text-decoration-color: currentcolor;
+	padding: var(--size-3) var(--size-4);
+	border-start-start-radius: var(--radius-4);
+	border-end-start-radius: var(--radius-4);
+	border: var(--tjs-red-6) solid var(--size-2);
+	border-inline-end: none;
+	margin-block-end: var(--size-7);
+}
+
+#post-header-wrapper:not(:has(#hero-image)) #post-title {
+	margin-block: 0;
+	border-inline: none;
+	border-radius: 0;
+	width: 100%;
+}
 
 #post-header #hero-image {
 	width: 100%;
 	height: 100%;
 	object-fit: contain;
-	grid-area: hero-image;
+	grid-area: hero-title;
 	overflow: hidden;
 }
 
 #post-summary {
 	border: none;
 	font-size: smaller;
 	margin: 0;
-	padding: var(--spacing-large);
+	padding: var(--size-1);
+	font-style: italic;
 	grid-area: summary;
 }
 
@@ -76,17 +87,8 @@
 }
 
 #post-metadata {
-	width: 100%;
 	grid-area: metadata;
 	text-align: center;
-	display: flex;
-	flex-flow: column wrap;
-	justify-content: center;
-	gap: var(--spacing-medium);
-}
-
-#post-metadata a {
-	vertical-align: middle;
 }
 
 #post-share {
@@ -95,33 +97,51 @@
 	flex-wrap: wrap;
 	justify-content: center;
 	align-items: center;
-	gap: var(--spacing-large);
+	gap: var(--size-3);
 }
 
 #post-share button {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	width: var(--button-size);
-	height: var(--button-size);
-	padding: var(--spacing-medium);
+	height: var(--size-7);
+	padding: var(--size-1) var(--size-2);
 }
 
 #post-share button svg {
-	width: 100%;
 	height: 100%;
+	aspect-ratio: var(--ratio-square);
 	pointer-events: none;
 }
 
+
 @media (max-width: 650px) {
 	#post-header-wrapper {
 		grid-template-rows: 1fr auto auto auto auto;
-		grid-template-columns: 1fr;
+		grid-template-columns: 100%;
 		grid-template-areas:
 			'hero-image'
 			'title'
 			'summary'
 			'metadata'
 			'share';
 	}
+
+	#post-header #post-title {
+		grid-area: title;
+		margin-block: calc(var(--size-3) * -1) 0;
+		border-inline: none;
+		border-radius: 0;
+	}
+
+	#post-header #hero-image {
+		grid-area: hero-image;
+	}
+}
+
+@media (min-width: 1025px) {
+	#post-header #post-title,
+	#post-header-wrapper:not(:has(#hero-image)) #post-title {
+		border: var(--tjs-red-6) solid var(--size-2);
+	}
 }
diff --git a/src/components/RefreshBanner/index.astro b/src/components/RefreshBanner/index.astro
@@ -9,14 +9,15 @@ import './styles.css';
 	id="pwa-toast"
 	role="alert"
 	aria-labelledby="toast-message"
+	aria-live="polite"
 >
 	<div>
 		<span id="toast-message"></span>
 	</div>
-	<button id="pwa-refresh" aria-label="Reload page">
-		<Icon name="uil:refresh" title="Reload" />
+	<button id="pwa-refresh" type="button" aria-label="Reload page">
+		<Icon name="uil:refresh" title="Reload icon of two arrows forming a circle." />
 	</button>
-	<button id="pwa-close" aria-label="Close notification">
-		<Icon name="uil:check" title="Close" />
+	<button id="pwa-close" type="button" aria-label="Close notification">
+		<Icon name="uil:check" title="Close &quot;X&quot; icon." />
 	</button>
 </div>
diff --git a/src/components/RefreshBanner/script.ts b/src/components/RefreshBanner/script.ts
@@ -1,18 +1,32 @@
 import { registerSW } from 'virtual:pwa-register';
 
-window.addEventListener('DOMContentLoaded', () => {
+const params = new URLSearchParams(document.location.search.substring(1));
+
+function setPwaMessage(type: 'offline' | 'refresh') {
 	const pwaToast = document.querySelector('#pwa-toast') as HTMLDivElement;
 	const pwaToastMessage = pwaToast.querySelector('#toast-message') as HTMLDivElement;
 
+	switch (type) {
+		case 'refresh':
+			pwaToastMessage.innerHTML = 'New content available, click on reload button to update.';
+			pwaToast.dataset['refresh'] = 'true';
+			break;
+		case 'offline':
+			pwaToastMessage.innerHTML = 'App ready to work offline.';
+			pwaToast.dataset['offline'] = 'true';
+			break;
+		default:
+	}
+}
+
+window.addEventListener('DOMContentLoaded', () => {
 	const refreshSW = registerSW({
 		immediate: true,
 		onOfflineReady() {
-			pwaToastMessage.innerHTML = 'Blog ready to work offline.';
-			pwaToast.dataset['offline'] = 'true';
+			setPwaMessage('offline');
 		},
 		onNeedRefresh() {
-			pwaToastMessage.innerHTML = 'New content available, click on reload button to update.';
-			pwaToast.dataset['refresh'] = 'true';
+			setPwaMessage('refresh');
 		},
 		onRegisteredSW(swScriptUrl) {
 			// eslint-disable-next-line no-console
@@ -26,14 +40,30 @@ window.addEventListener('DOMContentLoaded', () => {
 		if (target.matches('#pwa-close')) {
 			requestAnimationFrame(() => {
 				document.body.removeEventListener('click', pwaEventListener);
-				pwaToast.remove();
+				document.querySelector('#pwa-toast')?.remove();
+
+				params.delete('debug');
+
+				if (params.size > 0) {
+					document.location.search = params.toString();
+				}
 			});
 		}
 
 		if (target.matches('#pwa-refresh')) {
+			params.delete('debug');
+
+			if (params.size > 0) {
+				document.location.search = params.toString();
+			}
+
 			requestAnimationFrame(async () => refreshSW(true));
 		}
 	};
 
+	if (params.get('debug')?.startsWith('pwa-')) {
+		setPwaMessage((params.get('debug')?.replace('pwa-', '') ?? '') as 'offline' | 'refresh');
+	}
+
 	document.body.addEventListener('click', pwaEventListener);
 });