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

feat: add prettier-astro and schema.org

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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",
},
},
],
};

2
package.json
View file

@ -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"
}
}

2
pnpm-lock.yaml
View file

@ -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

14
src/components/widgets/Head.astro
View file

@ -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" />
@ -28,3 +32,9 @@
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)} />
)
}

36
src/components/widgets/blog/PostHead.astro
View file

@ -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" />
@ -33,3 +33,33 @@ const { title } = Astro.props;
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>

8
src/layouts/Layout.astro
View file

@ -30,10 +30,7 @@ const Head = head || DefaultHead;
<script>
import "../scripts/menu.js";
</script>
</body>
</html>
<style is:global>
</body><style is:global>
::-webkit-scrollbar {
width: 16px;
}
@ -44,4 +41,5 @@ const Head = head || DefaultHead;
border-radius: 9999px;
background-color: #aaaaaa;
}
</style>
</style>
</html>

7
src/layouts/blog/PostLayout.astro
View file

@ -2,20 +2,21 @@
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;
date: string;
};
}
const {
content: { title },
content: { title, date },
} = Astro.props;
---
<Layout head={PostHead} title={title}>
<Layout head={PostHead} title={title} date={date}>
<Navbar />
<h1 class="text-white text-5xl w-full text-center py-32 font-extrabold">
{title}

16
src/pages/index.astro
View file

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

23
src/pages/projects.astro
View file

@ -82,7 +82,18 @@ for (const project of projects) {
}
---
<Layout>
<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
@ -118,9 +129,7 @@ for (const project of projects) {
</div>
</div>
<p class="mb-6 break-all text-neutral-300">
{project.desc}
</p>
<p class="mb-6 break-all text-neutral-300">{project.desc}</p>
<div>
<a
href={project.link}
@ -137,11 +146,7 @@ for (const project of projects) {
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=""
/>
<img src="/icons/book-open.svg" class="mr-2 h-6 w-5" alt="" />
Docs{" "}
</a>
</div>