f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-06 03:32:40 +00:00
Code Wiki Activity

Legacy renderer (#1184)

Browse Source 
* 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
This commit is contained in:
Trevor Buckner
2021-02-02 20:38:25 -05:00
committed by GitHub
parent 6a2e39355c
commit e2cd7d9f07
50 changed files with 2127 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
client/homebrew/pages/editPage/editPage.jsx
View File

@@ -41,17 +41,18 @@ const EditPage = createClass({
tags : '',
published : false,
authors : [],
systems : []
systems : [],
renderer : ''
}
};
},
getInitialState : function() {
return {
brew : this.props.brew,
brew : this.props.brew,
isSaving : false,
isPending : false,
alertRenderChange : false,
saveGoogle : this.props.brew.googleId ? true : false,
confirmGoogleTransfer : false,
errors : null,
@@ -66,6 +67,8 @@ const EditPage = createClass({
url : window.location.href
});
this.savedBrew = JSON.parse(JSON.stringify(this.props.brew)); //Deep copy
this.trySave();
window.onbeforeunload = ()=>{
if(this.state.isSaving || this.state.isPending){
@@ -101,6 +104,12 @@ const EditPage = createClass({
},
handleMetadataChange : function(metadata){
if(metadata.renderer != this.savedBrew.renderer){
console.log('renderer changed!');
this.setState({
alertRenderChange : true
});
}
this.setState((prevState)=>({
brew : _.merge({}, prevState.brew, metadata),
isPending : true,
@@ -122,8 +131,7 @@ const EditPage = createClass({
},
hasChanges : function(){
const savedBrew = this.savedBrew ? this.savedBrew : this.props.brew;
return !_.isEqual(this.state.brew, savedBrew);
return !_.isEqual(this.state.brew, this.savedBrew);
},
trySave : function(){
@@ -142,6 +150,12 @@ const EditPage = createClass({
this.clearErrors();
},
closeAlerts : function(){
this.setState({
alertRenderChange : false
});
},
toggleGoogleStorage : function(){
this.setState((prevState)=>({
saveGoogle : !prevState.saveGoogle,
@@ -294,7 +308,7 @@ const EditPage = createClass({
} catch (e){}
if(this.state.errors.status == '401'){
return <Nav.item className='save error' icon='fa-warning'>
return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
Oops!
<div className='errorContainer' onClick={this.clearErrors}>
You must be signed in to a Google account
@@ -312,7 +326,7 @@ const EditPage = createClass({
</Nav.item>;
}
return <Nav.item className='save error' icon='fa-warning'>
return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
Oops!
<div className='errorContainer'>
Looks like there was a problem saving. <br />
@@ -325,13 +339,22 @@ const EditPage = createClass({
}
if(this.state.isSaving){
return <Nav.item className='save' icon='fa-spinner fa-spin'>saving...</Nav.item>;
return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
}
if(this.state.isPending && this.hasChanges()){
return <Nav.item className='save' onClick={this.save} color='blue' icon='fa-save'>Save Now</Nav.item>;
return <Nav.item className='save' onClick={this.save} color='blue' icon='fas fa-save'>Save Now</Nav.item>;
}
if(!this.state.isPending && !this.state.isSaving){
return <Nav.item className='save saved'>saved.</Nav.item>;
return <Nav.item className='save saved'>saved.
{this.state.alertRenderChange &&
<div className='errorContainer' onClick={this.closeAlerts}>
Rendering mode for this brew has been changed! Refresh the page to load the new renderer.<br />
<div className='confirm'>
OK
</div>
</div>
}
</Nav.item>;
}
},
@@ -351,7 +374,7 @@ const EditPage = createClass({
{this.renderGoogleDriveIcon()}
{this.renderSaveButton()}
<ReportIssue />
<Nav.item newTab={true} href={`/share/${this.processShareId()}`} color='teal' icon='fa-share-alt'>
<Nav.item newTab={true} href={`/share/${this.processShareId()}`} color='teal' icon='fas fa-share-alt'>
Share
</Nav.item>
<PrintLink shareId={this.processShareId()} />
@@ -374,8 +397,9 @@ const EditPage = createClass({
onChange={this.handleTextChange}
metadata={this.state.brew}
onMetadataChange={this.handleMetadataChange}
renderer={this.state.brew.renderer}
/>
<BrewRenderer text={this.state.brew.text} errors={this.state.htmlErrors} />
<BrewRenderer text={this.state.brew.text} errors={this.state.htmlErrors} renderer={this.state.brew.renderer} />
</SplitPane>
</div>
</div>;

13
client/homebrew/pages/editPage/editPage.less
View File

@@ -1,8 +1,14 @@
@keyframes glideDown {
0% {transform : translate(-50% + 3px, 0px);
opacity : 0;}
100% {transform : translate(-50% + 3px, 10px);
opacity : 1;}
}
.editPage{
.navItem.save{
width : 106px;
text-align : center;
position : relative;
&.saved{
cursor : initial;
color : #666;
@@ -21,12 +27,15 @@
margin : -5px;
}
.errorContainer{
animation-name: glideDown;
animation-duration: 0.4s;
position : absolute;
top : 100%;
left : 50%;
z-index : 1000;
z-index : 100000;
width : 140px;
padding : 3px;
color : white;
background-color : #333;
border : 3px solid #444;
border-radius : 5px;

6
client/homebrew/pages/homePage/homePage.jsx
View File

@@ -55,7 +55,7 @@ const HomePage = createClass({
return <Navbar ver={this.props.ver}>
<Nav.section>
<IssueNavItem />
<Nav.item newTab={true} href='/changelog' color='purple' icon='fa-file-text-o'>
<Nav.item newTab={true} href='/changelog' color='purple' icon='far fa-file-alt'>
Changelog
</Nav.item>
<RecentNavItem />
@@ -77,11 +77,11 @@ const HomePage = createClass({
</div>
<div className={cx('floatingSaveButton', { show: this.props.welcomeText != this.state.text })} onClick={this.handleSave}>
Save current <i className='fa fa-save' />
Save current <i className='fas fa-save' />
</div>
<a href='/new' className='floatingNewButton'>
Create your own <i className='fa fa-magic' />
Create your own <i className='fas fa-magic' />
</a>
</div>;
}

6
client/homebrew/pages/newPage/newPage.jsx
View File

@@ -127,11 +127,11 @@ const NewPage = createClass({
renderSaveButton : function(){
if(this.state.isSaving){
return <Nav.item icon='fa-spinner fa-spin' className='saveButton'>
return <Nav.item icon='fas fa-spinner fa-spin' className='saveButton'>
save...
</Nav.item>;
} else {
return <Nav.item icon='fa-save' className='saveButton' onClick={this.save}>
return <Nav.item icon='fas fa-save' className='saveButton' onClick={this.save}>
save
</Nav.item>;
}
@@ -143,7 +143,7 @@ const NewPage = createClass({
},
renderLocalPrintButton : function(){
return <Nav.item color='purple' icon='fa-file-pdf-o' onClick={this.print}>
return <Nav.item color='purple' icon='far fa-file-pdf' onClick={this.print}>
get PDF
</Nav.item>;
},

7
client/homebrew/pages/sharePage/sharePage.jsx
View File

@@ -22,7 +22,8 @@ const SharePage = createClass({
shareId : null,
createdAt : null,
updatedAt : null,
views : 0
views : 0,
renderer : ''
}
};
},
@@ -59,7 +60,7 @@ const SharePage = createClass({
<Nav.section>
<PrintLink shareId={this.processShareId()} />
<Nav.item href={`/source/${this.processShareId()}`} color='teal' icon='fa-code'>
<Nav.item href={`/source/${this.processShareId()}`} color='teal' icon='fas fa-code'>
source
</Nav.item>
<RecentNavItem brew={this.props.brew} storageKey='view' />
@@ -68,7 +69,7 @@ const SharePage = createClass({
</Navbar>
<div className='content'>
<BrewRenderer text={this.props.brew.text} />
<BrewRenderer text={this.props.brew.text} renderer={this.props.brew.renderer} />
</div>
</div>;
}

12
client/homebrew/pages/userPage/brewItem/brewItem.jsx
View File

@@ -48,7 +48,7 @@ const BrewItem = createClass({
if(!this.props.brew.editId) return;
return <a onClick={this.deleteBrew}>
<i className='fa fa-trash' />
<i className='fas fa-trash-alt' />
</a>;
},
@@ -61,7 +61,7 @@ const BrewItem = createClass({
}
return <a href={`/edit/${editLink}`} target='_blank' rel='noopener noreferrer'>
<i className='fa fa-pencil' />
<i className='fas fa-pencil-alt' />
</a>;
},
@@ -74,7 +74,7 @@ const BrewItem = createClass({
}
return <a href={`/share/${shareLink}`} target='_blank' rel='noopener noreferrer'>
<i className='fa fa-share-alt' />
<i className='fas fa-share-alt' />
</a>;
},
@@ -95,13 +95,13 @@ const BrewItem = createClass({
<div className='info'>
<span>
<i className='fa fa-user' /> {brew.authors.join(', ')}
<i className='fas fa-user' /> {brew.authors.join(', ')}
</span>
<span>
<i className='fa fa-eye' /> {brew.views}
<i className='fas fa-eye' /> {brew.views}
</span>
<span>
<i className='fa fa-refresh' /> {moment(brew.updatedAt).fromNow()}
<i className='fas fa-sync-alt' /> {moment(brew.updatedAt).fromNow()}
</span>
{this.renderGoogleDriveIcon()}
</div>

3
client/homebrew/pages/userPage/brewItem/brewItem.less
View File

@@ -22,6 +22,9 @@
font-size : 2.2em;
}
.info{
position: absolute;
bottom: 0px;
margin-bottom: 4px;
font-family : ScalySans;
font-size : 1.2em;
&>span{

2
client/homebrew/pages/userPage/userPage.jsx
View File

@@ -59,7 +59,7 @@ const UserPage = createClass({
</Nav.section>
</Navbar>
<div className='content'>
<div className='content V3'>
<div className='phb'>
<div>
<h1>{this.getUsernameWithS()} brews</h1>