Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: performance & accessibility #87

Merged
merged 1 commit into from
Feb 20, 2024
Merged

fix: performance & accessibility #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/(landing)/page.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
Binary file not shown.
560 changes: 440 additions & 120 deletions components/landing-svg/index.tsx
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion components/navbar/breadcrumbs.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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