m/cup
1
0
mirror of https://github.com/sergi0g/cup.git synced 2025-11-16 09:03:46 -05:00
Many many many changes, honestly just read the release notes
This commit is contained in:
Sergio
2025-02-28 20:43:49 +02:00
committed by GitHub
parent b12acba745
commit 0f9c5d1466
141 changed files with 4527 additions and 5848 deletions

File diff suppressed because one or more lines are too long

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
</>
);
}

View File

@@ -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;
}
}