Add display article configurator (font family, font size, line height and max width)

app/DoctrineMigrations/Version20230729093853.php

@@ -0,0 +1,47 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Application\Migrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Wallabag\CoreBundle\Doctrine\WallabagMigration;
+
+/**
+ * Add custom_css column to config table.
+ */
+final class Version20230729093853 extends WallabagMigration
+{
+    public function up(Schema $schema): void
+    {
+        $configTable = $schema->getTable($this->getTable('config'));
+
+        $this->skipIf($configTable->hasColumn('custom_css'), 'It seems that you already played this migration.');
+
+        $configTable->addColumn('custom_css', 'text', [
+            'notnull' => false,
+        ]);
+
+        $configTable->addColumn('font', 'text', [
+            'notnull' => false,
+        ]);
+
+        $configTable->addColumn('fontsize', 'float', [
+            'notnull' => false,
+        ]);
+
+        $configTable->addColumn('line_height', 'float', [
+            'notnull' => false,
+        ]);
+
+        $configTable->addColumn('max_width', 'float', [
+            'notnull' => false,
+        ]);
+    }
+
+    public function down(Schema $schema): void
+    {
+        $configTable = $schema->getTable($this->getTable('config'));
+        $configTable->dropColumn('custom_css');
+    }
+}

app/Resources/static/themes/_global/index.js

@@ -10,6 +10,11 @@ import 'mathjax/es5/tex-svg';
 /* Fonts */
 import 'material-design-icons-iconfont/dist/material-design-icons.css';
 import 'lato-font/css/lato-font.css';
+import 'open-dyslexic/open-dyslexic-regular.css';
+import '@fontsource/atkinson-hyperlegible';
+import '@fontsource/eb-garamond';
+import '@fontsource/montserrat';
+import '@fontsource/oswald';
 import './global.scss';
 
 /* Shortcuts */
@@ -26,7 +31,7 @@ import { savePercent, retrievePercent } from './js/tools';
  ========================================================================== */
 
 $(document).ready(() => {
-  if ($('article').length) {
+  if ($('#article').length) {
     const app = new annotator.App();
 
     app.include(annotator.ui.main, {

app/Resources/static/themes/material/css/article.scss

@@ -2,7 +2,7 @@
    Article
    ========================================================================== */
 
-#article {
+#article, #preview-article {
   font-size: 20px;
   margin: 0 auto;
   max-width: 45em;

app/Resources/static/themes/material/css/cards.scss

@@ -324,6 +324,12 @@ a.original:not(.waves-effect) {
   height: 3rem;
 }
 
+.settings .settings-range-label {
+  position: absolute;
+  top: -14px;
+  font-size: 0.8rem;
+}
+
 .entries-row {
   display: grid;
   margin: 0.4rem 0 0;

app/Resources/static/themes/material/index.js

@@ -8,7 +8,9 @@ import 'materialize-css/dist/js/materialize';
 import '../_global/index';
 
 /* Tools */
-import { initExport, initFilters, initRandom } from './js/tools';
+import {
+  initExport, initFilters, initRandom, initPreviewText,
+} from './js/tools';
 
 /* Import shortcuts */
 import './js/shortcuts/main';
@@ -177,6 +179,7 @@ $(document).ready(() => {
   initRandom();
   stickyNav();
   articleScroll();
+  initPreviewText();
 
   const toggleNav = (toShow, toFocus) => {
     $('.nav-panel-actions').hide(100);
@@ -199,6 +202,29 @@ $(document).ready(() => {
     return false;
   });
 
+  $('#config_fontsize').on('input', () => {
+    const value = $('#config_fontsize').val();
+    const css = `${value}em`;
+    $('#preview-content').css('font-size', css);
+  });
+
+  $('#config_font').on('change', () => {
+    const value = $('#config_font').val();
+    $('#preview-content').css('font-family', value);
+  });
+
+  $('#config_lineHeight').on('input', () => {
+    const value = $('#config_lineHeight').val();
+    const css = `${value}em`;
+    $('#preview-content').css('line-height', css);
+  });
+
+  $('#config_maxWidth').on('input', () => {
+    const value = $('#config_maxWidth').val();
+    const css = `${value}em`;
+    $('#preview-article').css('max-width', css);
+  });
+
   const materialAddForm = $('.nav-panel-add');
   materialAddForm.on('submit', () => {
     materialAddForm.addClass('disabled');

app/Resources/static/themes/material/js/tools.js

@@ -29,8 +29,25 @@ function initRandom() {
   }
 }
 
+function initPreviewText() {
+  // no display if preview_text not available
+  if ($('div').is('#preview-article')) {
+    const defaultFontFamily = $('#config_font').val();
+    const defaultFontSize = $('#config_fontsize').val();
+    const defaultLineHeight = $('#config_lineHeight').val();
+    const defaultMaxWidth = $('#config_maxWidth').val();
+    const previewContent = $('#preview-content');
+
+    previewContent.css('font-family', defaultFontFamily);
+    previewContent.css('font-size', `${defaultFontSize}em`);
+    previewContent.css('line-height', `${defaultLineHeight}em`);
+    $('#preview-article').css('max-width', `${defaultMaxWidth}em`);
+  }
+}
+
 export {
   initExport,
   initFilters,
   initRandom,
+  initPreviewText,
 };

app/config/services.yml

@@ -30,6 +30,7 @@ services:
             $senderName: "%scheb_two_factor.email.sender_name%"
             $storeArticleHeaders: '@=service(''craue_config'').get(''store_article_headers'')'
             $supportUrl: '@=service(''craue_config'').get(''wallabag_support_url'')'
+            $fonts: '%wallabag_core.fonts%'
 
     Wallabag\AnnotationBundle\:
         resource: '../../src/Wallabag/AnnotationBundle/*'
@@ -182,6 +183,9 @@ services:
     MatomoTwigExtension\MatomoTwigExtension:
         public: false
 
+    ScssPhp\ScssPhp\Compiler:
+        public: false
+
     Wallabag\CoreBundle\Event\Listener\UserLocaleListener:
         tags:
             - { name: kernel.event_listener, event: security.interactive_login, method: onInteractiveLogin }

app/config/wallabag.yml

@@ -153,6 +153,15 @@ wallabag_core:
             rule: host = "feeds.reuters.com"
         -
             rule: _all ~ "https?://www\.lemonde\.fr/tiny.*"
+    fonts:
+        - 'Sans-serif'
+        - 'Serif'
+        - 'Atkinson Hyperlegible'
+        - 'EB Garamond'
+        - 'Lato'
+        - 'Montserrat'
+        - 'OpenDyslexicRegular'
+        - 'Oswald'
 
 wallabag_import:
     allow_mimetypes: ['application/octet-stream', 'application/json', 'text/plain', 'text/csv', 'text/html']