Skip to content

Commit

Permalink
Update Production (#1249)
Browse files Browse the repository at this point in the history 
* Legacy renderer (#1184)

* 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

* 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

* Revert accidental color change

* Fix brew styles overwriting each other. (#1230)

* Fix /page not working in legacy mode. (#1233)

* Fix brew styles overwriting each other.

* Word wrapping, start fixing spacing on Title letter

* Fix \page in legacy brews when not at line start

* Default 'legacy' if not set. Auto-change styles.

* Fix brew styles overwriting each other.

* Word wrapping, start fixing spacing on Title letter

* Fix \page in legacy brews when not at line start

* Fix Page Padding

* Set 'legacy' as default value if not set in brew saved file.

* Apply Legacy\v3 renderer to print page (#1235)
  • Loading branch information
@calculuschild
calculuschild authored Feb 19, 2021
1 parent 6a2e393 commit d57df84
Show file tree
Hide file tree
Showing 53 changed files with 2,068 additions and 190 deletions.
2 changes: 1 addition & 1 deletion client/admin/admin.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const Admin = createClass({

<header>
<div className='container'>
<i className='fa fa-rocket' />
<i className='fas fa-rocket' />
homebrewery admin
</div>
</header>
Expand Down
6 changes: 3 additions & 3 deletions client/admin/brewCleanup/brewCleanup.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ const BrewCleanup = createClass({
return <div className='removeBox'>
<button onClick={this.cleanup} className='remove'>
{this.state.pending
? <i className='fa fa-spin fa-spinner' />
: <span><i className='fa fa-times' /> Remove</span>
? <i className='fas fa-spin fa-spinner' />
: <span><i className='fas fa-times' /> Remove</span>
}
</button>
<span>Found {this.state.count} Brews that could be removed. </span>
Expand All @@ -59,7 +59,7 @@ const BrewCleanup = createClass({

<button onClick={this.prime} className='query'>
{this.state.pending
? <i className='fa fa-spin fa-spinner' />
? <i className='fas fa-spin fa-spinner' />
: 'Query Brews'
}
</button>
Expand Down
6 changes: 3 additions & 3 deletions client/admin/brewCompress/brewCompress.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@ const BrewCompress = createClass({
return <div className='removeBox'>
<button onClick={this.cleanup} className='remove'>
{this.state.pending
? <i className='fa fa-spin fa-spinner' />
: <span><i className='fa fa-compress' /> compress </span>
? <i className='fas fa-spin fa-spinner' />
: <span><i className='fas fa-compress' /> compress </span>
}
</button>
{this.state.pending
Expand All @@ -76,7 +76,7 @@ const BrewCompress = createClass({

<button onClick={this.prime} className='query'>
{this.state.pending
? <i className='fa fa-spin fa-spinner' />
? <i className='fas fa-spin fa-spinner' />
: 'Query Brews'
}
</button>
Expand Down
2 changes: 1 addition & 1 deletion client/admin/brewLookup/brewLookup.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const BrewLookup = createClass({
<h2>Brew Lookup</h2>
<input type='text' value={this.state.query} onChange={this.handleChange} placeholder='edit or share id' />
<button onClick={this.lookup}>
<i className={cx('fa', {
<i className={cx('fas', {
'fa-search' : !this.state.searching,
'fa-spin fa-spinner' : this.state.searching,
})} />
Expand Down
2 changes: 1 addition & 1 deletion client/admin/stats/stats.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const Stats = createClass({
</dl>

{this.state.fetching
&& <div className='pending'><i className='fa fa-spin fa-spinner' /></div>
&& <div className='pending'><i className='fas fa-spin fa-spinner' /></div>
}
</div>;
}
Expand Down
43 changes: 30 additions & 13 deletions client/homebrew/brewRenderer/brewRenderer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ const createClass = require('create-react-class');
const _ = require('lodash');
const cx = require('classnames');

const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
const Markdown = require('naturalcrit/markdown.js');
const ErrorBar = require('./errorBar/errorBar.jsx');

Expand All @@ -18,12 +19,18 @@ const PPR_THRESHOLD = 50;
const BrewRenderer = createClass({
getDefaultProps : function() {
return {
text : '',
errors : []
text : '',
renderer : 'legacy',
errors : []
};
},
getInitialState : function() {
const pages = this.props.text.split('\\page');
let pages;
if(this.props.renderer == 'legacy') {
pages = this.props.text.split('\\page');
} else {
pages = this.props.text.split(/^\\page/gm);
}

return {
viewablePageNumber : 0,
Expand All @@ -34,7 +41,7 @@ const BrewRenderer = createClass({
usePPR : pages.length >= PPR_THRESHOLD,
visibility : 'hidden',
initialContent : `<!DOCTYPE html><html><head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
<link href='/homebrew/bundle.css' rel='stylesheet' />
<base target=_blank>
Expand All @@ -48,12 +55,19 @@ const BrewRenderer = createClass({
window.removeEventListener('resize', this.updateSize);
},

componentWillReceiveProps : function(nextProps) {
const pages = nextProps.text.split('\\page');
this.setState({
pages : pages,
usePPR : pages.length >= PPR_THRESHOLD
});
componentDidUpdate : function(prevProps) {
if(prevProps.text !== this.props.text) {
let pages;
if(this.props.renderer == 'legacy') {
pages = this.props.text.split('\\page');
} else {
pages = this.props.text.split(/^\\page/gm);
}
this.setState({
pages : pages,
usePPR : pages.length >= PPR_THRESHOLD
});
}
},

updateSize : function() {
Expand Down Expand Up @@ -103,12 +117,15 @@ const BrewRenderer = createClass({

renderDummyPage : function(index){
return <div className='phb' id={`p${index + 1}`} key={index}>
<i className='fa fa-spinner fa-spin' />
<i className='fas fa-spinner fa-spin' />
</div>;
},

renderPage : function(pageText, index){
return <div className='phb' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} key={index} />;
if(this.props.renderer == 'legacy')
return <div className='phb' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }} key={index} />;
else
return <div className='phb3' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} key={index} />;
},

renderPages : function(){
Expand Down Expand Up @@ -159,7 +176,7 @@ const BrewRenderer = createClass({
: null}

<Frame initialContent={this.state.initialContent} style={{ width: '100%', height: '100%', visibility: this.state.visibility }} contentDidMount={this.frameDidMount}>
<div className='brewRenderer'
<div className={'brewRenderer'}
onScroll={this.handleScroll}
style={{ height: this.state.height }}>

Expand Down
18 changes: 13 additions & 5 deletions client/homebrew/brewRenderer/brewRenderer.less
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
@import (multiple, less) 'shared/naturalcrit/styles/reset.less';
& {@import (multiple, less) './client/homebrew/phbStyle/phb.styleLegacy.less';} //&{} keeps internal variables locally-scoped
& {@import (multiple, less) './client/homebrew/phbStyle/phb.style.less';}

@import (less) './client/homebrew/phbStyle/phb.style.less';
.pane{
position : relative;
}
.brewRenderer{
will-change : transform;
overflow-y : scroll;
Expand All @@ -14,8 +13,17 @@
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{
position : relative;
}
.pageInfo{
position : absolute;
right : 17px;
Expand All @@ -37,4 +45,4 @@
font-size : 10px;
font-weight : 800;
color : white;
}
}
2 changes: 1 addition & 1 deletion client/homebrew/brewRenderer/errorBar/errorBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const ErrorBar = createClass({
if(!this.props.errors.length) return null;

return <div className='errorBar'>
<i className='fa fa-exclamation-triangle' />
<i className='fas fa-exclamation-triangle' />
<h3> There are HTML errors in your markup</h3>
<small>If these aren't fixed your brew will not render properly when you print it to PDF or share it</small>
{this.renderErrors()}
Expand Down
4 changes: 2 additions & 2 deletions client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,8 @@ const NotificationPopup = createClass({
if(_.isEmpty(this.state.notifications)) return null;

return <div className='notificationPopup'>
<i className='fa fa-times dismiss' onClick={this.dismiss}/>
<i className='fa fa-info-circle info' />
<i className='fas fa-times dismiss' onClick={this.dismiss}/>
<i className='fas fa-info-circle info' />
<h3>Notice</h3>
<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
<ul>{_.values(this.state.notifications)}</ul>
Expand Down
72 changes: 63 additions & 9 deletions client/homebrew/editor/editor.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ const Editor = createClass({

metadata : {},
onMetadataChange : ()=>{},
showMetaButton : true
showMetaButton : true,
renderer : 'legacy'
};
},
getInitialState : function() {
Expand All @@ -38,7 +39,7 @@ const Editor = createClass({

componentDidMount : function() {
this.updateEditorSize();
this.highlightPageLines();
this.highlightCustomMarkdown();
window.addEventListener('resize', this.updateEditorSize);
},
componentWillUnmount : function() {
Expand Down Expand Up @@ -78,15 +79,67 @@ const Editor = createClass({
}, 1);
},

highlightPageLines : function(){
highlightCustomMarkdown : function(){
if(!this.refs.codeEditor) return;
const codeMirror = this.refs.codeEditor.codeMirror;

//reset custom text styles
const customHighlights = codeMirror.getAllMarks();
for (let i=0;i<customHighlights.length;i++) customHighlights[i].clear();

const lineNumbers = _.reduce(this.props.value.split('\n'), (r, line, lineNumber)=>{
if(line.indexOf('\\page') !== -1){
codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
r.push(lineNumber);

//reset custom line styles
codeMirror.removeLineClass(lineNumber, 'background');
codeMirror.removeLineClass(lineNumber, 'text');

// Legacy Codemirror styling
if(this.props.renderer == 'legacy') {
if(line.includes('\\page')){
codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
r.push(lineNumber);
}
}

// New Codemirror styling for V3 renderer
if(this.props.renderer == 'V3') {
if(line.startsWith('\\page')){
codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
r.push(lineNumber);
}

if(line.startsWith('\\column')){
codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
r.push(lineNumber);
}

if(line.startsWith('{{') || line.startsWith('}}')){
let endCh = line.length+1;
const match = line.match(/{{(?:[\w,#-]|="[\w, ]*")*\s*|}}/);
if(match)
endCh = match.index+match[0].length;
codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
}

if(line.includes('{{') && line.includes('}}')){
const regex = /{{(?:[\w,#-]|="[\w, ]*")*\s*|}}/g;
let match;
let blockCount = 0;
while ((match = regex.exec(line)) != null) {
if(match[0].startsWith('{')) {
blockCount += 1;
} else {
blockCount -= 1;
}
if(blockCount < 0) {
blockCount = 0;
continue;
}
codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: 'inline-block' });
}
}
}

return r;
}, []);
return lineNumbers;
Expand All @@ -112,15 +165,16 @@ const Editor = createClass({
},

render : function(){
this.highlightPageLines();
this.highlightCustomMarkdown();
return (
<div className='editor' ref='main'>
<SnippetBar
brew={this.props.value}
onInject={this.handleInject}
onToggle={this.handgleToggle}
showmeta={this.state.showMetadataEditor}
showMetaButton={this.props.showMetaButton} />
showMetaButton={this.props.showMetaButton}
renderer={this.props.renderer} />
{this.renderMetadataEditor()}
<CodeEditor
ref='codeEditor'
Expand All @@ -132,7 +186,7 @@ const Editor = createClass({

{/*
<div className='brewJump' onClick={this.brewJump}>
<i className='fa fa-arrow-right' />
<i className='fas fa-arrow-right' />
</div>
*/}
</div>
Expand Down
18 changes: 17 additions & 1 deletion client/homebrew/editor/editor.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,22 @@
background-color : fade(#333, 15%);
border-bottom : #333 solid 1px;
}
.columnSplit{
font-style : italic;
color : grey;
background-color : fade(#299, 15%);
border-bottom : #299 solid 1px;
}
.block{
color : purple;
font-weight : bold;
//font-style: italic;
}
.inline-block{
color : red;
font-weight : bold;
//font-style: italic;
}
}

.brewJump{
Expand All @@ -26,4 +42,4 @@
.tooltipLeft("Jump to brew page");
}

}
}
Loading

0 comments on commit d57df84

Please sign in to comment.