Merge pull request #1870 from BaseAdresseNationale/feat/update-naviga…

…tion

Feat/update navigation

.env.default

@@ -84,6 +84,7 @@ S3_CONFIG_ENDPOINT=YOUR_S3_ENDPOINT_HERE
 # -------------------------------
 
 NEXT_PUBLIC_SOCIAL_NETWORKS_URL_XCOM=https://x.com/adressedatagouv
+NEXT_PUBLIC_SOCIAL_NETWORKS_URL_MASTODON=https://social.numerique.gouv.fr/@adressedatagouv/
 NEXT_PUBLIC_SOCIAL_NETWORKS_URL_FACEBOOK=https://www.facebook.com/BasesAdressesLocales
 NEXT_PUBLIC_SOCIAL_NETWORKS_URL_LINKEDIN=https://www.linkedin.com/company/base-adresse-nationale/
 NEXT_PUBLIC_SOCIAL_NETWORKS_URL_GITHUB=https://github.com/BaseAdresseNationale
@@ -94,4 +95,4 @@ NEXT_PUBLIC_SOCIAL_NETWORKS_URL_GITHUB=https://github.com/BaseAdresseNationale
 
 NEXT_PUBLIC_CLIENT_GUICHET_ADRESSE=
 NEXT_PUBLIC_CLIENT_MES_ADRESSE=
-NEXT_PUBLIC_CLIENT_FORMULAIRE_PUBLICATION=
+NEXT_PUBLIC_CLIENT_FORMULAIRE_PUBLICATION=

next.config.mjs

@@ -27,6 +27,11 @@ const withBundleAnalyzer = NextBundleAnalyzer({
 })
 
 const redirects = async () => [
+  {
+    source: '/ressources',
+    destination: '/ressources-et-documentations',
+    permanent: true,
+  },
   {
     source: '/gerer-mes-adresses',
     destination: '/programme-bal',

package.json

@@ -23,7 +23,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.645.0",
     "@ban-team/validateur-bal": "^2.19.1",
-    "@codegouvfr/react-dsfr": "^1.10.11",
+    "@codegouvfr/react-dsfr": "^1.14.1",
     "@etalab/decoupage-administratif": "^4.0.0",
     "@next/bundle-analyzer": "^14.2.13",
     "@socialgouv/matomo-next": "^1.9.0",
@@ -39,28 +39,28 @@
     "getconfig": "^4.5.0",
     "gray-matter": "^4.0.3",
     "http-proxy-middleware": "^3.0.2",
+    "https-proxy-agent": "^7.0.5",
     "lodash": "^4.17.21",
     "maplibre-gl": "^4.7.1",
-    "https-proxy-agent": "^7.0.5",
     "next": "14.2.5",
-    "prop-types": "^15.8.1",
     "node-fetch": "^3.3.2",
+    "prop-types": "^15.8.1",
     "react": "^18",
     "react-chartjs-2": "^5.2.0",
     "react-confetti": "^6.1.0",
     "react-dom": "^18",
     "react-dropzone": "^14.2.3",
     "react-map-gl": "^7.1.7",
     "react-pin-field": "^3.1.5",
+    "recharts": "^2.8.0",
     "remark": "^15.0.1",
     "remark-heading-id": "^1.0.1",
     "remark-html": "^16.0.1",
     "send": "^0.18.0",
     "sharp": "^0.33.5",
     "styled-components": "^6.1.12",
-    "vt-pbf": "^3.1.3",
     "swr": "^2.2.4",
-    "recharts": "^2.8.0"
+    "vt-pbf": "^3.1.3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",

src/app/blog/[slug]/components/AsideContent.tsx

@@ -6,6 +6,7 @@ import { AsideLinkList, AsideFollowList } from './AsideContent.styled'
 
 const {
   NEXT_PUBLIC_SOCIAL_NETWORKS_URL_XCOM: SOCIAL_NETWORKS_URL_XCOM,
+  NEXT_PUBLIC_SOCIAL_NETWORKS_URL_MASTODON: SOCIAL_NETWORKS_URL_MASTODON,
   NEXT_PUBLIC_SOCIAL_NETWORKS_URL_FACEBOOK: SOCIAL_NETWORKS_URL_FACEBOOK,
   NEXT_PUBLIC_SOCIAL_NETWORKS_URL_LINKEDIN: SOCIAL_NETWORKS_URL_LINKEDIN,
 } = process.env
@@ -28,9 +29,14 @@ async function AsideContent() {
       <AsideFollowList>
         <li><Link className="fr-link fr-link--icon-left fr-icon-linkedin-box-fill" target="linkedin" href={SOCIAL_NETWORKS_URL_LINKEDIN ?? ''}>LinkedIn</Link></li>
         <li><Link className="fr-link fr-link--icon-left fr-icon-twitter-x-fill" target="twitter-x" href={SOCIAL_NETWORKS_URL_XCOM ?? ''}>X.com</Link></li>
-        <li><Link className="fr-link fr-link--icon-left fr-icon-facebook-circle-fill" target="facebook" href={SOCIAL_NETWORKS_URL_FACEBOOK ?? ''}>Facebook</Link></li>
+        <li><Link className="fr-link fr-link--icon-left fr-icon-mastodon-fill" target="mastodon" href={SOCIAL_NETWORKS_URL_MASTODON ?? ''}>Mastodon</Link></li>
         <li><Link className="fr-link fr-link--icon-left ri-mail-send-fill" target="newsletter" href="#d">Newsletter</Link></li>
       </AsideFollowList>
+      <hr />
+      <h6>A voir egalement</h6>
+      <AsideFollowList>
+        <li><Link className="fr-link fr-link--icon-left fr-icon-facebook-circle-fill" target="facebook" href={SOCIAL_NETWORKS_URL_FACEBOOK ?? ''}>Page Facebook du programme BAL</Link></li>
+      </AsideFollowList>
     </>
   )
 }

src/components/SharingBlock/SharingBlock.tsx

@@ -4,6 +4,40 @@ import Button from '@codegouvfr/react-dsfr/Button'
 import type { ButtonProps } from '@codegouvfr/react-dsfr/Button'
 
 import { SharingDefList } from './SharingBlock.styled'
+import { Tooltip } from '@codegouvfr/react-dsfr/Tooltip'
+
+interface MastodonShareEvent extends Event {
+  target: EventTarget & {
+    getAttribute(attributeName: string): string | null
+  }
+}
+
+function MastodonShare(content: string, navigatorPageName = 'mastodon') {
+  try {
+    // Controle if content is not empty
+    if (!content) {
+      throw new Error('Content is empty')
+    }
+
+    // Get the Mastodon domain
+    // TODO: Prefer DSFR Modal for the prompt
+    const mastodonDomain = prompt('Votre Domain Mastodon ?', 'mastodon.social')
+
+    // TODO: Add a check for the Mastodon domain
+    if (!mastodonDomain) {
+      return
+    }
+
+    // Build the sharing URL
+    const url = `https://${mastodonDomain}/share?text=${content}`
+
+    // Open a window on the share page
+    window.open(url, navigatorPageName)
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
 
 const ShareButton = (buttonProps: ButtonProps) => (
   <Button
@@ -38,6 +72,11 @@ function SharingBlock({ pageUrl, callMessage, title }: { pageUrl: string, callMe
       },
       title: 'Partager sur Threads',
     },
+    {
+      iconId: 'fr-icon-mastodon-line',
+      onClick: () => MastodonShare(`${title};url=${pageUrl}`),
+      title: 'Partager sur Mastodon',
+    },
     {
       iconId: 'fr-icon-linkedin-box-line',
       linkProps: {
@@ -64,9 +103,14 @@ function SharingBlock({ pageUrl, callMessage, title }: { pageUrl: string, callMe
   return (
     <SharingDefList>
       <dt>Partager la page</dt>
-      {shareingPlateform.map(ShareButtonProps => (
-        <dd key={ShareButtonProps.title}>
-          <ShareButton {...(ShareButtonProps as ButtonProps)} />
+      {shareingPlateform.map(({ title, ...ShareButtonProps }) => (
+        <dd key={title}>
+          <Tooltip
+            kind="hover"
+            title={title}
+          >
+            <ShareButton {...(ShareButtonProps as ButtonProps)} />
+          </Tooltip>
         </dd>
       ))}
     </SharingDefList>

src/layouts/Footer.tsx

@@ -6,6 +6,14 @@ import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { newsletterOptIn } from '@/lib/api-brevo'
 
+const {
+  NEXT_PUBLIC_SOCIAL_NETWORKS_URL_XCOM: SOCIAL_NETWORKS_URL_XCOM,
+  NEXT_PUBLIC_SOCIAL_NETWORKS_URL_MASTODON: SOCIAL_NETWORKS_URL_MASTODON,
+  NEXT_PUBLIC_SOCIAL_NETWORKS_URL_FACEBOOK: SOCIAL_NETWORKS_URL_FACEBOOK,
+  NEXT_PUBLIC_SOCIAL_NETWORKS_URL_LINKEDIN: SOCIAL_NETWORKS_URL_LINKEDIN,
+  NEXT_PUBLIC_SOCIAL_NETWORKS_URL_GITHUB: SOCIAL_NETWORKS_URL_GITHUB,
+} = process.env
+
 const NewsletterOptinWithNoSSR = dynamic(
   () => import('../components/NewsletterOptin'),
   { ssr: false }
@@ -62,21 +70,28 @@ export default function Footer() {
           buttons: [
             {
               linkProps: {
-                href: 'https://x.com/adressedatagouv?lang=fr',
+                href: SOCIAL_NETWORKS_URL_XCOM as unknown as URL ?? '',
                 target: '_blank',
               },
               type: 'twitter-x',
             },
             {
               linkProps: {
-                href: 'https://www.linkedin.com/company/base-adresse-nationale/',
+                href: SOCIAL_NETWORKS_URL_MASTODON as unknown as URL ?? '',
+                target: '_blank',
+              },
+              type: 'mastodon',
+            },
+            {
+              linkProps: {
+                href: SOCIAL_NETWORKS_URL_LINKEDIN as unknown as URL ?? '',
                 target: '_blank',
               },
               type: 'linkedin',
             },
             {
               linkProps: {
-                href: 'https://github.com/BaseAdresseNationale',
+                href: SOCIAL_NETWORKS_URL_GITHUB as unknown as URL ?? '',
                 target: '_blank',
               },
               type: 'github',

src/layouts/Header.tsx

@@ -45,8 +45,7 @@ export const navEntries: MainNavigationProps.Item[] = [
         linkProps: { href: '/decouvrir-la-BAN' },
       },
       { text: 'Utiliser la BAN', linkProps: { href: '/utiliser-la-ban' } },
-      { text: 'Documentation', linkProps: { href: '/ressources' } },
-      // {text: 'Documentation technique',linkProps: { href: '#' }, },
+      { text: 'Documentation', linkProps: { href: '/ressources-et-documentations' } },
       { text: 'État du déploiement', linkProps: { href: '/deploiement-bal' } },
       { text: 'Statistiques', linkProps: { href: '/stats' } },
     ],
@@ -171,25 +170,25 @@ export default function Header() {
         }}
         quickAccessItems={[
           {
-            iconId: 'fr-icon-book-2-fill',
+            iconId: 'fr-icon-road-map-fill',
             linkProps: {
-              href: '#',
+              href: '/carte-base-adresse-nationale',
             },
-            text: 'Documentation',
+            text: 'La Carte',
           },
           {
-            iconId: 'ri-quill-pen-fill',
+            iconId: 'fr-icon-book-2-fill',
             linkProps: {
-              href: '/blog',
+              href: '/ressources-et-documentations',
             },
-            text: 'Blog',
+            text: 'La Documentation',
           },
           {
-            iconId: 'fr-icon-message-2-fill',
+            iconId: 'ri-quill-pen-fill',
             linkProps: {
-              href: '/nous-contacter',
+              href: '/blog',
             },
-            text: 'Nous contacter',
+            text: 'Le Blog',
           },
         ]}
         navigation={selectedNavigationLinks as MainNavigationProps.Item[]}