& {
11 | compact?: boolean
12 | icon?: React.ComponentType<{ className?: string }>
13 | }) {
14 | return (
15 |
23 |
24 | {Icon && }
25 | {children}
26 |
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/home/src/components/Intro.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 | import Image from 'next/image'
3 |
4 | import { IconLink } from '@/components/IconLink'
5 |
6 | function BookIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
7 | return (
8 |
11 | )
12 | }
13 |
14 | function GitHubIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
15 | return (
16 |
19 | )
20 | }
21 |
22 | function XIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
23 | return (
24 |
27 | )
28 | }
29 |
30 | export function Intro() {
31 | return (
32 | <>
33 |
34 |
35 |
42 |
43 | Square UI
44 |
45 |
46 |
47 |
48 | Open-source layouts
49 | by{' '}
50 |
55 | lndev-ui
56 |
57 |
58 |
59 | Collection of beautifully crafted open-source layouts UI built with
60 | shadcn/ui.
61 |
62 |
63 |
69 | Sponsor
70 |
71 |
77 | GitHub
78 |
79 |
80 |
81 | )
82 | }
83 |
84 | export function IntroFooter() {
85 | return (
86 |
87 | Built by{' '}
88 |
94 | Leonel Ngoya
95 |
96 |
97 | )
98 | }
99 |
--------------------------------------------------------------------------------
/home/src/components/Layout.tsx:
--------------------------------------------------------------------------------
1 | import { useId } from 'react'
2 |
3 | import { Intro, IntroFooter } from '@/components/Intro'
4 | import { StarField } from '@/components/StarField'
5 | import { ThemeToggle } from '@/components/ThemeToggle'
6 |
7 | function Timeline() {
8 | let id = useId()
9 |
10 | return (
11 |
12 |
27 |
36 |
65 |
66 |
79 |
80 |
81 |
82 |
83 |
84 |
85 | {main}
86 |
87 |
88 |
89 | {footer}
90 |
91 |
92 |
93 |
103 |
104 |
105 | {children}
106 |
107 |
108 |
109 | )
110 | }
111 |
--------------------------------------------------------------------------------
/home/src/components/SparkleIcon.tsx:
--------------------------------------------------------------------------------
1 | export function SparkleIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
2 | return (
3 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/home/src/components/StarField.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useEffect, useId, useRef } from 'react'
4 | import clsx from 'clsx'
5 | import { type TimelineSegment, animate, timeline } from 'motion'
6 |
7 | type Star = [x: number, y: number, dim?: boolean, blur?: boolean]
8 |
9 | const stars: Array = [
10 | [4, 4, true, true],
11 | [4, 44, true],
12 | [36, 22],
13 | [50, 146, true, true],
14 | [64, 43, true, true],
15 | [76, 30, true],
16 | [101, 116],
17 | [140, 36, true],
18 | [149, 134],
19 | [162, 74, true],
20 | [171, 96, true, true],
21 | [210, 56, true, true],
22 | [235, 90],
23 | [275, 82, true, true],
24 | [306, 6],
25 | [307, 64, true, true],
26 | [380, 68, true],
27 | [380, 108, true, true],
28 | [391, 148, true, true],
29 | [405, 18, true],
30 | [412, 86, true, true],
31 | [426, 210, true, true],
32 | [427, 56, true, true],
33 | [538, 138],
34 | [563, 88, true, true],
35 | [611, 154, true, true],
36 | [637, 150],
37 | [651, 146, true],
38 | [682, 70, true, true],
39 | [683, 128],
40 | [781, 82, true, true],
41 | [785, 158, true],
42 | [832, 146, true, true],
43 | [852, 89],
44 | ]
45 |
46 | const constellations: Array> = [
47 | [
48 | [247, 103],
49 | [261, 86],
50 | [307, 104],
51 | [357, 36],
52 | ],
53 | [
54 | [586, 120],
55 | [516, 100],
56 | [491, 62],
57 | [440, 107],
58 | [477, 180],
59 | [516, 100],
60 | ],
61 | [
62 | [733, 100],
63 | [803, 120],
64 | [879, 113],
65 | [823, 164],
66 | [803, 120],
67 | ],
68 | ]
69 |
70 | function Star({
71 | blurId,
72 | point: [cx, cy, dim, blur],
73 | }: {
74 | blurId: string
75 | point: Star
76 | }) {
77 | let groupRef = useRef>(null)
78 | let ref = useRef>(null)
79 |
80 | useEffect(() => {
81 | if (!groupRef.current || !ref.current) {
82 | return
83 | }
84 |
85 | let delay = Math.random() * 2
86 |
87 | let animations = [
88 | animate(groupRef.current, { opacity: 1 }, { duration: 4, delay }),
89 | animate(
90 | ref.current,
91 | {
92 | opacity: dim ? [0.2, 0.5] : [1, 0.6],
93 | scale: dim ? [1, 1.2] : [1.2, 1],
94 | },
95 | {
96 | delay,
97 | duration: Math.random() * 2 + 2,
98 | direction: 'alternate',
99 | repeat: Infinity,
100 | },
101 | ),
102 | ]
103 |
104 | return () => {
105 | for (let animation of animations) {
106 | animation.cancel()
107 | }
108 | }
109 | }, [dim])
110 |
111 | return (
112 |
113 |
125 |
126 | )
127 | }
128 |
129 | function Constellation({
130 | points,
131 | blurId,
132 | }: {
133 | points: Array
134 | blurId: string
135 | }) {
136 | let ref = useRef>(null)
137 | let uniquePoints = points.filter(
138 | (point, pointIndex) =>
139 | points.findIndex((p) => String(p) === String(point)) === pointIndex,
140 | )
141 | let isFilled = uniquePoints.length !== points.length
142 |
143 | useEffect(() => {
144 | if (!ref.current) {
145 | return
146 | }
147 |
148 | let sequence: Array = [
149 | [
150 | ref.current,
151 | { strokeDashoffset: 0, visibility: 'visible' },
152 | { duration: 5, delay: Math.random() * 3 + 2 },
153 | ],
154 | ]
155 |
156 | if (isFilled) {
157 | sequence.push([
158 | ref.current,
159 | { fill: 'rgb(255 255 255 / 0.02)' },
160 | { duration: 1 },
161 | ])
162 | }
163 |
164 | let animation = timeline(sequence)
165 |
166 | return () => {
167 | animation.cancel()
168 | }
169 | }, [isFilled])
170 |
171 | return (
172 | <>
173 |
184 | {uniquePoints.map((point, pointIndex) => (
185 |
186 | ))}
187 |
188 | )
189 | }
190 |
191 | export function StarField({ className }: { className?: string }) {
192 | let blurId = useId()
193 |
194 | return (
195 |
220 | )
221 | }
222 |
--------------------------------------------------------------------------------
/home/src/components/ThemeToggle.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useEffect, useState } from 'react'
4 | import { useTheme } from 'next-themes'
5 |
6 | function ThemeIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
7 | return (
8 |
15 | )
16 | }
17 |
18 | export function ThemeToggle() {
19 | let [mounted, setMounted] = useState(false)
20 | let { resolvedTheme, setTheme } = useTheme()
21 | let otherTheme = resolvedTheme === 'dark' ? 'light' : 'dark'
22 |
23 | useEffect(() => {
24 | setMounted(true)
25 | }, [])
26 |
27 | if (!mounted) {
28 | return null
29 | }
30 |
31 | return (
32 |
40 | )
41 | }
42 |
--------------------------------------------------------------------------------
/home/src/components/mdx.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useEffect, useRef, useState } from 'react'
4 | import Image, { type ImageProps } from 'next/image'
5 | import Link from 'next/link'
6 | import clsx from 'clsx'
7 |
8 | import { FormattedDate } from '@/components/FormattedDate'
9 |
10 | export const a = Link
11 |
12 | type ImagePropsWithOptionalAlt = Omit & { alt?: string }
13 |
14 | export const img = function Img(props: ImagePropsWithOptionalAlt) {
15 | return (
16 |
24 | )
25 | }
26 |
27 | function ContentWrapper({
28 | className,
29 | ...props
30 | }: React.ComponentPropsWithoutRef<'div'>) {
31 | return (
32 |
43 | )
44 | }
45 |
46 | function ArticleHeader({ id, date }: { id: string; date: string | Date }) {
47 | return (
48 |
49 |
58 |
59 |
60 |
61 |
65 |
66 |
67 |
68 |
69 | )
70 | }
71 |
72 | export const article = function Article({
73 | id,
74 | date,
75 | children,
76 | }: {
77 | id: string
78 | date: string | Date
79 | children: React.ReactNode
80 | }) {
81 | let heightRef = useRef>(null)
82 | let [heightAdjustment, setHeightAdjustment] = useState(0)
83 |
84 | useEffect(() => {
85 | if (!heightRef.current) {
86 | return
87 | }
88 |
89 | let observer = new window.ResizeObserver(() => {
90 | if (!heightRef.current) {
91 | return
92 | }
93 | let { height } = heightRef.current.getBoundingClientRect()
94 | let nextMultipleOf8 = 8 * Math.ceil(height / 8)
95 | setHeightAdjustment(nextMultipleOf8 - height)
96 | })
97 |
98 | observer.observe(heightRef.current)
99 |
100 | return () => {
101 | observer.disconnect()
102 | }
103 | }, [])
104 |
105 | return (
106 |
111 |
112 |
113 |
114 | {children}
115 |
116 |
*/
188 | hr {
189 | border-color: var(--typography-hr);
190 | }
191 |
192 | /* Lists */
193 | ul,
194 | ol {
195 | padding-left: 1.375rem;
196 | }
197 |
198 | ul {
199 | list-style-type: disc;
200 | }
201 |
202 | ol {
203 | list-style-type: decimal;
204 | }
205 |
206 | li {
207 | padding-left: 0.625rem;
208 | }
209 |
210 | li::marker {
211 | color: var(--color-gray-400);
212 | }
213 |
214 | ol>li::marker {
215 | font-size: var(--text-xs);
216 | font-weight: var(--font-weight-semibold);
217 | }
218 |
219 | /* Tables */
220 | table {
221 | width: theme(width.full);
222 | text-align: left;
223 | }
224 |
225 | thead {
226 | border-bottom: 1px solid var(--typography-th-borders);
227 | }
228 |
229 | thead th {
230 | font-weight: var(--font-weight-semibold);
231 | padding-top: 0;
232 | padding-bottom: calc(theme(padding.2) - 1px);
233 | color: var(--typography-headings);
234 | }
235 |
236 | tbody tr {
237 | border-bottom: 1px solid var(--typography-td-borders);
238 | }
239 |
240 | tbody td {
241 | padding-top: calc(theme(padding.2) - 1px);
242 | padding-bottom: theme(padding.2);
243 | }
244 |
245 | :is(th, td):first-child {
246 | padding-left: 0;
247 | padding-right: theme(padding.2);
248 | }
249 |
250 | :is(th, td):last-child {
251 | padding-left: theme(padding.2);
252 | padding-right: 0;
253 | }
254 |
255 | :is(th, td):not(:first-child, :last-child) {
256 | padding-left: theme(padding.2);
257 | padding-right: theme(padding.2);
258 | }
259 |
260 | /* Spacing */
261 | >* {
262 | margin-top: theme(margin.6);
263 | }
264 |
265 | :is(h2, h3, h4, blockquote, pre, table) {
266 | margin-top: theme(margin.8);
267 | }
268 |
269 | hr {
270 | margin-top: calc(theme(margin.16) - 1px);
271 | }
272 |
273 | li {
274 | margin-top: theme(margin.4);
275 | }
276 |
277 | li> :is(p, ol, ul) {
278 | margin-top: theme(margin.4);
279 | }
280 |
281 | :is(h2, h3, h4)+* {
282 | margin-top: theme(margin.4);
283 | }
284 |
285 | :is(blockquote, pre, table)+* {
286 | margin-top: theme(margin.8);
287 | }
288 |
289 | hr+* {
290 | margin-top: theme(margin.16);
291 | }
292 |
293 | > :first-child,
294 | li> :first-child {
295 | margin-top: 0;
296 | }
297 | }
--------------------------------------------------------------------------------
/home/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es6",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "bundler",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "plugins": [
18 | {
19 | "name": "next"
20 | }
21 | ],
22 | "paths": {
23 | "@/*": ["./src/*"]
24 | }
25 | },
26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 | "exclude": ["node_modules"]
28 | }
29 |
--------------------------------------------------------------------------------