✨ Generate a sitemap

fTrestour · Oct 26, 2024 · 0745028 · 0745028
1 parent a3d00f7
commit 0745028
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 10 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,2 @@
+SITE_URL=https://yourdomain.com/ # The base URL of the site you are building
+SITE_LANGUAGE=en # The language you are building your website into. It can be overriden on a per page basis
diff --git a/.gitignore b/.gitignore
@@ -100,7 +100,6 @@ web_modules/
 
 # dotenv environment variable files
 
-.env
 .env.development.local
 .env.test.local
 .env.production.local

diff --git a/README.md b/README.md
@@ -47,6 +47,9 @@ bun install
 
 ### Development
 
+Go to `.env` and set all the values properly.
+This file is commited with the others, so don't put any secrets in there.
+
 To start the development server, which watches for changes in your TypeScript and CSS files, run:
 
 ```bash
@@ -58,10 +61,8 @@ You are now ready to go!
 ## Todo
 
 - [ ] Imports validation?
-- [ ] Sitemap
-- [ ] robots.txt
 - [ ] analytics?
-- [ ] CI that makes a report on the built site diff?
+- [ ] CI that makes a report on the built site diff? Maybe use the sitemap?
 - [ ] Improve error handling for the build, make error messages foolproof
 - [ ] Handle 404
 - [ ] Improve default Home
diff --git a/biome.json b/biome.json
@@ -23,6 +23,9 @@
       "recommended": true,
       "nursery": {
         "useSortedClasses": "warn"
+      },
+      "complexity": {
+        "useLiteralKeys": "off"
       }
     }
   },

diff --git a/src/build.ts b/src/build.ts
@@ -1,21 +1,35 @@
 import { promises as fs } from "node:fs";
 import { join } from "node:path";
 import { Glob } from "bun";
+import { getEnv } from "./utils";
 
 async function renderPages() {
+  const { siteUrl } = getEnv();
+
   const glob = new Glob("**/*.tsx");
 
+  const builtFilenames = new Array<string>();
   const pages = "src/pages";
   for await (const path of glob.scan(pages)) {
     const file = join(pages, path);
 
     const { default: Page } = await import(file);
     const html = Page();
 
-    const outputFilePath = join("dist", path.replace(".tsx", ".html"));
-    await fs.mkdir(join(outputFilePath, ".."), { recursive: true });
-    await fs.writeFile(outputFilePath, html, "utf8");
+    const builtFilename = path.replace(".tsx", ".html");
+
+    builtFilenames.push(builtFilename);
+
+    await fs.mkdir(join("dist", builtFilename, ".."), { recursive: true });
+    await fs.writeFile(join("dist", builtFilename), html, "utf8");
   }
+
+  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  ${builtFilenames.map((filename) => `<url><loc>${siteUrl}${filename}</loc></url>`).join("\n  ")}
+</urlset>`;
+
+  await fs.writeFile(join("dist", "sitemap.xml"), sitemap, "utf8");
 }
 
 renderPages().catch(console.error);
diff --git a/src/layout.tsx b/src/layout.tsx
@@ -1,12 +1,14 @@
 import { Html, type PropsWithChildren } from "@kitajs/html";
+import { getEnv } from "./utils";
 
 export default function Layout(
-  props: PropsWithChildren<{ title: string; lang: string }>,
+  props: PropsWithChildren<{ title: string; lang?: string }>,
 ) {
+  const { siteLang } = getEnv();
   return (
     <>
       {"<!DOCTYPE html>"}
-      <html lang={props.lang}>
+      <html lang={props.lang ?? siteLang}>
         <head>
           <meta charset="UTF-8" />
           <meta

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -3,7 +3,7 @@ import Layout from "src/layout";
 
 export default function Home() {
   return (
-    <Layout title="Welcome to My Website" lang="en">
+    <Layout title="Welcome to My Website">
       <div class="flex min-h-screen flex-col items-center justify-center bg-gray-100">
         <h1 class="font-bold text-4xl">Welcome to My Website</h1>
       </div>

diff --git a/src/utils.ts b/src/utils.ts
@@ -0,0 +1,17 @@
+export function getEnv() {
+  const siteUrl = process.env["SITE_URL"];
+
+  if (!siteUrl) {
+    throw new Error("SITE_URL environment variable is missing");
+  }
+  if (!siteUrl.endsWith("/")) {
+    throw new Error("SITE_URL should finish with /");
+  }
+
+  const siteLang = process.env["SITE_LANGUAGE"];
+
+  return {
+    siteUrl,
+    siteLang,
+  };
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		SITE_URL=https://yourdomain.com/ # The base URL of the site you are building
		SITE_LANGUAGE=en # The language you are building your website into. It can be overriden on a per page basis