Skip to content

Commit a1292d3

Browse files
froelenfroelen
committed
Update dev environment
1 parent 2dce65d commit a1292d3

File tree

10 files changed

+752
-3
lines changed

10 files changed

+752
-3
lines changed

‎.gitignore‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
# Static Site Generator files
2-
ssg-*
3-
41
# VS Code workspaces
52
.code-workspace
3+
4+
# Ignore extension:
5+
*.ignore

‎README.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,42 @@ Generated using froelen's [static website generator]( https://github.com/froelen
1111
This website was created and is owned, maintained, and used by myself :)
1212

1313
Feel free to use parts of its code or its design as inspiration for your own projects, although if you end up using it, I'd appreciate to be credited where and when necesary ^^
14+
15+
## Development environment
16+
17+
### File stucture
18+
19+
The development environment of this wesbite looks like this:
20+
21+
```
22+
dev-env/
23+
↳ static-website-generator/ # Cloned from https://github.com/froelen/static-website-generator
24+
↳ ssg.py
25+
26+
↳ froelen.github.io/ # Website directory
27+
↳ assets/...
28+
↳ en/...
29+
↳ fr/...
30+
↳ ssg-lang/
31+
↳ en.json
32+
↳ fr.json
33+
↳ ssg-templates/
34+
↳ index.html
35+
↳ credits.html
36+
↳ ...
37+
```
38+
39+
If you wish to work on this website as well, it is recommended to have the same file structure to make it easy, as tools (like build and localhost scripts) are designed for this environment.
40+
41+
### froelen's Static website generator usage
42+
43+
You can build new pages from templates using the following command. Make sure to check which templates you're generating (`--templates`) and in which languages (`--languages`).
44+
`user@machine:~/path/to/dev-env/` `python3 ./static-website-generator/ssg.py --languages='en,fr' --translations-dir='./assets/ssg-lang/' --templates='index' --templates-dir='./assets/ssg-templates/' --output-dir='./'`
45+
46+
For details, refer to froelen's SSG documentation.
47+
48+
### Localhost
49+
50+
You can easily launch a locally hosted version of the website to visualize it at any moment, simply run the following command:
51+
`user@machine:~/path/to/dev-env/` `node localhost.js`
52+
Note that this script also automatically launches a build script using froelen's SSG (assuming it is located in the correct place in the file structure as described earlier).

‎assets/images/icons/services/linkedin-black.png‎

11 KB
Loading

‎localhost.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const { execSync } = require('child_process');
2+
const express = require('express');
3+
const app = express();
4+
5+
// --- 1. RUN PYTHON SCRIPT FIRST ---
6+
try {
7+
console.log('[INFO] Running SSG...');
8+
9+
// Replace 'script.py' with the actual path to your script
10+
// Use path.join to ensure it works regardless of where you launch the terminal
11+
const pythonPath = '../static-website-generator/ssg.py';
12+
13+
// Execute the script. 'stdio: inherit' prints Python's output to YOUR terminal.
14+
execSync(`python3 "${pythonPath}" --languages='en,fr' --translations-dir='./assets/ssg-lang/' --templates='index' --templates-dir='./assets/ssg-templates/' --output-dir='./'`, { stdio: 'inherit' });
15+
16+
console.log('[INFO] Static site generation successfull.');
17+
} catch (error) {
18+
console.error('[ERROR] Static site generation failed! Stopping server start.');
19+
process.exit(1); // Exit if the pre-process fails
20+
}
21+
22+
// --- 2. SETUP EXPRESS ---
23+
const staticOptions = {
24+
extensions: ['html', 'htm'],
25+
index: 'index.html'
26+
};
27+
app.use('/', express.static('./', staticOptions));
28+
29+
app.listen(8080, () => {
30+
console.log('[INFO] Server running at http://localhost:8080');
31+
});

‎ssg-lang/en.json‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
{
2+
"index": {
3+
"lang": "en",
4+
"head.title": "froelen's website",
5+
"head.description": "Get to know froelen, a computer science student, and discover his works.",
6+
"url": "froelen.is-a.dev",
7+
"head.og:title": "froelen's wesbite - Computer Science student",
8+
"head.og:description": "Discover who I am and what I do.",
9+
"head.og:locale": "en_US",
10+
"lang.alt.1": "fr",
11+
"h1":"froelen's website",
12+
"nav.menu.alt": "Menu button",
13+
"lang.name": "English",
14+
"lang.alt.1.name": "français",
15+
"nav.links.github.alt": "Visit my GitHub profile.",
16+
"nav.links.linkedin.alt": "Visit my LinkedIn page.",
17+
"title.greet": "Hey! I'm ",
18+
"content-intro-main": "Computer science student learning through a mix of courses and self-teaching.<br>Currently learning: Python, HTML, CSS, JavaScript. Interested in: Java, Rust",
19+
"content-intro-links": "Click <a href=\"links.html\">here</a> for my social profiles!",
20+
"pf.website.h3": "Personal website",
21+
"pf.website": "My personel website, which you're browsing right now!",
22+
"pf.ssg.h3": "Static Site Generator",
23+
"pf.ssg": "A self-made SSG helping me to make this website.",
24+
"pf.hangman.h3": "Hangman",
25+
"pf.hangman": "The well-known game.",
26+
"pf.conway.h3": "Conway's Game of Life",
27+
"pf.conway": "Conway's self-playing 'game' of cellulas.",
28+
"pf.battle.h3": "Automatic Batlle",
29+
"pf.battle": "A self-playing battle cards game made to learn OOP.",
30+
"pf.pycraft.h3": "PyCraft",
31+
"pf.pycraft": "The biggest team-project I've done: a Terraria-inspired sandbox game.",
32+
"pf.doa8bw.h3": "Doa8bW mod",
33+
"pf.doa8bw": "A Minecraft mod based on the Diary of 8-Bit Warrior book series. Actively developed with team Minus",
34+
"pf.wiki.h3": "Aetherian Wiki",
35+
"pf.wiki": "The herculean task of writing a wiki all by myself.",
36+
"pf.cheat-sheets.h3": "Cheat Sheets",
37+
"pf.cheat-sheets": "Self-made simplified cheat sheets of CSS (HTML/JS planned) made on the go.",
38+
"pf.guides.h3": "Tech guides",
39+
"pf.guides": "Tutorials and other tech-related ressources.",
40+
"supporters-thanks": "Many thanks to everyone supporting me:",
41+
"supporters-cta": "Buy me a baguette!",
42+
"footer.sun":"Toggle color scheme (sun icon)",
43+
"footer.moon":"Toggle color scheme (moon icon)",
44+
"footer.credits":"Credits: see <a href=\"credits.html\">here.",
45+
"footer.map.about":"About",
46+
"footer.map.portfolio":"Portfolio",
47+
"footer.map.links":"Links",
48+
"footer.map.repo":"Repository"
49+
},
50+
"links": {
51+
"--head--": null,
52+
"lang": "en",
53+
"title": "froelen ・ links",
54+
"meta-description": "Find all profiles of froelen, easily.",
55+
"page": "links",
56+
"meta-og:title": "froelen's links - Computer Science student",
57+
"meta-og:description": "Discover who I am and what I do.",
58+
"meta-og:locale": "en_US",
59+
"--body--": null,
60+
"body-oled-disclaimer": "OLED mode is experimental! Some features may be buggy, or elements may disappear.",
61+
"body-h1": "froelen・links",
62+
"body-top-about": "Yesterday is history, tomorrow is a mystery, but today is a gift. That is why it is called the present.",
63+
"body-portfolio": "Portfolio (unavailable)",
64+
"body-discord": "Discord profile",
65+
"body-mailto": "Send an email",
66+
"body-footer-note": "This webpage is a personal project of the website's owner (<a class=\"footer-note-link\" href=\"index.html\">froelen</a>). You may find its code at <a class=\"footer-link-note\" href=\"https://github.com/froelen/froelen.github.io\" target=\"_blank\">its repository</a> for inspiration. Please credit the original work if you end up reusing some assets.<br> Credits to HelmiP, Mozilla FireFox, and PrimeTek: <a href=\"credits.html\">see here</a>.",
67+
"body-indexReturn": "Back"
68+
},
69+
"portfolio": {
70+
"--head--": null,
71+
"lang": "en",
72+
"title": "froelen ・ Portfolio",
73+
"meta-description": "Discover all of froelen's works displayed in a single place.",
74+
"page": "#portfolio",
75+
"meta-og:title": "froelen's portfolio",
76+
"meta-og:description": "Discover all of froelen's works displayed in a single place.",
77+
"meta-og:locale": "en_US",
78+
"--body--": null
79+
},
80+
"credits": {
81+
"lang": "en",
82+
"head.title": "froelen - credits",
83+
"head.description": "Credits dued by froelen.",
84+
"url": "froelen.is-a.dev",
85+
"head.og:title": "froelen's wesbite - Computer Science student",
86+
"head.og:description": "Credits dued by froelen.",
87+
"head.og:locale": "en_US",
88+
"lang.alt.1": "fr",
89+
"h1": "froelen.is-a.dev: Credits and licenses",
90+
"intro.h2": "Introduction",
91+
"intro.p": "All external elements from the froelen.is-a.dev website are credited here.",
92+
"helmip.p": "Credit to HelmiP for my profile picture.<br><ul><li>HelmiP: https://helmip.tumblr.com</li><li>Original image: https://helmip.tumblr.com/image/160023199121</li><li>Web Archive link: https://web.archive.org/web/20181129034243/https://helmip.tumblr.com/image/160023199121</li></ul><br>HelmiP's work is visible on this website and most of my social media profiles.",
93+
"dazzle.p": "Credit to Dazzle for their free icon pack<br><ul><li>Dazzle: https://dazzleui.pro</li></ul><br>Dazzle's work is visible on this website, each icon is from their pack unless otherwise noted.",
94+
"services.h2": "Services logos / icons",
95+
"services.p": "Services logos and icons (such as Discord, Instagram, or GitHub) were downloaded from their official brand kit.",
96+
"final.h2": "Final Notes",
97+
"final.p": "For more details, a copyright claim, or any other reason, you can contact me directly at <a href=\"../mailto.html\">froelen@tuta.io</a>."
98+
},
99+
"template": {
100+
"--head--": null,
101+
"lang": "en",
102+
"title": "froelen ・ ",
103+
"meta-description": "",
104+
"page": "",
105+
"meta-og:title": "",
106+
"meta-og:description": "",
107+
"meta-og:locale": "en_US",
108+
"--body--": null
109+
}
110+
}

‎ssg-lang/fr.json‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
{
2+
"index": {
3+
"lang": "fr",
4+
"head.title": "Site web de froelen",
5+
"head.description": "Apprenez à connaître froelen, étudiant en informatique, et découvrez son travail.",
6+
"url": "froelen.is-a.dev",
7+
"meta-og:title": "Site web de froelen - Étudiant en informatique",
8+
"meta-og:description": "Découvrez qui je suis et ce que je fais.",
9+
"meta-og:locale": "fr_FR",
10+
"lang.alt.1": "en",
11+
"h1":"Site web de froelen",
12+
"nav.menu.alt": "Bouton menu",
13+
"lang.name": "français",
14+
"lang.alt.1.name": "English",
15+
"nav.links.github.alt": "Visite mon profile GitHub.",
16+
"nav.links.linkedin.alt": "Visite ma page LinkedIn.",
17+
"title.greet": "Hey ! Je suis ",
18+
"content-intro-main": "Étudiant en informatique apprenant grâce à un mélange de leçons et d'auto-apprentissage.<br>En train d'apprendre : Python, HTML, CSS, Javascript<br>Intéressé par : Java, Rust",
19+
"content-intro-links": "Clique <a href=\"links.html\">ici</a> pour voir mes réseaux sociaux !",
20+
"pf.website.h3": "Site web personnel",
21+
"pf.website": "Mon site personnel, que vous naviguez actuellement !",
22+
"pf.ssg.h3": "Générateur de site statique",
23+
"pf.ssg": "Un SSG fait maison qui m'aide à faire ce site.",
24+
"pf.hangman.h3": "Jeu du pendu",
25+
"pf.hangman": "Le jeu bien connu.",
26+
"pf.conway.h3": "Jeu de la Vie de Conway",
27+
"pf.conway": "Le \"jeu\" automatique de cellules par Conway",
28+
"pf.battle.h3": "Bataille automatique",
29+
"pf.battle": "Un jeu automatique de la bataille de cartes réalisé pour apprendre la POO.",
30+
"pf.pycraft.h3": "PyCraft",
31+
"pf.pycraft": "Le plus gros projet de groupe que j'ai fait : un jeu bac-à-sable inspiré par Terraria.",
32+
"pf.doa8bw.h3": "Mod Journal d'un Noob",
33+
"pf.doa8bw": "Un mod Minecraft basé sur la série de livres \"Journal d'un Noob\". Activement développé avec la Team Minus.",
34+
"pf.wiki.h3": "Wiki aethérien",
35+
"pf.wiki": "La tâche herculéenne d'écrire un wiki par moi-même.",
36+
"pf.cheat-sheets.h3": "Antisèches",
37+
"pf.cheat-sheets": "Des antisèches simplifiées de CSS (HTML/JS prévus) faites maison au fur et à mesure.",
38+
"pf.guides.h3": "Guides tech",
39+
"pf.guides": "Tutoriels et autres ressources concernant la tech.",
40+
"supporters-thanks": "Merci beaucoup à tous ceux qui me supportent :",
41+
"supporters-cta": "Achète moi une baguette !",
42+
"footer.sun":"Permuter le thème de couleur (icône de soleil)",
43+
"footer.moon":"Permuter le thème de couleur (icône de lune)",
44+
"footer.credits":"Crédits: voir <a href=\"credits.html\">ici.",
45+
"footer.map.about":"À propos",
46+
"footer.map.portfolio":"Portfolio",
47+
"footer.map.links":"Liens",
48+
"footer.map.repo":"Dépôt"
49+
},
50+
"links": {
51+
"--head--": null,
52+
"lang": "fr",
53+
"title": "froelen ・ liens",
54+
"meta-description": "Trouvez tous les profils sociaux de froelen, facilement.",
55+
"page": "links",
56+
"meta-og:title": "Liens de froelen - Étudiant en informatque",
57+
"meta-og:description": "Découvrez qui je suis et ce que je fais.",
58+
"meta-og:locale": "fr_FR",
59+
"--body--": null,
60+
"body-oled-disclaimer": "Le mode OLED est expérimental ! Certaines fonctionalités peuvent ne pas fonctioner, ou des éléments peuvent disparaître.",
61+
"body-h1": "froelen・liens",
62+
"body-top-about": "Hier fait partie de l'histoire, demain reste à savoir, mais auourd'hui est un cadeau. C'est pourquoi on l'appelle le présent.",
63+
"body-portfolio": "Portfolio (indisponible)",
64+
"body-discord": "Profil Discord",
65+
"body-mailto": "Envoyer un email",
66+
"body-footer-note": "Cette page web est un projet personnel du propriétaire du site (<a class=\"footer-note-link\" href=\"index.html\">froelen</a>). Vous pouvez trouver son code source à <a class=\"footer-link-note\" href=\"https://github.com/froelen/froelen.github.io\" target=\"_blank\">son dépôt</a> pour vous inspirer. Merci de créditer le travail original si vous réutilisez certaines ressources.<br> Crédits à HelmiP, Mozilla Firefox, et PrimeTek : <a href=\"credits.html\">voir ici</a>.",
67+
"body-indexReturn": "Retour"
68+
},
69+
"portfolio": {
70+
"--head--": null,
71+
"lang": "fr",
72+
"title": "froelen ・ Portfolio",
73+
"meta-description": "Découvrez tous les travaux de froelen exposés un seul endroit.",
74+
"page": "#portfolio",
75+
"meta-og:title": "Portfolio de froelen",
76+
"meta-og:description": "Découvrez tous les travaux de froelen exposés un seul endroit.",
77+
"meta-og:locale": "fr_FR",
78+
"--body--": null
79+
},
80+
"credits": {
81+
"lang": "fr",
82+
"head.title": "froelen - crédits",
83+
"head.description": "Crédits dus par froelen.",
84+
"url": "froelen.is-a.dev",
85+
"head.og:title": "Site web de froelen - Computer Science student",
86+
"head.og:description": "Crédits dus par froelen.",
87+
"head.og:locale": "fr_FR",
88+
"lang.alt.1": "en",
89+
"h1": "froelen.is-a.dev: Crédits et licences",
90+
"intro.h2": "Introduction",
91+
"intro.p": "Tous les éléments externes du site froelen.is-a.dev sont crédités ici.",
92+
"helmip.p": "Crédit à HelmiP pour mon image de profile.<br><ul><li>HelmiP : https://helmip.tumblr.com</li><li>Image originale : https://helmip.tumblr.com/image/160023199121</li><li>Lien Web Archive: https://web.archive.org/web/20181129034243/https://helmip.tumblr.com/image/160023199121</li></ul><br>Le travail de HelmiP est visible sur ce site et la plupart de mes profils de réseaux sociaux.",
93+
"dazzle.p": "Crédit à Dazzle pour leur pack d'icônes gratuit<br><ul><li>Dazzle : https://dazzleui.pro</li></ul><br>Le travail de Dazzle ets visible sur ce site. Chaque icône provient de leur pack sinon indiqué autrement.",
94+
"services.h2": "Logos / icônes des services",
95+
"services.p": "Les logos et icônes des services (tels que Discord, Instagram, or GitHub) ont été téléchargés depuis leurs kits de marque officiels.",
96+
"final.h2": "Notes finales",
97+
"final.p": "Pour plus d'information, une demande de droits d'auteur, ou n'importe quelle autre raison, vous pouvez me contacter dircetement à <a href=\"../mailto.html\">froelen@tuta.io</a>."
98+
},
99+
"template": {
100+
"--head--": null,
101+
"lang": "en",
102+
"title": "froelen ・ ",
103+
"meta-description": "",
104+
"page": "",
105+
"meta-og:title": "",
106+
"meta-og:description": "",
107+
"meta-og:locale": "en_US",
108+
"--body--": null
109+
}
110+
}

‎ssg-templates/credits.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="{{lang}}">
3+
4+
<head>
5+
<!-- Sets default and correct encoding and viewport -->
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
9+
<!-- Title and description -->
10+
<title>{{head.title}}</title>
11+
<meta name="description" content="{{head.description}}">
12+
13+
<!-- SEO meta tags for search engines indexation and score optimisation -->
14+
<meta name="robots" content="index, follow">
15+
<meta name="googlebot" content="index, follow">
16+
<link rel="canonical" href="https://{{url}}/{{lang}}/credits">
17+
18+
<!-- Open Graph meta tags for social media sharing -->
19+
<meta property="og:title" content="{{head.og:title}}">
20+
<meta property="og:description" content="{{head.og:description}}">
21+
<meta property="og:url" content="https://{{url}}/{{lang}}/credits">
22+
<meta property="og:type" content="website">
23+
<meta property="og:image" content="https://{{url}}/assets/images/og-image.jpg">
24+
<meta property="og:locale" content="{{head.og:locale}}">
25+
26+
<!-- Alternate language versions for SEO and user experience -->
27+
<link rel="alternate" hreflang="{{lang}}" href="https://{{url}}/{{lang}}/credits">
28+
<link rel="alternate" hreflang="{{lang.alt.1}}" href="https://{{url}}/{{lang.alt.1}}/credits">
29+
<link rel="alternate" hreflang="x-default" href="https://{{url}}/en/credits">
30+
31+
<!-- Stylesheets -->
32+
<link rel="stylesheet" href="../assets/css/fonts.css">
33+
<link rel="stylesheet" href="../assets/css/global.css">
34+
<link rel="stylesheet" href="../assets/css/credits.css">
35+
<link rel="stylesheet" href="../assets/css/{{lang}}-credits.css">
36+
37+
<link rel="preload" href="../assets/css/fonts.css" as="style">
38+
<link rel="preload" href="../assets/css/global.css" as="style">
39+
<link rel="preload" href="../assets/css/credits.css" as="style">
40+
41+
<!-- Scripts -->
42+
<script src="../assets/js/scripts.js" defer></script>
43+
44+
<!-- Metadata for SEO & web crawlers and copyright information -->
45+
<meta name="author" content="froelen">
46+
<meta name="copyright" content="© 2026 froelen">
47+
<meta name="google" content="notranslate"> <!-- Prevents Google from translating the page -->
48+
<meta name="theme-color" content="#F7F8FF"> <!-- Sets the theme color for browsers that support it -->
49+
</head>
50+
51+
<body>
52+
<h1>{{h1}}</h1>
53+
54+
<main>
55+
<h2>{{intro.h2}}</h2>
56+
<p>{{intro.p}}</p>
57+
58+
<h2>HelmiP</h2>
59+
<p>{{helmip.p}}</p>
60+
61+
<h2>Dazzle</h2>
62+
<p>{{dazzle.p}}</p>
63+
64+
<h2>{{services.h2}}</h2>
65+
<p>{{services.p}}</p>
66+
67+
<h2>{{final.h2}}</h2>
68+
<p>{{final.p}}</p>
69+
</main>
70+
</body>
71+
72+
</html>

0 commit comments

Comments
 (0)