Skip to content

Commit fef7cd9

Browse files
vinckrvinckr
authored
feat: example page (#825)
Closes #817
1 parent fc5f665 commit fef7cd9

File tree

17 files changed

+576
-0
lines changed

17 files changed

+576
-0
lines changed

‎docusaurus.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,11 @@ module.exports = {
103103
sidebarId: 'docs',
104104
label: 'Documentation'
105105
},
106+
{
107+
to: '/examples',
108+
position: 'left',
109+
label: 'Examples'
110+
},
106111
{
107112
type: 'docSidebar',
108113
position: 'left',

‎src/components/Examples/example-list.module.css

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
.card {
2+
background-color: var(--ifm-pre-background);
3+
color: inherit;
4+
padding: 1rem;
5+
display: grid;
6+
height: 100%;
7+
grid-template-columns: 2rem 1.75fr;
8+
grid-template-rows: 1fr;
9+
gap: 1rem;
10+
grid-template-areas:
11+
"logo-img content";
12+
}
13+
14+
.cardcontent {
15+
display: flex;
16+
justify-content: space-between;
17+
flex-direction: column;
18+
}
19+
20+
.cardimage {
21+
grid-area: logo-img;
22+
width: 2rem;
23+
}
24+
25+
.cardtitle {
26+
margin-bottom: 0.25rem;
27+
}
28+
29+
30+
.cardbuttongroup {
31+
grid-area: buttons;
32+
display: flex;
33+
flex-direction: row;
34+
}
35+
36+
.cardbutton {
37+
display: flex;
38+
align-items: center;
39+
background-color: transparent;
40+
border: 1px solid rgba(128, 128, 128, 0.32);
41+
color: inherit;
42+
padding: 8px 12px;
43+
cursor: pointer;
44+
}
45+
46+
.cardbutton:hover {
47+
background-color: rgba(128, 128, 128, 0.32)
48+
}
49+
50+
.cardbutton:first-child {
51+
margin-right: 0.5rem;
52+
}
53+
54+
.cardbuttonimg {
55+
fill: var(--ifm-font-color-base);
56+
margin-right: 0.25rem;
57+
}
58+
59+
.examplesection {
60+
max-width: var(--ifm-container-width-xl);
61+
margin: 0 auto;
62+
padding: 2rem 2rem 3rem;
63+
}
64+
65+
.examplesectionheading {
66+
padding-bottom: 1rem;
67+
}
68+
69+
.cardgrid {
70+
margin: 0 auto;
71+
display: grid;
72+
gap: 1rem;
73+
}
74+
75+
@media screen and (min-width: 600px) {
76+
.cardgrid {
77+
grid-template-columns: repeat(2, 1fr);
78+
}
79+
}
80+
81+
@media screen and (min-width: 996px) {
82+
.cardgrid {
83+
grid-template-columns: repeat(3, 1fr);
84+
}
85+
}

‎src/components/Examples/example-list.tsx

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import React from 'react'
2+
import styles from './example-list.module.css'
3+
4+
export interface PropTypes {
5+
id
6+
title?
7+
description?
8+
examples: Array<ExampleCard>
9+
}
10+
11+
interface ExampleCard {
12+
title: string
13+
language: string
14+
author: string
15+
tested: boolean
16+
repo: string
17+
docs?: string
18+
description?: string
19+
}
20+
21+
const ExampleCard = ({
22+
title,
23+
language,
24+
author,
25+
repo,
26+
docs
27+
}: ExampleCard) => (
28+
<article className={styles.card}>
29+
<div>
30+
<img
31+
className={styles.cardimage}
32+
src={'./img/examples/' + language + '.svg'}
33+
/>
34+
</div>
35+
<section className={styles.cardcontent}>
36+
<div>
37+
<h4 className={styles.cardtitle}>{title}</h4>
38+
<p>
39+
by <a href={'https://github.com/' + author}>@{author}</a>
40+
</p>
41+
</div>
42+
43+
<div className={styles.cardbuttongroup}>
44+
<button
45+
className={styles.cardbutton}
46+
onClick={() => (location.href = `${repo}`)}
47+
type='button'
48+
>
49+
<svg className={styles.cardbuttonimg} width='16' height='16' viewBox='0 0 16 16'
50+
xmlns='http://www.w3.org/2000/svg'>
51+
<path fillRule='evenodd' clipRule='evenodd'
52+
d='M8.04876 0.625C6.25578 0.624404 4.52114 1.26202 3.15539 2.4237C1.78964 3.58538 0.881967 5.19525 0.594888 6.9651C0.307809 8.73494 0.660065 10.5492 1.58859 12.083C2.51711 13.6168 3.96127 14.7701 5.66251 15.3362C6.03751 15.4062 6.17751 15.1725 6.17751 14.9738C6.17751 14.7938 6.17126 14.1988 6.16751 13.5675C4.06751 14.025 3.62501 12.6775 3.62501 12.6775C3.28126 11.8025 2.78626 11.5725 2.78626 11.5725C2.10126 11.1037 2.83876 11.1137 2.83876 11.1137C3.59626 11.1675 3.99501 11.8912 3.99501 11.8912C4.66876 13.0462 5.76126 12.7125 6.19251 12.5162C6.26001 12.0287 6.45501 11.6963 6.67126 11.5075C4.99501 11.3163 3.23251 10.6688 3.23251 7.77625C3.22127 7.02632 3.49977 6.30096 4.01001 5.75125C3.93126 5.56 3.67251 4.7925 4.08251 3.75125C4.08251 3.75125 4.71626 3.54875 6.15876 4.525C7.39647 4.18666 8.7023 4.18666 9.94001 4.525C11.38 3.54875 12.0138 3.75125 12.0138 3.75125C12.4238 4.79125 12.1663 5.55875 12.0875 5.75125C12.5973 6.30116 12.8753 7.02649 12.8638 7.77625C12.8638 10.6763 11.0988 11.315 9.41751 11.5013C9.68876 11.735 9.93001 12.195 9.93001 12.8987C9.93001 13.9087 9.92126 14.7225 9.92126 14.9712C9.92126 15.1712 10.0563 15.4075 10.4388 15.3325C12.1375 14.7642 13.5788 13.6103 14.5051 12.077C15.4313 10.5437 15.7821 8.73106 15.4948 6.96294C15.2075 5.19482 14.3007 3.5865 12.9367 2.42542C11.5726 1.26434 9.84007 0.626181 8.04876 0.625V0.625Z' />
53+
<path
54+
d='M3.35875 11.4625C3.3425 11.5013 3.28375 11.5113 3.23375 11.4863C3.18375 11.4613 3.1475 11.41 3.16625 11.3725C3.185 11.335 3.24125 11.3238 3.29125 11.3488C3.34125 11.3738 3.37625 11.425 3.3575 11.4625H3.35875Z' />
55+
<path
56+
d='M3.66501 11.8037C3.62876 11.8375 3.55876 11.8225 3.51126 11.7688C3.48828 11.7505 3.47315 11.7241 3.46896 11.6951C3.46478 11.666 3.47186 11.6365 3.48876 11.6125C3.52626 11.5788 3.59376 11.595 3.64376 11.6475C3.69376 11.7 3.70251 11.7725 3.66501 11.8037Z' />
57+
<path
58+
d='M3.9625 12.2387C3.91625 12.2712 3.8375 12.2388 3.79375 12.1738C3.75 12.1088 3.7475 12.0263 3.79375 11.9938C3.84 11.9613 3.91875 11.9937 3.9625 12.0575C4.00625 12.1212 4.00875 12.2062 3.9625 12.2387V12.2387Z' />
59+
<path
60+
d='M4.37001 12.6588C4.32876 12.705 4.24501 12.6925 4.17626 12.63C4.10751 12.5675 4.09251 12.4825 4.13376 12.4375C4.17501 12.3925 4.25876 12.4038 4.32876 12.4663C4.39876 12.5288 4.41376 12.6138 4.37001 12.6588Z' />
61+
<path
62+
d='M4.9325 12.9025C4.915 12.9613 4.83 12.9888 4.74375 12.9638C4.6575 12.9388 4.6025 12.8688 4.61875 12.8088C4.635 12.7488 4.7225 12.7213 4.8075 12.7475C4.8925 12.7738 4.94875 12.8425 4.9325 12.9025Z' />
63+
<path
64+
d='M5.54999 12.9463C5.54999 13.0088 5.47999 13.06 5.38999 13.0613C5.29999 13.0625 5.22749 13.0138 5.22624 12.9525C5.22499 12.8913 5.29749 12.8388 5.38749 12.8363C5.47749 12.8338 5.54999 12.885 5.54999 12.9463V12.9463Z' />
65+
<path
66+
d='M6.125 12.85C6.13625 12.9113 6.07375 12.975 5.985 12.99C5.89625 13.005 5.81625 12.9688 5.805 12.9075C5.79375 12.8463 5.8575 12.7825 5.945 12.7675C6.0325 12.7525 6.11375 12.7888 6.125 12.85Z' />
67+
</svg>
68+
Code
69+
</button>
70+
{docs && (
71+
<button
72+
className={styles.cardbutton}
73+
onClick={() => (location.href = `${docs}`)}
74+
type='button'
75+
>
76+
<svg className={styles.cardbuttonimg} width='16' height='16' viewBox='0 0 16 16'
77+
xmlns='http://www.w3.org/2000/svg'>
78+
<path fillRule='evenodd' clipRule='evenodd'
79+
d='M2.67311 4.50861V11.7547C4.17033 11.1944 5.83007 11.1926 7.33724 11.7568V4.53539C5.86645 3.81046 4.14513 3.80154 2.67311 4.50861ZM8.33648 13.3863C8.30093 13.4058 8.26381 13.4219 8.22568 13.4346C8.15612 13.4594 8.08134 13.4729 8.00355 13.4729C7.9308 13.4729 7.8611 13.4615 7.79601 13.4405C7.75228 13.4269 7.71003 13.4088 7.67017 13.3863C6.01773 12.4343 3.98549 12.4343 2.3397 13.3863H2.33904C2.01255 13.566 1.6061 13.4595 1.4262 13.14C1.3483 13.0038 1.32151 12.8537 1.3405 12.7119V4.24806C1.33593 4.21678 1.33357 4.18482 1.33357 4.15234C1.32691 3.90603 1.46017 3.68635 1.66673 3.56652L1.66007 3.56053C3.60569 2.44216 5.97775 2.37559 7.99 3.38079C9.98893 2.36893 12.3743 2.4355 14.3199 3.56053C14.3819 3.59609 14.436 3.6405 14.4816 3.69134C14.5961 3.81026 14.6666 3.97229 14.6666 4.15311V12.8072C14.6666 13.1733 14.3668 13.4729 14.0003 13.4729C13.8988 13.4729 13.8032 13.4507 13.7178 13.4111C13.7005 13.4034 13.6836 13.3951 13.667 13.3863C12.0145 12.4343 9.98227 12.4343 8.33648 13.3863ZM13.334 11.7598V4.53537C11.8632 3.81046 10.1419 3.80154 8.66986 4.50863V11.7579C10.1768 11.1975 11.8318 11.2007 13.334 11.7598Z' />
80+
</svg>
81+
Docs
82+
</button>
83+
)}
84+
</div>
85+
</section>
86+
</article>
87+
)
88+
89+
const ExampleList = ({ id, examples, title, description }: PropTypes) => (
90+
<section className={styles.examplesection} id={id}>
91+
<div className={styles.examplesectionheading}>
92+
<h1>{title}</h1>
93+
<p>{description}</p>
94+
</div>
95+
<div className={styles.cardgrid}>
96+
{examples.map((examples, index) => (
97+
<div key={index}>
98+
<ExampleCard {...examples} />
99+
</div>
100+
))}
101+
</div>
102+
</section>
103+
)
104+
105+
export default ExampleList

0 commit comments

Comments
 (0)