chore(refacto) Tailwind sucks
Too many things in "class". I prefer making a clean CSS and be able to change the style later.
This commit is contained in:
@@ -17,89 +17,32 @@
|
||||
content="Katenary, Helm, Kubernetes, Compose, Docker, Podman, Helm chart"
|
||||
/>
|
||||
<meta name="author" content="Patrice Ferlet (aka metal3d)" />
|
||||
<link rel="stylesheet" type="text/css" href="./main.scss" />
|
||||
<link rel="stylesheet" type="text/css" href="./main.css" />
|
||||
<link rel="icon" href="./icon.ico" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/feather-icons"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
|
||||
<script type="text/javascript" src="./init.js" />
|
||||
</head>
|
||||
<body class="font-sans antialiased text-gray-800 bg-gray-50">
|
||||
<!-- Navigation -->
|
||||
<include src="src/partials/nav.html"></include>
|
||||
<include src="src/partials/structure/nav.html"></include>
|
||||
<!-- Hero Section with Vanta.js -->
|
||||
<include src="src/partials/hero.html"></include>
|
||||
<include src="src/partials/content/hero.html"></include>
|
||||
<!-- Features Section -->
|
||||
<include src="src/partials/features.html"></include>
|
||||
<include src="src/partials/content/features.html"></include>
|
||||
<!-- Demo Video Section -->
|
||||
<include src="src/partials/demo.html"></include>
|
||||
<include src="src/partials/content/demo.html"></include>
|
||||
<!-- Installation Section -->
|
||||
<include src="src/partials/install.html"></include>
|
||||
<include src="src/partials/content/install.html"></include>
|
||||
<!-- Quickstart Section -->
|
||||
<include src="src/partials/content/quickstart.html"></include>
|
||||
<!-- Tutorials Section -->
|
||||
<include src="src/partials/tuto.html"></include>
|
||||
<include src="src/partials/content/tuto.html"></include>
|
||||
<!-- CTA Section -->
|
||||
<include src="src/partials/cta.html"></include>
|
||||
<include src="src/partials/content/cta.html"></include>
|
||||
<!-- Footer -->
|
||||
<include src="src/partials/footer.html"></include>
|
||||
<script>
|
||||
// Make sure all iframes have proper permissions
|
||||
document.querySelectorAll("iframe").forEach((iframe) => {
|
||||
iframe.setAttribute("allow", "presentation");
|
||||
});
|
||||
|
||||
VANTA.NET({
|
||||
el: "#vanta-bg",
|
||||
mouseControls: true,
|
||||
touchControls: true,
|
||||
gyroControls: false,
|
||||
minHeight: 200.0,
|
||||
minWidth: 200.0,
|
||||
scale: 1.0,
|
||||
scaleMobile: 1.0,
|
||||
color: 0xf97316,
|
||||
backgroundColor: 0x111827,
|
||||
points: 10.0,
|
||||
maxDistance: 22.0,
|
||||
spacing: 18.0,
|
||||
});
|
||||
// Initialize feather icons with retry
|
||||
function initFeather() {
|
||||
if (window.feather) {
|
||||
feather.replace();
|
||||
} else {
|
||||
setTimeout(initFeather, 100);
|
||||
}
|
||||
}
|
||||
initFeather();
|
||||
// Mobile menu toggle
|
||||
document
|
||||
.getElementById("mobile-menu-button")
|
||||
.addEventListener("click", function () {
|
||||
const menu = document.getElementById("mobile-menu");
|
||||
menu.classList.toggle("hidden");
|
||||
|
||||
// Change icon based on state
|
||||
const icon = this.querySelector("i");
|
||||
if (menu.classList.contains("hidden")) {
|
||||
icon.setAttribute("data-feather", "menu");
|
||||
} else {
|
||||
icon.setAttribute("data-feather", "x");
|
||||
}
|
||||
feather.replace();
|
||||
});
|
||||
|
||||
// Close mobile menu when clicking on a link
|
||||
document.querySelectorAll("#mobile-menu a").forEach((link) => {
|
||||
link.addEventListener("click", () => {
|
||||
document.getElementById("mobile-menu").classList.add("hidden");
|
||||
document
|
||||
.getElementById("mobile-menu-button")
|
||||
.querySelector("i")
|
||||
.setAttribute("data-feather", "menu");
|
||||
feather.replace();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<include src="src/partials/structure/footer.html"></include>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
60
src/init.js
Normal file
60
src/init.js
Normal file
@@ -0,0 +1,60 @@
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
VANTA.NET({
|
||||
el: "#vanta-bg",
|
||||
mouseControls: true,
|
||||
touchControls: true,
|
||||
gyroControls: false,
|
||||
minHeight: 200.0,
|
||||
minWidth: 200.0,
|
||||
scale: 1.0,
|
||||
scaleMobile: 1.0,
|
||||
color: 0xf97316,
|
||||
backgroundColor: 0x111827,
|
||||
points: 10.0,
|
||||
maxDistance: 22.0,
|
||||
spacing: 18.0,
|
||||
});
|
||||
// Initialize feather icons with retry
|
||||
function initFeather() {
|
||||
if (window.feather) {
|
||||
feather.replace();
|
||||
} else {
|
||||
setTimeout(initFeather, 100);
|
||||
}
|
||||
}
|
||||
initFeather();
|
||||
// Mobile menu toggle
|
||||
function setMenuIcon(orig, icon) {
|
||||
const i = document.createElement("i");
|
||||
i.setAttribute("data-feather", icon);
|
||||
orig.replaceWith(i);
|
||||
feather.replace();
|
||||
}
|
||||
document
|
||||
.getElementById("mobile-menu-button")
|
||||
.addEventListener("click", function () {
|
||||
const menu = document.getElementById("mobile-menu");
|
||||
menu.classList.toggle("hidden");
|
||||
|
||||
// Change icon based on state
|
||||
const svg = this.querySelector("svg");
|
||||
let icon = "x"
|
||||
if (menu.classList.contains("hidden")) {
|
||||
icon = "menu"
|
||||
}
|
||||
setMenuIcon(svg, icon);
|
||||
});
|
||||
|
||||
// Close mobile menu when clicking on a link
|
||||
document.querySelectorAll("#mobile-menu a").forEach((link) => {
|
||||
link.addEventListener("click", () => {
|
||||
document.getElementById("mobile-menu").classList.add("hidden");
|
||||
const icon = document
|
||||
.getElementById("mobile-menu-button")
|
||||
.querySelector("svg")
|
||||
setMenuIcon(icon, "menu");
|
||||
});
|
||||
});
|
||||
|
||||
})
|
||||
421
src/main.css
Normal file
421
src/main.css
Normal file
@@ -0,0 +1,421 @@
|
||||
:root {
|
||||
--bg-primary: #FFFFFF;
|
||||
--bg-secondary: #f9fafb;
|
||||
--text-primary: #343434;
|
||||
--text-primary-invert: #f9fafb;
|
||||
--text-secondary: #9ca3af;
|
||||
--text-accent: #f97316;
|
||||
--footer-bg: #111827;
|
||||
--border-radius: 0.5rem;
|
||||
--transition-duration: 0.3s;
|
||||
--bottom-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
|
||||
--smooth-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.08);
|
||||
|
||||
--red: #AA3333;
|
||||
--orange: coral;
|
||||
--blue: cornflowerblue;
|
||||
--green: #77cfa5;
|
||||
--grey: #AAAAAA;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
scroll-behavior: smooth;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
#vanta-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
background-color: #111827;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
pre {
|
||||
text-wrap: auto;
|
||||
background-color: var(--text-primary);
|
||||
padding: 1rem;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--bottom-shadow);
|
||||
font-size: 0.875rem;
|
||||
|
||||
code {
|
||||
color: var(--text-primary-invert);
|
||||
|
||||
span {
|
||||
color: var(--green);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
background-image: linear-gradient(to right, #f97316, #7c3aed);
|
||||
}
|
||||
|
||||
|
||||
.button {
|
||||
background-color: var(--text-accent);
|
||||
color: var(--text-primary-invert);
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: background-color var(--transition-duration);
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
|
||||
.feather {
|
||||
vertical-align: middle;
|
||||
margin-left: 0.1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 14px 0 rgba(249, 115, 22, 0.69);
|
||||
}
|
||||
}
|
||||
|
||||
.picto {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
|
||||
&.red {
|
||||
color: var(--red);
|
||||
background-color: hsl(from var(--red) h s calc(l*1.4));
|
||||
}
|
||||
|
||||
&.blue {
|
||||
color: var(--blue);
|
||||
background-color: hsl(from var(--blue) h s calc(l*1.4));
|
||||
}
|
||||
|
||||
&.orange {
|
||||
color: var(--orange);
|
||||
background-color: hsl(from var(--orange) h s calc(l*1.4));
|
||||
}
|
||||
|
||||
&.green {
|
||||
color: var(--green);
|
||||
background-color: hsl(from var(--green) h s calc(l*1.4));
|
||||
}
|
||||
|
||||
&.grey {
|
||||
color: var(--grey);
|
||||
background-color: hsl(from var(--grey) h s calc(l*1.4));
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
|
||||
.nav-links {
|
||||
display: none;
|
||||
gap: 1.5rem;
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
.feather {
|
||||
vertical-align: middle;
|
||||
margin-right: 0.25rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
transition: color .2s ease-in-out;
|
||||
text-decoration: none;
|
||||
color: var(--text-primary);
|
||||
|
||||
&:hover {
|
||||
color: var(--text-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#navbar {
|
||||
max-width: 80rem;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
padding: 1rem 0;
|
||||
justify-content: space-between;
|
||||
|
||||
img {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#hero {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 6rem 1rem 8rem 1rem;
|
||||
|
||||
#hero-content {
|
||||
h1 {
|
||||
font-size: 3.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
max-width: 80rem;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: var(--text-primary-invert);
|
||||
|
||||
p {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
padding: .5rem 0.5rem;
|
||||
|
||||
>div {
|
||||
margin: 0 auto;
|
||||
max-width: 80rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
>div:nth-child(1) {
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.diapo {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
>div {
|
||||
border: 1px solid rgba(from var(--text-primary) / 0.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 1rem;
|
||||
background-color: var(--bg-secondary);
|
||||
padding: 0.2rem 1rem;
|
||||
transition: all .3s ease-in-out;
|
||||
flex: 1;
|
||||
min-width: 15rem;
|
||||
|
||||
p {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.action {
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-bottom: 1rem
|
||||
}
|
||||
}
|
||||
|
||||
#demo {
|
||||
.video-player {
|
||||
width: 65%;
|
||||
margin: 0 auto;
|
||||
height: 26rem;
|
||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#tutorials {
|
||||
.video-player {
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
height: 16rem;
|
||||
}
|
||||
|
||||
.diapo {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#cta {
|
||||
padding: 4rem 1rem;
|
||||
background: linear-gradient(to right, #f97316, #7c3aed);
|
||||
|
||||
h2 {
|
||||
color: var(--text-primary-invert);
|
||||
}
|
||||
|
||||
color: var(--text-primary-invert);
|
||||
|
||||
.button {
|
||||
background-color: var(--text-primary-invert);
|
||||
color: var(--text-primary);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-top: 1rem;
|
||||
background-color: var(--footer-bg);
|
||||
color: var(--text-primary-invert);
|
||||
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.diapo {
|
||||
max-width: 80rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.diapo>div {
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 3rem
|
||||
}
|
||||
|
||||
.feather {
|
||||
margin-right: 0.5rem;
|
||||
justify-self: center;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.video-player iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
|
||||
#mobile-menu-button {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
z-index: 30;
|
||||
|
||||
.feather {
|
||||
height: 2rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
#mobile-menu {
|
||||
position: absolute;
|
||||
background-color: var(--bg-primary);
|
||||
width: 100%;
|
||||
z-index: 20;
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:visited {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--text-secondary);
|
||||
text-decoration: none;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
>div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 769px) {
|
||||
|
||||
#mobile-menu,
|
||||
#mobile-menu-button {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-color: var(--bg-secondary);
|
||||
box-shadow: var(--bottom-shadow);
|
||||
|
||||
#navbar {
|
||||
padding: 1rem 2rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
#hero {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
section,
|
||||
nav {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
|
||||
.diapo {
|
||||
gap: 0.8em;
|
||||
|
||||
>div {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.action {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
html, body {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.vanta-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
background-color: #111827;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.gradient-text {
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
background-image: linear-gradient(to right, #f97316, #7c3aed);
|
||||
}
|
||||
18
src/partials/content/cta.html
Normal file
18
src/partials/content/cta.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<section id="cta">
|
||||
<div>
|
||||
<h2>Ready to Simplify Your Kubernetes Deployments?</h2>
|
||||
<p>
|
||||
Start converting your Docker Compose files to Helm Charts today with
|
||||
Katenary.
|
||||
</p>
|
||||
<div>
|
||||
<a
|
||||
class="button"
|
||||
href="https://repo.katenary.io/katenary/katenary"
|
||||
target="_blank"
|
||||
>
|
||||
Get Katenary Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
16
src/partials/content/demo.html
Normal file
16
src/partials/content/demo.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<section id="demo">
|
||||
<div>
|
||||
<div>
|
||||
<h2><i data-feather="eye"></i> See Katenary in Action</h2>
|
||||
<p>Watch how easily you can convert Docker Compose to Helm Charts</p>
|
||||
</div>
|
||||
<div class="video-player">
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/RrX5jNxS9IA"
|
||||
title="YouTube video player"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
39
src/partials/content/features.html
Normal file
39
src/partials/content/features.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<section id="features">
|
||||
<div>
|
||||
<h2><i data-feather="key"></i> Why Choose Katenary</h2>
|
||||
<p>Powerful features to simplify your Kubernetes deployment workflow</p>
|
||||
</div>
|
||||
<div class="diapo">
|
||||
<div>
|
||||
<div class="picto orange">
|
||||
<i data-feather="repeat"></i>
|
||||
</div>
|
||||
<h3>Automated Conversion</h3>
|
||||
<p>
|
||||
Transform your Docker Compose files into fully functional Helm Charts
|
||||
with a single command.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="picto blue">
|
||||
<i data-feather="git-pull-request"></i>
|
||||
</div>
|
||||
<h3>Open Source & Free</h3>
|
||||
<p>
|
||||
Built with Go, Katenary is 100% open source and free to use forever.
|
||||
Contribute and customize to your needs.
|
||||
</p>
|
||||
<p>Licensed under MIT</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="picto orange">
|
||||
<i data-feather="package"></i>
|
||||
</div>
|
||||
<h3>Easy Installation</h3>
|
||||
<p>
|
||||
Available as native packages for Debian, RPM, Arch, Windows, and as a
|
||||
container image.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
16
src/partials/content/hero.html
Normal file
16
src/partials/content/hero.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<div id="hero">
|
||||
<div id="vanta-bg" style="min-height: 100vh"></div>
|
||||
<div id="hero-content">
|
||||
<div>
|
||||
<h1>
|
||||
<span class="gradient-text">From Docker Compose</span>
|
||||
<span>to Helm Charts</span>
|
||||
</h1>
|
||||
<p>
|
||||
Automatically convert your docker-compose.yaml files into complete Helm
|
||||
Charts ready for Kubernetes.
|
||||
</p>
|
||||
<a class="button" href="#installation"> Get Started </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
81
src/partials/content/install.html
Normal file
81
src/partials/content/install.html
Normal file
@@ -0,0 +1,81 @@
|
||||
<section id="installation">
|
||||
<div>
|
||||
<h2><i data-feather="package"></i> Install Katenary</h2>
|
||||
<p>Multiple installation options to fit your environment</p>
|
||||
</div>
|
||||
<div class="diapo">
|
||||
<!-- Package Repositories -->
|
||||
<div>
|
||||
<div class="picto orange">
|
||||
<i data-feather="package"></i>
|
||||
</div>
|
||||
<h3>Package Repositories</h3>
|
||||
<p>
|
||||
Install using your system's package manager. Packages available for
|
||||
RPM-based (Fedora, RHEL, Alma, Rocky), Debian-based (Ubuntu), and Arch
|
||||
Linux.
|
||||
</p>
|
||||
<div class="action">
|
||||
<a
|
||||
class="button"
|
||||
href="https://repo.katenary.io/Katenary/-/packages"
|
||||
target="_blank"
|
||||
>
|
||||
View Packages
|
||||
<i data-feather="arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- macOS Download -->
|
||||
<div>
|
||||
<div class="picto grey">
|
||||
<i data-feather="command"></i>
|
||||
</div>
|
||||
<h3>macOS Binary</h3>
|
||||
<p>Download the macOS executable</p>
|
||||
<div class="action">
|
||||
<a
|
||||
class="button"
|
||||
href="https://repo.katenary.io/api/packages/Katenary/generic/katenary/3.0.0/katenary-darwin-amd64"
|
||||
>
|
||||
Download Binary
|
||||
<i data-feather="download"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Windows Installer -->
|
||||
<div>
|
||||
<div class="picto green">
|
||||
<i data-feather="hexagon"></i>
|
||||
</div>
|
||||
<h3>Windows Setup</h3>
|
||||
<p>Download and run the Windows installer</p>
|
||||
<div class="action">
|
||||
<a
|
||||
class="button"
|
||||
href="https://repo.katenary.io/api/packages/Katenary/generic/katenary/3.0.0/katenary-windows-setup.exe"
|
||||
>
|
||||
Download EXE <i data-feather="download"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Container Image -->
|
||||
<div>
|
||||
<div class="picto blue">
|
||||
<i data-feather="package"></i>
|
||||
</div>
|
||||
<h3>Container Image</h3>
|
||||
<p>Run Katenary in a container</p>
|
||||
<div class="action">
|
||||
<a
|
||||
class="button"
|
||||
href="https://repo.katenary.io/Katenary/-/packages/container/katenary/latest"
|
||||
target="_blank"
|
||||
>
|
||||
Pull Image <i data-feather="arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
17
src/partials/content/quickstart.html
Normal file
17
src/partials/content/quickstart.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<section>
|
||||
<div>
|
||||
<h2><i data-feather="terminal"></i> Terminal</h2>
|
||||
<p>
|
||||
It's simple. One command to convert your project to an Helm Chart and
|
||||
you're ready.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<pre>
|
||||
<code><span ># Convert your compose file to Helm Chart</span>
|
||||
katenary convert
|
||||
|
||||
<span># Install the generated chart to your cluster</span>
|
||||
helm install my-app ./chart</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
42
src/partials/content/tuto.html
Normal file
42
src/partials/content/tuto.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<section id="tutorials">
|
||||
<div>
|
||||
<h2><i data-feather="video"></i> Video Tutorials</h2>
|
||||
<p>Learn how to use Katenary with these step-by-step guides</p>
|
||||
</div>
|
||||
|
||||
<div class="diapo">
|
||||
<!-- Tutorial 1 -->
|
||||
<div>
|
||||
<div class="video-player">
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/kvVN8gPxqOA"
|
||||
title="YouTube video player"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Getting Started with Katenary</h3>
|
||||
<p>
|
||||
Learn the basics of converting Docker Compose files to Helm Charts
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tutorial 2 -->
|
||||
<div>
|
||||
<div class="video-player">
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/QtFOO1LnSVg"
|
||||
title="YouTube video player"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Advanced Katenary Features</h3>
|
||||
<p>Explore advanced configuration options and customization</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,20 +0,0 @@
|
||||
<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>
|
||||
@@ -1,23 +0,0 @@
|
||||
<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,59 +0,0 @@
|
||||
<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="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,94 +0,0 @@
|
||||
<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>
|
||||
<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>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Resources</h3>
|
||||
<ul class="space-y-2">
|
||||
<li>
|
||||
<a
|
||||
href="https://repo.katenary.io/katenary/katenary"
|
||||
target="_blank"
|
||||
class="hover:text-orange-400 transition"
|
||||
>Repository</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<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
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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,23 +0,0 @@
|
||||
<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,113 +0,0 @@
|
||||
<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>
|
||||
@@ -1,73 +0,0 @@
|
||||
<!-- 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>
|
||||
67
src/partials/structure/footer.html
Normal file
67
src/partials/structure/footer.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<footer>
|
||||
<div class="diapo">
|
||||
<div>
|
||||
<div class="logo">
|
||||
<img
|
||||
src="https://repo.katenary.io/Katenary/katenary/raw/branch/master/doc/docs/statics/logo-vertical.svg"
|
||||
alt="Katenary Logo"
|
||||
/>
|
||||
</div>
|
||||
<p>Convert Docker Compose to Helm Charts with ease.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Resources</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://repo.katenary.io/katenary/katenary" target="_blank"
|
||||
>Repository</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://repo.katenary.io/Katenary/-/packages" target="_blank"
|
||||
>Packages</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://docs.katenary.io">Documentation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Community</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://repo.katenary.io/Katenary/katenary/issues"
|
||||
target="_blank"
|
||||
>Git Issues</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://matrix.to/#/#katenary-io:matrix.org" target="_blank"
|
||||
>Matrix Room</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://repo.katenary.io/Katenary/katenary" target="_blank"
|
||||
>Contribute</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Connect</h3>
|
||||
<div>
|
||||
<a href="https://www.linkedin.com/company/katenary" target="_blank"
|
||||
><i data-feather="linkedin"></i
|
||||
></a>
|
||||
<a href="https://www.youtube.com/@Katenary"
|
||||
><i data-feather="youtube"></i
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
<p>© 2025 Katenary. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
34
src/partials/structure/nav.html
Normal file
34
src/partials/structure/nav.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!-- Navigation -->
|
||||
<nav>
|
||||
<div id="navbar">
|
||||
<div class="brand">
|
||||
<img
|
||||
src="https://repo.katenary.io/Katenary/katenary/raw/branch/master/doc/docs/statics/logo-vertical.svg"
|
||||
alt="Katenary Logo"
|
||||
/>
|
||||
</div>
|
||||
<div class="nav-links">
|
||||
<a href="#features"><i data-feather="list"></i> Features</a>
|
||||
<a href="#installation"><i data-feather="terminal"></i> Installation</a>
|
||||
<a href="#tutorials"><i data-feather="cpu"></i> Tutorials</a>
|
||||
<a href="https://repo.katenary.io/katenary/katenary" target="_blank">
|
||||
<i data-feather="git-branch"></i> Repository
|
||||
</a>
|
||||
</div>
|
||||
<!-- Mobile menu button -->
|
||||
<button id="mobile-menu-button">
|
||||
<i data-feather="menu"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Mobile menu -->
|
||||
<div id="mobile-menu" class="hidden">
|
||||
<div>
|
||||
<a href="#features"><i data-feather="list"></i> Features</a>
|
||||
<a href="#installation"><i data-feather="terminal"></i> Installation</a>
|
||||
<a href="#tutorials"><i data-feather="cpu"></i> Tutorials</a>
|
||||
<a href="https://repo.katenary.io/katenary/katenary" target="_blank">
|
||||
<i data-feather="git-branch"></i> Repository
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -1,58 +0,0 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user