Skip to content

Commit e272af6

Browse files
author
Adam Plesnik
committed
Add code block, prismjs, home anim WIP
1 parent 855bc54 commit e272af6

File tree

6 files changed

+137
-13
lines changed

6 files changed

+137
-13
lines changed

‎docs/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"localforage": "^1.10.0",
1414
"lucide-react": "^0.367.0",
1515
"match-sorter": "^6.3.4",
16+
"prismjs": "^1.29.0",
1617
"react": "^18.2.0",
1718
"react-dom": "^18.2.0",
1819
"react-router-dom": "^6.22.3",
@@ -21,12 +22,14 @@
2122
},
2223
"devDependencies": {
2324
"@adam.plesnik/tailwindcss-scroll-driven-animations": "^0.1.1",
25+
"@types/prismjs": "^1.26.3",
2426
"@types/react": "^18.2.66",
2527
"@types/react-dom": "^18.2.22",
2628
"@typescript-eslint/eslint-plugin": "^7.2.0",
2729
"@typescript-eslint/parser": "^7.2.0",
2830
"@vitejs/plugin-react": "^4.2.1",
2931
"autoprefixer": "^10.4.19",
32+
"babel-plugin-prismjs": "^2.1.0",
3033
"eslint": "^8.57.0",
3134
"eslint-plugin-react-hooks": "^4.6.0",
3235
"eslint-plugin-react-refresh": "^0.4.6",

‎docs/src/components/CodeBlock.tsx‎

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

‎docs/src/css/prism.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.token .language-javascript {
2+
@apply text-gray-950 dark:text-zinc-300;
3+
}
4+
5+
.function,
6+
.tag,
7+
.atrule {
8+
@apply text-fuchsia-700 dark:text-fuchsia-300;
9+
}
10+
11+
.literal-property,
12+
.constant,
13+
.string-property,
14+
.attr-value,
15+
.property {
16+
@apply text-sky-700 dark:text-sky-300;
17+
}
18+
19+
.operator,
20+
.comment,
21+
.attr-name {
22+
@apply opacity-60;
23+
}
24+
25+
.punctuation {
26+
@apply opacity-40;
27+
}

‎docs/src/index.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import 'css/prism.css';
2+
13
@tailwind base;
24
@tailwind components;
35
@tailwind utilities;

‎docs/src/partials/HomeIntroAnimation.tsx‎

Lines changed: 40 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,47 @@
1+
import CodeBlock from '../components/CodeBlock'
2+
3+
const introAnimCSS = `@keyframes appear {
4+
to {
5+
width: auto;
6+
}
7+
}
8+
9+
.animate-appear {
10+
animation: appear 0s linear forwards;
11+
}`
12+
13+
const introAnimTSX = `{text.map((letter, index) => (
14+
<span
15+
className="inline-block w-0 animate-appear overflow-hidden timeline"
16+
style={{
17+
animationRangeEnd: (index * 64 + 128).toString() + 'px',
18+
}}
19+
key={index}
20+
>
21+
{letter === ' ' ? '\\u00A0' : letter}
22+
</span>
23+
))}`
24+
125
const HomeIntroAnimation = () => {
226
const text = Array.from('Scroll. Your next superpower.')
327
return (
428
<div className="h-[1920px] w-full">
5-
<div className="flex w-full font-bold text-3xl sm:text-7xl sticky top-32">
6-
{text.map((letter, index) => (
7-
<span
8-
className="inline-block w-0 animate-appear overflow-hidden timeline"
9-
style={{
10-
animationRangeEnd: (index * 64 + 128).toString() + 'px',
11-
}}
12-
key={index}
13-
>
14-
{letter === ' ' ? '\u00A0' : letter}
15-
</span>
16-
))}
29+
<div className="sticky top-32">
30+
<div className="flex w-full font-bold text-3xl sm:text-7xl">
31+
{text.map((letter, index) => (
32+
<span
33+
className="inline-block w-0 animate-appear overflow-hidden timeline"
34+
style={{
35+
animationRangeEnd: (index * 64 + 128).toString() + 'px',
36+
}}
37+
key={index}
38+
>
39+
{letter === ' ' ? '\u00A0' : letter}
40+
</span>
41+
))}
42+
</div>
43+
<CodeBlock language="css">{introAnimCSS}</CodeBlock>
44+
<CodeBlock language="tsx">{introAnimTSX}</CodeBlock>
1745
</div>
1846
</div>
1947
)

‎docs/vite.config.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,18 @@ import react from '@vitejs/plugin-react'
33

44
// https://vitejs.dev/config/
55
export default defineConfig({
6-
plugins: [react()],
6+
plugins: [
7+
react({
8+
babel: {
9+
plugins: [
10+
[
11+
'prismjs',
12+
{
13+
languages: ['js', 'css', 'html', 'tsx'],
14+
},
15+
],
16+
],
17+
},
18+
}),
19+
],
720
})

0 commit comments

Comments
 (0)