chore(design) Redo the webpage
Trying to make a modern webpage. Tailwind is verbose but helps to do it faster. I will later make a better CSS. TODO: make dynamic links to package repository, exe, binaries... and add a better example
This commit is contained in:
20
src/partials/cta.html
Normal file
20
src/partials/cta.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<section class="py-16 bg-gradient-to-r from-orange-500 to-indigo-600">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-3xl font-bold text-white mb-6">
|
||||
Ready to Simplify Your Kubernetes Deployments?
|
||||
</h2>
|
||||
<p class="text-xl text-orange-100 mb-8 max-w-3xl mx-auto">
|
||||
Start converting your Docker Compose files to Helm Charts today with
|
||||
Katenary.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||||
<a
|
||||
href="https://repo.katenary.io/katenary/katenary"
|
||||
target="_blank"
|
||||
class="bg-white hover:bg-gray-100 text-orange-600 font-bold py-3 px-6 rounded-lg transition shadow-lg"
|
||||
>
|
||||
Get Katenary Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
23
src/partials/demo.html
Normal file
23
src/partials/demo.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<section class="py-16 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-3xl font-bold text-gray-900 mb-4">
|
||||
See Katenary in Action
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Watch how easily you can convert Docker Compose to Helm Charts
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="aspect-w-16 aspect-h-9 bg-gray-900 rounded-xl overflow-hidden shadow-lg"
|
||||
>
|
||||
<iframe
|
||||
class="w-full h-96"
|
||||
src="https://www.youtube.com/embed/RrX5jNxS9IA"
|
||||
title="YouTube video player"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; presentation"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,40 +1,59 @@
|
||||
<section class="features" id="features">
|
||||
<div class="container">
|
||||
<h2>Why Katenary?</h2>
|
||||
<p>
|
||||
Simplify your deployment workflow by converting Compose files into
|
||||
production-ready Helm Charts with ease.
|
||||
</p>
|
||||
<div class="feature-grid from-left">
|
||||
<div class="feature-item">
|
||||
<h3>Automated Conversion</h3>
|
||||
<p>
|
||||
Generate complete Helm Charts from your Compose files effortlessly.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h3>Flexible Configuration</h3>
|
||||
<p>Customize deployments with `values.yaml` and environment labels.</p>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h3>Dependency Management</h3>
|
||||
<p>
|
||||
Ensure proper service startup sequences using `depends_on` support.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h3>Open Source</h3>
|
||||
<p>Free, opensource, under the <strong>MIT license!</strong></p>
|
||||
</div>
|
||||
<section id="features" class="py-16 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-3xl font-bold text-gray-900 mb-4">Why Choose Katenary</h2>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Powerful features to simplify your Kubernetes deployment workflow
|
||||
</p>
|
||||
</div>
|
||||
<div class="video from-right">
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/RrX5jNxS9IA?si=i0kRVFXOwT3ZqZdB"
|
||||
title="YouTube video player"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div
|
||||
class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition"
|
||||
>
|
||||
<div
|
||||
class="w-14 h-14 bg-orange-100 rounded-full flex items-center justify-center mb-6"
|
||||
>
|
||||
<i data-feather="repeat" class="w-6 h-6 text-orange-500"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">
|
||||
Automated Conversion
|
||||
</h3>
|
||||
<p class="text-gray-600">
|
||||
Transform your Docker Compose files into fully functional Helm Charts
|
||||
with a single command.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition"
|
||||
>
|
||||
<div
|
||||
class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-6"
|
||||
>
|
||||
<i
|
||||
data-feather="git-pull-request"
|
||||
class="w-6 h-6 text-indigo-500"
|
||||
></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Open Source & Free</h3>
|
||||
<p class="text-gray-600">
|
||||
Built with Go, Katenary is 100% open source and free to use forever.
|
||||
Contribute and customize to your needs.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition"
|
||||
>
|
||||
<div
|
||||
class="w-14 h-14 bg-orange-100 rounded-full flex items-center justify-center mb-6"
|
||||
>
|
||||
<i data-feather="package" class="w-6 h-6 text-orange-500"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Easy Installation</h3>
|
||||
<p class="text-gray-600">
|
||||
Available as native packages for Debian, RPM, Arch, Windows, and as a
|
||||
container image.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,68 +1,94 @@
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<section>
|
||||
<footer class="bg-gray-900 text-gray-400 py-12">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h2>Contact</h2>
|
||||
<p>
|
||||
For any question, suggestion, or if you want to sponsor to the
|
||||
project, please contact me at: <br/>
|
||||
<a href="mailto:contact@katenary.io"><i class="icofont-send-mail"></i> contact@katenary.io</a>
|
||||
</p>
|
||||
<p>
|
||||
Issues and contributions are welcome on: <br />
|
||||
<a href="https://repo.katenary.io/Katenary/katenary"><i class="icofont-users-alt-6"></i> Katenary repository</a>
|
||||
</p>
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src="https://repo.katenary.io/Katenary/katenary/raw/branch/master/doc/docs/statics/logo-vertical.svg"
|
||||
alt="Katenary Logo"
|
||||
class="h-8"
|
||||
/>
|
||||
</div>
|
||||
<p class="mt-4 text-sm">
|
||||
Convert Docker Compose to Helm Charts with ease.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div>
|
||||
<h2>Special thanks</h2>
|
||||
<p>Content creation:</p>
|
||||
<ul>
|
||||
<h3 class="text-white font-bold mb-4">Resources</h3>
|
||||
<ul class="space-y-2">
|
||||
<li>
|
||||
<a href="https://blender.org">Blender</a> that helps a lot to create
|
||||
videos and animations
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://highlightjs.org">Highlight.js</a> for the code
|
||||
syntax highlighting
|
||||
</li>
|
||||
</ul>
|
||||
<p>For graphical elements</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://inkscape.org">Inkscape</a> for the icons and images
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://gimp.org">The Gimp</a> for many others image
|
||||
manipulation
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div>
|
||||
<h2>Links</h2>
|
||||
<p>For this website:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://repo.katenary.io/Katenary/katenary"><i class="icofont-users-alt-6"></i> Katenary repository</a>
|
||||
to follow, star, and contribute
|
||||
<a
|
||||
href="https://repo.katenary.io/katenary/katenary"
|
||||
target="_blank"
|
||||
class="hover:text-orange-400 transition"
|
||||
>Repository</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://matrix.to/#/#katenary:matrix.org"
|
||||
><i class="icofont-speech-comments"></i> Discussion on Matrix.org</a
|
||||
href="https://repo.katenary.io/Katenary/-/packages"
|
||||
target="_blank"
|
||||
class="hover:text-orange-400 transition"
|
||||
>Packages</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://docs.katenary.io"
|
||||
class="hover:text-orange-400 transition"
|
||||
>Documentation</a
|
||||
>
|
||||
the official Matrix channel for Katenary
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="container">
|
||||
<p>© 2024, 2025 Katenary. Open Source Project under MIT License.</p>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Community</h3>
|
||||
<ul class="space-y-2">
|
||||
<li>
|
||||
<a
|
||||
href="https://repo.katenary.io/Katenary/katenary/issues"
|
||||
target="_blank"
|
||||
class="hover:text-orange-400 transition"
|
||||
>Git Issues</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://matrix.to/#/#katenary-io:matrix.org"
|
||||
target="_blank"
|
||||
class="hover:text-orange-400 transition"
|
||||
>Matrix Room</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://repo.katenary.io/Katenary/katenary"
|
||||
target="_blank"
|
||||
class="hover:text-orange-400 transition"
|
||||
>Contribute</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Connect</h3>
|
||||
<div class="flex space-x-4">
|
||||
<a
|
||||
href="https://www.linkedin.com/company/katenary"
|
||||
target="_blank"
|
||||
class="hover:text-orange-400 transition"
|
||||
><i data-feather="linkedin"></i
|
||||
></a>
|
||||
<a
|
||||
href="https://www.youtube.com/@Katenary"
|
||||
class="hover:text-orange-400 transition"
|
||||
><i data-feather="youtube"></i
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-800 mt-10 pt-6 text-sm text-center">
|
||||
<p>© 2025 Katenary. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
<section class="get-started" id="get-started">
|
||||
<h2>Get Started</h2>
|
||||
<div class="container">
|
||||
|
||||
<section class="alternate">
|
||||
<div class="container">
|
||||
<h3>Linux users</h3>
|
||||
<p>
|
||||
Go to <a href="https://repo.katenary.io/Katenary/katenary/packages"
|
||||
>Katenary's repository</a> and select your preferred distrubution.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="alternate">
|
||||
<div class="container">
|
||||
<h3>Other OS users</h3>
|
||||
<p>Windows users can use the "setup" executable in the "generic" section.</p>
|
||||
<p>macOS userss may use the "Darwin" binary.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<p>
|
||||
<a href="https://repo.katenary.io/Katenary/katenary" class="btn-primary"
|
||||
>Go to the source repository</a
|
||||
>
|
||||
</p>
|
||||
</section>
|
||||
@@ -1,12 +0,0 @@
|
||||
<header class="header" id="top">
|
||||
<div class="container">
|
||||
<h1>Katenary</h1>
|
||||
<p>Effortless Helm Chart Conversion for Kubernetes Deployments</p>
|
||||
<a
|
||||
href="#features"
|
||||
class="down-arrow large-icon down"
|
||||
title="Scroll down to learn more"
|
||||
><i class="icofont-arrow-down"></i
|
||||
></a>
|
||||
</div>
|
||||
</header>
|
||||
23
src/partials/hero.html
Normal file
23
src/partials/hero.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<div class="relative overflow-hidden bg-gray-900">
|
||||
<div id="vanta-bg" class="vanta-bg" style="min-height: 100vh"></div>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32">
|
||||
<div class="text-center relative">
|
||||
<h1 class="text-4xl md:text-6xl font-bold mb-6">
|
||||
<span class="gradient-text">From Docker Compose</span>
|
||||
<span class="block md:inline text-white">to Helm Charts</span>
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10">
|
||||
Automatically convert your docker-compose.yaml files into complete Helm
|
||||
Charts ready for Kubernetes.
|
||||
</p>
|
||||
<div class="flex justify-center">
|
||||
<a
|
||||
href="#installation"
|
||||
class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-6 rounded-lg transition shadow-lg"
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,45 +0,0 @@
|
||||
<section class="how-it-works" id="how-it-works">
|
||||
<div class="container">
|
||||
<h2>How It Works</h2>
|
||||
<p>
|
||||
Katenary simply read your <code>compose.yaml</code> file (or
|
||||
<code>docker-compose.yaml</code>) and use
|
||||
<strong>official libraries</strong> to read it and generate Kubernetes
|
||||
resources as YAML.
|
||||
</p>
|
||||
<p>
|
||||
Then, it adds templating conditions, values file, define a
|
||||
<code>Chart.yaml</code> file, adapt dependencies if needed, and many
|
||||
others things.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Using configuration files to be mounted?</strong> No problem,
|
||||
Katenary will create <code>ConfigMaps</code> if you declared that thes
|
||||
directories or files are statics.
|
||||
<br />
|
||||
<small
|
||||
>(Do not do this for sources of your project, use it for simple
|
||||
configuration files)</small
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
The result is a complete "Helm Chart" that can be installed, configured,
|
||||
packaged and shared.
|
||||
</p>
|
||||
<div class="image-placeholder">
|
||||
<img
|
||||
src="https://repo.katenary.io/Katenary/katenary/raw/branch/master/doc/docs/statics/workflow.svg"
|
||||
alt="Katenary Workflow"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
Almost everything can be overriden as Ingresses, Dependencies, values,
|
||||
environment variables, secrets...
|
||||
</p>
|
||||
<ol>
|
||||
<li>Add optional labels to your Compose files.</li>
|
||||
<li>Run <code>katenary convert</code> from the command line.</li>
|
||||
<li>Deploy the generated Helm Chart in Kubernetes.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,92 +0,0 @@
|
||||
<section class="how-to-use" id="how-to-use">
|
||||
<div class="container">
|
||||
<h2>How to use?</h2>
|
||||
<p>
|
||||
Install the binary, and use <code>katenar convert</code> command line
|
||||
inside your project directory
|
||||
</p>
|
||||
<p>
|
||||
You can adapt your compose YAML file with labels, or add a
|
||||
<code>compose.katenary.yaml</code> file to override your project.
|
||||
</p>
|
||||
<p>
|
||||
You may also use a specific <code>katenary.yaml</code> file that accepts
|
||||
the directives without using labels.
|
||||
</p>
|
||||
<section class="alternate">
|
||||
<div class="container example">
|
||||
<div class="from-left">
|
||||
<h3>Only add labels! (if needed!)</h3>
|
||||
<p>
|
||||
You can adapt, configure, or change the conversion behaviour addind
|
||||
labels.
|
||||
</p>
|
||||
<p>
|
||||
It
|
||||
<strong
|
||||
>doesn't change the <code>docker compose</code> or
|
||||
<code>podman compose</code></strong
|
||||
>
|
||||
behaviour. It is only used while using
|
||||
<code>katenary compose</code> command line
|
||||
</p>
|
||||
<p>
|
||||
There are
|
||||
<a
|
||||
href="https://katenary.readthedocs.io/en/latest/labels/"
|
||||
target="_blank"
|
||||
>plenty of labels</a
|
||||
>
|
||||
to help you to customize and adapt the resulting Helm Chart.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="from-right"><code class="language-yaml">
|
||||
# your "docker-compose.yml", or "compose.yaml"
|
||||
services:
|
||||
web:
|
||||
image: docker.io/nginx:latest
|
||||
ports:
|
||||
- "80:80"
|
||||
labels:
|
||||
# generate an ingress resource in the Helm Chart
|
||||
katenary.io/ingress: |-
|
||||
hostname: example.com
|
||||
port: 80
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="alternate">
|
||||
<div class="container example">
|
||||
<div class="from-right">
|
||||
<h3>Ease the deployment</h3>
|
||||
<p>
|
||||
Kubernetes somtimes lacks of automation. Katenary helps you to add
|
||||
what is needed, like having a
|
||||
<code>depends_on</code> feature.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="from-left"><code class="language-yaml">
|
||||
# your "docker-compose.yml", or "compose.yaml"
|
||||
services:
|
||||
db:
|
||||
image: docker.io/postgres:latest
|
||||
# ...
|
||||
labels:
|
||||
katenary.v3/ports: |-
|
||||
- 5432
|
||||
|
||||
web:
|
||||
image: php:fpm
|
||||
# ...
|
||||
depends_on:
|
||||
- db
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
113
src/partials/install.html
Normal file
113
src/partials/install.html
Normal file
@@ -0,0 +1,113 @@
|
||||
<section id="installation" class="py-16 bg-gray-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-3xl font-bold text-gray-900 mb-4">Install Katenary</h2>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Multiple installation options to fit your environment
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
||||
<!-- Package Repositories -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
|
||||
<div class="flex items-center mb-4">
|
||||
<i data-feather="box" class="w-6 h-6 text-orange-500 mr-2"></i>
|
||||
<h3 class="text-xl font-bold text-gray-900">Package Repositories</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">
|
||||
Install using your system's package manager. Packages available for
|
||||
RPM-based (Fedora, RHEL, Alma, Rocky), Debian-based (Ubuntu), and Arch
|
||||
Linux.
|
||||
</p>
|
||||
<a
|
||||
href="https://repo.katenary.io/Katenary/-/packages"
|
||||
target="_blank"
|
||||
class="inline-flex items-center text-indigo-500 hover:text-indigo-700"
|
||||
>
|
||||
View Packages
|
||||
<i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
<!-- macOS Download -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
|
||||
<div class="flex items-center mb-4">
|
||||
<i data-feather="box" class="w-6 h-6 text-orange-500 mr-2"></i>
|
||||
<h3 class="text-xl font-bold text-gray-900">macOS Binary</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">Download the macOS executable</p>
|
||||
<a
|
||||
href="https://repo.katenary.io/api/packages/Katenary/generic/katenary/3.0.0/katenary-darwin-amd64"
|
||||
class="inline-flex items-center text-indigo-500 hover:text-indigo-700"
|
||||
>
|
||||
Download Binary
|
||||
<i data-feather="download" class="w-4 h-4 ml-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Windows Installer -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
|
||||
<div class="flex items-center mb-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="w-6 h-6 text-orange-500 mr-2"
|
||||
>
|
||||
<path
|
||||
d="M18 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12z"
|
||||
></path>
|
||||
<path d="M10 3v4H6v2h4v10h4v-10h4V7h-4V3z"></path>
|
||||
</svg>
|
||||
<h3 class="text-xl font-bold text-gray-900">Windows Setup</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">Download and run the Windows installer</p>
|
||||
<a
|
||||
href="https://repo.katenary.io/api/packages/Katenary/generic/katenary/3.0.0/katenary-windows-setup.exe"
|
||||
class="inline-flex items-center text-indigo-500 hover:text-indigo-700"
|
||||
>
|
||||
Download EXE <i data-feather="download" class="w-4 h-4 ml-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Container Image -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
|
||||
<div class="flex items-center mb-4">
|
||||
<i data-feather="package" class="w-6 h-6 text-orange-500 mr-2"></i>
|
||||
<h3 class="text-xl font-bold text-gray-900">Container Image</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">Run Katenary in a container</p>
|
||||
<a
|
||||
href="https://repo.katenary.io/Katenary/-/packages/container/katenary/latest"
|
||||
target="_blank"
|
||||
class="inline-flex items-center text-indigo-500 hover:text-indigo-700"
|
||||
>
|
||||
Pull Image <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Start -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<div class="bg-gray-900 px-6 py-4 flex items-center">
|
||||
<div class="flex space-x-2">
|
||||
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<p class="text-gray-200 ml-4">Terminal</p>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<pre class="text-gray-100 bg-gray-800 p-4 rounded-lg overflow-x-auto">
|
||||
<code class="language-bash"><span class="text-green-400"># Convert your compose file to Helm Chart</span>
|
||||
katenary convert
|
||||
|
||||
<span class="text-green-400"># Install the generated chart to your cluster</span>
|
||||
helm install my-app ./helm-chart</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
73
src/partials/nav.html
Normal file
73
src/partials/nav.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<!-- Navigation -->
|
||||
<nav class="bg-white shadow-sm">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src="https://repo.katenary.io/Katenary/katenary/raw/branch/master/doc/docs/statics/logo-vertical.svg"
|
||||
alt="Katenary Logo"
|
||||
class="h-10"
|
||||
/>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center space-x-8">
|
||||
<a
|
||||
href="#features"
|
||||
class="text-gray-700 hover:text-orange-500 transition"
|
||||
>Features</a
|
||||
>
|
||||
<a
|
||||
href="#installation"
|
||||
class="text-gray-700 hover:text-orange-500 transition"
|
||||
>Installation</a
|
||||
>
|
||||
<a
|
||||
href="#tutorials"
|
||||
class="text-gray-700 hover:text-orange-500 transition"
|
||||
>Tutorials</a
|
||||
>
|
||||
<a
|
||||
href="https://repo.katenary.io/katenary/katenary"
|
||||
target="_blank"
|
||||
class="flex items-center text-gray-700 hover:text-orange-500 transition"
|
||||
>
|
||||
<i data-feather="git-branch" class="w-4 h-4 mr-1"></i> Repository
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center md:hidden">
|
||||
<button
|
||||
id="mobile-menu-button"
|
||||
class="text-gray-500 hover:text-orange-500 focus:outline-none"
|
||||
>
|
||||
<i data-feather="menu"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile menu -->
|
||||
<div id="mobile-menu" class="hidden md:hidden px-4 pb-4">
|
||||
<div class="flex flex-col space-y-4">
|
||||
<a
|
||||
href="#features"
|
||||
class="text-gray-700 hover:text-orange-500 transition"
|
||||
>Features</a
|
||||
>
|
||||
<a
|
||||
href="#installation"
|
||||
class="text-gray-700 hover:text-orange-500 transition"
|
||||
>Installation</a
|
||||
>
|
||||
<a
|
||||
href="#tutorials"
|
||||
class="text-gray-700 hover:text-orange-500 transition"
|
||||
>Tutorials</a
|
||||
>
|
||||
<a
|
||||
href="https://repo.katenary.io/katenary/katenary"
|
||||
target="_blank"
|
||||
class="flex items-center text-gray-700 hover:text-orange-500 transition"
|
||||
>
|
||||
<i data-feather="git-branch" class="w-4 h-4 mr-1"></i> Repository
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -1,24 +0,0 @@
|
||||
<button class="btn-primary" id="menu-toggle">
|
||||
<i class="fa fa-bars"></i>
|
||||
</button>
|
||||
<div class="navbar">
|
||||
<div class="container">
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#top"><i class="icofont-ui-home"></i> Katenary</a>
|
||||
</li>
|
||||
<li><a href="#features"><i class="icofont-gears"></i> Why Katenary?</a></li>
|
||||
<li><a href="#how-it-works"><i class="icofont-flash"></i> How It Works</a></li>
|
||||
<li><a href="#how-to-use"><i class="icofont-light-bulb"></i> How to use</a></li>
|
||||
<li><a href="#tutorials"><i class="icofont-university"></i> Tutorials</a></li>
|
||||
<li><a href="#get-started"><i class="spin icofont-gear"></i> Get Started</a></li>
|
||||
<li class="external">
|
||||
<a href="https://repo.katenary.io/Katenary/katenary" target="_blank"
|
||||
><i class="icofont-users-alt-6"></i> Katenary repository</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
58
src/partials/tuto.html
Normal file
58
src/partials/tuto.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<section id="tutorials" class="py-16 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-3xl font-bold text-gray-900 mb-4">Video Tutorials</h2>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Learn how to use Katenary with these step-by-step guides
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<!-- Tutorial 1 -->
|
||||
<div
|
||||
class="bg-gray-50 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition"
|
||||
>
|
||||
<div class="aspect-w-16 aspect-h-9">
|
||||
<iframe
|
||||
class="w-full h-64"
|
||||
src="https://www.youtube.com/embed/kvVN8gPxqOA"
|
||||
title="YouTube video player"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; presentation"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-2">
|
||||
Getting Started with Katenary
|
||||
</h3>
|
||||
<p class="text-gray-600">
|
||||
Learn the basics of converting Docker Compose files to Helm Charts
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tutorial 2 -->
|
||||
<div
|
||||
class="bg-gray-50 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition"
|
||||
>
|
||||
<div class="aspect-w-16 aspect-h-9">
|
||||
<iframe
|
||||
class="w-full h-64"
|
||||
src="https://www.youtube.com/embed/QtFOO1LnSVg"
|
||||
title="YouTube video player"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; presentation"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-2">
|
||||
Advanced Katenary Features
|
||||
</h3>
|
||||
<p class="text-gray-600">
|
||||
Explore advanced configuration options and customization
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,22 +0,0 @@
|
||||
<section class="tutorials" id="tutorials">
|
||||
<div class="container">
|
||||
<h2>Watch the Tutorials</h2>
|
||||
<p>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=kvVN8gPxqOA&list=PLrq-nCZV_rv6GRBFlA7WxUz2h3DM5teCi"
|
||||
target="_blank"
|
||||
>A playlist</a
|
||||
>
|
||||
is progressivelly filled to help the Katenary adoption. Take a look and
|
||||
learn how it is simple.
|
||||
</p>
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/kvVN8gPxqOA?si=tsPoMPh4PbKFutTx"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user