build: prettier

This commit is contained in:
xHyroM 2023-02-25 21:34:13 +01:00
parent c79bd6ccae
commit 8a5009eeaf
10 changed files with 170 additions and 173 deletions

View file

@ -1,11 +1,14 @@
module.exports = { module.exports = {
plugins: [require.resolve("prettier-plugin-astro")], plugins: [
overrides: [ require.resolve("prettier-plugin-astro"),
{ require.resolve("prettier-plugin-tailwindcss"),
files: "*.astro", ],
options: { overrides: [
parser: "astro", {
}, files: "*.astro",
}, options: {
], parser: "astro",
},
},
],
}; };

View file

@ -1,15 +1,16 @@
<script> <script>
import { Fireworks } from "fireworks-js"; import { Fireworks } from "fireworks-js";
export const fireworksContainer = export const fireworksContainer = document.querySelector<HTMLDivElement>(
document.querySelector<HTMLDivElement>(".fireworks-container")!; ".fireworks-container"
)!;
const fireworks = new Fireworks(fireworksContainer, { const fireworks = new Fireworks(fireworksContainer, {
rocketsPoint: { rocketsPoint: {
min: 0, min: 0,
max: 100, max: 100,
}, },
autoresize: true, autoresize: true,
}); });
fireworks.start(); fireworks.start();
</script> </script>

View file

@ -2,63 +2,58 @@
import Container from "../atoms/Container.astro"; import Container from "../atoms/Container.astro";
const navItems = [ const navItems = [
{ {
name: "Home", name: "Home",
link: "/", link: "/",
}, },
{ {
name: "Projects", name: "Projects",
link: "/projects", link: "/projects",
}, },
{ {
name: "Blog", name: "Blog",
link: "/blog", link: "/blog",
}, },
{ {
name: "Docs", name: "Docs",
link: "/docs", link: "/docs",
}, },
]; ];
--- ---
<header class="h-16 border-b-[1px] border-neutral-800 text-xl text-white"> <header class="h-16 border-b-[1px] border-neutral-800 text-xl text-white">
<Container <Container class="flex justify-around md:justify-between items-center h-full">
class="flex justify-around md:justify-between items-center h-full" <a class="text-2xl font-extrabold" href="/">xHyroM</a>
> <nav>
<a class="text-2xl font-extrabold" href="/">xHyroM</a> <ul
<nav> class="nav-links absolute top-0 left-0 z-20 hidden w-full gap-10 border-b-[1px] border-neutral-800 bg-gray transition-all md:relative md:flex md:flex-row md:border-b-0 md:bg-transparent [&_li]:my-2 [&_li]:ml-4"
<ul >
class="nav-links absolute top-0 left-0 z-20 hidden w-full gap-10 border-b-[1px] border-neutral-800 bg-gray transition-all md:relative md:flex md:flex-row md:border-b-0 md:bg-transparent [&_li]:my-2 [&_li]:ml-4" {
> navItems.map((item) => (
{ <li class=" transition-all hover:-translate-y-[2px]">
navItems.map((item) => ( <a href={item.link} class="hover:text-hyroGold text-neutral-300">
<li class=" transition-all hover:-translate-y-[2px]"> {item.name}
<a </a>
href={item.link} </li>
class="hover:text-hyroGold text-neutral-300" ))
> }
{item.name} </ul>
</a> </nav>
</li> <button class="hamburger block md:hidden">
)) <span class="sr-only">menu</span>
} <img
</ul> src="/icons/menu.svg"
</nav> alt="hamburger menu icon"
<button class="hamburger block md:hidden"> class="h-[23px] w-[24px]"
<span class="sr-only">menu</span> />
<img </button>
src="/icons/menu.svg" <button class="hamburger-close z-30 hidden md:hidden">
alt="hamburger menu icon" <span class="sr-only">menu</span>
class="h-[23px] w-[24px]" <img
/> src="/icons/x.svg"
</button> alt="hamburger menu icon"
<button class="hamburger-close z-30 hidden md:hidden"> class="h-[23px] w-[24px]"
<span class="sr-only">menu</span> />
<img </button>
src="/icons/x.svg" </Container>
alt="hamburger menu icon"
class="h-[23px] w-[24px]"
/>
</button>
</Container>
</header> </header>

View file

@ -1,3 +1,3 @@
<script> <script>
import "../../scripts/snow.js"; import "../../scripts/snow.js";
</script> </script>

View file

@ -6,20 +6,20 @@ import Name from "./Name.astro";
--- ---
<main <main
class="mt-24 flex flex-col items-center justify-center md:mt-64 md:flex-row" class="mt-24 flex flex-col items-center justify-center md:mt-64 md:flex-row"
> >
<div class="justify-cener flex items-center"> <div class="justify-cener flex items-center">
<Picture <Picture
src={logo} src={logo}
formats={["png"]} formats={["png"]}
sizes="(max-width: 200px) 100vw, 200px" sizes="(max-width: 200px) 100vw, 200px"
widths={[200, 400]} widths={[200, 400]}
alt="descriptive text" alt="descriptive text"
class={"h-[200px] w-[200px]"} class={"h-[200px] w-[200px]"}
/> />
</div> </div>
<section class="text-center md:ml-6 md:text-left"> <section class="text-center md:ml-6 md:text-left">
<Name /> <Name />
<Socials /> <Socials />
</section> </section>
</main> </main>

View file

@ -1,3 +1,3 @@
<div class="flex drop-shadow-yellow"> <div class="flex drop-shadow-yellow">
<h1 class="text-6xl font-extrabold text-white">xHyroM</h1> <h1 class="text-6xl font-extrabold text-white">xHyroM</h1>
</div> </div>

View file

@ -1,40 +1,40 @@
--- ---
const socials = [ const socials = [
{ {
name: "GitHub", name: "GitHub",
link: "https://github.com/xHyroM/", link: "https://github.com/xHyroM/",
icon: "github", icon: "github",
}, },
{ {
name: "Discord", name: "Discord",
link: "https://discord.gg/kFPKmEKeMS/", link: "https://discord.gg/kFPKmEKeMS/",
icon: "discord", icon: "discord",
}, },
{ {
name: "Twitter", name: "Twitter",
link: "https://twitter.com/hyrousek/", link: "https://twitter.com/hyrousek/",
icon: "twitter", icon: "twitter",
}, },
{ {
name: "Instagram", name: "Instagram",
link: "https://www.instagram.com/hyro.dev/", link: "https://www.instagram.com/hyro.dev/",
icon: "instagram", icon: "instagram",
}, },
]; ];
--- ---
<ul class="my-5 flex justify-center text-white md:justify-start"> <ul class="my-5 flex justify-center text-white md:justify-start">
{ {
socials.map((social) => ( socials.map((social) => (
<li class="mr-4 "> <li class="mr-4 ">
<a class="h-10 w-10" href={social.link} title={social.name}> <a class="h-10 w-10" href={social.link} title={social.name}>
<img <img
class="h-8 w-8 transition-all hover:-translate-y-1" class="h-8 w-8 transition-all hover:-translate-y-1"
src={`/icons/${social.icon}.svg`} src={`/icons/${social.icon}.svg`}
alt={`${social.name} icon`} alt={`${social.name} icon`}
/> />
</a> </a>
</li> </li>
)) ))
} }
</ul> </ul>

View file

@ -30,16 +30,17 @@ const Head = head || DefaultHead;
<script> <script>
import "../scripts/menu.js"; import "../scripts/menu.js";
</script> </script>
</body><style is:global> <style is:global>
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 16px; width: 16px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border: 6px solid rgba(0, 0, 0, 0); border: 6px solid rgba(0, 0, 0, 0);
background-clip: padding-box; background-clip: padding-box;
border-radius: 9999px; border-radius: 9999px;
background-color: #aaaaaa; background-color: #aaaaaa;
} }
</style> </style>
</body>
</html> </html>

View file

@ -18,12 +18,12 @@ const {
<Layout head={PostHead} title={title} date={date}> <Layout head={PostHead} title={title} date={date}>
<Navbar /> <Navbar />
<h1 class="text-white text-5xl w-full text-center py-32 font-extrabold"> <h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
{title} {title}
</h1> </h1>
<Container> <Container>
<main class="text-white text-2xl prose"> <main class="prose text-2xl text-white">
<article> <article>
<slot /> <slot />
</article> </article>

View file

@ -5,43 +5,40 @@ import Layout from "../layouts/Layout.astro";
--- ---
<Layout> <Layout>
<Navbar /> <Navbar />
<h1 class="w-full py-32 text-center text-5xl font-extrabold text-white"> <h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
WRONG TURN? WRONG TURN?
</h1> </h1>
<Container> <Container>
<main class="text-2xl text-white"> <main class="text-2xl text-white">
<p class="mb-4"> <p class="mb-4">
We're sorry, but it looks like the page you were trying to visit We're sorry, but it looks like the page you were trying to visit has
has been misplaced. It's not entirely clear where it's gone, but been misplaced. It's not entirely clear where it's gone, but we suspect
we suspect it may have gotten lost in the vast expanse of the it may have gotten lost in the vast expanse of the internet.
internet. </p>
</p>
<p class="mb-4"> <p class="mb-4">
We've searched high and low, but alas, we can't seem to find it. We've searched high and low, but alas, we can't seem to find it. It's
It's possible that it's hiding behind a particularly stubborn possible that it's hiding behind a particularly stubborn firewall, or
firewall, or maybe it's taking a much-needed vacation on a maybe it's taking a much-needed vacation on a remote server farm.
remote server farm. </p>
</p>
<p class="mb-4"> <p class="mb-4">
Despite our best efforts, we just can't seem to locate the page Despite our best efforts, we just can't seem to locate the page you were
you were looking for. We apologize for any inconvenience this looking for. We apologize for any inconvenience this may have caused.
may have caused. </p>
</p>
<p class="mb-4"> <p class="mb-4">
In the meantime, why not take a look around our <a In the meantime, why not take a look around our <a
class="text-hyroGold" class="text-hyroGold"
href="/">homepage</a href="/">homepage</a
> and see if you can find something else that piques your interest? > and see if you can find something else that piques your interest? Who knows,
Who knows, you might just stumble upon something even better than you might just stumble upon something even better than what you were originally
what you were originally looking for. looking for.
</p> </p>
<p>Thanks for stopping by, and we hope to see you again soon!</p> <p>Thanks for stopping by, and we hope to see you again soon!</p>
</main> </main>
</Container> </Container>
</Layout> </Layout>