quill for a blog page

assets/static/css/theme.css

@@ -575,6 +575,117 @@ body {
 /* --- square the icon buttons ------------------------------- */
 .btn-circle { border-radius: 0; }
 
+/* --- blog editor ------------------------------------------- */
+.blog-editor {
+  min-height: 24rem;
+  background: oklch(var(--b1));
+}
+.blog-editor .ql-editor {
+  min-height: 24rem;
+  font-size: 1rem;
+  line-height: 1.7;
+}
+.ql-toolbar.ql-snow,
+.ql-container.ql-snow {
+  border-color: oklch(var(--b3));
+}
+.ql-toolbar.ql-snow {
+  background: oklch(var(--b2));
+}
+.ql-snow .ql-stroke {
+  stroke: oklch(var(--bc));
+}
+.ql-snow .ql-fill {
+  fill: oklch(var(--bc));
+}
+.ql-snow .ql-picker,
+.ql-snow .ql-picker-options {
+  color: oklch(var(--bc));
+}
+.ql-snow .ql-picker-options {
+  background: oklch(var(--b1));
+  border-color: oklch(var(--b3));
+}
+.blog-image-size-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+}
+.blog-image-size-controls.hidden {
+  display: none;
+}
+.blog-image-size-controls button {
+  border: 1px solid oklch(var(--b3));
+  background: oklch(var(--b2));
+  padding: 0.3rem 0.65rem;
+  line-height: 1;
+}
+.blog-image-size-controls button:hover {
+  border-color: oklch(var(--p));
+  color: oklch(var(--p));
+}
+.blog-image-size-controls label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.blog-image-size-controls input {
+  width: 6rem;
+}
+.blog-editor img,
+.blog-content img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 1rem auto;
+  border-radius: 0.25rem;
+}
+.blog-editor img {
+  cursor: pointer;
+}
+.blog-image-small {
+  width: min(100%, 18rem);
+}
+.blog-image-medium {
+  width: min(100%, 34rem);
+}
+.blog-image-full {
+  width: 100%;
+}
+.blog-content {
+  line-height: 1.75;
+}
+.blog-content h2 {
+  margin: 1.5rem 0 0.75rem;
+  font-size: 1.35rem;
+  font-weight: 700;
+}
+.blog-content h3 {
+  margin: 1.25rem 0 0.5rem;
+  font-size: 1.15rem;
+  font-weight: 700;
+}
+.blog-content p,
+.blog-content ul,
+.blog-content ol {
+  margin: 0.75rem 0;
+}
+.blog-content ul {
+  list-style: disc;
+  padding-left: 1.4rem;
+}
+.blog-content ol {
+  list-style: decimal;
+  padding-left: 1.4rem;
+}
+.blog-content a {
+  color: oklch(var(--p));
+  text-decoration: underline;
+}
+
 /* --- small screens ----------------------------------------- */
 @media (max-width: 767px) {
   .term-nav { gap: 0.5rem; }

assets/static/js/blog-editor.js

@@ -0,0 +1,158 @@
+(function () {
+  function firstFilenameFromEditor(editor) {
+    var image = editor.root.querySelector('img[src^="/images/"]');
+    if (!image) return '';
+    return image.getAttribute('src').replace('/images/', '');
+  }
+
+  function setImageSize(image, size) {
+    image.classList.remove('blog-image-small', 'blog-image-medium', 'blog-image-full');
+    image.style.removeProperty('width');
+    image.style.removeProperty('height');
+    image.classList.add('blog-image-' + size);
+  }
+
+  function setImageWidth(image, width) {
+    var px = parseInt(width, 10);
+    if (!Number.isFinite(px) || px < 40) return;
+    image.classList.remove('blog-image-small', 'blog-image-medium', 'blog-image-full');
+    image.style.width = Math.min(px, 1200) + 'px';
+    image.style.height = 'auto';
+  }
+
+  function normalizeEditorImages(root) {
+    root.querySelectorAll('img').forEach(function (image) {
+      if (
+        !image.classList.contains('blog-image-small')
+        && !image.classList.contains('blog-image-medium')
+        && !image.classList.contains('blog-image-full')
+      ) {
+        image.classList.add('blog-image-full');
+      }
+    });
+  }
+
+  function initEditor(form) {
+    var editorEl = form.querySelector('[data-rich-editor]');
+    var contentInput = form.querySelector('[data-rich-content]');
+    var featuredInput = form.querySelector('[data-featured-image-id]');
+    var status = form.querySelector('[data-rich-status]');
+    var imageControls = form.querySelector('[data-image-size-controls]');
+    var imageWidthInput = form.querySelector('[data-image-width]');
+    if (!editorEl || !contentInput || !window.Quill) return;
+
+    var selectedImage = null;
+    var toolbar = [
+      [{ header: [2, 3, false] }],
+      ['bold', 'italic'],
+      [{ list: 'ordered' }, { list: 'bullet' }],
+      ['link', 'image'],
+      ['clean']
+    ];
+    var editor = new Quill(editorEl, {
+      modules: { toolbar: toolbar },
+      placeholder: '',
+      theme: 'snow'
+    });
+    var initialContent = contentInput.value.trim();
+    if (initialContent) {
+      if (initialContent.indexOf('<') >= 0) editor.clipboard.dangerouslyPasteHTML(initialContent);
+      else editor.setText(initialContent);
+      normalizeEditorImages(editor.root);
+    }
+
+    function syncContent() {
+      normalizeEditorImages(editor.root);
+      contentInput.value = editor.root.innerHTML;
+      if (featuredInput && !featuredInput.value) featuredInput.value = firstFilenameFromEditor(editor);
+    }
+
+    function setStatus(message) {
+      if (status) status.textContent = message || '';
+    }
+
+    function chooseImageFile() {
+      var input = document.createElement('input');
+      input.type = 'file';
+      input.accept = 'image/jpeg,image/png,image/webp,image/gif';
+      input.addEventListener('change', function () {
+        var file = input.files && input.files[0];
+        if (!file) return;
+        uploadImage(file);
+      });
+      input.click();
+    }
+
+    async function uploadImage(file) {
+      var formData = new FormData();
+      formData.append('file', file);
+      setStatus(status ? status.dataset.uploading : '');
+      try {
+        var response = await fetch('/images/upload', {
+          method: 'POST',
+          body: formData,
+          credentials: 'same-origin'
+        });
+        if (!response.ok) throw new Error('upload failed');
+        var result = await response.json();
+        var range = editor.getSelection(true);
+        editor.insertEmbed(range.index, 'image', result.url, 'user');
+        editor.setSelection(range.index + 1, 0, 'silent');
+        window.setTimeout(function () {
+          var images = editor.root.querySelectorAll('img');
+          var image = images[images.length - 1];
+          if (image) {
+            setImageSize(image, 'full');
+            selectedImage = image;
+            if (imageControls) imageControls.classList.remove('hidden');
+          }
+          if (featuredInput && !featuredInput.value) featuredInput.value = result.filename;
+          syncContent();
+        }, 0);
+        setStatus(status ? status.dataset.uploaded : '');
+      } catch (_error) {
+        setStatus(status ? status.dataset.error : '');
+      }
+    }
+
+    editor.getModule('toolbar').addHandler('image', chooseImageFile);
+
+    editor.root.addEventListener('click', function (event) {
+      if (event.target && event.target.tagName === 'IMG') {
+        selectedImage = event.target;
+        if (imageWidthInput) imageWidthInput.value = parseInt(selectedImage.style.width, 10) || '';
+        if (imageControls) imageControls.classList.remove('hidden');
+      }
+    });
+
+    if (imageControls) {
+      imageControls.addEventListener('click', function (event) {
+        var button = event.target.closest('[data-image-size]');
+        if (button && selectedImage) {
+          setImageSize(selectedImage, button.dataset.imageSize);
+          if (imageWidthInput) imageWidthInput.value = '';
+          syncContent();
+        }
+      });
+    }
+
+    if (imageWidthInput) {
+      imageWidthInput.addEventListener('change', function () {
+        if (!selectedImage) return;
+        setImageWidth(selectedImage, imageWidthInput.value);
+        syncContent();
+      });
+    }
+
+    editor.on('text-change', syncContent);
+    form.addEventListener('submit', syncContent);
+    syncContent();
+  }
+
+  document.addEventListener('DOMContentLoaded', function () {
+    document.querySelectorAll('[data-rich-editor]').forEach(function (editorEl) {
+      var form = editorEl.closest('form');
+      if (form) initEditor(form);
+    });
+  });
+})();

assets/static/vendor/quill/LICENSE

@@ -0,0 +1,31 @@
+Copyright (c) 2017-2024, Slab
+Copyright (c) 2014, Jason Chen
+Copyright (c) 2013, salesforce.com
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions
+are met:
+
+1. Redistributions of source code must retain the above copyright
+   notice, this list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright
+   notice, this list of conditions and the following disclaimer in the
+   documentation and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
+TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

assets/static/vendor/quill/quill.js.LICENSE.txt

@@ -0,0 +1,7 @@
+/*!
+ * Quill Editor v2.0.3
+ * https://quilljs.com
+ * Copyright (c) 2017-2024, Slab
+ * Copyright (c) 2014, Jason Chen
+ * Copyright (c) 2013, salesforce.com
+ */