Marketing website: Blog pages (#521)

.github/workflows/marketing.yml

@@ -2,7 +2,7 @@ name: 'Marketing Build'
 
 on:
   push:
-    branches: [v502/cookie]
+    branches: [v520/blog]
 
 jobs:
   marketing:

marketing/next.config.js

@@ -7,6 +7,9 @@ const nextConfig = {
   output: 'standalone',
   compiler: {
     styledComponents: true,
+  },
+  images: {
+    domains: ['img.shields.io'],
   }
 }
 

marketing/package.json

@@ -15,7 +15,9 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@next/font": "13.1.6",
     "@styled-system/theme-get": "^5.1.2",
+    "@total-typescript/ts-reset": "^0.4.2",
     "@types/date-fns": "^2.6.0",
+    "@types/lodash-es": "^4.17.7",
     "@types/react": "18.0.28",
     "@types/react-anchor-link-smooth-scroll": "^1.0.2",
     "@types/react-aria-menubutton": "^6.2.9",
@@ -34,6 +36,7 @@
     "fs": "^0.0.1-security",
     "gray-matter": "^4.0.3",
     "i18next": "^22.4.9",
+    "lodash-es": "^4.17.21",
     "next": "13.1.6",
     "next-i18next": "^13.1.5",
     "polished": "^4.2.2",
@@ -54,7 +57,9 @@
     "react-slick": "^0.29.0",
     "react-stickynode": "^4.1.0",
     "react-tabs": "^6.0.0",
+    "rehype-raw": "^6.1.1",
     "remark": "^14.0.2",
+    "remark-gfm": "^3.0.1",
     "remark-html": "^15.0.2",
     "sharp": "^0.31.3",
     "styled-components": "^5.3.6",

marketing/src/common/documents/blog/_markdown.md

@@ -0,0 +1,77 @@
+---
+title: 'Markdown Tests'
+subtitle: 'Everything you can do with markdown'
+author: 'Antoine Jaussoin'
+date: '2023-03-03'
+keywords: 'blog,example'
+cover: '/assets/blog/feature/cover.png'
+---
+
+The first paragraph should be nicely formatted, with the first letter bigger, and we should use this to explain what this article is about and so on.
+
+# H1
+
+## H2
+
+### H3
+
+#### H4
+
+##### H5
+
+###### H6
+
+A paragraph with **bold text**, *italic text*, and ~~strikethrough text~~.
+
+# An image
+
+![Create Encrypted Session](/assets/blog/feature/cover.png)
+
+# A link
+
+[Retrospected](https://www.retrospected.com)
+
+# A list
+
+- Item 1
+- Item 2
+	- Sub item 1
+	- Sub item 2
+		- Sub sub item 1
+
+# A numbered list
+
+1. Item 1
+2. Item 2
+	1. Sub item 1
+	2. Sub item 2
+		1. Sub sub item 1
+
+# A blockquote
+
+> This is a blockquote  
+> By Antoine Jaussoin
+
+# A code block
+
+```
+const x = 2;
+```
+
+And some code in a paragraph: `const x = 2;`
+
+#  A table
+
+| Column 1 | Column 2 | Column 3 |
+| -------- | -------- | -------- |
+| Row 1    | Row 1    | Row 1    |
+| Row 2    | Row 2    | Row 2    |
+| Row 3    | Row 3    | Row 3    |
+
+# A horizontal rule:
+---
+
+# A link to a section:
+
+[Go to the H1 section](#h1)
+

marketing/src/common/documents/blog/encrypted-sessions.fr.md

@@ -0,0 +1,66 @@
+---
+slug: 'encrypted-sessions'
+lang: 'fr'
+title: 'Sessions cryptées'
+subtitle: 'Que sont les sessions cryptées, et pourquoi les utiliser ?'
+author: 'Antoine Jaussoin'
+date: '2023-03-03'
+keywords: 'blog,encrypted,sessions'
+cover: '/assets/blog/encrypted-sessions/card.png'
+---
+
+Pourquoi utiliser des sessions cryptées ? Parce que vous voulez garder vos données privées, et les stocker de manière à ce que même Retrospected ne puisse pas les lire.
+
+# Démarrer une session cryptée
+
+Sur la page d'accueil, cliquez sur "Session cryptée" (au lieu de "Créer une nouvelle session") :
+
+![Create Encrypted Session](/assets/blog/encrypted-sessions/button.png,270x124)
+
+# Vue d'ensemble
+
+Vos données (contenu des posts, actions, et titre de la session) sont **cryptées** et **décryptées** **localement**, dans votre navigateur.
+
+Seul le texte crypté est envoyé au serveur, donc le serveur ne voit jamais les données en clair.
+
+C'est comment ça se présente dans la base de données :
+
+![Database view](/assets/blog/encrypted-sessions/db.png,1394x214)
+
+La clé est stockée dans l'URL, après le signe dièse (#), et n'est jamais envoyée au serveur non plus ([pourquoi](https://stackoverflow.com/questions/3664257/why-is-the-hash-part-of-the-url-not-available-on-the-server-side)).
+
+Vous pouvez alors partager l'URL via un moyen sécurisé (email, Slack...), la stocker dans un favori etc., mais la clé de cryptage ne sera jamais envoyée à Retrospected.
+
+# Anatomie d'une URL
+
+<span style="color: blue">https://www.retrospected.com/game/<wbr />P2NWCVKNJ</span><wbr /><span style="color: green">#</span><span style="color: red">pZ0ipXFBn</span>
+
+La <span style="color: blue">partie bleue</span> contient l'ID de la session, alors que la <span style="color: red">partie rouge</span>,
+
+après le <span style="color: green">#</span>, est la clé de cryptage.
+
+Dans l'exemple ci-dessus, seule la <span style="color: blue">partie bleue</span> de l'URL est envoyée au serveur, jamais la <span style="color: red">partie rouge</span> ([source](https://stackoverflow.com/questions/3664257/why-is-the-hash-part-of-the-url-not-available-on-the-server-side)).
+
+# Cryptage
+
+Votre contenu est crypté localement à l'aide d'AES, avec [crypto-js/aes](https://cryptojs.gitbook.io/docs/#ciphers).
+
+# Décryptage
+
+Le contenu est décrypté localement, et la clé est obtenue à partir d'une des sources suivantes :
+
+- L'URL si l'URL contient la clé de cryptage
+- Votre navigateur [local storage](https://en.wikipedia.org/wiki/Web_storage)
+- Une demande de saisie de la clé depuis l'application si la clé n'est ni dans l'URL ni dans le local storage.
+
+Pourquoi est-elle stockée dans le local storage ? Pour la commodité : si vous ouvrez une session existante à partir de la liste des sessions auxquelles vous avez participé, sur la page d'accueil, la clé ne serait pas dans l'URL car cette liste provient des serveurs de Retrospected, où les clés de cryptage ne sont pas stockées.
+
+Quand est-elle stockée dans le local storage ? Chaque fois que vous ouvrez une session avec une clé de cryptage dans l'URL, la clé sera stockée dans le local storage pour la raison expliquée ci-dessus.
+
+# Changer la clé de cryptage
+
+Vous pouvez changer la clé de cryptage à tout moment en cliquant sur le bouton "Changer la clé de cryptage" dans la barre de navigation.
+
+# Partager une session cryptée
+
+Vous pouvez partager une session cryptée avec n'importe qui, sans risque de divulguer les données de la session.

marketing/src/common/documents/blog/encrypted-sessions.md

@@ -0,0 +1,59 @@
+---
+slug: 'encrypted-sessions'
+lang: 'en'
+title: 'Encrypted Sessions'
+subtitle: 'What are encrypted sessions, and why should you use them?'
+author: 'Antoine Jaussoin'
+date: '2023-03-03'
+keywords: 'blog,example'
+cover: '/assets/blog/encrypted-sessions/card.png'
+---
+
+Why should you use encrypted sessions? Because you want to keep your data private, and have it stored in a way that even Retrospected can't read. 
+# Starting an encrypted session
+
+On the homepage, click on "Encrypted Session" (instead of "Create a new session"):
+
+![Create Encrypted Session](/assets/blog/encrypted-sessions/button.png,270x124)
+
+
+# Overview
+
+Your data (post content, action, and game title) is **encrypted** and **decrypted** **locally**, in your browser.
+
+Only the encrypted text is sent to the server, so the server never sees the clear-text data.
+
+This is how it looks on the database:
+
+![Database view](/assets/blog/encrypted-sessions/db.png,1394x214)
+
+The key is stored in the URL, after the hash sign (#), and is never sent to the server either ([why](https://stackoverflow.com/questions/3664257/why-is-the-hash-part-of-the-url-not-available-on-the-server-side)).
+
+You can then share the URL via a secure mean (email, Slack...), store it in a bookmark etc., but the encryption key will never be sent to Retrospected.
+
+# Anatomy of a URL
+
+<span style="color: blue">https://www.retrospected.com/game/<wbr />P2NWCVKNJ</span><wbr /><span style="color: green">#</span><span style="color: red">pZ0ipXFBn</span>
+
+The <span style="color: blue">blue</span> part contains the Session ID, while the <span style="color: red">red</span> part,
+after the <span style="color: green">#</span>, is the encryption key.
+
+In the example above, only the <span style="color: blue">blue</span> part of the URL is sent to the server, never the <span style="color: red">red</span> ([source](https://stackoverflow.com/questions/3664257/why-is-the-hash-part-of-the-url-not-available-on-the-server-side)).
+
+# Encryption
+
+Your content is encrypted locally using AES, with [crypto-js/aes](https://cryptojs.gitbook.io/docs/#ciphers).
+
+# Decryption
+
+The content is decrypted locally, and the key is obtained from one of these sources:
+
+- The URL if the URL contains the encryption key
+- Your browser [local storage](https://en.wikipedia.org/wiki/Web_storage)
+- A prompt from the app if the key is neither in the URL nor the local storage.
+
+Why is it stored in local storage? For convenience: if you open an existing session from the list of sessions you participated in, in the home page,
+the key wouldn't be part of the URL because that list is coming from the Retrospected servers, where the encryption keys are not stored.
+
+When is it stored in local storage? Whenever you open a session with an encryption key in the URL,
+the key will be stored in local storage for the reason explained above.

marketing/src/common/documents/blog/release-510.md

@@ -0,0 +1,45 @@
+---
+slug: 'release-5.1.0'
+lang: 'en'
+title: "Retrospected 5.1.0 is out!"
+subtitle: "What's new in Retrospected 5.1.0?"
+author: 'Antoine Jaussoin'
+date: '2023-04-02'
+keywords: 'blog,release,5.1.0,ai-coach,chat gpt'
+cover: '/assets/blog/ai-coach/modal-before-question.png'
+---
+
+Retrospected 5.1.0 out! Discover what's new in this release, and in particular our brand new AI-powered Agile Coach.
+
+# AI-powered Agile Coach
+
+We are excited to announce a new feature that will enhance users' experience and knowledge. Retrospected now includes an Agile coach powered by Chat GPT, which users can access to learn more about the tool and Agile methodology in general. With this new feature, users can ask the Agile coach questions related to their retrospectives and get suggestions on how to improve their agile practices. Additionally, the coach can provide valuable insights into Agile methodology, including best practices, tips, and tricks. With the Agile coach powered by Chat GPT, Retrospected is taking a step forward in empowering users to continuously improve their Agile practices.
+
+The Agile Coach is available for all non-anonymous accounts, and is accessible from the "Agile Coach" button in the top  of the app:
+
+![Open the AI modal](/assets/blog/ai-coach/ai-coach-button.png,1708x120)
+
+You then can either select a question from the list, or ask your own question:
+
+![Ask any question](/assets/blog/ai-coach/modal-before-question.png,1624x1148)
+
+The Agile Coach will then answer your question:
+
+![Get a proper answer](/assets/blog/ai-coach/modal-after-answer.png,1624x1148)
+
+You can ask anything related to Agile and retrospectives, and the usage of Retrospected.
+
+# Login workflow
+
+We have improved and simplified the login workflow. All options are now on the same page (no more tabs), and login anonymously becomes even easier: you just have to click the "Use Anonymously" button on the login page.
+
+# Anonymous account conversion
+
+Users can now convert their anonymous account to a regular account with OAuth or password authentication, while keeping their existing sessions, posts, and votes. This feature ensures that users who previously used Retrospected anonymously can now take full advantage of all the benefits of a regular account. Retrospected is committed to providing users with the best possible experience, and this feature is just one example of that commitment in action.
+
+# Template selection
+
+Now, users can select from a visual list of templates, including Well / Not Well / Ideas, 4s, Mad / Sad / Glad, and many more, instead of using a dropdown menu. With this new feature, users can quickly and easily select the template that best fits their team's needs, without the hassle of scrolling through a dropdown list. The visual list provides a clear overview of available templates, making it easier for teams to select the right format for their retrospective, and ultimately, improve their team's agility. 
+
+![Get a proper answer](/assets/blog/ai-coach/templates.png,1800x1480)
+

marketing/src/common/fonts/Fonts.ts

@@ -0,0 +1,7 @@
+import { Source_Serif_Pro } from '@next/font/google';
+
+export const sourceSerifPro = Source_Serif_Pro({
+  weight: ['200', '400', '700'],
+  style: ['normal', 'italic'],
+  subsets: ['latin'],
+});

marketing/src/common/i18n/locale-for-datefns.ts

@@ -0,0 +1,18 @@
+import en from 'date-fns/locale/en-GB';
+import fr from 'date-fns/locale/fr';
+import de from 'date-fns/locale/de';
+import nl from 'date-fns/locale/nl';
+
+export function localeToDateFns(locale: string): Locale {
+  switch (locale) {
+    case 'fr':
+      return fr;
+    case 'de':
+      return de;
+    case 'nl':
+      return nl;
+    case 'en':
+    default:
+      return en;
+  }
+}

marketing/src/containers/Navbar/index.tsx

@@ -60,15 +60,6 @@ const Navbar = ({
     <NavbarWrapper {...navbarStyle}>
       <Container width="1400px">
         <Box {...row}>
-          {/* <Logo
-            href="/"
-            logoSrc={logoImage}
-            title="SaaS Creative"
-            logoStyle={logoStyle}
-            className="main-logo"
-            width={32}
-            height={32}
-          /> */}
           <Link href="/">
             <Logo size={32} style={{ position: 'relative', top: 1 }} />
           </Link>