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 2023-02-25 11:01:29 +01:00
parent 84a249e4de
commit 8e336b8bd7
9 changed files with 263 additions and 194 deletions

11
.prettierrc.cjs Normal file
View file

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

View file

@ -27,7 +27,7 @@
"devDependencies": { "devDependencies": {
"@types/html-minifier": "^4.0.2", "@types/html-minifier": "^4.0.2",
"prettier": "2.8.1", "prettier": "2.8.1",
"prettier-plugin-astro": "^0.7.1", "prettier-plugin-astro": "^0.7.2",
"prettier-plugin-tailwindcss": "^0.2.1" "prettier-plugin-tailwindcss": "^0.2.1"
} }
} }

View file

@ -13,7 +13,7 @@ specifiers:
fireworks-js: ^2.10.0 fireworks-js: ^2.10.0
html-minifier: ^4.0.0 html-minifier: ^4.0.0
prettier: 2.8.1 prettier: 2.8.1
prettier-plugin-astro: ^0.7.1 prettier-plugin-astro: ^0.7.2
prettier-plugin-tailwindcss: ^0.2.1 prettier-plugin-tailwindcss: ^0.2.1
tailwind: ^4.0.0 tailwind: ^4.0.0
tailwindcss: ^3.2.4 tailwindcss: ^3.2.4

View file

@ -1,13 +1,17 @@
---
const { schemaOrg } = Astro.props;
---
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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" />
<link rel="canonical" href="https://xhyrom.me"/> <link rel="canonical" href="https://xhyrom.me" />
<meta name="title" content="xHyroM" /> <meta name="title" content="xHyroM" />
<meta name="description" content="I'm Hyro :) o/" /> <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 --> <!-- Open Graph / Facebook -->
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
@ -25,6 +29,12 @@
<!-- CSP --> <!-- CSP -->
<meta <meta
http-equiv="Content-Security-Policy" 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'" 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)} />
)
}

View file

@ -1,6 +1,6 @@
--- ---
const url = Astro.url.pathname; const url = Astro.url.pathname;
const { title } = Astro.props; const { title, date } = Astro.props;
--- ---
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -9,10 +9,10 @@ const { title } = Astro.props;
<!-- 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" />
<link rel="canonical" href={`https://xhyrom.me${url}`}/> <link rel="canonical" href={`https://xhyrom.me${url}`} />
<meta name="title" content="xHyroM" /> <meta name="title" content="xHyroM" />
<meta name="description" content={title} /> <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 --> <!-- Open Graph / Facebook -->
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
@ -30,6 +30,36 @@ const { title } = Astro.props;
<!-- CSP --> <!-- CSP -->
<meta <meta
http-equiv="Content-Security-Policy" 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'" 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>

View file

@ -6,11 +6,11 @@ import DefaultHead from "../components/widgets/Head.astro";
const date = new Date(); const date = new Date();
const fireworks = const fireworks =
(date.getMonth() === 11 && date.getDate() === 31) || (date.getMonth() === 11 && date.getDate() === 31) ||
(date.getMonth() === 0 && date.getDate() <= 3); (date.getMonth() === 0 && date.getDate() <= 3);
const snow = const snow =
(date.getMonth() === 11 && date.getDate() === 10) || (date.getMonth() === 11 && date.getDate() === 10) ||
(date.getMonth() === 0 && date.getDate() <= 3); (date.getMonth() === 0 && date.getDate() <= 3);
const { head } = Astro.props; const { head } = Astro.props;
const Head = head || DefaultHead; const Head = head || DefaultHead;
@ -18,30 +18,28 @@ const Head = head || DefaultHead;
<!DOCTYPE html> <!DOCTYPE html>
<html lang="sk-SK"> <html lang="sk-SK">
<head> <head>
<Head {...Astro.props} /> <Head {...Astro.props} />
</head> </head>
<body class="overflow-x-hidden bg-dark font-sans"> <body class="overflow-x-hidden bg-dark font-sans">
<slot /> <slot />
<div <div
class="fireworks-container absolute top-0 left-0 z-[-1000] h-full w-full" class="fireworks-container absolute top-0 left-0 z-[-1000] h-full w-full"
> >
</div> </div>
<script> <script>
import "../scripts/menu.js"; import "../scripts/menu.js";
</script> </script>
</body> </body><style is:global>
</html>
<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>
</html>

View file

@ -2,30 +2,31 @@
import PostHead from "../../components/widgets/blog/PostHead.astro"; import PostHead from "../../components/widgets/blog/PostHead.astro";
import Container from "../../components/atoms/Container.astro"; import Container from "../../components/atoms/Container.astro";
import Navbar from "../../components/widgets/Navbar.astro"; import Navbar from "../../components/widgets/Navbar.astro";
import Layout from "../Layout.astro" import Layout from "../Layout.astro";
export interface Props { export interface Props {
content: { content: {
title: string; title: string;
}; date: string;
};
} }
const { const {
content: { title }, content: { title, date },
} = Astro.props; } = Astro.props;
--- ---
<Layout head={PostHead} title={title}> <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="text-white text-5xl w-full text-center py-32 font-extrabold">
{title} {title}
</h1> </h1>
<Container> <Container>
<main class="text-white text-2xl prose"> <main class="text-white text-2xl prose">
<article> <article>
<slot /> <slot />
</article> </article>
</main> </main>
</Container> </Container>
</Layout> </Layout>

View file

@ -4,7 +4,21 @@ import Hero from "../components/widgets/index/Hero.astro";
import Navbar from "../components/widgets/Navbar.astro"; import Navbar from "../components/widgets/Navbar.astro";
--- ---
<Layout> <Layout
<Navbar /> schemaOrg={{
<Hero /> "@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> </Layout>

View file

@ -4,150 +4,155 @@ import Navbar from "../components/widgets/Navbar.astro";
import Container from "../components/atoms/Container.astro"; import Container from "../components/atoms/Container.astro";
interface Project { interface Project {
name: string; name: string;
link: string; link: string;
desc: string; desc: string;
stats?: { stats?: {
forks: number; forks: number;
stars: number; stars: number;
}; };
} }
const projects: Project[] = [ const projects: Project[] = [
{ {
name: "HyLib", name: "HyLib",
link: "https://github.com/xHyroM/HyLib", link: "https://github.com/xHyroM/HyLib",
desc: "Source code for HyLib, a paper plugin and powerful library.", desc: "Source code for HyLib, a paper plugin and powerful library.",
}, },
{ {
name: "HyChat", name: "HyChat",
link: "https://github.com/xHyroM/HyChat", link: "https://github.com/xHyroM/HyChat",
desc: "Source code for HyChat, a paper plugin.", desc: "Source code for HyChat, a paper plugin.",
}, },
{ {
name: "HyX", name: "HyX",
link: "https://github.com/xHyroM/HyX", link: "https://github.com/xHyroM/HyX",
desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, quaerat.", desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, quaerat.",
}, },
{ {
name: "Mashe", name: "Mashe",
link: "https://github.com/xHyroM/mashe", link: "https://github.com/xHyroM/mashe",
desc: "Simple, fast, and easy to use Event Handling for Java.", desc: "Simple, fast, and easy to use Event Handling for Java.",
}, },
{ {
name: "Mumblum", name: "Mumblum",
link: "https://github.com/xHyroM/mumblum", link: "https://github.com/xHyroM/mumblum",
desc: "Mumblum is a simple, modern discord bot in JDA.", desc: "Mumblum is a simple, modern discord bot in JDA.",
}, },
{ {
name: "setup-bun", name: "setup-bun",
link: "https://github.com/xHyroM/setup-bun", link: "https://github.com/xHyroM/setup-bun",
desc: "Set up your GitHub Actions workflow with a specific version of Bun.", desc: "Set up your GitHub Actions workflow with a specific version of Bun.",
}, },
{ {
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 ( const repository = await (
await fetch(`https://api.github.com/repos/${project.link.slice(19)}`, { await fetch(`https://api.github.com/repos/${project.link.slice(19)}`, {
headers: { headers: {
Authorization: `Bearer ${import.meta.env.GITHUB_ACCESS_TOKEN}`, 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 /> schemaOrg={{
<h1 class="w-full py-32 text-center text-5xl font-extrabold text-white"> "@context": "https://schema.org/",
Projects "@type": "ItemList",
</h1> 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> <Container>
<main class="flex flex-wrap justify-center gap-12"> <main class="flex flex-wrap justify-center gap-12">
{ {
projects.map((project) => ( 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"> <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="mb-4 break-words text-3xl font-bold text-white"> <h2 class="mb-4 break-words text-3xl font-bold text-white">
{project.name} {project.name}
</h2> </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="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="h-[21px] w-[21px] translate-y-[1px]" class="h-[21px] w-[21px] translate-y-[1px]"
/> />
<p>{project.stats!.stars}</p> <p>{project.stats!.stars}</p>
</div> </div>
<div class="flex gap-1"> <div class="flex gap-1">
{" "} {" "}
<img <img
src="/icons/code-fork-solid.svg" src="/icons/code-fork-solid.svg"
alt="" alt=""
class="h-[21px] w-[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="mb-6 break-all text-neutral-300"> <p class="mb-6 break-all text-neutral-300">{project.desc}</p>
{project.desc} <div>
</p> <a
<div> href={project.link}
<a 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]"
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
GitHub{" "} src="/icons/arrow-up-right.svg"
<img class="ml-2 mt-[1px] h-[23px] w-5"
src="/icons/arrow-up-right.svg" alt=""
class="ml-2 mt-[1px] h-[23px] w-5" />
alt="" </a>
/> <a
</a> href={project.link}
<a 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"
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{" "}
<img </a>
src="/icons/book-open.svg" </div>
class="mr-2 h-6 w-5" </section>
alt="" ))
/> }
Docs{" "} </main>
</a> </Container>
</div>
</section>
))
}
</main>
</Container>
</Layout> </Layout>