Merge pull request #470 from EcrituresNumeriques/feature/matomo

EcrituresNumeriques · Dec 1, 2021 · dbf81e0 · dbf81e0
2 parents 58b1eed + f90ce35
commit dbf81e0
Show file tree

Hide file tree

Showing 19 changed files with 12,070 additions and 8,675 deletions.
diff --git a/apps.config.js b/apps.config.js
diff --git a/ecosystem.config.js b/ecosystem.config.js
@@ -0,0 +1,24 @@
+const { parsed } = require('dotenv').config({ path: 'stylo.env'})
+
+module.exports = {
+  apps: [
+    {
+      name: "front",
+      script: "vite",
+      cwd: "./front/gatsby",
+      env: parsed
+    },
+    {
+      name: "export",
+      script: "nodemon",
+      args: "./src/app.js",
+      cwd: "./export"
+    },
+    {
+      name: "graphql",
+      script: "nodemon",
+      args: "--config nodemon.json app.js",
+      cwd: "./graphql"
+    }
+  ]
+}
diff --git a/front/gatsby/index.html b/front/gatsby/index.html
@@ -1,32 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="./favicon.ico" />
-    <meta http-equiv="x-ua-compatible" content="ie=edge" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
+    <meta charset="utf-8">
+    <link rel="icon" href="./favicon.ico">
+    <link rel="preconnect" href="https://polyfill.io">
+    <link rel="preconnect" href="https://analyseweb.huma-num.fr">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title data-react-helmet="true">Stylo</title>
     <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
-    <meta name="description" content="Stylo, online text editor for scholars" />
-    <meta name="image" content="/favicon.ico" />
-    <meta property="og:title" content="Stylo" />
-    <meta
-      property="og:description"
-      content="Stylo, online text editor for scholars"
-    />
-    <meta property="og:image" content="/favicon.ico" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="Stylo" />
-    <meta
-      name="twitter:description"
-      content="Stylo, online text editor for scholars"
-    />
-    <meta name="twitter:image" content="/favicon.ico" />
+    <meta name="description" content="Stylo, online text editor for scholars">
+    <meta name="image" content="/favicon.ico">
+    <meta property="og:title" content="Stylo">
+    <meta property="og:description" content="Stylo, online text editor for scholars">
+    <meta property="og:image" content="/favicon.ico">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Stylo">
+    <meta name="twitter:description" content="Stylo, online text editor for scholars">
+    <meta name="twitter:image" content="/favicon.ico">
     <script src="https://polyfill.io/v3/polyfill.min.js"></script>
+    {{#if SNOWPACK_MATOMO}}
+    <!-- Matomo -->
+    <script>
+      var _paq = window._paq = window._paq || [];
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(["setDoNotTrack", true]);
+      _paq.push(['requireConsent']);
+      _paq.push(['trackPageView']);
+      _paq.push(['enableLinkTracking']);
+      (function() {
+        var u="{{ SNOWPACK_MATOMO_URL }}";
+        _paq.push(['setTrackerUrl', u+'piwik.php']);
+        _paq.push(['setSiteId', '{{ SNOWPACK_MATOMO_SITE_ID }}']);
+        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+        g.async=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
+      })();
+    </script>
+    <!-- End Matomo Code -->
+    {{/if}}
   </head>
   <body>
     <div id="root" aria-live></div>

diff --git a/front/gatsby/package-lock.json b/front/gatsby/package-lock.json
diff --git a/front/gatsby/package.json b/front/gatsby/package.json
@@ -63,6 +63,7 @@
     "node-fetch": "^2.6.1",
     "prettier": "^2.3.0",
     "sass": "^1.43.4",
-    "vite": "^2.6.14"
+    "vite": "^2.6.14",
+    "vite-plugin-handlebars": "^1.6.0"
   }
 }
diff --git a/front/gatsby/src/components/Footer.jsx b/front/gatsby/src/components/Footer.jsx
@@ -0,0 +1,36 @@
+import React, { useCallback } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import { Switch, Route, Link } from 'react-router-dom'
+
+import styles from './header.module.scss'
+
+function Footer () {
+  const dispatch = useDispatch()
+  const userHasConsent = useSelector(state => state.userPreferences.trackingConsent)
+  const toggleConsent = useCallback(() => dispatch({ type: 'USER_PREFERENCES_TOGGLE', key: 'trackingConsent' }), [])
+
+  return (<Switch>
+    <Route path="*/preview" />
+    <Route path="*">
+      <footer className={styles.footerContainer}>
+        <ul className={styles.footerList}>
+          <li>Stylo</li>
+          <li>
+            <a href="https://github.com/EcrituresNumeriques/stylo/releases" rel="noopener noreferrer" target="_blank">
+              Changelog
+            </a>
+          </li>
+          <li><Link to="/privacy">Privacy</Link></li>
+          { import.meta.env.SNOWPACK_MATOMO_URL && (<li>
+            <label className={styles.consentLabel}>
+              <input type="checkbox" checked={userHasConsent} onChange={toggleConsent} disabled={true} />
+              I accept to share my navigation stats
+            </label>
+          </li>) }
+        </ul>
+      </footer>
+    </Route>
+  </Switch>)
+}
+
+export default Footer
diff --git a/front/gatsby/src/components/Header.jsx b/front/gatsby/src/components/Header.jsx
@@ -33,8 +33,7 @@ function Header () {
   )
 
   return (<Switch>
-    <Route path="*/preview">
-    </Route>
+    <Route path="*/preview" />
     <Route path="*">
       <header className={styles.headerContainer}>
         <section className={styles.header}>

diff --git a/front/gatsby/src/components/Privacy.jsx b/front/gatsby/src/components/Privacy.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+import styles from '../components/Write/write.module.scss'
+
+export default function Privacy () {
+  return (
+    <section className={styles.container}>
+      <article className={styles.simplePage}>
+        <h2>Privacy Terms</h2>
+
+        <p>Coming soon…</p>
+      </article>
+    </section>
+  )
+}
diff --git a/front/gatsby/src/components/Write/write.module.scss b/front/gatsby/src/components/Write/write.module.scss
@@ -28,11 +28,16 @@
   }
 }
 
-.error {
+.simplePage {
   background-color: $extra-background-color;
+  box-shadow: 1px 2px 4px rgba(0, 0, 0, .3);
   margin: 5em auto;
   padding: 10em 2em;
   width: 50%;
+}
+
+.error {
+  @extend .simplePage;
   color: $error-color;
 }