refactor: improve seo

logto-io · Oct 28, 2024 · eaa560e · eaa560e
1 parent 58f8172
commit eaa560e
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 11 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,16 +1,21 @@
 import { defineConfig } from 'astro/config';
 import rehypeMermaid from 'rehype-mermaid';
 import { rehypeShiki } from '@astrojs/markdown-remark';
+import sitemap from '@astrojs/sitemap';
 import mdx from '@astrojs/mdx';
 
 // https://astro.build/config
 export default defineConfig({
+  site: 'https://auth.wiki',
+  build: {
+    format: 'file',
+  },
   markdown: {
     rehypePlugins: [
       [rehypeMermaid, { mermaidConfig: { theme: 'dark' } }],
       [rehypeShiki, { theme: 'one-dark-pro' }]
     ],
     syntaxHighlight: false
   },
-  integrations: [mdx({})]
+  integrations: [mdx(), sitemap()]
 });
diff --git a/package.json b/package.json
@@ -16,6 +16,8 @@
     "@astrojs/check": "^0.9.1",
     "@astrojs/markdown-remark": "^5.3.0",
     "@astrojs/mdx": "^3.1.8",
+    "@astrojs/sitemap": "^3.2.1",
+    "@astrolib/seo": "1.0.0-beta.8",
     "astro": "^4.13.1",
     "playwright": "^1.48.2",
     "rehype-mermaid": "^3.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,20 +1,34 @@
 ---
+import { AstroSeo } from "@astrolib/seo";
+
 type Props = {
   title?: string;
   description?: string;
 };
 
-const { title, description } = Astro.props;
+const { props } = Astro;
+
+const title = props.title ? `${props.title} · Auth Wiki` : "Auth Wiki";
+const description =
+  props.description ??
+  "Auth Wiki is a comprehensive collection of articles, tutorials, and resources about authentication and authorization. Learn about OAuth 2.0, OpenID Connect, SAML, and more.";
+const canonical = new URL(Astro.url.pathname, Astro.site).href;
 ---
 
 <!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta
-      name="description"
-      content={description ??
-        "Auth Wiki is a comprehensive collection of articles, tutorials, and resources about authentication and authorization. Learn about OAuth 2.0, OpenID Connect, SAML, and more."}
+    <AstroSeo
+      title={title}
+      description={description}
+      canonical={canonical}
+      openGraph={{
+        title,
+        description,
+        url: canonical,
+        site_name: "Auth Wiki",
+      }}
     />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
@@ -27,11 +41,7 @@ const { title, description } = Astro.props;
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <meta name="generator" content={Astro.generator} />
-    <title>{title ? `${title} · Auth Wiki` : "Auth Wiki"}</title>
-    <style>
-      /* Load fonts */
-      @import url("https://fonts.googleapis.com/css2?family=Cantata+One&display=swap");
-    </style>
+    <link rel="sitemap" href="/sitemap-index.xml" />
   </head>
 
   <body>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -57,6 +57,8 @@ const sections = articles
   </main>
 
   <style>
+    /* Load fonts */
+    @import url("https://fonts.googleapis.com/css2?family=Cantata+One&display=swap");
     html,
     body {
       overflow-x: hidden;

diff --git a/src/pages/robots.txt.ts b/src/pages/robots.txt.ts
@@ -0,0 +1,13 @@
+import type { APIRoute } from 'astro';
+
+const getRobotsTxt = (sitemapURL: URL) => `
+User-agent: *
+Allow: /
+
+Sitemap: ${sitemapURL.href}
+`;
+
+export const GET: APIRoute = ({ site }) => {
+  const sitemapURL = new URL('sitemap-index.xml', site);
+  return new Response(getRobotsTxt(sitemapURL));
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -57,6 +57,8 @@ const sections = articles @@
       </main>
       <style>
+        /* Load fonts */
+        @import url("https://fonts.googleapis.com/css2?family=Cantata+One&display=swap");
         html,
         body {
           overflow-x: hidden;
@@ Expand Down @@