Skip to content

Commit c1fa94c

Browse files
adamplesnikadamplesnik
authored
Merge pull request #3 from adamplesnik/feature/docs-v-0.2.x
Feature/docs v 0.2.x
2 parents 719536c + 33428d8 commit c1fa94c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+1852
-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: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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?
25+
26+
package-lock.json

‎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-700 dark:bg-zinc-900 dark:text-zinc-400">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Tailwind Labs Job Application, Adam Plesník</title>
7+
</head>
8+
<body>
9+
<div id="root" class=""></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

‎docs/package.json‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{
2+
"name": "tailwindcss-scroll-driven-animations-docu",
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+
"prettier": {
13+
"printWidth": 100,
14+
"semi": false,
15+
"singleQuote": true,
16+
"trailingComma": "es5",
17+
"plugins": [
18+
"prettier-plugin-tailwindcss"
19+
]
20+
},
21+
"dependencies": {
22+
"@vercel/analytics": "^1.2.2",
23+
"framer-motion": "^11.0.24",
24+
"lucide-react": "^0.363.0",
25+
"prismjs": "^1.29.0",
26+
"react": "^18.2.0",
27+
"react-dom": "^18.2.0",
28+
"react-router-dom": "^6.22.3"
29+
},
30+
"devDependencies": {
31+
"@adam.plesnik/tailwindcss-scroll-driven-animations": "^0.2.5",
32+
"@types/node": "^20.11.30",
33+
"@types/prismjs": "^1.26.3",
34+
"@types/react": "^18.2.66",
35+
"@types/react-dom": "^18.2.22",
36+
"@typescript-eslint/eslint-plugin": "^7.2.0",
37+
"@typescript-eslint/parser": "^7.2.0",
38+
"@vitejs/plugin-react": "^4.2.1",
39+
"autoprefixer": "^10.4.19",
40+
"eslint": "^8.57.0",
41+
"eslint-plugin-react-hooks": "^4.6.0",
42+
"eslint-plugin-react-refresh": "^0.4.6",
43+
"postcss": "^8.4.38",
44+
"postcss-import": "^16.1.0",
45+
"prettier": "^3.2.5",
46+
"prettier-plugin-tailwindcss": "^0.5.12",
47+
"tailwindcss": "^3.4.1",
48+
"typescript": "^5.2.2",
49+
"vite": "^5.2.0"
50+
}
51+
}

‎docs/postcss.config.js‎

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

‎docs/src/components/ActionButton.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { LucideIcon } from 'lucide-react'
2+
import { MouseEvent, MouseEventHandler, useState } from 'react'
3+
4+
const ActionButton = ({
5+
clickAction,
6+
Icon,
7+
IconOnClick = undefined,
8+
tooltip = '',
9+
}: ReplayButtonProps) => {
10+
const [clicked, setClicked] = useState(false)
11+
function handleClick(e: MouseEvent) {
12+
clickAction(e)
13+
setClicked(true)
14+
setTimeout(() => setClicked(false), 2000)
15+
}
16+
return (
17+
<div
18+
onClick={(e) => {
19+
handleClick(e)
20+
}}
21+
title={tooltip}
22+
className="group cursor-pointer p-1"
23+
>
24+
<div
25+
className={
26+
'ease-custom relative flex size-6 items-center justify-center rounded-full bg-gradient-to-tr from-slate-400 to-indigo-500 text-zinc-100 opacity-80 ' +
27+
'overflow-hidden transition-[transform,opacity] duration-300 group-hover:scale-125 group-hover:opacity-100 ' +
28+
(clicked ? 'scale-125' : 'group-hover:scale-125')
29+
}
30+
>
31+
<Icon
32+
className={
33+
'ease-custom absolute size-3 transition-[opacity,transform] duration-500 group-hover:rotate-180 ' +
34+
(clicked ? 'translate-y-24 rotate-180 delay-300' : 'translate-y-0 delay-75')
35+
}
36+
/>
37+
{IconOnClick && (
38+
<IconOnClick
39+
className={
40+
'ease-custom size-3 transition-[opacity,transform] duration-[1s] ' +
41+
(clicked ? 'translate-y-0' : '-translate-y-24')
42+
}
43+
/>
44+
)}
45+
</div>
46+
</div>
47+
)
48+
}
49+
50+
export interface ReplayButtonProps {
51+
clickAction: MouseEventHandler
52+
Icon: LucideIcon
53+
IconOnClick?: LucideIcon | undefined
54+
tooltip: string
55+
}
56+
57+
export default ActionButton

‎docs/src/components/Code.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { PropsWithChildren } from 'react'
2+
3+
const Code = ({ children }: PropsWithChildren<InlineCodeProps>) => (
4+
<code
5+
className={
6+
'whitespace-nowrap bg-fuchsia-200/40 p-1 px-1 py-0.5 font-mono text-sm text-zinc-900 dark:bg-indigo-200/20 dark:text-zinc-300'
7+
}
8+
>
9+
{children}
10+
</code>
11+
)
12+
13+
export interface InlineCodeProps {
14+
children: PropsWithChildren
15+
}
16+
17+
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.tsx'
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 text-zinc-900 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'
48+
linkHref?: string | undefined
49+
linkText?: string | undefined
50+
}
51+
52+
export default CodeBlock

‎docs/src/components/DarkModeSwitch.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { motion } from 'framer-motion'
2+
import { Moon, Sun } from 'lucide-react'
3+
import { MouseEventHandler, useState } from 'react'
4+
5+
const DarkModeSwitch = () => {
6+
const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
7+
const storageModeDark = localStorage.getItem('mode') === 'dark'
8+
const [darkMode, setDarkMode] = useState(storageModeDark || systemDarkMode ? true : false)
9+
const classList = document.documentElement.classList
10+
darkMode ? classList.add('dark') : classList.remove('dark')
11+
12+
const switchMode = () => {
13+
localStorage.setItem('mode', darkMode ? 'light' : 'dark')
14+
setDarkMode(!darkMode)
15+
}
16+
17+
return (
18+
<div
19+
className="flex size-8 cursor-pointer flex-col overflow-hidden rounded-full transition-colors hover:bg-white/40 dark:hover:bg-slate-500/60"
20+
onClick={switchMode}
21+
>
22+
<motion.div
23+
initial={{ y: !darkMode ? 0 : '-2rem' }}
24+
animate={{ y: !darkMode ? 0 : '-2rem' }}
25+
transition={{ ease: [0.65, 0.05, 0.17, 0.99], duration: 0.5, delay: 0.2 }}
26+
className="group flex flex-col"
27+
>
28+
<Sun className="size-8 p-1 transition-transform duration-700 ease-line group-hover:rotate-[22deg]" />
29+
<Moon className="size-8 p-1 transition-transform duration-700 ease-line group-hover:-rotate-[22deg]" />
30+
</motion.div>
31+
</div>
32+
)
33+
}
34+
35+
export interface ModeSwitchProps {
36+
mode: string
37+
onClick: MouseEventHandler
38+
}
39+
40+
export default DarkModeSwitch

‎docs/src/components/DemoAnimationExampleRow.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { addWithSpace } from '../utils/addWithSpace'
2+
import Code from './Code'
3+
4+
const DemoAnimationExampleRow = ({ animations, timeline }: DemoAnimationExampleRowProps) => {
5+
const animationClasses = animations.split(' ')
6+
return (
7+
<div className="flex items-center gap-2 sm:flex-col sm:items-start">
8+
<div className="w-36 flex-shrink-0">
9+
{animationClasses.map((animation) => (
10+
<Code key={animation}>{animation}</Code>
11+
))}
12+
</div>
13+
<div className="relative w-full flex-1 rounded-full bg-slate-300/40 text-sm sm:flex-none dark:bg-slate-300/20">
14+
<span className="absolute left-1 font-mono text-xs opacity-50">0%</span>
15+
<span className="absolute left-1/2 top-1.5 size-1 -translate-x-1/2 rotate-90 rounded-full bg-current font-mono text-xs opacity-30 sm:opacity-50"></span>
16+
<span className="absolute right-1 font-mono text-xs opacity-50">100%</span>
17+
<div
18+
className={
19+
'h-4 w-0 animate-scale-to-right rounded-full bg-sky-500/70 dark:bg-fuchsia-500/60' +
20+
addWithSpace(animations) +
21+
addWithSpace(timeline)
22+
}
23+
></div>
24+
</div>
25+
</div>
26+
)
27+
}
28+
29+
export interface DemoAnimationExampleRowProps {
30+
animations: string
31+
timeline: string
32+
}
33+
34+
export default DemoAnimationExampleRow

0 commit comments

Comments
 (0)