Finally finish this enough to post
From here I will actually track changed with git but I just needed a base to work from. RIP this attomic ass commit
This commit is contained in:
parent
079e48c94e
commit
4bdb2ca436
GPG key ID:
19AB7AA462B8AB3B
48 changed files with 4693 additions and 657 deletions
53
src/blog/post-1.md
Normal file
53
src/blog/post-1.md
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
---
|
||||
title: 'The beginning (Again)'
|
||||
pubDate: 2024-12-17T00:49:00.000+11
|
||||
description: 'This is the first post of my new website.'
|
||||
author: 'Aria'
|
||||
tags: ["blogging", "learning in public", "development"]
|
||||
---
|
||||
|
||||
I'll be expanding this as I work on it but for now this is my first more indepth website
|
||||
|
||||
## The What
|
||||
|
||||
Well that's simple to explain; It's a website and you're browing it now lol.
|
||||
|
||||
## The Why
|
||||
|
||||
Recently I joined a community for some very **🏳️⚧️**(mostly, there are many people of different identities there!) and it's full of many very techinical people. It's a cosy little community and I feel genuinely welcome there.
|
||||
|
||||
We where discussing domain names and this one wasn't owned! I'm addicted to coffee so it seemed like the perfect fit for me~
|
||||
|
||||
|
||||
|
||||
After purchasing I needed to decide what I wanted to do with it, for a little over a day (Until not long before I started to write this) it just redirected to my [BlueSky](https://bsky.app/profile/did:plc:bzrn33tcfgjxnsanvg6py3xn) account.
|
||||
|
||||
I eventually got inspired by both [Alyxia](https://alyxia.dev/) and [Annie's](https://buh.moe/) websites. Finally convinced to make something from scratch I made the website you're looking at now!
|
||||
|
||||
This has been my first time working mostly from scratch to make my personal website, more on that described bellow!
|
||||
|
||||
## The How
|
||||
|
||||
This website was made using [Astro](https://astro.build/) for the build system and I decided to use [Tailwind](https://tailwindcss.com/) instead of basing my own css off Annie's after she convinced me.
|
||||
|
||||
|
||||
|
||||
While I got started early on following the basic [blog tutorial](https://docs.astro.build/en/tutorial/0-introduction/) but took a break to make my very first 88x31px button!
|
||||
|
||||
|
||||
<sub>This is a version of the image hosted on archive.org so the blog doesn't change</sub>
|
||||
|
||||
I made it pretty quickly in Krita using the lovely picute of me which was drawn by Auryn!
|
||||
|
||||
88x31 buttons have a history that I wont get into here, you can read more [here](https://tekeye.uk/computer_history/powered-by) and if you'd like to see thhe buttons of my friends then go to the [friends page](/friends)
|
||||
<sub>If you wanna exchange buttons shoot me a message on <a href="https://discord.com/users/383507911160233985" target="_blank">discord!</a></sub>
|
||||
|
||||
## Final thoughts
|
||||
|
||||
I am very greatful for these goobers who have inspured, ecouraged and debugged with me on this website, there is still a lot for me to learn about web development and more to discover about myself honestly.
|
||||
|
||||
I plan to make this website an outlet for a lot of my learning ~~along with my already mentioned BlueSky~~ and I hope you'll stick around.
|
||||
|
||||
### What's next?
|
||||
|
||||
Not sure, I kinda wanna figure out how to add emotes like discord into these blogs because I'm an internet degenerate who feels the ned to put emoted in every message I send, after that I might try to style the website a bit more but I think it's in an *alright* place for now lol
|
||||
4
src/components/BlogEntry.astro
Normal file
4
src/components/BlogEntry.astro
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
const { url, title, date } = Astro.props;
|
||||
---
|
||||
<li>- <a href={url}>{title}</a><sub> - {date}</sub></li>
|
||||
12
src/components/EmbedCode.astro
Normal file
12
src/components/EmbedCode.astro
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
const description = "Just my little website do be gay and do crime on~";
|
||||
const embedImage = "https://aria.coffee/static/img/sites/avatar.png";
|
||||
const embedColour = "#380A84"
|
||||
|
||||
const { pageTitle } = Astro.props;
|
||||
---
|
||||
<meta content={pageTitle} property="og:title" />
|
||||
<meta content={description} property="og:description" />
|
||||
<meta content={Astro.site} property="og:url" />
|
||||
<meta content={embedImage} property="og:image" />
|
||||
<meta content={embedColour} data-react-helmet="true" name="theme-color" />
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
<meta charset="utf-8" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
|
|
|
|||
|
|
@ -1,18 +1,32 @@
|
|||
---
|
||||
const buttonFormat = "gif";
|
||||
|
||||
import Social from './Social.astro';
|
||||
import { library, icon } from "@fortawesome/fontawesome-svg-core";
|
||||
import { faCodeBranch, faRss } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
library.add(faCodeBranch, faRss);
|
||||
|
||||
const sourceCodeIcon = icon({ prefix: "fas", iconName: faCodeBranch.iconName });
|
||||
const rssIcon = icon({ prefix: "fas", iconName: faRss.iconName });
|
||||
---
|
||||
|
||||
<style>
|
||||
footer {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
<hr class="h-1" style="" />
|
||||
<footer class="flexcol">
|
||||
<div class="flexrow">
|
||||
<p>
|
||||
<a href="https://github.com/BuyMyMojo/aria.coffee" target="_blank"
|
||||
><Fragment set:html={sourceCodeIcon.html} /> Source Code</a> | <a href="https://aria.coffee/rss.xml" target="_blank"
|
||||
><Fragment set:html={rssIcon.html} /> RSS Feed</a>
|
||||
</p>
|
||||
</div>
|
||||
<img class="badge" src={`/static/img/buttons/aria.${buttonFormat}`} decoding="async" alt="88x31 pixel button with the text 'Aria' and the top half of a human human face on the right hand side" />
|
||||
</footer>
|
||||
<style is:global>
|
||||
/* Declare a custom CSS class to make the icon look right */
|
||||
.svg-inline--fa {
|
||||
overflow: visible;
|
||||
box-sizing: content-box;
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<footer>
|
||||
<img class="badge" src={`/static/img/buttons/aria.${buttonFormat}`} decoding="async" />
|
||||
<Social />
|
||||
</footer>
|
||||
</style>
|
||||
17
src/components/Greeting.jsx
Normal file
17
src/components/Greeting.jsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { useState } from 'preact/hooks';
|
||||
|
||||
export default function Greeting({messages}) {
|
||||
|
||||
const randomMessage = () => messages[(Math.floor(Math.random() * messages.length))];
|
||||
|
||||
const [greeting, setGreeting] = useState(messages[0]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3>{greeting}! Thank you for visiting!</h3>
|
||||
<button class="greetButton px-2 rounded-xl" onClick={() => setGreeting(randomMessage())}>
|
||||
New Greeting
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
29
src/components/NavHeader.astro
Normal file
29
src/components/NavHeader.astro
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
import { Image } from "astro:assets";
|
||||
import pfp from "../img/sites/avatar.png";
|
||||
import Partition from "./Partition.astro";
|
||||
---
|
||||
|
||||
<div
|
||||
class="rounded-2xl flex flex-col shadow-xl shadow-black py-8 mb-8 items-center backdrop-blur-3xl bg-center bg-[url('/static/img/sites/avatar-ht-f.webp')]"
|
||||
style="width: 670px; border: 1px solid var(--border);"
|
||||
>
|
||||
<Image
|
||||
src={pfp}
|
||||
class="size-40 rounded-full shadow shadow-black m-4"
|
||||
alt="Arias's profile picture"
|
||||
/>
|
||||
<div
|
||||
class="flex-row p-3 gap-4 text-center text-3xl"
|
||||
>
|
||||
<h2 class="backdrop-brightness-50 backdrop-blur rounded-lg px-2 pb-1 pt-2 mb-1">Aria (Aka: Mojo)</h2>
|
||||
<h3 class="backdrop-brightness-50 backdrop-blur rounded-lg px-2 pb-1 pt-2">🏳️🌈 🏳️⚧️ • she/her</h3>
|
||||
</div>
|
||||
</div>
|
||||
<Partition>
|
||||
<a href="/" class="nav-btn">Home</a> |
|
||||
<a href="/blog" class="nav-btn">Blog</a> |
|
||||
<a href="/about" class="nav-btn">About</a> |
|
||||
<a href="/tags" class="nav-btn">Tags</a> |
|
||||
<a href="/friends" class="nav-btn">Friends</a>
|
||||
</Partition>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<div class="nav-links">
|
||||
<a href="/">Home</a>
|
||||
<a href="/about">About</a>
|
||||
<a href="/blog">Blog</a>
|
||||
<a href="/friends">Friends</a>
|
||||
</div>
|
||||
10
src/components/Partition.astro
Normal file
10
src/components/Partition.astro
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
|
||||
---
|
||||
|
||||
<div
|
||||
class="rounded-xl flex-row p-4 mb-4 shadow"
|
||||
style="width: 670px; border: 1px solid var(--border); background-color: var(--third-colour);"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -1,12 +1,68 @@
|
|||
<a href="https://bsky.app/profile/did:plc:bzrn33tcfgjxnsanvg6py3xn">Bluesky</a>
|
||||
<a href="https://buymymojo.net/twitter/">Twitter(Archive)</a>
|
||||
---
|
||||
const twitterArchive = "https://buymymojo.net/twitter/";
|
||||
const discord = "https://discord.com/users/383507911160233985";
|
||||
const github = "https://github.com/BuyMyMojo";
|
||||
const steam = "https://steamcommunity.com/profiles/76561198227003516";
|
||||
const bsky = "https://bsky.app/profile/did:plc:bzrn33tcfgjxnsanvg6py3xn";
|
||||
const bskyArchive = "https://buymymojo.net/bsky/";
|
||||
---
|
||||
|
||||
<style>
|
||||
a {
|
||||
padding: 0.5rem 1rem;
|
||||
color: white;
|
||||
background-color: #4c1d95;
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
<h1>Places to find and/or contact me:</h1>
|
||||
<ul class="list-disc p-4">
|
||||
<li>
|
||||
<a href={bsky} class="p-1" target="_blank"
|
||||
><i class="fa-brands fa-bluesky"></i> Bluesky</a
|
||||
> - <button id="bskypid"
|
||||
>@femgo.buymymojo.net (Click to copy DID)</button
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href={discord} target="_blank"
|
||||
><i class="fa-brands fa-discord"></i> Discord</a
|
||||
> - @buymymojo
|
||||
</li>
|
||||
<li>
|
||||
<a href={github} target="_blank"
|
||||
><i class="fa-brands fa-github"></i> GitHub</a
|
||||
> - @BuyMyMojo
|
||||
</li>
|
||||
<li>
|
||||
<a href={steam} target="_blank"
|
||||
><i class="fa-brands fa-steam"></i> Steam</a
|
||||
> - @BuyMyMojo
|
||||
</li>
|
||||
</ul>
|
||||
<br />
|
||||
<h2>Archives:</h2>
|
||||
<ul class="list-disc p-4">
|
||||
<li>
|
||||
<a href={bskyArchive} class="p-1" target="_blank"
|
||||
><i class="fa-brands fa-bluesky"></i> Bluesky(Archive)</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href={twitterArchive} class="p-1" target="_blank"
|
||||
><i class="fa-brands fa-twitter"></i> Twitter(Archive)</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<style is:global>
|
||||
/* Declare a custom CSS class to make the icon look right */
|
||||
.svg-inline--fa {
|
||||
overflow: visible;
|
||||
box-sizing: content-box;
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
<script>
|
||||
const bskypid = document.querySelector("#bskypid");
|
||||
|
||||
if (bskypid != null) {
|
||||
bskypid.addEventListener("click", () => {
|
||||
navigator.clipboard.writeText("did:plc:bzrn33tcfgjxnsanvg6py3xn");
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
17
src/content.config.ts
Normal file
17
src/content.config.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
// Import the glob loader
|
||||
import { glob } from "astro/loaders";
|
||||
// Import utilities from `astro:content`
|
||||
import { z, defineCollection } from "astro:content";
|
||||
// Define a `loader` and `schema` for each collection
|
||||
const blog = defineCollection({
|
||||
loader: glob({ pattern: '**/[^_]*.md', base: "./src/blog" }),
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
pubDate: z.date(),
|
||||
description: z.string(),
|
||||
author: z.string(),
|
||||
tags: z.array(z.string())
|
||||
})
|
||||
});
|
||||
// Export a single `collections` object to register your collection(s)
|
||||
export const collections = { blog };
|
||||
BIN
src/img/sites/avatar.png
Normal file
BIN
src/img/sites/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
|
|
@ -1,25 +1,34 @@
|
|||
---
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Favicon from '../components/Favicon.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import '../styles/aria.css';
|
||||
import NavHeader from "../components/NavHeader.astro"
|
||||
import Favicon from "../components/Favicon.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import "../styles/aria.css";
|
||||
import EmbedCode from "../components/EmbedCode.astro";
|
||||
|
||||
const { pageTitle } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<Favicon />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} >
|
||||
<title>{pageTitle}</title>
|
||||
</head>
|
||||
<body>
|
||||
<Navigation />
|
||||
<head>
|
||||
<Favicon />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{pageTitle}</title>
|
||||
<EmbedCode pageTitle={pageTitle} />
|
||||
|
||||
<h1>{pageTitle}</h1>
|
||||
<slot />
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
<link
|
||||
rel="alternate"
|
||||
type="application/rss+xml"
|
||||
title="amemoia's blog"
|
||||
href={new URL("rss.xml", Astro.site)}
|
||||
/>
|
||||
|
||||
<script is:inline defer src="https://kit.fontawesome.com/5fee770033.js" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
<NavHeader />
|
||||
<slot />
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
71
src/layouts/MarkdownPostLayout.astro
Normal file
71
src/layouts/MarkdownPostLayout.astro
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
---
|
||||
import Partition from "../components/Partition.astro";
|
||||
import BaseLayout from "./BaseLayout.astro";
|
||||
const { frontmatter } = Astro.props;
|
||||
---
|
||||
|
||||
<BaseLayout pageTitle={frontmatter.title}>
|
||||
<Partition>
|
||||
<p>
|
||||
<h1 class="text-xl font-bold underline">{frontmatter.title}</h1>
|
||||
<em>{frontmatter.description}</em><br />
|
||||
<sub>Date: {frontmatter.pubDate.toLocaleDateString()}</sub>
|
||||
</p>
|
||||
</Partition>
|
||||
<Partition>
|
||||
<main>
|
||||
<div
|
||||
class="prose dark:prose-invert
|
||||
prose-h1:font-bold prose-h1:text-xl
|
||||
prose-a:text-[#ff98f6] prose-p:text-justify prose-img:rounded-xl
|
||||
prose-headings:underline"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
</Partition>
|
||||
|
||||
<Partition>
|
||||
<h3>tags:</h3>
|
||||
<div class="tags">
|
||||
{
|
||||
frontmatter.tags.map((tag: string) => (
|
||||
<a href={`/tags/${tag}`}>
|
||||
<p class="tag">{tag}</p>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</Partition>
|
||||
|
||||
<footer>
|
||||
<sub>Written by: {frontmatter.author}</sub>
|
||||
</footer>
|
||||
</BaseLayout>
|
||||
<style>
|
||||
a {
|
||||
color: #b800a8;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin: 0.25em;
|
||||
border: dotted 1px #a1a1a1;
|
||||
border-radius: 0.5em;
|
||||
padding: 0.5em 1em;
|
||||
font-size: 1.15em;
|
||||
background-color: #f8fcfd;
|
||||
}
|
||||
|
||||
.tag:hover {
|
||||
background-color: #f8fcfd83;
|
||||
}
|
||||
|
||||
.tag:active {
|
||||
background-color: #d4f6ff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Favicon from '../components/Favicon.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import '../styles/aria.css';
|
||||
import FriendLink from "../components/FriendLink.astro";
|
||||
import Partition from "../components/Partition.astro";
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
import "../styles/aria.css";
|
||||
|
||||
const pageTitle = "About Aria";
|
||||
|
||||
|
|
@ -16,6 +16,7 @@ const identity = {
|
|||
const skills = ["Rust", "GDScript", "FFMPEG"];
|
||||
|
||||
const currentSystem = {
|
||||
name: "I/O",
|
||||
operatingSystem: "EndeavourOS",
|
||||
host: "X570 Phantom Gaming 4",
|
||||
shell: "zsh",
|
||||
|
|
@ -24,39 +25,18 @@ const currentSystem = {
|
|||
cpu: "AMD Ryzen 9 5900X",
|
||||
gpu: "AMD Radeon RX 7800 XT",
|
||||
ram: "48GB",
|
||||
localIP: "Local IP (enp4s0): 192.168.20.2/24",
|
||||
localIP: "192.168.20.2",
|
||||
};
|
||||
|
||||
const skillColor = "green";
|
||||
const skillColor = "#F5A8B7";
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<Favicon />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{pageTitle}</title>
|
||||
<style define:vars={{skillColor}}>
|
||||
h1 {
|
||||
color: purple;
|
||||
font-size: 4rem;
|
||||
}
|
||||
.skill {
|
||||
color: var(--skillColor);
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Navigation />
|
||||
|
||||
<h1>{pageTitle}</h1>
|
||||
|
||||
<BaseLayout pageTitle={pageTitle}>
|
||||
<Partition>
|
||||
<p>It's about time I actually write up my own website right?</p>
|
||||
|
||||
<p>Here are a few facts about me:</p>
|
||||
<ul>
|
||||
<br />
|
||||
<p class="text-2xl">Here are a few facts about me:</p>
|
||||
<ul class="list-disc p-4">
|
||||
<li>My name is {identity.firstName}.</li>
|
||||
<li>
|
||||
I live in {identity.country} and I work as a {
|
||||
|
|
@ -72,25 +52,71 @@ const skillColor = "green";
|
|||
)
|
||||
}
|
||||
</ul>
|
||||
<p>Some of my skills are:</p>
|
||||
<ul>
|
||||
</Partition>
|
||||
<Partition>
|
||||
<p class="text-2xl">Some of my skilled areas are:</p>
|
||||
<ul class="list-disc p-4">
|
||||
{skills.map((skill) => <li class="skill">{skill}</li>)}
|
||||
</ul>
|
||||
|
||||
<p>My system:</p>
|
||||
<ul>
|
||||
<li>OS: {currentSystem.operatingSystem}</li>
|
||||
<li>Host: {currentSystem.host}</li>
|
||||
<li>Shell: {currentSystem.shell}</li>
|
||||
</Partition>
|
||||
<Partition>
|
||||
<p class="text-2xl">My PC:</p>
|
||||
<ul class="list-disc p-4">
|
||||
<li>
|
||||
Main Display: <a href={currentSystem.mainDisplayRtings}
|
||||
>{currentSystem.mainDisplay}</a>
|
||||
<span class="skill">Computer's Name:</span>
|
||||
{currentSystem.name}
|
||||
</li>
|
||||
<li>
|
||||
<span class="skill">OS:</span>
|
||||
{currentSystem.operatingSystem}
|
||||
</li>
|
||||
<li><span class="skill">Host:</span> {currentSystem.host}</li>
|
||||
<li><span class="skill">Shell:</span> {currentSystem.shell}</li>
|
||||
<li>
|
||||
<span class="skill">Main Display:</span>
|
||||
<a href={currentSystem.mainDisplayRtings}
|
||||
>{currentSystem.mainDisplay}</a
|
||||
>
|
||||
</li>
|
||||
<li><span class="skill">CPU:</span> {currentSystem.cpu}</li>
|
||||
<li><span class="skill">GPU:</span> {currentSystem.gpu}</li>
|
||||
<li><span class="skill">RAM:</span> {currentSystem.ram}</li>
|
||||
<li>
|
||||
<span class="skill">Local IP:</span>
|
||||
{currentSystem.localIP}
|
||||
</li>
|
||||
<li>CPU: {currentSystem.cpu}</li>
|
||||
<li>GPU: {currentSystem.gpu}</li>
|
||||
<li>RAM: {currentSystem.ram}</li>
|
||||
<li>{currentSystem.localIP}</li>
|
||||
</ul>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
</Partition>
|
||||
|
||||
<Partition>
|
||||
<h1 class="text-xl">Credits:</h1><br />
|
||||
<ul class="list-disc p-4">
|
||||
<li>
|
||||
<p>
|
||||
Profile Picture (Which also appears in the site's button) is
|
||||
done by: <span class="font-extrabold text-xl">Auryn</span
|
||||
><sub>[No link yet]</sub>
|
||||
</p>
|
||||
</li>
|
||||
<li><p>
|
||||
Website inspiration: <FriendLink
|
||||
name="Alyxia"
|
||||
image="https://alyxia.dev/static/img/88x31/self.png"
|
||||
target="https://alyxia.dev"
|
||||
/> & <div class="outline-dotted w-fit"><FriendLink
|
||||
name="Amemoia"
|
||||
image="https://buh.moe/resources/buttons/88x31.gif"
|
||||
target="https://buh.moe/"
|
||||
/><sub>[Annie]</sub></div>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</Partition>
|
||||
</BaseLayout>
|
||||
|
||||
<style define:vars={{ skillColor }}>
|
||||
.skill {
|
||||
color: var(--skillColor);
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,27 @@
|
|||
---
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Favicon from '../components/Favicon.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import '../styles/aria.css';
|
||||
import { getCollection } from "astro:content";
|
||||
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
import BlogEntry from "../components/BlogEntry.astro";
|
||||
import Partition from "../components/Partition.astro";
|
||||
const allPosts = await getCollection("blog");
|
||||
|
||||
const pageTitle = "Aria's blog";
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<Favicon />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} >
|
||||
<title>{pageTitle}</title>
|
||||
</head>
|
||||
<body>
|
||||
<Navigation />
|
||||
|
||||
<h1>{pageTitle}</h1>
|
||||
|
||||
<BaseLayout pageTitle={pageTitle}>
|
||||
<Partition>
|
||||
<h1 class="text-2xl">All blog posts:</h1>
|
||||
<ul>
|
||||
<li><a href="/posts/post-1/">Post 1</a></li>
|
||||
{
|
||||
allPosts.map((post: any) => (
|
||||
<BlogEntry
|
||||
url={`/posts/${post.id}/`}
|
||||
title={post.data.title}
|
||||
date={post.data.pubDate.toLocaleDateString()}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
</Partition>
|
||||
</BaseLayout>
|
||||
|
|
|
|||
|
|
@ -1,33 +1,79 @@
|
|||
---
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Favicon from '../components/Favicon.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import FriendLink from '../components/FriendLink.astro';
|
||||
import '../styles/aria.css';
|
||||
import FriendLink from "../components/FriendLink.astro";
|
||||
import "../styles/aria.css";
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
import Partition from "../components/Partition.astro";
|
||||
|
||||
const pageTitle = "Aria's friends";
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<Favicon />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} >
|
||||
<title>{pageTitle}</title>
|
||||
</head>
|
||||
<body>
|
||||
<Navigation />
|
||||
|
||||
<h1>{pageTitle}</h1>
|
||||
|
||||
<FriendLink name="Alyxia" image="https://alyxia.dev/static/img/88x31/self.png" target="https://alyxia.dev" />
|
||||
<div class="linked-buttons">
|
||||
<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" />
|
||||
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
<BaseLayout pageTitle={pageTitle}>
|
||||
<Partition>
|
||||
<h1 class="text-2xl">These are cool people!!</h1>
|
||||
<br />
|
||||
<div class="flex outline-dotted p-2 flex-wrap">
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
</Partition>
|
||||
<Partition>
|
||||
<h2>My badge:</h2>
|
||||
<div class="flex w-fit h-fit" style="background-color: #FFFCBC;">
|
||||
<FriendLink
|
||||
name="Aria"
|
||||
image="https://aria.coffee/static/img/buttons/aria.gif"
|
||||
target="https://aria.coffee"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<p>Code:</p>
|
||||
<pre><code class="rounded backdrop-brightness-0 language-html" style="background-color: white;"><img src="https://aria.coffee/static/img/buttons/aria.gif" alt="Aria" style="image-rendering: pixelated;" /></code></pre>
|
||||
<link
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"
|
||||
></script>
|
||||
</Partition>
|
||||
</BaseLayout>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,32 @@
|
|||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Partition from "../components/Partition.astro";
|
||||
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
import Greeting from "../components/Greeting";
|
||||
import Social from "../components/Social.astro";
|
||||
const pageTitle = "Aria";
|
||||
---
|
||||
|
||||
<BaseLayout pageTitle={pageTitle}>
|
||||
<h2>You're all super cute!~</h2>
|
||||
<h3>:3c</h3>
|
||||
</BaseLayout>
|
||||
<Partition>
|
||||
<main>
|
||||
<h1 class="text-4xl">Welcome!~</h1>
|
||||
<p>
|
||||
I'm Aria, a 22 year old software developer and electronics
|
||||
repair tech out of rural <span style="color: #D4F7CF;"
|
||||
>Australia <span
|
||||
class="backdrop-brightness-200 px-1 text-2xl rounded"
|
||||
>🇦🇺</span
|
||||
></span
|
||||
>
|
||||
</p>
|
||||
</main>
|
||||
</Partition>
|
||||
<Partition>
|
||||
<Greeting client:load messages={["Yo", "Hallo", "Ayo", "Hiya", "You're cute"]} />
|
||||
</Partition>
|
||||
<Partition>
|
||||
<h1>Socials:</h1>
|
||||
<Social />
|
||||
</Partition>
|
||||
</BaseLayout>
|
||||
|
|
|
|||
17
src/pages/posts/[...slug].astro
Normal file
17
src/pages/posts/[...slug].astro
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
import { getCollection, render } from 'astro:content';
|
||||
import MarkdownPostLayout from '../../layouts/MarkdownPostLayout.astro';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('blog');
|
||||
return posts.map(post => ({
|
||||
params: { slug: post.id }, props: { post },
|
||||
}));
|
||||
}
|
||||
|
||||
const { post } = Astro.props;
|
||||
const { Content } = await render(post);
|
||||
---
|
||||
<MarkdownPostLayout frontmatter={post.data}>
|
||||
<Content />
|
||||
</MarkdownPostLayout>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
---
|
||||
title: 'Getting started here'
|
||||
pubDate: 2024-12-16
|
||||
description: 'This is the first post of my new website.'
|
||||
author: 'Aria'
|
||||
tags: ["blogging", "learning in public"]
|
||||
---
|
||||
# Getting started here
|
||||
|
||||
Published on: 2024-12-16
|
||||
|
||||
I'll be expanding this as I work on it but for now this is my first more indepth website
|
||||
18
src/pages/rss.xml.js
Normal file
18
src/pages/rss.xml.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import rss from '@astrojs/rss';
|
||||
import { getCollection } from "astro:content";
|
||||
|
||||
export async function GET(context) {
|
||||
const posts = await getCollection("blog");
|
||||
return rss({
|
||||
title: "Aria | Blog",
|
||||
description: "Just me being a silly little thing",
|
||||
site: context.site,
|
||||
items: posts.map((post) => ({
|
||||
title: post.data.title,
|
||||
pubDate: post.data.pubDate,
|
||||
description: post.data.description,
|
||||
link: `/posts/${post.id}/`,
|
||||
})),
|
||||
customData: `<language>en-us</language>`,
|
||||
});
|
||||
}
|
||||
45
src/pages/tags/[tag].astro
Normal file
45
src/pages/tags/[tag].astro
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
---
|
||||
import { getCollection } from "astro:content";
|
||||
|
||||
import BaseLayout from "../../layouts/BaseLayout.astro";
|
||||
import BlogEntry from "../../components/BlogEntry.astro";
|
||||
import Partition from "../../components/Partition.astro";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const allPosts = await getCollection("blog");
|
||||
|
||||
const uniqueTags = [
|
||||
...new Set(allPosts.map((post: any) => post.data.tags).flat()),
|
||||
];
|
||||
|
||||
return uniqueTags.map((tag) => {
|
||||
const filteredPosts = allPosts.filter((post: any) =>
|
||||
post.data.tags.includes(tag)
|
||||
);
|
||||
return {
|
||||
params: { tag },
|
||||
props: { posts: filteredPosts },
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const { tag } = Astro.params;
|
||||
const { posts } = Astro.props;
|
||||
---
|
||||
|
||||
<BaseLayout pageTitle={tag}>
|
||||
<Partition>
|
||||
<p>Posts tagged with {tag}:</p>
|
||||
<ul>
|
||||
{
|
||||
posts.map((post: any) => (
|
||||
<BlogEntry
|
||||
url={`/posts/${post.id}/`}
|
||||
title={post.data.title}
|
||||
date={post.data.pubDate.toLocaleDateString()}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</Partition>
|
||||
</BaseLayout>
|
||||
28
src/pages/tags/index.astro
Normal file
28
src/pages/tags/index.astro
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
import { getCollection } from "astro:content";
|
||||
|
||||
import BaseLayout from "../../layouts/BaseLayout.astro";
|
||||
import Partition from "../../components/Partition.astro";
|
||||
const allPosts = await getCollection("blog");
|
||||
const tags = [
|
||||
...new Set(allPosts.map((post: any) => post.data.tags).flat()),
|
||||
];
|
||||
const pageTitle = "Tag Index";
|
||||
---
|
||||
|
||||
<BaseLayout pageTitle={pageTitle}>
|
||||
<Partition>
|
||||
<h1 class="text-xl">Blog tags:</h1>
|
||||
<div class="tags">
|
||||
<main>
|
||||
{
|
||||
tags.map((tag) => (
|
||||
<a href={`/tags/${tag}`}>
|
||||
<p class="tag">- {tag}</p>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</main>
|
||||
</div>
|
||||
</Partition>
|
||||
</BaseLayout>
|
||||
|
|
@ -1,25 +1,93 @@
|
|||
@font-face {
|
||||
font-family: "Noto Sans";
|
||||
src:
|
||||
local("Noto Sans"),
|
||||
url("/static/fonts/NotoSans-Regular.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Comic Shanns";
|
||||
src:
|
||||
local("Comic Shanns Regular"),
|
||||
url("/static/fonts/comic shanns.otf") format("opentype"),
|
||||
url("/static/fonts/comic shanns 2.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Comic Mono";
|
||||
src:
|
||||
local("Comic Mono"),
|
||||
url("/static/fonts/ComicMono.ttf") format("ttf"),
|
||||
url("https://dtinth.github.io/comic-mono-font/ComicMono.ttf") format("truetype")
|
||||
}
|
||||
|
||||
:root {
|
||||
--first-colour: #16111a;
|
||||
--second-colour: #21042c;
|
||||
--third-colour: #2E236C;
|
||||
--fourth-colour: #F5EFFF;
|
||||
|
||||
--border: #27272a;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #bbbec2;
|
||||
font-family: sans-serif;
|
||||
background-color: var(--first-colour);
|
||||
font-family: "Comic Mono", "Comic Shanns", "Comic Sans", "Comic Sans MS", "Chalkboard", "ChalkboardSE-Regular", "Noto Sans", sans-serif;
|
||||
font-size: larger;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
max-width: 80ch;
|
||||
padding: 1rem;
|
||||
line-height: 1.5;
|
||||
/* margin: 0 auto; */
|
||||
/* width: 100%; */
|
||||
/* max-width: 40em; */
|
||||
padding: 2em;
|
||||
/* padding: 1rem; */
|
||||
/* line-height: 1.5; */
|
||||
color: var(--fourth-colour);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
@media screen and (max-width: 899px) {
|
||||
body {
|
||||
width: 95%;
|
||||
padding-top: 0.5em;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 1rem 0;
|
||||
font-size: 2.5rem;
|
||||
|
||||
a {
|
||||
color: var(--fourth-colour);
|
||||
text-decoration: underline 2px;
|
||||
text-underline-offset: 2px;
|
||||
text-decoration-color: #00000000;
|
||||
}
|
||||
|
||||
|
||||
a:hover {
|
||||
text-decoration-color: #fff;
|
||||
transition: text-decoration-color 0.25s;
|
||||
}
|
||||
|
||||
/* h1 { */
|
||||
/* margin: 1rem 0; */
|
||||
/* font-size: 2.5rem; */
|
||||
/* } */
|
||||
|
||||
/* footer { */
|
||||
/* display: flex; */
|
||||
/* gap: 1rem; */
|
||||
/* margin-top: 2rem; */
|
||||
/* background-color: var(--third-colour); */
|
||||
/* border-radius: 4px; */
|
||||
/* padding: 0.5rem; */
|
||||
/* } */
|
||||
|
||||
.badge {
|
||||
image-rendering: pixelated;
|
||||
min-width: 88px;
|
||||
|
|
@ -29,51 +97,28 @@ h1 {
|
|||
|
||||
.linked-buttons {
|
||||
outline-style: dashed;
|
||||
display:inline-block
|
||||
width:fit-content;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
/* nav styles */
|
||||
.container {
|
||||
background-color: var(--second-colour);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
/* flex: content; */
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
width: 100%;
|
||||
top: 5rem;
|
||||
left: 48px;
|
||||
background-color: #ff9776;
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
text-decoration: none;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nav-links a:hover,
|
||||
.nav-links a:focus {
|
||||
background-color: #ff9776;
|
||||
}
|
||||
|
||||
.expanded {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 636px) {
|
||||
.nav-links {
|
||||
margin-left: 5em;
|
||||
display: block;
|
||||
position: static;
|
||||
width: auto;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
display: inline-block;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
}
|
||||
.greetButton {
|
||||
color: var(--fourth-colour);
|
||||
background-color: var(--second-colour);
|
||||
border-color: var(--second-colour);
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
|
||||
.greetButton:hover {
|
||||
color: var(--third-colour);
|
||||
background-color: var(--fourth-colour);
|
||||
border-color: var(--fourth-colour);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue