mirror of
https://github.com/lukaszraczylo/kubemirror.git
synced 2026-06-05 22:43:51 +00:00
fixup! fixup! fixup! Utilise shared workflows.
This commit is contained in:
@@ -16,6 +16,7 @@ jobs:
|
||||
uses: lukaszraczylo/shared-actions/.github/workflows/go-release.yaml@main
|
||||
with:
|
||||
go-version: ">=1.25"
|
||||
docker-enabled: true
|
||||
secrets: inherit
|
||||
|
||||
publish-helm-chart:
|
||||
|
||||
+264
-299
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="en" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
@@ -20,34 +20,100 @@
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.hover-lift {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.code-block {
|
||||
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
||||
}
|
||||
|
||||
/* Fade-in animation */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.delay-100 { animation-delay: 0.1s; }
|
||||
.delay-200 { animation-delay: 0.2s; }
|
||||
.delay-300 { animation-delay: 0.3s; }
|
||||
|
||||
/* Scroll progress bar */
|
||||
.progress-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||||
z-index: 9999;
|
||||
transition: width 0.1s ease-out;
|
||||
}
|
||||
|
||||
/* Mobile menu animation */
|
||||
.mobile-menu {
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.mobile-menu.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* Smooth hover glow */
|
||||
.glow-on-hover {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.glow-on-hover::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s, height 0.6s;
|
||||
}
|
||||
|
||||
.glow-on-hover:hover::before {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gradient-to-br from-slate-50 to-blue-50">
|
||||
<!-- Scroll Progress Bar -->
|
||||
<div class="progress-bar" id="progressBar"></div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="bg-white/80 backdrop-blur-md shadow-lg sticky top-0 z-50 border-b border-blue-100">
|
||||
<nav class="bg-white/90 backdrop-blur-lg shadow-lg sticky top-0 z-50 border-b border-blue-100">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16 items-center">
|
||||
<a href="#" class="flex items-center gap-3 group">
|
||||
<div class="bg-gradient-to-br from-blue-500 to-purple-600 p-2 rounded-lg group-hover:scale-110 transition-transform">
|
||||
<div class="bg-gradient-to-br from-blue-500 to-purple-600 p-2 rounded-lg group-hover:scale-110 transition-transform duration-300">
|
||||
<i class="fas fa-copy text-2xl text-white"></i>
|
||||
</div>
|
||||
<span class="text-2xl font-bold gradient-text">KubeMirror</span>
|
||||
</a>
|
||||
|
||||
<!-- Desktop Menu -->
|
||||
<div class="hidden md:flex space-x-8">
|
||||
<a href="#problem" class="text-slate-700 hover:text-blue-600 font-medium transition-colors">Problem</a>
|
||||
<a href="#features" class="text-slate-700 hover:text-blue-600 font-medium transition-colors">Features</a>
|
||||
@@ -55,34 +121,50 @@
|
||||
<a href="#comparison" class="text-slate-700 hover:text-blue-600 font-medium transition-colors">Compare</a>
|
||||
<a href="#installation" class="text-slate-700 hover:text-blue-600 font-medium transition-colors">Install</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4">
|
||||
<a href="https://github.com/lukaszraczylo/kubemirror" target="_blank" class="text-slate-700 hover:text-blue-600 transition-colors">
|
||||
<i class="fab fa-github text-2xl"></i>
|
||||
</a>
|
||||
<!-- Mobile Menu Button -->
|
||||
<button id="mobileMenuBtn" class="md:hidden text-slate-700 hover:text-blue-600">
|
||||
<i class="fas fa-bars text-2xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<div id="mobileMenu" class="mobile-menu fixed top-16 right-0 w-64 h-full bg-white shadow-2xl z-40 md:hidden">
|
||||
<div class="flex flex-col p-6 space-y-4">
|
||||
<a href="#problem" class="text-slate-700 hover:text-blue-600 font-medium transition-colors py-2">Problem</a>
|
||||
<a href="#features" class="text-slate-700 hover:text-blue-600 font-medium transition-colors py-2">Features</a>
|
||||
<a href="#examples" class="text-slate-700 hover:text-blue-600 font-medium transition-colors py-2">Examples</a>
|
||||
<a href="#comparison" class="text-slate-700 hover:text-blue-600 font-medium transition-colors py-2">Compare</a>
|
||||
<a href="#installation" class="text-slate-700 hover:text-blue-600 font-medium transition-colors py-2">Install</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative overflow-hidden py-24">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 opacity-70"></div>
|
||||
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div class="mb-8 inline-block">
|
||||
<div class="mb-8 inline-block fade-in">
|
||||
<div class="bg-gradient-to-br from-blue-500 to-purple-600 p-6 rounded-2xl shadow-2xl">
|
||||
<i class="fas fa-copy text-7xl text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-6xl font-extrabold text-slate-900 mb-6 leading-tight">
|
||||
<h1 class="text-5xl md:text-6xl font-extrabold text-slate-900 mb-6 leading-tight fade-in delay-100">
|
||||
Copy Kubernetes Resources<br/>
|
||||
<span class="gradient-text">Across Namespaces</span>
|
||||
</h1>
|
||||
<p class="text-2xl text-slate-600 mb-10 max-w-3xl mx-auto leading-relaxed">
|
||||
<p class="text-xl md:text-2xl text-slate-600 mb-10 max-w-3xl mx-auto leading-relaxed fade-in delay-200">
|
||||
Share Secrets, ConfigMaps, and any Custom Resource (like Traefik Middleware, Cert-Manager Certificates) across multiple namespaces.
|
||||
<strong>Automatically keep them in sync.</strong> Transform values per environment.
|
||||
</p>
|
||||
<div class="flex justify-center gap-6">
|
||||
<a href="#installation" class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-10 py-4 rounded-xl font-bold text-lg hover:from-blue-700 hover:to-purple-700 transition-all shadow-lg hover:shadow-xl hover:scale-105">
|
||||
<div class="flex flex-col sm:flex-row justify-center gap-6 fade-in delay-300">
|
||||
<a href="#installation" class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-10 py-4 rounded-xl font-bold text-lg hover:from-blue-700 hover:to-purple-700 transition-all shadow-lg hover:shadow-xl hover:scale-105 glow-on-hover">
|
||||
<i class="fas fa-download mr-2"></i>
|
||||
Get Started
|
||||
</a>
|
||||
@@ -98,8 +180,8 @@
|
||||
<section id="problem" class="py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-5xl font-extrabold text-slate-900 mb-6">The Problem</h2>
|
||||
<p class="text-2xl text-slate-600 max-w-4xl mx-auto">
|
||||
<h2 class="text-4xl md:text-5xl font-extrabold text-slate-900 mb-6">The Problem</h2>
|
||||
<p class="text-xl md:text-2xl text-slate-600 max-w-4xl mx-auto">
|
||||
Kubernetes doesn't let you share resources across namespaces. You need the same Secret or ConfigMap in 10 namespaces? You have to duplicate it manually and keep them all in sync.
|
||||
</p>
|
||||
</div>
|
||||
@@ -136,12 +218,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-br from-green-50 to-emerald-100 border-l-4 border-green-500 p-10 rounded-xl shadow-xl">
|
||||
<div class="bg-gradient-to-br from-green-50 to-emerald-100 border-l-4 border-green-500 p-10 rounded-xl shadow-xl hover-lift">
|
||||
<div class="flex items-start gap-4">
|
||||
<i class="fas fa-check-circle text-green-500 text-4xl mt-1"></i>
|
||||
<div>
|
||||
<h3 class="font-bold text-3xl text-slate-900 mb-4">KubeMirror's Solution</h3>
|
||||
<p class="text-slate-700 text-xl leading-relaxed">
|
||||
<h3 class="font-bold text-2xl md:text-3xl text-slate-900 mb-4">KubeMirror's Solution</h3>
|
||||
<p class="text-slate-700 text-lg md:text-xl leading-relaxed">
|
||||
Define your resource once in a source namespace. KubeMirror automatically copies it to all target namespaces and keeps them synchronized.
|
||||
Transform values per environment (e.g., <code class="bg-white px-3 py-1 rounded font-mono text-purple-600 font-semibold">preprod-*</code> namespaces get preprod API URLs, <code class="bg-white px-3 py-1 rounded font-mono text-purple-600 font-semibold">prod-*</code> get production URLs).
|
||||
Works with any Kubernetes resource type.
|
||||
@@ -156,17 +238,17 @@
|
||||
<section id="features" class="py-24 bg-gradient-to-br from-slate-50 to-blue-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-20">
|
||||
<h2 class="text-5xl font-extrabold text-slate-900 mb-4">Key Features</h2>
|
||||
<h2 class="text-4xl md:text-5xl font-extrabold text-slate-900 mb-4">Key Features</h2>
|
||||
<p class="text-xl text-slate-600">Everything you need for resource mirroring and synchronization</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-10">
|
||||
<!-- Any Resource Type -->
|
||||
<div class="bg-white p-10 rounded-2xl shadow-xl hover-lift border border-blue-100">
|
||||
<div class="bg-white p-8 md:p-10 rounded-2xl shadow-xl hover-lift border border-blue-100">
|
||||
<div class="bg-gradient-to-br from-blue-500 to-purple-600 w-16 h-16 rounded-xl flex items-center justify-center mb-6">
|
||||
<i class="fas fa-layer-group text-3xl text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-slate-900 mb-4">Mirror Any Resource Type</h3>
|
||||
<h3 class="text-2xl md:text-3xl font-bold text-slate-900 mb-4">Mirror Any Resource Type</h3>
|
||||
<p class="text-slate-600 mb-6 text-lg">
|
||||
Not just Secrets and ConfigMaps. Mirror any namespaced Kubernetes resource:
|
||||
</p>
|
||||
@@ -184,15 +266,15 @@
|
||||
</div>
|
||||
|
||||
<!-- Transformation Rules -->
|
||||
<div class="bg-white p-10 rounded-2xl shadow-xl hover-lift border border-purple-100">
|
||||
<div class="bg-white p-8 md:p-10 rounded-2xl shadow-xl hover-lift border border-purple-100">
|
||||
<div class="bg-gradient-to-br from-purple-500 to-pink-600 w-16 h-16 rounded-xl flex items-center justify-center mb-6">
|
||||
<i class="fas fa-magic text-3xl text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-slate-900 mb-4">Transform Per Environment</h3>
|
||||
<h3 class="text-2xl md:text-3xl font-bold text-slate-900 mb-4">Transform Per Environment</h3>
|
||||
<p class="text-slate-600 mb-6 text-lg">
|
||||
Change values automatically based on target namespace:
|
||||
</p>
|
||||
<div class="code-block text-gray-100 p-5 rounded-xl font-mono text-sm overflow-x-auto mb-4 shadow-lg">
|
||||
<div class="code-block text-gray-100 p-5 rounded-xl font-mono text-xs md:text-sm overflow-x-auto mb-4 shadow-lg">
|
||||
<pre class="text-green-400"># Preprod namespaces get preprod API</pre>
|
||||
<pre><span class="text-yellow-400">- path:</span> data.API_URL
|
||||
<span class="text-yellow-400">value:</span> <span class="text-blue-400">"https://preprod.api.com"</span>
|
||||
@@ -211,11 +293,11 @@
|
||||
</div>
|
||||
|
||||
<!-- Automatic Sync -->
|
||||
<div class="bg-white p-10 rounded-2xl shadow-xl hover-lift border border-green-100">
|
||||
<div class="bg-white p-8 md:p-10 rounded-2xl shadow-xl hover-lift border border-green-100">
|
||||
<div class="bg-gradient-to-br from-green-500 to-teal-600 w-16 h-16 rounded-xl flex items-center justify-center mb-6">
|
||||
<i class="fas fa-sync-alt text-3xl text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-slate-900 mb-4">Automatic Synchronization</h3>
|
||||
<h3 class="text-2xl md:text-3xl font-bold text-slate-900 mb-4">Automatic Synchronization</h3>
|
||||
<p class="text-slate-600 mb-6 text-lg">
|
||||
Update the source once. All copies update automatically:
|
||||
</p>
|
||||
@@ -233,25 +315,25 @@
|
||||
</div>
|
||||
|
||||
<!-- Smart Targeting -->
|
||||
<div class="bg-white p-10 rounded-2xl shadow-xl hover-lift border border-orange-100">
|
||||
<div class="bg-white p-8 md:p-10 rounded-2xl shadow-xl hover-lift border border-orange-100">
|
||||
<div class="bg-gradient-to-br from-orange-500 to-red-600 w-16 h-16 rounded-xl flex items-center justify-center mb-6">
|
||||
<i class="fas fa-bullseye text-3xl text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-slate-900 mb-4">Flexible Targeting</h3>
|
||||
<h3 class="text-2xl md:text-3xl font-bold text-slate-900 mb-4">Flexible Targeting</h3>
|
||||
<p class="text-slate-600 mb-6 text-lg">
|
||||
Choose which namespaces receive the copy:
|
||||
</p>
|
||||
<div class="space-y-4 text-slate-700 text-lg">
|
||||
<div class="flex items-center gap-3">
|
||||
<code class="bg-slate-100 px-4 py-2 rounded-lg font-mono text-purple-700 font-semibold">namespace-1,namespace-2</code>
|
||||
<div class="space-y-4 text-slate-700 text-base md:text-lg">
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
|
||||
<code class="bg-slate-100 px-4 py-2 rounded-lg font-mono text-purple-700 font-semibold text-sm">namespace-1,namespace-2</code>
|
||||
<span>Specific namespaces</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<code class="bg-slate-100 px-4 py-2 rounded-lg font-mono text-purple-700 font-semibold">app-*,prod-*</code>
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
|
||||
<code class="bg-slate-100 px-4 py-2 rounded-lg font-mono text-purple-700 font-semibold text-sm">app-*,prod-*</code>
|
||||
<span>Pattern matching</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<code class="bg-slate-100 px-4 py-2 rounded-lg font-mono text-purple-700 font-semibold">all-labeled</code>
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
|
||||
<code class="bg-slate-100 px-4 py-2 rounded-lg font-mono text-purple-700 font-semibold text-sm">all-labeled</code>
|
||||
<span>All labeled namespaces</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -269,26 +351,26 @@
|
||||
<section id="examples" class="py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-20">
|
||||
<h2 class="text-5xl font-extrabold text-slate-900 mb-4">Real-World Examples</h2>
|
||||
<h2 class="text-4xl md:text-5xl font-extrabold text-slate-900 mb-4">Real-World Examples</h2>
|
||||
<p class="text-xl text-slate-600">See how easy it is to get started with KubeMirror</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-12">
|
||||
<!-- Example 1: Basic Secret -->
|
||||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-10 rounded-2xl shadow-xl border border-blue-200">
|
||||
<div class="flex items-start gap-6 mb-6">
|
||||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-8 md:p-10 rounded-2xl shadow-xl border border-blue-200 hover-lift">
|
||||
<div class="flex flex-col sm:flex-row items-start gap-6 mb-6">
|
||||
<div class="bg-blue-600 w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-bold text-2xl">1</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-3xl font-bold text-slate-900 mb-3">
|
||||
<h3 class="text-2xl md:text-3xl font-bold text-slate-900 mb-3">
|
||||
<i class="fas fa-lock text-blue-600 mr-3"></i>
|
||||
Basic: Mirror a TLS Secret
|
||||
</h3>
|
||||
<p class="text-slate-600 text-lg">Share your TLS certificate across multiple application namespaces</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-block text-gray-100 p-6 rounded-xl font-mono text-sm overflow-x-auto shadow-lg">
|
||||
<div class="code-block text-gray-100 p-4 md:p-6 rounded-xl font-mono text-xs md:text-sm overflow-x-auto shadow-lg">
|
||||
<pre><span class="text-blue-400">apiVersion:</span> v1
|
||||
<span class="text-blue-400">kind:</span> Secret
|
||||
<span class="text-blue-400">metadata:</span>
|
||||
@@ -307,20 +389,20 @@
|
||||
</div>
|
||||
|
||||
<!-- Example 2: Pattern Matching -->
|
||||
<div class="bg-gradient-to-br from-purple-50 to-pink-50 p-10 rounded-2xl shadow-xl border border-purple-200">
|
||||
<div class="flex items-start gap-6 mb-6">
|
||||
<div class="bg-gradient-to-br from-purple-50 to-pink-50 p-8 md:p-10 rounded-2xl shadow-xl border border-purple-200 hover-lift">
|
||||
<div class="flex flex-col sm:flex-row items-start gap-6 mb-6">
|
||||
<div class="bg-purple-600 w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-bold text-2xl">2</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-3xl font-bold text-slate-900 mb-3">
|
||||
<h3 class="text-2xl md:text-3xl font-bold text-slate-900 mb-3">
|
||||
<i class="fas fa-asterisk text-purple-600 mr-3"></i>
|
||||
Pattern Matching: Mirror to All App Namespaces
|
||||
</h3>
|
||||
<p class="text-slate-600 text-lg">Use wildcards to mirror to all namespaces matching a pattern</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-block text-gray-100 p-6 rounded-xl font-mono text-sm overflow-x-auto shadow-lg">
|
||||
<div class="code-block text-gray-100 p-4 md:p-6 rounded-xl font-mono text-xs md:text-sm overflow-x-auto shadow-lg">
|
||||
<pre><span class="text-blue-400">apiVersion:</span> v1
|
||||
<span class="text-blue-400">kind:</span> ConfigMap
|
||||
<span class="text-blue-400">metadata:</span>
|
||||
@@ -337,28 +419,28 @@
|
||||
<span class="text-yellow-400">api_url:</span> <span class="text-purple-400">"https://api.example.com"</span></pre>
|
||||
</div>
|
||||
<div class="mt-6 p-5 bg-purple-100 rounded-lg border border-purple-300">
|
||||
<p class="text-slate-700 text-lg">
|
||||
<p class="text-slate-700 text-base md:text-lg">
|
||||
<i class="fas fa-info-circle text-purple-600 mr-2"></i>
|
||||
<strong>Result:</strong> This ConfigMap will be automatically copied to <code class="bg-white px-2 py-1 rounded font-mono text-purple-700">app-frontend</code>, <code class="bg-white px-2 py-1 rounded font-mono text-purple-700">app-backend</code>, <code class="bg-white px-2 py-1 rounded font-mono text-purple-700">app-worker</code>, and any other namespace starting with "app-"
|
||||
<strong>Result:</strong> This ConfigMap will be automatically copied to <code class="bg-white px-2 py-1 rounded font-mono text-purple-700 text-sm">app-frontend</code>, <code class="bg-white px-2 py-1 rounded font-mono text-purple-700 text-sm">app-backend</code>, <code class="bg-white px-2 py-1 rounded font-mono text-purple-700 text-sm">app-worker</code>, and any other namespace starting with "app-"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Example 3: Custom Resource (Traefik) -->
|
||||
<div class="bg-gradient-to-br from-green-50 to-teal-50 p-10 rounded-2xl shadow-xl border border-green-200">
|
||||
<div class="flex items-start gap-6 mb-6">
|
||||
<div class="bg-gradient-to-br from-green-50 to-teal-50 p-8 md:p-10 rounded-2xl shadow-xl border border-green-200 hover-lift">
|
||||
<div class="flex flex-col sm:flex-row items-start gap-6 mb-6">
|
||||
<div class="bg-green-600 w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-bold text-2xl">3</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-3xl font-bold text-slate-900 mb-3">
|
||||
<h3 class="text-2xl md:text-3xl font-bold text-slate-900 mb-3">
|
||||
<i class="fas fa-cubes text-green-600 mr-3"></i>
|
||||
Custom Resource: Share Traefik Middleware
|
||||
</h3>
|
||||
<p class="text-slate-600 text-lg">Mirror any CRD like Traefik Middleware across your cluster</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-block text-gray-100 p-6 rounded-xl font-mono text-sm overflow-x-auto shadow-lg">
|
||||
<div class="code-block text-gray-100 p-4 md:p-6 rounded-xl font-mono text-xs md:text-sm overflow-x-auto shadow-lg">
|
||||
<pre><span class="text-blue-400">apiVersion:</span> traefik.io/v1alpha1
|
||||
<span class="text-blue-400">kind:</span> Middleware
|
||||
<span class="text-blue-400">metadata:</span>
|
||||
@@ -376,130 +458,12 @@
|
||||
- text/event-stream</pre>
|
||||
</div>
|
||||
<div class="mt-6 p-5 bg-green-100 rounded-lg border border-green-300">
|
||||
<p class="text-slate-700 text-lg">
|
||||
<p class="text-slate-700 text-base md:text-lg">
|
||||
<i class="fas fa-lightbulb text-green-600 mr-2"></i>
|
||||
<strong>Works with any CRD:</strong> Cert-Manager Certificates, Gateway API resources, or your own custom resources!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Example 4: Transformation -->
|
||||
<div class="bg-gradient-to-br from-orange-50 to-red-50 p-10 rounded-2xl shadow-xl border border-orange-200">
|
||||
<div class="flex items-start gap-6 mb-6">
|
||||
<div class="bg-orange-600 w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-bold text-2xl">4</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-3xl font-bold text-slate-900 mb-3">
|
||||
<i class="fas fa-code-branch text-orange-600 mr-3"></i>
|
||||
Advanced: Environment-Specific Configuration
|
||||
</h3>
|
||||
<p class="text-slate-600 text-lg">Transform values based on target environment using namespace patterns</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-block text-gray-100 p-6 rounded-xl font-mono text-sm overflow-x-auto shadow-lg">
|
||||
<pre><span class="text-blue-400">apiVersion:</span> v1
|
||||
<span class="text-blue-400">kind:</span> ConfigMap
|
||||
<span class="text-blue-400">metadata:</span>
|
||||
<span class="text-yellow-400">name:</span> app-config
|
||||
<span class="text-yellow-400">namespace:</span> default
|
||||
<span class="text-yellow-400">labels:</span>
|
||||
<span class="text-green-400">kubemirror.raczylo.com/enabled:</span> <span class="text-purple-400">"true"</span>
|
||||
<span class="text-yellow-400">annotations:</span>
|
||||
<span class="text-green-400">kubemirror.raczylo.com/sync:</span> <span class="text-purple-400">"true"</span>
|
||||
<span class="text-green-400">kubemirror.raczylo.com/target-namespaces:</span> <span class="text-purple-400">"preprod-api,prod-api,staging-api"</span>
|
||||
<span class="text-green-400">kubemirror.raczylo.com/transform:</span> |
|
||||
<span class="text-yellow-400">rules:</span>
|
||||
<span class="text-pink-400"># Preprod gets preprod GraphQL endpoint</span>
|
||||
- <span class="text-yellow-400">path:</span> data.GRAPHQL_HOST
|
||||
<span class="text-yellow-400">value:</span> <span class="text-purple-400">"https://preprod.example.com/v1/graphql"</span>
|
||||
<span class="text-yellow-400">namespacePattern:</span> <span class="text-purple-400">"preprod-*"</span>
|
||||
|
||||
<span class="text-pink-400"># Production gets production endpoint</span>
|
||||
- <span class="text-yellow-400">path:</span> data.GRAPHQL_HOST
|
||||
<span class="text-yellow-400">value:</span> <span class="text-purple-400">"https://api.example.com/v1/graphql"</span>
|
||||
<span class="text-yellow-400">namespacePattern:</span> <span class="text-purple-400">"prod-*"</span>
|
||||
|
||||
<span class="text-pink-400"># Set log level to error in production</span>
|
||||
- <span class="text-yellow-400">path:</span> data.LOG_LEVEL
|
||||
<span class="text-yellow-400">value:</span> <span class="text-purple-400">"error"</span>
|
||||
<span class="text-yellow-400">namespacePattern:</span> <span class="text-purple-400">"prod-*"</span>
|
||||
<span class="text-blue-400">data:</span>
|
||||
<span class="text-yellow-400">GRAPHQL_HOST:</span> <span class="text-purple-400">"https://localhost/v1/graphql"</span>
|
||||
<span class="text-yellow-400">LOG_LEVEL:</span> <span class="text-purple-400">"debug"</span></pre>
|
||||
</div>
|
||||
<div class="mt-6 p-5 bg-orange-100 rounded-lg border border-orange-300">
|
||||
<p class="text-slate-700 text-lg">
|
||||
<i class="fas fa-magic text-orange-600 mr-2"></i>
|
||||
<strong>Result:</strong> Each environment gets the right configuration automatically. One source, multiple environments, zero manual work!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Example 5: Go Templates -->
|
||||
<div class="bg-gradient-to-br from-pink-50 to-rose-50 p-10 rounded-2xl shadow-xl border border-pink-200">
|
||||
<div class="flex items-start gap-6 mb-6">
|
||||
<div class="bg-pink-600 w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-bold text-2xl">5</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-3xl font-bold text-slate-900 mb-3">
|
||||
<i class="fas fa-code text-pink-600 mr-3"></i>
|
||||
Go Templates: Dynamic Value Generation
|
||||
</h3>
|
||||
<p class="text-slate-600 text-lg">Use Go template functions to generate namespace-specific values dynamically</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-block text-gray-100 p-6 rounded-xl font-mono text-sm overflow-x-auto shadow-lg">
|
||||
<pre><span class="text-blue-400">apiVersion:</span> v1
|
||||
<span class="text-blue-400">kind:</span> ConfigMap
|
||||
<span class="text-blue-400">metadata:</span>
|
||||
<span class="text-yellow-400">name:</span> dynamic-config
|
||||
<span class="text-yellow-400">namespace:</span> default
|
||||
<span class="text-yellow-400">labels:</span>
|
||||
<span class="text-green-400">kubemirror.raczylo.com/enabled:</span> <span class="text-purple-400">"true"</span>
|
||||
<span class="text-yellow-400">annotations:</span>
|
||||
<span class="text-green-400">kubemirror.raczylo.com/sync:</span> <span class="text-purple-400">"true"</span>
|
||||
<span class="text-green-400">kubemirror.raczylo.com/target-namespaces:</span> <span class="text-purple-400">"app-frontend,app-backend,app-worker"</span>
|
||||
<span class="text-green-400">kubemirror.raczylo.com/transform:</span> |
|
||||
<span class="text-yellow-400">rules:</span>
|
||||
<span class="text-pink-400"># Generate namespace-specific API URL</span>
|
||||
- <span class="text-yellow-400">path:</span> data.API_URL
|
||||
<span class="text-yellow-400">template:</span> <span class="text-purple-400">"https://{{.TargetNamespace}}.api.example.com"</span>
|
||||
|
||||
<span class="text-pink-400"># Generate database connection string</span>
|
||||
- <span class="text-yellow-400">path:</span> data.DATABASE_URL
|
||||
<span class="text-yellow-400">template:</span> <span class="text-purple-400">"postgres://{{.TargetNamespace}}.db.svc:5432/app"</span>
|
||||
|
||||
<span class="text-pink-400"># Use string manipulation functions</span>
|
||||
- <span class="text-yellow-400">path:</span> data.CACHE_PREFIX
|
||||
<span class="text-yellow-400">template:</span> <span class="text-purple-400">"{{replace .TargetNamespace \"-\" \"_\"}}"</span>
|
||||
|
||||
<span class="text-pink-400"># Uppercase namespace for environment variable</span>
|
||||
- <span class="text-yellow-400">path:</span> data.NAMESPACE_UPPER
|
||||
<span class="text-yellow-400">template:</span> <span class="text-purple-400">"{{upper .TargetNamespace}}"</span>
|
||||
<span class="text-blue-400">data:</span>
|
||||
<span class="text-yellow-400">API_URL:</span> <span class="text-purple-400">"https://localhost:8080"</span>
|
||||
<span class="text-yellow-400">DATABASE_URL:</span> <span class="text-purple-400">"postgres://localhost:5432/app"</span>
|
||||
<span class="text-yellow-400">CACHE_PREFIX:</span> <span class="text-purple-400">"default"</span>
|
||||
<span class="text-yellow-400">NAMESPACE_UPPER:</span> <span class="text-purple-400">"DEFAULT"</span></pre>
|
||||
</div>
|
||||
<div class="mt-6 p-5 bg-pink-100 rounded-lg border border-pink-300">
|
||||
<p class="text-slate-700 text-lg mb-4">
|
||||
<i class="fas fa-info-circle text-pink-600 mr-2"></i>
|
||||
<strong>Available Template Variables:</strong>
|
||||
</p>
|
||||
<div class="grid md:grid-cols-2 gap-3 text-sm font-mono">
|
||||
<div><code class="bg-white px-2 py-1 rounded text-pink-700">.TargetNamespace</code> - Target namespace name</div>
|
||||
<div><code class="bg-white px-2 py-1 rounded text-pink-700">.SourceNamespace</code> - Source namespace name</div>
|
||||
<div><code class="bg-white px-2 py-1 rounded text-pink-700">.SourceName</code> - Source resource name</div>
|
||||
<div><code class="bg-white px-2 py-1 rounded text-pink-700">.TargetName</code> - Mirror resource name</div>
|
||||
</div>
|
||||
<p class="text-slate-700 text-lg mt-4">
|
||||
<strong>Template Functions:</strong> <code class="bg-white px-2 py-1 rounded font-mono text-pink-700">upper</code>, <code class="bg-white px-2 py-1 rounded font-mono text-pink-700">lower</code>, <code class="bg-white px-2 py-1 rounded font-mono text-pink-700">replace</code>, <code class="bg-white px-2 py-1 rounded font-mono text-pink-700">trimPrefix</code>, <code class="bg-white px-2 py-1 rounded font-mono text-pink-700">trimSuffix</code>, <code class="bg-white px-2 py-1 rounded font-mono text-pink-700">default</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -508,102 +472,74 @@
|
||||
<section id="comparison" class="py-24 bg-gradient-to-br from-slate-50 to-blue-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-5xl font-extrabold text-slate-900 mb-6">How KubeMirror Compares</h2>
|
||||
<p class="text-2xl text-slate-600">We built KubeMirror to replace <a href="https://github.com/emberstack/kubernetes-reflector" class="text-blue-600 hover:underline font-semibold" target="_blank">emberstack/reflector</a></p>
|
||||
<h2 class="text-4xl md:text-5xl font-extrabold text-slate-900 mb-6">How KubeMirror Compares</h2>
|
||||
<p class="text-xl md:text-2xl text-slate-600">We built KubeMirror to replace <a href="https://github.com/emberstack/kubernetes-reflector" class="text-blue-600 hover:underline font-semibold" target="_blank">emberstack/reflector</a></p>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto rounded-2xl shadow-2xl">
|
||||
<table class="w-full bg-white">
|
||||
<thead class="bg-gradient-to-r from-slate-800 to-slate-900 text-white">
|
||||
<tr>
|
||||
<th class="px-8 py-6 text-left font-bold text-lg">Capability</th>
|
||||
<th class="px-8 py-6 text-center font-bold text-lg">KubeMirror</th>
|
||||
<th class="px-8 py-6 text-center font-bold text-lg">Reflector</th>
|
||||
<th class="px-6 md:px-8 py-6 text-left font-bold text-base md:text-lg">Capability</th>
|
||||
<th class="px-6 md:px-8 py-6 text-center font-bold text-base md:text-lg">KubeMirror</th>
|
||||
<th class="px-6 md:px-8 py-6 text-center font-bold text-base md:text-lg">Reflector</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-200">
|
||||
<tr class="hover:bg-blue-50 transition-colors">
|
||||
<td class="px-8 py-6">
|
||||
<div class="font-semibold text-lg text-slate-900">Supported Resources</div>
|
||||
<td class="px-6 md:px-8 py-6">
|
||||
<div class="font-semibold text-base md:text-lg text-slate-900">Supported Resources</div>
|
||||
<div class="text-sm text-slate-600 mt-1">What resource types can be mirrored</div>
|
||||
</td>
|
||||
<td class="px-8 py-6 text-center">
|
||||
<div><i class="fas fa-check-circle text-green-500 text-3xl"></i></div>
|
||||
<div class="text-sm font-semibold text-green-700 mt-2">Secrets, ConfigMaps, CRDs, etc.</div>
|
||||
<td class="px-6 md:px-8 py-6 text-center">
|
||||
<div><i class="fas fa-check-circle text-green-500 text-2xl md:text-3xl"></i></div>
|
||||
<div class="text-xs md:text-sm font-semibold text-green-700 mt-2">Secrets, ConfigMaps, CRDs, etc.</div>
|
||||
</td>
|
||||
<td class="px-8 py-6 text-center">
|
||||
<div><i class="fas fa-minus-circle text-yellow-500 text-3xl"></i></div>
|
||||
<div class="text-sm font-semibold text-yellow-700 mt-2">Secrets, ConfigMaps only</div>
|
||||
<td class="px-6 md:px-8 py-6 text-center">
|
||||
<div><i class="fas fa-minus-circle text-yellow-500 text-2xl md:text-3xl"></i></div>
|
||||
<div class="text-xs md:text-sm font-semibold text-yellow-700 mt-2">Secrets, ConfigMaps only</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-blue-50 transition-colors bg-slate-50">
|
||||
<td class="px-8 py-6">
|
||||
<div class="font-semibold text-lg text-slate-900">Auto-Discovery</div>
|
||||
<td class="px-6 md:px-8 py-6">
|
||||
<div class="font-semibold text-base md:text-lg text-slate-900">Auto-Discovery</div>
|
||||
<div class="text-sm text-slate-600 mt-1">Finds all resource types automatically</div>
|
||||
</td>
|
||||
<td class="px-8 py-6 text-center">
|
||||
<div><i class="fas fa-check-circle text-green-500 text-3xl"></i></div>
|
||||
<div class="text-sm font-semibold text-green-700 mt-2">Yes</div>
|
||||
<td class="px-6 md:px-8 py-6 text-center">
|
||||
<div><i class="fas fa-check-circle text-green-500 text-2xl md:text-3xl"></i></div>
|
||||
<div class="text-xs md:text-sm font-semibold text-green-700 mt-2">Yes</div>
|
||||
</td>
|
||||
<td class="px-8 py-6 text-center">
|
||||
<div><i class="fas fa-times-circle text-red-500 text-3xl"></i></div>
|
||||
<div class="text-sm font-semibold text-red-700 mt-2">Hardcoded</div>
|
||||
<td class="px-6 md:px-8 py-6 text-center">
|
||||
<div><i class="fas fa-times-circle text-red-500 text-2xl md:text-3xl"></i></div>
|
||||
<div class="text-xs md:text-sm font-semibold text-red-700 mt-2">Hardcoded</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-blue-50 transition-colors">
|
||||
<td class="px-8 py-6">
|
||||
<div class="font-semibold text-lg text-slate-900">Value Transformation</div>
|
||||
<td class="px-6 md:px-8 py-6">
|
||||
<div class="font-semibold text-base md:text-lg text-slate-900">Value Transformation</div>
|
||||
<div class="text-sm text-slate-600 mt-1">Change values per target namespace</div>
|
||||
</td>
|
||||
<td class="px-8 py-6 text-center">
|
||||
<div><i class="fas fa-check-circle text-green-500 text-3xl"></i></div>
|
||||
<div class="text-sm font-semibold text-green-700 mt-2">Full support</div>
|
||||
<td class="px-6 md:px-8 py-6 text-center">
|
||||
<div><i class="fas fa-check-circle text-green-500 text-2xl md:text-3xl"></i></div>
|
||||
<div class="text-xs md:text-sm font-semibold text-green-700 mt-2">Full support</div>
|
||||
</td>
|
||||
<td class="px-8 py-6 text-center">
|
||||
<div><i class="fas fa-times-circle text-red-500 text-3xl"></i></div>
|
||||
<div class="text-sm font-semibold text-red-700 mt-2">Not available</div>
|
||||
<td class="px-6 md:px-8 py-6 text-center">
|
||||
<div><i class="fas fa-times-circle text-red-500 text-2xl md:text-3xl"></i></div>
|
||||
<div class="text-xs md:text-sm font-semibold text-red-700 mt-2">Not available</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-blue-50 transition-colors bg-slate-50">
|
||||
<td class="px-8 py-6">
|
||||
<div class="font-semibold text-lg text-slate-900">Environment-Specific Rules</div>
|
||||
<div class="text-sm text-slate-600 mt-1">Different transforms for dev/staging/prod</div>
|
||||
</td>
|
||||
<td class="px-8 py-6 text-center">
|
||||
<div><i class="fas fa-check-circle text-green-500 text-3xl"></i></div>
|
||||
<div class="text-sm font-semibold text-green-700 mt-2">Namespace patterns</div>
|
||||
</td>
|
||||
<td class="px-8 py-6 text-center">
|
||||
<div><i class="fas fa-times-circle text-red-500 text-3xl"></i></div>
|
||||
<div class="text-sm font-semibold text-red-700 mt-2">Not available</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-blue-50 transition-colors">
|
||||
<td class="px-8 py-6">
|
||||
<div class="font-semibold text-lg text-slate-900">API Efficiency</div>
|
||||
<div class="text-sm text-slate-600 mt-1">Impact on Kubernetes API server</div>
|
||||
</td>
|
||||
<td class="px-8 py-6 text-center">
|
||||
<div><i class="fas fa-check-circle text-green-500 text-3xl"></i></div>
|
||||
<div class="text-sm font-semibold text-green-700 mt-2">90% less load</div>
|
||||
</td>
|
||||
<td class="px-8 py-6 text-center">
|
||||
<div><i class="fas fa-minus-circle text-yellow-500 text-3xl"></i></div>
|
||||
<div class="text-sm font-semibold text-yellow-700 mt-2">Higher load</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-blue-50 transition-colors bg-slate-50">
|
||||
<td class="px-8 py-6">
|
||||
<div class="font-semibold text-lg text-slate-900">Active Development</div>
|
||||
<td class="px-6 md:px-8 py-6">
|
||||
<div class="font-semibold text-base md:text-lg text-slate-900">Active Development</div>
|
||||
<div class="text-sm text-slate-600 mt-1">Regular updates and bug fixes</div>
|
||||
</td>
|
||||
<td class="px-8 py-6 text-center">
|
||||
<div><i class="fas fa-check-circle text-green-500 text-3xl"></i></div>
|
||||
<div class="text-sm font-semibold text-green-700 mt-2">Active</div>
|
||||
<td class="px-6 md:px-8 py-6 text-center">
|
||||
<div><i class="fas fa-check-circle text-green-500 text-2xl md:text-3xl"></i></div>
|
||||
<div class="text-xs md:text-sm font-semibold text-green-700 mt-2">Active</div>
|
||||
</td>
|
||||
<td class="px-8 py-6 text-center">
|
||||
<div><i class="fas fa-check-circle text-green-500 text-3xl"></i></div>
|
||||
<div class="text-sm font-semibold text-green-700 mt-2">Recently resumed (2025)</div>
|
||||
<td class="px-6 md:px-8 py-6 text-center">
|
||||
<div><i class="fas fa-check-circle text-green-500 text-2xl md:text-3xl"></i></div>
|
||||
<div class="text-xs md:text-sm font-semibold text-green-700 mt-2">Recently resumed (2025)</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -611,11 +547,11 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-16 bg-gradient-to-br from-blue-50 to-indigo-100 border-l-4 border-blue-600 p-8 rounded-xl shadow-xl">
|
||||
<div class="flex items-start gap-6">
|
||||
<i class="fas fa-info-circle text-blue-600 text-4xl mt-1"></i>
|
||||
<div class="flex flex-col sm:flex-row items-start gap-6">
|
||||
<i class="fas fa-info-circle text-blue-600 text-3xl md:text-4xl mt-1"></i>
|
||||
<div>
|
||||
<h4 class="text-2xl font-bold text-slate-900 mb-4">Why We Built KubeMirror</h4>
|
||||
<p class="text-slate-700 text-lg leading-relaxed">
|
||||
<h4 class="text-xl md:text-2xl font-bold text-slate-900 mb-4">Why We Built KubeMirror</h4>
|
||||
<p class="text-slate-700 text-base md:text-lg leading-relaxed">
|
||||
We needed to share Traefik Middleware across 200+ namespaces with environment-specific configurations.
|
||||
Reflector couldn't do it (Secrets/ConfigMaps only, no transformations). So we built KubeMirror with modern
|
||||
Kubernetes best practices and all the features we wished Reflector had.
|
||||
@@ -630,20 +566,20 @@
|
||||
<section id="installation" class="py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-20">
|
||||
<h2 class="text-5xl font-extrabold text-slate-900 mb-4">Installation</h2>
|
||||
<p class="text-2xl text-slate-600">Get started in under 2 minutes</p>
|
||||
<h2 class="text-4xl md:text-5xl font-extrabold text-slate-900 mb-4">Installation</h2>
|
||||
<p class="text-xl md:text-2xl text-slate-600">Get started in under 2 minutes</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-10 mb-16">
|
||||
<!-- Helm Installation -->
|
||||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-10 rounded-2xl shadow-xl border border-blue-200 hover-lift">
|
||||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-8 md:p-10 rounded-2xl shadow-xl border border-blue-200 hover-lift">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="bg-blue-600 w-14 h-14 rounded-xl flex items-center justify-center mr-4">
|
||||
<i class="fas fa-ship text-2xl text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-slate-900">Helm <span class="text-blue-600">(Recommended)</span></h3>
|
||||
<h3 class="text-2xl md:text-3xl font-bold text-slate-900">Helm <span class="text-blue-600">(Recommended)</span></h3>
|
||||
</div>
|
||||
<div class="code-block text-gray-100 p-6 rounded-xl font-mono text-sm overflow-x-auto shadow-lg">
|
||||
<div class="code-block text-gray-100 p-4 md:p-6 rounded-xl font-mono text-xs md:text-sm overflow-x-auto shadow-lg">
|
||||
<pre><span class="text-green-400">helm repo add kubemirror \</span>
|
||||
https://lukaszraczylo.github.io/helm-charts
|
||||
|
||||
@@ -655,14 +591,14 @@
|
||||
</div>
|
||||
|
||||
<!-- kubectl Installation -->
|
||||
<div class="bg-gradient-to-br from-purple-50 to-pink-50 p-10 rounded-2xl shadow-xl border border-purple-200 hover-lift">
|
||||
<div class="bg-gradient-to-br from-purple-50 to-pink-50 p-8 md:p-10 rounded-2xl shadow-xl border border-purple-200 hover-lift">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="bg-purple-600 w-14 h-14 rounded-xl flex items-center justify-center mr-4">
|
||||
<i class="fas fa-terminal text-2xl text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-slate-900">kubectl</h3>
|
||||
<h3 class="text-2xl md:text-3xl font-bold text-slate-900">kubectl</h3>
|
||||
</div>
|
||||
<div class="code-block text-gray-100 p-6 rounded-xl font-mono text-sm overflow-x-auto shadow-lg">
|
||||
<div class="code-block text-gray-100 p-4 md:p-6 rounded-xl font-mono text-xs md:text-sm overflow-x-auto shadow-lg">
|
||||
<pre><span class="text-green-400">kubectl apply -k \</span>
|
||||
github.com/lukaszraczylo/kubemirror/deploy
|
||||
|
||||
@@ -674,8 +610,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Quick Start Example -->
|
||||
<div class="bg-gradient-to-br from-green-50 to-teal-50 p-12 rounded-2xl shadow-2xl border border-green-200">
|
||||
<h3 class="text-4xl font-bold text-slate-900 mb-8 text-center">
|
||||
<div class="bg-gradient-to-br from-green-50 to-teal-50 p-8 md:p-12 rounded-2xl shadow-2xl border border-green-200">
|
||||
<h3 class="text-3xl md:text-4xl font-bold text-slate-900 mb-8 text-center">
|
||||
<i class="fas fa-rocket text-green-600 mr-3"></i>
|
||||
Quick Start: Mirror a Secret in 30 Seconds
|
||||
</h3>
|
||||
@@ -684,9 +620,9 @@
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="bg-green-600 w-10 h-10 rounded-full flex items-center justify-center text-white font-bold">1</div>
|
||||
<h4 class="font-bold text-2xl text-slate-900">Create your source Secret</h4>
|
||||
<h4 class="font-bold text-xl md:text-2xl text-slate-900">Create your source Secret</h4>
|
||||
</div>
|
||||
<div class="code-block text-gray-100 p-6 rounded-xl font-mono text-sm overflow-x-auto shadow-lg">
|
||||
<div class="code-block text-gray-100 p-4 md:p-6 rounded-xl font-mono text-xs md:text-sm overflow-x-auto shadow-lg">
|
||||
<pre><span class="text-blue-400">apiVersion:</span> v1
|
||||
<span class="text-blue-400">kind:</span> Secret
|
||||
<span class="text-blue-400">metadata:</span>
|
||||
@@ -707,15 +643,15 @@
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="bg-green-600 w-10 h-10 rounded-full flex items-center justify-center text-white font-bold">2</div>
|
||||
<h4 class="font-bold text-2xl text-slate-900">That's it!</h4>
|
||||
<h4 class="font-bold text-xl md:text-2xl text-slate-900">That's it!</h4>
|
||||
</div>
|
||||
<p class="text-slate-700 mb-6 text-lg">
|
||||
<p class="text-slate-700 mb-6 text-base md:text-lg">
|
||||
KubeMirror automatically:
|
||||
</p>
|
||||
<ul class="text-slate-700 space-y-4 text-lg">
|
||||
<ul class="text-slate-700 space-y-4 text-base md:text-lg">
|
||||
<li class="flex items-start gap-3">
|
||||
<i class="fas fa-check-circle text-green-500 text-xl mt-1"></i>
|
||||
<span>Creates copies in <code class="bg-white px-2 py-1 rounded font-mono text-green-700">app-1</code> and <code class="bg-white px-2 py-1 rounded font-mono text-green-700">app-2</code></span>
|
||||
<span>Creates copies in <code class="bg-white px-2 py-1 rounded font-mono text-green-700 text-sm">app-1</code> and <code class="bg-white px-2 py-1 rounded font-mono text-green-700 text-sm">app-2</code></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<i class="fas fa-check-circle text-green-500 text-xl mt-1"></i>
|
||||
@@ -732,8 +668,8 @@
|
||||
</ul>
|
||||
<div class="mt-8 p-5 bg-green-100 rounded-lg border border-green-300">
|
||||
<p class="text-sm text-slate-700">
|
||||
<strong class="text-green-800">Required:</strong> Both the label <code class="bg-white px-2 py-1 rounded font-mono text-green-700">kubemirror.raczylo.com/enabled</code>
|
||||
and annotation <code class="bg-white px-2 py-1 rounded font-mono text-green-700">kubemirror.raczylo.com/sync</code> are needed.
|
||||
<strong class="text-green-800">Required:</strong> Both the label <code class="bg-white px-2 py-1 rounded font-mono text-green-700 text-xs">kubemirror.raczylo.com/enabled</code>
|
||||
and annotation <code class="bg-white px-2 py-1 rounded font-mono text-green-700 text-xs">kubemirror.raczylo.com/sync</code> are needed.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -742,42 +678,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Documentation Section -->
|
||||
<section class="py-24 bg-gradient-to-br from-slate-50 to-blue-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-20">
|
||||
<h2 class="text-5xl font-extrabold text-slate-900 mb-4">Documentation</h2>
|
||||
<p class="text-xl text-slate-600">Everything you need to know</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
<a href="https://github.com/lukaszraczylo/kubemirror#usage-examples" target="_blank" class="bg-white p-10 rounded-2xl shadow-xl hover-lift border border-blue-100 group">
|
||||
<div class="bg-gradient-to-br from-blue-500 to-purple-600 w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<i class="fas fa-book-open text-3xl text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-slate-900 mb-3 group-hover:text-blue-600 transition-colors">Usage Examples</h3>
|
||||
<p class="text-slate-600 text-lg">Real-world examples for common use cases</p>
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/lukaszraczylo/kubemirror/tree/main/examples#transformation-rules" target="_blank" class="bg-white p-10 rounded-2xl shadow-xl hover-lift border border-purple-100 group">
|
||||
<div class="bg-gradient-to-br from-purple-500 to-pink-600 w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<i class="fas fa-magic text-3xl text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-slate-900 mb-3 group-hover:text-purple-600 transition-colors">Transformation Rules</h3>
|
||||
<p class="text-slate-600 text-lg">Change values based on target environment</p>
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/lukaszraczylo/kubemirror#configuration" target="_blank" class="bg-white p-10 rounded-2xl shadow-xl hover-lift border border-green-100 group">
|
||||
<div class="bg-gradient-to-br from-green-500 to-teal-600 w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<i class="fas fa-cog text-3xl text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-slate-900 mb-3 group-hover:text-green-600 transition-colors">Configuration</h3>
|
||||
<p class="text-slate-600 text-lg">Helm values and advanced settings</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gradient-to-br from-slate-900 to-slate-800 text-gray-300 py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
@@ -789,25 +689,90 @@
|
||||
</div>
|
||||
<span class="text-2xl font-bold text-white">KubeMirror</span>
|
||||
</div>
|
||||
<p class="text-gray-400 text-lg leading-relaxed">
|
||||
<p class="text-gray-400 text-base md:text-lg leading-relaxed">
|
||||
Copy Kubernetes resources across namespaces. Modern replacement for Reflector.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-bold text-white mb-6">Links</h4>
|
||||
<ul class="space-y-3 text-lg">
|
||||
<h4 class="text-lg md:text-xl font-bold text-white mb-6">Links</h4>
|
||||
<ul class="space-y-3 text-base md:text-lg">
|
||||
<li><a href="https://github.com/lukaszraczylo/kubemirror" target="_blank" class="hover:text-white transition-colors"><i class="fab fa-github mr-2"></i>GitHub</a></li>
|
||||
<li><a href="https://github.com/lukaszraczylo/kubemirror/issues" target="_blank" class="hover:text-white transition-colors"><i class="fas fa-bug mr-2"></i>Report Issue</a></li>
|
||||
<li><a href="https://github.com/lukaszraczylo/kubemirror/releases" target="_blank" class="hover:text-white transition-colors"><i class="fas fa-tag mr-2"></i>Releases</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-bold text-white mb-6">License</h4>
|
||||
<p class="text-gray-400 text-lg">MIT License</p>
|
||||
<p class="text-gray-400 mt-4 text-lg">© 2024 Lukasz Raczylo</p>
|
||||
<h4 class="text-lg md:text-xl font-bold text-white mb-6">License</h4>
|
||||
<p class="text-gray-400 text-base md:text-lg">MIT License</p>
|
||||
<p class="text-gray-400 mt-4 text-base md:text-lg">© 2024 Lukasz Raczylo</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Back to Top Button -->
|
||||
<button id="backToTop" class="fixed bottom-8 right-8 bg-gradient-to-r from-blue-600 to-purple-600 text-white p-4 rounded-full shadow-2xl opacity-0 pointer-events-none transition-opacity duration-300 hover:scale-110 z-50">
|
||||
<i class="fas fa-arrow-up text-xl"></i>
|
||||
</button>
|
||||
|
||||
<script>
|
||||
// Scroll progress bar
|
||||
window.addEventListener('scroll', () => {
|
||||
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
|
||||
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
|
||||
const scrolled = (winScroll / height) * 100;
|
||||
document.getElementById('progressBar').style.width = scrolled + '%';
|
||||
});
|
||||
|
||||
// Mobile menu toggle
|
||||
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
|
||||
const mobileMenu = document.getElementById('mobileMenu');
|
||||
|
||||
mobileMenuBtn.addEventListener('click', () => {
|
||||
mobileMenu.classList.toggle('active');
|
||||
});
|
||||
|
||||
// Close mobile menu when clicking a link
|
||||
document.querySelectorAll('#mobileMenu a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
mobileMenu.classList.remove('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Close mobile menu when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!mobileMenu.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
|
||||
mobileMenu.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Back to top button
|
||||
const backToTop = document.getElementById('backToTop');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.pageYOffset > 300) {
|
||||
backToTop.style.opacity = '1';
|
||||
backToTop.style.pointerEvents = 'auto';
|
||||
} else {
|
||||
backToTop.style.opacity = '0';
|
||||
backToTop.style.pointerEvents = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
backToTop.addEventListener('click', () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
});
|
||||
|
||||
// Smooth scroll for anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user