+
+
+ );
+};
diff --git a/src/components/Head.tsx b/src/components/Head.tsx
new file mode 100644
index 0000000..d52f78e
--- /dev/null
+++ b/src/components/Head.tsx
@@ -0,0 +1,22 @@
+import { useRouter } from "next/router";
+import { useConfig } from "nextra-theme-docs";
+
+export const Head = () => {
+ const { asPath, defaultLocale, locale } = useRouter();
+ const { frontMatter } = useConfig();
+ const url =
+ "https://docs.Ink.io" +
+ (defaultLocale === locale ? asPath : `/${locale}${asPath}`);
+
+ return (
+ <>
+
+
+
+
+
+ );
+};
diff --git a/src/components/SidebarTitleComponent.tsx b/src/components/SidebarTitleComponent.tsx
new file mode 100644
index 0000000..e47e101
--- /dev/null
+++ b/src/components/SidebarTitleComponent.tsx
@@ -0,0 +1,38 @@
+import clsx from "clsx";
+import { useRouter } from "next/router";
+
+interface SidebarTitleComponentProps {
+ title: string;
+ type: string;
+ route: string;
+}
+
+export const SidebarTitleComponent: React.FC{title}
+ );
+ }
+
+ return (
+
+ {title}
+
+ );
+};
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..cb9c64a
--- /dev/null
+++ b/src/components/ThemeToggle.tsx
@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { useTheme } from "nextra-theme-docs";
+
+import { MoonIcon } from "../icons/Moon";
+import { SunIcon } from "../icons/Sun";
+
+export const ThemeToggle = () => {
+ const { resolvedTheme, setTheme } = useTheme();
+ const [isMounted, setIsMounted] = useState(false);
+
+ const onToggleTheme = () => {
+ if (resolvedTheme == "dark") {
+ setTheme("light");
+ } else {
+ setTheme("dark");
+ }
+ };
+
+ /**
+ * This is not ideal, but it's best solution we have to avoid rendering the button
+ * with the wrong color
+ */
+ useEffect(() => {
+ setIsMounted(true);
+ }, [setIsMounted]);
+
+ if (!isMounted) {
+ return null;
+ }
+
+ return (
+
+ );
+};
diff --git a/src/components/Toc.tsx b/src/components/Toc.tsx
new file mode 100644
index 0000000..41b2efc
--- /dev/null
+++ b/src/components/Toc.tsx
@@ -0,0 +1,56 @@
+import Link from "next/link";
+
+import { PencilIcon } from "@/icons/Pencil";
+import { ThumpUpIcon } from "@/icons/ThumpUp";
+import { URLS } from "@/utils/urls";
+
+interface Heading {
+ id: string;
+ depth: number;
+ value: string;
+}
+
+interface TocProps {
+ headings: Heading[];
+}
+
+export const Toc: React.FC
+ {headings.length > 0 && (
+
+ );
+};
diff --git a/src/fonts.ts b/src/fonts.ts
new file mode 100644
index 0000000..cdedcd6
--- /dev/null
+++ b/src/fonts.ts
@@ -0,0 +1,13 @@
+import { Inter, Plus_Jakarta_Sans } from "next/font/google";
+
+export const inter = Inter({
+ subsets: ["latin"],
+ variable: "--font-inter",
+ display: "swap",
+});
+
+export const plus_jakarta_sans = Plus_Jakarta_Sans({
+ subsets: ["latin"],
+ variable: "--font-plus-jakarta-sans",
+ display: "swap",
+});
diff --git a/src/globals.css b/src/globals.css
new file mode 100644
index 0000000..17a18e4
--- /dev/null
+++ b/src/globals.css
@@ -0,0 +1,64 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer utilities {
+ body {
+ background-color: blue;
+ font-family: var(--font-plus-jakarta-sans), var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+}
+
+@layer base {
+ h1,
+ h2,
+ h3,
+ h4 {
+ @apply !text-magic-deep-purple dark:!text-magic-white;
+ }
+
+ a:not(.nextra-sidebar-container a):not(nav a):not(.toc-link) {
+ @apply !text-magic-purple dark:!text-magic-soft-pink !underline hover:!text-magic-purple/80 dark:hover:!text-magic-soft-pink/80;
+ }
+
+ nav > a {
+ @apply !text-ink-grey-400 dark:!text-magic-white dark:hover:!text-ink-grey-400 hover:!text-ink-grey-700 !no-underline;
+ }
+
+ nav > a > svg {
+ @apply !fill-magic-black dark:!fill-magic-white;
+ }
+
+ nav {
+ @apply bg-white dark:bg-magic-black;
+ }
+
+ pre {
+ @apply !bg-magic-semi-deep-purple/15;
+ }
+
+ .toc-link {
+ @apply cursor-pointer !text-ink-grey-400 dark:!text-magic-white group-hover:!text-ink-grey-700 dark:group-hover:!text-ink-grey-700;
+ }
+
+ /* We need to override the underline for nav links and sidebar items */
+ nav > a,
+ a:has(div.ink-sidebar-item),
+ .toc-link {
+ @apply no-underline;
+ }
+}
+
+/* Some custom hacks to override some issues with Nextra */
+.nextra-nav-container-blur {
+ display: none !important ;
+}
+
+/* Remove the padding from the sidebar link, so that we can pply our own style */
+a:has(div.ink-sidebar-item) {
+ padding: 0 !important;
+ background-color: transparent !important;
+}
diff --git a/src/icons/InkLogo.tsx b/src/icons/InkLogo.tsx
new file mode 100644
index 0000000..12163d5
--- /dev/null
+++ b/src/icons/InkLogo.tsx
@@ -0,0 +1,17 @@
+interface InkLogoProps {
+ className?: string;
+}
+
+export const InkLogo: React.FC
+
+ )}
+ + On this page +
+ +-
+ {headings.map(({ id, value }) => (
+
- + + {value} + + + ))} +
+
+
+ 
+ );
+};
diff --git a/src/icons/Moon.tsx b/src/icons/Moon.tsx
new file mode 100644
index 0000000..4c6a7a8
--- /dev/null
+++ b/src/icons/Moon.tsx
@@ -0,0 +1,23 @@
+interface MoonIconProps {
+ className?: string;
+}
+
+export const MoonIcon: React.FC
+
+
+
+