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:
5
Makefile
5
Makefile
@@ -13,7 +13,6 @@ dist: $(wildcard src/* compose.yaml)
|
|||||||
deploy: build
|
deploy: build
|
||||||
helm -n $(NS) upgrade --install $(RELEASE) ./chart/ -f override.yaml --create-namespace
|
helm -n $(NS) upgrade --install $(RELEASE) ./chart/ -f override.yaml --create-namespace
|
||||||
sleep 1
|
sleep 1
|
||||||
$(MAKE) add-redirect
|
|
||||||
kubectl -n $(NS) rollout restart deployment $(RELEASE)-server
|
kubectl -n $(NS) rollout restart deployment $(RELEASE)-server
|
||||||
|
|
||||||
venv:
|
venv:
|
||||||
@@ -23,5 +22,9 @@ add-redirect: venv
|
|||||||
kubectl -n $(NS) apply -f <(./venv/bin/python add-domain.py)
|
kubectl -n $(NS) apply -f <(./venv/bin/python add-domain.py)
|
||||||
|
|
||||||
serve:
|
serve:
|
||||||
|
$(MAKE) stop
|
||||||
rm -rf dist
|
rm -rf dist
|
||||||
podman compose up
|
podman compose up
|
||||||
|
|
||||||
|
stop:
|
||||||
|
-podman compose down
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
# This is the main values.yaml file for the website chart.
|
# This is the main values.yaml file for the website chart.
|
||||||
# More information can be found in the chart's README.md file.
|
# More information can be found in the chart's README.md file.
|
||||||
#
|
#
|
||||||
# generated at: 2025-09-15T21:40:24+02:00
|
# generated at: 2025-10-19T09:24:08+02:00
|
||||||
# compose files: compose.katenary.yaml, compose.yaml
|
# compose files: compose.katenary.yaml, compose.yaml
|
||||||
# compose hash (sha1): 76866ef0672f04e085c6e3d50e4e8431d1d95bc0
|
# compose hash (sha1): 76866ef0672f04e085c6e3d50e4e8431d1d95bc0
|
||||||
|
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ kind: Deployment
|
|||||||
metadata:
|
metadata:
|
||||||
annotations:
|
annotations:
|
||||||
katenary.v3/compose-hash: 76866ef0672f04e085c6e3d50e4e8431d1d95bc0
|
katenary.v3/compose-hash: 76866ef0672f04e085c6e3d50e4e8431d1d95bc0
|
||||||
katenary.v3/version: master-f3c1bf3
|
katenary.v3/version: master
|
||||||
labels:
|
labels:
|
||||||
{{- include "website.labels" . | nindent 4 }}
|
{{- include "website.labels" . | nindent 4 }}
|
||||||
katenary.v3/component: server
|
katenary.v3/component: server
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ kind: Ingress
|
|||||||
metadata:
|
metadata:
|
||||||
annotations:
|
annotations:
|
||||||
katenary.v3/compose-hash: 76866ef0672f04e085c6e3d50e4e8431d1d95bc0
|
katenary.v3/compose-hash: 76866ef0672f04e085c6e3d50e4e8431d1d95bc0
|
||||||
katenary.v3/version: master-f3c1bf3
|
katenary.v3/version: master
|
||||||
{{- if .Values.server.ingress.annotations -}}
|
{{- if .Values.server.ingress.annotations -}}
|
||||||
{{- toYaml .Values.server.ingress.annotations | nindent 4 }}
|
{{- toYaml .Values.server.ingress.annotations | nindent 4 }}
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ kind: Service
|
|||||||
metadata:
|
metadata:
|
||||||
annotations:
|
annotations:
|
||||||
katenary.v3/compose-hash: 76866ef0672f04e085c6e3d50e4e8431d1d95bc0
|
katenary.v3/compose-hash: 76866ef0672f04e085c6e3d50e4e8431d1d95bc0
|
||||||
katenary.v3/version: master-f3c1bf3
|
katenary.v3/version: master
|
||||||
labels:
|
labels:
|
||||||
{{- include "website.labels" . | nindent 4 }}
|
{{- include "website.labels" . | nindent 4 }}
|
||||||
katenary.v3/component: server
|
katenary.v3/component: server
|
||||||
|
|||||||
386
chart/templates/server/statics/dist/configmap.yaml
vendored
386
chart/templates/server/statics/dist/configmap.yaml
vendored
File diff suppressed because one or more lines are too long
@@ -5,3 +5,5 @@ server:
|
|||||||
host: www.katenary.io
|
host: www.katenary.io
|
||||||
annotations:
|
annotations:
|
||||||
cert-manager.io/cluster-issuer: letsencrypt-prod
|
cert-manager.io/cluster-issuer: letsencrypt-prod
|
||||||
|
nginx.ingress.kubernetes.io/force-ssl-redirect: "true"
|
||||||
|
nginx.ingress.kubernetes.io/from-to-www-redirect: "true"
|
||||||
|
|||||||
BIN
src/bg-head.webp
BIN
src/bg-head.webp
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
@@ -1,187 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Examples | IcoFont</title>
|
|
||||||
<link rel="stylesheet" type="text/css" href="./icofont.min.css">
|
|
||||||
<style type="text/css">
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
background: #F6F6F9;
|
|
||||||
}
|
|
||||||
.header {
|
|
||||||
border-bottom: 1px solid #DCDCE1;
|
|
||||||
padding: 10px 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
width: 980px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.ico-title {
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
.iconlist {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
.iconlist li {
|
|
||||||
position: relative;
|
|
||||||
margin: 5px;
|
|
||||||
width: 150px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.iconlist li .icon-holder {
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 3px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
background: #ffffff;
|
|
||||||
border: 1px solid #E4E5EA;
|
|
||||||
transition: all 0.2s linear 0s;
|
|
||||||
}
|
|
||||||
.iconlist li .icon-holder:hover {
|
|
||||||
background: #00C3DA;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.iconlist li .icon-holder:hover .icon i {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.iconlist li .icon-holder .icon {
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.iconlist li .icon-holder .icon i {
|
|
||||||
font-size: 3em;
|
|
||||||
color: #1F1142;
|
|
||||||
}
|
|
||||||
.iconlist li .icon-holder span {
|
|
||||||
font-size: 14px;
|
|
||||||
display: block;
|
|
||||||
margin-top: 5px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="header">
|
|
||||||
<div class="container">
|
|
||||||
<h1 class="ico-title"> IcoFont Icons </h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="container">
|
|
||||||
<ul class="iconlist">
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<div class="icon-holder">
|
|
||||||
<div class="icon">
|
|
||||||
<i class="icofont-ui-home"></i>
|
|
||||||
</div>
|
|
||||||
<span> ui-home </span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<div class="icon-holder">
|
|
||||||
<div class="icon">
|
|
||||||
<i class="icofont-gear"></i>
|
|
||||||
</div>
|
|
||||||
<span> gear </span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<div class="icon-holder">
|
|
||||||
<div class="icon">
|
|
||||||
<i class="icofont-light-bulb"></i>
|
|
||||||
</div>
|
|
||||||
<span> light-bulb </span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<div class="icon-holder">
|
|
||||||
<div class="icon">
|
|
||||||
<i class="icofont-gears"></i>
|
|
||||||
</div>
|
|
||||||
<span> gears </span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<div class="icon-holder">
|
|
||||||
<div class="icon">
|
|
||||||
<i class="icofont-send-mail"></i>
|
|
||||||
</div>
|
|
||||||
<span> send-mail </span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<div class="icon-holder">
|
|
||||||
<div class="icon">
|
|
||||||
<i class="icofont-flash"></i>
|
|
||||||
</div>
|
|
||||||
<span> flash </span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<div class="icon-holder">
|
|
||||||
<div class="icon">
|
|
||||||
<i class="icofont-arrow-down"></i>
|
|
||||||
</div>
|
|
||||||
<span> arrow-down </span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<div class="icon-holder">
|
|
||||||
<div class="icon">
|
|
||||||
<i class="icofont-university"></i>
|
|
||||||
</div>
|
|
||||||
<span> university </span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<div class="icon-holder">
|
|
||||||
<div class="icon">
|
|
||||||
<i class="icofont-speech-comments"></i>
|
|
||||||
</div>
|
|
||||||
<span> speech-comments </span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<div class="icon-holder">
|
|
||||||
<div class="icon">
|
|
||||||
<i class="icofont-users-alt-6"></i>
|
|
||||||
</div>
|
|
||||||
<span> users-alt-6 </span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
Binary file not shown.
@@ -1,20 +0,0 @@
|
|||||||
<?xml version="1.0" standalone="no"?>
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<defs>
|
|
||||||
<font id="icofont" horiz-adv-x="1000" >
|
|
||||||
<font-face font-family="IcoFont" font-weight="400" font-style="Regular" units-per-em="1000" ascent="850" descent="-150" />
|
|
||||||
<missing-glyph horiz-adv-x="1000" />
|
|
||||||
<glyph glyph-name="ui-home" horiz-adv-x="1000" unicode="" d="M500-69c-75 0-150 1-225 0-105-1-164 82-161 161 4 72 2 145 1 217 0 16 3 26 19 34 117 61 233 124 349 186 13 7 23 7 35 0 116-63 232-125 349-186 14-8 19-16 18-32 0-75 0-150 0-225 0-89-64-154-153-155-78 0-155 0-232 0z m436 479c-13 5-27 9-39 16-125 65-249 131-372 199-19 10-33 9-50-1-126-68-251-134-377-201-43-23-86-5-96 40-7 27 7 54 38 70 116 62 231 124 347 185 30 16 60 34 92 47 13 5 33 5 45-1 148-77 295-156 441-234 29-15 41-43 33-71-9-29-31-46-62-49z" />
|
|
||||||
<glyph glyph-name="gear" horiz-adv-x="1000" unicode="" d="M937 442c-23-14-45-26-67-39-11-6-22-12-32-19-3-2-6-6-6-10-1-16 0-31-1-46 0-7 2-10 7-13 30-16 59-33 88-50 3-2 6-4 12-7-10-26-18-52-28-77-1-3-6-6-9-6-33 3-66 6-98 10-11 1-19 0-25-10-6-12-15-22-23-32-4-4-5-8-2-14 15-34 30-67 45-103-23-16-47-32-70-48-2-1-8 1-10 2-26 23-53 45-79 68-5 4-8 5-15 3-14-5-28-10-43-13-7-2-10-5-11-12-8-36-16-71-24-107h-92c-8 36-17 71-24 106-2 8-5 11-12 13-14 3-28 8-42 13-7 2-10 2-15-3-26-22-53-45-79-67-3-2-8-4-10-2-24 15-47 31-71 47 16 35 30 68 45 100 4 8 3 13-2 19-9 11-18 22-25 33-4 6-8 8-15 7-33-3-67-6-100-10-8 0-13 0-16 9-8 25-17 49-25 74 4 3 7 5 11 7 29 17 58 33 87 50 6 3 8 6 8 13-1 15-1 30 0 44 0 7-2 10-8 14-29 16-59 33-88 50-3 2-6 3-11 6 10 26 19 53 29 79 0 2 6 4 9 4 33-3 65-6 98-9 11-2 18 0 24 10 6 11 15 21 23 31 4 5 5 9 2 15-15 33-30 67-46 102 24 16 47 32 71 48 2 1 8 0 10-2 27-23 53-45 79-68 5-4 9-5 15-3 14 6 29 10 43 14 6 2 9 4 11 11 8 35 16 70 24 107h92c8-36 16-71 24-106 1-7 4-10 11-12 15-4 29-8 43-14 6-2 10-1 15 3l78 68c4 3 8 5 13 1 22-15 45-31 68-47-11-25-21-48-32-71-4-11-9-22-14-32-3-5-1-9 2-13 9-12 19-24 27-37 4-5 8-7 14-6 34 3 67 6 100 10 9 1 14 0 17-9 8-25 17-49 25-74z m-291-96c2 77-62 144-139 146-84 2-150-58-152-139-3-76 61-142 138-144 83-3 150 58 153 137z" />
|
|
||||||
<glyph glyph-name="light-bulb" horiz-adv-x="1000" unicode="" d="M577 74h-155c-12 0-22-10-22-22 0-12 10-22 22-22h155c12 0 22 10 22 22s-9 22-22 22z m-117-127c3-19 19-35 40-35s37 15 40 35c27 2 48 24 48 51h-176c0-28 21-49 48-51z m40 715c16 0 29 13 29 29v67c0 16-13 30-29 30-16 0-29-13-29-30v-67c0-16 13-29 29-29z m-191-42c6-8 15-12 24-12 6 0 12 1 17 5 13 10 16 28 7 41l-40 54c-10 13-28 16-41 7s-16-28-6-41l39-54z m-152-132l64-21c3-1 6-1 9-1 12 0 23 7 27 20 5 15-3 31-18 36l-64 21c-16 5-32-3-37-18-5-16 3-32 19-37z m686-162l-64 21c-15 5-32-4-37-19-5-15 4-32 19-37l64-20c3-1 6-2 9-2 12 0 24 8 28 20 5 16-3 32-19 37z m-622 21l-64-21c-16-5-24-21-19-37 4-12 15-20 28-20 3 0 6 1 9 2l64 20c15 5 23 22 18 37-5 15-21 24-36 19z m549 119c3 0 6 0 9 1l64 21c15 5 24 21 19 36-5 16-22 24-37 19l-64-21c-15-5-24-21-19-36 5-13 16-20 28-20z m-46 249c-13 9-31 6-41-7l-40-54c-9-13-6-31 7-41 5-4 11-5 17-5 9 0 18 4 23 12l40 54c10 13 7 31-6 41z m-129-608v68c20 33 46 72 70 101 28 36 45 81 45 130 0 116-94 209-210 209-116 0-210-93-210-209 0-49 17-94 45-130 25-31 48-65 68-99v-70h192z" />
|
|
||||||
<glyph glyph-name="gears" horiz-adv-x="1000" unicode="" d="M578 201c-4 2-5 5-5 9 0 10 0 20 0 31 0 2 2 5 4 7 7 4 14 8 21 12 15 9 29 17 45 26-6 17-11 33-17 50-2 6-5 6-11 6-22-3-44-5-66-7-4 0-7 1-9 4-6 9-12 17-19 25-2 3-3 5-1 8 4 7 7 14 10 22 7 15 14 31 21 47-15 11-31 21-45 32-4 2-6 1-9-1-17-15-35-30-52-46-3-2-6-3-9-1-10 3-19 6-29 9-5 1-7 3-8 8-5 23-10 47-16 71h-60c-6-25-11-48-17-72 0-4-3-6-7-7-9-3-19-6-28-9-5-2-7-1-10 2-18 15-35 30-53 45-1 1-5 2-7 1-15-10-31-21-46-32 10-23 20-46 30-68 2-4 2-7-1-10-6-7-11-13-15-20-4-7-9-8-16-8-22 3-44 5-66 7-2 0-5-1-6-3-6-17-12-35-18-53 3-2 5-3 7-4 19-11 39-22 58-33 4-2 5-5 5-9 0-10 0-20 0-30 0-4-1-7-5-9-19-11-39-22-58-33-2-1-4-3-7-5 6-16 11-33 17-49 2-6 5-6 10-6l67 7c4 0 7-1 10-5 5-7 10-15 16-22 4-4 4-8 2-13-10-21-20-43-30-66 16-11 31-22 47-32 1-1 5 0 7 1 17 15 35 30 52 45 3 3 6 4 10 2 9-3 18-6 28-9 4-1 7-3 8-8 5-24 10-47 16-71h60c6 24 11 48 17 71 1 5 2 7 7 8 10 3 19 6 29 9 4 2 6 1 10-2 17-15 34-30 52-45 1-1 5-2 6-1 16 10 32 21 47 32-10 23-20 46-30 68-2 4-1 7 1 10 6 7 12 13 16 21 4 7 9 7 16 7 22-3 43-5 65-7 2 0 6 2 6 4 7 17 13 34 19 52-4 2-6 3-8 4-20 11-39 22-58 33z m-230-71c-51 2-93 46-92 97 2 54 46 94 102 92 51-1 93-45 92-97-2-53-47-93-102-92z m349 304c3-15 7-30 10-46h40c3 16 7 31 10 47 1 3 2 4 5 5 6 1 13 3 19 6 3 1 4 0 6-2 12-10 23-19 34-29 1-1 4-1 5-1 10 7 20 14 30 21-7 15-13 30-20 44-1 3-1 5 1 7 4 4 8 8 10 13 3 5 6 5 11 5 14-2 28-3 42-4 2 0 4 1 4 2 4 11 8 23 12 34-2 1-3 2-5 3-12 7-25 14-38 22-2 1-3 2-3 5 1 7 0 14 1 20 0 2 1 4 2 5 5 3 9 5 14 8 10 5 19 11 29 17-3 11-7 21-11 32-1 4-3 4-7 4-14-2-29-3-43-4-3-1-5 0-6 2-4 6-8 11-12 16-2 2-2 4-1 6 2 4 4 9 6 14 5 10 9 20 14 31-10 7-20 14-29 20-3 2-4 1-6 0l-34-30c-2-2-4-2-6-1-6 2-12 4-19 6-3 1-4 2-5 5-3 16-7 31-10 47h-40c-3-16-7-32-10-47-1-3-2-4-5-5-6-1-12-3-19-6-2-1-4 0-6 2-11 9-23 19-34 29-1 1-4 1-5 1-10-7-20-14-30-21 7-15 13-30 20-44 1-3 1-5-1-7-4-4-8-8-10-13-3-5-6-6-11-5-14 2-28 3-42 4-1 0-4-1-4-2-4-11-8-22-12-34 2-1 3-2 4-3 13-7 26-14 39-21 2-2 3-3 3-6-1-7-1-13 0-20 0-2-1-4-3-5-13-7-26-15-38-22-2-1-3-2-5-3 4-11 8-22 11-32 1-4 3-4 7-4 14 2 29 3 43 4 3 1 5 0 7-3 3-5 6-10 10-14 3-3 3-5 1-9-6-14-12-28-19-43 10-7 20-14 30-21 1 0 4 0 5 1 11 10 23 20 34 29 2 2 4 3 6 2 6-3 13-5 19-6 3-1 4-2 5-6z m-33 143c1 35 30 61 66 60 34 0 61-29 60-63-1-34-30-61-66-60-33 1-61 30-60 63z m270-389c-9 5-17 10-26 15-2 1-3 2-2 4 0 5-1 10 0 14 0 1 1 3 1 3 4 3 7 4 10 6 7 4 13 8 20 12-2 8-5 15-7 22-1 3-3 3-5 3-10-1-20-2-30-3-2 0-3 0-5 2-2 4-5 8-8 11-1 1-1 3 0 4 1 3 3 7 4 10 3 7 6 14 10 22-7 4-14 9-21 14-2 1-3 0-4-1l-24-20c-1-2-2-2-4-1-4 2-9 3-13 4-2 1-3 2-3 4-3 10-5 21-8 32h-27c-3-11-5-22-7-33-1-2-2-2-4-3-4-1-8-2-13-4-2-1-3 0-4 1-8 7-16 14-24 20-1 1-2 1-3 1-7-5-14-10-21-14 5-11 9-21 14-31 0-2 0-4-1-5-3-3-5-6-7-9-2-4-4-4-7-4-10 2-20 2-30 3-1 0-2 0-3-1-3-8-5-16-8-24 1-1 2-1 3-2 9-5 18-10 27-15 1-1 2-2 2-4 0-5 0-9 0-13 0-2-1-4-2-4-9-5-18-10-27-16-1 0-2-1-3-2 2-7 5-15 8-22 0-3 2-3 4-3 10 1 21 2 31 3 2 1 3 0 4-2 2-3 5-7 7-10 2-2 2-3 1-6-4-9-9-19-13-30 7-5 14-10 21-14 1-1 2 0 3 0 8 7 16 14 24 21 1 1 2 1 4 1 4-2 9-3 13-5 2 0 3-1 4-3 2-11 4-22 7-33h28c2 11 5 22 7 33 0 2 1 3 3 3 5 2 9 3 13 4 2 1 3 1 5 0 8-7 16-14 23-21 1-1 3-1 3-1 8 5 15 10 22 15-5 11-10 21-14 31-1 2-1 3 0 5 3 3 6 6 8 9 1 3 4 3 7 3 10-1 20-2 29-3 1 0 3 1 3 2 3 8 6 16 9 23-2 1-3 2-4 2z m-130-17c-24 1-43 21-42 44 0 24 20 43 46 42 23-1 42-21 42-44-1-24-21-43-46-42z" />
|
|
||||||
<glyph glyph-name="send-mail" horiz-adv-x="1000" unicode="" d="M915 547h-489c-16 0-31-13-34-28l-70-338c-3-16 7-28 23-28h489c15 0 30 12 33 28l70 338c3 15-7 28-22 28z m-59-113l-217-105c-9-4-20-4-27 0l-174 105c-13 7-15 25-4 39 7 10 18 16 29 16 5 0 9-2 13-4l162-97 201 97c5 2 10 4 15 4 11 0 19-6 22-16 5-14-4-32-20-39z m-717 39h211c11 0 20 9 20 20s-9 20-20 20h-211c-11 0-20-9-20-20 0-11 9-20 20-20z m154-143h-210c-11 0-20-9-20-20s9-21 20-21h210c12 0 21 9 21 21s-9 20-21 20z m49 73c0 11-9 20-20 20h-126c-11 0-20-9-20-20 0-11 9-21 20-21h126c11 0 20 9 20 21z" />
|
|
||||||
<glyph glyph-name="flash" horiz-adv-x="1000" unicode="" d="M484 392h256c-121-161-242-320-362-480l-2 1c44 120 87 239 132 361-83-4-164-7-248-11 123 176 245 350 367 525l2-1c-48-131-96-263-145-395z" />
|
|
||||||
<glyph glyph-name="arrow-down" horiz-adv-x="1000" unicode="" d="M772 358l-53 54c-9 8-24 8-32 0l-137-137v352c0 13-10 23-23 23h-90c-13 0-23-10-23-23v-343l-127 128c-9 8-23 8-32 0l-54-54c-8-9-8-23 0-32l270-269c9-9 23-9 32 0l269 269c9 9 9 23 0 32z" />
|
|
||||||
<glyph glyph-name="university" horiz-adv-x="1000" unicode="" d="M196 369h111v-317h-111z m166 0h110v-317h-110z m166 0h110v-317h-110z m165 0h111v-317h-111z m-180 288v73h67l4-24h84v119h-67l-4 25h-108v-193l-403-161v-55h55c0-8 3-14 9-19 6-6 13-9 21-9h658c8 0 15 3 21 9 6 5 9 11 9 19h55v55l-401 161z m392-732c-6 6-13 8-21 8h-768c-8 0-15-2-21-8-6-5-9-12-9-19v-56h828v56c0 7-3 14-9 19z m-787 57c0-13 11-24 25-24h711c14 0 25 11 25 24s-11 25-25 25h-711c-14 0-25-11-25-25z" />
|
|
||||||
<glyph glyph-name="speech-comments" horiz-adv-x="1000" unicode="" d="M775 214c63 75 86 161 63 257-21 86-75 149-148 195-89 55-186 74-289 61-100-12-187-52-255-128-66-76-92-163-68-262 10-40 23-78 26-119 3-51-4-99-29-145-4-7-8-13-12-20 1-1 2-1 3-1 66 9 128 28 184 64 5 4 9 6 16 2 87-40 178-52 272-35 94 17 175 58 237 131z m158-232c-5 7-11 14-15 21-26 50-23 101-6 151 18 54 16 106-8 157-7 14-16 27-25 43-2-6-3-9-3-12-9-43-25-83-50-118-70-103-171-158-291-178-22-4-43-5-65-7 0-1 1-2 2-3 5-4 10-7 16-10 93-50 187-54 284-14 4 1 10 2 14 0 31-19 65-32 100-39 14-2 28-4 42-4 11 0 12 4 5 13z" />
|
|
||||||
<glyph glyph-name="users-alt-6" horiz-adv-x="1000" unicode="" d="M384 297c-99 74-81 185-27 239 63 63 164 63 226-2 54-57 65-164-27-236 47-19 84-50 113-89 54-74 72-157 67-247-1-12-9-11-17-11-96 0-193 0-289 0-69 0-138 0-207 0-10 0-15 2-16 12-7 120 28 224 123 302 16 13 34 23 54 32z m287 185c-37 28-61 62-66 108-6 71 38 135 107 154 68 19 141-15 170-80 27-61 12-127-39-170-3-3-19-7-3-15 90-44 135-121 154-216 6-30 8-60 5-90-1-10-4-14-15-14-84 1-167 1-251 0-10 0-14 4-18 12-26 52-62 95-112 125-10 6-10 9-2 17 33 38 48 82 42 132-2 18 2 27 18 33 3 1 5 2 10 4z m-494-121c-58 46-84 103-64 174 18 61 62 99 125 109 61 9 111-11 149-60-119-69-117-210-40-283-24-15-47-32-66-54-56-61-87-133-92-216-1-12-4-17-17-17-51 1-102 1-153 0-14 0-17 6-18 17-9 123 45 268 172 327 1 1 2 2 4 3z" />
|
|
||||||
</font>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,329 +0,0 @@
|
|||||||
/*!
|
|
||||||
* @package IcoFont
|
|
||||||
* @version 1.0.1
|
|
||||||
* @author
|
|
||||||
* @copyright 2025
|
|
||||||
* @license - https://icofont.com/license/
|
|
||||||
*/
|
|
||||||
|
|
||||||
@font-face
|
|
||||||
{
|
|
||||||
|
|
||||||
font-family: "IcoFont";
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: "Regular";
|
|
||||||
src: url("./fonts/icofont.woff2") format("woff2"),
|
|
||||||
url("./fonts/icofont.woff") format("woff");
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^="icofont-"], [class*=" icofont-"]
|
|
||||||
{
|
|
||||||
font-family: 'IcoFont' !important;
|
|
||||||
speak: none;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: normal;
|
|
||||||
font-variant: normal;
|
|
||||||
text-transform: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
word-wrap: normal;
|
|
||||||
direction: ltr;
|
|
||||||
line-height: 1;
|
|
||||||
/* Better Font Rendering =========== */
|
|
||||||
-webkit-font-feature-settings: "liga";
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-ui-home:before
|
|
||||||
{
|
|
||||||
content: "\ec5e";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-gear:before
|
|
||||||
{
|
|
||||||
content: "\ef3a";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-light-bulb:before
|
|
||||||
{
|
|
||||||
content: "\ef6b";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-gears:before
|
|
||||||
{
|
|
||||||
content: "\ef3b";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-send-mail:before
|
|
||||||
{
|
|
||||||
content: "\efdf";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-flash:before
|
|
||||||
{
|
|
||||||
content: "\ef32";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-arrow-down:before
|
|
||||||
{
|
|
||||||
content: "\ea5b";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-university:before
|
|
||||||
{
|
|
||||||
content: "\eaf3";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-speech-comments:before
|
|
||||||
{
|
|
||||||
content: "\eff2";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-users-alt-6:before
|
|
||||||
{
|
|
||||||
content: "\ed0b";
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^="icofont-"].icofont-duotone,
|
|
||||||
[class*=" icofont-"].icofont-duotone
|
|
||||||
{
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^="icofont-"].icofont-duotone:before,
|
|
||||||
[class*=" icofont-"].icofont-duotone:before
|
|
||||||
{
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^="icofont-"].icofont-duotone:after,
|
|
||||||
[class*=" icofont-"].icofont-duotone:after
|
|
||||||
{
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-xs
|
|
||||||
{
|
|
||||||
font-size: .5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-sm
|
|
||||||
{
|
|
||||||
font-size: .75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-md
|
|
||||||
{
|
|
||||||
font-size: 1.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-lg
|
|
||||||
{
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-1x
|
|
||||||
{
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-2x
|
|
||||||
{
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-3x
|
|
||||||
{
|
|
||||||
font-size: 3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-4x
|
|
||||||
{
|
|
||||||
font-size: 4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-5x
|
|
||||||
{
|
|
||||||
font-size: 5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-6x
|
|
||||||
{
|
|
||||||
font-size: 6em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-7x
|
|
||||||
{
|
|
||||||
font-size: 7em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-8x
|
|
||||||
{
|
|
||||||
font-size: 8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-9x
|
|
||||||
{
|
|
||||||
font-size: 9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-10x
|
|
||||||
{
|
|
||||||
font-size: 10em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-fw
|
|
||||||
{
|
|
||||||
text-align: center;
|
|
||||||
width: 1.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-ul
|
|
||||||
{
|
|
||||||
list-style-type: none;
|
|
||||||
padding-left: 0;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-ul > li
|
|
||||||
{
|
|
||||||
position: relative;
|
|
||||||
line-height: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-ul > li .icofont
|
|
||||||
{
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-border
|
|
||||||
{
|
|
||||||
border: solid 0.08em #f1f1f1;
|
|
||||||
border-radius: .1em;
|
|
||||||
padding: .2em .25em .15em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-pull-left
|
|
||||||
{
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-pull-right
|
|
||||||
{
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont.icofont-pull-left
|
|
||||||
{
|
|
||||||
margin-right: .3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont.icofont-pull-right
|
|
||||||
{
|
|
||||||
margin-left: .3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-spin
|
|
||||||
{
|
|
||||||
-webkit-animation: icofont-spin 2s infinite linear;
|
|
||||||
animation: icofont-spin 2s infinite linear;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-pulse
|
|
||||||
{
|
|
||||||
-webkit-animation: icofont-spin 1s infinite steps(8);
|
|
||||||
animation: icofont-spin 1s infinite steps(8);
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes icofont-spin
|
|
||||||
{
|
|
||||||
0%
|
|
||||||
{
|
|
||||||
-webkit-transform: rotate(0deg);
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
100%
|
|
||||||
{
|
|
||||||
-webkit-transform: rotate(360deg);
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes icofont-spin
|
|
||||||
{
|
|
||||||
0%
|
|
||||||
{
|
|
||||||
-webkit-transform: rotate(0deg);
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
100%
|
|
||||||
{
|
|
||||||
-webkit-transform: rotate(360deg);
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-rotate-90
|
|
||||||
{
|
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
|
|
||||||
-webkit-transform: rotate(90deg);
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-rotate-180
|
|
||||||
{
|
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
|
|
||||||
-webkit-transform: rotate(180deg);
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-rotate-270
|
|
||||||
{
|
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
|
|
||||||
-webkit-transform: rotate(270deg);
|
|
||||||
transform: rotate(270deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-flip-horizontal
|
|
||||||
{
|
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
|
|
||||||
-webkit-transform: scale(-1, 1);
|
|
||||||
transform: scale(-1, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-flip-vertical
|
|
||||||
{
|
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
|
|
||||||
-webkit-transform: scale(1, -1);
|
|
||||||
transform: scale(1, -1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-flip-horizontal.icofont-flip-vertical
|
|
||||||
{
|
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
|
|
||||||
-webkit-transform: scale(-1, -1);
|
|
||||||
transform: scale(-1, -1);
|
|
||||||
}
|
|
||||||
|
|
||||||
:root .icofont-rotate-90,
|
|
||||||
:root .icofont-rotate-180,
|
|
||||||
:root .icofont-rotate-270,
|
|
||||||
:root .icofont-flip-horizontal,
|
|
||||||
:root .icofont-flip-vertical
|
|
||||||
{
|
|
||||||
-webkit-filter: none;
|
|
||||||
filter: none;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icofont-inverse
|
|
||||||
{
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
7
src/icofont/icofont.min.css
vendored
7
src/icofont/icofont.min.css
vendored
@@ -1,7 +0,0 @@
|
|||||||
/*!
|
|
||||||
* @package IcoFont
|
|
||||||
* @version 1.0.1
|
|
||||||
* @author
|
|
||||||
* @copyright 2025
|
|
||||||
* @license - https://icofont.com/license/
|
|
||||||
*/@font-face{font-family:IcoFont;font-weight:400;font-style:Regular;src:url(fonts/icofont.woff2) format("woff2"),url(fonts/icofont.woff) format("woff")}[class*=" icofont-"],[class^=icofont-]{font-family:IcoFont!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;line-height:1;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}.icofont-ui-home:before{content:"\ec5e"}.icofont-gear:before{content:"\ef3a"}.icofont-light-bulb:before{content:"\ef6b"}.icofont-gears:before{content:"\ef3b"}.icofont-send-mail:before{content:"\efdf"}.icofont-flash:before{content:"\ef32"}.icofont-arrow-down:before{content:"\ea5b"}.icofont-university:before{content:"\eaf3"}.icofont-speech-comments:before{content:"\eff2"}.icofont-users-alt-6:before{content:"\ed0b"}[class*=" icofont-"].icofont-duotone,[class^=icofont-].icofont-duotone{position:relative}[class*=" icofont-"].icofont-duotone:before,[class^=icofont-].icofont-duotone:before{position:absolute;left:0;top:0}[class*=" icofont-"].icofont-duotone:after,[class^=icofont-].icofont-duotone:after{opacity:.4}.icofont-xs{font-size:.5em}.icofont-sm{font-size:.75em}.icofont-md{font-size:1.25em}.icofont-lg{font-size:1.5em}.icofont-1x{font-size:1em}.icofont-2x{font-size:2em}.icofont-3x{font-size:3em}.icofont-4x{font-size:4em}.icofont-5x{font-size:5em}.icofont-6x{font-size:6em}.icofont-7x{font-size:7em}.icofont-8x{font-size:8em}.icofont-9x{font-size:9em}.icofont-10x{font-size:10em}.icofont-fw{text-align:center;width:1.25em}.icofont-ul{list-style-type:none;padding-left:0;margin-left:0}.icofont-ul>li{position:relative;line-height:2em}.icofont-ul>li .icofont{display:inline-block;vertical-align:middle}.icofont-border{border:solid .08em #f1f1f1;border-radius:.1em;padding:.2em .25em .15em}.icofont-pull-left{float:left}.icofont-pull-right{float:right}.icofont.icofont-pull-left{margin-right:.3em}.icofont.icofont-pull-right{margin-left:.3em}.icofont-spin{-webkit-animation:icofont-spin 2s infinite linear;animation:icofont-spin 2s infinite linear;display:inline-block}.icofont-pulse{-webkit-animation:icofont-spin 1s infinite steps(8);animation:icofont-spin 1s infinite steps(8);display:inline-block}@-webkit-keyframes icofont-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes icofont-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.icofont-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.icofont-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.icofont-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.icofont-flip-horizontal{-webkit-transform:scale(-1,1);transform:scale(-1,1)}.icofont-flip-vertical{-webkit-transform:scale(1,-1);transform:scale(1,-1)}.icofont-flip-horizontal.icofont-flip-vertical{-webkit-transform:scale(-1,-1);transform:scale(-1,-1)}:root .icofont-flip-horizontal,:root .icofont-flip-vertical,:root .icofont-rotate-180,:root .icofont-rotate-270,:root .icofont-rotate-90{-webkit-filter:none;filter:none;display:inline-block}.icofont-inverse{color:#fff}
|
|
||||||
114
src/index.html
114
src/index.html
@@ -1,9 +1,13 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta name="go-import" content="katenary.io git https://repo.katenary.io/katenary/katenary">
|
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
|
<meta
|
||||||
|
name="go-import"
|
||||||
|
content="katenary.io git https://repo.katenary.io/katenary/katenary"
|
||||||
|
/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Katenary - Convert Docker Compose to Helm Charts</title>
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="Katenary: Effortless Helm Chart Conversion"
|
content="Katenary: Effortless Helm Chart Conversion"
|
||||||
@@ -13,33 +17,89 @@
|
|||||||
content="Katenary, Helm, Kubernetes, Compose, Docker, Podman, Helm chart"
|
content="Katenary, Helm, Kubernetes, Compose, Docker, Podman, Helm chart"
|
||||||
/>
|
/>
|
||||||
<meta name="author" content="Patrice Ferlet (aka metal3d)" />
|
<meta name="author" content="Patrice Ferlet (aka metal3d)" />
|
||||||
<link rel="icon" href="icon.ico" />
|
<link rel="stylesheet" type="text/css" href="./main.scss" />
|
||||||
<title>Katenary - Effortless Helm Chart Conversion</title>
|
<link rel="icon" href="./icon.ico" />
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<script src="links.js" defer></script>
|
<script src="https://unpkg.com/feather-icons"></script>
|
||||||
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
||||||
<script defer>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
|
||||||
hljs.highlightAll();
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
|
||||||
</script>
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/panda-syntax-dark.min.css"
|
|
||||||
/>
|
|
||||||
<link rel="stylesheet" href="icofont/icofont.min.css" />
|
|
||||||
<link rel="stylesheet" href="main.scss" />
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="font-sans antialiased text-gray-800 bg-gray-50">
|
||||||
<include src="src/partials/navbar.html"></include>
|
<!-- Navigation -->
|
||||||
<include src="src/partials/header.html"></include>
|
<include src="src/partials/nav.html"></include>
|
||||||
|
<!-- Hero Section with Vanta.js -->
|
||||||
<main>
|
<include src="src/partials/hero.html"></include>
|
||||||
<include src="src/partials/features.html"></include>
|
<!-- Features Section -->
|
||||||
<include src="src/partials/how-it-works.html"></include>
|
<include src="src/partials/features.html"></include>
|
||||||
<include src="src/partials/how-to-use.html"></include>
|
<!-- Demo Video Section -->
|
||||||
<include src="src/partials/tutorials.html"></include>
|
<include src="src/partials/demo.html"></include>
|
||||||
<include src="src/partials/get-started.html"></include>
|
<!-- Installation Section -->
|
||||||
</main>
|
<include src="src/partials/install.html"></include>
|
||||||
|
<!-- Tutorials Section -->
|
||||||
|
<include src="src/partials/tuto.html"></include>
|
||||||
|
<!-- CTA Section -->
|
||||||
|
<include src="src/partials/cta.html"></include>
|
||||||
|
<!-- Footer -->
|
||||||
<include src="src/partials/footer.html"></include>
|
<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>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
60
src/links.js
60
src/links.js
@@ -1,60 +0,0 @@
|
|||||||
document.addEventListener("DOMContentLoaded", () => {
|
|
||||||
const sections = document.querySelectorAll("main > section, body > header");
|
|
||||||
const links = document.querySelectorAll("nav a:not([target=_blank])");
|
|
||||||
const linksArray = Array.from(links);
|
|
||||||
|
|
||||||
let scrollingOnClick = false; // Deactivate the observer if the scroll is on a link click
|
|
||||||
|
|
||||||
// Intersection Observer
|
|
||||||
const observer = new IntersectionObserver(
|
|
||||||
(entries) => {
|
|
||||||
if (scrollingOnClick) return; // ignore if the scroll is manual
|
|
||||||
|
|
||||||
entries.forEach((entry) => {
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
const id = entry.target.id;
|
|
||||||
const link = linksArray.find((link) => link.href.includes(`#${id}`));
|
|
||||||
|
|
||||||
linksArray.forEach((link) => link.classList.remove("active"));
|
|
||||||
if (link) link.classList.add("active");
|
|
||||||
|
|
||||||
// update URL
|
|
||||||
history.replaceState(null, null, `#${id}`);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
{ rootMargin: "-50% 0px -50% 0px" },
|
|
||||||
);
|
|
||||||
|
|
||||||
sections.forEach((section) => observer.observe(section));
|
|
||||||
|
|
||||||
// Gestion du clic sur un lien
|
|
||||||
linksArray.forEach((link) => {
|
|
||||||
link.addEventListener("click", (e) => {
|
|
||||||
e.preventDefault(); // avoid default navigation
|
|
||||||
|
|
||||||
const targetId = link.getAttribute("href").slice(1);
|
|
||||||
const targetSection = document.getElementById(targetId);
|
|
||||||
|
|
||||||
// deactivate observer temporarily
|
|
||||||
scrollingOnClick = true;
|
|
||||||
|
|
||||||
// scroll to the target
|
|
||||||
targetSection.scrollIntoView({ behavior: "smooth" });
|
|
||||||
|
|
||||||
// update link state
|
|
||||||
linksArray.forEach((link) => link.classList.remove("active"));
|
|
||||||
link.classList.add("active");
|
|
||||||
|
|
||||||
// update URL
|
|
||||||
history.replaceState(null, null, `#${targetId}`);
|
|
||||||
|
|
||||||
// on scroll end, reactivate the observer
|
|
||||||
const onScrollEnd = () => {
|
|
||||||
scrollingOnClick = false;
|
|
||||||
window.removeEventListener("scroll", onScrollEnd); // Nettoyage
|
|
||||||
};
|
|
||||||
window.addEventListener("scroll", onScrollEnd);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
607
src/main.scss
607
src/main.scss
@@ -1,600 +1,19 @@
|
|||||||
/* styles.css */
|
html, body {
|
||||||
:root {
|
|
||||||
--primary-color: #2a1827;
|
|
||||||
--secondary-color: #6c757d;
|
|
||||||
--dark-color: #343a40;
|
|
||||||
--light-color: #f4f4f4;
|
|
||||||
--white: #fff;
|
|
||||||
--danger-color: #dc3545;
|
|
||||||
--covered: 50%;
|
|
||||||
--link-color: #668be2;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
.vanta-bg {
|
||||||
body {
|
position: absolute;
|
||||||
font-family: Arial, sans-serif;
|
top: 0;
|
||||||
line-height: 1.6;
|
left: 0;
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
color: #333;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--link-color);
|
|
||||||
text-decoration: none;
|
|
||||||
text-shadow: 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
main,
|
|
||||||
footer {
|
|
||||||
a {
|
|
||||||
|
|
||||||
transition: text-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
/*glow effect */
|
|
||||||
text-shadow: 0 0 5px var(--link-color), 0 0 10px var(--link-color), 0 0 20px var(--link-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
background: var(--dark-color);
|
|
||||||
background-image: url(./bg-head.webp);
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: bottom;
|
|
||||||
background-attachment: fixed;
|
|
||||||
background-blend-mode: multiply;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
padding: 50px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 100vh;
|
|
||||||
padding: 0;
|
|
||||||
padding-bottom: 115px;
|
|
||||||
}
|
|
||||||
|
|
||||||
main>section {
|
|
||||||
flex: 1;
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
margin: 0;
|
|
||||||
background-image: url("https://github.com/Katenary/katenary/raw/refs/heads/develop/doc/docs/statics/logo-vertical.svg");
|
|
||||||
color: transparent;
|
|
||||||
background-size: contain;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
height: 265px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header p {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
display: inline-block;
|
|
||||||
background: #fff;
|
|
||||||
color: var(--primary-color);
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
background: #0056b3;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.features {
|
|
||||||
background: var(--light-color);
|
|
||||||
padding: 50px 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.features h2 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-grid {
|
|
||||||
/*
|
|
||||||
display: grida;
|
|
||||||
gap: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
grid-auto-rows: 200px;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
||||||
*/
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slidingLeft {
|
|
||||||
from {
|
|
||||||
transform: translateX(-100vw);
|
|
||||||
filter: opacity(0) blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: translateX(0);
|
|
||||||
filter: opacity(1) blur(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slidingRight {
|
|
||||||
from {
|
|
||||||
transform: translateX(100vw);
|
|
||||||
filter: opacity(0) blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: translateX(0);
|
|
||||||
filter: opacity(1) blur(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-item {
|
|
||||||
background: var(--white);
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
flex: 1 1 200px;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
:root {
|
|
||||||
--animation-slide: entry 0% contain 0%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.from-left {
|
|
||||||
view-timeline: --reveal-blockl;
|
|
||||||
view-timeline-axis: block;
|
|
||||||
animation: linear slidingLeft forwards;
|
|
||||||
animation-range: var(--animation-slide);
|
|
||||||
animation-timeline: --reveal-blockl;
|
|
||||||
}
|
|
||||||
|
|
||||||
.from-right {
|
|
||||||
view-timeline: --reveal-blockr;
|
|
||||||
view-timeline-axis: block;
|
|
||||||
animation: linear slidingRight forwards;
|
|
||||||
animation-range: var(--animation-slide);
|
|
||||||
animation-timeline: --reveal-blockr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.how-it-works,
|
|
||||||
.how-to-use,
|
|
||||||
.tutorials {
|
|
||||||
padding: 50px 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.how-it-works ol {
|
|
||||||
list-style: decimal inside;
|
|
||||||
text-align: left;
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-placeholder {
|
|
||||||
margin: 30px auto;
|
|
||||||
height: 275px;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 1280px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 2em 0;
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin: 10px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: fill;
|
z-index: 0;
|
||||||
border-radius: 8px;
|
background-color: #111827;
|
||||||
}
|
min-height: 100vh;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.gradient-text {
|
||||||
.get-started {
|
background-clip: text;
|
||||||
background: var(--primary-color);
|
-webkit-background-clip: text;
|
||||||
color: var(--white);
|
color: transparent;
|
||||||
padding: 50px 20px;
|
background-image: linear-gradient(to right, #f97316, #7c3aed);
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
pre {
|
|
||||||
background: var(--white);
|
|
||||||
color: #333;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 20px 0;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
>.container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
div.video {
|
|
||||||
padding-top: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.example {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
iframe {
|
|
||||||
width: 100%;
|
|
||||||
height: 500px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
iframe {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
section {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&:nth-child(even) .example {
|
|
||||||
text-align: right;
|
|
||||||
flex-direction: row-reverse !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(odd) .example {
|
|
||||||
text-align: left;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(even) .example h3 {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.alternate:nth-child(odd) {
|
|
||||||
background: var(--light-color);
|
|
||||||
color: var(--dark-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.alternate:nth-child(even) {
|
|
||||||
background: var(--dark-color);
|
|
||||||
color: var(--light-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.example>div {
|
|
||||||
flex: 1 1 200px;
|
|
||||||
align-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
code.hljs {
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
p code {
|
|
||||||
background: var(--dark-color);
|
|
||||||
color: var(--light-color);
|
|
||||||
padding: 1px 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menu-toggle {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 11;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
#menu-toggle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
background: var(--white);
|
|
||||||
color: var(--dark-color);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
align-items: center;
|
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
|
||||||
z-index: 10;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.container {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
&.external {
|
|
||||||
border-left: 1px solid var(--secondary-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
nav ul {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li {
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li a {
|
|
||||||
color: var(--dark-color);
|
|
||||||
text-decoration: none;
|
|
||||||
display: block;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li a:hover {
|
|
||||||
color: var(--light-color);
|
|
||||||
background: var(--dark-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li a.active {
|
|
||||||
color: var(--light-color) !important;
|
|
||||||
background: var(--dark-color) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.navbar {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar:hover,
|
|
||||||
#menu-toggle:focus~.navbar {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
opacity: 0.8;
|
|
||||||
position: fixed;
|
|
||||||
top: 10px;
|
|
||||||
left: 0px;
|
|
||||||
color: var(--white);
|
|
||||||
font-size: 1rem;
|
|
||||||
cursor: pointer;
|
|
||||||
background: var(--dark-color);
|
|
||||||
color: var(--white);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px 20px;
|
|
||||||
border: 1px solid var(--dark-color);
|
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
||||||
border-radius: 5px;
|
|
||||||
|
|
||||||
&:has(a:active) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul {
|
|
||||||
display: block;
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--white);
|
|
||||||
text-decoration: none;
|
|
||||||
display: block;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--white);
|
|
||||||
text-decoration: none;
|
|
||||||
display: block;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
background: #333;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px 0;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
|
|
||||||
section {
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
flex: 1 1 250px !important;
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: 5px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--link-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: start;
|
|
||||||
width: 100%;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
>p {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
section {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
align-self: normal;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
footer section:after {
|
|
||||||
content: " ";
|
|
||||||
display: block;
|
|
||||||
background: #fff;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 5%;
|
|
||||||
height: 90%;
|
|
||||||
width: 1px;
|
|
||||||
filter: opacity(0.5) blur(1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
footer section:last-child:after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.large-icon {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes bouncing {
|
|
||||||
0% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: translateY(-20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.down {
|
|
||||||
position: relative;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.down {
|
|
||||||
background: var(--white);
|
|
||||||
color: var(--dark-color);
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 50%;
|
|
||||||
align-self: center;
|
|
||||||
animation: bouncing 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin {
|
|
||||||
display: inline-block;
|
|
||||||
transform-origin: 50% 50%;
|
|
||||||
animation: spin 4s linear infinite;
|
|
||||||
line-height: 1.2rem;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[class~="icofont-*"] {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
}
|
||||||
|
|||||||
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">
|
<section id="features" class="py-16 bg-white">
|
||||||
<div class="container">
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<h2>Why Katenary?</h2>
|
<div class="text-center mb-16">
|
||||||
<p>
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">Why Choose Katenary</h2>
|
||||||
Simplify your deployment workflow by converting Compose files into
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||||
production-ready Helm Charts with ease.
|
Powerful features to simplify your Kubernetes deployment workflow
|
||||||
</p>
|
</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>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="video from-right">
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
<iframe
|
<div
|
||||||
src="https://www.youtube.com/embed/RrX5jNxS9IA?si=i0kRVFXOwT3ZqZdB"
|
class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition"
|
||||||
title="YouTube video player"
|
>
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
<div
|
||||||
referrerpolicy="strict-origin-when-cross-origin"
|
class="w-14 h-14 bg-orange-100 rounded-full flex items-center justify-center mb-6"
|
||||||
allowfullscreen
|
>
|
||||||
></iframe>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -1,68 +1,94 @@
|
|||||||
<footer class="footer">
|
<footer class="bg-gray-900 text-gray-400 py-12">
|
||||||
<div class="container">
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<section>
|
<div class="grid md:grid-cols-4 gap-8">
|
||||||
<div>
|
<div>
|
||||||
<h2>Contact</h2>
|
<div class="flex items-center">
|
||||||
<p>
|
<img
|
||||||
For any question, suggestion, or if you want to sponsor to the
|
src="https://repo.katenary.io/Katenary/katenary/raw/branch/master/doc/docs/statics/logo-vertical.svg"
|
||||||
project, please contact me at: <br/>
|
alt="Katenary Logo"
|
||||||
<a href="mailto:contact@katenary.io"><i class="icofont-send-mail"></i> contact@katenary.io</a>
|
class="h-8"
|
||||||
</p>
|
/>
|
||||||
<p>
|
</div>
|
||||||
Issues and contributions are welcome on: <br />
|
<p class="mt-4 text-sm">
|
||||||
<a href="https://repo.katenary.io/Katenary/katenary"><i class="icofont-users-alt-6"></i> Katenary repository</a>
|
Convert Docker Compose to Helm Charts with ease.
|
||||||
</p>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<div>
|
<div>
|
||||||
<h2>Special thanks</h2>
|
<h3 class="text-white font-bold mb-4">Resources</h3>
|
||||||
<p>Content creation:</p>
|
<ul class="space-y-2">
|
||||||
<ul>
|
|
||||||
<li>
|
<li>
|
||||||
<a href="https://blender.org">Blender</a> that helps a lot to create
|
<a
|
||||||
videos and animations
|
href="https://repo.katenary.io/katenary/katenary"
|
||||||
</li>
|
target="_blank"
|
||||||
<li>
|
class="hover:text-orange-400 transition"
|
||||||
<a href="https://highlightjs.org">Highlight.js</a> for the code
|
>Repository</a
|
||||||
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
|
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a
|
||||||
href="https://matrix.to/#/#katenary:matrix.org"
|
href="https://repo.katenary.io/Katenary/-/packages"
|
||||||
><i class="icofont-speech-comments"></i> Discussion on Matrix.org</a
|
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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div>
|
||||||
</div>
|
<h3 class="text-white font-bold mb-4">Community</h3>
|
||||||
<div class="container">
|
<ul class="space-y-2">
|
||||||
<p>© 2024, 2025 Katenary. Open Source Project under MIT License.</p>
|
<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>
|
</div>
|
||||||
</footer>
|
</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