Responsive UI, reworked project loading script and WIP automatic featured section.
This commit is contained in:
parent
0a7017e38d
commit
ed347bcfca
6 changed files with 88 additions and 41 deletions
62
project.js
62
project.js
|
|
@ -1,42 +1,32 @@
|
|||
const downloadButton = document.querySelector("#projectHeader button");
|
||||
const header = document.querySelector("#projectHeader");
|
||||
const headerTitle = document.querySelector("#projectHeader h1");
|
||||
const subtitle = document.querySelector("#projectHeader p");
|
||||
const main = document.querySelector("main");
|
||||
const logo = document.querySelector("#projectHeader img");
|
||||
|
||||
const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
const projectID = urlParams.get('id');
|
||||
|
||||
function loadProject() {
|
||||
var jsonXhr = new XMLHttpRequest();
|
||||
jsonXhr.open("GET", "projects/" + projectID + "/project.json", true);
|
||||
|
||||
jsonXhr.onreadystatechange = function () {
|
||||
if (jsonXhr.readyState === 4 && jsonXhr.status === 200) {
|
||||
var jsonData = JSON.parse(jsonXhr.responseText);
|
||||
headerTitle.innerText = jsonData.project.title;
|
||||
subtitle.innerText = jsonData.project.subtitle;
|
||||
console.log(jsonData);
|
||||
}
|
||||
};
|
||||
|
||||
var mdXhr = new XMLHttpRequest();
|
||||
mdXhr.open("GET", "projects/" + projectID + "/description.md", true);
|
||||
|
||||
mdXhr.onreadystatechange = function () {
|
||||
if (mdXhr.readyState === 4 && mdXhr.status === 200) {
|
||||
const html = marked.parse(
|
||||
mdXhr.responseText.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/,"")
|
||||
)
|
||||
main.appendChild(html.replaceColorCodes());
|
||||
console.log(html.replaceColorCodes());
|
||||
}
|
||||
};
|
||||
jsonXhr.send();
|
||||
mdXhr.send();
|
||||
logo.src = "projects/" + projectID + "/logo.png";
|
||||
async function getProjectJSON(id = projectID) {
|
||||
const response = await fetch(`projects/${id}/project.json`);
|
||||
if (!response.ok) throw new Error("Failed to fetch project JSON");
|
||||
return response.json();
|
||||
}
|
||||
|
||||
loadProject();
|
||||
async function getProjectDescription(obj, id = projectID) {
|
||||
const response = await fetch(`projects/${id}/description.md`);
|
||||
if (response.ok) {
|
||||
const text = await response.text();
|
||||
obj.innerHTML = marked.parse(text.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, ""));
|
||||
}
|
||||
}
|
||||
|
||||
async function loadProject(id = projectID, objTitle, objSubtitle, objDescription, objLogo) {
|
||||
try {
|
||||
const jsonData = await getProjectJSON(id);
|
||||
|
||||
if (objTitle) objTitle.innerText = jsonData.project.title;
|
||||
if (objSubtitle) objSubtitle.innerText = jsonData.project.subtitle;
|
||||
|
||||
if (objDescription) await getProjectDescription(objDescription, id);
|
||||
if (objLogo) objLogo.src = `projects/${id}/logo.png`;
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error loading project:", error);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue