docs: list harness-sync and redesign the tap site

Replace the Tailwind CDN page with a static stylesheet. Make the
generator emit the new markup and fill the Brewfile block from the
casks. Map cask names to repository names for projects whose names
differ.
This commit is contained in:
2026-10-03 23:12:32 +01:00
parent f24e100226
commit 46107a9f88
3 changed files with 273 additions and 469 deletions
+215 -355
View File
@@ -1,420 +1,280 @@
<!doctype html>
<html lang="en" class="scroll-smooth">
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Homebrew Tap - lukaszraczylo</title>
<meta name="color-scheme" content="light dark" />
<title>Homebrew tap - lukaszraczylo</title>
<meta
name="description"
content="Homebrew tap for macOS and Linux tools by Lukasz Raczylo. Install developer tools easily with brew."
/>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class'
}
</script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
content="Homebrew tap with command-line tools by Lukasz Raczylo: kportal, lolcathost, semver-generator and harness-sync."
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"
rel="stylesheet"
/>
<style>
body { font-family: "Inter", sans-serif; }
code, pre { font-family: "JetBrains Mono", monospace; }
.theme-transition {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
:root {
--bg: #ffffff;
--fg: #111418;
--muted: #5b6470;
--line: #e3e6ea;
--code-bg: #f5f6f8;
--accent: #b45309;
--accent-fg: #ffffff;
--sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
@media (prefers-color-scheme: dark) {
:root {
--bg: #0e1013;
--fg: #e8eaed;
--muted: #98a1ad;
--line: #262b32;
--code-bg: #171a1f;
--accent: #f59e0b;
--accent-fg: #0e1013;
}
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font: 16px/1.6 var(--sans);
-webkit-font-smoothing: antialiased;
}
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
.animate-float { animation: float 3s ease-in-out infinite; }
.glass {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
code, pre { font-family: var(--mono); font-size: 0.875rem; }
.wrap { max-width: 56rem; margin: 0 auto; padding: 0 1.25rem; }
header.top { border-bottom: 1px solid var(--line); }
header.top .wrap {
display: flex;
justify-content: space-between;
align-items: center;
height: 3.5rem;
}
.dark .glass {
background: rgba(17, 24, 39, 0.7);
border: 1px solid rgba(255, 255, 255, 0.1);
.brand { font-family: var(--mono); font-weight: 500; text-decoration: none; }
.brand span { color: var(--accent); }
nav.links { display: flex; gap: 1.5rem; font-size: 0.9375rem; color: var(--muted); }
nav.links a { text-decoration: none; }
nav.links a:hover { color: var(--fg); }
.intro { padding: 4rem 0 3rem; }
h1 {
margin: 0 0 1rem;
font-size: clamp(1.875rem, 5vw, 2.75rem);
line-height: 1.15;
font-weight: 600;
letter-spacing: -0.02em;
}
.gradient-text {
background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.dark .gradient-text {
background: linear-gradient(135deg, #34d399 0%, #60a5fa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.shadow-modern { box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1); }
.dark .shadow-modern { box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.4); }
html { scroll-behavior: smooth; }
.code-block {
.intro p { margin: 0 0 1.5rem; max-width: 38rem; color: var(--muted); font-size: 1.125rem; }
section { padding: 2.5rem 0; border-top: 1px solid var(--line); }
h2 { margin: 0 0 1.5rem; font-size: 1.125rem; font-weight: 600; }
h2 small { margin-left: 0.5rem; color: var(--muted); font-weight: 400; font-size: 0.875rem; }
.cmd {
position: relative;
background: var(--code-bg);
border: 1px solid var(--line);
border-radius: 6px;
}
.cmd pre { margin: 0; padding: 0.75rem 4.5rem 0.75rem 1rem; overflow-x: auto; }
.copy-btn {
position: absolute;
top: 0.5rem;
top: 50%;
right: 0.5rem;
padding: 0.25rem 0.5rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.375rem;
color: #9ca3af;
font-size: 0.75rem;
transform: translateY(-50%);
padding: 0.25rem 0.625rem;
background: var(--bg);
color: var(--muted);
border: 1px solid var(--line);
border-radius: 4px;
font: 500 0.75rem var(--sans);
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 0.25rem;
}
.copy-btn:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.copy-btn.copied {
background: rgba(16, 185, 129, 0.3);
border-color: rgba(16, 185, 129, 0.5);
color: #34d399;
.copy-btn:hover { color: var(--fg); border-color: var(--muted); }
.copy-btn.copied { color: var(--accent); border-color: var(--accent); }
.projects { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.project { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.project-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.project h3 { margin: 0; font-family: var(--mono); font-size: 1.0625rem; font-weight: 500; }
.meta { color: var(--muted); font-size: 0.8125rem; font-family: var(--mono); }
.project-links { margin-left: auto; display: flex; gap: 1rem; font-size: 0.875rem; color: var(--muted); }
.project-links a:hover { color: var(--fg); }
.project p { margin: 0.375rem 0 1rem; color: var(--muted); }
.note { margin: 0 0 1rem; color: var(--muted); }
.note + .cmd { margin-bottom: 1.5rem; }
footer { border-top: 1px solid var(--line); padding: 1.5rem 0 3rem; color: var(--muted); font-size: 0.875rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; }
footer a { text-decoration: none; }
footer a:hover { color: var(--fg); }
@media (max-width: 36rem) {
.intro { padding: 2.5rem 0 2rem; }
.project-links { margin-left: 0; width: 100%; }
}
</style>
<script>
if (localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
</script>
</head>
<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 theme-transition">
<!-- Navigation -->
<nav class="fixed w-full glass shadow-modern z-50 theme-transition">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="flex justify-between h-16 items-center">
<a href="#" class="flex items-center hover:opacity-80 transition-opacity duration-300 gap-2">
<i class="fas fa-beer text-2xl text-amber-500"></i>
<span class="text-2xl font-bold gradient-text">brew-taps</span>
</a>
<div class="hidden md:flex space-x-6">
<a href="#casks" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 font-medium">Available Casks</a>
<a href="#installation" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 font-medium">Installation</a>
</div>
<div class="flex items-center space-x-4">
<button id="theme-toggle" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 p-2 min-w-[44px] min-h-[44px] flex items-center justify-center" aria-label="Toggle theme">
<i class="fas fa-moon dark:hidden text-xl"></i>
<i class="fas fa-sun hidden dark:inline text-xl"></i>
</button>
<a href="https://github.com/lukaszraczylo/homebrew-taps" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 p-2 min-w-[44px] min-h-[44px] flex items-center justify-center" aria-label="View on GitHub">
<i class="fab fa-github text-xl"></i>
</a>
<button id="mobile-menu-toggle" class="md:hidden text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 p-2 min-w-[44px] min-h-[44px] flex items-center justify-center" aria-label="Toggle menu">
<i class="fas fa-bars text-xl" id="menu-open-icon"></i>
<i class="fas fa-times text-xl hidden" id="menu-close-icon"></i>
</button>
</div>
<body>
<header class="top">
<div class="wrap">
<a class="brand" href="#">brew<span>/</span>taps</a>
<nav class="links" aria-label="Primary">
<a href="#projects">Projects</a>
<a href="#install">Install</a>
<a href="https://github.com/lukaszraczylo/homebrew-taps">GitHub</a>
</nav>
</div>
</header>
<main class="wrap">
<div class="intro">
<h1>Homebrew tap for the command-line tools at raczylo.com</h1>
<p>
Prebuilt binaries for macOS and Linux, on arm64 and amd64. Tap once, then install any project
below as a cask.
</p>
<div class="cmd">
<pre><code>brew tap lukaszraczylo/taps</code></pre>
<button class="copy-btn" type="button" onclick="copyCode(this)">Copy</button>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden border-t border-gray-200 dark:border-gray-700">
<div class="px-4 py-3 space-y-1 bg-white dark:bg-gray-800">
<a href="#casks" class="block px-3 py-3 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 rounded font-medium">Available Casks</a>
<a href="#installation" class="block px-3 py-3 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 rounded font-medium">Installation</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="relative pt-24 sm:pt-32 pb-12 sm:pb-20 overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-emerald-50 via-blue-50 to-purple-50 dark:from-gray-900 dark:via-emerald-900/20 dark:to-blue-900/20 theme-transition"></div>
<div class="absolute top-0 -left-4 w-72 h-72 bg-emerald-300 dark:bg-emerald-500 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-20 animate-float"></div>
<div class="absolute top-0 -right-4 w-72 h-72 bg-blue-300 dark:bg-blue-500 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-20 animate-float" style="animation-delay: 1s;"></div>
<div class="absolute -bottom-8 left-20 w-72 h-72 bg-purple-300 dark:bg-purple-500 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-20 animate-float" style="animation-delay: 2s;"></div>
<div class="relative max-w-6xl mx-auto px-4 sm:px-6">
<div class="text-center">
<div class="mb-8 sm:mb-10 flex justify-center animate-fade-in-up">
<i class="fas fa-beer text-8xl sm:text-9xl text-amber-500 animate-float"></i>
</div>
<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-gray-100 mb-4 sm:mb-6 leading-tight animate-fade-in-up" style="animation-delay: 0.1s;">
Homebrew Tap<br /><span class="gradient-text">at raczylo.com</span>
</h1>
<p class="text-base sm:text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8 sm:mb-10 max-w-2xl mx-auto leading-relaxed px-4 animate-fade-in-up" style="animation-delay: 0.2s;">
Developer tools for macOS and Linux. Install powerful CLI utilities with a single command.
</p>
<div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center mb-8 sm:mb-12 px-4 animate-fade-in-up" style="animation-delay: 0.3s;">
<a href="#installation" class="group relative bg-gradient-to-r from-emerald-500 to-blue-600 hover:from-emerald-600 hover:to-blue-700 text-white px-8 py-3 rounded-lg font-medium transition-all duration-300 min-h-[48px] flex items-center justify-center shadow-lg hover:shadow-xl hover:scale-105">
<span class="relative z-10">Get Started</span>
</a>
<a href="https://github.com/lukaszraczylo/homebrew-taps" class="group glass hover:shadow-lg text-gray-900 dark:text-gray-100 px-8 py-3 rounded-lg font-medium transition-all duration-300 min-h-[48px] flex items-center justify-center hover:scale-105">
<i class="fab fa-github mr-2"></i>View on GitHub
</a>
</div>
</div>
</div>
</section>
<!-- Available Casks Section -->
<section id="casks" class="py-12 sm:py-16 md:py-20 bg-white dark:bg-gray-900 theme-transition">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="text-center mb-8 sm:mb-12">
<h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Available Casks</h2>
<p class="text-base sm:text-lg text-gray-600 dark:text-gray-300 px-4">Install any of these tools with Homebrew</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6" id="casks-container">
<section id="projects">
<h2>Projects <small>installed with <code>brew install --cask</code></small></h2>
<ul class="projects">
<!-- CASKS_START -->
<!-- harness-sync -->
<div class="glass p-6 rounded-xl group hover:shadow-lg transition-all duration-300">
<div class="flex items-start gap-4 mb-4">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-gray-500 to-gray-600 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
<i class="fas fa-cube text-white text-lg"></i>
</div>
<div class="flex-1">
<h3 class="font-bold text-gray-900 dark:text-gray-100 text-lg">harness-sync</h3>
<span class="text-xs text-gray-500 dark:text-gray-400">v0.31.5</span>
</div>
<li class="project">
<div class="project-head">
<h3>harness-sync</h3>
<span class="meta">v0.31.5 &middot; LLM</span>
<span class="project-links">
<a href="https://github.com/lukaszraczylo/harness-sync">GitHub</a>
</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Sync skills, agents, MCP, and LLM endpoints across multiple LLM harnesses</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-2 py-1 bg-gray-100 dark:bg-gray-900/30 text-gray-700 dark:text-gray-300 rounded text-xs">CLI</span>
<p>Sync skills, agents, MCP, and LLM endpoints across multiple LLM harnesses</p>
<div class="cmd">
<pre><code>brew install --cask lukaszraczylo/taps/harness-sync</code></pre>
<button class="copy-btn" type="button" onclick="copyCode(this)">Copy</button>
</div>
<div class="flex gap-2">
<a href="https://github.com/lukaszraczylo/harness-sync" target="_blank" class="flex-1 text-center px-3 py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg text-sm font-medium transition-colors">
<i class="fab fa-github mr-1"></i>GitHub
</a>
</div>
<div class="code-block mt-4">
<pre class="bg-gray-900 text-gray-100 p-3 pr-16 rounded-lg text-xs overflow-x-auto"><code>brew install --cask lukaszraczylo/taps/harness-sync</code></pre>
<button class="copy-btn" onclick="copyCode(this)" title="Copy to clipboard"><i class="fas fa-copy"></i></button>
</div>
</div>
</li>
<!-- kportal -->
<div class="glass p-6 rounded-xl group hover:shadow-lg transition-all duration-300">
<div class="flex items-start gap-4 mb-4">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
<i class="fas fa-ship text-white text-lg"></i>
</div>
<div class="flex-1">
<h3 class="font-bold text-gray-900 dark:text-gray-100 text-lg">kportal</h3>
<span class="text-xs text-gray-500 dark:text-gray-400">v0.13.2</span>
</div>
<li class="project">
<div class="project-head">
<h3>kportal</h3>
<span class="meta">v0.13.2 &middot; Kubernetes</span>
<span class="project-links">
<a href="https://kportal.raczylo.com">Docs</a>
<a href="https://github.com/lukaszraczylo/kportal">GitHub</a>
</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Modern Kubernetes port-forward manager with interactive TUI</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded text-xs">Kubernetes</span>
<span class="px-2 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded text-xs">TUI</span>
<p>Modern Kubernetes port-forward manager with interactive TUI</p>
<div class="cmd">
<pre><code>brew install --cask lukaszraczylo/taps/kportal</code></pre>
<button class="copy-btn" type="button" onclick="copyCode(this)">Copy</button>
</div>
<div class="flex gap-2">
<a href="https://kportal.raczylo.com" target="_blank" class="flex-1 text-center px-3 py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg text-sm font-medium transition-colors">
<i class="fas fa-book mr-1"></i>Docs
</a>
<a href="https://github.com/lukaszraczylo/kportal" target="_blank" class="flex-1 text-center px-3 py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg text-sm font-medium transition-colors">
<i class="fab fa-github mr-1"></i>GitHub
</a>
</div>
<div class="code-block mt-4">
<pre class="bg-gray-900 text-gray-100 p-3 pr-16 rounded-lg text-xs overflow-x-auto"><code>brew install --cask lukaszraczylo/taps/kportal</code></pre>
<button class="copy-btn" onclick="copyCode(this)" title="Copy to clipboard"><i class="fas fa-copy"></i></button>
</div>
</div>
</li>
<!-- lolcathost -->
<div class="glass p-6 rounded-xl group hover:shadow-lg transition-all duration-300">
<div class="flex items-start gap-4 mb-4">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
<i class="fas fa-cat text-white text-lg"></i>
</div>
<div class="flex-1">
<h3 class="font-bold text-gray-900 dark:text-gray-100 text-lg">lolcathost</h3>
<span class="text-xs text-gray-500 dark:text-gray-400">v0.2.21</span>
</div>
<li class="project">
<div class="project-head">
<h3>lolcathost</h3>
<span class="meta">v0.2.21 &middot; Hosts</span>
<span class="project-links">
<a href="https://lolcathost.raczylo.com">Docs</a>
<a href="https://github.com/lukaszraczylo/lolcathost">GitHub</a>
</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Dynamic host management tool with TUI</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-2 py-1 bg-pink-100 dark:bg-pink-900/30 text-pink-700 dark:text-pink-300 rounded text-xs">Hosts</span>
<span class="px-2 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded text-xs">TUI</span>
<p>Dynamic host management tool with TUI</p>
<div class="cmd">
<pre><code>brew install --cask lukaszraczylo/taps/lolcathost</code></pre>
<button class="copy-btn" type="button" onclick="copyCode(this)">Copy</button>
</div>
<div class="flex gap-2">
<a href="https://lolcathost.raczylo.com" target="_blank" class="flex-1 text-center px-3 py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg text-sm font-medium transition-colors">
<i class="fas fa-book mr-1"></i>Docs
</a>
<a href="https://github.com/lukaszraczylo/lolcathost" target="_blank" class="flex-1 text-center px-3 py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg text-sm font-medium transition-colors">
<i class="fab fa-github mr-1"></i>GitHub
</a>
</div>
<div class="code-block mt-4">
<pre class="bg-gray-900 text-gray-100 p-3 pr-16 rounded-lg text-xs overflow-x-auto"><code>brew install --cask lukaszraczylo/taps/lolcathost</code></pre>
<button class="copy-btn" onclick="copyCode(this)" title="Copy to clipboard"><i class="fas fa-copy"></i></button>
</div>
</div>
</li>
<!-- semver-generator -->
<div class="glass p-6 rounded-xl group hover:shadow-lg transition-all duration-300">
<div class="flex items-start gap-4 mb-4">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
<i class="fas fa-code-branch text-white text-lg"></i>
</div>
<div class="flex-1">
<h3 class="font-bold text-gray-900 dark:text-gray-100 text-lg">semver-generator</h3>
<span class="text-xs text-gray-500 dark:text-gray-400">v1.18.11</span>
</div>
<li class="project">
<div class="project-head">
<h3>semver-generator</h3>
<span class="meta">v1.18.11 &middot; Git</span>
<span class="project-links">
<a href="https://github.com/lukaszraczylo/semver-generator">GitHub</a>
</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Automatic semantic version generator based on git commit messages</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-2 py-1 bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 rounded text-xs">Git</span>
<span class="px-2 py-1 bg-teal-100 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300 rounded text-xs">Versioning</span>
<p>Automatic semantic version generator based on git commit messages</p>
<div class="cmd">
<pre><code>brew install --cask lukaszraczylo/taps/semver-generator</code></pre>
<button class="copy-btn" type="button" onclick="copyCode(this)">Copy</button>
</div>
<div class="flex gap-2">
<a href="https://github.com/lukaszraczylo/semver-generator" target="_blank" class="flex-1 text-center px-3 py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg text-sm font-medium transition-colors">
<i class="fab fa-github mr-1"></i>GitHub
</a>
</div>
<div class="code-block mt-4">
<pre class="bg-gray-900 text-gray-100 p-3 pr-16 rounded-lg text-xs overflow-x-auto"><code>brew install --cask lukaszraczylo/taps/semver-generator</code></pre>
<button class="copy-btn" onclick="copyCode(this)" title="Copy to clipboard"><i class="fas fa-copy"></i></button>
</div>
</div>
</li>
<!-- CASKS_END -->
</div>
</div>
</section>
</ul>
</section>
<!-- Installation Section -->
<section id="installation" class="py-12 sm:py-16 md:py-20 bg-gray-50 dark:bg-gray-800 theme-transition">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="text-center mb-8 sm:mb-12">
<h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Installation</h2>
<p class="text-base sm:text-lg text-gray-600 dark:text-gray-300 px-4">Get started in seconds</p>
<section id="install">
<h2>Install</h2>
<p class="note">Install a project by name. Homebrew taps the repository on first use.</p>
<div class="cmd">
<pre><code>brew install --cask lukaszraczylo/taps/&lt;name&gt;</code></pre>
<button class="copy-btn" type="button" onclick="copyCode(this)">Copy</button>
</div>
<div class="max-w-3xl mx-auto space-y-6">
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3 flex items-center">
<i class="fas fa-plus-circle mr-2 text-emerald-500"></i>
Add the Tap
</h3>
<div class="code-block">
<pre class="bg-gray-900 text-gray-100 p-4 pr-20 rounded-lg overflow-x-auto"><code>brew tap lukaszraczylo/taps</code></pre>
<button class="copy-btn" onclick="copyCode(this)" title="Copy to clipboard"><i class="fas fa-copy"></i></button>
</div>
</div>
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3 flex items-center">
<i class="fas fa-download mr-2 text-blue-500"></i>
Install a Cask
</h3>
<div class="code-block">
<pre class="bg-gray-900 text-gray-100 p-4 pr-20 rounded-lg overflow-x-auto"><code>brew install --cask lukaszraczylo/taps/&lt;cask-name&gt;</code></pre>
<button class="copy-btn" onclick="copyCode(this)" title="Copy to clipboard"><i class="fas fa-copy"></i></button>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-3">Or install directly without tapping first:</p>
<div class="code-block mt-2">
<pre class="bg-gray-900 text-gray-100 p-4 pr-20 rounded-lg overflow-x-auto"><code>brew install --cask lukaszraczylo/taps/kportal</code></pre>
<button class="copy-btn" onclick="copyCode(this)" title="Copy to clipboard"><i class="fas fa-copy"></i></button>
</div>
</div>
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3 flex items-center">
<i class="fas fa-file-code mr-2 text-purple-500"></i>
Using Brewfile
</h3>
<p class="text-gray-600 dark:text-gray-400 mb-3">Add to your Brewfile:</p>
<div class="code-block">
<pre class="bg-gray-900 text-gray-100 p-4 pr-20 rounded-lg overflow-x-auto"><code>tap "lukaszraczylo/taps"
<p class="note">Or declare the tap in a Brewfile:</p>
<div class="cmd">
<pre><code>tap "lukaszraczylo/taps"
<!-- BREWFILE_START -->
cask "harness-sync"
cask "kportal"
cask "lolcathost"
cask "semver-generator"</code></pre>
<button class="copy-btn" onclick="copyCode(this)" title="Copy to clipboard"><i class="fas fa-copy"></i></button>
</div>
</div>
cask "semver-generator"
<!-- BREWFILE_END --></code></pre>
<button class="copy-btn" type="button" onclick="copyCode(this)">Copy</button>
</div>
</div>
</section>
</section>
</main>
<!-- Footer -->
<footer class="py-8 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 theme-transition">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="flex flex-col md:flex-row justify-between items-center gap-4">
<div class="flex items-center gap-2">
<i class="fas fa-beer text-2xl text-amber-500"></i>
<span class="text-xl font-bold gradient-text">brew-taps</span>
</div>
<div class="flex items-center space-x-6">
<a href="https://github.com/lukaszraczylo/homebrew-taps" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100">
<i class="fab fa-github text-xl"></i>
</a>
<a href="https://github.com/lukaszraczylo/homebrew-taps/issues" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 text-sm">Issues</a>
</div>
<p class="text-gray-500 dark:text-gray-400 text-sm">MIT License</p>
</div>
<footer>
<div class="wrap">
<span>MIT License</span>
<span>
<a href="https://github.com/lukaszraczylo/homebrew-taps">Source</a> &nbsp;
<a href="https://github.com/lukaszraczylo/homebrew-taps/issues">Issues</a> &nbsp;
<a href="https://docs.brew.sh">Homebrew docs</a>
</span>
</div>
</footer>
<script>
// Copy code to clipboard
function copyCode(button) {
const codeBlock = button.parentElement.querySelector('code');
const text = codeBlock.textContent;
navigator.clipboard.writeText(text).then(() => {
button.classList.add('copied');
button.innerHTML = '<i class="fas fa-check"></i>';
setTimeout(() => {
button.classList.remove('copied');
button.innerHTML = '<i class="fas fa-copy"></i>';
}, 2000);
}).catch(err => {
console.error('Failed to copy:', err);
});
var text = button.parentElement.querySelector("code").textContent;
navigator.clipboard.writeText(text).then(
function () {
button.classList.add("copied");
button.textContent = "Copied";
setTimeout(function () {
button.classList.remove("copied");
button.textContent = "Copy";
}, 2000);
},
function (err) {
console.error("Copy failed:", err);
}
);
}
// Theme toggle
document.getElementById('theme-toggle').addEventListener('click', function() {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.theme = 'light';
} else {
document.documentElement.classList.add('dark');
localStorage.theme = 'dark';
}
});
// Mobile menu toggle
document.getElementById('mobile-menu-toggle').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
const openIcon = document.getElementById('menu-open-icon');
const closeIcon = document.getElementById('menu-close-icon');
menu.classList.toggle('hidden');
openIcon.classList.toggle('hidden');
closeIcon.classList.toggle('hidden');
});
// Close mobile menu on link click
document.querySelectorAll('#mobile-menu a').forEach(link => {
link.addEventListener('click', function() {
document.getElementById('mobile-menu').classList.add('hidden');
document.getElementById('menu-open-icon').classList.remove('hidden');
document.getElementById('menu-close-icon').classList.add('hidden');
});
});
</script>
</body>
</html>