interhack/2026.camp.public.website
12
1
Fork 0
Code Issues 6 Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

Ajout d'une page d'information pratiques #11

Merged
Nono merged 12 commits from feat/infos-pratiques into main 2025-12-18 16:26:46 +00:00
Conversation 1 Commits 12 Files changed 10 +241 -14
10 changed files with 241 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
guide.html

2
Dockerfile
View file

@ -1,6 +1,6 @@
FROM docker.io/nginx:1.29-alpine FROM docker.io/nginx:1.29-alpine
COPY index.html poster.html /usr/share/nginx/html COPY index.html poster.html guide.html /usr/share/nginx/html
COPY assets /usr/share/nginx/html/assets COPY assets /usr/share/nginx/html/assets
COPY css /usr/share/nginx/html/css COPY css /usr/share/nginx/html/css
COPY js /usr/share/nginx/html/js COPY js /usr/share/nginx/html/js

34
README.md
View file

@ -1,6 +1,28 @@
# Interhack Camp Website 2026 # Interhack Camp Website 2026
## Build the Docker image ## How to deploy :
### generate statuses PDF
Statuses are stored in [this online pad](https://md.interhacker.space/u2VNUSO6S36xx5Ensc3FCw).
PDF can be generated thanks to `pandoc` and the good old `curl` this way:
```sh
curl -s https://md.interhacker.space/u2VNUSO6S36xx5Ensc3FCw/download | pandoc -V geometry:margin=3cm -o assets/Camp-Interhack_Statuts.pdf
```
### Generation de la page Guide.
La page Guide est générée depuis un Hedgedocs, en markdown, via le fichier update-guide.sh qui utilise le fichier guide.template.html. Le contenu de la page est donc un HTML basique in fine.
```sh
bash update-guide.sh
```
### Build the Docker image
Please generate
We use Docker for deploying on the Interhack infra. Until we have a proper CI, we need to build manually. We use Docker for deploying on the Interhack infra. Until we have a proper CI, we need to build manually.
@ -28,13 +50,3 @@ docker push git.interhacker.space/interhack/camp-website-2026:latest
The pull process is triggered every five minutes. The pull process is triggered every five minutes.
So you may wait at least this amount of time before the website is up-to-date! So you may wait at least this amount of time before the website is up-to-date!
(and Ctrl + Shift + R is useful to nuke cache) (and Ctrl + Shift + R is useful to nuke cache)
## generate statuses PDF
Statuses are stored in [this online pad](https://md.interhacker.space/u2VNUSO6S36xx5Ensc3FCw).
PDF can be generated thanks to `pandoc` and the good old `curl` this way:
```sh
curl -s https://md.interhacker.space/u2VNUSO6S36xx5Ensc3FCw/download | pandoc -V geometry:margin=3cm -o assets/Camp-Interhack_Statuts.pdf
```

7
css/base.css
View file

@ -18,6 +18,10 @@ html, body {
margin: 0; margin: 0;
} }
img {
max-width: 100%;
}
a { a {
text-decoration: none; text-decoration: none;
color: black; color: black;
@ -57,6 +61,7 @@ nav a, footer a, aside a {
font-family: Dymo; font-family: Dymo;
font-size: 3em; font-size: 3em;
display: inline-block; display: inline-block;
margin-right: 1em;
} }
nav a.current { nav a.current {
@ -74,10 +79,12 @@ footer {
text-align: center; text-align: center;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
align-items: end;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
footer { footer {
flex-direction: column; flex-direction: column;
align-items: center;
} }
} }

112
css/guide.css Normal file
View file

@ -0,0 +1,112 @@
body {
background-image: radial-gradient(at left top, #058C9E, #BC5180);
background-repeat: no-repeat;
background-attachment: fixed;
}
main {
width: 100%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
background: none;
padding-bottom: 100px;
font-family: Erika;
line-height: 1.5;
}
main > * {
width: 100%;
background: linear-gradient(to top, rgba(255,255,255,0.5)), url(../assets/notebook.jpg), white;
box-sizing: border-box;
margin: 0;
background-size: 100% auto;
padding-bottom: 1em;
filter: drop-shadow(5px 3px 2px #000000b7);
padding-left: 15px;
padding-right: 15px;
z-index: 1;
position: relative;
max-width: 100%;
}
main > img {
object-fit: scale-down;
}
main > .sticker {
background: none;
z-index: 0;
}
main > *.draggable:not(.sticker) {
&:not(h2) {
width: 100%;
}
&:not(h1):not(h2):hover {
animation: none;
}
}
main ul,
main ol,
main dl {
padding-left: calc(1em + 15px);
}
main h1 {
text-align: center;
font-size: 4rem;
}
main h1,
main h2 {
background: none;
padding-top: 1.5em;
padding-left: 0;
padding-right: 0;
}
@media screen and (max-width: 800px) {
main h2 {
padding-left: 1em;
}
}
main h1 + *,
main h2 + * {
padding-top: 1em;
}
main h1 small {
display: block;
background: url(../assets/notebook.jpg);
color: black;
font-family: Erika;
font-size: 2.5rem;
width: fit-content;
max-width: 90%;
margin-left: auto;
margin-right: auto;
transform: translateY(-0.3em) rotate(-2deg);
}
main pre {
white-space: pre-wrap;
}
main a {
text-decoration: underline;
color: teal;
}
main a:visited {
color: rebeccapurple;
}
footer {
padding: 1em;
}

1
css/home.css
View file

@ -49,7 +49,6 @@ section {
font-family: Erika; font-family: Erika;
margin: auto; margin: auto;
margin-bottom: 100px; margin-bottom: 100px;
columns: 560px;
padding: 2%; padding: 2%;
} }

65
guide.template.html Normal file
View file

@ -0,0 +1,65 @@
<!--
ATTENTION : CETTE PAGE EST UN TEMPLATE, UTILISÉ PAR LE FICHIER UPDATE-GUIDE.SH
NE PAS MODIFIER À LA MAIN POUR LE CONTENUE, ÇA SERA ÉCRASÉ.
BISOUS
-->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/guide.css">
<link rel="stylesheet" href="css/drag.css">
<script src="js/drag.js" defer></script>
<title>Guide Interhack Camp 2026</title>
</head>
<body id="page-guide">
<nav>
<a href="index.html">home</a>
<a href="poster.html">poster</a>
<a href="guide.html" class="current">guide</a>
</nav>
<main>
<img class="draggable randomStart sticker" src="assets/stickers/arbre-hetre.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/bac-e2.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/clavier.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/clef.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/ecran.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/foin.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/machineacoudre.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/tracteur.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/arbre-hetre.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/bac-e2.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/clavier.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/clef.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/ecran.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/foin.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/machineacoudre.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/tracteur.webp" alt="">
<!-- EDGEDOC: A la place de ce commentaire, le contenu du Edgedoc https://md.lqdn.fr/H0gKhjbKTfeM41L9bG9zUA -->
</main>
<footer>
<div>
<h2>Association</h2>
<a href="assets/Camp-Interhack_Statuts.pdf">statuts</a>
</div>
<div>
<h2>Interhack</h2>
<a href="https://interhacker.space">accueil</a>
<a href="https://wiki.interhacker.space">wiki</a>
</div>
<div>
<h2>Site Web</h2>
<a href="https://git.interhacker.space/interhack/2026.camp.public.website">source</a>
</div>
<div>
Dernière mise à jour du guide: <!-- DATE: A la place de ce commentaire, la date et heure du jour -->
</div>
</footer>
</body>
</html>

1
index.html
View file

@ -14,6 +14,7 @@
<nav> <nav>
<a href="index.html" class="current">home</a> <a href="index.html" class="current">home</a>
<a href="poster.html">poster</a> <a href="poster.html">poster</a>
<a href="guide.html">guide</a>
</nav> </nav>
<main> <main>

5
js/drag.js
View file

@ -1,5 +1,10 @@
const stepSize = 100; const stepSize = 100;
const main = document.querySelector('main'); const main = document.querySelector('main');
for(let guideDraggable of document.querySelectorAll("#page-guide main > *")) {
guideDraggable.classList.add("draggable");
}
const draggables = document.querySelectorAll(".draggable"); const draggables = document.querySelectorAll(".draggable");
const randomStarts = document.querySelectorAll(".randomStart"); const randomStarts = document.querySelectorAll(".randomStart");

25
update-guide.sh Executable file
View file

@ -0,0 +1,25 @@
#!/bin/bash
GUIDE_EDGEDOC_URL="https://md.lqdn.fr/H0gKhjbKTfeM41L9bG9zUA"
DATE_CMD="date --utc '+%d/%m/%Y %H:%I UTC'"
echo "Mise a jour du guide dans guide.html a partir du edgedoc"
echo "$GUIDE_EDGEDOC_URL"
set -e
curl --silent --fail-with-body "$GUIDE_EDGEDOC_URL/download" > guide.tmp.md
Nono marked this conversation as resolved Outdated
lateralus23 commented 2025-12-18 12:25:17 +00:00
Outdated
Review
Copy link

est-ce qu'on mettrait pas plutôt le markdown dans le repo comme ça y'a tout ici ?

est-ce qu'on mettrait pas plutôt le markdown dans le repo comme ça y'a tout ici ?
Nono commented 2025-12-18 15:24:02 +00:00
Outdated
Review
Copy link

Ça serait quoi l'intérêt d'avoir à la fois la version HTML et le MD dans le même repo ?

Ça serait quoi l'intérêt d'avoir à la fois la version HTML et le MD dans le même repo ?
pandoc --from markdown --to html guide.tmp.md > guide.tmp.html
cat guide.template.html \
| sed '/EDGEDOC/{
s/<!-- *EDGEDOC[^-]*-->//;
r guide.tmp.html
}' \
| sed -e "/DATE/{
s/<!-- *DATE[^-]*-->//;
n;
e $DATE_CMD
}" \
> guide.html
rm guide.tmp.md guide.tmp.html