separate document title and meta title, finalize default meta tags

eric-burel · eric-burel · commit a9c633d3cfa5 · 2024-09-30T16:20:12.000+02:00
diff --git a/docs/tutorialkit.dev/src/content/docs/guides/deployment.mdx b/docs/tutorialkit.dev/src/content/docs/guides/deployment.mdx
@@ -40,7 +40,7 @@ The [`site`](https://docs.astro.build/fr/reference/configuration-reference/#site
 This will allow to compute absolute URLs for SEO metadata.
 
 Example:
-```json
+```js
 // astro.config.mjs
 site:"https://tutorialkit.dev"
 ```
diff --git a/packages/astro/src/default/components/MetaTags.astro b/packages/astro/src/default/components/MetaTags.astro
@@ -1,14 +1,12 @@
 ---
 import type { MetaTagsConfig } from '@tutorialkit/types';
-import { readFaviconFile } from '../utils/favicon';
 import { readLogoFile } from '../utils/logo';
 import { readPublicImage } from '../utils/publicImage';
 
 interface Props {
   meta?: MetaTagsConfig;
 }
 const { meta = {} } = Astro.props;
-const site = Astro.site?.toString();
 let imageUrl;
 if (meta.image) {
   imageUrl = readPublicImage(meta.image, true);
@@ -17,15 +15,12 @@ if (meta.image) {
   }
 }
 imageUrl ??= readLogoFile('logo', true);
-const faviconUrl = readFaviconFile('favicon', true);
 ---
 
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width" />
 <meta name="generator" content={Astro.generator} />
 {meta.description ? <meta name="description" content={meta.description} /> : null}
-{meta.title ? <title>{meta.title}</title> : null}
-{faviconUrl ? <link rel="icon" type="image/svg+xml" href={faviconUrl} /> : null}
 {/* open graph */}
 {meta.title ? <meta name="og:title" content={meta.title} /> : null}
 {meta.description ? <meta name="og:description" content={meta.description} /> : null}
diff --git a/packages/astro/src/default/layouts/Layout.astro b/packages/astro/src/default/layouts/Layout.astro
@@ -2,16 +2,21 @@
 import { ViewTransitions } from 'astro:transitions';
 import type { MetaTagsConfig } from '@tutorialkit/types';
 import MetaTags from '../components/MetaTags.astro';
+import { readPublicImage } from '../utils/publicImage';
 
 interface Props {
+  title: string;
   meta?: MetaTagsConfig;
 }
-const { meta } = Astro.props;
+const { title, meta } = Astro.props;
+const faviconUrl = readPublicImage('favicon.svg', true);
 ---
 
 <!doctype html>
 <html lang="en" transition:animate="none" class="h-full overflow-hidden">
   <head>
+    <title>{title}</title>
+    {faviconUrl ? <link rel="icon" type="image/svg+xml" href={faviconUrl} /> : null}
     <MetaTags meta={meta} />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
diff --git a/packages/astro/src/default/pages/[...slug].astro b/packages/astro/src/default/pages/[...slug].astro
@@ -16,12 +16,12 @@ type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 
 const { lesson, logoLink, navList, title } = Astro.props as Props;
 const meta = lesson.data?.meta || {};
-// Use lesson default title and a default description for SEO metadata
+// Use lesson's default title and a default description for SEO metadata
 meta.title ??= title;
 meta.description ??= 'A TutorialKit interactive lesson';
 ---
 
-<Layout meta={meta}>
+<Layout title={title} meta={meta}>
   <PageLoadingIndicator />
   <div id="previews-container"></div>
   <main class="max-w-full flex flex-col h-full overflow-hidden" data-swap-root>
diff --git a/packages/astro/src/default/utils/favicon.ts b/packages/astro/src/default/utils/favicon.ts
diff --git a/packages/astro/src/default/utils/publicImage.ts b/packages/astro/src/default/utils/publicImage.ts
@@ -16,6 +16,7 @@ export function readPublicImage(filename: string, absolute?: boolean) {
     const site = import.meta.env.SITE;
 
     if (!site) {
+      // the SITE env variable inherits the value from Astro.site configuration
       console.warn('Trying to compute an absolute file URL but Astro.site is not set.');
     } else {
       image = joinPaths(site, image);
diff --git a/packages/astro/src/default/utils/routes.ts b/packages/astro/src/default/utils/routes.ts
@@ -26,7 +26,6 @@ export async function generateStaticRoutes() {
             logoLink: tutorial.logoLink,
             navList: generateNavigationList(tutorial, import.meta.env.BASE_URL),
             title: `${part.data.title} / ${chapter.data.title} / ${lesson.data.title}`,
-            meta: lesson.data.meta,
             lesson: lesson as Lesson<AstroComponentFactory>,
           },
         } satisfies GetStaticPathsItem);
