Skip to content

Commit b598776

Browse files
adamplesnikadamplesnik
authored
Merge pull request #1 from adamplesnik/feature/add-docs
Feature/add docs
2 parents 072254a + 737f171 commit b598776

35 files changed

+856
-0
lines changed

‎docs/.eslintrc.cjs

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:@typescript-eslint/recommended',
7+
'plugin:react-hooks/recommended',
8+
],
9+
ignorePatterns: ['dist', '.eslintrc.cjs'],
10+
parser: '@typescript-eslint/parser',
11+
plugins: ['react-refresh'],
12+
rules: {
13+
'react-refresh/only-export-components': [
14+
'warn',
15+
{ allowConstantExport: true },
16+
],
17+
},
18+
}

‎docs/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎docs/README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# React + TypeScript + Vite
2+
3+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4+
5+
Currently, two official plugins are available:
6+
7+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9+
10+
## Expanding the ESLint configuration
11+
12+
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13+
14+
- Configure the top-level `parserOptions` property like this:
15+
16+
```js
17+
export default {
18+
// other rules...
19+
parserOptions: {
20+
ecmaVersion: 'latest',
21+
sourceType: 'module',
22+
project: ['./tsconfig.json', './tsconfig.node.json'],
23+
tsconfigRootDir: __dirname,
24+
},
25+
}
26+
```
27+
28+
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
29+
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
30+
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

‎docs/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en" class="scroll-smooth bg-zinc-50 text-zinc-950 dark:bg-gray-900 dark:text-gray-300">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Scroll-driven Animations for Tailwind CSS</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

‎docs/package.json

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "docs",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10+
"preview": "vite preview"
11+
},
12+
"dependencies": {
13+
"localforage": "^1.10.0",
14+
"lucide-react": "^0.367.0",
15+
"match-sorter": "^6.3.4",
16+
"prismjs": "^1.29.0",
17+
"react": "^18.2.0",
18+
"react-dom": "^18.2.0",
19+
"react-router-dom": "^6.22.3",
20+
"sort-by": "^0.0.2",
21+
"tailwindcss": "^3.4.3"
22+
},
23+
"devDependencies": {
24+
"@adam.plesnik/tailwindcss-scroll-driven-animations": "^0.1.1",
25+
"@types/prismjs": "^1.26.3",
26+
"@types/react": "^18.2.66",
27+
"@types/react-dom": "^18.2.22",
28+
"@typescript-eslint/eslint-plugin": "^7.2.0",
29+
"@typescript-eslint/parser": "^7.2.0",
30+
"@vitejs/plugin-react": "^4.2.1",
31+
"autoprefixer": "^10.4.19",
32+
"babel-plugin-prismjs": "^2.1.0",
33+
"eslint": "^8.57.0",
34+
"eslint-plugin-react-hooks": "^4.6.0",
35+
"eslint-plugin-react-refresh": "^0.4.6",
36+
"postcss": "^8.4.38",
37+
"typescript": "^5.2.2",
38+
"vite": "^5.2.0"
39+
}
40+
}

‎docs/postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎docs/src/components/Banner.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { WandSparkles } from 'lucide-react'
2+
3+
const Banner = () => {
4+
return (
5+
<div className="mb-4 mt-8 flex items-center gap-4 rounded-lg border border-amber-400 bg-amber-50 px-4 py-3 text-sm dark:border-amber-600 dark:bg-stone-700/30">
6+
<WandSparkles
7+
className="size-6 shrink-0 text-amber-500 dark:text-amber-600"
8+
strokeWidth="1"
9+
/>
10+
Scroll-driven animations are not yet supported by your browser. Use Chrome 116 or newer to see
11+
the demos working correctly.
12+
</div>
13+
)
14+
}
15+
16+
export default Banner

‎docs/src/components/Code.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { PropsWithChildren } from 'react'
2+
3+
const Code = ({ children }: PropsWithChildren<InlineCodeProps>) => (
4+
<pre className="font-mono whitespace-nowrap bg-fuchsia-200/40 p-1 px-1 py-0.5 text-sm dark:bg-indigo-200/20 dark:text-zinc-200 inline-block">
5+
{children}
6+
</pre>
7+
)
8+
9+
export interface InlineCodeProps {
10+
children: PropsWithChildren
11+
}
12+
13+
export default Code

‎docs/src/components/CodeBlock.tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { LucideIcon } from 'lucide-react'
2+
import Prism from 'prismjs'
3+
import { PropsWithChildren, useEffect } from 'react'
4+
import Link from './Link'
5+
6+
const CodeBlock = ({
7+
children,
8+
Icon = undefined,
9+
language = 'javascript',
10+
linkHref = '',
11+
linkText = '',
12+
}: PropsWithChildren<CodeProps>) => {
13+
useEffect(() => {
14+
Prism.highlightAll()
15+
}, [])
16+
17+
return (
18+
<div
19+
className={
20+
'mb-4 rounded-lg border border-zinc-300 bg-zinc-100 dark:border-zinc-700 dark:bg-slate-800 dark:text-zinc-300'
21+
}
22+
>
23+
<code
24+
className={`language-${language} block overflow-y-auto whitespace-pre rounded-lg bg-transparent p-4 text-sm dark:text-zinc-300`}
25+
>
26+
{children}
27+
</code>
28+
{linkHref && (
29+
<div
30+
className={
31+
'flex items-center gap-1 border-t border-t-zinc-300 bg-zinc-200/10 px-4 py-2 text-xs dark:border-t-slate-700 dark:bg-zinc-800/10 '
32+
}
33+
>
34+
{Icon && <Icon size={14} strokeWidth={2} />}
35+
<Link href={linkHref} target={'_blank'} borderWidth={'narrow'}>
36+
{linkText ? linkText : linkHref}
37+
</Link>
38+
</div>
39+
)}
40+
</div>
41+
)
42+
}
43+
44+
export interface CodeProps {
45+
children: PropsWithChildren
46+
Icon?: LucideIcon | undefined
47+
language?: 'javascript' | 'css' | 'html' | 'tsx'
48+
linkHref?: string | undefined
49+
linkText?: string | undefined
50+
}
51+
52+
export default CodeBlock

‎docs/src/components/DemoAnimationExampleRow.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { addWithSpace } from '../utils/addWithSpace'
2+
import Code from './Code'
3+
4+
const DemoAnimationExampleRow = ({
5+
animations,
6+
bgColor,
7+
timeline,
8+
}: DemoAnimationExampleRowProps) => {
9+
const animationClasses = animations.split(' ')
10+
return (
11+
<div className="flex flex-col">
12+
<div className="flex flex-wrap gap-1 w-96 flex-shrink-0">
13+
{animationClasses.map((animation) => (
14+
<Code key={animation}>.{animation}</Code>
15+
))}
16+
</div>
17+
<div
18+
className={
19+
'animate-width w-0 h-4' +
20+
addWithSpace(animations) +
21+
addWithSpace(bgColor) +
22+
addWithSpace(timeline)
23+
}
24+
></div>
25+
</div>
26+
)
27+
}
28+
29+
export interface DemoAnimationExampleRowProps {
30+
animations: string
31+
bgColor: string
32+
timeline: string
33+
}
34+
35+
export default DemoAnimationExampleRow

0 commit comments

Comments
 (0)