Skip to content

Commit adee43a

Browse files
dkrabdevdkrabdev
committed
feat: made docs more aligned with kraken ink brand
1 parent f17861b commit adee43a

20 files changed

+377
-77
lines changed

‎.github/workflows/pull_request.yaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ jobs:
4646
- uses: ./.github/actions/base-setup
4747
name: Base Setup
4848
- name: MDX linting
49-
run: pnpm run lint:md
49+
run: pnpm run lint:mdx
5050

5151
format:
5252
needs: install_modules

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"dependencies": {
3838
"clsx": "2.1.1",
3939
"next": "14.2.3",
40+
"next-themes": "^0.3.0",
4041
"nextra": "2.13.4",
4142
"nextra-theme-docs": "2.13.4",
4243
"react": "18.3.1",

‎pnpm-lock.yaml

+14
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Footer.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { ThemeToggle } from "./ThemeToggle";
2+
3+
export const Footer = () => {
4+
return (
5+
<div className="flex flex-col items-center justify-center gap-1 py-16 border-t selection:bg-magic-white">
6+
<div className="px-6 mx-auto max-w-[90rem] w-full flex justify-between gap-2">
7+
<div className="text-sm text-gray-600">
8+
Made with ❤️ by the Inkonchain team
9+
</div>
10+
11+
<ThemeToggle />
12+
</div>
13+
</div>
14+
);
15+
};

‎src/components/Head.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { useRouter } from "next/router";
2+
import { useConfig } from "nextra-theme-docs";
3+
4+
export const Head = () => {
5+
const { asPath, defaultLocale, locale } = useRouter();
6+
const { frontMatter } = useConfig();
7+
const url =
8+
"https://docs.Ink.io" +
9+
(defaultLocale === locale ? asPath : `/${locale}${asPath}`);
10+
11+
return (
12+
<>
13+
<meta property="og:url" content={url} />
14+
<meta property="og:title" content={frontMatter.title || "Ink Docs"} />
15+
<meta
16+
property="og:description"
17+
content={frontMatter.description || "Ink Docs for developers"}
18+
/>
19+
<link rel="icon" href="/img/icons/favicon.ico" type="image/x-icon" />
20+
</>
21+
);
22+
};

‎src/components/SidebarTitleComponent.tsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import clsx from "clsx";
2+
import { useRouter } from "next/router";
3+
4+
interface SidebarTitleComponentProps {
5+
title: string;
6+
type: string;
7+
route: string;
8+
}
9+
10+
export const SidebarTitleComponent: React.FC<SidebarTitleComponentProps> = ({
11+
title,
12+
type,
13+
route,
14+
}) => {
15+
const { asPath } = useRouter();
16+
const isActive = route === asPath;
17+
18+
if (type === "separator") {
19+
return <div className="font-bold text-black dark:text-white">{title}</div>;
20+
}
21+
22+
return (
23+
<div
24+
className={clsx(
25+
"ink-sidebar-item px-2 py-1.5 rounded-sm w-full hover:bg-magic-purple/20 transition-all",
26+
{
27+
"bg-magic-purple/20": isActive,
28+
}
29+
)}
30+
>
31+
{title}
32+
</div>
33+
);
34+
};

‎src/components/ThemeToggle.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { useEffect, useState } from "react";
2+
import { useTheme } from "nextra-theme-docs";
3+
4+
import { MoonIcon } from "../icons/Moon";
5+
import { SunIcon } from "../icons/Sun";
6+
7+
export const ThemeToggle = () => {
8+
const { resolvedTheme, setTheme, ...rest } = useTheme();
9+
const [isMounted, setIsMounted] = useState(false);
10+
11+
const onToggleTheme = () => {
12+
if (resolvedTheme == "dark") {
13+
setTheme("light");
14+
} else {
15+
setTheme("dark");
16+
}
17+
};
18+
19+
/**
20+
* This is not ideal, but it's best solution we have to avoid rendering the button
21+
* with the wrong color
22+
*/
23+
useEffect(() => {
24+
setIsMounted(true);
25+
}, [setIsMounted]);
26+
27+
if (!isMounted) {
28+
return null;
29+
}
30+
31+
return (
32+
<button className="w-6 h-6" type="button" onClick={onToggleTheme}>
33+
{resolvedTheme === "light" ? (
34+
<SunIcon className="w-6 h-6 text-magic-purple" />
35+
) : (
36+
<MoonIcon className="w-6 h-6 text-white" />
37+
)}
38+
</button>
39+
);
40+
};

‎src/components/Toc.tsx

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import Link from "next/link";
2+
3+
import { PencilIcon } from "@/icons/Pencil";
4+
import { ThumpUpIcon } from "@/icons/ThumpUp";
5+
import { URLS } from "@/utils/urls";
6+
7+
interface Heading {
8+
id: string;
9+
depth: number;
10+
value: string;
11+
}
12+
13+
interface TocProps {
14+
headings: Heading[];
15+
}
16+
17+
export const Toc: React.FC<TocProps> = ({ headings }) => {
18+
return (
19+
<div className="flex flex-col items-start justify-start py-5 sticky top-14">
20+
{headings.length > 0 && (
21+
<div className="flex flex-col gap-2 border-b pb-4 mb-6">
22+
<h5 className="font-bold text-magic-black">On this page</h5>
23+
24+
<ul>
25+
{headings.map(({ id, value }) => (
26+
<li key={id} className="mb-2">
27+
<Link className="text-sm cursor-pointer" href={`#${id}`}>
28+
{value}
29+
</Link>
30+
</li>
31+
))}
32+
</ul>
33+
</div>
34+
)}
35+
<div className="flex flex-col gap-2">
36+
<Link
37+
href={URLS.developerWailistUrl}
38+
className="text-xs flex items-center gap-1"
39+
>
40+
<ThumpUpIcon className="size-4 text-magic-purple" />
41+
Give us feedback
42+
</Link>
43+
44+
<Link
45+
href={URLS.editDocsOnGithub}
46+
className="text-xs flex items-center gap-1"
47+
>
48+
<PencilIcon className="size-4 text-magic-purple" />
49+
Edit this page on Github
50+
</Link>
51+
</div>
52+
</div>
53+
);
54+
};

‎src/globals.css

+21
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,24 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4+
5+
@layer base {
6+
a {
7+
@apply !text-magic-purple dark:!text-magic-purple;
8+
}
9+
10+
nav {
11+
@apply bg-magic-white dark:bg-magic-black;
12+
}
13+
}
14+
15+
/* Some custom hacks to override some issues with Nextra */
16+
.nextra-nav-container-blur {
17+
display: none !important ;
18+
}
19+
20+
/* Remove the padding from the sidebar link, so that we can pply our own style */
21+
a:has(div.ink-sidebar-item) {
22+
padding: 0 !important;
23+
background-color: transparent !important;
24+
}

‎src/icons/InkLogo.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
interface InkLogoProps {
2+
className?: string;
3+
}
4+
5+
export const InkLogo: React.FC<InkLogoProps> = ({
6+
className = "text-magic-purple",
7+
}) => {
8+
return (
9+
<svg
10+
className={className}
11+
width="44"
12+
height="18"
13+
viewBox="110 0 44 18"
14+
fill="currentColor"
15+
xmlns="http://www.w3.org/2000/svg"
16+
>
17+
<path
18+
fillRule="evenodd"
19+
clipRule="evenodd"
20+
d="M115.861 0.38208C114.329 0.38208 113.087 1.62427 113.087 3.1566V14.372C113.087 15.9043 114.329 17.1465 115.861 17.1465H141.226C142.758 17.1465 144.001 15.9043 144.001 14.372V3.1566C144.001 1.62427 142.758 0.38208 141.226 0.38208H115.861ZM117.404 3.76096V13.6889H119.094V3.76096H117.404ZM121.62 3.76096V13.6889H123.282V6.38023C123.451 6.6478 123.623 6.91184 123.796 7.17588C123.968 7.43992 124.141 7.70396 124.31 7.97152L127.957 13.6889H129.788V3.76096H128.112V11.0696C127.855 10.6557 127.58 10.233 127.308 9.8155C127.238 9.70736 127.168 9.59958 127.098 9.49239L123.437 3.76096H121.62ZM132.3 3.76096V13.6889H133.989V10.6612L135.553 8.99951L138.693 13.6889H140.707L136.693 7.76028L140.439 3.76096H138.327L133.989 8.5348V3.76096H132.3Z"
21+
fill="currentColor"
22+
/>
23+
</svg>
24+
);
25+
};

‎src/icons/Moon.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
interface MoonIconProps {
2+
className?: string;
3+
}
4+
5+
export const MoonIcon: React.FC<MoonIconProps> = ({
6+
className = "w-6 h-6",
7+
}) => {
8+
return (
9+
<svg
10+
className={className}
11+
viewBox="0 0 24 24"
12+
fill="currentColor"
13+
xmlns="http://www.w3.org/2000/svg"
14+
>
15+
<path
16+
fillRule="evenodd"
17+
clipRule="evenodd"
18+
d="M11.8808 2.65571C12.0264 2.9066 12.0143 3.21898 11.8497 3.45784C11.1561 4.46433 10.75 5.6835 10.75 6.99976C10.75 10.4515 13.5482 13.2498 17 13.2498C18.3163 13.2498 19.5356 12.8437 20.5421 12.1499C20.781 11.9853 21.0933 11.9732 21.3442 12.1188C21.5951 12.2644 21.7395 12.5417 21.715 12.8308C21.292 17.825 17.1053 21.746 12.002 21.746C6.61829 21.746 2.25391 17.3816 2.25391 11.9979C2.25391 6.89471 6.17473 2.70808 11.1688 2.28491C11.4579 2.26042 11.7352 2.40482 11.8808 2.65571ZM9.8368 4.03676C6.33205 4.9876 3.75391 8.19197 3.75391 11.9979C3.75391 16.5532 7.44672 20.246 12.002 20.246C15.808 20.246 19.0125 17.6677 19.9632 14.1629C19.05 14.541 18.0489 14.7498 17 14.7498C12.7198 14.7498 9.25 11.28 9.25 6.99976C9.25 5.95095 9.45869 4.94994 9.8368 4.03676Z"
19+
fill="currentColor"
20+
/>
21+
</svg>
22+
);
23+
};

‎src/icons/Pencil.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
interface PencilProps {
2+
className?: string;
3+
}
4+
5+
export const PencilIcon: React.FC<PencilProps> = ({ className = "size-6" }) => {
6+
return (
7+
<svg
8+
className={className}
9+
xmlns="http://www.w3.org/2000/svg"
10+
fill="none"
11+
viewBox="0 0 24 24"
12+
strokeWidth={1.5}
13+
stroke="currentColor"
14+
>
15+
<path
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
18+
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
19+
/>
20+
</svg>
21+
);
22+
};

‎src/icons/Sun.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
interface SunIconProps {
2+
className?: string;
3+
}
4+
5+
export const SunIcon: React.FC<SunIconProps> = ({ className = "w-6 h-6" }) => {
6+
return (
7+
<svg
8+
className={className}
9+
viewBox="0 0 24 24"
10+
fill="currentColor"
11+
xmlns="http://www.w3.org/2000/svg"
12+
>
13+
<path
14+
fillRule="evenodd"
15+
clipRule="evenodd"
16+
d="M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V3C12.75 3.41421 12.4142 3.75 12 3.75C11.5858 3.75 11.25 3.41421 11.25 3V2C11.25 1.58579 11.5858 1.25 12 1.25ZM4.39983 4.39972C4.69272 4.10683 5.16759 4.10683 5.46049 4.39972L6.17049 5.10972C6.46338 5.40262 6.46338 5.87749 6.17049 6.17038C5.87759 6.46328 5.40272 6.46328 5.10983 6.17038L4.39983 5.46038C4.10693 5.16749 4.10693 4.69262 4.39983 4.39972ZM19.6002 4.39972C19.8931 4.69262 19.8931 5.16749 19.6002 5.46038L18.8902 6.17038C18.5973 6.46328 18.1224 6.46328 17.8295 6.17038C17.5366 5.87749 17.5366 5.40262 17.8295 5.10972L18.5395 4.39972C18.8324 4.10683 19.3073 4.10683 19.6002 4.39972ZM8.9948 8.9948C7.33507 10.6545 7.33507 13.3455 8.9948 15.0052C10.6545 16.6649 13.3455 16.6649 15.0052 15.0052C16.6649 13.3455 16.6649 10.6545 15.0052 8.9948C13.3455 7.33507 10.6545 7.33507 8.9948 8.9948ZM7.93413 7.93413C10.1796 5.68862 13.8204 5.68862 16.0659 7.93413C18.3114 10.1796 18.3114 13.8204 16.0659 16.0659C13.8204 18.3114 10.1796 18.3114 7.93413 16.0659C5.68862 13.8204 5.68862 10.1796 7.93413 7.93413ZM1.25 12C1.25 11.5858 1.58579 11.25 2 11.25H3C3.41421 11.25 3.75 11.5858 3.75 12C3.75 12.4142 3.41421 12.75 3 12.75H2C1.58579 12.75 1.25 12.4142 1.25 12ZM20.25 12C20.25 11.5858 20.5858 11.25 21 11.25H22C22.4142 11.25 22.75 11.5858 22.75 12C22.75 12.4142 22.4142 12.75 22 12.75H21C20.5858 12.75 20.25 12.4142 20.25 12ZM6.17049 17.8297C6.46338 18.1225 6.46338 18.5974 6.17049 18.8903L5.46049 19.6003C5.16759 19.8932 4.69272 19.8932 4.39983 19.6003C4.10693 19.3074 4.10693 18.8325 4.39983 18.5396L5.10983 17.8297C5.40272 17.5368 5.87759 17.5368 6.17049 17.8297ZM17.8295 17.8297C18.1224 17.5368 18.5973 17.5368 18.8902 17.8297L19.6002 18.5396C19.8931 18.8325 19.8931 19.3074 19.6002 19.6003C19.3073 19.8932 18.8324 19.8932 18.5395 19.6003L17.8295 18.8903C17.5366 18.5974 17.5366 18.1225 17.8295 17.8297ZM12 20.25C12.4142 20.25 12.75 20.5858 12.75 21V22C12.75 22.4142 12.4142 22.75 12 22.75C11.5858 22.75 11.25 22.4142 11.25 22V21C11.25 20.5858 11.5858 20.25 12 20.25Z"
17+
fill="currentColor"
18+
/>
19+
</svg>
20+
);
21+
};

‎src/icons/ThumpUp.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
interface ThumpUpProps {
2+
className?: string;
3+
}
4+
5+
export const ThumpUpIcon: React.FC<ThumpUpProps> = ({
6+
className = "size-6",
7+
}) => {
8+
return (
9+
<svg
10+
xmlns="http://www.w3.org/2000/svg"
11+
fill="none"
12+
viewBox="0 0 24 24"
13+
strokeWidth={1.5}
14+
stroke="currentColor"
15+
className={className}
16+
>
17+
<path
18+
strokeLinecap="round"
19+
strokeLinejoin="round"
20+
d="M6.633 10.25c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75a.75.75 0 0 1 .75-.75 2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282m0 0h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904m10.598-9.75H14.25M5.904 18.5c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665c0 1.194.232 2.333.654 3.375Z"
21+
/>
22+
</svg>
23+
);
24+
};

‎src/pages/_app.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
// These styles apply to every route in the application
22
import type { AppProps } from "next/app";
3+
import { ThemeProvider } from "next-themes";
34

45
import "../globals.css";
56

67
export default function App({ Component, pageProps }: AppProps) {
7-
return <Component {...pageProps} />;
8+
return (
9+
<ThemeProvider attribute="class">
10+
<div className="bg-magic-white dark:bg-magic-black">
11+
<Component {...pageProps} />
12+
</div>
13+
</ThemeProvider>
14+
);
815
}

‎src/pages/_meta.json

-3
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,6 @@
6969
"newWindow": true
7070
},
7171

72-
73-
74-
7572
"status": {
7673
"title": "Status",
7774
"href": "https://status.optimism.io/",

‎src/pages/stat

Whitespace-only changes.

0 commit comments

Comments
 (0)