Skip to content

Commit 9b6b6d2

Browse files
cbmongithubcbmongithub
committed
Metadata, color contrast, restructured toast components, colors and padding
1 parent 84bd5be commit 9b6b6d2

30 files changed

+288
-1166
lines changed

‎website/.gitignore

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,4 @@ yarn-error.log*
3838

3939
# typescript
4040
*.tsbuildinfo
41-
next-env.d.ts
42-
43-
experimental
44-
lib/helpers/loaders.ts
45-
lib/helpers/loaders.json
41+
next-env.d.ts

‎website/app/[slug]/page.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,25 +22,25 @@ export const generateStaticParams = async () =>
2222

2323
const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
2424
const { slug } = await params;
25-
const loader: LoaderProps = getLoaders[slug as keyof typeof getLoaders];
26-
const { category, keyframes, speed } = loader;
25+
const loader: LoaderProps = await getLoaders[slug as keyof typeof getLoaders];
26+
const { category, keyframes, speed } = loader as LoaderProps;
2727
const loaderKeys = Object.keys(getLoaders);
2828
const currentIndex = loaderKeys.indexOf(slug);
2929
const nextLoader = loaderKeys[(currentIndex + 1) % loaderKeys.length];
3030

3131
return (
3232
<>
3333
<section className='px-6 py-12'>
34-
<h1 className='relative text-center text-4xl font-semibold text-balance text-neutral-100 md:text-5xl'>
34+
<h1 className='relative text-center text-4xl font-semibold text-balance text-neutral-50 md:text-5xl'>
3535
{slug.replace(/_/g, ' ')}
3636
</h1>
3737
<p className='relative py-6 text-center text-neutral-50'>
3838
{category.toLocaleLowerCase()} collection
3939
</p>
4040
</section>
41-
<section className='w-full p-6 border border-x-0 border-b-0 border-t-neutral-800'>
42-
<div className='relative flex min-h-96 flex-col items-center justify-center overflow-hidden border border-neutral-800 bg-black p-6'>
43-
<div className='absolute top-4 px-4 z-40 w-full flex flex-row items-center justify-between'>
41+
<section className='w-full border border-x-0 border-b-0 border-t-neutral-800 p-6'>
42+
<div className='relative flex min-h-96 flex-col items-center justify-center overflow-hidden border border-neutral-800 p-6'>
43+
<div className='absolute top-4 z-40 flex w-full flex-row items-center justify-between px-4'>
4444
<BackButton />
4545
<Link href={`/${nextLoader}`}>
4646
<Button
@@ -55,13 +55,13 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
5555
<Renderer speed={speed} keyframes={keyframes} category={category} />
5656
</div>
5757
<div className='mt-6 space-y-6'>
58-
<h1 className='text-md font-light text-neutral-50'>Examples</h1>
58+
<h1 className='text-md text-neutral-50'>Examples</h1>
5959
<StandardExample name={slug} speed={speed} />
6060
<CustomExample keyframes={keyframes} />
6161
<ZeroDependencyExample speed={speed} keyframes={keyframes} />
62-
<p className='text-sm font-light text-neutral-50'>Usage in Oh My Zsh</p>
62+
<p className='text-sm text-neutral-50'>Usage in Oh My Zsh</p>
6363
<OhMyZshExample speed={speed} keyframes={keyframes} />
64-
<p className='text-sm font-light text-neutral-50'>Usage in Next.js</p>
64+
<p className='text-sm text-neutral-50'>Usage in Next.js</p>
6565
<NextJsExample />
6666
<NextJsComponentExample speed={speed} keyframes={keyframes} />
6767
</div>

‎website/app/changelog/page.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ const Page = () => {
1818
<>
1919
<section>
2020
<div className='px-6 py-12'>
21-
<div className='absolute min-h-48 w-full max-w-5xl bg-[notear-gradient(to_right,#1a1a1a_1px,transparent_1px),notear-gradient(to_bottom,#1a1a1a_1px,transparent_1px)] bg-[size:8px_10px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_10%,transparent_100%)]' />
22-
<h1 className='relative z-40 text-center text-4xl font-semibold text-balance text-neutral-100 md:text-5xl'>
21+
<div className='absolute min-h-48 w-full max-w-3xl bg-[notear-gradient(to_right,#1a1a1a_1px,transparent_1px),notear-gradient(to_bottom,#1a1a1a_1px,transparent_1px)] bg-[size:8px_10px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_10%,transparent_100%)]' />
22+
<h1 className='relative z-40 text-center text-4xl font-semibold text-balance text-neutral-100 md:text-3xl'>
2323
Changelog
2424
</h1>
2525
<p className='relative z-40 py-6 text-center text-neutral-200'>
@@ -34,13 +34,13 @@ const Page = () => {
3434
</div>
3535
</div>
3636
</section>
37-
<section className='border border-x-0 border-b-0 border-t-neutral-800 bg-black'>
37+
<section className='border border-x-0 border-b-0 border-t-neutral-800'>
3838
<div className='flex flex-col items-start justify-center gap-6 p-6'>
39-
<h1 className='text-md font-light text-neutral-400'>Latest Updates</h1>
39+
<h1 className='text-md text-neutral-400'>Latest Updates</h1>
4040
{changeLog.map((v, i) => (
4141
<div
4242
key={`${v}_${i}`}
43-
className='flex h-auto min-h-96 w-full flex-col items-center justify-start overflow-y-scroll border border-neutral-800 bg-black py-6'
43+
className='flex h-auto min-h-96 w-full flex-col items-center justify-start overflow-y-scroll border border-neutral-800 py-6'
4444
>
4545
<div className='relative flex flex-col items-center justify-center p-6 text-sm text-neutral-50'>
4646
<h2 className='text-sm text-white'>

‎website/app/globals.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
@import 'tailwindcss';
22

33
.overflow-x-invisible::-webkit-scrollbar {
4-
width: 0px;
5-
height: 0px;
4+
width: 0px;
5+
height: 0px;
66
}
77

88
.overflow-x-invisible::-webkit-scrollbar-thumb {
9-
background-color: transparent;
9+
background-color: transparent;
1010
}
1111

1212
.overflow-x-invisible::-webkit-scrollbar-track {
13-
background-color: transparent;
13+
background-color: transparent;
1414
}
1515

1616
.overflow-x-invisible::-webkit-scrollbar-corner {
17-
background-color: transparent;
17+
background-color: transparent;
1818
}
1919

2020
.overflow-x-invisible::-webkit-scrollbar-button {
21-
display: none;
21+
display: none;
2222
}

‎website/app/layout.tsx

Lines changed: 4 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,25 @@
11
import { Footer } from '@/components/Footer';
22
import { Header } from '@/components/Header';
33
import { TopBar } from '@/components/TopBar';
4+
import { METADATA } from '@/lib/config/metadata';
45
import { Analytics } from '@vercel/analytics/react';
56
import { SpeedInsights } from '@vercel/speed-insights/next';
6-
import type { Metadata } from 'next';
77
import dynamic from 'next/dynamic';
88
import './globals.css';
99

1010
const ToastProvider = dynamic(() =>
1111
import('@/components/ToastProvider').then((mod) => mod.ToastProvider),
1212
);
1313
const ToastWrapper = dynamic(() =>
14-
import('@/components/Toast').then((mod) => mod.ToastWrapper),
14+
import('@/components/ToastWrapper').then((mod) => mod.ToastWrapper),
1515
);
1616

17-
export const metadata: Metadata = {
18-
title: {
19-
default: 'cli-loaders',
20-
template: '%s - cli-loaders',
21-
},
22-
metadataBase: new URL('https://cliloaders.com/'),
23-
description: 'A collection of copy and paste CLI loaders',
24-
keywords: [
25-
'cli',
26-
'loaders',
27-
'cli-loaders',
28-
'cli-spinners',
29-
'cli-progress-bars',
30-
'cli-animations',
31-
'cli-loading-indicators',
32-
'cli-spinner',
33-
'cli-progress-bar',
34-
'cli-loading-indicator',
35-
'spinners',
36-
'progress-bars',
37-
'animations',
38-
'loading-indicators',
39-
'spinner',
40-
'progress-bar',
41-
'loading-indicator',
42-
'page-loaders',
43-
'nextjs loaders',
44-
],
45-
authors: [
46-
{
47-
name: 'Christian B. Martinez',
48-
url: 'https://christianbmartinez.com',
49-
},
50-
],
51-
creator: 'Christian B. Martinez',
52-
openGraph: {
53-
type: 'website',
54-
locale: 'en_US',
55-
url: 'https://cliloaders.com/',
56-
title: 'cli-loaders',
57-
description: 'A collection of copy and paste CLI loaders',
58-
siteName: 'cli-loaders',
59-
images: [
60-
{
61-
url: 'https://cliloaders.com/og.jpg',
62-
width: 1200,
63-
height: 630,
64-
alt: 'cli-loaders | A collection of copy and paste CLI loaders',
65-
},
66-
],
67-
},
68-
twitter: {
69-
card: 'summary_large_image',
70-
title: 'cli-loaders',
71-
description: 'A collection of copy and paste CLI loaders',
72-
images: ['https://cliloaders.com/og.jpg'],
73-
creator: 'https://x.com/cbmonx',
74-
},
75-
icons: {
76-
icon: '/favicon.ico',
77-
shortcut: '/icon.png',
78-
apple: '/apple-touch-icon.png',
79-
},
80-
};
17+
export const metadata = METADATA;
8118

8219
const RootLayout = ({ children }: { children: React.ReactNode }) => (
8320
<ToastProvider>
8421
<html lang='en' suppressHydrationWarning>
85-
<body className='mx-auto min-h-screen max-w-5xl overflow-x-hidden scroll-smooth border-0 bg-black font-sans text-sm text-neutral-50 antialiased lg:border lg:border-y-0 lg:border-x-neutral-800'>
22+
<body className='mx-auto min-h-screen max-w-3xl overflow-x-hidden scroll-smooth border-0 bg-black font-sans text-sm text-neutral-100 antialiased lg:border lg:border-y-0 lg:border-x-neutral-800'>
8623
<Header />
8724
<TopBar />
8825
<main>{children}</main>

‎website/app/loading.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
const loading = () => {
22
return (
3-
<div className='relative mx-auto flex h-screen w-screen animate-pulse flex-col px-6 blur-lg transition duration-300'>
4-
<div className='mx-auto flex h-full flex-col items-center justify-center'>👨‍💻</div>
3+
<div className='relative mx-auto flex h-screen w-screen animate-pulse flex-col px-6 blur-lg transition'>
4+
<div className='mx-auto flex h-full flex-col items-center justify-center'>
5+
Loading...
6+
</div>
57
</div>
68
);
79
};

‎website/app/page.tsx

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,29 @@
11
import { CopyButton } from '@/components/CopyButton';
2+
import { Hero } from '@/components/Hero';
23
import dynamic from 'next/dynamic';
34

45
const Filter = dynamic(() => import('@/components/Filter').then((mod) => mod.Filter));
56

67
const HomePage = () => {
78
return (
89
<>
9-
<section>
10-
<div className='px-6 py-12'>
11-
<div className='absolute h-48 w-full max-w-5xl bg-[linear-gradient(to_right,#1a1a1a_1px,transparent_1px),linear-gradient(to_bottom,#1a1a1a_1px,transparent_1px)] bg-[size:8px_10px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_10%,transparent_100%)]' />
12-
<h1 className='relative text-center text-4xl font-semibold text-balance text-neutral-100 md:text-5xl'>
13-
Cli Loaders
14-
</h1>
15-
<p className='relative pt-6 pb-12 text-center text-neutral-200'>
16-
A collection of animated CLI loaders for your projects.
17-
</p>
18-
<div className='relative text-center'>
19-
<pre>
20-
<code className='w-full border border-neutral-800 bg-black pt-[16px] pr-3.5 pb-[14px] pl-2.5'>
21-
npm install cli-loaders
22-
<CopyButton
23-
hasKeyframes={false}
24-
variant='tertiary'
25-
copyText='Command copied to clipboard!'
26-
code='npm install cli-loaders'
27-
/>
28-
</code>
29-
</pre>
10+
<Hero
11+
title='Cli Loaders'
12+
description='A collection of animated CLI loaders for your projects'
13+
>
14+
<div className='flex flex-col items-center justify-center'>
15+
<div className='flex items-center border border-neutral-800'>
16+
<code className='relative inline-flex h-6 px-2'>npm install cli-loaders</code>
17+
<CopyButton
18+
hasKeyframes={false}
19+
variant='tertiary'
20+
copyText='Command copied to clipboard!'
21+
code='npm install cli-loaders'
22+
/>
3023
</div>
3124
</div>
32-
</section>
33-
<section className='border border-x-0 border-b-0 border-t-neutral-800 bg-black'>
25+
</Hero>
26+
<section className='border border-x-0 border-b-0 border-t-neutral-800'>
3427
<Filter />
3528
</section>
3629
</>

‎website/components/CodeBlock.tsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,7 @@ import { CopyButton } from './CopyButton';
55

66
Code.theme = githubDark as unknown as Record<string, string>;
77

8-
export const CodeBlock = ({
9-
code,
10-
keyframes,
11-
lang,
12-
title,
13-
isV2,
14-
}: CodeBlockProps) => (
8+
export const CodeBlock = ({ code, keyframes, lang, title, isV2 }: CodeBlockProps) => (
159
<div className='relative border border-neutral-800'>
1610
<div className='absolute top-4 left-4'>
1711
<p className='text-sm text-neutral-400'>

‎website/components/Footer.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import Link from 'next/link';
22

33
export const Footer = () => (
4-
<footer className='flex h-20 items-center justify-between border border-x-0 border-b-0 border-t-neutral-800 p-6 text-center'>
4+
<footer className='flex h-15 items-center justify-between border border-x-0 border-b-0 border-t-neutral-800 p-6 text-center'>
55
<Link
66
href='/changelog'
7-
className='text-neutral-400 transition-colors duration-300 hover:text-neutral-500'
7+
className='text-neutral-400 transition-colors hover:text-neutral-500'
88
aria-label='Cli Loaders Changelog'
99
aria-hidden='false'
1010
role='link'
@@ -13,7 +13,7 @@ export const Footer = () => (
1313
</Link>
1414
<Link
1515
href='https://github.com/cbmongithub/cli-loaders/labels/bug'
16-
className='text-neutral-400 transition-colors duration-300 hover:text-neutral-500'
16+
className='text-neutral-400 transition-colors hover:text-neutral-500'
1717
aria-label='Cli Loaders Bug Reports'
1818
aria-hidden='false'
1919
role='link'

0 commit comments

Comments
 (0)