mirror of
https://github.com/xHyroM/website.git
synced 2024-09-20 05:13:19 +02:00
feat: add prettier-astro and schema.org
add schema.org schema to main page, projects page, every blbog post for better SEO
This commit is contained in:
xHyroM
parent
84a249e4de
commit
8e336b8bd7
9 changed files with 263 additions and 194 deletions
11
.prettierrc.cjs
Normal file
11
.prettierrc.cjs
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
module.exports = {
|
||||
plugins: [require.resolve("prettier-plugin-astro")],
|
||||
overrides: [
|
||||
{
|
||||
files: "*.astro",
|
||||
options: {
|
||||
parser: "astro",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
"devDependencies": {
|
||||
"@types/html-minifier": "^4.0.2",
|
||||
"prettier": "2.8.1",
|
||||
"prettier-plugin-astro": "^0.7.1",
|
||||
"prettier-plugin-astro": "^0.7.2",
|
||||
"prettier-plugin-tailwindcss": "^0.2.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ specifiers:
|
|||
fireworks-js: ^2.10.0
|
||||
html-minifier: ^4.0.0
|
||||
prettier: 2.8.1
|
||||
prettier-plugin-astro: ^0.7.1
|
||||
prettier-plugin-astro: ^0.7.2
|
||||
prettier-plugin-tailwindcss: ^0.2.1
|
||||
tailwind: ^4.0.0
|
||||
tailwindcss: ^3.2.4
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
---
|
||||
const { schemaOrg } = Astro.props;
|
||||
---
|
||||
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<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="canonical" href="https://xhyrom.me"/>
|
||||
<link rel="canonical" href="https://xhyrom.me" />
|
||||
<meta name="title" content="xHyroM" />
|
||||
<meta name="description" content="I'm Hyro :) o/" />
|
||||
<meta name="keywords" content="xhyrom developer dev hyro hyrousek"/>
|
||||
<meta name="keywords" content="xhyrom developer dev hyro hyrousek" />
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
|
|
@ -25,6 +29,12 @@
|
|||
|
||||
<!-- 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'"
|
||||
/>
|
||||
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'"
|
||||
/>
|
||||
|
||||
{
|
||||
schemaOrg && (
|
||||
<script type="application/ld+json" set:html={JSON.stringify(schemaOrg)} />
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
const url = Astro.url.pathname;
|
||||
const { title } = Astro.props;
|
||||
const { title, date } = Astro.props;
|
||||
---
|
||||
|
||||
<meta charset="UTF-8" />
|
||||
|
|
@ -9,10 +9,10 @@ const { title } = Astro.props;
|
|||
<!-- Primary Meta Tags -->
|
||||
<title>xHyroM</title>
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<link rel="canonical" href={`https://xhyrom.me${url}`}/>
|
||||
<link rel="canonical" href={`https://xhyrom.me${url}`} />
|
||||
<meta name="title" content="xHyroM" />
|
||||
<meta name="description" content={title} />
|
||||
<meta name="keywords" content="xhyrom developer dev hyro hyrousek"/>
|
||||
<meta name="keywords" content="xhyrom developer dev hyro hyrousek" />
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
|
|
@ -30,6 +30,36 @@ const { title } = Astro.props;
|
|||
|
||||
<!-- 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'"
|
||||
/>
|
||||
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'"
|
||||
/>
|
||||
|
||||
<script
|
||||
type="application/ld+json"
|
||||
set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BlogPosting",
|
||||
mainEntityOfPage: {
|
||||
"@type": "WebPage",
|
||||
"@id": `https://xhyrom.me${url}`,
|
||||
},
|
||||
headline: title,
|
||||
description: title,
|
||||
image: "https://xhyrom.me/banner.png",
|
||||
author: {
|
||||
"@type": "Person",
|
||||
name: "xHyroM",
|
||||
url: "https://xhyrom.me",
|
||||
},
|
||||
publisher: {
|
||||
"@type": "Person",
|
||||
name: "xHyroM",
|
||||
logo: {
|
||||
"@type": "ImageObject",
|
||||
url: "https://xhyrom.me/favicon.ico",
|
||||
},
|
||||
},
|
||||
datePublished: new Date(date).toISOString().split("T")[0],
|
||||
dateModified: new Date(date).toISOString().split("T")[0],
|
||||
})}
|
||||
></script>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ import DefaultHead from "../components/widgets/Head.astro";
|
|||
const date = new Date();
|
||||
|
||||
const fireworks =
|
||||
(date.getMonth() === 11 && date.getDate() === 31) ||
|
||||
(date.getMonth() === 0 && date.getDate() <= 3);
|
||||
(date.getMonth() === 11 && date.getDate() === 31) ||
|
||||
(date.getMonth() === 0 && date.getDate() <= 3);
|
||||
const snow =
|
||||
(date.getMonth() === 11 && date.getDate() === 10) ||
|
||||
(date.getMonth() === 0 && date.getDate() <= 3);
|
||||
(date.getMonth() === 11 && date.getDate() === 10) ||
|
||||
(date.getMonth() === 0 && date.getDate() <= 3);
|
||||
|
||||
const { head } = Astro.props;
|
||||
const Head = head || DefaultHead;
|
||||
|
|
@ -18,30 +18,28 @@ const Head = head || DefaultHead;
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="sk-SK">
|
||||
<head>
|
||||
<Head {...Astro.props} />
|
||||
</head>
|
||||
<body class="overflow-x-hidden bg-dark font-sans">
|
||||
<slot />
|
||||
<div
|
||||
class="fireworks-container absolute top-0 left-0 z-[-1000] h-full w-full"
|
||||
>
|
||||
</div>
|
||||
<script>
|
||||
import "../scripts/menu.js";
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style is:global>
|
||||
<head>
|
||||
<Head {...Astro.props} />
|
||||
</head>
|
||||
<body class="overflow-x-hidden bg-dark font-sans">
|
||||
<slot />
|
||||
<div
|
||||
class="fireworks-container absolute top-0 left-0 z-[-1000] h-full w-full"
|
||||
>
|
||||
</div>
|
||||
<script>
|
||||
import "../scripts/menu.js";
|
||||
</script>
|
||||
</body><style is:global>
|
||||
::-webkit-scrollbar {
|
||||
width: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 6px solid rgba(0, 0, 0, 0);
|
||||
background-clip: padding-box;
|
||||
border-radius: 9999px;
|
||||
background-color: #aaaaaa;
|
||||
border: 6px solid rgba(0, 0, 0, 0);
|
||||
background-clip: padding-box;
|
||||
border-radius: 9999px;
|
||||
background-color: #aaaaaa;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,30 +2,31 @@
|
|||
import PostHead from "../../components/widgets/blog/PostHead.astro";
|
||||
import Container from "../../components/atoms/Container.astro";
|
||||
import Navbar from "../../components/widgets/Navbar.astro";
|
||||
import Layout from "../Layout.astro"
|
||||
import Layout from "../Layout.astro";
|
||||
|
||||
export interface Props {
|
||||
content: {
|
||||
title: string;
|
||||
};
|
||||
content: {
|
||||
title: string;
|
||||
date: string;
|
||||
};
|
||||
}
|
||||
|
||||
const {
|
||||
content: { title },
|
||||
content: { title, date },
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<Layout head={PostHead} title={title}>
|
||||
<Navbar />
|
||||
<h1 class="text-white text-5xl w-full text-center py-32 font-extrabold">
|
||||
{title}
|
||||
</h1>
|
||||
<Layout head={PostHead} title={title} date={date}>
|
||||
<Navbar />
|
||||
<h1 class="text-white text-5xl w-full text-center py-32 font-extrabold">
|
||||
{title}
|
||||
</h1>
|
||||
|
||||
<Container>
|
||||
<main class="text-white text-2xl prose">
|
||||
<article>
|
||||
<slot />
|
||||
</article>
|
||||
</main>
|
||||
</Container>
|
||||
</Layout>
|
||||
<Container>
|
||||
<main class="text-white text-2xl prose">
|
||||
<article>
|
||||
<slot />
|
||||
</article>
|
||||
</main>
|
||||
</Container>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,21 @@ import Hero from "../components/widgets/index/Hero.astro";
|
|||
import Navbar from "../components/widgets/Navbar.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Navbar />
|
||||
<Hero />
|
||||
<Layout
|
||||
schemaOrg={{
|
||||
"@context": "https://schema.org/",
|
||||
"@type": "Person",
|
||||
name: "xHyroM",
|
||||
url: "https://xhyrom.me",
|
||||
image: "https://xhyrom.me/favicon.ico",
|
||||
sameAs: [
|
||||
"https://twitter.com/hyrousek",
|
||||
"https://instagram.com/hyro.dev",
|
||||
"https://github.com/xHyroM",
|
||||
],
|
||||
jobTitle: "Developer",
|
||||
}}
|
||||
>
|
||||
<Navbar />
|
||||
<Hero />
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -4,150 +4,155 @@ import Navbar from "../components/widgets/Navbar.astro";
|
|||
import Container from "../components/atoms/Container.astro";
|
||||
|
||||
interface Project {
|
||||
name: string;
|
||||
link: string;
|
||||
desc: string;
|
||||
stats?: {
|
||||
forks: number;
|
||||
stars: number;
|
||||
};
|
||||
name: string;
|
||||
link: string;
|
||||
desc: string;
|
||||
stats?: {
|
||||
forks: number;
|
||||
stars: number;
|
||||
};
|
||||
}
|
||||
|
||||
const projects: Project[] = [
|
||||
{
|
||||
name: "HyLib",
|
||||
link: "https://github.com/xHyroM/HyLib",
|
||||
desc: "Source code for HyLib, a paper plugin and powerful library.",
|
||||
},
|
||||
{
|
||||
name: "HyChat",
|
||||
link: "https://github.com/xHyroM/HyChat",
|
||||
desc: "Source code for HyChat, a paper plugin.",
|
||||
},
|
||||
{
|
||||
name: "HyX",
|
||||
link: "https://github.com/xHyroM/HyX",
|
||||
desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, quaerat.",
|
||||
},
|
||||
{
|
||||
name: "Mashe",
|
||||
link: "https://github.com/xHyroM/mashe",
|
||||
desc: "Simple, fast, and easy to use Event Handling for Java.",
|
||||
},
|
||||
{
|
||||
name: "Mumblum",
|
||||
link: "https://github.com/xHyroM/mumblum",
|
||||
desc: "Mumblum is a simple, modern discord bot in JDA.",
|
||||
},
|
||||
{
|
||||
name: "setup-bun",
|
||||
link: "https://github.com/xHyroM/setup-bun",
|
||||
desc: "Set up your GitHub Actions workflow with a specific version of Bun.",
|
||||
},
|
||||
{
|
||||
name: "Roles Bot",
|
||||
link: "https://github.com/xHyroM/roles-bot",
|
||||
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.",
|
||||
},
|
||||
{
|
||||
name: "hykord",
|
||||
link: "https://github.com/xHyroM/hykord",
|
||||
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.",
|
||||
},
|
||||
{
|
||||
name: "HyLib",
|
||||
link: "https://github.com/xHyroM/HyLib",
|
||||
desc: "Source code for HyLib, a paper plugin and powerful library.",
|
||||
},
|
||||
{
|
||||
name: "HyChat",
|
||||
link: "https://github.com/xHyroM/HyChat",
|
||||
desc: "Source code for HyChat, a paper plugin.",
|
||||
},
|
||||
{
|
||||
name: "HyX",
|
||||
link: "https://github.com/xHyroM/HyX",
|
||||
desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, quaerat.",
|
||||
},
|
||||
{
|
||||
name: "Mashe",
|
||||
link: "https://github.com/xHyroM/mashe",
|
||||
desc: "Simple, fast, and easy to use Event Handling for Java.",
|
||||
},
|
||||
{
|
||||
name: "Mumblum",
|
||||
link: "https://github.com/xHyroM/mumblum",
|
||||
desc: "Mumblum is a simple, modern discord bot in JDA.",
|
||||
},
|
||||
{
|
||||
name: "setup-bun",
|
||||
link: "https://github.com/xHyroM/setup-bun",
|
||||
desc: "Set up your GitHub Actions workflow with a specific version of Bun.",
|
||||
},
|
||||
{
|
||||
name: "Roles Bot",
|
||||
link: "https://github.com/xHyroM/roles-bot",
|
||||
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.",
|
||||
},
|
||||
{
|
||||
name: "hykord",
|
||||
link: "https://github.com/xHyroM/hykord",
|
||||
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.",
|
||||
},
|
||||
];
|
||||
|
||||
for (const project of projects) {
|
||||
const repository = await (
|
||||
await fetch(`https://api.github.com/repos/${project.link.slice(19)}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${import.meta.env.GITHUB_ACCESS_TOKEN}`,
|
||||
},
|
||||
})
|
||||
).json();
|
||||
const repository = await (
|
||||
await fetch(`https://api.github.com/repos/${project.link.slice(19)}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${import.meta.env.GITHUB_ACCESS_TOKEN}`,
|
||||
},
|
||||
})
|
||||
).json();
|
||||
|
||||
project.stats = {
|
||||
forks: repository.forks,
|
||||
stars: repository.stargazers_count,
|
||||
};
|
||||
project.stats = {
|
||||
forks: repository.forks,
|
||||
stars: repository.stargazers_count,
|
||||
};
|
||||
}
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Navbar />
|
||||
<h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
|
||||
Projects
|
||||
</h1>
|
||||
<Layout
|
||||
schemaOrg={{
|
||||
"@context": "https://schema.org/",
|
||||
"@type": "ItemList",
|
||||
itemListElement: projects.map((project, i) => ({
|
||||
"@type": "ListItem",
|
||||
position: i + 1,
|
||||
name: project.name,
|
||||
url: project.link,
|
||||
})),
|
||||
}}
|
||||
>
|
||||
<Navbar />
|
||||
<h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
|
||||
Projects
|
||||
</h1>
|
||||
|
||||
<Container>
|
||||
<main class="flex flex-wrap justify-center gap-12">
|
||||
{
|
||||
projects.map((project) => (
|
||||
<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="mb-4 break-words text-3xl font-bold text-white">
|
||||
{project.name}
|
||||
</h2>
|
||||
<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="h-[21px] w-[21px] translate-y-[1px]"
|
||||
/>
|
||||
<p>{project.stats!.stars}</p>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
{" "}
|
||||
<img
|
||||
src="/icons/code-fork-solid.svg"
|
||||
alt=""
|
||||
class="h-[21px] w-[21px] translate-y-[1px]"
|
||||
/>
|
||||
<p>{project.stats!.forks}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Container>
|
||||
<main class="flex flex-wrap justify-center gap-12">
|
||||
{
|
||||
projects.map((project) => (
|
||||
<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="mb-4 break-words text-3xl font-bold text-white">
|
||||
{project.name}
|
||||
</h2>
|
||||
<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="h-[21px] w-[21px] translate-y-[1px]"
|
||||
/>
|
||||
<p>{project.stats!.stars}</p>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
{" "}
|
||||
<img
|
||||
src="/icons/code-fork-solid.svg"
|
||||
alt=""
|
||||
class="h-[21px] w-[21px] translate-y-[1px]"
|
||||
/>
|
||||
<p>{project.stats!.forks}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mb-6 break-all text-neutral-300">
|
||||
{project.desc}
|
||||
</p>
|
||||
<div>
|
||||
<a
|
||||
href={project.link}
|
||||
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 mt-[1px] h-[23px] w-5"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href={project.link}
|
||||
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="mr-2 h-6 w-5"
|
||||
alt=""
|
||||
/>
|
||||
Docs{" "}
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
))
|
||||
}
|
||||
</main>
|
||||
</Container>
|
||||
<p class="mb-6 break-all text-neutral-300">{project.desc}</p>
|
||||
<div>
|
||||
<a
|
||||
href={project.link}
|
||||
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 mt-[1px] h-[23px] w-5"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href={project.link}
|
||||
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="mr-2 h-6 w-5" alt="" />
|
||||
Docs{" "}
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
))
|
||||
}
|
||||
</main>
|
||||
</Container>
|
||||
</Layout>
|
||||
|
|
|
|||
Loading…
Reference in a new issue