Links section

This commit is contained in:
MeowcaTheoRange 2023-11-26 00:55:00 -06:00
parent 6bc0970e58
commit de4e109bca
6 changed files with 72 additions and 23 deletions

View file

@ -1,7 +1,7 @@
<section> <section>
<p> <p>
<a href="/">Home</a> - <a href="/projects/">Projects</a> - <a href="/">Home</a> - <a href="/links/">Links</a> -
<a href="/about/">About</a> - <a href="/projects/">Projects</a> - <a href="/about/">About</a> -
<a href="/site/">Site Information</a> <a href="/site/">Site Information</a>
</p> </p>
</section> </section>

View file

@ -5,7 +5,6 @@
<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");
@ -35,15 +34,8 @@
<h1>Getting domain indexes...</h1> <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/accessibility.js"></script> <script src="/scripts/accessibility.js"></script>
<script src="./scripts/data_get_domain.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

@ -6,18 +6,13 @@ fetch("https://blog.abtmtr.link/api/collections/paste/posts/domain")
data_get.innerHTML = data.reduce( data_get.innerHTML = data.reduce(
(html, subdomain) => (html, subdomain) =>
html + html +
`<h1>${subdomain.name}</h1> `<h1><a href="${subdomain.url}" target="_blank">${
subdomain.name
}</a></h1>
${subdomain.description.reduce( ${subdomain.description.reduce(
(html, descfragment) => html + `<p>${descfragment}</p>`, (html, descfragment) => html + `<p>${descfragment}</p>`,
"" ""
)} )}`,
<p>
<button
onclick="window.open('${subdomain.url}')"
>
Open
</button>
</p>`,
"" ""
); );
}); });

View file

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>MeowcaTheoRange</title> <title>MeowcaTheoRange</title>
@ -92,12 +92,21 @@
I'm usually only in it for the correlations. I'm usually only in it for the correlations.
</li> </li>
<li> <li>
You may see me hyperfixate on random stuff, like You may see me hyperfixate on random stuff, like certain fonts or
<a href="#">certain fonts</a> public transit.
or public transit.
</li> </li>
</ul> </ul>
</section> </section>
<section>
<h2>What I believe in</h2>
<ul>
<li>Self-hosting important or personal infrastructure</li>
<li>Free and open-source material</li>
<li>Privacy as a basic human right</li>
<li>Trans rights &amp; gay rights</li>
<li>Autistic superiority <small>/joke</small></li>
</ul>
</section>
</main> </main>
<div id="WindowHolder"></div> <div id="WindowHolder"></div>
<section id="accessibility" hidden></section> <section id="accessibility" hidden></section>

41
views/links/index.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MeowcaTheoRange</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/style.css" />
<style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root {
--base-scale: 16px;
--background-color: hsl(270, 100%, 15%);
--color: hsl(270, 100%, 85%);
--accent-color: hsl(270, 100%, 65%);
--accent-color-fg: hsl(270, 100%, 95%);
--font-family: "Lexend Deca";
--document-width: 40em;
}
</style>
</head>
<body>
<header>
<section>
<h1>Links</h1>
<p>Where else you can find me.</p>
</section>
<$ nav.html $>
</header>
<main>
<section id="data_get">
<h1>Getting links...</h1>
</section>
</main>
<section id="accessibility" hidden></section>
<script src="/scripts/accessibility.js"></script>
<script src="./scripts/data_get_links.js"></script>
</body>
</html>

View file

@ -0,0 +1,12 @@
const data_get = document.getElementById("data_get");
fetch("https://pronouns.cc/api/v1/users/MeowcaTheoRange")
.then((x) => x.json())
.then((user) => {
data_get.innerHTML = user.links.reduce(
(html, link) =>
html +
`<h1><a href="${link}" target="_blank">${new URL(link).host}</a></h1>
<p>${link}</p>`,
""
);
});