WIP

assets/controllers.json

@@ -1,5 +1,11 @@
 {
     "controllers": {
+        "@symfony/ux-react": {
+            "react": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        },
         "@symfony/ux-turbo": {
             "turbo-core": {
                 "enabled": true,

assets/entrypoint/app.js

@@ -7,3 +7,8 @@ import '../module/observability';
 // Used by article pages
 import '../styles/content.scss';
 import '../module/highlight';
+
+
+import { registerReactControllerComponents } from '@symfony/ux-react';
+
+registerReactControllerComponents(require.context('../react/controllers', true, /\.(j|t)sx?$/));

assets/module/analytics.js

@@ -1,22 +1,24 @@
 import Countly from 'countly-sdk-web'
 
-window.addEventListener('turbo:load', () => {
-  Countly.init({
-    app_key: '8696ce4d4dfb160bb24351cb04ae16be868501f6',
-    url: 'https://countly.chinour.dev',
-    debug: process.env.NODE_ENV !== 'production',
-  });
+if (process.env.NODE_ENV === 'production') {
+  window.addEventListener('turbo:load', () => {
+    Countly.init({
+      app_key: '8696ce4d4dfb160bb24351cb04ae16be868501f6',
+      url: 'https://countly.chinour.dev',
+      debug: process.env.NODE_ENV !== 'production',
+    });
 
-  // Enable tracking
-  Countly.track_sessions();
-  Countly.track_pageview();
-  Countly.track_errors();
+    // Enable tracking
+    Countly.track_sessions();
+    Countly.track_pageview();
+    Countly.track_errors();
 
-  // User click on any article suggestion at the end of article
-  document.querySelectorAll('.analytics-suggestions').forEach((link) => {
-    link.addEventListener('click', () => {
-      console.debug('Suggestion click');
-      Countly.q.push(['add_event', {key: 'suggestion_click'}]);
-    })
+    // User click on any article suggestion at the end of article
+    document.querySelectorAll('.analytics-suggestions').forEach((link) => {
+      link.addEventListener('click', () => {
+        console.debug('Suggestion click');
+        Countly.q.push(['add_event', {key: 'suggestion_click'}]);
+      })
+    });
   });
-});
+}

assets/react/component/DateTime.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import moment from "moment";
+
+export default function (props) {
+    return <time className={props.className} dateTime={props.dateTime}>
+        {moment(Date.parse(props.dateTime), null, 'fr').fromNow()}
+    </time>
+}

assets/react/controllers/ArticleCommentList.jsx

@@ -0,0 +1,64 @@
+import React, {useEffect, useState} from 'react';
+import axios from "axios";
+import DateTime from "../component/DateTime";
+
+export default function (props) {
+    const [comments, setComments] = useState(null);
+    const [inputFieldOpened, setInputFieldOpened] = useState(false);
+    const [userComment, setUserComment] = useState('');
+    const [username, setUsername] = useState('');
+
+    async function fetchComments() {
+        const response = await axios.get(`/api/article/${props.articleId}/comments`);
+        if (response.status === 200) {
+            setComments(response.data);
+        }
+    }
+
+    useEffect(() => {
+        fetchComments().then(_ => console.debug('comments loaded'));
+    }, []);
+
+    return <div>
+        <h2 className="text-2xl font-bold">Discussion {comments &&
+            <span className="text-muted">({comments.length})</span>}</h2>
+
+        <textarea
+            name="comment"
+            onFocus={() => setInputFieldOpened(true)}
+            className="mt-4 p-2 w-full rounded dark:bg-zinc-700 bg-zinc-100"
+            value={userComment}
+            onChange={e => setUserComment(e.target.value)}
+            rows={inputFieldOpened ? 5 : 3}
+            placeholder="Participe à la discussion 💬">
+        </textarea>
+
+        {inputFieldOpened &&
+            <div className="mt-2 mb-4 flex gap-2">
+                <input type="text"
+                       name="author"
+                       value={username}
+                       onChange={e => setUsername(e.target.value)}
+                       placeholder="Pseudonyme 👻"
+                       className="p-2 rounded dark:bg-zinc-700 bg-zinc-100 min-w-0"/>
+                <button disabled={userComment.length < 1 || username.length < 1}
+                        className="rounded bg-blue-800 disabled:cursor-not-allowed disabled:opacity-50 p-2 text-white font-bold ms-auto">
+                    Partager
+                </button>
+            </div>}
+
+        <ul className="mt-4">
+            {comments &&
+                comments.map(({id, author, publishAt, content}) => (
+                    <li key={id} className="my-4 p-4 rounded border border-zinc-400">
+                        <p className="mb-2">
+                            <span className="text-lg font-bold">{author}</span>
+                            <span className="font-bold text-muted"> • </span>
+                            <DateTime className="text-muted" dateTime={publishAt}></DateTime>
+                        </p>
+                        <p className="text-justify">{content}</p>
+                    </li>
+                ))}
+        </ul>
+    </div>;
+}

assets/styles/content.scss

@@ -44,7 +44,7 @@
     }
 
     blockquote {
-        @apply bg-zinc-100 dark:bg-zinc-700 rounded p-2 border-l-4 dark:border-zinc-200 border-zinc-800;
+        @apply bg-zinc-100 dark:bg-zinc-700 rounded p-2 border-l-4 border-blue-400;
     }
 
     code:not([class*="language-"])  {

composer.json

@@ -25,6 +25,7 @@
         "symfony/serializer": "7.0.*",
         "symfony/stimulus-bundle": "^2.10",
         "symfony/twig-bundle": "7.0.*",
+        "symfony/ux-react": "^2.13",
         "symfony/ux-turbo": "^2.10",
         "symfony/ux-twig-component": "^2.10",
         "symfony/web-link": "7.0.*",