hyro/website
1
0
Fork 0
mirror of https://github.com/xHyroM/website.git synced 2024-11-22 15:01:05 +01:00
Code Issues Projects Releases Wiki Activity Actions

tailwind class sorting

Browse source
This commit is contained in:
OLIMINATOR 2023-01-04 12:15:08 +01:00
parent 13ae401363
commit 52a75e2acd
10 changed files with 13364 additions and 13315 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26487
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

57
package.json
View file

@ -1,29 +1,32 @@
{ {
"name": "@example/basics", "name": "@example/basics",
"type": "module", "type": "module",
"version": "0.0.1", "version": "0.0.1",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",
"start": "astro dev", "start": "astro dev",
"build": "astro build", "build": "astro build",
"preview": "astro preview", "preview": "astro preview",
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/image": "^0.12.0", "@astrojs/image": "^0.12.0",
"@astrojs/prefetch": "^0.1.1", "@astrojs/prefetch": "^0.1.1",
"@astrojs/sitemap": "^1.0.0", "@astrojs/sitemap": "^1.0.0",
"@astrojs/tailwind": "^2.1.3", "@astrojs/tailwind": "^2.1.3",
"@tailwindcss/typography": "^0.5.8", "@tailwindcss/typography": "^0.5.8",
"astro": "^1.6.12", "astro": "^1.6.12",
"astro-compress": "^1.1.17", "astro-compress": "^1.1.17",
"astro-robots-txt": "^0.3.10", "astro-robots-txt": "^0.3.10",
"fireworks-js": "^2.10.0", "fireworks-js": "^2.10.0",
"html-minifier": "^4.0.0", "html-minifier": "^4.0.0",
"tailwindcss": "^3.2.4" "tailwindcss": "^3.2.4"
}, },
"devDependencies": { "devDependencies": {
"@types/html-minifier": "^4.0.2" "@types/html-minifier": "^4.0.2",
} "prettier": "2.8.1",
"prettier-plugin-astro": "^0.7.1",
"prettier-plugin-tailwindcss": "^0.2.1"
}
} }

26
src/components/widgets/Navbar.astro
View file

@ -21,21 +21,21 @@ const navItems = [
]; ];
--- ---
<header class="text-white text-xl h-16 border-b-[1px] border-neutral-800"> <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="font-extrabold text-2xl" href="/">xHyroM</a> <a class="text-2xl font-extrabold" href="/">xHyroM</a>
<nav> <nav>
<ul <ul
class="absolute top-0 left-0 md:relative nav-links gap-10 md:flex hidden md:flex-row bg-gray md:bg-transparent w-full [&_li]:my-2 [&_li]:ml-4 border-b-[1px] md:border-b-0 border-neutral-800 transition-all" class="nav-links absolute top-0 left-0 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) => ( navItems.map((item) => (
<li class=" hover:-translate-y-[2px] transition-all"> <li class=" transition-all hover:-translate-y-[2px]">
<a <a
href={item.link} href={item.link}
class="hover:text-[#fbc119] text-neutral-300" class="text-neutral-300 hover:text-[#fbc119]"
> >
{item.name} {item.name}
</a> </a>
@ -44,13 +44,21 @@ const navItems = [
} }
</ul> </ul>
</nav> </nav>
<button class="hamburger md:hidden block"> <button class="hamburger block md:hidden">
<span class="sr-only">menu</span> <span class="sr-only">menu</span>
<img src="/icons/menu.svg" alt="hambuerger menu icon" class="h-[23px] w-[24px]" /> <img
src="/icons/menu.svg"
alt="hambuerger menu icon"
class="h-[23px] w-[24px]"
/>
</button> </button>
<button class="hamburger-close md:hidden hidden z-30"> <button class="hamburger-close z-30 hidden md:hidden">
<span class="sr-only">menu</span> <span class="sr-only">menu</span>
<img src="/icons/x.svg" alt="hambuerger menu icon" class="h-[23px] w-[24px]" /> <img
src="/icons/x.svg"
alt="hambuerger menu icon"
class="h-[23px] w-[24px]"
/>
</button> </button>
</Container> </Container>
</header> </header>

6
src/components/widgets/docs/Sidebar.astro
View file

@ -20,18 +20,18 @@ const categories = Object.keys(sections);
--- ---
<aside aria-label="Sidebar"> <aside aria-label="Sidebar">
<nav class="w-full mr-16 py-4"> <nav class="mr-16 w-full py-4">
<ul class="overflow-y-auto overflow-x-visible"> <ul class="overflow-y-auto overflow-x-visible">
{ {
categories.map((category) => ( categories.map((category) => (
<li> <li>
<div class="pt-5"> <div class="pt-5">
<h1 class="text-white text-2xl w-full font-extrabold "> <h1 class="w-full text-2xl font-extrabold text-white ">
{category} {category}
</h1> </h1>
<ul> <ul>
{sections[category].map((section) => ( {sections[category].map((section) => (
<li class="text-white my-2 hover:bg-white/20 rounded-sm p-2 transition-colors duration-150"> <li class="my-2 rounded-sm p-2 text-white transition-colors duration-150 hover:bg-white/20">
<a href={section.url} class="px-4"> <a href={section.url} class="px-4">
{section.frontmatter.title} {section.frontmatter.title}
</a> </a>

6
src/components/widgets/index/Hero.astro
View file

@ -6,12 +6,12 @@ import Name from "./Name.astro";
--- ---
<main <main
class="mt-24 md:mt-64 flex flex-col md:flex-row justify-center items-center" class="mt-24 flex flex-col items-center justify-center md:mt-64 md:flex-row"
> >
<div class="flex justify-cener items-center"> <div class="justify-cener flex items-center">
<Image src={logo} width={200} height={200} alt="descriptive text" /> <Image src={logo} width={200} height={200} alt="descriptive text" />
</div> </div>
<section class="md:ml-6 md:text-left text-center"> <section class="text-center md:ml-6 md:text-left">
<Name /> <Name />
<Socials /> <Socials />
</section> </section>

2
src/components/widgets/index/Name.astro
View file

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

4
src/components/widgets/index/Socials.astro
View file

@ -23,13 +23,13 @@ const socials = [
]; ];
--- ---
<ul class="flex text-white my-5 md:justify-start justify-center"> <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 hover:-translate-y-1 transition-all" 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`}
/> />

37
src/layouts/Layout.astro
View file

@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags --> <!-- Primary Meta Tags -->
<title>xHyroM</title> <title>xHyroM</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="title" content="xHyroM" /> <meta name="title" content="xHyroM" />
<meta name="description" content="Ultimate placeholder text." /> <meta name="description" content="Ultimate placeholder text." />
@ -37,31 +37,32 @@
/> />
<!-- CSP --> <!-- CSP -->
<meta http-equiv="Content-Security-Policy" content="img-src 'self'; font-src *; style-src 'self' 'unsafe-inline' fonts.googleapis.com; script-src 'self' 'unsafe-inline'; object-src 'none'" /> <meta
http-equiv="Content-Security-Policy"
content="img-src 'self'; font-src *; style-src 'self' 'unsafe-inline' fonts.googleapis.com; script-src 'self' 'unsafe-inline'; object-src 'none'"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin
/>
<link <link
href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;500;700;900&display=swap" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;500;700;900&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
</head> </head>
<body class="bg-dark overflow-x-hidden font-['Source Code Pro']"> <body class="font-['Source Code Pro'] overflow-x-hidden bg-dark">
<slot /> <slot />
<div class='fireworks-container h-full w-full absolute top-0 left-0 z-[-1000]' /> <div
class="fireworks-container absolute top-0 left-0 z-[-1000] h-full w-full"
>
</div>
<script> <script>
import "../scripts/menu.js"; import "../scripts/menu.js";
import "../scripts/snow.js"; import "../scripts/snow.js";
import { Fireworks } from 'fireworks-js'; import { Fireworks } from "fireworks-js";
export const fireworksContainer = document.querySelector<HTMLDivElement>( export const fireworksContainer =
'.fireworks-container' document.querySelector<HTMLDivElement>(".fireworks-container")!;
)!
const fireworks = new Fireworks(fireworksContainer, { const fireworks = new Fireworks(fireworksContainer, {
rocketsPoint: { rocketsPoint: {
@ -69,8 +70,8 @@
max: 100, max: 100,
}, },
autoresize: true, autoresize: true,
}) });
fireworks.start() fireworks.start();
</script> </script>
</body> </body>
</html> </html>
@ -79,11 +80,11 @@
::-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>

4
src/layouts/docs/ItemLayout.astro
View file

@ -22,11 +22,11 @@ const {
<Sidebar /> <Sidebar />
<div class="w-full p-8"> <div class="w-full p-8">
<h1 class="text-white text-5xl py-10 font-extrabold"> <h1 class="py-10 text-5xl font-extrabold text-white">
{title} {title}
</h1> </h1>
<main class="text-white text-2xl prose"> <main class="prose text-2xl text-white">
<slot /> <slot />
</main> </main>
</div> </div>

50
src/pages/projects.astro
View file

@ -47,60 +47,62 @@ const projects: Project[] = [
{ {
name: "Roles Bot", name: "Roles Bot",
link: "https://github.com/xHyroM/roles-bot", link: "https://github.com/xHyroM/roles-bot",
desc: "Discord bot for \"button\" roles, using Cloudflare Workers.", desc: 'Discord bot for "button" roles, using Cloudflare Workers.',
}, },
{ {
name: "Bun Discord Bot", name: "Bun Discord Bot",
link: "https://github.com/xHyroM/bun-discord-bot", link: "https://github.com/xHyroM/bun-discord-bot",
desc: "Official serverless discord bot for bun discord server." desc: "Official serverless discord bot for bun discord server.",
}, },
{ {
name: "hykord", name: "hykord",
link: "https://github.com/xHyroM/hykord", link: "https://github.com/xHyroM/hykord",
desc: "My @discord client modification." desc: "My @discord client modification.",
}, },
{ {
name: "frog", name: "frog",
link: "https://github.com/xHyroM/frog", link: "https://github.com/xHyroM/frog",
desc: "Frog is an extremely simple language based on the monkey language." desc: "Frog is an extremely simple language based on the monkey language.",
} },
]; ];
for (const project of projects) { for (const project of projects) {
const repository = await (await fetch(`https://api.github.com/repos/${project.link.slice(19)}`, { const repository = await (
headers: { await fetch(`https://api.github.com/repos/${project.link.slice(19)}`, {
'Authorization': `Bearer ${import.meta.env.GITHUB_ACCESS_TOKEN}` headers: {
} Authorization: `Bearer ${import.meta.env.GITHUB_ACCESS_TOKEN}`,
})).json(); },
})
).json();
project.stats = { project.stats = {
forks: repository.forks, forks: repository.forks,
stars: repository.stargazers_count stars: repository.stargazers_count,
} };
} }
--- ---
<Layout> <Layout>
<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">
Projects Projects
</h1> </h1>
<Container> <Container>
<main class="flex gap-12 flex-wrap justify-center"> <main class="flex flex-wrap justify-center gap-12">
{ {
projects.map((project) => ( projects.map((project) => (
<section class="flex flex-col md:w-96 w-80 min-h-max border-[1px] border-neutral-800 bg-gray p-6 rounded-md"> <section class="bg-gray flex min-h-max w-80 flex-col rounded-md border-[1px] border-neutral-800 p-6 md:w-96">
<div class="flex"> <div class="flex">
<h2 class="text-3xl font-bold text-white mb-4 break-words"> <h2 class="mb-4 break-words text-3xl font-bold text-white">
{project.name} {project.name}
</h2> </h2>
<div class="bg-neutral-800 text-neutral-300 flex justify-center items-center h-fit rounded-lg py-1 px-4 ml-4 gap-2 translate-y-1"> <div class="ml-4 flex h-fit translate-y-1 items-center justify-center gap-2 rounded-lg bg-neutral-800 py-1 px-4 text-neutral-300">
<div class="flex gap-1"> <div class="flex gap-1">
<img <img
src="/icons/star.svg" src="/icons/star.svg"
alt="" alt=""
class="w-[21px] h-[21px] translate-y-[1px]" class="h-[21px] w-[21px] translate-y-[1px]"
/> />
<p>{project.stats!.stars}</p> <p>{project.stats!.stars}</p>
</div> </div>
@ -109,35 +111,35 @@ for (const project of projects) {
<img <img
src="/icons/code-fork-solid.svg" src="/icons/code-fork-solid.svg"
alt="" alt=""
class="w-[21px] h-[21px] translate-y-[1px]" class="h-[21px] w-[21px] translate-y-[1px]"
/> />
<p>{project.stats!.forks}</p> <p>{project.stats!.forks}</p>
</div> </div>
</div> </div>
</div> </div>
<p class="text-neutral-300 mb-6 break-all"> <p class="mb-6 break-all text-neutral-300">
{project.desc} {project.desc}
</p> </p>
<div> <div>
<a <a
href={project.link} href={project.link}
class="inline-flex bottom-0 w-fit py-2 px-6 text-neutral-300 bg-neutral-800 rounded-md hover:bg-neutral-700 transition-colors duration-100 [&_img]:hover:translate-x-[2px] [&_img]:transition-all" class="bottom-0 inline-flex w-fit rounded-md bg-neutral-800 py-2 px-6 text-neutral-300 transition-colors duration-100 hover:bg-neutral-700 [&_img]:transition-all [&_img]:hover:translate-x-[2px]"
> >
GitHub{" "} GitHub{" "}
<img <img
src="/icons/arrow-up-right.svg" src="/icons/arrow-up-right.svg"
class="ml-2 w-5 mt-[1px] " class="ml-2 mt-[1px] w-5 "
alt="" alt=""
/> />
</a> </a>
<a <a
href={project.link} href={project.link}
class=" translate-y-[6px] inline-flex bottom-0 w-fit py-2 px-6 text-neutral-300 transition-all duration-100 hover:text-neutral-200 hover:-translate-y-[-4px]" class=" bottom-0 inline-flex w-fit translate-y-[6px] py-2 px-6 text-neutral-300 transition-all duration-100 hover:-translate-y-[-4px] hover:text-neutral-200"
> >
<img <img
src="/icons/book-open.svg" src="/icons/book-open.svg"
class="w-5 mr-2 " class="mr-2 w-5 "
alt="" alt=""
/> />
Docs{" "} Docs{" "}