style: Try biome

This commit is contained in:
BuyMyMojo 2024-12-19 11:53:42 +11:00
parent 54b4349667
commit 7ed39cd0df
Signed by: aria
GPG key ID: 19AB7AA462B8AB3B
11 changed files with 180 additions and 152 deletions

30
biome.json Normal file
View file

@ -0,0 +1,30 @@
{
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
"vcs": {
"enabled": false,
"clientKind": "git",
"useIgnoreFile": false
},
"files": {
"ignoreUnknown": false,
"ignore": []
},
"formatter": {
"enabled": true,
"indentStyle": "tab"
},
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"javascript": {
"formatter": {
"quoteStyle": "double"
}
}
}

View file

@ -1,7 +1,7 @@
--- ---
const description = "Just my little website do be gay and do crime on~"; const description = "Just my little website do be gay and do crime on~";
const embedImage = "https://aria.coffee/static/img/sites/avatar.png"; const embedImage = "https://aria.coffee/static/img/sites/avatar.png";
const embedColour = "#380A84" const embedColour = "#380A84";
const { pageTitle } = Astro.props; const { pageTitle } = Astro.props;
--- ---

View file

@ -1,17 +1,20 @@
import { useState } from 'preact/hooks'; import { useState } from "preact/hooks";
export default function Greeting({messages}) { export default function Greeting({ messages }) {
const randomMessage = () =>
messages[Math.floor(Math.random() * messages.length)];
const randomMessage = () => messages[(Math.floor(Math.random() * messages.length))]; const [greeting, setGreeting] = useState(messages[0]);
const [greeting, setGreeting] = useState(messages[0]); return (
<div>
return ( <h3>{greeting}! Thank you for visiting!</h3>
<div> <button
<h3>{greeting}! Thank you for visiting!</h3> class="greetButton px-2 rounded-xl"
<button class="greetButton px-2 rounded-xl" onClick={() => setGreeting(randomMessage())}> onClick={() => setGreeting(randomMessage())}
New Greeting >
</button> New Greeting
</div> </button>
); </div>
);
} }

View file

@ -4,14 +4,14 @@ import { glob } from "astro/loaders";
import { z, defineCollection } from "astro:content"; import { z, defineCollection } from "astro:content";
// Define a `loader` and `schema` for each collection // Define a `loader` and `schema` for each collection
const blog = defineCollection({ const blog = defineCollection({
loader: glob({ pattern: '**/[^_]*.md', base: "./src/blog" }), loader: glob({ pattern: "**/[^_]*.md", base: "./src/blog" }),
schema: z.object({ schema: z.object({
title: z.string(), title: z.string(),
pubDate: z.date(), pubDate: z.date(),
description: z.string(), description: z.string(),
author: z.string(), author: z.string(),
tags: z.array(z.string()) tags: z.array(z.string()),
}) }),
}); });
// Export a single `collections` object to register your collection(s) // Export a single `collections` object to register your collection(s)
export const collections = { blog }; export const collections = { blog };

View file

@ -1,5 +1,5 @@
--- ---
import NavHeader from "../components/NavHeader.astro" import NavHeader from "../components/NavHeader.astro";
import Favicon from "../components/Favicon.astro"; import Favicon from "../components/Favicon.astro";
import Footer from "../components/Footer.astro"; import Footer from "../components/Footer.astro";
import "../styles/aria.css"; import "../styles/aria.css";

View file

@ -7,25 +7,25 @@ import "../styles/aria.css";
const pageTitle = "About Aria"; const pageTitle = "About Aria";
const identity = { const identity = {
firstName: "Aria", firstName: "Aria",
country: "Australia", country: "Australia",
occupation: "Phone & Computer Repair Tech", occupation: "Phone & Computer Repair Tech",
hobbies: ["gaming", "software/game development", "3D printing"], hobbies: ["gaming", "software/game development", "3D printing"],
}; };
const skills = ["Rust", "GDScript", "FFMPEG"]; const skills = ["Rust", "GDScript", "FFMPEG"];
const currentSystem = { const currentSystem = {
name: "I/O", name: "I/O",
operatingSystem: "EndeavourOS", operatingSystem: "EndeavourOS",
host: "X570 Phantom Gaming 4", host: "X570 Phantom Gaming 4",
shell: "zsh", shell: "zsh",
mainDisplay: "Gigabyte M27U", mainDisplay: "Gigabyte M27U",
mainDisplayRtings: "https://www.rtings.com/monitor/reviews/gigabyte/m27u", mainDisplayRtings: "https://www.rtings.com/monitor/reviews/gigabyte/m27u",
cpu: "AMD Ryzen 9 5900X", cpu: "AMD Ryzen 9 5900X",
gpu: "AMD Radeon RX 7800 XT", gpu: "AMD Radeon RX 7800 XT",
ram: "48GB", ram: "48GB",
localIP: "192.168.20.2", localIP: "192.168.20.2",
}; };
const skillColor = "#F5A8B7"; const skillColor = "#F5A8B7";

View file

@ -1,12 +1,13 @@
--- ---
import { getCollection, render } from 'astro:content'; import { getCollection, render } from "astro:content";
import MarkdownPostLayout from '../../layouts/MarkdownPostLayout.astro'; import MarkdownPostLayout from "../../layouts/MarkdownPostLayout.astro";
export async function getStaticPaths() { export async function getStaticPaths() {
const posts = await getCollection('blog'); const posts = await getCollection("blog");
return posts.map(post => ({ return posts.map((post) => ({
params: { slug: post.id }, props: { post }, params: { slug: post.id },
})); props: { post },
}));
} }
const { post } = Astro.props; const { post } = Astro.props;

View file

@ -1,18 +1,18 @@
import rss from '@astrojs/rss'; import rss from "@astrojs/rss";
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";
export async function GET(context) { export async function GET(context) {
const posts = await getCollection("blog"); const posts = await getCollection("blog");
return rss({ return rss({
title: "Aria | Blog", title: "Aria | Blog",
description: "Just me being a silly little thing", description: "Just me being a silly little thing",
site: context.site, site: context.site,
items: posts.map((post) => ({ items: posts.map((post) => ({
title: post.data.title, title: post.data.title,
pubDate: post.data.pubDate, pubDate: post.data.pubDate,
description: post.data.description, description: post.data.description,
link: `/posts/${post.id}/`, link: `/posts/${post.id}/`,
})), })),
customData: `<language>en-us</language>`, customData: `<language>en-us</language>`,
}); });
} }

View file

@ -6,21 +6,21 @@ import BlogEntry from "../../components/BlogEntry.astro";
import Partition from "../../components/Partition.astro"; import Partition from "../../components/Partition.astro";
export async function getStaticPaths() { export async function getStaticPaths() {
const allPosts = await getCollection("blog"); const allPosts = await getCollection("blog");
const uniqueTags = [ const uniqueTags = [
...new Set(allPosts.map((post: any) => post.data.tags).flat()), ...new Set(allPosts.map((post: any) => post.data.tags).flat()),
]; ];
return uniqueTags.map((tag) => { return uniqueTags.map((tag) => {
const filteredPosts = allPosts.filter((post: any) => const filteredPosts = allPosts.filter((post: any) =>
post.data.tags.includes(tag) post.data.tags.includes(tag),
); );
return { return {
params: { tag }, params: { tag },
props: { posts: filteredPosts }, props: { posts: filteredPosts },
}; };
}); });
} }
const { tag } = Astro.params; const { tag } = Astro.params;

View file

@ -4,9 +4,7 @@ import { getCollection } from "astro:content";
import BaseLayout from "../../layouts/BaseLayout.astro"; import BaseLayout from "../../layouts/BaseLayout.astro";
import Partition from "../../components/Partition.astro"; import Partition from "../../components/Partition.astro";
const allPosts = await getCollection("blog"); const allPosts = await getCollection("blog");
const tags = [ const tags = [...new Set(allPosts.map((post: any) => post.data.tags).flat())];
...new Set(allPosts.map((post: any) => post.data.tags).flat()),
];
const pageTitle = "Tag Index"; const pageTitle = "Tag Index";
--- ---

View file

@ -1,124 +1,120 @@
@font-face { @font-face {
font-family: "Noto Sans"; font-family: "Noto Sans";
src: src: local("Noto Sans"), url("/static/fonts/NotoSans-Regular.ttf")
local("Noto Sans"), format("truetype");
url("/static/fonts/NotoSans-Regular.ttf") format("truetype");
} }
@font-face { @font-face {
font-family: "Comic Shanns"; font-family: "Comic Shanns";
src: src: local("Comic Shanns Regular"), url("/static/fonts/comic shanns.otf")
local("Comic Shanns Regular"), format("opentype"), url("/static/fonts/comic shanns 2.ttf")
url("/static/fonts/comic shanns.otf") format("opentype"), format("truetype");
url("/static/fonts/comic shanns 2.ttf") format("truetype");
} }
@font-face { @font-face {
font-family: "Comic Mono"; font-family: "Comic Mono";
src: src: local("Comic Mono"), url("/static/fonts/ComicMono.ttf") format("ttf"),
local("Comic Mono"), url("https://dtinth.github.io/comic-mono-font/ComicMono.ttf")
url("/static/fonts/ComicMono.ttf") format("ttf"), format("truetype");
url("https://dtinth.github.io/comic-mono-font/ComicMono.ttf") format("truetype")
} }
:root { :root {
--first-colour: #16111a; --first-colour: #16111a;
--second-colour: #21042c; --second-colour: #21042c;
--third-colour: #2E236C; --third-colour: #2e236c;
--fourth-colour: #F5EFFF; --fourth-colour: #f5efff;
--border: #27272a; --border: #27272a;
} }
html { html {
background-color: var(--first-colour); background-color: var(--first-colour);
font-family: "Comic Mono", "Comic Shanns", "Comic Sans", "Comic Sans MS", "Chalkboard", "ChalkboardSE-Regular", "Noto Sans", sans-serif; font-family: "Comic Mono", "Comic Shanns", "Comic Sans", "Comic Sans MS",
font-size: larger; "Chalkboard", "ChalkboardSE-Regular", "Noto Sans", sans-serif;
display: flex; font-size: larger;
flex-direction: column; display: flex;
align-items: center; flex-direction: column;
justify-content: center; align-items: center;
justify-content: center;
} }
body { body {
/* margin: 0 auto; */ /* margin: 0 auto; */
/* width: 100%; */ /* width: 100%; */
/* max-width: 40em; */ /* max-width: 40em; */
padding: 2em; padding: 2em;
/* padding: 1rem; */ /* padding: 1rem; */
/* line-height: 1.5; */ /* line-height: 1.5; */
color: var(--fourth-colour); color: var(--fourth-colour);
} }
@media screen and (max-width: 899px) { @media screen and (max-width: 899px) {
body { body {
width: 95%; width: 95%;
padding-top: 0.5em; padding-top: 0.5em;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
flex-wrap: wrap; flex-wrap: wrap;
} }
} }
a { a {
color: var(--fourth-colour); color: var(--fourth-colour);
text-decoration: underline 2px; text-decoration: underline 2px;
text-underline-offset: 2px; text-underline-offset: 2px;
text-decoration-color: #00000000; text-decoration-color: #00000000;
} }
a:hover { a:hover {
text-decoration-color: #fff; text-decoration-color: #fff;
transition: text-decoration-color 0.25s; transition: text-decoration-color 0.25s;
} }
/* h1 { */ /* h1 { */
/* margin: 1rem 0; */ /* margin: 1rem 0; */
/* font-size: 2.5rem; */ /* font-size: 2.5rem; */
/* } */ /* } */
/* footer { */ /* footer { */
/* display: flex; */ /* display: flex; */
/* gap: 1rem; */ /* gap: 1rem; */
/* margin-top: 2rem; */ /* margin-top: 2rem; */
/* background-color: var(--third-colour); */ /* background-color: var(--third-colour); */
/* border-radius: 4px; */ /* border-radius: 4px; */
/* padding: 0.5rem; */ /* padding: 0.5rem; */
/* } */ /* } */
.badge { .badge {
image-rendering: pixelated; image-rendering: pixelated;
min-width: 88px; min-width: 88px;
min-height: 31px; min-height: 31px;
padding: 4px; padding: 4px;
} }
.linked-buttons { .linked-buttons {
outline-style: dashed; outline-style: dashed;
width:fit-content; width: fit-content;
display: inline-flex; display: inline-flex;
} }
.container { .container {
background-color: var(--second-colour); background-color: var(--second-colour);
border-radius: 8px; border-radius: 8px;
padding: 16px; padding: 16px;
display:flex; display: flex;
flex-direction: column; flex-direction: column;
/* flex: content; */ /* flex: content; */
} }
.greetButton { .greetButton {
color: var(--fourth-colour); color: var(--fourth-colour);
background-color: var(--second-colour); background-color: var(--second-colour);
border-color: var(--second-colour); border-color: var(--second-colour);
transition-duration: 0.4s; transition-duration: 0.4s;
} }
.greetButton:hover { .greetButton:hover {
color: var(--third-colour); color: var(--third-colour);
background-color: var(--fourth-colour); background-color: var(--fourth-colour);
border-color: var(--fourth-colour); border-color: var(--fourth-colour);
} }