180 lines
9.7 KiB
TypeScript
180 lines
9.7 KiB
TypeScript
import type { Metadata } from "next";
|
||
import Link from "next/link";
|
||
import { ArrowUpRight, Box, Check, Code2, Puzzle, Terminal } from "lucide-react";
|
||
import Nav from "@/components/nav";
|
||
import Footer from "@/components/footer";
|
||
|
||
function GithubIcon({ className }: { className?: string }) {
|
||
return (
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden="true">
|
||
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 0 6 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
|
||
<path d="M9 18c-4.51 2-5-2-7-2" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
export const metadata: Metadata = {
|
||
title: "Decision Kit – Developer Suite",
|
||
description: "Open-Source-Tools von Entscheidomat: Repository, VS Code Extension, Chrome Extension, npm-Paket, Python SDK und GitHub Action.",
|
||
openGraph: {
|
||
title: "Decision Kit – Developer Suite | Entscheidomat",
|
||
description: "Zufalls-Entscheidungstools für VS Code, Chrome, Node.js, Python und GitHub Actions.",
|
||
url: "https://entscheidomat.com/developer",
|
||
},
|
||
};
|
||
|
||
type Asset = {
|
||
title: string;
|
||
eyebrow: string;
|
||
description: string;
|
||
icon: typeof Puzzle;
|
||
action?: string;
|
||
href?: string;
|
||
snippet?: string;
|
||
status: string;
|
||
};
|
||
|
||
const assets: Asset[] = [
|
||
{
|
||
title: "GitHub Repository",
|
||
eyebrow: "Open Source · MIT",
|
||
description: "Der vollständige Decision-Kit-Quellcode mit Releases, Issues und Contribution Guide – die zentrale Anlaufstelle für Entwickler.",
|
||
icon: Code2,
|
||
action: "Repository öffnen",
|
||
href: "https://github.com/knuthtimo-lab/decision-kit",
|
||
snippet: "git clone https://github.com/knuthtimo-lab/decision-kit.git",
|
||
status: "knuthtimo-lab/decision-kit",
|
||
},
|
||
{
|
||
title: "Decision Kit für VS Code",
|
||
eyebrow: "Extension · v1.0.0",
|
||
description: "Ziehe einen Gewinner aus markiertem Text, würfle mit Notation wie 2d6+3 und öffne das Glücksrad direkt in deiner IDE.",
|
||
icon: Puzzle,
|
||
action: "Im VS Code Store öffnen",
|
||
href: "https://marketplace.visualstudio.com/items?itemName=TimoKnuth.decisionkit-vscode",
|
||
status: "Visual Studio Marketplace",
|
||
},
|
||
{
|
||
title: "Decision Kit für Chrome",
|
||
eyebrow: "Browser-Erweiterung · Manifest V3",
|
||
description: "Random Picker, Glücksrad, Würfel, Münzwurf und praktische Kontextmenü-Kürzel für schnelle Entscheidungen im Browser.",
|
||
icon: Puzzle,
|
||
status: "Chrome Web Store – Veröffentlichung vorbereitet",
|
||
},
|
||
{
|
||
title: "TypeScript Library",
|
||
eyebrow: "npm · v1.0.0",
|
||
description: "Zufallsalgorithmen, Würfel-Parser, Glücksrad-Logik und React Hooks als wiederverwendbare Bausteine.",
|
||
icon: Box,
|
||
action: "npm-Paket ansehen",
|
||
href: "https://www.npmjs.com/package/decision-kit",
|
||
snippet: "npm install decision-kit",
|
||
status: "Node.js & React",
|
||
},
|
||
{
|
||
title: "Python SDK & CLI",
|
||
eyebrow: "PyPI · v1.0.0",
|
||
description: "Decision-Kit für Python-Skripte, Automatisierungen und die Kommandozeile.",
|
||
icon: Terminal,
|
||
action: "PyPI-Projekt ansehen",
|
||
href: "https://pypi.org/project/decision-kit/",
|
||
snippet: "pip install decision-kit",
|
||
status: "Python Package Index",
|
||
},
|
||
{
|
||
title: "GitHub Action",
|
||
eyebrow: "GitHub Marketplace",
|
||
description: "Nutze Auslosungen, Teamaufteilungen und Zufallsentscheidungen direkt in deinen CI/CD-Workflows.",
|
||
icon: Code2,
|
||
action: "Action ansehen",
|
||
href: "https://github.com/marketplace/actions/decision-kit-action",
|
||
snippet: "uses: knuthtimo-lab/decision-kit@v1.0.0",
|
||
status: "Für GitHub Actions",
|
||
},
|
||
];
|
||
|
||
export default function DeveloperPage() {
|
||
const jsonLd = {
|
||
"@context": "https://schema.org",
|
||
"@type": "SoftwareApplication",
|
||
name: "Decision Kit",
|
||
operatingSystem: "All",
|
||
applicationCategory: "DeveloperApplication",
|
||
author: { "@type": "Organization", name: "Entscheidomat" },
|
||
codeRepository: "https://github.com/knuthtimo-lab/decision-kit",
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c") }} />
|
||
<Nav />
|
||
<main className="flex-1 bg-paper pb-20 pt-28 sm:pt-32">
|
||
<div className="mx-auto w-full max-w-6xl px-5 sm:px-8">
|
||
<header className="max-w-3xl">
|
||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#0d7a57]">Entscheidomat für Entwickler</p>
|
||
<h1 className="mt-4 text-balance font-display text-5xl font-semibold leading-[0.9] tracking-[-0.045em] text-ink sm:text-6xl">Decision Kit, dort wo du arbeitest.</h1>
|
||
<p className="mt-6 max-w-2xl text-base leading-7 text-ink-soft sm:text-lg">Eine offene Sammlung von Tools für faire Zufallsentscheidungen – im Editor, im Browser, im Terminal und im Workflow.</p>
|
||
</header>
|
||
|
||
<section className="relative mt-12 overflow-hidden rounded-[2rem] bg-[#0b241b] px-6 py-7 text-white shadow-[0_22px_60px_rgb(13_122_87/0.22)] sm:px-10 sm:py-10">
|
||
<div className="pointer-events-none absolute -right-24 -top-36 h-80 w-80 rounded-full bg-[#38b98c]/25 blur-3xl" />
|
||
<div className="relative grid gap-8 lg:grid-cols-[1.25fr_0.75fr] lg:items-end">
|
||
<div>
|
||
<div className="inline-flex items-center gap-2 text-sm font-semibold text-emerald-200"><GithubIcon className="h-4 w-4" />Open Source · MIT-Lizenz</div>
|
||
<h2 className="mt-5 max-w-xl text-3xl font-semibold tracking-tight sm:text-4xl">Der gesamte Code lebt auf GitHub.</h2>
|
||
<p className="mt-4 max-w-xl text-sm leading-6 text-emerald-50/75 sm:text-base">Quellcode, Issues, Releases und Contribution Guide findest du im offiziellen Decision-Kit-Repository.</p>
|
||
<a href="https://github.com/knuthtimo-lab/decision-kit" target="_blank" rel="noopener noreferrer" className="mt-7 inline-flex items-center gap-2 rounded-full bg-white px-5 py-3 text-sm font-semibold text-[#0b241b] transition duration-200 hover:-translate-y-0.5 hover:bg-emerald-50 active:translate-y-0">
|
||
GitHub-Repository öffnen <ArrowUpRight className="h-4 w-4" />
|
||
</a>
|
||
</div>
|
||
<div className="rounded-2xl border border-white/15 bg-black/20 p-5 font-mono text-xs leading-6 text-emerald-50 shadow-inner">
|
||
<p className="text-emerald-200/70"># Starte lokal</p>
|
||
<p className="mt-2 break-all">git clone https://github.com/knuthtimo-lab/decision-kit.git</p>
|
||
<div className="my-4 h-px bg-white/10" />
|
||
<p className="text-emerald-200/70"># Oder als Paket</p>
|
||
<p className="mt-2">npm install decision-kit</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="mt-16" aria-labelledby="integrations-heading">
|
||
<div className="flex flex-col justify-between gap-4 border-b border-line pb-5 sm:flex-row sm:items-end">
|
||
<div>
|
||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#0d7a57]">Integrationen</p>
|
||
<h2 id="integrations-heading" className="mt-2 text-2xl font-semibold tracking-tight text-ink sm:text-3xl">Installieren, einbinden, loslegen.</h2>
|
||
</div>
|
||
<p className="max-w-sm text-sm leading-6 text-ink-soft">Jede Integration ist unabhängig nutzbar und verweist direkt auf ihren offiziellen Kanal.</p>
|
||
</div>
|
||
|
||
<div className="mt-6 grid gap-4 md:grid-cols-2">
|
||
{assets.map((asset) => {
|
||
const Icon = asset.icon;
|
||
return (
|
||
<article key={asset.title} className="group flex min-h-64 flex-col rounded-3xl border border-line bg-surface p-6 transition duration-200 hover:-translate-y-1 hover:border-[#0d7a57]/40 hover:shadow-lift">
|
||
<div className="flex items-start justify-between gap-4">
|
||
<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-[#e6f7f0] text-[#0d7a57]"><Icon className="h-5 w-5" /></div>
|
||
<p className="pt-1 text-right text-[11px] font-semibold uppercase tracking-[0.12em] text-[#0d7a57]">{asset.eyebrow}</p>
|
||
</div>
|
||
<h3 className="mt-6 text-xl font-semibold tracking-tight text-ink">{asset.title}</h3>
|
||
<p className="mt-2 max-w-md text-sm leading-6 text-ink-soft">{asset.description}</p>
|
||
{asset.snippet && <code className="mt-5 block overflow-x-auto rounded-xl bg-[#111412] px-3.5 py-3 font-mono text-xs text-emerald-100">{asset.snippet}</code>}
|
||
<div className="mt-auto flex items-center justify-between gap-4 pt-6">
|
||
<span className="inline-flex items-center gap-1.5 text-xs font-medium text-ink-soft"><Check className="h-3.5 w-3.5 text-[#0d7a57]" />{asset.status}</span>
|
||
{asset.href && asset.action ? (
|
||
<a href={asset.href} target="_blank" rel="noopener noreferrer" className="inline-flex shrink-0 items-center gap-1.5 text-sm font-semibold text-[#0d7a57] transition hover:text-[#095c41] hover:underline">{asset.action} <ArrowUpRight className="h-4 w-4" /></a>
|
||
) : <span className="text-xs font-semibold text-[#0d7a57]">Bald verfügbar</span>}
|
||
</div>
|
||
</article>
|
||
);
|
||
})}
|
||
</div>
|
||
</section>
|
||
|
||
<div className="mt-14 border-t border-line pt-8 text-sm text-ink-soft">Zurück zu den <Link href="/" className="font-semibold text-[#0d7a57] hover:underline">Entscheidungstools</Link>.</div>
|
||
</div>
|
||
</main>
|
||
<Footer />
|
||
</>
|
||
);
|
||
}
|