Add descriptions to active examples (#2407)

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]
This commit is contained in:
alex 2024-01-05 11:08:36 +00:00 committed by GitHub
parent 466a9a2088
commit ddf8a2623c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 9 deletions

View file

@ -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>

View file

@ -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">

View file

@ -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;