fix: seo and assets base path

arthurfiorette · Sep 25, 2024 · a22142e · a22142e
1 parent 41eaeb9
commit a22142e
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 13 deletions.
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
@@ -43,7 +43,8 @@ jobs:
         run: pnpm build
         env:
           NODE_ENV: production
-          BASE_URL: ${{ github.event.repository.name }}
+          BASE_PATH: ${{ github.event.repository.name }}
+          BASE_URL: arthur.run
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2

diff --git a/astro.config.mjs b/astro.config.mjs
@@ -5,12 +5,12 @@ import sitemap from '@astrojs/sitemap';
 import compress from 'astro-compress';
 import robotsTxt from 'astro-robots-txt';
 import AstroPWA from '@vite-pwa/astro';
-import { BasePath, Url } from './src/utils/url';
+import { BasePath, PUBLIC_URL } from './src/utils/url';
 
 // https://astro.build/config
 export default defineConfig({
-  site: Url,
-  base: BasePath,
+  site: PUBLIC_URL.toString(),
+  base: `${PUBLIC_URL.pathname}/`,
   output: 'static',
   build: {
     format: 'file'

diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -1,12 +1,12 @@
 ---
-import { Url } from "../utils/url";
+import { PUBLIC_URL } from "../utils/url";
 ---
 
 <!doctype html>
 <meta charset="utf-8" />
-<title>Redirecting to {Url}</title>
+<title>Redirecting to {PUBLIC_URL}</title>
 <meta
   http-equiv="refresh"
-  content={`0; URL=${Url}`}
+  content={`0; URL=${PUBLIC_URL}`}
 />
-<link rel="canonical" href={Url} />
+<link rel="canonical" href={PUBLIC_URL} />
diff --git a/src/utils/seo.ts b/src/utils/seo.ts
@@ -1,14 +1,14 @@
 import type { Props } from 'astro-seo';
 import { pwaAssetsHead } from 'virtual:pwa-assets/head';
-import { Url } from './url';
+import { PUBLIC_URL } from './url';
 
 export const SeoProps: Props = {
   title: 'Risk Dice Roller',
   description:
     'A simple dice roller for the board game Risk. Roll the dice and see the results of your attack or defense.',
   openGraph: {
     basic: {
-      image: `${Url}/android-chrome-512.png`,
+      image: `${PUBLIC_URL}/android-chrome-512.png`,
       type: 'website',
       title: 'Risk Dice Roller'
     }

diff --git a/src/utils/url.ts b/src/utils/url.ts
@@ -1,3 +1,20 @@
-export const Domain = 'https://arthur.run';
-export const BasePath = process.env.BASE_URL || 'risk-dice';
-export const Url = `${Domain}/${BasePath}`;
+function replaceSlashes(url?: string) {
+  if (!url) {
+    return undefined;
+  }
+
+  if (url.startsWith('/')) {
+    url = url.replace('/', '');
+  }
+
+  if (url.endsWith('/')) {
+    url = url.replace('/', '');
+  }
+
+  return url;
+}
+
+const basePath = replaceSlashes(process.env.BASE_PATH) || 'risk-dice';
+const domain = replaceSlashes(process.env.BASE_URL) || 'https://localhost:4321';
+
+export const PUBLIC_URL = new URL(basePath, domain);