Skip to content

Commit

Permalink
fix: performance & accessibility
Browse files Browse the repository at this point in the history
  • Loading branch information
envil a.k.a pow committed Feb 20, 2024
1 parent 86c033d commit 5372ebe
Show file tree
Hide file tree
Showing 10 changed files with 460 additions and 129 deletions.
4 changes: 2 additions & 2 deletions app/(landing)/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function Home() {
<main className="flex min-h-dvh items-center justify-center py-20">
<div className="container grid items-center gap-10 text-center lg:grid-cols-2 lg:text-left">
<div className="order-2 space-y-8 lg:order-1">
<h1 className="text-5xl font-black sm:text-8xl lg:text-6xl xl:text-7xl 2xl:text-8xl">
<h1 className="text-5xl font-black sm:text-7xl md:text-8xl lg:text-6xl xl:text-7xl 2xl:text-8xl">
<span className="bg-gradient-to-br from-indigo-600 to-rose-400 bg-clip-text text-transparent">
OpenSeries:{" "}
</span>
Expand All @@ -34,7 +34,7 @@ export default function Home() {
<Link
key={link.name}
target="_blank"
className="whitespace-nowrap rounded-full border-2 border-rose-400 px-4 py-1 text-xs font-medium text-rose-400 hover:bg-rose-400/20"
className="whitespace-nowrap rounded-full border-2 border-rose-600 px-4 py-1 text-xs font-semibold text-rose-600 hover:bg-rose-600/10 dark:border-rose-400 dark:text-rose-400"
href={link.href}
>
{link.name}
Expand Down
2 changes: 1 addition & 1 deletion app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<body className={`${montserrat.className} bg-white dark:bg-zinc-800`}>
<body className={`${montserrat.className} bg-white antialiased dark:bg-zinc-800`}>
<ThemeProvider>
<Navbar />
<NextTopLoader color="#4f46e5" />
Expand Down
Binary file modified bun.lockb
View file
Binary file not shown.
560 changes: 440 additions & 120 deletions components/landing-svg/index.tsx
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion components/navbar/breadcrumbs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const Breadcrumbs = () => {
{label}
</li>
{pathNames.length !== index + 1 && (
<span className="icon-[tabler--chevron-right] h-5 w-4 text-zinc-500 dark:text-zinc-400"></span>
<li className="icon-[tabler--chevron-right] h-5 w-4 text-zinc-500 dark:text-zinc-400"></li>
)}
</Fragment>
);
Expand Down
9 changes: 6 additions & 3 deletions components/navbar/navbar-content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,12 @@ const NavbarContent = ({ version }: Props) => {
>
OpenSeries
</Link>
<span className="rounded-full bg-indigo-600/20 px-4 py-1.5 text-sm font-semibold text-indigo-500">
<span className="rounded-full bg-indigo-600/20 px-4 py-1.5 text-sm font-semibold text-indigo-600 dark:text-indigo-300">
{version}
</span>
<Link
href="/docs/changelog"
className="hidden items-center gap-1 rounded-full bg-rose-600/20 px-4 py-1.5 text-sm font-medium text-rose-600 hover:bg-rose-600 hover:text-white dark:text-rose-400 sm:flex"
className="hidden items-center gap-1 rounded-full bg-rose-600/20 px-4 py-1.5 text-sm font-semibold text-rose-800 hover:bg-rose-600 hover:text-white dark:text-rose-400 sm:flex"
>
Changelog OpenSeries {version}
<span className="icon-[tabler--chevron-right]"></span>
Expand All @@ -57,7 +57,7 @@ const NavbarContent = ({ version }: Props) => {
{navLinks.map((link) => (
<Link
key={link.name}
className="text-lg text-zinc-500 hover:text-indigo-600 dark:text-zinc-400 dark:hover:text-indigo-500 lg:text-sm"
className="text-lg font-semibold text-zinc-500 hover:text-indigo-600 dark:text-zinc-400 dark:hover:text-indigo-500 lg:text-sm"
href={link.href}
target={link.target}
onClick={() => setIsOpen(false)}
Expand All @@ -75,6 +75,7 @@ const NavbarContent = ({ version }: Props) => {
className={`grid h-10 w-10 place-items-center rounded-lg text-xl text-zinc-500 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-700`}
>
<span className={link.icon}></span>
<span className="sr-only">{link.name}</span>
</Link>
))}
<ThemeSwitcher />
Expand All @@ -85,6 +86,7 @@ const NavbarContent = ({ version }: Props) => {
<span
className={`${isOpen ? "icon-[tabler--x]" : "icon-[tabler--dots-vertical]"}`}
></span>
<span className="sr-only">Toggle Navbar</span>
</button>
</div>
</div>
Expand All @@ -96,6 +98,7 @@ const NavbarContent = ({ version }: Props) => {
className="grid h-10 w-10 place-items-center rounded-lg text-xl text-zinc-500 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-700 lg:hidden"
>
<span className="icon-[tabler--menu-2]"></span>
<span className="sr-only">Buka Navbar</span>
</button>

<Breadcrumbs />
Expand Down
5 changes: 3 additions & 2 deletions components/sidebar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ const Sidebar = ({ sidebarLinks }: Props) => {
className="absolute right-5 top-10 block text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-300 lg:hidden"
>
<span className="icon-[tabler--x] size-6"></span>
<span className="sr-only">Tutup Sidebar</span>
</button>
<div className="grid gap-2">
{featuredLinks.map((link) => (
Expand All @@ -35,7 +36,7 @@ const Sidebar = ({ sidebarLinks }: Props) => {
key={link.name}
target={link.target}
onClick={() => toggleSidebar()}
className="group flex items-center gap-2 font-medium text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-300"
className="group flex items-center gap-2 font-medium text-zinc-600 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-300"
>
<div
className={`grid h-10 w-10 place-items-center rounded-lg ${link.href === pathname ? "bg-indigo-600 text-white" : "bg-indigo-600/10 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white dark:text-indigo-500"}`}
Expand All @@ -56,7 +57,7 @@ const Sidebar = ({ sidebarLinks }: Props) => {
{sidebarLinks[category].map((item) => (
<Link
key={item.link}
className={`border-l-2 py-2 pl-6 text-sm font-medium capitalize hover:border-l-indigo-600 hover:text-indigo-600 dark:hover:border-l-indigo-500 dark:hover:text-indigo-500 ${item.link === pathname ? "border-l-indigo-600 text-indigo-600 dark:border-l-indigo-500 dark:text-indigo-500" : "text-zinc-400 dark:border-l-zinc-700"}`}
className={`border-l-2 py-2 pl-6 text-sm font-medium capitalize hover:border-l-indigo-600 hover:text-indigo-600 dark:hover:border-l-indigo-500 dark:hover:text-indigo-500 ${item.link === pathname ? "border-l-indigo-600 text-indigo-600 dark:border-l-indigo-500 dark:text-indigo-500" : "text-zinc-500 dark:border-l-zinc-700 dark:text-zinc-400"}`}
href={item.link}
onClick={() => toggleSidebar()}
>
Expand Down
2 changes: 2 additions & 0 deletions components/theme-switcher/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const ThemeSwitcher = () => {
onClick={() => setTheme("light")}
>
<span className="icon-[line-md--sun-rising-loop]"></span>
<span className="sr-only">Light Mode</span>
</button>
);
} else {
Expand All @@ -34,6 +35,7 @@ const ThemeSwitcher = () => {
onClick={() => setTheme("dark")}
>
<span className="icon-[line-md--moon-loop]"></span>
<span className="sr-only">Dark Mode</span>
</button>
);
}
Expand Down
3 changes: 3 additions & 0 deletions mdx-components.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import type { MDXComponents } from "mdx/types";
import Image, { ImageProps } from "next/image";

export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
// eslint-disable-next-line jsx-a11y/alt-text
img: (props) => <Image width="1000" height="1000" className="w-full" {...(props as ImageProps)} />,
...components
};
}
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,9 @@
"react-py": "^1.10.6",
"rehype-pretty-code": "^0.12.6",
"remark-gfm": "^4.0.0",
"sharp": "^0.33.2",
"shikiji": "^0.9.0",
"tailwind-merge": "^2.2.1",
"thememirror": "^2.0.1",
"zustand": "^4.5.0"
},
Expand Down

0 comments on commit 5372ebe

Please sign in to comment.