fix(frontend): simplify social meta url (#2958)

fix #2818
SocialGouv · Aug 28, 2020 · ec05d85 · ec05d85
1 parent 460533c
commit ec05d85
Show file tree

Hide file tree

Showing 28 changed files with 50 additions and 121 deletions.
diff --git a/packages/code-du-travail-frontend/next.config.js b/packages/code-du-travail-frontend/next.config.js
@@ -36,6 +36,9 @@ const nextConfig = {
       "https://siret2idcc.fabrique.social.gouv.fr/api/v2",
     API_URL: process.env.API_URL || "http://127.0.0.1:1337/api/v1",
     COMMIT: process.env.COMMIT,
+    FRONTEND_HOST:
+      `https://${process.env.FRONTEND_HOST}` ||
+      `http://localhost:${process.env.FRONTEND_PORT || 3000}`,
     PACKAGE_VERSION: process.env.VERSION || require("./package.json").version,
     PIWIK_SITE_ID: process.env.PIWIK_SITE_ID,
     PIWIK_URL: process.env.PIWIK_URL,

diff --git a/packages/code-du-travail-frontend/pages/_app.js b/packages/code-du-travail-frontend/pages/_app.js
@@ -5,6 +5,7 @@ import * as Sentry from "@sentry/browser";
 import { GlobalStyles, ThemeProvider } from "@socialgouv/cdtn-ui";
 import App from "next/app";
 import getConfig from "next/config";
+import Head from "next/head";
 import PropTypes from "prop-types";
 import React from "react";
 
@@ -62,12 +63,6 @@ export default class MyApp extends App {
         pageProps = { message: err.message, statusCode: 500 };
       }
     }
-    // pageUrl and ogImage are only defined on serverside request
-    // maybe this should be done at the page level to allow static optimization at the _app lvl
-    if (ctx.req) {
-      pageProps.pageUrl = `${ctx.req.protocol}://${ctx.req.headers.host}${ctx.req.path}`;
-      pageProps.ogImage = `${ctx.req.protocol}://${ctx.req.headers.host}/static/assets/img/social-preview.png`;
-    }
 
     return { pageProps };
   }
@@ -95,6 +90,12 @@ export default class MyApp extends App {
       return (
         <ThemeProvider>
           <>
+            <Head>
+              <meta
+                name="viewport"
+                content="width=device-width, initial-scale=1, shrink-to-fit=no"
+              />
+            </Head>
             <GlobalStyles />
             {pageProps.statusCode === 404 ? (
               <Custom404 />
@@ -109,6 +110,12 @@ export default class MyApp extends App {
       <React.StrictMode>
         <ThemeProvider>
           <>
+            <Head>
+              <meta
+                name="viewport"
+                content="width=device-width, initial-scale=1, shrink-to-fit=no"
+              />
+            </Head>
             <GlobalStyles />
             <A11y />
             <Component {...pageProps} />

diff --git a/packages/code-du-travail-frontend/pages/_document.js b/packages/code-du-travail-frontend/pages/_document.js
@@ -45,10 +45,6 @@ export default class MyDocument extends Document {
         <Head>
           <link rel="stylesheet" type="text/css" href="/static/fonts.css" />
           <meta charSet="utf-8" />
-          <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1, shrink-to-fit=no"
-          />
           <link rel="shortcut icon" href="/static/favicon.ico" />
           <script src="/static/polyfill.min.js" />
           <script src="/static/webcomponents-polyfill/loader.js" />

diff --git a/packages/code-du-travail-frontend/pages/a-propos.js b/packages/code-du-travail-frontend/pages/a-propos.js
@@ -14,13 +14,11 @@ import { FocusRoot } from "../src/a11y";
 import Metas from "../src/common/Metas";
 import { Layout } from "../src/layout/Layout";
 
-const About = ({ ogImage, pageUrl }) => (
+const About = () => (
   <Layout>
     <Metas
-      url={pageUrl}
       title="À propos - Code du travail numérique"
       description="Service public gratuit pour faciliter l'accès au droit du travail. Obtenez une réponse détaillée à vos questions."
-      image={ogImage}
     />
     <Section>
       <Container narrow>

diff --git a/packages/code-du-travail-frontend/pages/code-du-travail/[slug].js b/packages/code-du-travail-frontend/pages/code-du-travail/[slug].js
@@ -37,19 +37,12 @@ class Fiche extends React.Component {
       } = {
         _source: {},
       },
-      pageUrl,
-      ogImage,
     } = this.props;
 
     const fixedHtml = replaceArticlesRefs(html);
     return (
       <Layout>
-        <Metas
-          url={pageUrl}
-          title={title}
-          description={description}
-          image={ogImage}
-        />
+        <Metas title={title} description={description} />
         <Answer
           title={title}
           relatedItems={relatedItems}

diff --git a/packages/code-du-travail-frontend/pages/contribution/[slug].js b/packages/code-du-travail-frontend/pages/contribution/[slug].js
@@ -47,19 +47,12 @@ class PageContribution extends React.Component {
         _source: {},
       },
       content,
-      pageUrl,
-      ogImage,
     } = this.props;
 
     return (
       <div>
         <Layout>
-          <Metas
-            url={pageUrl}
-            title={title}
-            description={description}
-            image={ogImage}
-          />
+          <Metas title={title} description={description} />
           <Answer
             title={title}
             relatedItems={relatedItems}

diff --git a/packages/code-du-travail-frontend/pages/convention-collective/[slug].js b/packages/code-du-travail-frontend/pages/convention-collective/[slug].js
@@ -33,15 +33,13 @@ class ConventionCollective extends React.Component {
         <Answer emptyMessage="Cette convention collective n'a pas été trouvée" />
       );
     }
-    const { pageUrl, ogImage, convention } = this.props;
+    const { convention } = this.props;
     const { shortTitle, title } = convention;
     return (
       <Layout>
         <Metas
-          url={pageUrl}
           title={`Convention collective ${shortTitle}`}
           description={title}
-          image={ogImage}
         />
         <Answer
           breadcrumbs={[

diff --git a/packages/code-du-travail-frontend/pages/convention-collective/index.js b/packages/code-du-travail-frontend/pages/convention-collective/index.js
@@ -6,13 +6,11 @@ import Metas from "../../src/common/Metas";
 import ConventionForm from "../../src/conventions/Search";
 import { Layout } from "../../src/layout/Layout";
 
-const SearchConvention = ({ ogImage, pageUrl }) => (
+const SearchConvention = () => (
   <Layout currentPage="about">
     <Metas
-      url={pageUrl}
       title="Recherche de convention collective"
       description="Recherchez une convention collective par Entreprise, SIRET, Nom ou numéro IDCC."
-      image={ogImage}
     />
     <Section>
       <Container narrow>

diff --git a/packages/code-du-travail-frontend/pages/dossiers/[slug].js b/packages/code-du-travail-frontend/pages/dossiers/[slug].js
@@ -25,7 +25,7 @@ const {
   publicRuntimeConfig: { API_URL },
 } = getConfig();
 
-function DossierThematique({ dossier, ogImage, pageUrl }) {
+function DossierThematique({ dossier }) {
   const [filter, setFilter] = useState("");
 
   if (!dossier) {
@@ -40,10 +40,8 @@ function DossierThematique({ dossier, ogImage, pageUrl }) {
   return (
     <Layout>
       <Metas
-        url={pageUrl}
         title={title}
         description={metaDescription || description || title}
-        image={ogImage}
       />
       <Section>
         <Container narrow>

diff --git a/packages/code-du-travail-frontend/pages/droit-du-travail.js b/packages/code-du-travail-frontend/pages/droit-du-travail.js
@@ -18,13 +18,11 @@ import Hierarchy from "../src/droit-du-travail/Hierarchy";
 import Origins from "../src/droit-du-travail/Origins";
 import { Layout } from "../src/layout/Layout";
 
-const DroitDuTravail = ({ hash, ogImage, pageUrl }) => (
+const DroitDuTravail = ({ hash }) => (
   <Layout>
     <Metas
-      url={pageUrl}
       title="Le droit du travail - Code du travail numérique"
       description="Qu’est-ce que le droit du travail ?"
-      image={ogImage}
     />
     <Section>
       <Container>

diff --git a/packages/code-du-travail-frontend/pages/fiche-ministere-travail/[slug].js b/packages/code-du-travail-frontend/pages/fiche-ministere-travail/[slug].js
@@ -26,7 +26,7 @@ const buildAccordionSections = (sections) =>
       title: <h2>{title}</h2>,
     }));
 
-const Fiche = ({ data = { _source: {} }, anchor, pageUrl, ogImage }) => {
+const Fiche = ({ data = { _source: {} }, anchor }) => {
   const {
     _source: {
       breadcrumbs,
@@ -59,12 +59,7 @@ const Fiche = ({ data = { _source: {} }, anchor, pageUrl, ogImage }) => {
   const untitledSection = sections.find((section) => !section.anchor);
   return (
     <Layout>
-      <Metas
-        url={pageUrl}
-        title={title}
-        description={description}
-        image={ogImage}
-      />
+      <Metas title={title} description={description} />
       <StyledAnswer
         title={title}
         relatedItems={relatedItems}

diff --git a/packages/code-du-travail-frontend/pages/fiche-service-public/[slug].js b/packages/code-du-travail-frontend/pages/fiche-service-public/[slug].js
@@ -32,7 +32,7 @@ class Fiche extends React.Component {
   }
 
   render() {
-    const { data = { _source: {} }, pageUrl, ogImage } = this.props;
+    const { data = { _source: {} } } = this.props;
     const {
       _source: {
         breadcrumbs,
@@ -47,12 +47,7 @@ class Fiche extends React.Component {
     } = data;
     return (
       <Layout>
-        <Metas
-          url={pageUrl}
-          title={title}
-          description={description}
-          image={ogImage}
-        />
+        <Metas title={title} description={description} />
         <Answer
           title={title}
           relatedItems={relatedItems}

diff --git a/packages/code-du-travail-frontend/pages/glossaire/[slug].js b/packages/code-du-travail-frontend/pages/glossaire/[slug].js
@@ -21,14 +21,12 @@ const {
   publicRuntimeConfig: { API_URL },
 } = getConfig();
 
-function Term({ pageUrl, ogImage, term }) {
+function Term({ term }) {
   return (
     <Layout>
       <Metas
-        url={pageUrl}
         title={`${term.title} - Code du travail numérique`}
         description={term.definition}
-        image={ogImage}
       />
       <Section>
         <Container narrow>

diff --git a/packages/code-du-travail-frontend/pages/glossaire/index.js b/packages/code-du-travail-frontend/pages/glossaire/index.js
@@ -24,15 +24,13 @@ const {
 const subtitle =
   "Les définitions de ce glossaire, disponibles en surbrillance dans les textes des réponses, ont pour objectif d’améliorer la compréhension des termes juridiques. Elles ne se substituent pas à la définition juridique exacte de ces termes.";
 
-function Glossaire({ pageUrl, ogImage, glossary }) {
+function Glossaire({ glossary }) {
   const termsByLetters = getGlossaryLetters(glossary);
   return (
     <Layout>
       <Metas
-        url={pageUrl}
         title="Glossaire - Code du travail numérique"
         description="Retrouvez l'ensemble des termes utilisés fréquemment sur le code du travail numérique et leur explication"
-        image={ogImage}
       />
       <Section>
         <Container narrow>

diff --git a/packages/code-du-travail-frontend/pages/index.js b/packages/code-du-travail-frontend/pages/index.js
@@ -60,13 +60,11 @@ const selectedTools = [
   tools.find((tool) => tool.slug === "simulateur-embauche"),
 ];
 
-const Home = ({ pageUrl, ogImage, themes = [], highlights = [] }) => (
+const Home = ({ themes = [], highlights = [] }) => (
   <Layout currentPage="home" initialTitle="Code du travail numérique">
     <Metas
-      url={pageUrl}
       title="Code du travail numérique - Ministère du Travail"
       description="Posez votre question sur le droit du travail et obtenez une réponse personnalisée à vos questions (contrat de travail, congés payés, formation, démission, indemnités)."
-      image={ogImage}
     />
     <SearchHero />
     <Section>

diff --git a/packages/code-du-travail-frontend/pages/information/[slug].js b/packages/code-du-travail-frontend/pages/information/[slug].js
@@ -53,8 +53,6 @@ const processor = unified()
   });
 
 const Information = ({
-  pageUrl,
-  ogImage,
   information: {
     _source: {
       breadcrumbs,
@@ -126,12 +124,7 @@ const Information = ({
 
   return (
     <Layout>
-      <Metas
-        url={pageUrl}
-        title={title}
-        description={description}
-        image={ogImage}
-      />
+      <Metas title={title} description={description} />
       <Answer
         breadcrumbs={breadcrumbs}
         date={date}

diff --git a/packages/code-du-travail-frontend/pages/integration.js b/packages/code-du-travail-frontend/pages/integration.js
@@ -12,14 +12,12 @@ import { FocusRoot } from "../src/a11y";
 import Metas from "../src/common/Metas";
 import { Layout } from "../src/layout/Layout";
 
-export default function IntegrationPage({ pageUrl, ogImage }) {
+export default function IntegrationPage() {
   return (
     <Layout>
       <Metas
-        url={pageUrl}
         title="widget - Code du travail numérique"
         description="Intégrer le Code du travail numérique à votre site"
-        image={ogImage}
       />
 
       <Section>

diff --git a/packages/code-du-travail-frontend/pages/mentions-legales.js b/packages/code-du-travail-frontend/pages/mentions-legales.js
@@ -14,14 +14,12 @@ import { FocusRoot } from "../src/a11y";
 import Metas from "../src/common/Metas";
 import { Layout } from "../src/layout/Layout";
 
-const LegalPage = ({ pageUrl, ogImage }) => {
+const LegalPage = () => {
   return (
     <Layout>
       <Metas
-        url={pageUrl}
         title="Mentions légales - Code du travail numérique"
         description="Mentions légales du Code du travail numérique"
-        image={ogImage}
       />
 
       <Section>

diff --git a/packages/code-du-travail-frontend/pages/modeles-de-courriers/[slug].js b/packages/code-du-travail-frontend/pages/modeles-de-courriers/[slug].js
@@ -52,8 +52,6 @@ class ModeleCourrier extends React.Component {
         relatedItems,
         status,
       } = { _source: {} },
-      pageUrl,
-      ogImage,
     } = this.props;
     if (status === 404) {
       return <Answer emptyMessage="Modèle de document introuvable" />;
@@ -63,13 +61,11 @@ class ModeleCourrier extends React.Component {
     return (
       <Layout>
         <Metas
-          url={pageUrl}
           title={`Modèle de document :  ${title}`}
           description={
             metaDescription ||
             description.slice(0, description.indexOf(" ", 150)) + "…"
           }
-          image={ogImage}
         />
         <Answer
           title={title}

diff --git a/packages/code-du-travail-frontend/pages/modeles-de-courriers/index.js b/packages/code-du-travail-frontend/pages/modeles-de-courriers/index.js
@@ -29,7 +29,7 @@ const subtitle =
   "Téléchargez et personnalisez les modèles de documents et de lettres pour vos démarches en lien avec le droit du travail";
 
 function Modeles(props) {
-  const { data = [], pageUrl, ogImage } = props;
+  const { data = [] } = props;
   const themes = [];
   const modelesByTheme = data.reduce((state, templateDoc) => {
     const other = {
@@ -66,10 +66,8 @@ function Modeles(props) {
   return (
     <Layout>
       <Metas
-        url={pageUrl}
         title={`${title} - Code du travail numérique`}
         description={subtitle}
-        image={ogImage}
       />
       <Section>
         <Container narrow>