feat: add prettier-astro and schema.org

add schema.org schema to main page, projects page, every blbog post for better SEO

.prettierrc.cjs

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

package.json

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

pnpm-lock.yaml

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

src/components/widgets/Head.astro

@@ -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)} />
+  )
+}

src/components/widgets/blog/PostHead.astro

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

src/layouts/Layout.astro

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

src/layouts/blog/PostLayout.astro

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

src/pages/index.astro

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

src/pages/projects.astro

@@ -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">
+            <p class="mb-6 break-all text-neutral-300">{project.desc}</p>
-                            {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
+                <img src="/icons/book-open.svg" class="mr-2 h-6 w-5" alt="" />
-                                    src="/icons/book-open.svg"
-                                    class="mr-2 h-6 w-5"
-                                    alt=""
-                                />
                 Docs{" "}
               </a>
             </div>