diff --git a/src/index.html b/src/index.html index 91097d3..2902539 100644 --- a/src/index.html +++ b/src/index.html @@ -17,89 +17,32 @@ content="Katenary, Helm, Kubernetes, Compose, Docker, Podman, Helm chart" /> - + - + + diff --git a/src/init.js b/src/init.js new file mode 100644 index 0000000..9b49d43 --- /dev/null +++ b/src/init.js @@ -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"); + }); + }); + +}) diff --git a/src/main.css b/src/main.css new file mode 100644 index 0000000..c410638 --- /dev/null +++ b/src/main.css @@ -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; + } + } + +} diff --git a/src/main.scss b/src/main.scss deleted file mode 100644 index e61261c..0000000 --- a/src/main.scss +++ /dev/null @@ -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); -} diff --git a/src/partials/content/cta.html b/src/partials/content/cta.html new file mode 100644 index 0000000..eb5f1ba --- /dev/null +++ b/src/partials/content/cta.html @@ -0,0 +1,18 @@ +
+
+

Ready to Simplify Your Kubernetes Deployments?

+

+ Start converting your Docker Compose files to Helm Charts today with + Katenary. +

+
+ + Get Katenary Now + +
+
+
diff --git a/src/partials/content/demo.html b/src/partials/content/demo.html new file mode 100644 index 0000000..d7de928 --- /dev/null +++ b/src/partials/content/demo.html @@ -0,0 +1,16 @@ +
+
+
+

See Katenary in Action

+

Watch how easily you can convert Docker Compose to Helm Charts

+
+
+ +
+
+
diff --git a/src/partials/content/features.html b/src/partials/content/features.html new file mode 100644 index 0000000..0f18071 --- /dev/null +++ b/src/partials/content/features.html @@ -0,0 +1,39 @@ +
+
+

Why Choose Katenary

+

Powerful features to simplify your Kubernetes deployment workflow

+
+
+
+
+ +
+

Automated Conversion

+

+ Transform your Docker Compose files into fully functional Helm Charts + with a single command. +

+
+
+
+ +
+

Open Source & Free

+

+ Built with Go, Katenary is 100% open source and free to use forever. + Contribute and customize to your needs. +

+

Licensed under MIT

+
+
+
+ +
+

Easy Installation

+

+ Available as native packages for Debian, RPM, Arch, Windows, and as a + container image. +

+
+
+
diff --git a/src/partials/content/hero.html b/src/partials/content/hero.html new file mode 100644 index 0000000..e561ea2 --- /dev/null +++ b/src/partials/content/hero.html @@ -0,0 +1,16 @@ +
+
+
+
+

+ From Docker Compose + to Helm Charts +

+

+ Automatically convert your docker-compose.yaml files into complete Helm + Charts ready for Kubernetes. +

+ Get Started +
+
+
diff --git a/src/partials/content/install.html b/src/partials/content/install.html new file mode 100644 index 0000000..f4f276b --- /dev/null +++ b/src/partials/content/install.html @@ -0,0 +1,81 @@ +
+
+

Install Katenary

+

Multiple installation options to fit your environment

+
+
+ +
+
+ +
+

Package Repositories

+

+ Install using your system's package manager. Packages available for + RPM-based (Fedora, RHEL, Alma, Rocky), Debian-based (Ubuntu), and Arch + Linux. +

+
+ + View Packages + + +
+
+ +
+
+ +
+

macOS Binary

+

Download the macOS executable

+
+ + Download Binary + + +
+
+ + +
+
+ +
+

Windows Setup

+

Download and run the Windows installer

+
+ + Download EXE + +
+
+ +
+
+ +
+

Container Image

+

Run Katenary in a container

+
+ + Pull Image + +
+
+
+
diff --git a/src/partials/content/quickstart.html b/src/partials/content/quickstart.html new file mode 100644 index 0000000..735c509 --- /dev/null +++ b/src/partials/content/quickstart.html @@ -0,0 +1,17 @@ +
+
+

Terminal

+

+ It's simple. One command to convert your project to an Helm Chart and + you're ready. +

+
+
+ 
+# Convert your compose file to Helm Chart
+katenary convert
+
+# Install the generated chart to your cluster
+helm install my-app ./chart
+
+
diff --git a/src/partials/content/tuto.html b/src/partials/content/tuto.html new file mode 100644 index 0000000..7e6d4aa --- /dev/null +++ b/src/partials/content/tuto.html @@ -0,0 +1,42 @@ +
+
+

Video Tutorials

+

Learn how to use Katenary with these step-by-step guides

+
+ +
+ +
+
+ +
+
+

Getting Started with Katenary

+

+ Learn the basics of converting Docker Compose files to Helm Charts +

+
+
+ + +
+
+ +
+
+

Advanced Katenary Features

+

Explore advanced configuration options and customization

+
+
+
+
diff --git a/src/partials/cta.html b/src/partials/cta.html deleted file mode 100644 index e667edf..0000000 --- a/src/partials/cta.html +++ /dev/null @@ -1,20 +0,0 @@ -
-
-

- Ready to Simplify Your Kubernetes Deployments? -

-

- Start converting your Docker Compose files to Helm Charts today with - Katenary. -

-
- - Get Katenary Now - -
-
-
diff --git a/src/partials/demo.html b/src/partials/demo.html deleted file mode 100644 index cc2c8a1..0000000 --- a/src/partials/demo.html +++ /dev/null @@ -1,23 +0,0 @@ -
-
-
-

- See Katenary in Action -

-

- Watch how easily you can convert Docker Compose to Helm Charts -

-
-
- -
-
-
diff --git a/src/partials/features.html b/src/partials/features.html deleted file mode 100644 index ed024e7..0000000 --- a/src/partials/features.html +++ /dev/null @@ -1,59 +0,0 @@ -
-
-
-

Why Choose Katenary

-

- Powerful features to simplify your Kubernetes deployment workflow -

-
-
-
-
- -
-

- Automated Conversion -

-

- Transform your Docker Compose files into fully functional Helm Charts - with a single command. -

-
-
-
- -
-

Open Source & Free

-

- Built with Go, Katenary is 100% open source and free to use forever. - Contribute and customize to your needs. -

-
-
-
- -
-

Easy Installation

-

- Available as native packages for Debian, RPM, Arch, Windows, and as a - container image. -

-
-
-
-
diff --git a/src/partials/footer.html b/src/partials/footer.html deleted file mode 100644 index 4a19ace..0000000 --- a/src/partials/footer.html +++ /dev/null @@ -1,94 +0,0 @@ - diff --git a/src/partials/hero.html b/src/partials/hero.html deleted file mode 100644 index b4ef3e9..0000000 --- a/src/partials/hero.html +++ /dev/null @@ -1,23 +0,0 @@ -
-
-
-
-

- From Docker Compose - to Helm Charts -

-

- Automatically convert your docker-compose.yaml files into complete Helm - Charts ready for Kubernetes. -

-
- - Get Started - -
-
-
-
diff --git a/src/partials/install.html b/src/partials/install.html deleted file mode 100644 index 6f69d96..0000000 --- a/src/partials/install.html +++ /dev/null @@ -1,113 +0,0 @@ -
-
-
-

Install Katenary

-

- Multiple installation options to fit your environment -

-
-
- -
-
- -

Package Repositories

-
-

- Install using your system's package manager. Packages available for - RPM-based (Fedora, RHEL, Alma, Rocky), Debian-based (Ubuntu), and Arch - Linux. -

- - View Packages - - -
- -
-
- -

macOS Binary

-
-

Download the macOS executable

- - Download Binary - - -
- - -
-
- - - - -

Windows Setup

-
-

Download and run the Windows installer

- - Download EXE - -
- -
-
- -

Container Image

-
-

Run Katenary in a container

- - Pull Image - -
-
- - -
-
-
-
-
-
-
-

Terminal

-
-
- 
-# Convert your compose file to Helm Chart
-katenary convert
-
-# Install the generated chart to your cluster
-helm install my-app ./helm-chart
-
-
-
-
diff --git a/src/partials/nav.html b/src/partials/nav.html deleted file mode 100644 index 5900cbf..0000000 --- a/src/partials/nav.html +++ /dev/null @@ -1,73 +0,0 @@ - - diff --git a/src/partials/structure/footer.html b/src/partials/structure/footer.html new file mode 100644 index 0000000..1877ea6 --- /dev/null +++ b/src/partials/structure/footer.html @@ -0,0 +1,67 @@ + diff --git a/src/partials/structure/nav.html b/src/partials/structure/nav.html new file mode 100644 index 0000000..f45d2c0 --- /dev/null +++ b/src/partials/structure/nav.html @@ -0,0 +1,34 @@ + + diff --git a/src/partials/tuto.html b/src/partials/tuto.html deleted file mode 100644 index b91abdb..0000000 --- a/src/partials/tuto.html +++ /dev/null @@ -1,58 +0,0 @@ -
-
-
-

Video Tutorials

-

- Learn how to use Katenary with these step-by-step guides -

-
- -
- -
-
- -
-
-

- Getting Started with Katenary -

-

- Learn the basics of converting Docker Compose files to Helm Charts -

-
-
- - -
-
- -
-
-

- Advanced Katenary Features -

-

- Explore advanced configuration options and customization -

-
-
-
-
-