Skip to content

Commit 7a9b4e9

Browse files
yaodingydyaodingyd
committed
chore: update website
1 parent 173cae6 commit 7a9b4e9

File tree

6 files changed

+575
-26
lines changed

6 files changed

+575
-26
lines changed

‎examples/App.css‎

Lines changed: 170 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,176 @@
1+
/* Documentation site styles */
2+
.tab-nav {
3+
display: flex;
4+
gap: 0;
5+
margin: 2rem 0;
6+
border-bottom: 1px solid var(--border);
7+
}
8+
9+
.tab-nav button {
10+
background: transparent;
11+
border: none;
12+
border-bottom: 3px solid transparent;
13+
padding: 1rem 1.5rem;
14+
font-size: 1rem;
15+
font-weight: 500;
16+
color: var(--text-light);
17+
cursor: pointer;
18+
transition: all 0.2s ease;
19+
margin: 0;
20+
}
21+
22+
.tab-nav button:hover {
23+
color: var(--accent);
24+
background: var(--accent-bg);
25+
filter: none;
26+
}
27+
28+
.tab-nav button.active {
29+
color: var(--accent);
30+
border-bottom-color: var(--accent);
31+
background: transparent;
32+
}
33+
34+
.examples-section {
35+
padding: 2rem 0;
36+
}
37+
38+
.docs-section {
39+
display: grid;
40+
grid-template-columns: 250px 1fr;
41+
gap: 3rem;
42+
padding: 2rem 0;
43+
align-items: start;
44+
}
45+
46+
.docs-nav {
47+
position: sticky;
48+
top: 2rem;
49+
}
50+
51+
.docs-nav ul {
52+
list-style: none;
53+
padding: 0;
54+
margin: 0;
55+
}
56+
57+
.docs-nav li {
58+
margin-bottom: 0.5rem;
59+
}
60+
61+
.docs-nav a {
62+
display: block;
63+
padding: 0.5rem 1rem;
64+
text-decoration: none;
65+
color: var(--text-light);
66+
border-radius: 5px;
67+
transition: all 0.2s ease;
68+
}
69+
70+
.docs-nav a:hover {
71+
background: var(--accent-bg);
72+
color: var(--accent);
73+
}
74+
75+
.docs-content article {
76+
margin-bottom: 3rem;
77+
}
78+
79+
.docs-content h2 {
80+
margin-top: 0;
81+
color: var(--accent);
82+
border-bottom: 2px solid var(--accent-bg);
83+
padding-bottom: 0.5rem;
84+
}
85+
86+
.docs-content table {
87+
width: 100%;
88+
margin: 1.5rem 0;
89+
}
90+
91+
.docs-content code {
92+
background: var(--accent-bg);
93+
padding: 0.2rem 0.4rem;
94+
border-radius: 3px;
95+
font-size: 0.9em;
96+
}
97+
98+
.docs-content pre {
99+
background: var(--accent-bg);
100+
border: 1px solid var(--border);
101+
border-radius: 5px;
102+
overflow-x: auto;
103+
}
104+
105+
/* Carousel styles */
1106
.carousel {
2107
height: 300px;
108+
margin: 1rem 0;
3109
}
4110

5111
.carousel-image {
6-
min-width: 150px;
7-
height: 200px;
112+
min-width: 200px;
113+
height: 250px;
114+
object-fit: cover;
115+
border-radius: 8px;
116+
margin-right: 1rem;
117+
}
118+
119+
/* Example sections */
120+
.example-card {
121+
margin-bottom: 3rem;
122+
padding: 2rem;
123+
border: 1px solid var(--border);
124+
border-radius: 8px;
125+
background: var(--accent-bg);
126+
}
127+
128+
.examples-section h3 {
129+
margin-top: 0;
130+
color: var(--accent);
131+
}
132+
133+
.examples-section pre {
134+
background: var(--bg);
135+
border: 1px solid var(--border);
136+
padding: 1rem;
137+
border-radius: 5px;
138+
font-size: 0.9rem;
139+
margin: 1rem 0;
140+
}
141+
142+
.examples-section button {
143+
margin-top: 1rem;
144+
}
145+
146+
/* Mobile responsiveness */
147+
@media only screen and (max-width: 720px) {
148+
.docs-section {
149+
grid-template-columns: 1fr;
150+
gap: 1rem;
151+
}
152+
153+
.docs-nav {
154+
position: static;
155+
order: 2;
156+
}
157+
158+
.docs-content {
159+
order: 1;
160+
}
161+
162+
.tab-nav {
163+
flex-direction: column;
164+
}
165+
166+
.tab-nav button {
167+
text-align: left;
168+
border-bottom: 1px solid var(--border);
169+
border-radius: 0;
170+
}
171+
172+
.carousel-image {
173+
min-width: 150px;
174+
height: 200px;
175+
}
8176
}

‎examples/App.tsx‎

Lines changed: 188 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,207 @@
11
import Flickity from '../src/index';
22
import './App.css';
3-
import React from 'react';
3+
import React, { useState } from 'react';
4+
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
5+
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
46

57
import Default from './Default';
68
import Static from './Static';
79

810
function App() {
11+
const [activeTab, setActiveTab] = useState('examples');
12+
13+
const apiDocs = {
14+
installation: {
15+
title: 'Installation',
16+
bash: `# Install flickity as peer dependency (use v2.3.0 for best experience)
17+
npm install flickity@2.3.0
18+
npm install react-flickity-component`
19+
},
20+
basicUsage: {
21+
title: 'Basic Usage',
22+
javascript: `// CommonJS
23+
const Flickity = require('react-flickity-component');
24+
25+
// ES2015 module
26+
import Flickity from 'react-flickity-component'
27+
28+
const flickityOptions = {
29+
initialIndex: 2
30+
}
31+
32+
function Carousel() {
33+
return (
34+
<Flickity
35+
className={'carousel'}
36+
elementType={'div'}
37+
options={flickityOptions}
38+
disableImagesLoaded
39+
reloadOnUpdate
40+
static
41+
>
42+
<img src="/images/placeholder.png"/>
43+
<img src="/images/placeholder.png"/>
44+
<img src="/images/placeholder.png"/>
45+
</Flickity>
46+
)
47+
}`
48+
},
49+
props: {
50+
title: 'Props',
51+
content: `# Props
52+
53+
| Property | Type | Default | Description |
54+
|----------|------|---------|-------------|
55+
| \`className\` | \`String\` | \`''\` | Applied to top level wrapper |
56+
| \`elementType\` | \`String\` | \`'div'\` | Wrapper's element type |
57+
| \`options\` | \`Object\` | \`{}\` | Flickity initialization options |
58+
| \`disableImagesLoaded\` | \`Boolean\` | \`false\` | Disable call \`reloadCells\` images are loaded |
59+
| \`flickityRef\` | \`Function\` | | Like \`ref\` function, get Flickity instance in parent component |
60+
| \`reloadOnUpdate\` | \`Boolean\` | \`false\` | Run \`reloadCells\` and \`resize\` on \`componentDidUpdate\` |
61+
| \`static\` | \`Boolean\` | \`false\` | Carousel contents are static and not updated at runtime |`
62+
},
63+
apiEvents: {
64+
title: 'API & Events',
65+
description: 'You can access the Flickity instance with `flickityRef` prop and use this instance to register events and use API.',
66+
javascript: `// Function component
67+
function Carousel() {
68+
const ref = React.useRef(null);
69+
70+
const myCustomNext = () => {
71+
// You can use Flickity API
72+
ref.current.next()
73+
}
74+
75+
React.useEffect(() => {
76+
if (ref.current) {
77+
ref.current.on("settle", () => {
78+
console.log(\`current index is \${ref.current.selectedIndex}\`);
79+
});
80+
}
81+
}, []);
82+
83+
return (
84+
<>
85+
<Flickity flickityRef={c => ref.current = c}>
86+
<img src="/images/placeholder.png"/>
87+
<img src="/images/placeholder.png"/>
88+
<img src="/images/placeholder.png"/>
89+
</Flickity>
90+
<Button onClick={myCustomNext}>My custom next button</Button>
91+
</>
92+
)
93+
}`
94+
}
95+
};
96+
97+
const CodeBlock = ({ code, language }: { code: string; language: string }) => (
98+
<SyntaxHighlighter
99+
language={language}
100+
style={oneDark}
101+
customStyle={{
102+
borderRadius: '8px',
103+
fontSize: '14px',
104+
margin: '1rem 0'
105+
}}
106+
>
107+
{code}
108+
</SyntaxHighlighter>
109+
);
110+
9111
return (
10112
<>
11113
<header>
12114
<nav>
13-
<a href="https://github.com/yaodingyd/react-flickity-component">
14-
Github
15-
</a>
115+
<ul>
116+
<li><a href="https://github.com/yaodingyd/react-flickity-component" target="_blank" rel="noopener noreferrer">GitHub</a></li>
117+
<li><a href="https://www.npmjs.com/package/react-flickity-component" target="_blank" rel="noopener noreferrer">NPM</a></li>
118+
</ul>
16119
</nav>
17-
<h1>React-Flickity-Component</h1>
120+
<h1>React Flickity Component</h1>
121+
<p>A React.js component for <a href="https://flickity.metafizzy.co/" target="_blank" rel="noopener noreferrer">Flickity</a> to build touch-friendly carousels</p>
18122
</header>
19123

20124
<main>
21-
<Default />
22-
<Static />
125+
<nav className="tab-nav">
126+
<button
127+
className={activeTab === 'examples' ? 'active' : ''}
128+
onClick={() => setActiveTab('examples')}
129+
>
130+
Examples
131+
</button>
132+
<button
133+
className={activeTab === 'docs' ? 'active' : ''}
134+
onClick={() => setActiveTab('docs')}
135+
>
136+
Documentation
137+
</button>
138+
</nav>
139+
140+
{activeTab === 'examples' && (
141+
<section className="examples-section">
142+
<Default />
143+
<Static />
144+
</section>
145+
)}
146+
147+
{activeTab === 'docs' && (
148+
<section className="docs-section">
149+
<nav className="docs-nav">
150+
<ul>
151+
<li><a href="#installation">Installation</a></li>
152+
<li><a href="#basic-usage">Basic Usage</a></li>
153+
<li><a href="#props">Props</a></li>
154+
<li><a href="#api-events">API & Events</a></li>
155+
</ul>
156+
</nav>
157+
158+
<div className="docs-content">
159+
<article id="installation">
160+
<h2>{apiDocs.installation.title}</h2>
161+
<CodeBlock code={apiDocs.installation.bash} language="bash" />
162+
</article>
163+
164+
<article id="basic-usage">
165+
<h2>{apiDocs.basicUsage.title}</h2>
166+
<CodeBlock code={apiDocs.basicUsage.javascript} language="javascript" />
167+
</article>
168+
169+
<article id="props">
170+
<h2>Props</h2>
171+
<table>
172+
<thead>
173+
<tr>
174+
<th>Property</th>
175+
<th>Type</th>
176+
<th>Default</th>
177+
<th>Description</th>
178+
</tr>
179+
</thead>
180+
<tbody>
181+
<tr><td><code>className</code></td><td><code>String</code></td><td><code>''</code></td><td>Applied to top level wrapper</td></tr>
182+
<tr><td><code>elementType</code></td><td><code>String</code></td><td><code>'div'</code></td><td>Wrapper's element type</td></tr>
183+
<tr><td><code>options</code></td><td><code>Object</code></td><td><code>{}</code></td><td>Flickity initialization options</td></tr>
184+
<tr><td><code>disableImagesLoaded</code></td><td><code>Boolean</code></td><td><code>false</code></td><td>Disable call <code>reloadCells</code> images are loaded</td></tr>
185+
<tr><td><code>flickityRef</code></td><td><code>Function</code></td><td></td><td>Like <code>ref</code> function, get Flickity instance in parent component</td></tr>
186+
<tr><td><code>reloadOnUpdate</code></td><td><code>Boolean</code></td><td><code>false</code></td><td>Run <code>reloadCells</code> and <code>resize</code> on <code>componentDidUpdate</code></td></tr>
187+
<tr><td><code>static</code></td><td><code>Boolean</code></td><td><code>false</code></td><td>Carousel contents are static and not updated at runtime</td></tr>
188+
</tbody>
189+
</table>
190+
</article>
191+
192+
<article id="api-events">
193+
<h2>{apiDocs.apiEvents.title}</h2>
194+
<p>{apiDocs.apiEvents.description}</p>
195+
<CodeBlock code={apiDocs.apiEvents.javascript} language="javascript" />
196+
</article>
197+
</div>
198+
</section>
199+
)}
23200
</main>
201+
202+
<footer>
203+
<p><a href="https://github.com/yaodingyd/react-flickity-component">Contribute on GitHub</a></p>
204+
</footer>
24205
</>
25206
);
26207
}

0 commit comments

Comments
 (0)