tarion/tarion.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Generate project cards from a json, rather than having them hardcoded

Browse source
This commit is contained in:
Claire Schwarzer 2026-01-20 11:52:06 +01:00
parent 6a193eb3ec
commit 1ae77b8270
3 changed files with 93 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

48
index.html
View file

@ -72,53 +72,7 @@
<div class="projects-container">
<h1 data-i18n="projects_title"></h1>
<div class="projects">
<div class="project">
<h1 data-i18n="project_game_engine_title"></h1>
<p data-i18n="project_game_engine_description"></p>
<ul>
<li>C++</li>
<li>Lua</li>
</ul>
<a href="https://git.tarion.org/tarion/Game-Engine"><i class="fa-brands fa-git-alt"></i></a>
</div>
<div class="project">
<h1 data-i18n="project_schwarzer_title"></h1>
<p data-i18n="project_schwarzer_description"></p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Hosting</li>
</ul>
<a href="https://schwarzer-energie.de/"><i class="fa-solid fa-globe"></i></a>
</div>
<div class="project">
<h1 data-i18n="project_tarion_org_title"></h1>
<p data-i18n="project_tarion_org_description"></p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Hosting</li>
</ul>
<a href="https://tarion.org/"><i class="fa-solid fa-globe"></i></a>
</div>
<div class="project">
<h1 data-i18n="project_lov8_title"></h1>
<p data-i18n="project_lov8_description"></p>
<ul>
<li>Lua</li>
</ul>
<a href="https://git.tarion.org/tarion/LOV-8"><i class="fa-brands fa-git-alt"></i></a>
</div>
<div class="project">
<h1 data-i18n="project_remove_shorts_title"></h1>
<p data-i18n="project_remove_shorts_description"></p>
<ul>
<li>JavaScript</li>
</ul>
<a href="https://git.tarion.org/tarion/remove-youtube-shorts"><i class="fa-brands fa-git-alt"></i></a>
</div>
<!-- Generated projects go here -->
</div>
</div>
</section>

50
projects.json Normal file
View file

@ -0,0 +1,50 @@
{
"project_game_engine_title": {
"description": "project_game_engine_description",
"skills":[
"C++",
"OpenGL",
"Lua"
],
"link": "https://git.tarion.org/tarion/Game-Engine",
"linkIcon": "fa-brands fa-git-alt"
},
"project_schwarzer_title": {
"description": "project_schwarzer_description",
"skills":[
"HTML",
"CSS",
"JavaScript",
"Hosting"
],
"link": "https://schwarzer-energie.de/",
"linkIcon": "fa-solid fa-globe"
},
"project_tarion_org_title": {
"description": "project_tarion_org_description",
"skills":[
"HTML",
"CSS",
"JavaScript",
"Hosting"
],
"link": "https://tarion.org/",
"linkIcon": "fa-solid fa-globe"
},
"project_lov8_title": {
"description": "project_lov8_description",
"skills":[
"Lua"
],
"link": "https://git.tarion.org/tarion/LOV-8",
"linkIcon": "fa-brands fa-git-alt"
},
"project_remove_shorts_title": {
"description": "project_remove_shorts_description",
"skills":[
"JavaScript"
],
"link": "https://git.tarion.org/tarion/remove-youtube-shorts",
"linkIcon": "fa-brands fa-git-alt"
}
}

42
script.js
View file

@ -83,10 +83,52 @@ async function getLanguageData(lang){
return response.json();
}
async function getProjectsData(){
const response = await fetch(`projects.json`);
return response.json();
}
document.addEventListener("DOMContentLoaded", async () => {
const userLang = (navigator.language || navigator.userLanguage).split('-')[0];
const langData = await getLanguageData(userLang);
// Load Projects from projects.json
const projects = await getProjectsData();
if (projects != null){
console.log(projects);
for (var key in projects){
var project = projects[key];
var newProject = document.createElement("div");
newProject.setAttribute("class", "project");
var title = document.createElement("h1");
title.setAttribute("data-i18n", key);
newProject.appendChild(title);
var description = document.createElement("p");
description.setAttribute("data-i18n", project.description);
newProject.appendChild(description);
var skills = document.createElement("ul");
for (var skillKey in project.skills){
var newSkill = document.createElement("li");
newSkill.innerHTML = project.skills[skillKey];
skills.appendChild(newSkill);
}
newProject.appendChild(skills);
var button = document.createElement("a");
button.setAttribute("href", project.link);
button.innerHTML = "<i class='" + project.linkIcon + "'></i>"
newProject.appendChild(button);
document.getElementsByClassName("projects")[0].appendChild(newProject);
}
}
document.querySelectorAll("[data-i18n]").forEach((element) => {
const key = element.getAttribute("data-i18n");
element.innerHTML = langData[key];