✨(frontend) update meta title for docs page

AntoLC · AntoLC · commit 48d3738ec212 · 2024-09-05T13:26:49.000+02:00
We update the meta title for the docs page
with the title of the document.
It will be easier for the user
to identify the document in their browser tab,
in their bookmarks and history.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to
 - ✨Add image attachments with access control
 - ✨(frontend) Upload image to a document #211
 - ✨(frontend) Summary #223
+- ✨(frontend) update meta title for docs page #231
 
 ## Changed
 
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts
@@ -55,6 +55,10 @@ test.describe('Doc Create', () => {
       true,
     );
 
+    expect(await page.locator('title').textContent()).toMatch(
+      /My new doc - Docs/,
+    );
+
     const header = page.locator('header').first();
     await header.locator('h2').getByText('Docs').click();
 
diff --git a/src/frontend/apps/impress/src/pages/_app.tsx b/src/frontend/apps/impress/src/pages/_app.tsx
@@ -21,7 +21,12 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
     <>
       <Head>
         <title>{t('Docs')}</title>
-        <meta name="description" content={t('Docs Description')} />
+        <meta
+          name="description"
+          content={t(
+            'Docs: Your new companion to collaborate on documents efficiently, intuitively, and securely.',
+          )}
+        />
         <link rel="icon" href="/favicon.ico" sizes="any" />
       </Head>
       <AppProvider>{getLayout(<Component {...pageProps} />)}</AppProvider>
diff --git a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx b/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx
@@ -1,6 +1,7 @@
 import { Loader } from '@openfun/cunningham-react';
 import { useRouter as useNavigate } from 'next/navigation';
 import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 
 import { Box, Text } from '@/components';
 import { TextErrors } from '@/components/TextErrors';
@@ -33,6 +34,12 @@ const DocPage = ({ id }: DocProps) => {
   const { data: doc, isLoading, isError, error } = useDoc({ id });
   const navigate = useNavigate();
 
+  useEffect(() => {
+    if (doc?.title) {
+      document.title = `${doc.title} - Docs`;
+    }
+  }, [doc?.title]);
+
   if (isError && error) {
     if (error.status === 404) {
       navigate.replace(`/404`);
