Treblle · imikodanic · Sep 3, 2024 · Sep 6, 2024
diff --git a/.gitignore b/.gitignore
@@ -37,4 +37,7 @@ next-env.d.ts
 
 ## Panda
 styled-system
-styled-system-studio
+styled-system-studio
+
+# Intellij
+.idea
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+pnpm-lock.yaml
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,33 @@
+import "../styles/panda.css";
+import "../styles/global.css";
+
+import { ThemeProvider } from "next-themes";
+import React from "react";
+
+import { css, cx } from "~styled-system/css";
+
+import { fontClassName } from "../styles/fonts";
+
+interface RootLayoutProperties {
+    children: React.ReactNode;
+}
+
+export default function RootLayout(properties: RootLayoutProperties) {
+    const { children } = properties;
+    return (
+        <html
+            lang="en"
+            className={cx(fontClassName, css({ overflowX: "hidden", fontFamily: "body" }))}
+            suppressHydrationWarning
+        >
+            <head>
+                <title>Treblle Documentation</title>
+            </head>
+            <body>
+                <ThemeProvider attribute="class" enableSystem>
+                    {children}
+                </ThemeProvider>
+            </body>
+        </html>
+    );
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,179 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useTheme } from "next-themes";
+
+import { ThemeSwitchButton } from "~components/ThemeSwitchButton";
+import { Button } from "~components/ui/Button";
+import { css } from "~styled-system/css";
+import { Box, Stack, styled } from "~styled-system/jsx";
+
+import { Icon } from "../theme/icons";
+
+export default function Page() {
+    const { theme } = useTheme();
+
+    return (
+        <Stack
+            css={{
+                flexDirection: "column",
+                gap: "0",
+                bgColor: "bg.main",
+                paddingX: { base: "0", lg: "6" },
+                minHeight: "screen",
+            }}
+        >
+            <Stack
+                css={{
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    paddingY: "5",
+                    paddingX: { base: "6", lg: "0" },
+                }}
+            >
+                <Link href="https://treblle.com">
+                    <Icon icon="LogoPositive" height="28px" width="100px" />
+                </Link>
+                <Stack css={{ flexDirection: "row", alignItems: "center" }}>
+                    <ThemeSwitchButton />
+                    <Stack
+                        css={{
+                            width: "1px",
+                            height: "28px",
+                            bgColor: "bg.muted",
+                            marginRight: "2",
+                        }}
+                    />
+                    <Stack
+                        css={{
+                            display: "flex",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            gap: "4",
+                            color: "bg.emphasized",
+                        }}
+                    >
+                        <Link href="https://github.com/Treblle/treblle-docs-nextra" target="_blank">
+                            <Icon icon="Github" width="20px" height="20px" />
+                        </Link>
+                        <Link href="https://discord.com/invite/hgt78mXwzv" target="_blank">
+                            <Icon icon="Discord" width="20px" height="20px" />
+                        </Link>
+                    </Stack>
+                </Stack>
+            </Stack>
+            <Box className={mainBgGradient}>
+                <Link href="/changelog" className={changelogButton}>
+                    Changelog
+                    <Icon
+                        icon="ChevronRight"
+                        width="10px"
+                        height="10px"
+                        className={css({ marginLeft: "2" })}
+                    />
+                </Link>
+                <styled.h1 css={{ textStyle: "h1", zIndex: "10" }}>Treblle Documentation</styled.h1>
+                <styled.p
+                    css={{
+                        color: "text.muted",
+                        maxWidth: "600px",
+                        textAlign: { base: "left", lg: "center" },
+                        zIndex: "10",
+                        fontSize: { lg: "lg" },
+                    }}
+                >
+                    End to End API Ops platform, helping engineering and product teams build, ship
+                    and understand their REST APIs in one single place.
+                </styled.p>
+                <Image
+                    priority
+                    src={theme === "dark" ? "/hero-image-dark.png" : "/hero-image-light.png"}
+                    alt="Treblle core and other products diagram"
+                    className={heroImage}
+                    width={1282}
+                    height={716}
+                />
+                <Stack
+                    css={{
+                        flexDirection: { base: "column", sm: "row" },
+                        gap: "6",
+                        marginTop: "2",
+                        zIndex: "10",
+                    }}
+                >
+                    <Button asChild>
+                        <Link href={"/introduction"}>Get Started</Link>
+                    </Button>
+                    <Button variant="outline" asChild>
+                        <Link href="https://github.com/Treblle/treblle-docs-nextra" target="_blank">
+                            <Icon
+                                icon="Github"
+                                width="20px"
+                                height="20px"
+                                className={css({ marginRight: "2" })}
+                            />
+                            Github
+                        </Link>
+                    </Button>
+                </Stack>
+            </Box>
+        </Stack>
+    );
+}
+
+const mainBgGradient = css({
+    bgGradient: "to-bl",
+    minHeight: "calc(100vh - 160px)",
+    borderRadius: "20px",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: { base: "left", lg: "center" },
+    paddingTop: { base: "50px", lg: "200px" },
+    position: "relative",
+    paddingX: "10",
+    gradientFrom: "#e5eeff",
+    gradientTo: "white",
+    gap: "4",
+    _dark: {
+        gradientFrom: "#012065",
+        gradientTo: "midnight",
+    },
+});
+
+const heroImage = css({
+    position: "absolute",
+    top: "60%",
+    left: "50%",
+    translate: "-50% -50%",
+    width: "100%",
+    maxWidth: "1200px",
+    display: "none",
+    objectFit: "contain",
+    lg: {
+        display: "block",
+    },
+});
+
+const changelogButton = css({
+    backgroundColor: "#dfe3ef",
+    fontSize: "sm",
+    fontWeight: "semibold",
+    display: "flex",
+    alignItems: "center",
+    paddingY: "2",
+    paddingX: "4",
+    borderRadius: "22px",
+    zIndex: "10",
+    width: "fit-content",
+    _hover: {
+        backgroundColor: "#d4d7e3",
+    },
+    _dark: {
+        backgroundColor: "#29304b",
+        _hover: {
+            backgroundColor: "#1e2336",
+        },
+    },
+});
diff --git a/components/ThemeSwitchButton.tsx b/components/ThemeSwitchButton.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useMounted } from "nextra/hooks";
+
+import { Button } from "~components/ui/Button";
+import { css } from "~styled-system/css";
+import { HStack } from "~styled-system/jsx";
+
+import { ButtonIcon } from "../theme/icons";
+
+function useThemeSwitch() {
+    const theme = useTheme();
+    const { setTheme, resolvedTheme } = theme;
+
+    const mounted = useMounted();
+    const isDark = mounted && resolvedTheme === "dark";
+
+    const toggleTheme = () => {
+        setTheme(isDark ? "light" : "dark");
+    };
+
+    const iconToUse: "Moon" | "Sun" = isDark ? "Moon" : "Sun";
+    const iconText = isDark ? "Dark" : "Light";
+
+    return {
+        mounted,
+        iconToUse,
+        iconText,
+        toggleTheme,
+    };
+}
+
+const switchStyle = css({
+    px: "2",
+    py: "1",
+    textStyle: "xl",
+    fontWeight: "semibold",
+    letterSpacing: "tight",
+    rounded: "md",
+    cursor: "pointer",
+    _hover: {
+        bg: "bg.emphasized.hover",
+    },
+});
+
+export function ThemeSwitchButton() {
+    const { iconToUse, toggleTheme, mounted } = useThemeSwitch();
+
+    return (
+        <button style={{ opacity: mounted ? 1 : 0 }} onClick={toggleTheme} className={switchStyle}>
+            <HStack gap="2">
+                <ButtonIcon icon={iconToUse} />
+            </HStack>
+        </button>
+    );
+}
+
+export function ThemeSwitchIconButton() {
+    const { iconToUse, iconText, toggleTheme, mounted } = useThemeSwitch();
+
+    return (
+        <Button
+            style={{ opacity: mounted ? 1 : 0 }}
+            onClick={toggleTheme}
+            aria-label={iconText}
+            className={switchStyle}
+        >
+            <ButtonIcon icon={iconToUse} />
+        </Button>
+    );
+}
diff --git a/components/counters.module.css b/components/counters.module.css
diff --git a/components/counters.tsx b/components/counters.tsx
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
@@ -0,0 +1,6 @@
+import { ark } from "@ark-ui/react";
+
+import { styled } from "~styled-system/jsx";
+import { button } from "~styled-system/recipes";
+
+export const Button = styled(ark.button, button);
diff --git a/next.config.cjs b/next.config.cjs
diff --git a/next.config.mjs b/next.config.mjs
@@ -0,0 +1,20 @@
+import nextra from "nextra";
+
+const withNextra = nextra({
+    theme: "nextra-theme-docs",
+    themeConfig: "./theme.config.tsx",
+    defaultShowCopyCode: true,
+    flexsearch: {
+        codeblocks: true,
+    },
+    codeHighlight: true,
+});
+
+export default withNextra({
+    reactStrictMode: true,
+    swcMinify: true,
+});
+
+process.on("unhandledRejection", (error) => {
+    console.log("unhandledRejection", error);
+});
diff --git a/package.json b/package.json
@@ -24,9 +24,11 @@
         "typecheck": "tsc --noEmit"
     },
     "dependencies": {
+        "@ark-ui/react": "^3.10.0",
         "next": "14.2.7",
-        "nextra": "2.13.4",
-        "nextra-theme-docs": "2.13.4",
+        "next-themes": "^0.3.0",
+        "nextra": "^2.13.4",
+        "nextra-theme-docs": "^2.13.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },