This is a project that aims to preserve Minecraft Beta mods and plugins through archives of documentation and JARs and showcase new plugins for beta.
featured projects
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..d23a06a
--- /dev/null
+++ b/index.js
@@ -0,0 +1,11 @@
+const featuredHelper = document.querySelector("#featuredHelper")
+
+async function loadFeatured() {
+ const response = await fetch(`bananas.json`);
+ if (!response.ok) {
+ featuredHelper.innerHTML = `
+
Oops! Failed to fetch featured projects...
+ `
+ throw new Error("Failed to fetch featured projects JSON");
+ }
+}
\ No newline at end of file
diff --git a/project.html b/project.html
index 902c9a9..ca89c82 100644
--- a/project.html
+++ b/project.html
@@ -2,12 +2,12 @@
-
+
NBeta
-
-
+
+
@@ -32,5 +32,14 @@
+
\ No newline at end of file
diff --git a/project.js b/project.js
index 2e624a3..10c264d 100644
--- a/project.js
+++ b/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();
\ No newline at end of file
+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);
+ }
+}
diff --git a/styles.css b/styles.css
index 4247de8..aa2576f 100644
--- a/styles.css
+++ b/styles.css
@@ -1,7 +1,6 @@
* {
margin: 0;
padding: 0;
-
}
@font-face {
@@ -13,6 +12,7 @@ body {
font-family: Minecraft, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: black;
color:white;
+ font-size : clamp(1.2rem, .2vw, 2rem);
}
header {
@@ -79,6 +79,7 @@ button:hover {
#everythingHelper {
max-width: 60%;
margin: auto;
+ transform: .2s;
}
#headerLinks {
@@ -140,7 +141,8 @@ button:hover {
}
#projectTitleSubtitle {
-
+ margin-top: auto;
+ margin-bottom: auto;
}
#projectHeader {
@@ -161,6 +163,12 @@ button:hover {
cursor: pointer;
}
+#projectHeader img {
+ outline: 2px solid gray;
+ width: 5vw;
+ height: 5vw;
+}
+
#projectDescription li {
margin-left: 20px;
list-style-type: "> ";
@@ -168,4 +176,30 @@ button:hover {
#projectDescription h1, h2 {
margin-bottom: 8px;
+}
+
+@media only screen and (max-width: 1280px) {
+
+ #everythingHelper {
+ max-width: 80%;
+ }
+
+ #linksBox {
+ flex-direction: column;
+ }
+
+ #linksBox * {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+}
+
+@media only screen and (max-width: 300px) {
+
+ #everythingHelper {
+ max-width: 90%;
+ }
+
+
}
\ No newline at end of file