Add organized properties, alternative letter navigation

src/components/PropertyCard.astro

@@ -13,9 +13,9 @@ const { property, initial, change } = Astro.props;
 ---
 <section id={property} tabindex="-1" class="property-card">
 	<header class="property-card__header">
-		<h2 class="property-card__heading">
+		<h3 class="property-card__heading">
 			{property}
-		</h2>
+		</h3>
 
 		<a href={`#${property}`}>
 			<span class="screen-reader-text">Copy link for {property}</span>

src/pages/index.astro

@@ -2,29 +2,66 @@
 import PropertyCard from '@components/PropertyCard.astro';
 import Layout from '@layouts/Layout.astro';
 import json from '@data/data.json';
+import { getOrganizedProperties } from '@src/utils';
 
 const { data } = json;
 const properties = Object.keys(data);
 const title = "CSS Triggers";
+
+const organizedProperties = getOrganizedProperties(properties);
+const firstLetters = Object.keys(organizedProperties);
 ---
 
 <Layout title={title}>
 	<h1 class="screen-reader-text">{title}</h1>
 	<div class="properties">
 		<div class="properties__content">
-			{properties.map((property) => {
-				const { initial, change } = data[property];
-				return (<PropertyCard initial={initial} change={change} property={property} />);
-			})}
+			{firstLetters.map((letter) => (
+				<>
+					<h2 class="properties__letter" id={letter}>{letter}</h2>
+					{organizedProperties[letter].map((property) => {
+						const { initial, change } = data[property];
+						return (<PropertyCard initial={initial} change={change} property={property} />);
+					})}
+				</>
+			))}
 		</div>
+		<ul class="properties__letters">
+			{firstLetters.map((letter) => (
+				<li>
+					<a href={`#${letter}`}>{letter}</a>
+				</li>
+			))}
+		</ul>
 	</div>
 </Layout>
 <style is:global>
+	.properties {
+		display: flex;
+	}
+
 	.properties__content {
 		display: grid;
 		gap: 1em;
 		grid-template-columns: 1fr;
 		justify-content: center;
 		margin-inline: auto;
 	}
+
+	.properties__letter {
+		scroll-margin-block: calc(var(--site-header-height) + 1em);
+	}
+
+	.properties__letters {
+		display: flex;
+		flex-direction: column;
+		height: calc(100dvh - var(--site-header-height) - 2em);
+		justify-content: space-evenly;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		position: sticky;
+		text-align: center;
+		top: var(--site-header-height);
+	}
 </style>

src/utils.js

@@ -0,0 +1,15 @@
+export const getOrganizedProperties = (properties) => {
+  const organizedProperties = {};
+
+  properties.forEach((property) => {
+    const firstLetter = property.charAt(0);
+
+    if (!organizedProperties[firstLetter]) {
+      organizedProperties[firstLetter] = [];
+    }
+
+    organizedProperties[firstLetter].push(property);
+  });
+
+  return organizedProperties;
+};

tsconfig.json

@@ -6,7 +6,8 @@
         "@assets/*": ["src/assets/*"],
         "@components/*": ["src/components/*"],
         "@data/*": ["data/*"],
-        "@layouts/*": ["src/layouts/*"]
+        "@layouts/*": ["src/layouts/*"],
+        "@src/*": ["src/*"],
       }
     }
-  }
+  }