Move friend buttons to front page&re-encode images
Thanks specifically to @LeNooby09 for borking your website and making my website have a borked image >:3
This commit is contained in:
BuyMyMojo
parent
5a72c0519e
commit
5153e2deef
GPG key ID:
19AB7AA462B8AB3B
5 changed files with 189 additions and 132 deletions
|
|
@ -1,10 +1,10 @@
|
||||||
// @ts-check
|
// @ts-check
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from "astro/config";
|
||||||
import { remarkModifiedTime } from './remark-modified-time.mjs';
|
import { remarkModifiedTime } from "./remark-modified-time.mjs";
|
||||||
|
|
||||||
import preact from "@astrojs/preact";
|
import preact from "@astrojs/preact";
|
||||||
import tailwind from "@astrojs/tailwind";
|
import tailwind from "@astrojs/tailwind";
|
||||||
import node from '@astrojs/node';
|
import node from "@astrojs/node";
|
||||||
|
|
||||||
import icon from "astro-icon";
|
import icon from "astro-icon";
|
||||||
|
|
||||||
|
|
@ -12,19 +12,43 @@ import mdx from "@astrojs/mdx";
|
||||||
|
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
output: process.env.DOCKER_BUILD ? 'server' : 'static',
|
output: process.env.DOCKER_BUILD ? "server" : "static",
|
||||||
site: "https://aria.coffee",
|
site: "https://aria.coffee",
|
||||||
integrations: [preact(), tailwind(), icon(), mdx()],
|
integrations: [preact(), tailwind(), icon(), mdx()],
|
||||||
|
|
||||||
image: {
|
image: {
|
||||||
domains: ["buymymojo.net", "aria.coffee", "github.com", "githubusercontent.com", "avatars.githubusercontent.com", "camo.githubusercontent.com", "user-images.githubusercontent.com", "private-user-images.githubusercontent.com"],
|
domains: [
|
||||||
|
"buymymojo.net",
|
||||||
|
"aria.coffee",
|
||||||
|
"github.com",
|
||||||
|
"githubusercontent.com",
|
||||||
|
"avatars.githubusercontent.com",
|
||||||
|
"camo.githubusercontent.com",
|
||||||
|
"user-images.githubusercontent.com",
|
||||||
|
"private-user-images.githubusercontent.com",
|
||||||
|
"alyxia.dev",
|
||||||
|
"nanoshinono.me",
|
||||||
|
"ata.moe",
|
||||||
|
"buh.moe",
|
||||||
|
"hayden.moe",
|
||||||
|
"onz.ee",
|
||||||
|
"notnite.com",
|
||||||
|
"erisdump.neocities.org",
|
||||||
|
"espi.me",
|
||||||
|
"alula.me",
|
||||||
|
"sapphic.moe",
|
||||||
|
"calayucu.com",
|
||||||
|
"meow-d.github.io",
|
||||||
|
"girlthi.ng",
|
||||||
|
"lenooby09.tech",
|
||||||
|
"ackwell.au",
|
||||||
|
],
|
||||||
},
|
},
|
||||||
markdown: {
|
markdown: {
|
||||||
remarkPlugins: [remarkModifiedTime],
|
remarkPlugins: [remarkModifiedTime],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// Bellow is for when dedicated server is wanted?
|
// Bellow is for when dedicated server is wanted?
|
||||||
|
|
||||||
// ,
|
// ,
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
---
|
---
|
||||||
import { Image } from "astro:assets";
|
import { Image, Picture } from "astro:assets";
|
||||||
|
|
||||||
const { name, image, target } = Astro.props;
|
const { name, image, target } = Astro.props;
|
||||||
---
|
---
|
||||||
<a href={`${target}`} target="_blank"><Image src={image} width={88} height={31} alt={`${name}`} class="flex" /></a>
|
<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="max" decoding="async" loading="lazy" formats={['webp']} /></a>
|
||||||
<style>
|
<style>
|
||||||
img {
|
img {
|
||||||
image-rendering: pixelated;
|
image-rendering: pixelated;
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,7 @@ const optimizedBackgroundLQ = await getImage({
|
||||||
| <a href="/" class="nav-btn">Home</a> |
|
| <a href="/" class="nav-btn">Home</a> |
|
||||||
<a href="/blog" class="nav-btn">Blog</a> |
|
<a href="/blog" class="nav-btn">Blog</a> |
|
||||||
<a href="/about" class="nav-btn">About</a> |
|
<a href="/about" class="nav-btn">About</a> |
|
||||||
<a href="/friends" class="nav-btn">Friends</a> |
|
<!-- <a href="/friends" class="nav-btn">Friends</a> | -->
|
||||||
<a href="/directory" class="nav-btn">Other Pages</a> |
|
<a href="/directory" class="nav-btn">Other Pages</a> |
|
||||||
<a href="/portfolio" class="nav-btn">Portfolio</a> |
|
<a href="/portfolio" class="nav-btn">Portfolio</a> |
|
||||||
</p>
|
</p>
|
||||||
|
|
|
||||||
|
|
@ -9,103 +9,7 @@ const description = "All of Aria's friends with 88x31 buttons for you to click o
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout pageTitle={pageTitle}>
|
<BaseLayout pageTitle={pageTitle}>
|
||||||
<Partition>
|
|
||||||
<h1 class="text-2xl">These are cool people!!</h1>
|
|
||||||
<br />
|
|
||||||
<div class="flex outline-dotted p-5 flex-wrap justify-center">
|
|
||||||
<FriendLink
|
|
||||||
name="Alyxia"
|
|
||||||
image="https://alyxia.dev/static/img/88x31/self.png"
|
|
||||||
target="https://alyxia.dev"
|
|
||||||
/>
|
|
||||||
<div class="outline-dashed flex outline-3 mx-1">
|
|
||||||
<FriendLink
|
|
||||||
name="Prefetcher"
|
|
||||||
image="https://nanoshinono.me/prefetcher.gif"
|
|
||||||
target="https://nanoshinono.me/"
|
|
||||||
/>
|
|
||||||
<FriendLink
|
|
||||||
name="Ata"
|
|
||||||
image="https://ata.moe/88x31.png"
|
|
||||||
target="https://ata.moe"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<FriendLink
|
|
||||||
name="Amemoia"
|
|
||||||
image="https://buh.moe/resources/buttons/88x31.gif"
|
|
||||||
target="https://buh.moe/"
|
|
||||||
/>
|
|
||||||
<FriendLink
|
|
||||||
name="Hayden"
|
|
||||||
image="https://hayden.moe/88x31/hayden.png"
|
|
||||||
target="https://hayden.moe/"
|
|
||||||
/>
|
|
||||||
<FriendLink
|
|
||||||
name="Onzecki"
|
|
||||||
image="https://onz.ee/assets/88x31s/png/onzecki.png"
|
|
||||||
target="https://onz.ee/"
|
|
||||||
/>
|
|
||||||
<FriendLink
|
|
||||||
name="NotNite"
|
|
||||||
image="https://notnite.com/buttons/notnite.png"
|
|
||||||
target="https://notnite.com/"
|
|
||||||
/>
|
|
||||||
<FriendLink
|
|
||||||
name="0x5066"
|
|
||||||
image="https://erisdump.neocities.org/buttons/88x31_1.gif"
|
|
||||||
target="https://erisdump.neocities.org"
|
|
||||||
/>
|
|
||||||
<FriendLink
|
|
||||||
name="Espi"
|
|
||||||
image="https://espi.me/img/webring/espi.png"
|
|
||||||
target="https://www.espi.me"
|
|
||||||
/>
|
|
||||||
<FriendLink
|
|
||||||
name="Alula"
|
|
||||||
image="https://alula.me/webring/alula.png"
|
|
||||||
target="https://alula.me/"
|
|
||||||
/>
|
|
||||||
<FriendLink
|
|
||||||
name="Sapphic"
|
|
||||||
image="https://sapphic.moe/buttons/friends/sapphic.png"
|
|
||||||
target="https://sapphic.moe/"
|
|
||||||
/>
|
|
||||||
<FriendLink
|
|
||||||
name="Miyuko"
|
|
||||||
image="https://calayucu.com/button-88x31.png"
|
|
||||||
target="https://calayucu.com"
|
|
||||||
/>
|
|
||||||
<FriendLink
|
|
||||||
name="meow_d"
|
|
||||||
image="https://meow-d.github.io/assets/images/buttons/meow_d.webp"
|
|
||||||
target="https://meow-d.github.io/"
|
|
||||||
/>
|
|
||||||
<div class="outline-dashed flex outline-3 mx-1">
|
|
||||||
<FriendLink
|
|
||||||
name="~thermia"
|
|
||||||
image="https://girlthi.ng/~thermia/img/88x31/thermia.gif"
|
|
||||||
target="https://girlthi.ng/~thermia/"
|
|
||||||
/>
|
|
||||||
<FriendLink
|
|
||||||
name="girlthi.ng"
|
|
||||||
image="https://girlthi.ng/~thermia/img/88x31/girlthing.gif"
|
|
||||||
target="https://girlthi.ng/"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<FriendLink
|
|
||||||
name="LeNooby 09"
|
|
||||||
image="https://lenooby09.tech/88x31/88x31.png"
|
|
||||||
target="https://lenooby09.tech"
|
|
||||||
/>
|
|
||||||
<FriendLink
|
|
||||||
name="Ackwell"
|
|
||||||
image="https://ackwell.au/assets/88x31/ackwell-coil.png"
|
|
||||||
target="https://ackwell.au"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<br />
|
|
||||||
<a href="/other buttons">Extra 88x31 buttons!</a>
|
|
||||||
</Partition>
|
|
||||||
<Partition>
|
<Partition>
|
||||||
<h2>My badge:</h2>
|
<h2>My badge:</h2>
|
||||||
<div class="flex w-fit h-fit" style="background-color: #FFFCBC;">
|
<div class="flex w-fit h-fit" style="background-color: #FFFCBC;">
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import Partition from "../components/Partition.astro";
|
||||||
import Greeting from "../components/Greeting";
|
import Greeting from "../components/Greeting";
|
||||||
import Social from "../components/Social.astro";
|
import Social from "../components/Social.astro";
|
||||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||||
|
import FriendLink from "../components/FriendLink.astro";
|
||||||
const pageTitle = "Aria";
|
const pageTitle = "Aria";
|
||||||
|
|
||||||
const currentDate = new Date();
|
const currentDate = new Date();
|
||||||
|
|
@ -19,8 +20,12 @@ const age = seconds/31556952;
|
||||||
<main>
|
<main>
|
||||||
<h1 class="text-4xl">Welcome!~</h1>
|
<h1 class="text-4xl">Welcome!~</h1>
|
||||||
<p>
|
<p>
|
||||||
I'm Aria, a <span class="tooltip">{Math.floor(age)}<span class="tooltiptext"><nobr>{age.toFixed(8)} years to be exact!</nobr></span></span> year old software developer and electronics
|
I'm Aria, a <span class="tooltip"
|
||||||
repair tech out of rural <span style="color: #D4F7CF;"
|
>{Math.floor(age)}<span class="tooltiptext"
|
||||||
|
><nobr>{age.toFixed(8)} years to be exact!</nobr></span
|
||||||
|
></span
|
||||||
|
> year old software developer and electronics repair tech out of
|
||||||
|
rural <span style="color: #D4F7CF;"
|
||||||
>Australia <span
|
>Australia <span
|
||||||
class="backdrop-brightness-200 px-1 text-2xl rounded"
|
class="backdrop-brightness-200 px-1 text-2xl rounded"
|
||||||
>🇦🇺</span
|
>🇦🇺</span
|
||||||
|
|
@ -30,29 +35,153 @@ const age = seconds/31556952;
|
||||||
</main>
|
</main>
|
||||||
</Partition>
|
</Partition>
|
||||||
<Partition>
|
<Partition>
|
||||||
<Greeting client:load messages={["Yo", "Hallo", "Ayo", "Hiya", "You're cute"]} />
|
<Greeting
|
||||||
|
client:load
|
||||||
|
messages={["Yo", "Hallo", "Ayo", "Hiya", "You're cute"]}
|
||||||
|
/>
|
||||||
</Partition>
|
</Partition>
|
||||||
<Partition>
|
<Partition>
|
||||||
<h1>Socials:</h1>
|
<h1>Socials:</h1>
|
||||||
<Social />
|
<Social />
|
||||||
</Partition>
|
</Partition>
|
||||||
|
<Partition>
|
||||||
|
<h1 class="text-2xl">These are cool people!!</h1>
|
||||||
|
<br />
|
||||||
|
<div class="flex outline-dotted p-5 flex-wrap justify-center">
|
||||||
|
<FriendLink
|
||||||
|
name="Alyxia"
|
||||||
|
image="https://alyxia.dev/static/img/88x31/self.png"
|
||||||
|
target="https://alyxia.dev"
|
||||||
|
/>
|
||||||
|
<div class="outline-dashed flex outline-3 mx-1">
|
||||||
|
<FriendLink
|
||||||
|
name="Prefetcher"
|
||||||
|
image="https://nanoshinono.me/prefetcher.gif"
|
||||||
|
target="https://nanoshinono.me/"
|
||||||
|
/>
|
||||||
|
<FriendLink
|
||||||
|
name="Ata"
|
||||||
|
image="https://ata.moe/88x31.png"
|
||||||
|
target="https://ata.moe"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<FriendLink
|
||||||
|
name="Amemoia"
|
||||||
|
image="https://buh.moe/resources/buttons/88x31.gif"
|
||||||
|
target="https://buh.moe/"
|
||||||
|
/>
|
||||||
|
<FriendLink
|
||||||
|
name="Hayden"
|
||||||
|
image="https://hayden.moe/88x31/hayden.png"
|
||||||
|
target="https://hayden.moe/"
|
||||||
|
/>
|
||||||
|
<FriendLink
|
||||||
|
name="Onzecki"
|
||||||
|
image="https://onz.ee/assets/88x31s/png/onzecki.png"
|
||||||
|
target="https://onz.ee/"
|
||||||
|
/>
|
||||||
|
<FriendLink
|
||||||
|
name="NotNite"
|
||||||
|
image="https://notnite.com/buttons/notnite.png"
|
||||||
|
target="https://notnite.com/"
|
||||||
|
/>
|
||||||
|
<FriendLink
|
||||||
|
name="0x5066"
|
||||||
|
image="https://erisdump.neocities.org/buttons/88x31_1.gif"
|
||||||
|
target="https://erisdump.neocities.org"
|
||||||
|
/>
|
||||||
|
<FriendLink
|
||||||
|
name="Espi"
|
||||||
|
image="https://espi.me/img/webring/espi.png"
|
||||||
|
target="https://www.espi.me"
|
||||||
|
/>
|
||||||
|
<FriendLink
|
||||||
|
name="Alula"
|
||||||
|
image="https://alula.me/webring/alula.png"
|
||||||
|
target="https://alula.me/"
|
||||||
|
/>
|
||||||
|
<FriendLink
|
||||||
|
name="Sapphic"
|
||||||
|
image="https://sapphic.moe/buttons/friends/sapphic.png"
|
||||||
|
target="https://sapphic.moe/"
|
||||||
|
/>
|
||||||
|
<FriendLink
|
||||||
|
name="Miyuko"
|
||||||
|
image="https://calayucu.com/button-88x31.png"
|
||||||
|
target="https://calayucu.com"
|
||||||
|
/>
|
||||||
|
<FriendLink
|
||||||
|
name="meow_d"
|
||||||
|
image="https://meow-d.github.io/assets/images/buttons/meow_d.webp"
|
||||||
|
target="https://meow-d.github.io/"
|
||||||
|
/>
|
||||||
|
<div class="outline-dashed flex outline-3 mx-1">
|
||||||
|
<FriendLink
|
||||||
|
name="~thermia"
|
||||||
|
image="https://girlthi.ng/~thermia/img/88x31/thermia.gif"
|
||||||
|
target="https://girlthi.ng/~thermia/"
|
||||||
|
/>
|
||||||
|
<FriendLink
|
||||||
|
name="girlthi.ng"
|
||||||
|
image="https://girlthi.ng/~thermia/img/88x31/girlthing.gif"
|
||||||
|
target="https://girlthi.ng/"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<FriendLink
|
||||||
|
name="LeNooby 09"
|
||||||
|
image="https://lenooby09.tech/88x31/88x31.png"
|
||||||
|
target="https://lenooby09.tech"
|
||||||
|
/>
|
||||||
|
<FriendLink
|
||||||
|
name="Ackwell"
|
||||||
|
image="https://ackwell.au/assets/88x31/ackwell-coil.png"
|
||||||
|
target="https://ackwell.au"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<a href="/other buttons">Extra 88x31 buttons!</a>
|
||||||
|
</Partition>
|
||||||
|
<Partition>
|
||||||
|
<h2>My badge:</h2>
|
||||||
|
<div class="flex w-fit h-fit" style="background-color: #FFFCBC;">
|
||||||
|
<a href="https://aria.coffee/" target="_blank">
|
||||||
|
<img
|
||||||
|
alt="Aria"
|
||||||
|
src="https://aria.coffee/static/img/buttons/aria.gif"
|
||||||
|
style="min-width: 88px; width: 176px; min-height: 31px; height: 62px; image-rendering: pixelated;"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<p>Code:</p>
|
||||||
|
<label>
|
||||||
|
<textarea
|
||||||
|
onclick="this.select()"
|
||||||
|
readonly
|
||||||
|
cols="60"
|
||||||
|
rows="2"
|
||||||
|
class="rounded backdrop-brightness-0"
|
||||||
|
style="background-color: black;"
|
||||||
|
><img src="https://aria.coffee/static/img/buttons/aria.gif"
|
||||||
|
alt="Aria" style="image-rendering: pixelated;" /></textarea
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
</Partition>
|
||||||
<script>
|
<script>
|
||||||
setInterval(() => {
|
setInterval(() => {
|
||||||
const currentDate = new Date();
|
const currentDate = new Date();
|
||||||
const ariaBirthDate = new Date("2002-05-07");
|
const ariaBirthDate = new Date("2002-05-07");
|
||||||
|
|
||||||
const seconds = (currentDate.getTime() - ariaBirthDate.getTime()) / 1000;
|
const seconds =
|
||||||
|
(currentDate.getTime() - ariaBirthDate.getTime()) / 1000;
|
||||||
|
|
||||||
const age = seconds / 31556952;
|
const age = seconds / 31556952;
|
||||||
|
|
||||||
const ageElem = document.querySelector('.tooltip');
|
const ageElem = document.querySelector(".tooltip");
|
||||||
|
|
||||||
ageElem!.outerHTML = `<span class="tooltip">${Math.floor(age)}<span class="tooltiptext"><nobr>${age.toFixed(8)} years to be exact!</nobr></span></span>`;
|
ageElem!.outerHTML = `<span class="tooltip">${Math.floor(age)}<span class="tooltiptext"><nobr>${age.toFixed(8)} years to be exact!</nobr></span></span>`;
|
||||||
}, 1000);
|
}, 1000);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style is:inline>
|
<style is:inline></style>
|
||||||
|
|
||||||
</style>
|
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue