Upgrade docs

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: { 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/assets/GitHubIcon.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export function GitHubIcon({ className }: { className?: string | undefined }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      fill="currentColor"
+      viewBox="3 3 18 18"
+      className={className}
+    >
+      <path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path>
+    </svg>
+  );
+}

docs/src/app/components/Button.tsx

@@ -0,0 +1,23 @@
+import Link from "next/link";
+import { ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
+interface ButtonProps {
+  href: string;
+  className?: string;
+  children: ReactNode;
+}
+
+export default function Button({ href, className, children }: ButtonProps) {
+  return (
+    <Link
+      href={href}
+      className={twMerge(
+        "flex items-center justify-center rounded-md border border-transparent px-8 py-3 text-base font-medium no-underline transition-colors duration-200 md:text-lg md:leading-6",
+        className,
+      )}
+    >
+      {children}
+    </Link>
+  );
+}

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>
+      <Icon className="text-black size-7 dark:text-white inline mr-2" />
+      <span className="align-middle text-2xl font-bold text-black dark:text-white">
+        {name}
+      </span>
+      <p className="text-2xl font-semibold text-neutral-500 dark:text-neutral-500">
+        {description}
+      </p>
+    </div>
+  );
+}

docs/src/app/components/CopyableCode.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { IconCopy, IconCopyCheck } from "@tabler/icons-react";
+import { useState } from "react";
+
+export default function CopyableCode({ children }: { children: string }) {
+  const [success, setSuccess] = useState(false);
+  const handleClick = () => {
+    navigator.clipboard.writeText(children);
+    setSuccess(true);
+    setTimeout(() => setSuccess(false), 3000);
+  };
+  return (
+    <div className="relative rounded-md xl:w-auto">
+      <button
+        className="hover:bg-black/10 dark:hover:bg-black/60 flex w-full items-center justify-center gap-4 rounded-md border border-black/10 bg-black/5 px-8 py-3 font-mono text-sm font-medium text-black/70 transition-colors duration-200 md:px-10 md:py-3 md:text-base md:leading-6 dark:border-white/15 dark:bg-black dark:text-gray-300 backdrop-blur-md"
+        onClick={handleClick}
+      >
+        {children}
+        {success ? (
+          <IconCopyCheck className="stroke-black/40 dark:stroke-white/50" />
+        ) : (
+          <IconCopy className="stroke-black/40 dark:stroke-white/50" />
+        )}
+      </button>
+    </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,32 @@
+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 -z-10 h-full w-full stroke-neutral-200 dark:stroke-neutral-600/30"
+    >
+      <defs>
+        <pattern
+          id={id}
+          width={SIZE}
+          height={SIZE}
+          patternUnits="userSpaceOnUse"
+          x={-1}
+          y={-1}
+        >
+          <path
+            d={`M.5 ${SIZE}V.5H${SIZE}`}
+            fill="none"
+            strokeDasharray={"4 2"}
+          />
+        </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/Section.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+import { GradientText } from "./GradientText";
+
+export function Section({
+  title,
+  className,
+  children,
+}: {
+  title: string;
+  className: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="border-t border-t-neutral-300 bg-neutral-50 py-32 dark:border-t-neutral-600/30 dark:bg-neutral-950">
+      <div className="mx-auto w-full max-w-screen-xl">
+        <GradientText
+          text={title}
+          className="mx-auto mb-20 w-fit text-center text-4xl font-bold tracking-tighter"
+          innerClassName={className}
+          blur={12}
+        />
+        <div className="m-2 grid w-full auto-cols-fr gap-20 lg:grid-cols-3">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

docs/src/app/components/Thing.tsx

@@ -0,0 +1,26 @@
+import React, { ReactNode, createElement } from "react";
+
+export function Thing({
+  title,
+  icon,
+  content,
+}: {
+  title: string;
+  icon: ReactNode;
+  content: string;
+}) {
+  const iconElement = createElement(icon, {
+    className: "text-black size-7 dark:text-white inline mr-2",
+  });
+  return (
+    <div>
+      {iconElement}
+      <span className="align-middle text-2xl font-bold text-black dark:text-white">
+        {title}
+      </span>
+      <p className="text-2xl font-semibold text-neutral-500 dark:text-neutral-500">
+        {content}
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,136 @@
+import React from "react";
+import "./styles.css";
+
+import CopyableCode from "../CopyableCode";
+import { Browser } from "../Browser";
+import { Card } from "../Card";
+import {
+  IconAdjustments,
+  IconArrowRight,
+  IconBolt,
+  IconBraces,
+  IconDevices,
+  IconFeather,
+  IconLockCheck,
+} from "@tabler/icons-react";
+import { GitHubIcon } from "nextra/icons";
+import { GridPattern } from "../GridPattern";
+import { GradientText } from "../GradientText";
+import { Section } from "../Section";
+import { Steps } from "nextra/components";
+import Link from "next/link";
+
+export default async function Home() {
+  return (
+    <>
+      <div className="relative">
+        <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-gray-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 inteface, 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 text-nowrap border border-neutral-400 transition-colors duration-200 ease-in-out hover:border-neutral-600 focus:border-neutral-600 dark:border-neutral-600 hover:dark:border-neutral-400 hover:dark:shadow-sm hover:dark:shadow-neutral-600 focus:dark:border-neutral-400"
+              >
+                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>
+      <Section
+        title="Powerful at its core."
+        className="bg-gradient-to-r from-red-500 to-amber-500"
+      >
+        <Card
+          name="100% Safe Code"
+          icon={IconLockCheck}
+          description="Built with safe Rust and Typescript to ensure security and reliability."
+        />
+        <Card
+          name="Lightning Fast Performance"
+          icon={IconBolt}
+          description="Heavily optimized to squeeze out every last drop of performance. Each release is extensively benchmarked and profiled so that you'll never have to stare at a loading spinner for long."
+        />
+        <Card
+          name="Lightweight"
+          icon={IconFeather}
+          description="No runtimes or libraries are needed. All you need is the 5.1 MB static binary that works out of the box on any system."
+        />
+      </Section>
+      <Section
+        title="Efficient, yet flexible."
+        className="bg-gradient-to-r from-blue-500 to-indigo-500"
+      >
+        <Card
+          name="JSON output"
+          description="Connect Cup to your favorite intergrations with JSON output for the CLI and an API for the server. Now go make that cool dashboard you've been dreaming of!"
+          icon={IconBraces}
+        />
+        <Card
+          name="Both CLI and web interface"
+          description="Whether you prefer the command line, or the web, Cup runs wherever you choose."
+          icon={IconDevices}
+        />
+        <Card
+          name="Configurable"
+          description="The simple configuration file provides you with all the tools you need to specify a custom Docker socket, manage registry connection options, choose a theme for the web interface and more."
+          icon={IconAdjustments}
+        />
+      </Section>
+      <div className="relative py-24 border-t border-t-neutral-300 dark:border-t-neutral-600/30 text-black dark:text-white">
+        <GridPattern />
+        <div className="mx-auto flex w-full max-w-screen-xl flex-col items-center">
+          <p className="mb-8 text-center text-3xl font-bold">
+            Still not convinced? Try it out now!
+          </p>
+          <div>
+            <Steps>
+              <h3 className="mb-2">Open a terminal and run</h3>
+              <CopyableCode>
+                docker run --rm -t -v /var/run/docker.sock:/var/run/docker.sock
+                -p 8000:8000 ghcr.io/sergi0g/cup serve
+              </CopyableCode>
+              <h3 className="mb-2">Open the dashboard in your browser</h3>
+              <p>
+                Visit{" "}
+                <a href="http://localhost:8000" className="underline">
+                  http://localhost:8000
+                </a>{" "}
+                in your browser to try it out!
+              </p>
+            </Steps>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,36 @@
+/* Override nextra styles restricting width */
+
+:root {
+  --nextra-content-width: unset !important;
+}
+
+header.nextra-navbar {
+  --nextra-content-width: 90rem;
+}
+
+article {
+  padding-inline: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+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">
+    <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.mdx

@@ -0,0 +1,8 @@
+---
+title: Cup - The easiest way to manage your container updates
+description: Simple, fast, efficient Docker image update checking
+---
+
+import Home from "@/app/components/pages/home";
+
+<Home />