I think we should improve the site somewhat.

This commit is contained in:
MeowcaTheoRange 2023-11-26 00:39:30 -06:00
parent d9716a4d6a
commit 6bc0970e58
8 changed files with 136 additions and 33 deletions

View file

@ -5,6 +5,7 @@
<title>MeowcaTheoRange</title> <title>MeowcaTheoRange</title>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.css" /> <link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/windows.css" />
<link rel="stylesheet" href="/styles/style.css" /> <link rel="stylesheet" href="/styles/style.css" />
<style> <style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
@ -12,10 +13,10 @@
:root { :root {
--base-scale: 16px; --base-scale: 16px;
--background-color: hsl(195, 100%, 15%); --background-color: hsl(15, 100%, 15%);
--color: hsl(195, 100%, 85%); --color: hsl(15, 100%, 85%);
--accent-color: hsl(195, 100%, 50%); --accent-color: hsl(15, 100%, 50%);
--accent-color-fg: hsl(195, 100%, 95%); --accent-color-fg: hsl(15, 100%, 95%);
--font-family: "Lexend Deca"; --font-family: "Lexend Deca";
--document-width: 40em; --document-width: 40em;
} }
@ -25,17 +26,24 @@
<header> <header>
<section> <section>
<h1>About</h1> <h1>About</h1>
<p>More about me.</p> <p>More about this domain.</p>
</section> </section>
<$ nav.html $> <$ nav.html $>
</header> </header>
<main> <main>
<section> <section id="data_get">
<h2>WIP</h2> <h1>Getting domain indexes...</h1>
</section> </section>
</main> </main>
<div id="WindowHolder"></div>
<section id="accessibility" hidden></section> <section id="accessibility" hidden></section>
<script src="/scripts/windows.js"></script> <script src="/scripts/windows.js"></script>
<script src="/scripts/accessibility.js"></script> <script src="/scripts/accessibility.js"></script>
<script src="./scripts/data_get_domain.js"></script>
<script>
window.manager = new WindowManager(
document.getElementById("WindowHolder")
);
</script>
</body> </body>
</html> </html>

View file

@ -0,0 +1,23 @@
const data_get = document.getElementById("data_get");
fetch("https://blog.abtmtr.link/api/collections/paste/posts/domain")
.then((x) => x.json())
.then((paste) => {
const data = JSON.parse(paste.data.body);
data_get.innerHTML = data.reduce(
(html, subdomain) =>
html +
`<h1>${subdomain.name}</h1>
${subdomain.description.reduce(
(html, descfragment) => html + `<p>${descfragment}</p>`,
""
)}
<p>
<button
onclick="window.open('${subdomain.url}')"
>
Open
</button>
</p>`,
""
);
});

View file

@ -5,6 +5,7 @@
<title>MeowcaTheoRange</title> <title>MeowcaTheoRange</title>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.css" /> <link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/windows.css" />
<link rel="stylesheet" href="/styles/style.css" /> <link rel="stylesheet" href="/styles/style.css" />
<style> <style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
@ -31,11 +32,36 @@
<main> <main>
<section> <section>
<h2>Welcome! 👋</h2> <h2>Welcome! 👋</h2>
<p>I'm MeowcaTheoRange.</p> <section id="data_whoami">
<p>
I'm...
<small
><a href="https://pronouns.cc/@MeowcaTheoRange" target="_blank"
>not loading</a
>.</small
>
</p>
</section>
<p> <p>
I'm a web developer, Fediverse enthusiast, and compulsory Minnesotan. I'm a web developer, Fediverse enthusiast, and compulsory Minnesotan.
</p> </p>
<p>I run this domain and all of the services on it!</p> <p>I run this domain and all of the services on it!</p>
<p id="no-fetchy" style="display: none">
For me, it is <b id="time">12:00 PM</b> on a
<b id="weekday">Sunday</b>. <b id="timezone">(UTC-0)</b><br />
<small
>data locally fetched from
<a href="https://pronouns.cc/@MeowcaTheoRange" target="_blank"
>pronouns.cc</a
></small
>
</p>
<button
onclick="initDocument(['ff76a4','ffffff','c011d7','000000','2f3cbe'], 300, 200, 'vert', 'Genderfluid');
initDocument(['FF218C','FFD800','21B1FF'], 300, 200, 'vert', 'Pansexual')"
>
Cool Flags
</button>
</section> </section>
<section> <section>
<h2>What I like doing</h2> <h2>What I like doing</h2>
@ -73,8 +99,16 @@
</ul> </ul>
</section> </section>
</main> </main>
<div id="WindowHolder"></div>
<section id="accessibility" hidden></section> <section id="accessibility" hidden></section>
<script src="/scripts/windows.js"></script> <script src="/scripts/windows.js"></script>
<script src="/scripts/accessibility.js"></script> <script src="/scripts/accessibility.js"></script>
<script src="./scripts/data_get_whoami.js"></script>
<script src="/projects/hex/scripts/index.js"></script>
<script>
window.manager = new WindowManager(
document.getElementById("WindowHolder")
);
</script>
</body> </body>
</html> </html>

View file

@ -48,11 +48,11 @@ function averageColors(hex) {
); );
} }
function initDocument(hx, w, h, t) { function initDocument(hx, w, h, t, apiName) {
const newWindow = window.top.manager.createWindow( const newWindow = window.top.manager.createWindow(
`<html> `<html>
<head> <head>
<title>Result</title> <title>${apiName || "Result"}</title>
</head> </head>
<body style="display:flex;margin:0;height:100vh;align-items:safe center;justify-content:safe center;"> <body style="display:flex;margin:0;height:100vh;align-items:safe center;justify-content:safe center;">
<canvas id="canvas" width="300" height="200"></canvas> <canvas id="canvas" width="300" height="200"></canvas>
@ -71,7 +71,8 @@ function initDocument(hx, w, h, t) {
t, t,
newWindow.windowContent.contentDocument.querySelector("#canvas") newWindow.windowContent.contentDocument.querySelector("#canvas")
); );
propagateStyles(getComputedStyle(root), newWindow.windowObject); if (!apiName)
propagateStyles(getComputedStyle(root), newWindow.windowObject);
}); });
} }

View file

@ -19,9 +19,9 @@ fetch("./public/projects.json")
</button> </button>
or or
<button <button
onclick="window.manager.createWindow('${project.url}', false, ${ onclick="window.manager.createWindow('${project.url}', false${
project.size?.[0] ?? "null" project.size?.[0] ? ", " + project.size[0] : ""
}, ${project.size?.[1] ?? "null"})" }${project.size?.[1] ? ", " + project.size[1] : ""})"
> >
Open Window Open Window
</button> </button>

View file

@ -0,0 +1,34 @@
const data_whoami = document.getElementById("data_whoami");
const time = document.getElementById("time");
const weekday = document.getElementById("weekday");
const timezone = document.getElementById("timezone");
const nofetchy = document.getElementById("no-fetchy");
fetch("https://pronouns.cc/api/v1/users/MeowcaTheoRange")
.then((x) => x.json())
.then((user) => {
data_whoami.innerHTML = `
<p>I'm <a href="https://pronouns.cc/@MeowcaTheoRange" target="_blank"><b>${
user.names[0].value
}</b></a>, also better known online as <b>${
user.name
}</b>. <small>(${user.pronouns
.map((pronoun) => pronoun.pronouns.split("/")[0])
.join("/")})</small></p>`;
const curTime = new Date();
timezone.innerHTML = `(UTC${user.utc_offset > 0 ? "+" : "-"}${Math.abs(
user.utc_offset / (60 * 60)
)})`;
function updateTime() {
curTime.setTime(
Date.now() -
curTime.getTimezoneOffset() * 60 * 1000 -
user.utc_offset * 1000
);
time.innerHTML = curTime.toLocaleTimeString();
weekday.innerHTML = curTime.toLocaleString("en-us", { weekday: "long" });
window.requestAnimationFrame(updateTime);
}
window.requestAnimationFrame(updateTime);
nofetchy.style.display = null;
});

View file

@ -174,15 +174,9 @@ class WindowObject {
); );
this.windowContent.addEventListener("load", () => { this.windowContent.addEventListener("load", () => {
this.title = this.windowContent.contentWindow.document.title; try {
if (!srcdoc) { this.title = this.windowContent.contentWindow.document.title;
const nb = this.windowManager.querySelector(".window-new-button"); } catch (err) {}
nb.addEventListener("click", () => {
window.open(this.contentUrl);
});
nb.addEventListener("touchstart", (e) => e.stopPropagation());
nb.addEventListener("touchend", (e) => e.stopPropagation());
}
}); });
} }
@ -395,10 +389,12 @@ class WindowObject {
} }
destroy() { destroy() {
if (this.windowContent.contentWindow != null) { try {
const unloadEvent = new Event("beforeunload"); if (this.windowContent.contentWindow != null) {
this.windowContent.contentWindow.dispatchEvent(unloadEvent); const unloadEvent = new Event("beforeunload");
} this.windowContent.contentWindow.dispatchEvent(unloadEvent);
}
} catch (err) {}
this.windowObject.remove(); this.windowObject.remove();
@ -516,7 +512,7 @@ class WindowObject {
} }
} }
static createWindow(windowRef, content, srcdoc, w, h) { static createWindow(windowRef, content, srcdoc, w = 600, h = 500) {
const windowObject = document.createElement("div"); const windowObject = document.createElement("div");
windowObject.classList.add("window-object"); windowObject.classList.add("window-object");
windowObject.style.width = `calc(${w}px + 2.75em)`; windowObject.style.width = `calc(${w}px + 2.75em)`;
@ -535,7 +531,7 @@ class WindowObject {
{ {
const windowManagerLabel = document.createElement("span"); const windowManagerLabel = document.createElement("span");
windowManagerLabel.textContent = ""; windowManagerLabel.textContent = "Window";
windowManagerLabel.classList.add("window-manager-label"); windowManagerLabel.classList.add("window-manager-label");
windowManagerStart.appendChild(windowManagerLabel); windowManagerStart.appendChild(windowManagerLabel);
@ -552,6 +548,13 @@ class WindowObject {
const windowNewButton = document.createElement("button"); const windowNewButton = document.createElement("button");
windowNewButton.innerHTML = "open_in_new"; windowNewButton.innerHTML = "open_in_new";
windowNewButton.classList.add("window-new-button"); windowNewButton.classList.add("window-new-button");
windowNewButton.addEventListener("click", () => window.open(content));
windowNewButton.addEventListener("touchstart", (e) =>
e.stopPropagation()
);
windowNewButton.addEventListener("touchend", (e) =>
e.stopPropagation()
);
windowManagerEnd.appendChild(windowNewButton); windowManagerEnd.appendChild(windowNewButton);
} }

View file

@ -12,10 +12,10 @@
:root { :root {
--base-scale: 16px; --base-scale: 16px;
--background-color: hsl(195, 100%, 15%); --background-color: hsl(125, 100%, 15%);
--color: hsl(195, 100%, 85%); --color: hsl(125, 100%, 85%);
--accent-color: hsl(195, 100%, 50%); --accent-color: hsl(125, 100%, 50%);
--accent-color-fg: hsl(195, 100%, 95%); --accent-color-fg: hsl(125, 100%, 95%);
--font-family: "Lexend Deca"; --font-family: "Lexend Deca";
--document-width: 40em; --document-width: 40em;
} }