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:
parent
466a9a2088
commit
ddf8a2623c
3 changed files with 12 additions and 9 deletions
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue