V3

Many many many changes, honestly just read the release notes

docs/src/app/[...mdxPath]/page.tsx

@@ -0,0 +1,27 @@
+import { generateStaticParamsFor, importPage } from "nextra/pages";
+import { useMDXComponents } from "@/mdx-components";
+
+export const generateStaticParams = generateStaticParamsFor("mdxPath");
+
+interface Props {
+  params: Promise<{ mdxPath: string[] }>;
+}
+
+export async function generateMetadata(props: Props) {
+  const params = await props.params;
+  const { metadata } = await importPage(params.mdxPath);
+  return metadata;
+}
+/* eslint-disable-next-line */
+const Wrapper = useMDXComponents({}).wrapper;
+
+export default async function Page(props: Props) {
+  const params = await props.params;
+  const result = await importPage(params.mdxPath);
+  const { default: MDXContent, toc, metadata } = result;
+  return (
+    <Wrapper toc={toc} metadata={metadata}>
+      <MDXContent {...props} params={params} />
+    </Wrapper>
+  );
+}

docs/src/app/components/Card.tsx

@@ -0,0 +1,23 @@
+import { Icon as IconType } from "@tabler/icons-react";
+
+export function Card({
+  name,
+  icon: Icon,
+  description,
+}: {
+  name: string;
+  icon: IconType;
+  description: string;
+}) {
+  return (
+    <div className="p-4 bg-white dark:bg-black group">
+      <Icon className="text-black size-7 group-hover:size-9 dark:text-white inline mr-2 transition-[width,height] duration-200" />
+      <span className="align-middle text-2xl font-bold text-black dark:text-white">
+        {name}
+      </span>
+      <p className="text-xl font-semibold text-neutral-500 dark:text-neutral-500">
+        {description}
+      </p>
+    </div>
+  );
+}

docs/src/app/components/GradientText.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { clsx } from "clsx";
+
+export function GradientText({
+  text,
+  innerClassName,
+  className,
+  blur,
+}: {
+  text: string;
+  innerClassName: string;
+  className?: string;
+  blur: number;
+}) {
+  return (
+    <div className={clsx("relative", className)}>
+      <p
+        className={clsx("bg-clip-text text-transparent w-fit", innerClassName)}
+      >
+        {text}
+      </p>
+      <p
+        className={clsx(
+          "pointer-events-none absolute top-0 hidden select-none bg-clip-text text-transparent dark:block",
+          innerClassName,
+        )}
+        style={{ filter: `blur(${blur}px)` }}
+      >
+        {text}
+      </p>
+    </div>
+  );
+}

docs/src/app/components/GridPattern.tsx

@@ -0,0 +1,31 @@
+import { useId } from "react";
+
+const SIZE = 36;
+
+export function GridPattern() {
+  const id = useId();
+
+  return (
+    <svg
+      aria-hidden="true"
+      className="pointer-events-none absolute inset-0 bottom-0 left-0 right-0 top-0 h-full w-full -z-10 bg-white stroke-neutral-200 dark:stroke-white/10 dark:bg-black"
+    >
+      <defs>
+        <pattern
+          id={id}
+          width={SIZE}
+          height={SIZE}
+          patternUnits="userSpaceOnUse"
+          x={-1}
+          y={-1}
+        >
+          <path
+            d={`M.5 ${SIZE}V.5H${SIZE}`}
+            fill="none"
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
+    </svg>
+  );
+}

docs/src/app/components/Head.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Head as NextraHead } from "nextra/components";
+
+export function Head() {
+  return (
+    <NextraHead>
+      <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+      <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+      <meta
+        name="theme-color"
+        media="(prefers-color-scheme: light)"
+        content="#ffffff"
+      />
+      <meta
+        name="theme-color"
+        media="(prefers-color-scheme: dark)"
+        content="#111111"
+      />
+      <meta
+        name="og:image"
+        content="https://raw.githubusercontent.com/sergi0g/cup/main/docs/public/cup-og.png"
+      />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:site" content="https://cup.sergi0g.dev" />
+      <meta name="apple-mobile-web-app-title" content="Cup" />
+    </NextraHead>
+  );
+}

docs/src/app/components/Logo.tsx

@@ -0,0 +1,57 @@
+export default function Logo() {
+  return (
+    <svg
+      viewBox="0 0 128 128"
+      style={{ height: "calc(var(--nextra-navbar-height) * 0.6)" }}
+    >
+      <path
+        style={{ fill: "#A6CFD6" }}
+        d="M65.12,17.55c-17.6-0.53-34.75,5.6-34.83,14.36c-0.04,5.2,1.37,18.6,3.62,48.68s2.25,33.58,3.5,34.95
+                  c1.25,1.37,10.02,8.8,25.75,8.8s25.93-6.43,26.93-8.05c0.48-0.78,1.83-17.89,3.5-37.07c1.81-20.84,3.91-43.9,3.99-45.06
+                  C97.82,30.66,94.2,18.43,65.12,17.55z"
+      />
+      <path
+        style={{ fill: "#DCEDF6" }}
+        d="M41.4,45.29c-0.12,0.62,1.23,24.16,2.32,27.94c1.99,6.92,9.29,7.38,10.23,4.16
+                  c0.9-3.07-0.38-29.29-0.38-29.29s-3.66-0.3-6.43-0.84C44,46.63,41.4,45.29,41.4,45.29z"
+      />
+      <path
+        style={{ fill: "#6CA4AE" }}
+        d="M33.74,32.61c-0.26,8.83,20.02,12.28,30.19,12.22c13.56-0.09,29.48-4.29,29.8-11.7
+                  S79.53,21.1,63.35,21.1C49.6,21.1,33.96,25.19,33.74,32.61z"
+      />
+      <path
+        style={{ fill: "#DC0D27" }}
+        d="M84.85,13.1c-0.58,0.64-9.67,30.75-9.67,30.75s2.01-0.33,4-0.79c2.63-0.61,3.76-1.06,3.76-1.06
+                  s7.19-22.19,7.64-23.09c0.45-0.9,21.61-7.61,22.31-7.93c0.7-0.32,1.39-0.4,1.46-0.78c0.06-0.38-2.34-6.73-3.11-6.73
+                  C110.47,3.47,86.08,11.74,84.85,13.1z"
+      />
+      <path
+        style={{ fill: "#8A1F0F" }}
+        d="M110.55,7.79c1.04,2.73,2.8,3.09,3.55,2.77c0.45-0.19,1.25-1.84,0.01-4.47
+                  c-0.99-2.09-2.17-2.74-2.93-2.61C110.42,3.6,109.69,5.53,110.55,7.79z"
+      />
+      <g>
+        <path
+          style={{ fill: "#8A1F0F" }}
+          d="M91.94,18.34c-0.22,0-0.44-0.11-0.58-0.3l-3.99-5.77c-0.22-0.32-0.14-0.75,0.18-0.97
+                    c0.32-0.22,0.76-0.14,0.97,0.18l3.99,5.77c0.22,0.32,0.14,0.75-0.18,0.97C92.21,18.3,92.07,18.34,91.94,18.34z"
+        />
+      </g>
+      <g>
+        <path
+          style={{ fill: "#8A1F0F" }}
+          d="M90.28,19.43c-0.18,0-0.35-0.07-0.49-0.2l-5.26-5.12c-0.28-0.27-0.28-0.71-0.01-0.99
+                    c0.27-0.28,0.71-0.28,0.99-0.01l5.26,5.12c0.28,0.27,0.28,0.71,0.01,0.99C90.64,19.36,90.46,19.43,90.28,19.43z"
+        />
+      </g>
+      <g>
+        <path
+          style={{ fill: "#8A1F0F" }}
+          d="M89.35,21.22c-0.12,0-0.25-0.03-0.36-0.1l-5.6-3.39c-0.33-0.2-0.44-0.63-0.24-0.96
+                    c0.2-0.33,0.63-0.44,0.96-0.24l5.6,3.39c0.33,0.2,0.44,0.63,0.24,0.96C89.82,21.1,89.59,21.22,89.35,21.22z"
+        />
+      </g>
+    </svg>
+  );
+}

docs/src/app/components/pages/home.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+import "./styles.css";
+
+import { Browser } from "../Browser";
+import { Card } from "../Card";
+import {
+  IconAdjustments,
+  IconArrowRight,
+  IconBarrierBlockOff,
+  IconBolt,
+  IconFeather,
+  IconGitMerge,
+  IconPuzzle,
+  IconServer,
+  IconTerminal,
+} from "@tabler/icons-react";
+import { GitHubIcon } from "nextra/icons";
+import { GridPattern } from "../GridPattern";
+import { GradientText } from "../GradientText";
+import Link from "next/link";
+
+export default async function Home() {
+  return (
+    <>
+      <div className="relative home bg-radial-[ellipse_at_center] from-transparent from-20% to-white dark:to-black">
+        <GridPattern />
+        <div className="px-4 pt-16 pb-8 sm:pt-24 lg:px-8">
+          <div className="flex w-full flex-col items-center justify-between">
+            <div>
+              <h1 className="mx-auto max-w-2xl text-center text-6xl leading-none font-extrabold tracking-tighter text-black sm:text-7xl dark:text-white">
+                The easiest way to manage your
+                <GradientText
+                  text="container updates."
+                  className="mx-auto w-fit"
+                  innerClassName="bg-linear-to-r/oklch from-blue-500 to-green-500"
+                  blur={30}
+                />
+              </h1>
+              <h3 className="mx-auto mt-6 max-w-3xl text-center text-xl leading-tight font-medium text-neutral-500 dark:text-neutral-400">
+                Cup is a small utility with a big impact. Simplify your
+                container management workflow with fast and efficient update
+                checking, a full-featured CLI and web interface, and more.
+              </h3>
+            </div>
+            <div className="mt-8 grid w-fit grid-cols-2 gap-4 *:flex *:items-center *:gap-2 *:rounded-lg *:px-3 *:py-2">
+              <Link
+                href="/docs"
+                className="hide-focus group h-full bg-black text-white dark:bg-white dark:text-black"
+              >
+                Get started
+                <IconArrowRight className="ml-auto mr-1 transition-transform duration-300 ease-out group-hover:translate-x-1 group-focus:translate-x-1 dark:!text-black" />
+              </Link>
+              <a
+                href="https://github.com/sergi0g/cup"
+                target="_blank"
+                className="hide-focus h-full bg-white dark:bg-black text-nowrap border border-black/15 transition-colors duration-200 ease-in-out hover:border-black/40 dark:border-white/15 hover:dark:border-white/40 hover:dark:shadow-sm focus:dark:border-white/30"
+              >
+                Star on GitHub
+                <GitHubIcon className="ml-auto size-4 md:size-5" />
+              </a>
+            </div>
+          </div>
+        </div>
+        <div className="py-10 flex translate-y-32 justify-center" id="hero">
+          <Browser />
+        </div>
+      </div>
+      <div className="bg-white dark:bg-black py-12 px-8 w-full">
+        <div className="flex h-full w-full items-center justify-center">
+          <div className="grid md:grid-cols-2 md:grid-rows-4 lg:grid-cols-4 lg:grid-rows-2 w-full max-w-7xl gap-px border border-transparent bg-black/10 dark:bg-white/10">
+            <Card
+              name="Built for speed."
+              icon={IconBolt}
+              description="Cup is written in Rust and every release goes through extensive profiling to squeeze out every last drop of performance."
+            />
+            <Card
+              name="Configurable."
+              icon={IconAdjustments}
+              description="Make Cup yours with the extensive configuration options available. Customize and tailor it to your needs."
+            />
+            <Card
+              name="Extend it."
+              icon={IconPuzzle}
+              description="JSON output enables you to connect Cup with your favorite integrations, build automations and more."
+            />
+            <Card
+              name="CLI available."
+              icon={IconTerminal}
+              description="Do you like terminals? Cup has a CLI. Check for updates quickly without spinning up a server."
+            />
+            <Card
+              name="Multiple servers."
+              icon={IconServer}
+              description="Run multiple Cup instances and effortlessly check on them through one web interface."
+            />
+            <Card
+              name="Unstoppable."
+              icon={IconBarrierBlockOff}
+              description="Cup is designed to check for updates without using up any rate limits. 10 images per hour won't be a problem, even with 100 images."
+            />
+            <Card
+              name="Lightweight."
+              icon={IconFeather}
+              description="No need for a powerful server and endless storage. The tiny 5.4 MB binary won't hog your CPU and memory."
+            />
+            <Card
+              name="Open source."
+              icon={IconGitMerge}
+              description="All source code is publicly available in our GitHub repository. We're looking for contributors!"
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

docs/src/app/components/pages/styles.css

@@ -0,0 +1,26 @@
+article:has(.home) {
+  padding-inline: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+article div.x\:mt-16:last-child:empty {
+  margin-top: 0;
+}
+
+#hero {
+  animation-name: hero;
+  animation-duration: 1500ms;
+  animation-delay: 500ms;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+}
+
+@keyframes hero {
+  from {
+    translate: 0 8rem;
+  }
+  to {
+    translate: 0 0;
+  }
+}

docs/src/app/globals.css

@@ -0,0 +1,17 @@
+@import "tailwindcss";
+
+@variant dark (&:where(.dark, .dark *));
+
+.nextra-card .tabler-icon:hover {
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+.nextra-card .tabler-icon {
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+.nextra-card .tabler-icon:is(.dark *) {
+  color: rgb(229 229 229 / var(--tw-text-opacity));
+}
+
+.nextra-card .tabler-icon:is(.dark *):hover {
+  color: rgb(250 250 250 / var(--tw-text-opacity));
+}

docs/src/app/layout.tsx

@@ -0,0 +1,55 @@
+import type { Metadata } from "next";
+import { Footer, Layout, Navbar, ThemeSwitch } from "nextra-theme-docs";
+import { getPageMap } from "nextra/page-map";
+import { GeistSans } from "geist/font/sans";
+import "nextra-theme-docs/style.css";
+import "./globals.css";
+import { Head } from "./components/Head";
+import Logo from "./components/Logo";
+
+export const metadata: Metadata = {
+  title: "Cup",
+  description: "The easiest way to manage your container updates",
+};
+
+const logo = (
+  <div className="flex items-center">
+    <Logo />
+    <h1 className="ml-2 font-bold">Cup</h1>
+  </div>
+);
+
+const navbar = (
+  <Navbar logo={logo} projectLink="https://github.com/sergi0g/cup" chatLink="https://discord.gg/jmh5ctzwNG">
+    <ThemeSwitch lite className="cursor-pointer" />
+  </Navbar>
+);
+
+const footer = <Footer> </Footer>;
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      dir="ltr"
+      suppressHydrationWarning
+      className={`${GeistSans.className} antialiased`}
+    >
+      <Head />
+      <body>
+        <Layout
+          navbar={navbar}
+          pageMap={await getPageMap()}
+          footer={footer}
+          docsRepositoryBase="https://github.com/sergi0g/cup"
+        >
+          <div>{children}</div>
+        </Layout>
+      </body>
+    </html>
+  );
+}

docs/src/app/page.tsx

@@ -0,0 +1,23 @@
+import { useMDXComponents } from "@/mdx-components";
+import { Heading, NextraMetadata } from "nextra";
+import Home from "./components/pages/home";
+
+/* eslint-disable-next-line */
+const Wrapper = useMDXComponents({}).wrapper;
+
+const toc: Heading[] = [];
+
+export const metadata: NextraMetadata = {
+  title: "Cup - The easiest way to manage your container updates",
+  description: "Simple, fast, efficient Docker image update checking",
+  filePath: "",
+};
+
+export default function Page() {
+  return (
+    // @ts-expect-error This component passes all extra props to the underlying component, but that possibility does not exist in the type declarations. A comment there indicates that passing extra props is intended functionality.
+    <Wrapper toc={toc} metadata={metadata} className={"x:mx-auto x:flex"}>
+      <Home />
+    </Wrapper>
+  );
+}