From ddf8a2623cdd74d3f83d328e65091c48e0885211 Mon Sep 17 00:00:00 2001
From: alex <alex@dytry.ch>
Date: Fri, 5 Jan 2024 11:08:36 +0000
Subject: [PATCH] Add descriptions to active examples (#2407)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds example descriptions to active examples. Some examples only have
descriptions and no details, so we should show both on the example
details

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]
---
 apps/examples/src/HomePage.tsx            |  4 ++--
 apps/examples/src/components/ListLink.tsx |  7 ++++---
 apps/examples/src/styles.css              | 10 ++++++----
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/apps/examples/src/HomePage.tsx b/apps/examples/src/HomePage.tsx
index 011c7689a..c7283a702 100644
--- a/apps/examples/src/HomePage.tsx
+++ b/apps/examples/src/HomePage.tsx
@@ -18,7 +18,7 @@ export function HomePage() {
 					.filter((example) => !example.hide)
 					.filter((example) => example.order !== null)
 					.map((example) => (
-						<ListLink key={example.path} example={example} showDescription />
+						<ListLink key={example.path} example={example} showDescriptionWhenInactive />
 					))}
 			</ul>
 			<hr />
@@ -27,7 +27,7 @@ export function HomePage() {
 					.filter((example) => !example.hide)
 					.filter((example) => example.order === null)
 					.map((example) => (
-						<ListLink key={example.path} example={example} showDescription />
+						<ListLink key={example.path} example={example} showDescriptionWhenInactive />
 					))}
 			</ul>
 		</div>
diff --git a/apps/examples/src/components/ListLink.tsx b/apps/examples/src/components/ListLink.tsx
index 9cee389df..b7a2b1e48 100644
--- a/apps/examples/src/components/ListLink.tsx
+++ b/apps/examples/src/components/ListLink.tsx
@@ -10,8 +10,8 @@ export const ListLink = forwardRef(function ListLink(
 	{
 		example,
 		isActive,
-		showDescription,
-	}: { example: Example; isActive?: boolean; showDescription?: boolean },
+		showDescriptionWhenInactive,
+	}: { example: Example; isActive?: boolean; showDescriptionWhenInactive?: boolean },
 	ref: ForwardedRef<HTMLLIElement>
 ) {
 	const id = useId()
@@ -53,7 +53,7 @@ export const ListLink = forwardRef(function ListLink(
 					</Link>
 				)}
 			</h3>
-			{showDescription && <Markdown sanitizedHtml={example.description} />}
+			{showDescriptionWhenInactive && <Markdown sanitizedHtml={example.description} />}
 		</>
 	)
 
@@ -63,6 +63,7 @@ export const ListLink = forwardRef(function ListLink(
 	// )
 	const extraDetails = (
 		<div className="examples__list__item__details" aria-hidden={!isActive}>
+			{!showDescriptionWhenInactive && <Markdown sanitizedHtml={example.description} />}
 			<Markdown sanitizedHtml={example.details} />
 			<div className="examples__list__item__code">
 				<a href={example.codeUrl} target="_blank" rel="noreferrer">
diff --git a/apps/examples/src/styles.css b/apps/examples/src/styles.css
index 57b850b05..7f1eb1fe9 100644
--- a/apps/examples/src/styles.css
+++ b/apps/examples/src/styles.css
@@ -92,6 +92,7 @@ html,
 	overflow: hidden;
 	position: relative;
 	padding: 1.5rem;
+	display: block;
 }
 .examples__list__item__link {
 	position: absolute;
@@ -101,7 +102,6 @@ html,
 }
 
 .examples__list__item__active {
-	display: block;
 	padding: 1.5rem;
 	text-decoration: none;
 	color: inherit;
@@ -128,18 +128,21 @@ html,
 	all: unset;
 	font-weight: 700;
 	font-size: 1rem;
-	margin: 0.25rem 0rem;
+	margin-top: 0.25rem;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 }
 .examples__list__item__details {
-	margin-top: 1rem;
 	position: absolute;
 	left: 1rem;
 	right: 1rem;
 	opacity: 0;
 	transition: opacity 0.12s ease-in-out;
+	margin-top: 0.5rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
 }
 .examples__list__item__active .examples__list__item__details {
 	position: static;
@@ -164,7 +167,6 @@ html,
 	gap: 0.5rem;
 }
 .examples__list__item__code a {
-	margin-top: 0.5rem;
 	padding: 0.5rem 0.5rem;
 	border-radius: 6px;
 	background-color: white;