PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Add descriptions to active examples (#2407)

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/examples/src/HomePage.tsx
View file

@ -18,7 +18,7 @@ export function HomePage() {
.filter((example) => !example.hide) .filter((example) => !example.hide)
.filter((example) => example.order !== null) .filter((example) => example.order !== null)
.map((example) => ( .map((example) => (
<ListLink key={example.path} example={example} showDescription /> <ListLink key={example.path} example={example} showDescriptionWhenInactive />
))} ))}
</ul> </ul>
<hr /> <hr />
@ -27,7 +27,7 @@ export function HomePage() {
.filter((example) => !example.hide) .filter((example) => !example.hide)
.filter((example) => example.order === null) .filter((example) => example.order === null)
.map((example) => ( .map((example) => (
<ListLink key={example.path} example={example} showDescription /> <ListLink key={example.path} example={example} showDescriptionWhenInactive />
))} ))}
</ul> </ul>
</div> </div>

7
apps/examples/src/components/ListLink.tsx
View file

@ -10,8 +10,8 @@ export const ListLink = forwardRef(function ListLink(
{ {
example, example,
isActive, isActive,
showDescription, showDescriptionWhenInactive,
}: { example: Example; isActive?: boolean; showDescription?: boolean }, }: { example: Example; isActive?: boolean; showDescriptionWhenInactive?: boolean },
ref: ForwardedRef<HTMLLIElement> ref: ForwardedRef<HTMLLIElement>
) { ) {
const id = useId() const id = useId()
@ -53,7 +53,7 @@ export const ListLink = forwardRef(function ListLink(
</Link> </Link>
)} )}
</h3> </h3>
{showDescription && <Markdown sanitizedHtml={example.description} />} {showDescriptionWhenInactive && <Markdown sanitizedHtml={example.description} />}
</> </>
) )
@ -63,6 +63,7 @@ export const ListLink = forwardRef(function ListLink(
// ) // )
const extraDetails = ( const extraDetails = (
<div className="examples__list__item__details" aria-hidden={!isActive}> <div className="examples__list__item__details" aria-hidden={!isActive}>
{!showDescriptionWhenInactive && <Markdown sanitizedHtml={example.description} />}
<Markdown sanitizedHtml={example.details} /> <Markdown sanitizedHtml={example.details} />
<div className="examples__list__item__code"> <div className="examples__list__item__code">
<a href={example.codeUrl} target="_blank" rel="noreferrer"> <a href={example.codeUrl} target="_blank" rel="noreferrer">

10
apps/examples/src/styles.css
View file

@ -92,6 +92,7 @@ html,
overflow: hidden; overflow: hidden;
position: relative; position: relative;
padding: 1.5rem; padding: 1.5rem;
display: block;
} }
.examples__list__item__link { .examples__list__item__link {
position: absolute; position: absolute;
@ -101,7 +102,6 @@ html,
} }
.examples__list__item__active { .examples__list__item__active {
display: block;
padding: 1.5rem; padding: 1.5rem;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
@ -128,18 +128,21 @@ html,
all: unset; all: unset;
font-weight: 700; font-weight: 700;
font-size: 1rem; font-size: 1rem;
margin: 0.25rem 0rem; margin-top: 0.25rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.examples__list__item__details { .examples__list__item__details {
margin-top: 1rem;
position: absolute; position: absolute;
left: 1rem; left: 1rem;
right: 1rem; right: 1rem;
opacity: 0; opacity: 0;
transition: opacity 0.12s ease-in-out; 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 { .examples__list__item__active .examples__list__item__details {
position: static; position: static;
@ -164,7 +167,6 @@ html,
gap: 0.5rem; gap: 0.5rem;
} }
.examples__list__item__code a { .examples__list__item__code a {
margin-top: 0.5rem;
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
border-radius: 6px; border-radius: 6px;
background-color: white; background-color: white;