diff --git a/apps/www/app/layout.config.tsx b/apps/www/app/layout.config.tsx index cf3354d07..45bb6acdd 100644 --- a/apps/www/app/layout.config.tsx +++ b/apps/www/app/layout.config.tsx @@ -10,7 +10,7 @@ import { Logo } from "~/components/page/logo"; */ export const baseOptions: BaseLayoutProps = { nav: { - title: , + title: , }, githubUrl: process.env.NEXT_PUBLIC_GITHUB_URL, }; diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx index 967b317d6..18b823dc3 100644 --- a/apps/www/app/layout.tsx +++ b/apps/www/app/layout.tsx @@ -4,24 +4,24 @@ import { Analytics } from "@vercel/analytics/next"; import { SpeedInsights } from "@vercel/speed-insights/next"; import { RootProvider } from "fumadocs-ui/provider/next"; import type { Metadata } from "next"; -import { Inter, JetBrains_Mono } from "next/font/google"; +import { Geist, JetBrains_Mono } from "next/font/google"; import type { ReactNode } from "react"; import { Toaster } from "~/components/ui/toaster"; -const inter = Inter({ +const geist = Geist({ subsets: ["latin"], }); -const jetbrainsMono = JetBrains_Mono({ +const mono = JetBrains_Mono({ + variable: "--font-mono", subsets: ["latin"], - variable: "--font-jetbrains-mono", }); export const metadata: Metadata = { icons: { icon: [ { - url: 'data:image/svg+xml;utf8,', + url: "/assets/icon.svg", type: "image/svg+xml", }, ], @@ -32,7 +32,7 @@ export default function Layout({ children }: { children: ReactNode }) { return ( diff --git a/apps/www/app/styles/base.css b/apps/www/app/styles/base.css index c110ca97b..e78c896b2 100644 --- a/apps/www/app/styles/base.css +++ b/apps/www/app/styles/base.css @@ -12,8 +12,8 @@ code, pre { font-family: - var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, - Consolas, "Liberation Mono", "Courier New", monospace; + var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace; } } diff --git a/apps/www/components/page/logo.test.tsx b/apps/www/components/page/logo.test.tsx index b22b1663e..7b86f882f 100644 --- a/apps/www/components/page/logo.test.tsx +++ b/apps/www/components/page/logo.test.tsx @@ -10,32 +10,42 @@ describe("Logo", () => { it("renders the ArkEnv text", () => { render(); - const logo = screen.getByText("ArkEnv"); - expect(logo).toBeInTheDocument(); + const logoText = screen.getByText("ArkEnv"); + expect(logoText).toBeInTheDocument(); + }); + + it("renders the logo icon", () => { + render(); + // Check for the image element + const img = document.querySelector("img"); + expect(img).toBeInTheDocument(); + expect(img).toHaveAttribute( + "src", + expect.stringContaining("/assets/icon.svg"), + ); }); it("applies default styling classes", () => { render(); - const logo = screen.getByText("ArkEnv"); - expect(logo).toHaveClass("font-bold"); - expect(logo).toHaveClass("text-fd-foreground"); - expect(logo).toHaveClass("decoration-wavy"); - expect(logo).toHaveClass("underline"); - }); + const container = screen.getByText("ArkEnv").parentElement; + expect(container).toHaveClass("flex"); + expect(container).toHaveClass("items-center"); + expect(container).toHaveClass("gap-2"); - it("accepts custom className", () => { - render(); + const text = screen.getByText("ArkEnv"); + expect(text).not.toHaveClass("font-bold"); + expect(text).toHaveClass("text-fd-foreground"); - const logo = screen.getByText("ArkEnv"); - expect(logo).toHaveClass("custom-class"); - expect(logo).toHaveClass("font-bold"); // should still have default classes + const img = document.querySelector("img"); + // next/image might apply styles differently, but we passed className="size-6" + expect(img).toHaveClass("size-6"); }); - it("renders as a code element", () => { - render(); + it("accepts custom className", () => { + render(); - const logo = screen.getByText("ArkEnv"); - expect(logo.tagName).toBe("CODE"); + const container = screen.getByText("ArkEnv").parentElement; + expect(container).toHaveClass("custom-class"); }); }); diff --git a/apps/www/components/page/logo.tsx b/apps/www/components/page/logo.tsx index d3bfd3a66..a869c13b6 100644 --- a/apps/www/components/page/logo.tsx +++ b/apps/www/components/page/logo.tsx @@ -1,3 +1,4 @@ +import Image from "next/image"; import { cn } from "~/lib/utils"; /** @@ -8,13 +9,16 @@ import { cn } from "~/lib/utils"; */ export function Logo({ className }: { className?: string }) { return ( - - ArkEnv - +
+ + ArkEnv +
); } diff --git a/apps/www/content/docs/arkenv/index.mdx b/apps/www/content/docs/arkenv/index.mdx index 804eb7128..6d7d6615a 100644 --- a/apps/www/content/docs/arkenv/index.mdx +++ b/apps/www/content/docs/arkenv/index.mdx @@ -9,6 +9,19 @@ import { SiGithub as GitHub } from "@icons-pack/react-simple-icons"; ../../packages/arkenv/README.md#introduction ../../packages/arkenv/README.md#features +## The ArkEnv icon + + +ArkEnv icon + + +The ArkEnv icon tells the story of what we're building. It weaves together three distinct symbols: + +- **A gear**: At first glance, it's a settings gear, representing the core mechanical purpose of the library: precise environment configuration. +- **A ship's wheel**: Look closer, and it's a ship's wheel. This honors the Ark motif, symbolizing the freedom to explore and build, steered by reliable technology. +- **A lighthouse**: It is also the Japanese map symbol for a lighthouse. Just as a lighthouse warns sailors of danger, ArkEnv's typesafety guides your apps away from the rocky shores of runtime errors. + + ## Next steps diff --git a/apps/www/lib/source.tsx b/apps/www/lib/source.tsx index 1edbe9045..e4882b1aa 100644 --- a/apps/www/lib/source.tsx +++ b/apps/www/lib/source.tsx @@ -6,7 +6,7 @@ import { createElement } from "react"; import { docs } from "~/.source"; import { Badge } from "~/components/ui/badge"; -export type IconName = keyof typeof icons | "New"; +export type IconName = keyof typeof icons | "New" | "Updated"; export const source = loader({ baseUrl: "/docs", @@ -20,6 +20,10 @@ export const source = loader({ return createElement(SimpleIcons[`Si${icon}` as never]); if (icon === "New") return new; + if (icon === "Updated") + return ( + updated + ); throw new Error(`${icon} is not a valid icon`); }, diff --git a/apps/www/public/assets/icon.svg b/apps/www/public/assets/icon.svg new file mode 100644 index 000000000..a02e45c3b --- /dev/null +++ b/apps/www/public/assets/icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/arkenv/README.md b/packages/arkenv/README.md index eb64cfb0c..c52116c67 100644 --- a/packages/arkenv/README.md +++ b/packages/arkenv/README.md @@ -1,7 +1,6 @@

- - arkenv - Typesafe Environment Variables - + ArkEnv Logo +

ArkEnv


Test Status npm bundle size diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 596f19dea..3272b7017 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,18 +6,6 @@ settings: catalogs: default: - '@axe-core/playwright': - specifier: 4.11.0 - version: 4.11.0 - '@size-limit/esbuild-why': - specifier: 11.2.0 - version: 11.2.0 - '@size-limit/preset-small-lib': - specifier: 11.2.0 - version: 11.2.0 - '@types/bun': - specifier: 1.3.3 - version: 1.3.3 '@types/node': specifier: 24.10.1 version: 24.10.1 @@ -30,39 +18,9 @@ catalogs: '@vitejs/plugin-react': specifier: 5.1.1 version: 5.1.1 - '@vitest/ui': - specifier: 4.0.14 - version: 4.0.14 - arktype: - specifier: 2.1.27 - version: 2.1.27 - bun: - specifier: 1.1.40 - version: 1.1.40 concurrently: specifier: 9.2.1 version: 9.2.1 - globals: - specifier: 16.5.0 - version: 16.5.0 - react: - specifier: 19.2.0 - version: 19.2.0 - react-dom: - specifier: 19.2.0 - version: 19.2.0 - rimraf: - specifier: 6.1.2 - version: 6.1.2 - size-limit: - specifier: 11.2.0 - version: 11.2.0 - tsdown: - specifier: 0.16.7 - version: 0.16.7 - tsx: - specifier: 4.20.6 - version: 4.20.6 typescript: specifier: 5.9.3 version: 5.9.3