Add button to Examples to request an example (#2597)
This PR adds an issue template to request an example on the repo. And adds a button to the examples app to request an example. I've added a blue background to the view code button to distinguish it from the request example. I think it makes the most sense as our primary button for the page. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Release Notes - Add a button to request an example to the examples app --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This commit is contained in:
Taha
GitHub
parent
9a986ff05e
commit
234ac05d10
7 changed files with 155 additions and 8 deletions
25
.github/ISSUE_TEMPLATE/example_request.yml
vendored
Normal file
25
.github/ISSUE_TEMPLATE/example_request.yml
vendored
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
name: Example Request
|
||||
description: Submit a request for an example
|
||||
title: '[Example Request]: '
|
||||
labels: ['Example Request']
|
||||
assignees: []
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
Need an example of how to do something with tldraw?
|
||||
- type: textarea
|
||||
id: description
|
||||
attributes:
|
||||
label: What's the example?
|
||||
description: Please describe the example. What would you like to see?
|
||||
validations:
|
||||
required: true
|
||||
- type: checkboxes
|
||||
id: terms
|
||||
attributes:
|
||||
label: Code of Conduct
|
||||
description: By submitting this issue, you agree to follow our [Code of Conduct](https://github.com/tldraw/tldraw/blob/main/CODE_OF_CONDUCT.md)
|
||||
options:
|
||||
- label: I agree to follow this project's Code of Conduct
|
||||
required: true
|
||||
12
apps/examples/public/icons/discord.svg
Normal file
12
apps/examples/public/icons/discord.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1463_121087)">
|
||||
<path d="M4.08049 7.01221C4.32412 6.74984 4.65476 6.60162 5.00007 6.59998C5.34538 6.60162 5.67603 6.74984 5.91966 7.01221C6.16329 7.27459 6.30007 7.62974 6.30007 7.99998C6.30007 8.37021 6.16329 8.72536 5.91966 8.98774C5.67603 9.25011 5.34538 9.39833 5.00007 9.39998C4.65476 9.39833 4.32412 9.25011 4.08049 8.98774C3.83685 8.72536 3.70007 8.37021 3.70007 7.99998C3.70007 7.62974 3.83685 7.27459 4.08049 7.01221Z" fill="#2D2D2D"/>
|
||||
<path d="M9.07926 7.01221C9.3229 6.74984 9.65354 6.60162 9.99885 6.59998C10.3442 6.60162 10.6748 6.74984 10.9184 7.01221C11.1621 7.27459 11.2989 7.62974 11.2989 7.99998C11.2989 8.37021 11.1621 8.72536 10.9184 8.98774C10.6748 9.25011 10.3442 9.39833 9.99885 9.39998C9.65354 9.39833 9.3229 9.25011 9.07926 8.98774C8.83563 8.72536 8.69885 8.37021 8.69885 7.99998C8.69885 7.62974 8.83563 7.27459 9.07926 7.01221Z" fill="#2D2D2D"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.94586 1.80299C4.98973 1.79821 5.03403 1.79926 5.07761 1.80611C5.28859 1.83926 5.46936 1.94778 5.60153 2.04762C5.7413 2.15321 5.87082 2.28296 5.98238 2.41388C6.14069 2.59967 6.29436 2.8255 6.39564 3.04143C6.73494 3.01472 7.10264 3.00003 7.5 3.00003C7.89645 3.00003 8.26336 3.01465 8.602 3.04125C8.70328 2.82537 8.85692 2.59961 9.01518 2.41388C9.12674 2.28296 9.25626 2.15321 9.39603 2.04762C9.5282 1.94778 9.70897 1.83926 9.91994 1.80611C9.96353 1.79926 10.0078 1.79821 10.0517 1.80299C10.8961 1.89496 12.1787 2.34982 12.9359 2.76053C12.9881 2.78883 13.0348 2.8262 13.0739 2.87088C13.39 3.23226 13.6756 3.82072 13.899 4.37441C14.129 4.94414 14.3194 5.54458 14.428 5.97872C14.7812 7.39064 14.975 9.08579 15.0001 10.6923C15.0014 10.776 14.9816 10.8587 14.9427 10.9328C14.639 11.5102 13.9887 12.0436 13.3398 12.4324C12.6832 12.8258 11.9163 13.1378 11.2956 13.1977C11.1399 13.2128 10.9861 13.154 10.88 13.039C10.7243 12.8702 10.4611 12.478 10.2634 12.1753C10.1767 12.0426 10.0954 11.9158 10.0297 11.8126C9.3688 11.9317 8.54207 12.0002 7.50002 12.0002C6.45681 12.0002 5.62939 11.9315 4.96812 11.8122C4.90241 11.9155 4.82098 12.0425 4.73419 12.1753C4.53643 12.478 4.2733 12.8702 4.11752 13.039C4.01144 13.154 3.85765 13.2128 3.70193 13.1977C3.08127 13.1378 2.31435 12.8258 1.65781 12.4324C1.00888 12.0436 0.358561 11.5102 0.0548912 10.9328C0.0159279 10.8587 -0.00380681 10.776 -0.00250281 10.6923C0.0225233 9.08579 0.216388 7.39064 0.569535 5.97872C0.678122 5.54458 0.868566 4.94414 1.09852 4.37441C1.32199 3.82072 1.60757 3.23226 1.92364 2.87088C1.96272 2.8262 2.00944 2.78883 2.06162 2.76053C2.81887 2.34982 4.10147 1.89496 4.94586 1.80299ZM3.94943 11.5479C3.93225 11.5743 3.91476 11.6012 3.89705 11.6283C3.76696 11.8274 3.63866 12.0178 3.53827 12.1584C3.14641 12.0683 2.64965 11.8609 2.17176 11.5746C1.63205 11.2512 1.20654 10.881 0.99999 10.5682C1.03284 9.06493 1.21857 7.50509 1.53965 6.22136C1.63669 5.8334 1.81264 5.2769 2.02583 4.74869C2.22582 4.25319 2.43795 3.83541 2.62267 3.59495C3.26952 3.2605 4.28449 2.90752 4.94803 2.81071C4.96112 2.81866 4.97802 2.82988 4.99875 2.84554C5.06541 2.89589 5.14282 2.97044 5.22123 3.06246C5.25511 3.10222 5.28654 3.14206 5.31532 3.18102C5.02277 3.2357 4.76083 3.30049 4.52795 3.37214C3.84282 3.58295 3.34501 3.87336 3.1 4.20003C2.93431 4.42094 2.97909 4.73434 3.2 4.90003C3.42091 5.06572 3.73431 5.02094 3.9 4.80003C3.95499 4.7267 4.20717 4.51711 4.82204 4.32792C5.41424 4.1457 6.28795 4.00003 7.5 4.00003C8.71205 4.00003 9.58576 4.1457 10.178 4.32792C10.7928 4.51711 11.045 4.7267 11.1 4.80003C11.2657 5.02094 11.5791 5.06572 11.8 4.90003C12.0209 4.73434 12.0657 4.42094 11.9 4.20003C11.655 3.87336 11.1572 3.58295 10.472 3.37214C10.2386 3.30031 9.97595 3.23538 9.68254 3.18062C9.71124 3.14179 9.74257 3.10208 9.77633 3.06246C9.85474 2.97044 9.93215 2.89589 9.9988 2.84554C10.0195 2.82988 10.0364 2.81866 10.0495 2.81071C10.7131 2.90752 11.728 3.2605 12.3749 3.59495C12.5596 3.83541 12.7717 4.25319 12.9717 4.74869C13.1849 5.2769 13.3609 5.8334 13.4579 6.22136C13.779 7.50509 13.9647 9.06493 13.9976 10.5682C13.791 10.881 13.3655 11.2512 12.8258 11.5746C12.3479 11.8609 11.8511 12.0683 11.4593 12.1584C11.3589 12.0178 11.2306 11.8274 11.1005 11.6283C11.083 11.6014 11.0656 11.5748 11.0486 11.5486C11.8226 11.2697 12.2427 10.8875 12.5161 10.4775C12.6692 10.2477 12.6071 9.93731 12.3774 9.78413C12.1476 9.63095 11.8372 9.69304 11.684 9.9228C11.4284 10.3062 10.7547 11.0002 7.50002 11.0002C4.24536 11.0002 3.57163 10.3062 3.31605 9.92281C3.16288 9.69304 2.85244 9.63095 2.62268 9.78412C2.39291 9.9373 2.33082 10.2477 2.484 10.4775C2.7571 10.8872 3.17667 11.269 3.94943 11.5479Z" fill="#2D2D2D"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1463_121087">
|
||||
<rect width="15" height="15" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
3
apps/examples/public/icons/github.svg
Normal file
3
apps/examples/public/icons/github.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.49933 0.249978C3.49635 0.249978 0.25 3.49591 0.25 7.50022C0.25 10.703 2.32715 13.4206 5.2081 14.3797C5.57084 14.446 5.70302 14.2221 5.70302 14.0299C5.70302 13.8576 5.69679 13.4019 5.69323 12.797C3.67661 13.235 3.25112 11.825 3.25112 11.825C2.92132 10.9874 2.44599 10.7644 2.44599 10.7644C1.78773 10.3148 2.49584 10.3238 2.49584 10.3238C3.22353 10.3749 3.60629 11.071 3.60629 11.071C4.25298 12.1788 5.30335 11.8588 5.71638 11.6732C5.78225 11.205 5.96962 10.8854 6.17658 10.7043C4.56675 10.5209 2.87415 9.89915 2.87415 7.12102C2.87415 6.32923 3.15677 5.68254 3.62053 5.17561C3.54576 4.99224 3.29697 4.25518 3.69174 3.25689C3.69174 3.25689 4.30015 3.06194 5.68522 3.99971C6.26337 3.83904 6.8838 3.75893 7.50022 3.75581C8.1162 3.75893 8.73619 3.83904 9.31523 3.99971C10.6994 3.06194 11.3069 3.25689 11.3069 3.25689C11.7026 4.25518 11.4538 4.99224 11.3795 5.17561C11.8441 5.68254 12.1245 6.32923 12.1245 7.12102C12.1245 9.90628 10.4292 10.5191 8.81452 10.6985C9.07444 10.9224 9.30633 11.3648 9.30633 12.0413C9.30633 13.0102 9.29742 13.7922 9.29742 14.0299C9.29742 14.2239 9.42828 14.4496 9.79591 14.3788C12.6746 13.4179 14.75 10.7025 14.75 7.50022C14.75 3.49591 11.5036 0.249978 7.49933 0.249978" fill="#2D2D2D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
4
apps/examples/public/icons/twitter.svg
Normal file
4
apps/examples/public/icons/twitter.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.23347 4.69633C7.23347 2.96887 8.63346 1.5686 10.3601 1.5686C12.3031 1.5686 13.4957 3.33048 13.4957 5.00083C13.4957 8.68713 10.6874 12.9746 5.52134 12.9746C3.93917 12.9746 2.46555 12.5111 1.22516 11.7152C1.02917 11.5895 0.945933 11.3451 1.02444 11.1258C1.10294 10.9066 1.3224 10.7706 1.55367 10.7978C1.74004 10.8198 1.92971 10.831 2.12221 10.831C2.82595 10.831 3.49398 10.6795 4.09587 10.4071C3.31987 10.0395 2.71968 9.36178 2.45469 8.53509C2.40426 8.37777 2.43497 8.20646 2.53511 8.07684C1.90532 7.50479 1.51 6.67941 1.51 5.76151V5.72768C1.51 5.55051 1.60376 5.38656 1.75646 5.29673C1.78736 5.27855 1.81973 5.26396 1.85301 5.25295C1.64719 4.83575 1.53143 4.366 1.53143 3.86966C1.53143 3.29809 1.68595 2.76085 1.95411 2.29827C2.03647 2.1562 2.18333 2.06363 2.34703 2.05061C2.51073 2.03759 2.67039 2.10578 2.77417 2.23305C3.86547 3.57129 5.44077 4.49586 7.23377 4.73964C7.23357 4.72523 7.23347 4.71079 7.23347 4.69633ZM2.63816 6.49033C2.88893 7.17798 3.48434 7.70032 4.21566 7.84714C4.44315 7.8928 4.60933 8.08897 4.61698 8.32087C4.62463 8.55276 4.47175 8.75946 4.24777 8.82002C4.09338 8.86177 3.93479 8.89191 3.77291 8.90972C4.15542 9.38625 4.73894 9.6946 5.3937 9.70616C5.60531 9.7099 5.79165 9.84646 5.85893 10.0471C5.92622 10.2478 5.85988 10.4691 5.69329 10.5996C5.05138 11.1027 4.3004 11.4734 3.48222 11.6703C4.12699 11.8681 4.81144 11.9746 5.52134 11.9746C10.0203 11.9746 12.4957 8.25712 12.4957 5.00083C12.4957 3.71212 11.5944 2.5686 10.3601 2.5686C9.18603 2.5686 8.23347 3.52088 8.23347 4.69633C8.23347 4.86287 8.25266 5.0252 8.28862 5.18287C8.32343 5.33551 8.28474 5.49565 8.18406 5.61556C8.08339 5.73546 7.93236 5.80129 7.776 5.79342C5.74502 5.69116 3.91635 4.83008 2.5654 3.48932C2.54308 3.61278 2.53143 3.73987 2.53143 3.86966C2.53143 4.60737 2.90661 5.25897 3.47769 5.64076C3.66328 5.76483 3.74413 5.9969 3.67582 6.20943C3.6075 6.42196 3.40657 6.56346 3.18345 6.55616C2.99723 6.55006 2.81498 6.52765 2.63816 6.49033Z" fill="#2D2D2D"/>
|
||||
<path d="M13.1965 3.56882C13.7282 3.5051 14.234 3.36413 14.7049 3.15549L14.7038 3.15718C14.3525 3.68329 13.907 4.14511 13.3939 4.51615L12.6833 2.75231C13.2816 2.63502 13.8438 2.41623 14.3513 2.11511C14.1551 2.72862 13.7389 3.24402 13.1965 3.56882Z" fill="#2D2D2D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -42,9 +42,34 @@ export function ExamplePage({
|
|||
return (
|
||||
<div className="example">
|
||||
<div className="example__info">
|
||||
<Link className="example__logo" to="/">
|
||||
<ExamplesTldrawLogo /> examples
|
||||
</Link>
|
||||
<div className="example__sidebar-header">
|
||||
<Link className="example__logo" to="/">
|
||||
<ExamplesTldrawLogo />
|
||||
</Link>
|
||||
<div className="example__info__list__socials">
|
||||
<a
|
||||
href="https://twitter.com/tldraw"
|
||||
className="example__info__list__socials__button"
|
||||
title="twitter"
|
||||
>
|
||||
<SocialIcon icon="twitter" />
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/tldraw/tldraw"
|
||||
className="example__info__list__socials__button"
|
||||
title="github"
|
||||
>
|
||||
<SocialIcon icon="github" />
|
||||
</a>
|
||||
<a
|
||||
href="https://discord.com/invite/SBBEVCA4PG"
|
||||
className="example__info__list__socials__button"
|
||||
title="discord"
|
||||
>
|
||||
<SocialIcon icon="discord" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="example__info__list scroll-light" ref={scrollElRef}>
|
||||
{examples
|
||||
.filter((e) => !e.hide)
|
||||
|
|
@ -72,8 +97,33 @@ export function ExamplePage({
|
|||
/>
|
||||
))}
|
||||
</ul>
|
||||
<div className="example__info__list__link">
|
||||
<a
|
||||
className="link__button link__button--grey"
|
||||
target="_blank"
|
||||
href="https://github.com/tldraw/tldraw/issues/new?assignees=&labels=Example%20Request&projects=&template=example_request.yml&title=%5BExample Request%5D%3A+"
|
||||
>
|
||||
Request an example
|
||||
</a>
|
||||
<a className="link__button link__button--grey" target="_blank" href="https://tldraw.dev">
|
||||
Visit the docs
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="example__content">{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function SocialIcon({ icon }: { icon: string }) {
|
||||
return (
|
||||
<img
|
||||
className="icon"
|
||||
src={`/icons/${icon}.svg`}
|
||||
style={{
|
||||
mask: `url(/icons/${icon}.svg) center 100% / 100% no-repeat`,
|
||||
WebkitMask: `url(/icons/${icon}.svg) center 100% / 100% no-repeat`,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export const ListLink = forwardRef(function ListLink(
|
|||
{!showDescriptionWhenInactive && <Markdown sanitizedHtml={example.description} />}
|
||||
<Markdown sanitizedHtml={example.details} />
|
||||
<div className="examples__list__item__code">
|
||||
<a href={example.codeUrl} target="_blank" rel="noreferrer">
|
||||
<a className="link__button" href={example.codeUrl} target="_blank" rel="noreferrer">
|
||||
View code
|
||||
</a>
|
||||
{/* <a
|
||||
|
|
|
|||
|
|
@ -170,18 +170,27 @@ html,
|
|||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.examples__list__item__code a {
|
||||
.link__button {
|
||||
padding: 0.5rem 0.5rem;
|
||||
border-radius: 6px;
|
||||
background-color: white;
|
||||
background-color: hsl(214, 84%, 56%);
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: inherit;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.04);
|
||||
box-shadow:
|
||||
0px 1px 2px rgba(0, 0, 0, 0.12),
|
||||
0px 1px 3px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.link__button--grey {
|
||||
background-color: #f5f5f5;
|
||||
color: black;
|
||||
border: 1px solid #e8e8e8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.example {
|
||||
|
|
@ -206,6 +215,15 @@ html,
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.example__sidebar-header {
|
||||
display: flex;
|
||||
height: 44px;
|
||||
margin-bottom: 8px;
|
||||
padding-right: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.example__logo {
|
||||
all: unset;
|
||||
cursor: pointer;
|
||||
|
|
@ -287,3 +305,38 @@ html,
|
|||
border-top: 1px solid #e8e8e8;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.example__info__list__link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.example__info__list__socials {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
.example__info__list__socials__button {
|
||||
color: black;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: black;
|
||||
background-color: black;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue