use Astro.site

Author: eric-burel

docs/tutorialkit.dev/src/content/docs/guides/deployment.mdx

@@ -36,12 +36,13 @@ You can learn more about the build process in the [Astro documentation](https://
 
 ## Environment variables
 
-The [`BASE_URL`](https://docs.astro.build/en/guides/environment-variables/#default-environment-variables) environment variable should point to your website's absolute URL.
+The [`site`](https://docs.astro.build/fr/reference/configuration-reference/#site) configuration should point to your website's absolute URL.
 This will allow to compute absolute URLs for SEO metadata.
 
 Example:
-```
-BASE_URL="https://tutorialkit.dev"
+```json
+// astro.config.mjs
+site:"https://tutorialkit.dev"
 ```
 
 ## Headers configuration

packages/astro/src/default/components/MetaTags.astro

@@ -8,15 +8,16 @@ interface Props {
   meta?: MetaTagsConfig;
 }
 const { meta = {} } = Astro.props;
+const site = Astro.site?.toString();
 let imageUrl;
 if (meta.image) {
-  imageUrl = readPublicImage(meta.image);
+  imageUrl = readPublicImage(meta.image, site);
   if (!imageUrl) {
     console.warn(`Image ${meta.image} not found in "/public" folder`);
   }
 }
-imageUrl ??= readLogoFile();
-const faviconUrl = readFaviconFile();
+imageUrl ??= readLogoFile('logo', site);
+const faviconUrl = readFaviconFile('favicon', site);
 ---
 
 <meta charset="UTF-8" />

packages/astro/src/default/utils/favicon.ts

@@ -1,6 +1,6 @@
 import { readPublicImage } from './publicImage';
 
-export function readFaviconFile(faviconPrefix: string = 'favicon') {
+export function readFaviconFile(faviconPrefix: string = 'favicon', site?: string) {
   const faviconFilename = `${faviconPrefix}.svg`;
-  return readPublicImage(faviconFilename);
+  return readPublicImage(faviconFilename, site);
 }

packages/astro/src/default/utils/logo.ts

@@ -1,12 +1,12 @@
 import { LOGO_EXTENSIONS } from './constants';
 import { readPublicImage } from './publicImage';
 
-export function readLogoFile(logoPrefix: string = 'logo') {
+export function readLogoFile(logoPrefix: string = 'logo', site?: string) {
   let logo;
 
   for (const logoExt of LOGO_EXTENSIONS) {
     const logoFilename = `${logoPrefix}.${logoExt}`;
-    logo = readPublicImage(logoFilename);
+    logo = readPublicImage(logoFilename, site);
 
     if (logo) {
       break;

packages/astro/src/default/utils/publicImage.ts

@@ -2,12 +2,18 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { joinPaths } from './url';
 
-export function readPublicImage(filename: string) {
+export function readPublicImage(filename: string, site?: string) {
   let image;
   const exists = fs.existsSync(path.join('public', filename));
 
-  if (exists) {
-    image = joinPaths(import.meta.env.BASE_URL, filename);
+  if (!exists) {
+    return;
+  }
+
+  image = joinPaths(import.meta.env.BASE_URL, filename);
+
+  if (site) {
+    image = joinPaths(site, image);
   }
 
   return image;