added documentation section and split html into partials

This commit is contained in:
julien 2025-01-15 23:43:08 +01:00
parent aedcbf2462
commit 36070d14f9
17 changed files with 279 additions and 131 deletions

View File

@ -1,4 +1,25 @@
+++ +++
title = "Contact" title = "Contact"
template = "contact.html" slug = "contact"
template = "page.html"
+++ +++
<article class="article-contact">
<div class="col--1-1">
<div>
<p>Vous avez un projet en tête ? Un service vous intéresse ? Ou simplement une question ? Ce formulaire
est
là pour ça !</p>
</div>
<form action="https://p2e.netig.net/" method="post" class="contact-form">
<input type="hidden" name="REDIRECT" value="https://netig.net/success" />
<input type="email" name="REPLY_TO" placeholder="Email" class="contact-form-input" required>
<input type="hidden" name="Source" value="Formulaire de contact" />
<input type="text" name="Nom" maxlength="128" placeholder="Nom" class="contact-form-input" required>
<input type="text" name="SUBJECT" maxlength="256" placeholder="Objet" class="contact-form-input" required>
<textarea name="Message" cols="40" rows="10" placeholder="Message" class="contact-form-input"
required></textarea>
<input type="submit" value="Envoyer" class="submit">
</form>
</div>
</article>

View File

@ -0,0 +1,86 @@
+++
title = "Documentation"
slug = "documentation"
template = "documentation.html"
+++
En cours d'écriture 📝 !
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi tempore ratione necessitatibus culpa maxime delectus,
accusamus harum est porro ut fugiat aperiam, consequuntur explicabo. Modi tenetur incidunt non exercitationem sunt?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae magnam, cum iste minima culpa recusandae et reiciendis
veritatis deserunt debitis fuga, atque delectus qui ea dolorum tempore aspernatur nihil nisi!
### Infrastructure
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi tempore ratione necessitatibus culpa maxime delectus,
accusamus harum est porro ut fugiat aperiam, consequuntur explicabo. Modi tenetur incidunt non exercitationem sunt?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae magnam, cum iste minima culpa recusandae et reiciendis
veritatis deserunt debitis fuga, atque delectus qui ea dolorum tempore aspernatur nihil nisi!
#### Serveurs
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, voluptate consequatur. Ex, ipsum sint. Hic, esse modi,
ipsam dicta minima praesentium assumenda unde architecto nostrum quibusdam reprehenderit tenetur qui nulla? Lorem ipsum
dolor sit, amet consectetur adipisicing elit. Repellat iusto eius aspernatur earum, quo reiciendis, magni doloremque
debitis ipsum at laborum deserunt quis molestias facilis provident facere rem! Aliquam, voluptatem? Lorem ipsum, dolor
sit amet consectetur adipisicing elit. Deserunt sunt, porro soluta perferendis, ipsa alias voluptatum facere eos
reprehenderit explicabo dolorem sit accusantium consequatur minima quia molestias culpa temporibus autem. Lorem ipsum
dolor sit amet consectetur adipisicing elit. Sunt alias odio excepturi sed eligendi omnis modi amet dolores saepe,
quibusdam placeat? Praesentium voluptatum molestiae quos laboriosam eligendi facilis minima doloribus.
#### Réseau
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore quae reprehenderit nostrum neque nulla dicta quasi
eius perspiciatis cum eos, id, voluptatem quaerat, minus tenetur placeat doloribus ea porro amet.
#### Sauvegardes
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi tempore ratione necessitatibus culpa maxime delectus,
accusamus harum est porro ut fugiat aperiam, consequuntur explicabo. Modi tenetur incidunt non exercitationem sunt?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae magnam, cum iste minima culpa recusandae et reiciendis
veritatis deserunt debitis fuga, atque delectus qui ea dolorum tempore aspernatur nihil nisi!
### Services
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi tempore ratione necessitatibus culpa maxime delectus,
accusamus harum est porro ut fugiat aperiam, consequuntur explicabo. Modi tenetur incidunt non exercitationem sunt?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae magnam, cum iste minima culpa recusandae et reiciendis
veritatis deserunt debitis fuga, atque delectus qui ea dolorum tempore aspernatur nihil nisi!
#### Mail
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore quae reprehenderit nostrum neque nulla dicta quasi
eius perspiciatis cum eos, id, voluptatem quaerat, minus tenetur placeat doloribus ea porro amet.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, voluptate consequatur. Ex, ipsum sint. Hic, esse modi,
ipsam dicta minima praesentium assumenda unde architecto nostrum quibusdam reprehenderit tenetur qui nulla? Lorem ipsum
dolor sit, amet consectetur adipisicing elit. Repellat iusto eius aspernatur earum, quo reiciendis, magni doloremque
debitis ipsum at laborum deserunt quis molestias facilis provident facere rem! Aliquam, voluptatem? Lorem ipsum, dolor
sit amet consectetur adipisicing elit. Deserunt sunt, porro soluta perferendis, ipsa alias voluptatum facere eos
reprehenderit explicabo dolorem sit accusantium consequatur minima quia molestias culpa temporibus autem. Lorem ipsum
dolor sit amet consectetur adipisicing elit. Sunt alias odio excepturi sed eligendi omnis modi amet dolores saepe,
quibusdam placeat? Praesentium voluptatum molestiae quos laboriosam eligendi facilis minima doloribus.
### Maintenance
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi tempore ratione necessitatibus culpa maxime delectus,
accusamus harum est porro ut fugiat aperiam, consequuntur explicabo. Modi tenetur incidunt non exercitationem sunt?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae magnam, cum iste minima culpa recusandae et reiciendis
veritatis deserunt debitis fuga, atque delectus qui ea dolorum tempore aspernatur nihil nisi!
#### APK
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore quae reprehenderit nostrum neque nulla dicta quasi
eius perspiciatis cum eos, id, voluptatem quaerat, minus tenetur placeat doloribus ea porro amet.
#### Nerdctl
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, voluptate consequatur. Ex, ipsum sint. Hic, esse modi,
ipsam dicta minima praesentium assumenda unde architecto nostrum quibusdam reprehenderit tenetur qui nulla? Lorem ipsum
dolor sit, amet consectetur adipisicing elit. Repellat iusto eius aspernatur earum, quo reiciendis, magni doloremque
debitis ipsum at laborum deserunt quis molestias facilis provident facere rem! Aliquam, voluptatem? Lorem ipsum, dolor
sit amet consectetur adipisicing elit. Deserunt sunt, porro soluta perferendis, ipsa alias voluptatum facere eos
reprehenderit explicabo dolorem sit accusantium consequatur minima quia molestias culpa temporibus autem. Lorem ipsum
dolor sit amet consectetur adipisicing elit. Sunt alias odio excepturi sed eligendi omnis modi amet dolores saepe,
quibusdam placeat? Praesentium voluptatum molestiae quos laboriosam eligendi facilis minima doloribus.

View File

@ -1,4 +1,22 @@
+++ +++
title = "Maintenance et incidents" title = "Maintenance et incidents"
template = "maintenance.html" slug = "maintenance"
template = "page.html"
+++ +++
<article class="article-report">
<p>Information : Brève interruption de l'ensemble des services tous les lundi matins à 4h pour sauvegarde.
</p>
<div class="col--1-1-1">
<a class="box box__link" href="https://status.netig.net/status/services" target="_blank">État des
services
en
temps réel</a>
<a class="box box__link" href="https://list.netig.net/archive" target="_blank">Maintenances et
incidents
signalés</a>
<a class="box box__link" href="https://list.netig.net/subscription/form" target="_blank">Recevoir
les
notifications par mail</a>
</div>
</article>

View File

@ -1,4 +1,9 @@
+++ +++
title = "Success" title = "C'est fait !"
template = "success.html" slug = "success"
template = "page.html"
+++ +++
<div class="content">
<p class="success">Message envoyé, retourner à la <a href="/#">page d'accueil</a> !</p>
</div>

File diff suppressed because one or more lines are too long

View File

@ -51,7 +51,7 @@ article {
} }
.anchor { .anchor {
height: 40px; height: 0px;
} }
@ -105,7 +105,7 @@ h1 {
h2 { h2 {
font-size: 2.6rem; font-size: 2.6rem;
line-height: 2.6rem; line-height: 2.6rem;
margin-bottom: 100px;
} }
h3 { h3 {
@ -157,12 +157,14 @@ h4 {
------------------------------------------------------------------------ */ ------------------------------------------------------------------------ */
.topbar { .topbar {
display: flex;
flex-wrap: wrap;
align-items: center;
text-align: left; text-align: left;
background: $color__ternary; background: $color__ternary;
padding-left: 20px;
a { a {
padding: 20px; padding-left: 20px;
} }
} }
@ -255,7 +257,6 @@ h4 {
max-width: 100%; max-width: 100%;
} }
/* Gaps /* Gaps
------------------------------------------------------------------------ */ ------------------------------------------------------------------------ */
@ -333,6 +334,12 @@ h4 {
} }
} }
} }
&--min {
img {
max-width: 48px;
}
}
} }
/* Header /* Header
@ -518,6 +525,22 @@ svg {
background-color: #185833; background-color: #185833;
} }
/* Docnav
------------------------------------------------------------------------ */
.docnav {
background: rgb(5 100 115/var(--tw-bg-opacity, 1));
@media screen and (min-width: 1080px) and (max-resolution: 1x) {
min-height: 100vh;
}
}
.doc ul {
margin-top: 0;
padding-top: 20px;
padding-bottom: 20px;
}
/* Responsive 1080px /* Responsive 1080px
------------------------------------------------------------------------ */ ------------------------------------------------------------------------ */
@ -537,6 +560,13 @@ svg {
align-items: normal; align-items: normal;
} }
.col--1-4 {
display: grid;
gap: 40px;
grid-template-columns: 1fr 4fr;
align-items: normal;
}
.col--1-1-1 { .col--1-1-1 {
display: grid; display: grid;
gap: 40px; gap: 40px;

View File

@ -3,53 +3,16 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> {% include "partials/head.html" %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">
<title>NETig</title>
<meta name="description"
content="Vous cherchez des services en ligne mais vous ne souhaitez pas confier vos données aux GAFAM ? Vous êtes au bon endroit !">
<link rel="canonical" href="https://netig.net/">
<link rel="icon" type="image/x-icon" href="{{ get_url(path="images/favicon.webp") }}">
<link rel="stylesheet" href="{{ get_url(path="css/style.css") }}">
</head> </head>
<body> <body>
<header class=""> <header class="">
<div class="topbar"> {% if page %}
<a class="" href="https://webmail.netig.net" target="_blank">NETmail</a> {% include "partials/header-page.html" %}
<a class="" href="https://cloud.netig.net" target="_blank">NETcloud</a> {% else %}
<a class="" href="https://git.netig.net" target="_blank">NETgit</a> {% include "partials/header.html" %}
{% endif %}
</div>
<div class="menu_icon_sidenav">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<div class="sidenav">
<nav>
<ul>
<li><a href="/#">Accueil</a></li>
<li><a href="/#services">Services</a></li>
<li><a href="/#about">À propos</a></li>
<li><a href="/#hosting">Hébergement</a></li>
<li><a href="/maintenance#report">Maintenance et incidents</a></li>
<li><a href="/contact#contact">Contact</a></li>
</ul>
</nav>
</div>
<div class="content col--1-2">
<div>
<a class="logo" href="/#"><img class="logo" src="{{ get_url(path="images/favicon.webp") }}"
alt="Logo"></a>
</div>
<div>
<a href="/#"><h1>NETig</h1></a>
<p><strong>Vous cherchez des services en ligne mais vous ne souhaitez pas confier vos
données aux GAFAM ? Vous êtes au bon endroit !</strong></p>
</div>
</div>
</header> </header>
<main> <main>
<div> <div>
@ -57,24 +20,7 @@
</div> </div>
</main> </main>
<footer> <footer>
<div class="botbar"> {% include "partials/footer.html" %}
<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title"
rel="cc:attributionURL" href="https://netig.net">NETig website</a> by <span
property="cc:attributionName">Julien Debrousse</span> is licensed under <a
href="https://creativecommons.org/licenses/by/4.0/?ref=chooser-v1" target="_blank"
rel="license noopener noreferrer" style="display:inline-block;">CC BY 4.0<img
style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img
style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""></a></p>
<p>
<a href="/legal">Mentions Légales</a>
</p>
<p>
Made with ❤️ with <a href="https://www.getzola.org/" target="_blank">Zola</a> !
</p>
</div>
<script src="{{ get_url(path="js/sidenav.js") }}"></script>
</footer> </footer>
</body> </body>

View File

@ -1,28 +0,0 @@
{% extends "base.html" %}
{% block content %}
<div class="content">
<div class="anchor" id="contact"></div>
<h2>{{ page.title }}</h2>
<article class="article-contact">
<div class="col--1-1">
<div>
<p>Vous avez un projet en tête ? Un service vous intéresse ? Ou simplement une question ? Ce formulaire
est
là pour ça !</p>
</div>
<form action="https://p2e.netig.net/" method="post" class="contact-form">
<input type="hidden" name="REDIRECT" value="https://netig.net/success" />
<input type="email" name="REPLY_TO" placeholder="Email" class="contact-form-input" required>
<input type="hidden" name="Source" value="Formulaire de contact" />
<input type="text" name="Nom" maxlength="128" placeholder="Nom" class="contact-form-input" required>
<input type="text" name="SUBJECT" maxlength="256" placeholder="Objet" class="contact-form-input"
required>
<textarea name="Message" cols="40" rows="10" placeholder="Message" class="contact-form-input"
required></textarea>
<input type="submit" value="Envoyer" class="submit">
</form>
</div>
</article>
</div>
{% endblock content %}

View File

@ -0,0 +1,30 @@
{% extends "base.html" %}
{% block content %}
<div class="doc col--1-4">
<div class="docnav">
<ul>
<li><a href="#infrastructure">Infrastructure</a></li>
<ul>
<li><a href="#serveurs">Serveurs</a></li>
<li><a href="#reseau">Réseau</a></li>
<li><a href="#sauvegardes">Sauvegardes</a></li>
</ul>
<li><a href="#services">Services</a></li>
<ul>
<li><a href="#mail">Mail</a></li>
</ul>
<li><a href="#maintenance">Maintenance</a></li>
<ul>
<li><a href="#apk">APK</a></li>
<li><a href="#nerdctl">Nerdctl</a></li>
</ul>
</ul>
</div>
<div class="content">
<div class="anchor" id="{{ page.slug }}"></div>
<h2>{{ page.title }}</h2>
{{ page.content | safe }}
</div>
</div>
{% endblock content %}

View File

@ -1,24 +0,0 @@
{% extends "base.html" %}
{% block content %}
<div class="content">
<div class="anchor" id="report"></div>
<h2>{{ page.title }}</h2>
<article class="article-report">
<p>Information : Brève interruption de l'ensemble des services tous les lundi matins à 4h pour sauvegarde.
</p>
<div class="col--1-1-1">
<a class="box box__link" href="https://status.netig.net/status/services" target="_blank">État des
services
en
temps réel</a>
<a class="box box__link" href="https://list.netig.net/archive" target="_blank">Maintenances et
incidents
signalés</a>
<a class="box box__link" href="https://list.netig.net/subscription/form" target="_blank">Recevoir
les
notifications par mail</a>
</div>
</article>
</div>
{% endblock content %}

View File

@ -2,6 +2,7 @@
{% block content %} {% block content %}
<div class="content"> <div class="content">
<div class="anchor" id="{{ page.slug }}"></div>
<h2>{{ page.title }}</h2> <h2>{{ page.title }}</h2>
{{ page.content | safe }} {{ page.content | safe }}
</div> </div>

View File

@ -0,0 +1,18 @@
<div class="botbar">
<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title"
rel="cc:attributionURL" href="https://netig.net">NETig website</a> by <span
property="cc:attributionName">Julien Debrousse</span> is licensed under <a
href="https://creativecommons.org/licenses/by/4.0/?ref=chooser-v1" target="_blank"
rel="license noopener noreferrer" style="display:inline-block;">CC BY 4.0<img
style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img
style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""></a></p>
<p>
<a href="/legal">Mentions Légales</a>
</p>
<p>
Made with ❤️ with <a href="https://www.getzola.org/" target="_blank">Zola</a> !
</p>
</div>
<script src="{{ get_url(path="js/sidenav.js") }}"></script>

View File

@ -0,0 +1,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">
<title>NETig</title>
<meta name="description"
content="Vous cherchez des services en ligne mais vous ne souhaitez pas confier vos données aux GAFAM ? Vous êtes au bon endroit !">
<link rel="canonical" href="https://netig.net/">
<link rel="icon" type="image/x-icon" href="{{ get_url(path="images/favicon.webp") }}">
<link rel="stylesheet" href="{{ get_url(path="css/style.css") }}">

View File

@ -0,0 +1,7 @@
<div class="topbar">
<a class="logo--min" href="/#"><img class="logo" src="{{ get_url(path="images/favicon.webp") }}" alt="Logo"></a>
<a class="" href="https://webmail.netig.net" target="_blank">NETmail</a>
<a class="" href="https://cloud.netig.net" target="_blank">NETcloud</a>
<a class="" href="https://git.netig.net" target="_blank">NETgit</a>
</div>
{% include "partials/sidenav.html" %}

View File

@ -0,0 +1,19 @@
<div class="topbar">
<a class="" href="https://webmail.netig.net" target="_blank">NETmail</a>
<a class="" href="https://cloud.netig.net" target="_blank">NETcloud</a>
<a class="" href="https://git.netig.net" target="_blank">NETgit</a>
</div>
{% include "partials/sidenav.html" %}
<div class="content col--1-2">
<div>
<a class="logo" href="/#"><img class="logo" src="{{ get_url(path="images/favicon.webp") }}" alt="Logo"></a>
</div>
<div>
<a href="/#">
<h1>NETig</h1>
</a>
<p><strong>Vous cherchez des services en ligne mais vous ne souhaitez pas confier vos
données aux GAFAM ? Vous êtes au bon endroit !</strong></p>
</div>
</div>

View File

@ -0,0 +1,18 @@
<div class="menu_icon_sidenav">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<div class="sidenav">
<nav>
<ul>
<li><a href="/#">Accueil</a></li>
<li><a href="/#services">Services</a></li>
<li><a href="/#about">À propos</a></li>
<li><a href="/#hosting">Hébergement</a></li>
<li><a href="/maintenance#maintenance">Maintenance et incidents</a></li>
<li><a href="/documentation#documentation">Documentation</a></li>
<li><a href="/contact#contact">Contact</a></li>
</ul>
</nav>
</div>

View File

@ -1,8 +0,0 @@
{% extends "base.html" %}
{% block content %}
<div class="content">
<p class="success">Message envoyé, retourner à la <a href="/#">page d'accueil</a> !</p>
</div>
{% endblock content %}