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

67
package-lock.json generated
View file

@ -21,7 +21,10 @@
"tailwindcss": "^3.2.4"
},
"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"
}
},
"node_modules/@altano/tiny-async-pool": {
@ -5381,9 +5384,9 @@
}
},
"node_modules/prettier": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.0.tgz",
"integrity": "sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA==",
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz",
"integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==",
"bin": {
"prettier": "bin-prettier.js"
},
@ -5395,18 +5398,36 @@
}
},
"node_modules/prettier-plugin-astro": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.7.0.tgz",
"integrity": "sha512-ehCUx7MqHWvkHwUmxxAWLsL35pFaCTM5YXQ8xjG/1W6dY2yBhvEks+2aCfjeI5zmMrZNCXkiMQtpznSlLSLrxw==",
"version": "0.7.1",
"resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.7.1.tgz",
"integrity": "sha512-ySeyXHIXNZpbqZCcj8eoWl6z2UDHYl6DPgN7z9E1HElG8aVlC2WQNjfcpcSBuF4jwwo+HHi44pun/Hlr+h8OsA==",
"hasInstallScript": true,
"dependencies": {
"@astrojs/compiler": "^0.29.3",
"@astrojs/compiler": "^0.31.3",
"prettier": "^2.7.1",
"sass-formatter": "^0.7.5",
"synckit": "^0.8.4"
},
"engines": {
"node": "^14.15.0 || >=16.0.0",
"npm": ">=6.14.0"
"pnpm": ">=7.14.0"
}
},
"node_modules/prettier-plugin-astro/node_modules/@astrojs/compiler": {
"version": "0.31.3",
"resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.31.3.tgz",
"integrity": "sha512-WbA05QH5xkdaJ3XtzDuYOjtqsip2InW5rk156sSdaHs5qN2NroUHbzWZthHJwmNAAjQSGXVIj+O6jQj81zzX/Q=="
},
"node_modules/prettier-plugin-tailwindcss": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.1.tgz",
"integrity": "sha512-aIO8IguumORyRsmT+E7JfJ3A9FEoyhqZR7Au7TBOege3VZkgMvHJMkufeYp4zjnDK2iq4ktkvGMNOQR9T8lisQ==",
"dev": true,
"engines": {
"node": ">=12.17.0"
},
"peerDependencies": {
"prettier": ">=2.2.0"
}
},
"node_modules/pretty-bytes": {
@ -11690,20 +11711,34 @@
}
},
"prettier": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.0.tgz",
"integrity": "sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA=="
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz",
"integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg=="
},
"prettier-plugin-astro": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.7.0.tgz",
"integrity": "sha512-ehCUx7MqHWvkHwUmxxAWLsL35pFaCTM5YXQ8xjG/1W6dY2yBhvEks+2aCfjeI5zmMrZNCXkiMQtpznSlLSLrxw==",
"version": "0.7.1",
"resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.7.1.tgz",
"integrity": "sha512-ySeyXHIXNZpbqZCcj8eoWl6z2UDHYl6DPgN7z9E1HElG8aVlC2WQNjfcpcSBuF4jwwo+HHi44pun/Hlr+h8OsA==",
"requires": {
"@astrojs/compiler": "^0.29.3",
"@astrojs/compiler": "^0.31.3",
"prettier": "^2.7.1",
"sass-formatter": "^0.7.5",
"synckit": "^0.8.4"
},
"dependencies": {
"@astrojs/compiler": {
"version": "0.31.3",
"resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.31.3.tgz",
"integrity": "sha512-WbA05QH5xkdaJ3XtzDuYOjtqsip2InW5rk156sSdaHs5qN2NroUHbzWZthHJwmNAAjQSGXVIj+O6jQj81zzX/Q=="
}
}
},
"prettier-plugin-tailwindcss": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.1.tgz",
"integrity": "sha512-aIO8IguumORyRsmT+E7JfJ3A9FEoyhqZR7Au7TBOege3VZkgMvHJMkufeYp4zjnDK2iq4ktkvGMNOQR9T8lisQ==",
"dev": true,
"requires": {}
},
"pretty-bytes": {
"version": "5.6.0",

5
package.json
View file

@ -24,6 +24,9 @@
"tailwindcss": "^3.2.4"
},
"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
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>
<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) => (
<li class=" hover:-translate-y-[2px] transition-all">
<li class=" transition-all hover:-translate-y-[2px]">
<a
href={item.link}
class="hover:text-[#fbc119] text-neutral-300"
class="text-neutral-300 hover:text-[#fbc119]"
>
{item.name}
</a>
@ -44,13 +44,21 @@ const navItems = [
}
</ul>
</nav>
<button class="hamburger md:hidden block">
<button class="hamburger block md:hidden">
<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 class="hamburger-close md:hidden hidden z-30">
<button class="hamburger-close z-30 hidden md:hidden">
<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>
</Container>
</header>

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

@ -20,18 +20,18 @@ const categories = Object.keys(sections);
---
<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">
{
categories.map((category) => (
<li>
<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}
</h1>
<ul>
{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">
{section.frontmatter.title}
</a>

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

@ -6,12 +6,12 @@ import Name from "./Name.astro";
---
<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" />
</div>
<section class="md:ml-6 md:text-left text-center">
<section class="text-center md:ml-6 md:text-left">
<Name />
<Socials />
</section>

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

@ -1,3 +1,3 @@
<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>

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) => (
<li class="mr-4 ">
<a class="h-10 w-10" href={social.link} title={social.name}>
<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`}
alt={`${social.name} icon`}
/>

33
src/layouts/Layout.astro
View file

@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<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="description" content="Ultimate placeholder text." />
@ -37,31 +37,32 @@
/>
<!-- 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.gstatic.com"
crossorigin
/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;500;700;900&display=swap"
rel="stylesheet"
/>
</head>
<body class="bg-dark overflow-x-hidden font-['Source Code Pro']">
<body class="font-['Source Code Pro'] overflow-x-hidden bg-dark">
<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>
import "../scripts/menu.js";
import "../scripts/snow.js";
import { Fireworks } from 'fireworks-js';
import { Fireworks } from "fireworks-js";
export const fireworksContainer = document.querySelector<HTMLDivElement>(
'.fireworks-container'
)!
export const fireworksContainer =
document.querySelector<HTMLDivElement>(".fireworks-container")!;
const fireworks = new Fireworks(fireworksContainer, {
rocketsPoint: {
@ -69,8 +70,8 @@
max: 100,
},
autoresize: true,
})
fireworks.start()
});
fireworks.start();
</script>
</body>
</html>
@ -84,6 +85,6 @@
border: 6px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
border-radius: 9999px;
background-color: #AAAAAA;
background-color: #aaaaaa;
}
</style>

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

@ -22,11 +22,11 @@ const {
<Sidebar />
<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}
</h1>
<main class="text-white text-2xl prose">
<main class="prose text-2xl text-white">
<slot />
</main>
</div>

48
src/pages/projects.astro
View file

@ -47,60 +47,62 @@ const projects: Project[] = [
{
name: "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",
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",
link: "https://github.com/xHyroM/hykord",
desc: "My @discord client modification."
desc: "My @discord client modification.",
},
{
name: "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) {
const repository = await (await fetch(`https://api.github.com/repos/${project.link.slice(19)}`, {
const repository = await (
await fetch(`https://api.github.com/repos/${project.link.slice(19)}`, {
headers: {
'Authorization': `Bearer ${import.meta.env.GITHUB_ACCESS_TOKEN}`
}
})).json();
Authorization: `Bearer ${import.meta.env.GITHUB_ACCESS_TOKEN}`,
},
})
).json();
project.stats = {
forks: repository.forks,
stars: repository.stargazers_count
}
stars: repository.stargazers_count,
};
}
---
<Layout>
<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
</h1>
<Container>
<main class="flex gap-12 flex-wrap justify-center">
<main class="flex flex-wrap justify-center gap-12">
{
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">
<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}
</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">
<img
src="/icons/star.svg"
alt=""
class="w-[21px] h-[21px] translate-y-[1px]"
class="h-[21px] w-[21px] translate-y-[1px]"
/>
<p>{project.stats!.stars}</p>
</div>
@ -109,35 +111,35 @@ for (const project of projects) {
<img
src="/icons/code-fork-solid.svg"
alt=""
class="w-[21px] h-[21px] translate-y-[1px]"
class="h-[21px] w-[21px] translate-y-[1px]"
/>
<p>{project.stats!.forks}</p>
</div>
</div>
</div>
<p class="text-neutral-300 mb-6 break-all">
<p class="mb-6 break-all text-neutral-300">
{project.desc}
</p>
<div>
<a
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{" "}
<img
src="/icons/arrow-up-right.svg"
class="ml-2 w-5 mt-[1px] "
class="ml-2 mt-[1px] w-5 "
alt=""
/>
</a>
<a
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
src="/icons/book-open.svg"
class="w-5 mr-2 "
class="mr-2 w-5 "
alt=""
/>
Docs{" "}