feat/fix posthog log

.eslintrc.json

@@ -42,4 +42,4 @@
           }
       ]
   }
-}
+}

components/download/Download.tsx

@@ -52,7 +52,7 @@ export const Download = ({ content, productVersions }: DownloadProps) => {
                             productVersions[slice.primary.key];
 
                         if (typeof productOrError === 'string') {
-                            return <span>{productOrError}</span>;
+                            return <span key={index}>{productOrError}</span>;
                         }
 
                         return (

components/download/DownloadProdutItemProps.tsx

@@ -12,14 +12,16 @@ export const DownloadProductItem = ({
     slice,
     product,
 }: DownloadProdutItemProps) => {
-    const dlHref = getDownloadLink(product);
+    const dlHref = getDownloadLink(product); // TODO: Change to proper url selection
+    const productName = product?.name?.substring(0, product?.name.indexOf('-')); // TODO: Change to proper title selection
+
     return (
         <div className="download__products__item">
             <h3>
                 {slice.primary.title}
                 <span>
                     {product
-                        ? product.name
+                        ? productName
                         : 'Pas de version stable disponible 😢'}
                 </span>
             </h3>

components/statistic/Statistic.tsx

@@ -1,23 +1,24 @@
+/* eslint-disable @next/next/no-img-element */
 import { FC } from 'react';
 import { Page } from '../common/Page';
 
 const statsDocs = [
-    { label: 'Nombre de téléchargements', size: 100 },
-    { label: 'Carte des téléchargements', size: 100 },
-    { label: 'Volume total analysé', size: 100 },
-    { label: 'Volume total tagué à éliminer', size: 100 },
+    { label: 'Nombre de téléchargements', size: 20877, date: '' },
+    { label: 'Volume total analysé', size: '1293.1 To', date: '' },
+    { label: 'Volume total tagué à éliminer', size: '9.1 To', date: '' },
+    { label: 'Parcourus en avion', size: '8489 Kms', date: '' },
 ];
 
 const statsMails = [
-    { label: 'Nombre de téléchargements', size: 100 },
-    { label: 'Nombre de pst déposés', size: 100 },
-    { label: 'Volume total analysé', size: 100 },
-    { label: 'Volume total tagué à éliminer', size: 100 },
+    { label: 'Nombre de téléchargements', size: 5614, date: '' },
+    { label: 'Nombre de pst déposés', size: 513, date: '' },
+    { label: 'Volume total analysé (en mails)', size: 1373449, date: '' },
+    { label: 'Volume total tagué à éliminer (en Mo)', size: 12.5, date: '' },
 ];
 
 type TStat = {
     label: string;
-    size: number;
+    size: number | string;
 };
 
 const Stat: FC<TStat> = ({ size, label }) => {
@@ -33,20 +34,25 @@ export const Statistic = () => {
     return (
         <Page className="statistics">
             <h1>Statistiques</h1>
-            <div className="wrapper">
+            <div className="statistics-wrapper">
                 <h2>Docs</h2>
                 <div className="item-wrapper">
-                    {/* {statsDocs.map((stat, index) => (
+                    {statsDocs.map((stat, index) => (
                         <Stat label={stat.label} size={stat.size} key={index} />
-                    ))} */}
+                    ))}
                 </div>
+                <h3>Utilisations de Docs dans le monde</h3>
+                <img
+                    src="/assets/map.png"
+                    alt="carte de l'utilisation d'Archifiltre Docs dans le monde"
+                />
             </div>
-            <div className="wrapper">
+            <div className="statistics-wrapper">
                 <h2>Mails</h2>
                 <div className="item-wrapper">
-                    {/* {statsMails.map((stat, index) => (
+                    {statsMails.map((stat, index) => (
                         <Stat label={stat.label} size={stat.size} key={index} />
-                    ))} */}
+                    ))}
                 </div>
             </div>
         </Page>

hooks/usePostHog.tsx

@@ -0,0 +1,32 @@
+import { useRouter } from 'next/router';
+import posthog from 'posthog-js';
+import { useEffect } from 'react';
+
+if (typeof window !== 'undefined') {
+    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY ?? '', {
+        api_host:
+            process.env.NEXT_PUBLIC_POSTHOG_HOST ||
+            'https://docs.posthog.archifiltre.fr',
+        capture_pageview: false,
+    });
+}
+
+export const usePostHog = () => {
+    const router = useRouter();
+
+    useEffect(() => {
+        const handleRouteChange = () => {
+            posthog?.capture('$pageview');
+        };
+        router.events.on('routeChangeComplete', handleRouteChange);
+
+        return () => {
+            router.events.off('routeChangeComplete', handleRouteChange);
+        };
+    }, []);
+};
+
+export const PostHogTracker = () => {
+    usePostHog();
+    return <></>;
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "archifiltre-site-v2",
-  "version": "1.11.0",
+  "version": "1.21.0",
   "private": true,
   "author": "Archifiltre",
   "license": "Apache-2.0",
@@ -47,6 +47,7 @@
     "include-media": "^1.4.10",
     "next": "12.1.6",
     "next-seo": "^5.4.0",
+    "posthog-js": "^1.79.0",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-markdown": "^8.0.3",

pages/_app.tsx

@@ -1,113 +1,118 @@
 import { PrismicPreview } from '@prismicio/next';
 import { PrismicProvider } from '@prismicio/react';
-import { DefaultSeo } from 'next-seo';
 import type { AppProps } from 'next/app';
 import Link from 'next/link';
+import { DefaultSeo } from 'next-seo';
+import { PostHogProvider } from 'posthog-js/react';
 import { Footer } from '../components/common/Footer';
 import { Header } from '../components/common/Header';
 import { Layout } from '../components/common/Layout';
 import { Main } from '../components/common/Main';
+import { PostHogTracker } from '../hooks/usePostHog';
 import { repositoryName } from '../prismicConfiguration';
 import '../styles/index.scss';
 import { linkResolver } from '../utils/prismic/helpers';
 
 const App = ({ Component, pageProps }: AppProps) => {
     return (
-        <PrismicProvider
-            linkResolver={linkResolver}
-            internalLinkComponent={({ href, children, ...props }) => (
-                <Link href={href}>
-                    <a {...props}>{children}</a>
-                </Link>
-            )}
-        >
-            <PrismicPreview repositoryName={repositoryName}>
-                <Layout>
-                    <DefaultSeo
-                        canonical="https://archifiltre.fr"
-                        titleTemplate="%s | Suite Archifiltre"
-                        defaultTitle="Suite Archifiltre"
-                        additionalLinkTags={[
-                            {
-                                rel: 'icon',
-                                href: 'https://archifiltre.fr/favicon.ico',
-                            },
-                            {
-                                rel: 'preload',
-                                href: 'https://archifiltre.fr/assets/fonts/Quicksand-Bold.ttf',
-                                as: 'font',
-                                type: 'font/ttf',
-                                crossOrigin: 'anonymous',
-                            },
-                            {
-                                rel: 'preload',
-                                href: 'https://archifiltre.fr/assets/fonts/Quicksand-Light.ttf',
-                                as: 'font',
-                                type: 'font/ttf',
-                                crossOrigin: 'anonymous',
-                            },
-                            {
-                                rel: 'preload',
-                                href: 'https://archifiltre.fr/assets/fonts/Quicksand-Medium.ttf',
-                                as: 'font',
-                                type: 'font/ttf',
-                                crossOrigin: 'anonymous',
-                            },
-                            {
-                                rel: 'preload',
-                                href: 'https://archifiltre.fr/assets/fonts/Inter-Bold.ttf',
-                                as: 'font',
-                                type: 'font/ttf',
-                                crossOrigin: 'anonymous',
-                            },
-                            {
-                                rel: 'preload',
-                                href: 'https://archifiltre.fr/assets/fonts/Inter-Light.ttf',
-                                as: 'font',
-                                type: 'font/ttf',
-                                crossOrigin: 'anonymous',
-                            },
-                            {
-                                rel: 'preload',
-                                href: 'https://archifiltre.fr/assets/fonts/Inter-Medium.ttf',
-                                as: 'font',
-                                type: 'font/ttf',
-                                crossOrigin: 'anonymous',
-                            },
-                        ]}
-                        openGraph={{
-                            title: 'Suite Archifitre',
-                            type: 'website',
-                            locale: 'fr_FR',
-                            url: 'https://archifiltre.fr',
-                            site_name: 'Archifiltre',
-                            description:
-                                'Aider les archivistes et les agents des administrations à appréhender et trier des arborescences de fichiers et des messageries complètes.',
-                            images: [
+        <PostHogProvider>
+            <PostHogTracker />
+            <PrismicProvider
+                linkResolver={linkResolver}
+                internalLinkComponent={({ href, children, ...props }) => (
+                    <Link href={href}>
+                        <a {...props}>{children}</a>
+                    </Link>
+                )}
+            >
+                <PrismicPreview repositoryName={repositoryName}>
+                    <Layout>
+                        <DefaultSeo
+                            canonical="https://archifiltre.fr"
+                            titleTemplate="%s | Suite Archifiltre"
+                            defaultTitle="Suite Archifiltre"
+                            additionalLinkTags={[
+                                {
+                                    rel: 'icon',
+                                    href: 'https://archifiltre.fr/favicon.ico',
+                                },
+                                {
+                                    rel: 'preload',
+                                    href: 'https://archifiltre.fr/assets/fonts/Quicksand-Bold.ttf',
+                                    as: 'font',
+                                    type: 'font/ttf',
+                                    crossOrigin: 'anonymous',
+                                },
+                                {
+                                    rel: 'preload',
+                                    href: 'https://archifiltre.fr/assets/fonts/Quicksand-Light.ttf',
+                                    as: 'font',
+                                    type: 'font/ttf',
+                                    crossOrigin: 'anonymous',
+                                },
+                                {
+                                    rel: 'preload',
+                                    href: 'https://archifiltre.fr/assets/fonts/Quicksand-Medium.ttf',
+                                    as: 'font',
+                                    type: 'font/ttf',
+                                    crossOrigin: 'anonymous',
+                                },
+                                {
+                                    rel: 'preload',
+                                    href: 'https://archifiltre.fr/assets/fonts/Inter-Bold.ttf',
+                                    as: 'font',
+                                    type: 'font/ttf',
+                                    crossOrigin: 'anonymous',
+                                },
+                                {
+                                    rel: 'preload',
+                                    href: 'https://archifiltre.fr/assets/fonts/Inter-Light.ttf',
+                                    as: 'font',
+                                    type: 'font/ttf',
+                                    crossOrigin: 'anonymous',
+                                },
                                 {
-                                    url: 'https://archifiltre.fr/assets/team_logo.png',
-                                    secureUrl:
-                                        'https://archifiltre.fr/assets/team_logo.png',
-                                    alt: 'Team Logo',
-                                    height: 1024,
-                                    width: 1024,
+                                    rel: 'preload',
+                                    href: 'https://archifiltre.fr/assets/fonts/Inter-Medium.ttf',
+                                    as: 'font',
+                                    type: 'font/ttf',
+                                    crossOrigin: 'anonymous',
                                 },
-                            ],
-                        }}
-                        twitter={{
-                            handle: '@archifiltre',
-                            site: '@archifiltre',
-                            cardType: 'summary_large_image',
-                        }}
-                    />
-                    <Header />
-                    <Main>
-                        <Component {...pageProps} />
-                    </Main>
-                    <Footer />
-                </Layout>
-            </PrismicPreview>
-        </PrismicProvider>
+                            ]}
+                            openGraph={{
+                                title: 'Suite Archifitre',
+                                type: 'website',
+                                locale: 'fr_FR',
+                                url: 'https://archifiltre.fr',
+                                site_name: 'Archifiltre',
+                                description:
+                                    'Aider les archivistes et les agents des administrations à appréhender et trier des arborescences de fichiers et des messageries complètes.',
+                                images: [
+                                    {
+                                        url: 'https://archifiltre.fr/assets/team_logo.png',
+                                        secureUrl:
+                                            'https://archifiltre.fr/assets/team_logo.png',
+                                        alt: 'Team Logo',
+                                        height: 1024,
+                                        width: 1024,
+                                    },
+                                ],
+                            }}
+                            twitter={{
+                                handle: '@archifiltre',
+                                site: '@archifiltre',
+                                cardType: 'summary_large_image',
+                            }}
+                        />
+                        <Header />
+                        <Main>
+                            <Component {...pageProps} />
+                        </Main>
+                        <Footer />
+                    </Layout>
+                </PrismicPreview>
+            </PrismicProvider>
+        </PostHogProvider>
     );
 };
 

pages/api/hello.ts

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+type Data = {
+    name: string;
+};
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>,
+) {
+    res.status(200).json({ name: 'John Doe' });
+}