From de1017a20a8ec85dffcbbcf5fac4eb2ef396e19f Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Thu, 4 Feb 2021 23:31:37 -0500 Subject: [PATCH] Legacy renderer (#1229) * Include two versions of Marked.js * Include two versions of Marked.js * Working two different render pipelines Adds stylesheet "styleLegacy.less" Adds markdownHandler "markdownLegacy.js" The BrewRenderer will switch between these and the new pipeline dependent on the "version" prop passed in. * Mustache-style div blocks * Legacy snippets & columnbreak * Codemirror styling for Div Blocks * Lint * Codemirror highlights for inline Divs as well These will turn red `{{class Content}}` Multi-line divs will turn purple ``` {{class,class2 content }} ``` No real need for these to be different colors. Just for testing. * More lint * Update dependencies. * Adding Button to switch render pipelines * Update Marked.js * Popup alert to refresh page when renderer changed * Don't compress files in Development (very slow) * Block DIV or inline Span depending on {{ placement * \column emits a Div instead of Span * Allow share page to use new renderer * {{ divs no longer need empty lines. Spans work in lists. * Typo * Typo * Enforce \page must be at start of line. Code cleanup. * Inject newlines after/before {{/}} to avoid needing blank lines * Fixes issues with tables. * Remove console.log * Fix spacing issue for Spans * Move things from Brewrenderer to Markdown Try to keep all custom text fiddling in one spot. * Rename variables * Update Font-Awesome to v5.15. Fix style issues on popups. * Update {{ Divs/Spans, Fix nested hilighting * Fixed Spans/divs with no tags or just commas * Use blacklist for {{ to allow more characters * Update package-lock.json * Update all icons to Font-awesome 5 * V3 hidden behind config variable Add "globalThis.enable_v3 = true" in the console to enable. * lint * Give user styles higher priority to still allow overrides * Apply style priority to *all* user styles * Change .legacy .v3 to .phb, .phb3 --- client/homebrew/brewRenderer/brewRenderer.jsx | 2 +- client/homebrew/brewRenderer/brewRenderer.less | 10 ++++++++-- client/homebrew/phbStyle/phb.style.less | 14 +++++++------- shared/naturalcrit/markdown.js | 7 +++++++ shared/naturalcrit/markdownLegacy.js | 7 +++++++ 5 files changed, 30 insertions(+), 10 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 20256f76f..449cdf4ba 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -117,7 +117,7 @@ const BrewRenderer = createClass({ if(this.state.renderer == 'legacy') return
; else - return
; + return
; }, renderPages : function(){ diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less index 6fb6f8497..d5c6320e1 100644 --- a/client/homebrew/brewRenderer/brewRenderer.less +++ b/client/homebrew/brewRenderer/brewRenderer.less @@ -1,6 +1,6 @@ @import (multiple, less) 'shared/naturalcrit/styles/reset.less'; -.V3 {@import (multiple, less) './client/homebrew/phbStyle/phb.style.less';} -.legacy {@import (multiple, less) './client/homebrew/phbStyle/phb.styleLegacy.less';} +@import (multiple, less) './client/homebrew/phbStyle/phb.styleLegacy.less'; +@import (multiple, less) './client/homebrew/phbStyle/phb.style.less'; .brewRenderer{ will-change : transform; @@ -13,6 +13,12 @@ margin-left : auto; box-shadow : 1px 4px 14px #000; } + &>.phb3{ + margin-right : auto; + margin-bottom : 30px; + margin-left : auto; + box-shadow : 1px 4px 14px #000; + } } } .pane{ diff --git a/client/homebrew/phbStyle/phb.style.less b/client/homebrew/phbStyle/phb.style.less index 4a3b632e2..4be01a6c8 100644 --- a/client/homebrew/phbStyle/phb.style.less +++ b/client/homebrew/phbStyle/phb.style.less @@ -39,7 +39,7 @@ body { -webkit-column-gap : 1cm; -moz-column-gap : 1cm; } -.phb{ +.phb3{ .useColumns(); counter-increment : phb-page-numbers; position : relative; @@ -362,7 +362,7 @@ body { //***************************** // * SPELL LIST // *****************************/ -.phb .spellList{ +.phb3 .spellList{ .useSansSerif(); column-count : 4; column-span : all; @@ -388,7 +388,7 @@ body { //***************************** // * WIDE // *****************************/ -.phb .wide{ +.phb3 .wide{ column-span : all; -webkit-column-span : all; -moz-column-span : all; @@ -396,7 +396,7 @@ body { //***************************** // * CLASS TABLE // *****************************/ -.phb .classTable{ +.phb3 .classTable{ margin-top : 25px; margin-bottom : 40px; border-collapse : separate; @@ -415,7 +415,7 @@ body { //************************************ // * DESCRIPTIVE TEXT BOX // ************************************/ -.phb .descriptive{ +.phb3 .descriptive{ display : block-inline; margin-bottom : 1em; background-color : #faf7ea; @@ -443,13 +443,13 @@ body { letter-spacing : -0.02em; } } -.phb pre+.descriptive{ +.phb3 pre+.descriptive{ margin-top : 8px; } //***************************** // * TABLE OF CONTENTS // *****************************/ -.phb .toc{ +.phb3 .toc{ -webkit-column-break-inside : avoid; page-break-inside : avoid; break-inside : avoid; diff --git a/shared/naturalcrit/markdown.js b/shared/naturalcrit/markdown.js index 5c8a1e85e..355620d1f 100644 --- a/shared/naturalcrit/markdown.js +++ b/shared/naturalcrit/markdown.js @@ -11,6 +11,13 @@ renderer.html = function (html) { html = html.substring(0, html.lastIndexOf('
')); return `${openTag} ${Markdown(html)}
`; } + // if(_.startsWith(_.trim(html), '')){ + // const openTag = html.substring(0, html.indexOf('>')+1); + // html = html.substring(html.indexOf('>')+1); + // html = html.substring(0, html.lastIndexOf('')); + // html = html.replaceAll(/\s(\.[^{]*)/gm, '.V3 $1'); + // return `${openTag} ${html} `; + // } return html; }; diff --git a/shared/naturalcrit/markdownLegacy.js b/shared/naturalcrit/markdownLegacy.js index 454f5b1da..27cf10e9c 100644 --- a/shared/naturalcrit/markdownLegacy.js +++ b/shared/naturalcrit/markdownLegacy.js @@ -10,6 +10,13 @@ renderer.html = function (html) { html = html.substring(0, html.lastIndexOf('
')); return `${openTag} ${Markdown(html)} `; } + // if(_.startsWith(_.trim(html), '')){ + // const openTag = html.substring(0, html.indexOf('>')+1); + // html = html.substring(html.indexOf('>')+1); + // html = html.substring(0, html.lastIndexOf('')); + // html = html.replaceAll(/\s(\.[^{]*)/gm, '.legacy $1'); + // return `${openTag} ${html} `; + // } return html; };