Spaces:

Docfile
/

Mariam-metho

Sleeping

App Files Files Community

Docfile commited on Oct 16

Commit

3c43094

verified ·

1 Parent(s): 7acb0e7

Upload 16 files

Browse files

Files changed (7) hide show

templates/admin_articles.html +19 -25
templates/admin_edit_article.html +68 -89
templates/admin_new_article.html +151 -76
templates/article.html +22 -16
templates/articles.html +5 -7
templates/base.html +1 -1
templates/home.html +7 -9

templates/admin_articles.html CHANGED Viewed

@@ -8,31 +8,25 @@
     <a href="{{ url_for('admin_home') }}" class="btn btn-secondary me-2">Retour à l'admin</a>
     <a href="{{ url_for('admin_new_article') }}" class="btn btn-primary">Nouvel Article</a>
 </div>
-<div class="table-responsive">
-    <table class="table table-striped table-hover">
-        <thead class="table-dark">
-            <tr>
-                <th>ID</th>
-                <th>Titre</th>
-                <th>Catégorie</th>
-                <th>Actions</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for article in articles %}
-            <tr>
-                <td>{{ article.id }}</td>
-                <td>{{ article.title }}</td>
-                <td>{{ article.category.name }}</td>
-                <td>
-                    <a href="{{ url_for('admin_edit_article', article_id=article.id) }}" class="btn btn-sm btn-outline-primary me-2">Éditer</a>
-                    <form method="post" action="{{ url_for('admin_delete_article', article_id=article.id) }}" style="display:inline;">
-                        <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Êtes-vous sûr de vouloir supprimer cet article ?')">Supprimer</button>
                     </form>
-                </td>
-            </tr>
-            {% endfor %}
-        </tbody>
-    </table>
 </div>
 {% endblock %}

     <a href="{{ url_for('admin_home') }}" class="btn btn-secondary me-2">Retour à l'admin</a>
     <a href="{{ url_for('admin_new_article') }}" class="btn btn-primary">Nouvel Article</a>
 </div>
+<div class="cards-grid">
+    {% for article in articles %}
+    <div class="card">
+        <div class="card-body d-flex flex-column">
+            <div style="display:flex;justify-content:space-between;align-items:center;gap:0.5rem;">
+                <div>
+                    <strong>#{{ article.id }}</strong>
+                    <h5 class="card-title" style="display:inline;margin-left:0.5rem">{{ article.title }}</h5>
+                    <div class="text-muted">{{ article.category.name }}</div>
+                </div>
+                <div style="display:flex;flex-direction:column;gap:0.5rem;align-items:flex-end;">
+                    <a href="{{ url_for('admin_edit_article', article_id=article.id) }}" class="btn btn-primary">Éditer</a>
+                    <form method="post" action="{{ url_for('admin_delete_article', article_id=article.id) }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cet article ?')">
+                        <button type="submit" class="btn btn-secondary">Supprimer</button>
                     </form>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endfor %}
 </div>
 {% endblock %}

templates/admin_edit_article.html CHANGED Viewed

@@ -2,117 +2,96 @@
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
-    <title>Éditer l'Article</title>
     <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/trix.css">
     <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/trix.umd.min.js"></script>
     <style>
         body { font-family: Arial, sans-serif; margin: 20px; }
-        form { max-width: 800px; }
         label { display: block; margin-top: 10px; }
-        input, button { width: 100%; padding: 10px; margin-top: 5px; }
-        trix-editor { border: 1px solid #ccc; min-height: 300px; }
     </style>
-    <script>
-        document.addEventListener("trix-before-initialize", () => {
-            // Allow more tags in sanitization
-            Trix.config.dompurify.ADD_TAGS = ["iframe", "video", "source", "table", "tr", "td", "th"];
-            Trix.config.dompurify.ADD_ATTR = ["src", "controls", "width", "height"];
-            // Custom toolbar with all options
-            Trix.config.toolbar.getDefaultHTML = () => `
-                <div class="trix-button-row">
-                  <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" tabindex="-1" title="Bold">Bold</button>
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" tabindex="-1" title="Italic">Italic</button>
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" tabindex="-1" title="Strikethrough">Strikethrough</button>
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-link" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" tabindex="-1" title="Link">Link</button>
-                  </span>
-                  <span class="trix-button-group trix-button-group--block-tools" data-trix-button-group="block-tools">
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-heading-1" data-trix-attribute="heading1" tabindex="-1" title="Heading">Heading</button>
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-quote" data-trix-attribute="quote" tabindex="-1" title="Quote">Quote</button>
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-code" data-trix-attribute="code" tabindex="-1" title="Code">Code</button>
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-bullet-list" data-trix-attribute="bullet" tabindex="-1" title="Bullets">Bullets</button>
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-number-list" data-trix-attribute="number" tabindex="-1" title="Numbers">Numbers</button>
-                  </span>
-                  <span class="trix-button-group trix-button-group--file-tools" data-trix-button-group="file-tools">
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-attach" data-trix-action="attachFiles" tabindex="-1" title="Attach Files">Attach Files</button>
-                  </span>
-                  <span class="trix-button-group trix-button-group--image-tools" data-trix-button-group="image-tools">
-                    <button type="button" class="trix-button" data-trix-action="x-align-left" tabindex="-1" title="Align Left">Align Left</button>
-                    <button type="button" class="trix-button" data-trix-action="x-align-right" tabindex="-1" title="Align Right">Align Right</button>
-                  </span>
-                  <span class="trix-button-group trix-button-group--history-tools" data-trix-button-group="history-tools">
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-undo" data-trix-action="undo" data-trix-key="z" tabindex="-1" title="Undo">Undo</button>
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-redo" data-trix-action="redo" data-trix-key="shift+z" tabindex="-1" title="Redo">Redo</button>
-                  </span>
-                </div>
-                <div class="trix-dialogs" data-trix-dialogs>
-                  <div class="trix-dialog trix-dialog--link" data-trix-dialog="href" data-trix-dialog-attribute="href">
-                    <div class="trix-dialog__link-fields">
-                      <input type="url" name="href" class="trix-input trix-input--dialog" placeholder="Enter a URL..." aria-label="URL" required data-trix-input>
-                      <div class="trix-button-group">
-                        <input type="button" class="trix-button trix-button--dialog" value="Link" data-trix-method="setAttribute">
-                        <input type="button" class="trix-button trix-button--dialog" value="Unlink" data-trix-method="removeAttribute">
-                      </div>
-                    </div>
-                  </div>
-                </div>
-            `;
-        });
-    </script>
 </head>
 <body>
-    <h1>Éditer l'Article</h1>
     <a href="{{ url_for('admin_articles') }}">Retour aux articles</a>
     <form method="post" enctype="multipart/form-data">
         <label for="title">Titre:</label>
         <input type="text" id="title" name="title" value="{{ article.title }}" required>
-        {% if article.icon_data %}
-        <p>Image actuelle: <img src="{{ url_for('get_article_image', article_id=article.id) }}" style="max-width: 100px; max-height: 100px;"></p>
-        {% endif %}
-        <label for="icon">Nouvelle image (fichier image):</label>
         <input type="file" id="icon" name="icon" accept="image/*">
         <label for="content">Contenu:</label>
-        <input id="content" type="hidden" name="content" value="{{ article.content }}">
         <trix-editor input="content"></trix-editor>
-        <button type="submit">Sauvegarder</button>
     </form>
     <script>
-        document.addEventListener("trix-attachment-add", function(event) {
-            var file = event.attachment.file;
-            if (file) {
-                var formData = new FormData();
-                formData.append("file", file);
-                fetch("/upload", {
-                    method: "POST",
-                    body: formData
-                }).then(response => response.json()).then(data => {
-                    event.attachment.setAttributes({url: data.url});
-                }).catch(error => {
-                    console.error("Upload failed:", error);
-                });
-            }
-        });
-        document.addEventListener("trix-action-invoke", function(event) {
-            const { actionName, target } = event;
-            if (actionName === "x-align-left" || actionName === "x-align-right") {
-                const editor = target.editor;
-                const selectedRange = editor.getSelectedRange();
-                const document = editor.getDocument();
-                const attachments = document.getAttachments();
-                attachments.forEach(attachment => {
-                    const range = attachment.getRange();
-                    if (selectedRange[0] <= range[0] && range[1] <= selectedRange[1]) {
-                        attachment.setAttribute("class", actionName === "x-align-left" ? "float-left" : "float-right");
-                    }
-                });
-            }
         });
     </script>
 </body>
-</html>

 <html lang="fr">
 <head>
     <meta charset="UTF-8">
+    <title>Éditer Article</title>
     <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/trix.css">
     <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/trix.umd.min.js"></script>
     <style>
         body { font-family: Arial, sans-serif; margin: 20px; }
+        form { max-width: 900px; margin:0 auto }
         label { display: block; margin-top: 10px; }
+        input, select, button { width: 100%; padding: 10px; margin-top: 5px; box-sizing: border-box }
+        trix-editor { border: 1px solid #e9ecef; min-height: 300px; border-radius:8px }
+        .article-preview { background:#fff;padding:1rem;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.06);margin-top:1rem }
     </style>
 </head>
 <body>
+    <h1>Éditer Article</h1>
     <a href="{{ url_for('admin_articles') }}">Retour aux articles</a>
     <form method="post" enctype="multipart/form-data">
         <label for="title">Titre:</label>
         <input type="text" id="title" name="title" value="{{ article.title }}" required>
+        <label for="category_id">Catégorie:</label>
+        <select id="category_id" name="category_id" required>
+            {% for category in article.category.subject.categories %}
+            <option value="{{ category.id }}" {% if category.id == article.category_id %}selected{% endif %}>{{ category.name }}</option>
+            {% endfor %}
+        </select>
+        <label for="icon">Image (fichier image):</label>
         <input type="file" id="icon" name="icon" accept="image/*">
+        <label for="youtube_url">Lien YouTube (optionnel) :</label>
+        <input type="url" id="youtube_url" name="youtube_url" placeholder="https://www.youtube.com/watch?v=..." value="{{ article.youtube_url or '' }}">
         <label for="content">Contenu:</label>
+        <input id="content" type="hidden" name="content" value="{{ article.content | safe }}">
         <trix-editor input="content"></trix-editor>
+        <button type="submit">Enregistrer</button>
     </form>
+    <h3>Aperçu</h3>
+    <div id="editor-preview" class="article-preview"></div>
     <script>
+    // Configure Trix before init
+    document.addEventListener('trix-before-initialize', function(){
+        if (window.Trix && Trix.config && Trix.config.dompurify){
+            Trix.config.dompurify.ADD_TAGS = ["iframe","video","source","table","tr","td","th","img"];
+            Trix.config.dompurify.ADD_ATTR = ["src","controls","width","height","class","style","allowfullscreen"];
+        }
+        Trix.config.toolbar.getDefaultHTML = function(){
+            return `
+                <div class="trix-button-row">
+                  <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
+                    <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" title="Gras">Gras</button>
+                    <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" title="Italique">Italique</button>
+                    <button type="button" class="trix-button" data-trix-action="x-heading" title="Titre">H</button>
+                    <button type="button" class="trix-button" data-trix-action="x-quote" title="Citation">"</button>
+                  </span>
+                </div>`;
+        };
+    });
+    function renderShortcodesForPreview(html){
+        if(!html) return '';
+        html = html.replace(/\[youtube:([^\]]+)\]/g, function(_, url){
+            try{ var parsed = new URL(url.trim()); var id=null; if(parsed.hostname.includes('youtu.be')) id = parsed.pathname.slice(1); else if(parsed.hostname.includes('youtube')) id = parsed.searchParams.get('v') || parsed.pathname.split('/').pop(); if(!id) return '<pre>'+url+'</pre>'; return '<div class="video-player"><iframe src="https://www.youtube.com/embed/'+id+'" allowfullscreen></iframe></div>'; }catch(e){return '<pre>'+url+'</pre>'}
         });
+        html = html.replace(/\[image:([^\]|]+)(?:\|([^\]]+))?\]/g, function(_, url, opts){
+            var classes=''; var style=''; if(opts){ opts.split(/[|,]/).forEach(function(o){ o=o.trim(); if(/^(left|right|center)$/.test(o)){ if(o==='left') classes='float-left'; if(o==='right') classes='float-right'; if(o==='center') style='display:block;margin-left:auto;margin-right:auto'; } else if(/^width=/.test(o)){ style += (style?';':'') + 'width:' + o.split('=')[1]; } else if(/^height=/.test(o)){ style += (style?';':'') + 'height:' + o.split('=')[1]; } }); }
+            return '<img src="'+url.trim()+'" class="'+classes+'" style="'+style+'"/>';
+        });
+        return html;
+    }
+    function uploadFileToServer(fileBlob, filename, attachment){
+        var formData = new FormData(); formData.append('file', fileBlob, filename);
+        fetch('/upload',{method:'POST',body:formData}).then(function(r){return r.json()}).then(function(data){ if(data.url) attachment.setAttributes({url: data.url}); }).catch(function(e){console.error('Upload failed',e)});
+    }
+    document.addEventListener('trix-attachment-add', function(event){
+        var attachment = event.attachment; var file = attachment.file; if(!file) return; if(!file.type.startsWith('image/')){ uploadFileToServer(file,file.name,attachment); return; }
+        var choice = prompt("Redimensionner l'image ? Entrez largeur en px (ex:800) ou % (ex:80%). Laisser vide pour taille originale. Annuler pour ne pas uploader."); if(choice===null) return; if(!choice){ uploadFileToServer(file,file.name,attachment); return; }
+        var reader = new FileReader(); reader.onload = function(e){ var img=new Image(); img.onload=function(){ var origW=img.naturalWidth,origH=img.naturalHeight; var targetW=origW; var c=choice.toString().trim(); if(c.endsWith('%')){ var p=parseFloat(c.replace('%','')); if(!isNaN(p)) targetW=Math.round(origW*p/100);} else { var px=parseInt(c,10); if(!isNaN(px)) targetW=px;} if(targetW<=0||targetW===origW){ uploadFileToServer(file,file.name,attachment); return; } var scale=targetW/origW,targetH=Math.round(origH*scale); var canvas=document.createElement('canvas'); canvas.width=targetW; canvas.height=targetH; var ctx=canvas.getContext('2d'); ctx.drawImage(img,0,0,targetW,targetH); canvas.toBlob(function(blob){ uploadFileToServer(blob,file.name,attachment); }, file.type||'image/jpeg', 0.92); }; img.src=e.target.result; }; reader.readAsDataURL(file);
+    });
+    document.addEventListener('trix-action-invoke', function(event){ var action = event.actionName || event.detail && event.detail.actionName; if(action==='x-align-left' || action==='x-align-right'){ var target=event.target||event.detail&&event.detail.target; if(!target) return; var editor = target.editor; var selectedRange = editor.getSelectedRange(); var doc = editor.getDocument(); var attachments = doc.getAttachments(); attachments.forEach(function(att){ var range = att.getRange(); if(selectedRange[0] <= range[0] && range[1] <= selectedRange[1]) att.setAttribute('class', action==='x-align-left'?'float-left':'float-right'); }); } });
+    document.addEventListener('trix-change', function(){ var contentInput = document.querySelector('input[name="content"]'); var preview = document.getElementById('editor-preview'); if(preview && contentInput) preview.innerHTML = renderShortcodesForPreview(contentInput.value); });
+    document.addEventListener('DOMContentLoaded', function(){ var contentInput = document.querySelector('input[name="content"]'); var preview = document.getElementById('editor-preview'); if(preview && contentInput) preview.innerHTML = renderShortcodesForPreview(contentInput.value); });
     </script>
 </body>
+</html>

templates/admin_new_article.html CHANGED Viewed

@@ -7,59 +7,14 @@
     <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/trix.umd.min.js"></script>
     <style>
         body { font-family: Arial, sans-serif; margin: 20px; }
-        form { max-width: 800px; }
         label { display: block; margin-top: 10px; }
-        input, select, button { width: 100%; padding: 10px; margin-top: 5px; }
-        trix-editor { border: 1px solid #ccc; min-height: 300px; }
     </style>
-    <script>
-        document.addEventListener("trix-before-initialize", () => {
-            // Allow more tags in sanitization
-            Trix.config.dompurify.ADD_TAGS = ["iframe", "video", "source", "table", "tr", "td", "th"];
-            Trix.config.dompurify.ADD_ATTR = ["src", "controls", "width", "height"];
-            // Custom toolbar with all options
-            Trix.config.toolbar.getDefaultHTML = () => `
-                <div class="trix-button-row">
-                  <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" tabindex="-1" title="Bold">Bold</button>
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" tabindex="-1" title="Italic">Italic</button>
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" tabindex="-1" title="Strikethrough">Strikethrough</button>
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-link" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" tabindex="-1" title="Link">Link</button>
-                  </span>
-                  <span class="trix-button-group trix-button-group--block-tools" data-trix-button-group="block-tools">
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-heading-1" data-trix-attribute="heading1" tabindex="-1" title="Heading">Heading</button>
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-quote" data-trix-attribute="quote" tabindex="-1" title="Quote">Quote</button>
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-code" data-trix-attribute="code" tabindex="-1" title="Code">Code</button>
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-bullet-list" data-trix-attribute="bullet" tabindex="-1" title="Bullets">Bullets</button>
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-number-list" data-trix-attribute="number" tabindex="-1" title="Numbers">Numbers</button>
-                  </span>
-                  <span class="trix-button-group trix-button-group--file-tools" data-trix-button-group="file-tools">
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-attach" data-trix-action="attachFiles" tabindex="-1" title="Attach Files">Attach Files</button>
-                  </span>
-                  <span class="trix-button-group trix-button-group--image-tools" data-trix-button-group="image-tools">
-                    <button type="button" class="trix-button" data-trix-action="x-align-left" tabindex="-1" title="Align Left">Align Left</button>
-                    <button type="button" class="trix-button" data-trix-action="x-align-right" tabindex="-1" title="Align Right">Align Right</button>
-                  </span>
-                  <span class="trix-button-group trix-button-group--history-tools" data-trix-button-group="history-tools">
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-undo" data-trix-action="undo" data-trix-key="z" tabindex="-1" title="Undo">Undo</button>
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-redo" data-trix-action="redo" data-trix-key="shift+z" tabindex="-1" title="Redo">Redo</button>
-                  </span>
-                </div>
-                <div class="trix-dialogs" data-trix-dialogs>
-                  <div class="trix-dialog trix-dialog--link" data-trix-dialog="href" data-trix-dialog-attribute="href">
-                    <div class="trix-dialog__link-fields">
-                      <input type="url" name="href" class="trix-input trix-input--dialog" placeholder="Enter a URL..." aria-label="URL" required data-trix-input>
-                      <div class="trix-button_group">
-                        <input type="button" class="trix-button trix-button--dialog" value="Link" data-trix-method="setAttribute">
-                        <input type="button" class="trix-button trix-button--dialog" value="Unlink" data-trix-method="removeAttribute">
-                      </div>
-                    </div>
-                  </div>
-                </div>
-            `;
-        });
-    </script>
 </head>
 <body>
     <h1>Nouvel Article</h1>
@@ -78,44 +33,164 @@
         <label for="icon">Image (fichier image):</label>
         <input type="file" id="icon" name="icon" accept="image/*">
         <label for="content">Contenu:</label>
         <input id="content" type="hidden" name="content">
         <trix-editor input="content"></trix-editor>
         <button type="submit">Créer</button>
     </form>
     <script>
-        document.addEventListener("trix-attachment-add", function(event) {
-            var file = event.attachment.file;
-            if (file) {
-                var formData = new FormData();
-                formData.append("file", file);
-                fetch("/upload", {
-                    method: "POST",
-                    body: formData
-                }).then(response => response.json()).then(data => {
-                    event.attachment.setAttributes({url: data.url});
-                }).catch(error => {
-                    console.error("Upload failed:", error);
-                });
             }
         });
-        document.addEventListener("trix-action-invoke", function(event) {
-            const { actionName, target } = event;
-            if (actionName === "x-align-left" || actionName === "x-align-right") {
-                const editor = target.editor;
-                const selectedRange = editor.getSelectedRange();
-                const document = editor.getDocument();
-                const attachments = document.getAttachments();
-                attachments.forEach(attachment => {
-                    const range = attachment.getRange();
-                    if (selectedRange[0] <= range[0] && range[1] <= selectedRange[1]) {
-                        attachment.setAttribute("class", actionName === "x-align-left" ? "float-left" : "float-right");
                     }
                 });
             }
         });
     </script>
 </body>
 </html>

     <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/trix.umd.min.js"></script>
     <style>
         body { font-family: Arial, sans-serif; margin: 20px; }
+        form { max-width: 900px; margin: 0 auto; }
         label { display: block; margin-top: 10px; }
+        input, select, button { width: 100%; padding: 10px; margin-top: 5px; box-sizing: border-box; }
+        trix-editor { border: 1px solid #e9ecef; min-height: 300px; border-radius: 8px; }
+        #editor-preview { margin-top: 1rem; }
+        .article-preview { background: #fff; padding: 1rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
+        .article-preview h1 { font-size: 1.4rem; margin-top: 0; }
     </style>
 </head>
 <body>
     <h1>Nouvel Article</h1>
         <label for="icon">Image (fichier image):</label>
         <input type="file" id="icon" name="icon" accept="image/*">
+        <label for="youtube_url">Lien YouTube (optionnel) :</label>
+        <input type="url" id="youtube_url" name="youtube_url" placeholder="https://www.youtube.com/watch?v=...">
         <label for="content">Contenu:</label>
         <input id="content" type="hidden" name="content">
         <trix-editor input="content"></trix-editor>
+        <p style="font-size:0.9rem;color:#555;margin-top:8px;">Pour insérer une vidéo à un emplacement précis, utilisez le shortcode : <code>[youtube:URL]</code> (ex. <code>[youtube:https://www.youtube.com/watch?v=dQw4w9WgXcQ]</code>).</p>
+        <p style="font-size:0.9rem;color:#555;margin-top:6px;">Pour insérer une image à un emplacement précis, utilisez le shortcode : <code>[image:URL|opts]</code> où <code>opts</code> peut contenir <code>left</code>, <code>right</code>, <code>center</code>, <code>width=300</code>, <code>height=200</code>. Exemples :</p>
+        <ul style="color:#555;margin-top:0;margin-bottom:1rem;">
+            <li><code>[image:https://.../img.jpg|left|width=200]</code></li>
+            <li><code>[image:https://.../img.jpg|center|width=80%]</code></li>
+        </ul>
         <button type="submit">Créer</button>
     </form>
+    <h3>Aperçu</h3>
+    <div id="editor-preview" class="article-preview"></div>
     <script>
+    // Configure Trix toolbar and allowed tags before initialization
+    document.addEventListener('trix-before-initialize', function(){
+        // Allow iframes and basic attributes via dompurify config
+        if (window.Trix && Trix.config && Trix.config.dompurify){
+            Trix.config.dompurify.ADD_TAGS = ["iframe","video","source","table","tr","td","th","img"];
+            Trix.config.dompurify.ADD_ATTR = ["src","controls","width","height","class","style","allowfullscreen"];
+        }
+        // Simpler custom toolbar (keeps Trix defaults but adds headings/quote)
+        Trix.config.toolbar.getDefaultHTML = function(){
+            return `
+                <div class="trix-button-row">
+                  <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
+                    <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" title="Gras">Gras</button>
+                    <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" title="Italique">Italique</button>
+                    <button type="button" class="trix-button" data-trix-action="x-heading" title="Titre">H</button>
+                    <button type="button" class="trix-button" data-trix-action="x-quote" title="Citation">"</button>
+                  </span>
+                  <span class="trix-button-group trix-button-group--history-tools" data-trix-button-group="history-tools">
+                    <button type="button" class="trix-button" data-trix-action="undo" title="Annuler">⟲</button>
+                    <button type="button" class="trix-button" data-trix-action="redo" title="Refaire">⟲</button>
+                  </span>
+                </div>`;
+        };
+    });
+    // Render shortcodes to HTML for preview
+    function renderShortcodesForPreview(html){
+        if(!html) return '';
+        // YouTube
+        html = html.replace(/\[youtube:([^\]]+)\]/g, function(_, url){
+            try{
+                var parsed = new URL(url.trim());
+                var id = null;
+                if(parsed.hostname.includes('youtu.be')) id = parsed.pathname.slice(1);
+                else if(parsed.hostname.includes('youtube')) id = parsed.searchParams.get('v') || parsed.pathname.split('/').pop();
+                if(!id) return '<pre>'+url+'</pre>';
+                return '<div class="video-player"><iframe src="https://www.youtube.com/embed/'+id+'" allowfullscreen></iframe></div>';
+            }catch(e){
+                return '<pre>'+url+'</pre>';
             }
         });
+        // Image
+        html = html.replace(/\[image:([^\]|]+)(?:\|([^\]]+))?\]/g, function(_, url, opts){
+            var classes = '';
+            var style = '';
+            if(opts){
+                opts.split(/[|,]/).forEach(function(o){
+                    o = o.trim();
+                    if(/^(left|right|center)$/.test(o)){
+                        if(o==='left') classes='float-left';
+                        if(o==='right') classes='float-right';
+                        if(o==='center') style='display:block;margin-left:auto;margin-right:auto';
+                    } else if(/^width=/.test(o)){
+                        style += (style?';':'') + 'width:' + o.split('=')[1];
+                    } else if(/^height=/.test(o)){
+                        style += (style?';':'') + 'height:' + o.split('=')[1];
                     }
                 });
             }
+            return '<img src="'+url.trim()+'" class="'+classes+'" style="'+style+'"/>';
         });
+        return html;
+    }
+    // Upload helper
+    function uploadFileToServer(fileBlob, filename, attachment){
+        var formData = new FormData();
+        formData.append('file', fileBlob, filename);
+        fetch('/upload', { method:'POST', body: formData }).then(function(res){ return res.json(); }).then(function(data){
+            if(data.url) attachment.setAttributes({ url: data.url });
+        }).catch(function(err){ console.error('Upload failed', err); });
+    }
+    // Handle attachments (drag/drop or paste into Trix)
+    document.addEventListener('trix-attachment-add', function(event){
+        var attachment = event.attachment;
+        var file = attachment.file;
+        if(!file) return;
+        if(!file.type.startsWith('image/')){ uploadFileToServer(file, file.name, attachment); return; }
+        var choice = prompt("Redimensionner l'image ? Entrez largeur en px (ex:800) ou % (ex:80%). Laisser vide pour taille originale. Annuler pour ne pas uploader.");
+        if(choice === null) return; // canceled
+        if(!choice){ uploadFileToServer(file, file.name, attachment); return; }
+        var reader = new FileReader();
+        reader.onload = function(e){
+            var img = new Image();
+            img.onload = function(){
+                var origW = img.naturalWidth, origH = img.naturalHeight;
+                var targetW = origW;
+                var c = choice.toString().trim();
+                if(c.endsWith('%')){
+                    var p = parseFloat(c.replace('%',''));
+                    if(!isNaN(p)) targetW = Math.round(origW * p / 100);
+                } else {
+                    var px = parseInt(c,10);
+                    if(!isNaN(px)) targetW = px;
+                }
+                if(targetW <= 0 || targetW === origW){ uploadFileToServer(file, file.name, attachment); return; }
+                var scale = targetW / origW; var targetH = Math.round(origH * scale);
+                var canvas = document.createElement('canvas'); canvas.width = targetW; canvas.height = targetH;
+                var ctx = canvas.getContext('2d'); ctx.drawImage(img,0,0,targetW,targetH);
+                canvas.toBlob(function(blob){ uploadFileToServer(blob, file.name, attachment); }, file.type || 'image/jpeg', 0.92);
+            };
+            img.src = e.target.result;
+        };
+        reader.readAsDataURL(file);
+    });
+    // alignment helper via custom action hooks
+    document.addEventListener('trix-action-invoke', function(event){
+        var action = event.actionName || event.detail && event.detail.actionName;
+        // some Trix builds use different event payloads; we handle common case above
+        if(action === 'x-align-left' || action === 'x-align-right'){
+            var target = event.target || event.detail && event.detail.target; if(!target) return;
+            var editor = target.editor;
+            var selectedRange = editor.getSelectedRange();
+            var doc = editor.getDocument();
+            var attachments = doc.getAttachments();
+            attachments.forEach(function(att){ var range = att.getRange(); if(selectedRange[0] <= range[0] && range[1] <= selectedRange[1]){ att.setAttribute('class', action === 'x-align-left' ? 'float-left' : 'float-right'); }});
+        }
+    });
+    // Live preview update
+    document.addEventListener('trix-change', function(){
+        var contentInput = document.querySelector('input[name="content"]');
+        var preview = document.getElementById('editor-preview');
+        if(preview && contentInput) preview.innerHTML = renderShortcodesForPreview(contentInput.value);
+    });
+    // initialize preview on load
+    document.addEventListener('DOMContentLoaded', function(){
+        var contentInput = document.querySelector('input[name="content"]');
+        var preview = document.getElementById('editor-preview');
+        if(preview && contentInput) preview.innerHTML = renderShortcodesForPreview(contentInput.value);
+    });
     </script>
 </body>
 </html>

templates/article.html CHANGED Viewed

@@ -16,20 +16,26 @@
     </ol>
 </nav>
-<div class="article-content">
-    <h1>{{ article.title }}</h1>
-    <div class="trix-content">
-        {{ article.content | safe }}
-    </div>
-</div>
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    document.querySelectorAll('.trix-content img').forEach(img => {
-        img.addEventListener('click', () => {
-            window.open(img.src, '_blank');
-        });
-    });
-});
-</script>
 {% endblock %}

     </ol>
 </nav>
+<div class="article-content">
+    <h1>{{ article.title }}</h1>
+    {% set embed = article.youtube_url | youtube_embed %}
+    {% if embed %}
+    <div class="video-player" style="margin-bottom: 1rem;">
+        <iframe width="100%" height="480" src="{{ embed }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    </div>
+    {% endif %}
+    <div class="trix-content">
+        {{ (article.content | render_embeds) | safe }}
+    </div>
+</div>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    document.querySelectorAll('.trix-content img').forEach(img => {
+        img.addEventListener('click', () => {
+            window.open(img.src, '_blank');
+        });
+    });
+});
+</script>
 {% endblock %}

templates/articles.html CHANGED Viewed

@@ -12,14 +12,12 @@
 </nav>
 <h2 class="mb-4">Articles pour {{ category.name }}</h2>
-<div class="row">
     {% for article in articles %}
-    <div class="col-12 mb-3">
-        <div class="card" onclick="window.location.href='/articles/{{ article.id }}'" style="cursor: pointer;">
-            <div class="card-body">
-                <h5 class="card-title">{{ article.title }}</h5>
-                <p class="card-text text-muted">Cliquez pour lire l'article</p>
-            </div>
         </div>
     </div>
     {% endfor %}

 </nav>
 <h2 class="mb-4">Articles pour {{ category.name }}</h2>
+<div class="cards-grid">
     {% for article in articles %}
+    <div class="card" onclick="window.location.href='/articles/{{ article.id }}'" style="cursor:pointer;">
+        <div class="card-body">
+            <h5 class="card-title">{{ article.title }}</h5>
+            <p class="card-text text-muted">Cliquez pour lire</p>
         </div>
     </div>
     {% endfor %}

templates/base.html CHANGED Viewed

@@ -19,7 +19,7 @@
     <nav class="navbar">
         <div class="container">
-            <ul class="nav">
                 <li class="nav-item">
                     <a class="nav-link" href="{{ url_for('home') }}">Accueil</a>
                 </li>

     <nav class="navbar">
         <div class="container">
+            <ul class="nav nav-links">
                 <li class="nav-item">
                     <a class="nav-link" href="{{ url_for('home') }}">Accueil</a>
                 </li>

templates/home.html CHANGED Viewed

@@ -4,16 +4,14 @@
 {% block content %}
 <h2 class="mb-4">Choisissez une matière</h2>
-<div class="row">
     {% for subject in subjects %}
-    <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
-        <div class="card h-100" onclick="window.location.href='/subjects/{{ subject.id }}/categories'" style="cursor: pointer;">
-            <div class="card-body text-center">
-                {% if subject.icon_url %}
-                <img src="{{ subject.icon_url }}" alt="{{ subject.name }}" class="mb-3" style="width: 60px; height: 60px; object-fit: cover; border-radius: 50%;">
-                {% endif %}
-                <h5 class="card-title">{{ subject.name }}</h5>
-            </div>
         </div>
     </div>
     {% endfor %}

 {% block content %}
 <h2 class="mb-4">Choisissez une matière</h2>
+<div class="cards-grid">
     {% for subject in subjects %}
+    <div class="card" onclick="window.location.href='/subjects/{{ subject.id }}/categories'" style="cursor:pointer;">
+        {% if subject.icon_url %}
+        <img src="{{ subject.icon_url }}" alt="{{ subject.name }}" class="card-img-top" style="width:80px;height:80px;border-radius:50%;object-fit:cover;margin:1rem auto 0;display:block;">
+        {% endif %}
+        <div class="card-body text-center">
+            <h5 class="card-title">{{ subject.name }}</h5>
         </div>
     </div>
     {% endfor %}