mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-25 18:22:42 +00:00
Merge branch 'master' into small-fixes,-snippet-uniformity
This commit is contained in:
Víctor Losada Hernández
@@ -5,12 +5,12 @@
|
||||
version: 2.1
|
||||
|
||||
orbs:
|
||||
node: circleci/node@3.0.0
|
||||
node: circleci/node@5.1.0
|
||||
|
||||
jobs:
|
||||
build:
|
||||
docker:
|
||||
- image: cimg/node:16.11.0
|
||||
- image: cimg/node:20.8.0
|
||||
- image: mongo:4.4
|
||||
|
||||
working_directory: ~/homebrewery
|
||||
@@ -27,7 +27,7 @@ jobs:
|
||||
# fallback to using the latest cache if no exact match is found
|
||||
- v1-dependencies-
|
||||
|
||||
- run: sudo npm install -g npm@8.10.0
|
||||
- run: sudo npm install -g npm@10.2.0
|
||||
- node/install-packages:
|
||||
app-dir: ~/homebrewery
|
||||
cache-path: node_modules
|
||||
@@ -45,7 +45,7 @@ jobs:
|
||||
|
||||
test:
|
||||
docker:
|
||||
- image: cimg/node:16.11.0
|
||||
- image: cimg/node:20.8.0
|
||||
|
||||
working_directory: ~/homebrewery
|
||||
parallelism: 1
|
||||
|
||||
286
changelog.md
286
changelog.md
@@ -75,11 +75,286 @@ pre {
|
||||
.page {
|
||||
padding-bottom: 1.5cm;
|
||||
}
|
||||
|
||||
.varSyntaxTable th:first-of-type {
|
||||
width:6cm;
|
||||
}
|
||||
```
|
||||
|
||||
## changelog
|
||||
For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
|
||||
|
||||
### Wednesday 21/2/2024 - v3.11.0
|
||||
{{taskList
|
||||
|
||||
##### Gazook89
|
||||
|
||||
* [x] Brew view count no longer increases when viewed by owner
|
||||
|
||||
Fixes issue [#3037](https://github.com/naturalcrit/homebrewery/issues/3037)
|
||||
|
||||
* [x] Small tweak to PHB H3 sizing
|
||||
|
||||
Fixes issue [#2989](https://github.com/naturalcrit/homebrewery/issues/2989)
|
||||
|
||||
* [x] Add **Fold/Unfold All** {{fas,fa-compress-alt}} / {{fas,fa-expand-alt}} buttons to editor bar
|
||||
|
||||
Fixes issue [#2965](https://github.com/naturalcrit/homebrewery/issues/2965)
|
||||
|
||||
|
||||
##### G-Ambatte
|
||||
|
||||
* [x] Share link added to Editor Access error page
|
||||
|
||||
Fixes issue [#3086](https://github.com/naturalcrit/homebrewery/issues/3086)
|
||||
|
||||
* [x] Add Darkbrewery theme to Editor theme selector {{fas,fa-palette}}
|
||||
|
||||
Fixes issue [#3034](https://github.com/naturalcrit/homebrewery/issues/3034)
|
||||
|
||||
* [x] Fix Firefox prints with alternating blank pages
|
||||
|
||||
Fixes issue [#3115](https://github.com/naturalcrit/homebrewery/issues/3115)
|
||||
|
||||
* [x] Admin page working again
|
||||
|
||||
Fixes issue [#2657](https://github.com/naturalcrit/homebrewery/issues/2657)
|
||||
|
||||
|
||||
##### 5e-Cleric
|
||||
|
||||
* [x] Fix indenting issue with Monster Blocks and italics in Class Feature
|
||||
|
||||
Fixes issues [#527](https://github.com/naturalcrit/homebrewery/issues/527),
|
||||
[#3247](https://github.com/naturalcrit/homebrewery/issues/3247)
|
||||
|
||||
* [x] Allow CSS vars in curly syntax to be formatted as strings using single quotes
|
||||
|
||||
`{{--customVar:"'a string'"}}`
|
||||
|
||||
Fixes issue [#3066](https://github.com/naturalcrit/homebrewery/issues/3066)
|
||||
|
||||
* [x] Add *Elderberry Inn* icons {{ei,action}} `{{ei,icon-name}}`
|
||||
|
||||
Fixes issue [#3171](https://github.com/naturalcrit/homebrewery/issues/3171)
|
||||
|
||||
* [x] New {{openSans **{{fas,fa-keyboard}} FONTS** }} snippets!
|
||||
|
||||
Fixes issue [#3171](https://github.com/naturalcrit/homebrewery/issues/3171)
|
||||
|
||||
* [x] New page now opens in a new tab
|
||||
|
||||
|
||||
##### abquintic (new contributor!)
|
||||
|
||||
* [x] Add ^super^ `^abc^` and ^^sub^^ `^^abc^^` syntax.
|
||||
|
||||
Fixes issue [#2171](https://github.com/naturalcrit/homebrewery/issues/2171)
|
||||
|
||||
* [x] Add HTML tag assignment to curly syntax `{{tag=value}}`
|
||||
|
||||
Fixes issue [1488](https://github.com/naturalcrit/homebrewery/issues/1488)
|
||||
|
||||
* [x] {{openSans **Brew → Clone to New**}} now clones tags
|
||||
|
||||
Fixes issue [1488](https://github.com/naturalcrit/homebrewery/issues/1488)
|
||||
|
||||
##### calculuschild
|
||||
|
||||
* [x] Better error messages for "Out of Google Drive Storage" and "Not logged in to edit"
|
||||
|
||||
Fixes issues [2510](https://github.com/naturalcrit/homebrewery/issues/2510),
|
||||
[2975](https://github.com/naturalcrit/homebrewery/issues/2975)
|
||||
|
||||
* [x] New Variables syntax. See below for details.
|
||||
}}
|
||||
|
||||
{{wide
|
||||
|
||||
### Brew Variable Syntax
|
||||
|
||||
You may already be familiar with `[link](url)` and `` syntax. We have expanded this to include a third `$[variable](text)` syntax. All three of these syntaxes now share a common set of features:
|
||||
|
||||
{{varSyntaxTable
|
||||
| syntax | description |
|
||||
|:-------|-------------|
|
||||
| `[var]:content` | Assigns a variable (must start on a line by itself, and ends at the next blank line) |
|
||||
| `[var](content)` | Assigns a variable and outputs it (can be inline) |
|
||||
| `[var]` | Outputs the variable contents as a link, if formatted as a valid link |
|
||||
| `![var]` | Outputs as an image, if formatted as a valid image |
|
||||
| `$[var]` | Outputs as Markdown |
|
||||
| `$[var1 + var2 - 2 * var3]` | Performs math operations and outputs result if all variables are valid numbers |
|
||||
}}
|
||||
|
||||
}}
|
||||
|
||||
{{wide,margin-top:0,margin-bottom:0
|
||||
### Examples
|
||||
}}
|
||||
|
||||
{{wide,columns:2,margin-top:0,margin-bottom:0
|
||||
|
||||
```
|
||||
[first]: Bob
|
||||
|
||||
[last]: Jones
|
||||
|
||||
My name is $[first] $[last].
|
||||
```
|
||||
|
||||
\column
|
||||
|
||||
[first]: Bob
|
||||
|
||||
[last]: Jones
|
||||
|
||||
My name is $[first] $[last].
|
||||
|
||||
}}
|
||||
|
||||
{{wide,columns:2,margin-top:0,margin-bottom:0
|
||||
|
||||
```
|
||||
[myTable]:
|
||||
| h1 | h2 |
|
||||
|----|----|
|
||||
| c1 | c2 |
|
||||
|
||||
Here is my table:
|
||||
$[myTable]
|
||||
```
|
||||
|
||||
\column
|
||||
|
||||
[myTable]:
|
||||
| h1 | h2 |
|
||||
|----|----|
|
||||
| c1 | c2 |
|
||||
|
||||
Here is my table:
|
||||
$[myTable]
|
||||
}}
|
||||
|
||||
{{wide,columns:2,margin-top:0,margin-bottom:0
|
||||
|
||||
```
|
||||
There are $[TableNum] tables total.
|
||||
|
||||
#### Table $[TableNum](1): Horses
|
||||
|
||||
#### Table $[TableNum]($[TableNum + 1]): Cows
|
||||
```
|
||||
|
||||
\column
|
||||
|
||||
There are $[TableNum] tables in this document. *(note: final value of `$[TableNum]` gets hoisted up if available)*
|
||||
|
||||
|
||||
#### Table $[TableNum](1): Horses
|
||||
|
||||
#### Table $[TableNum]($[TableNum + 1]): Cows
|
||||
}}
|
||||
|
||||
\page
|
||||
|
||||
### Friday 13/10/2023 - v3.10.0
|
||||
{{taskList
|
||||
|
||||
##### G-Ambatte
|
||||
|
||||
* [x] Fix user preferred save location being ignored
|
||||
|
||||
Fixes issue [#2993](https://github.com/naturalcrit/homebrewery/issues/2993)
|
||||
|
||||
* [x] Fix crash to white screen when starting new brews while not signed in
|
||||
|
||||
Fixes issue [#2999](https://github.com/naturalcrit/homebrewery/issues/2999)
|
||||
|
||||
* [x] Fix FreeBSD install script
|
||||
|
||||
Fixes issue [#3005](https://github.com/naturalcrit/homebrewery/issues/3005)
|
||||
|
||||
* [x] Fix *"This brew has been changed on another device"* triggering when manually saving during auto-save
|
||||
|
||||
Fixes issue [#2641](https://github.com/naturalcrit/homebrewery/issues/2641)
|
||||
|
||||
* [x] Fix Firefox different column-flow behavior
|
||||
|
||||
Fixes issue [#2982](https://github.com/naturalcrit/homebrewery/issues/2982)
|
||||
|
||||
* [x] Fix brew titles being mis-sorted on user page
|
||||
|
||||
Fixes issue [#2775](https://github.com/naturalcrit/homebrewery/issues/2775)
|
||||
|
||||
* [x] Text Editor themes now available via new drop-down
|
||||
|
||||
Fixes issue [#362](https://github.com/naturalcrit/homebrewery/issues/362)
|
||||
|
||||
##### 5e-Cleric
|
||||
|
||||
* [x] New {{openSans **PHB → {{fas,fa-quote-right}} QUOTE** }} snippet for V3!
|
||||
|
||||
Fixes issue [#2920](https://github.com/naturalcrit/homebrewery/issues/2920)
|
||||
|
||||
* [x] Several updates and fixes to FAQ and Welcome page
|
||||
|
||||
Fixes issue [#2729](https://github.com/naturalcrit/homebrewery/issues/2729),
|
||||
[#2787](https://github.com/naturalcrit/homebrewery/issues/2787)
|
||||
|
||||
##### Gazook89
|
||||
|
||||
* [x] Add syntax highlighting for Definition Lists <code>:\:</code>
|
||||
}}
|
||||
|
||||
|
||||
### Thursday 17/08/2023 - v3.9.2
|
||||
{{taskList
|
||||
|
||||
##### Calculuschild
|
||||
|
||||
* [x] Fix links to certain old Google Drive files
|
||||
|
||||
Fixes issue [#2917](https://github.com/naturalcrit/homebrewery/issues/2917)
|
||||
|
||||
##### G-Ambatte
|
||||
|
||||
* [x] Menus now open on click, and internally consistent
|
||||
|
||||
Fixes issue [#2702](https://github.com/naturalcrit/homebrewery/issues/2702), [#2782](https://github.com/naturalcrit/homebrewery/issues/2782)
|
||||
|
||||
* [x] Add smarter footer snippet
|
||||
|
||||
Fixes issue [#2289](https://github.com/naturalcrit/homebrewery/issues/2289)
|
||||
|
||||
* [x] Add sanitization in Style editor
|
||||
|
||||
Fixes issue [#1437](https://github.com/naturalcrit/homebrewery/issues/1437)
|
||||
|
||||
* [x] Rework class table snippets to remove unnecessary randomness
|
||||
|
||||
Fixes issue [#2964](https://github.com/naturalcrit/homebrewery/issues/2964)
|
||||
|
||||
* [x] Add User Page link to Google Drive file for file owners, add icons for additional storage locations
|
||||
|
||||
Fixes issue [#2954](https://github.com/naturalcrit/homebrewery/issues/2954)
|
||||
|
||||
* [x] Add default save location selection to Account Page
|
||||
|
||||
Fixes issue [#2943](https://github.com/naturalcrit/homebrewery/issues/2943)
|
||||
|
||||
##### 5e-Cleric
|
||||
|
||||
* [x] Exclude cover pages from Table of Content generation (editing on mobile is still not recommended)
|
||||
|
||||
Fixes issue [#2920](https://github.com/naturalcrit/homebrewery/issues/2920)
|
||||
|
||||
##### Gazook89
|
||||
|
||||
* [x] Adjustments to improve mobile viewing
|
||||
}}
|
||||
|
||||
|
||||
|
||||
### Wednesday 28/06/2023 - v3.9.1
|
||||
{{taskList
|
||||
|
||||
@@ -124,6 +399,8 @@ Fixes issue [#2790](https://github.com/naturalcrit/homebrewery/issues/2790)
|
||||
Fixes issue [#2784](https://github.com/naturalcrit/homebrewery/issues/2784)
|
||||
}}
|
||||
|
||||
\page
|
||||
|
||||
### Wednesday 12/04/2023 - v3.8.0
|
||||
{{taskList
|
||||
|
||||
@@ -185,8 +462,6 @@ Fixes issues [#2731](https://github.com/naturalcrit/homebrewery/issues/2731)
|
||||
|
||||
}}
|
||||
|
||||
\page
|
||||
|
||||
### Monday 13/03/2023 - v3.7.2
|
||||
{{taskList
|
||||
|
||||
@@ -267,7 +542,11 @@ Fixes issues [#2603](https://github.com/naturalcrit/homebrewery/issues/2603)
|
||||
* [x] Add message to refresh the browser if the user is missing an update to the Homebrewery
|
||||
|
||||
Fixes issues [#2583](https://github.com/naturalcrit/homebrewery/issues/2583)
|
||||
}}
|
||||
|
||||
\page
|
||||
|
||||
{{taskList
|
||||
##### G-Ambatte
|
||||
|
||||
* [x] Auto-compile Themes CSS on development server
|
||||
@@ -277,7 +556,6 @@ Fixes issues [#2583](https://github.com/naturalcrit/homebrewery/issues/2583)
|
||||
* [x] Fix cloned brews inheriting the parent view count
|
||||
}}
|
||||
|
||||
\page
|
||||
|
||||
### Friday 23/12/2022 - v3.5.0
|
||||
{{taskList
|
||||
@@ -1361,4 +1639,4 @@ Massive changelog incoming:
|
||||
|
||||
* Added `phb.standalone.css` plus a build system for creating it
|
||||
* Added page numbers and footer text
|
||||
* Page accent now flips each page
|
||||
* Page accent now flips each page
|
||||
@@ -1,9 +1,8 @@
|
||||
/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
|
||||
require('./brewRenderer.less');
|
||||
const React = require('react');
|
||||
const createClass = require('create-react-class');
|
||||
const { useState, useRef, useEffect } = React;
|
||||
const _ = require('lodash');
|
||||
const cx = require('classnames');
|
||||
|
||||
const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
|
||||
const Markdown = require('naturalcrit/markdown.js');
|
||||
@@ -13,244 +12,226 @@ const ErrorBar = require('./errorBar/errorBar.jsx');
|
||||
const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
|
||||
const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
|
||||
const Frame = require('react-frame-component').default;
|
||||
const dedent = require('dedent-tabs').default;
|
||||
|
||||
const Themes = require('themes/themes.json');
|
||||
|
||||
const PAGE_HEIGHT = 1056;
|
||||
const PPR_THRESHOLD = 50;
|
||||
|
||||
const BrewRenderer = createClass({
|
||||
displayName : 'BrewRenderer',
|
||||
getDefaultProps : function() {
|
||||
return {
|
||||
text : '',
|
||||
style : '',
|
||||
renderer : 'legacy',
|
||||
theme : '5ePHB',
|
||||
lang : '',
|
||||
errors : []
|
||||
};
|
||||
},
|
||||
getInitialState : function() {
|
||||
let pages;
|
||||
if(this.props.renderer == 'legacy') {
|
||||
pages = this.props.text.split('\\page');
|
||||
} else {
|
||||
pages = this.props.text.split(/^\\page$/gm);
|
||||
}
|
||||
const INITIAL_CONTENT = dedent`
|
||||
<!DOCTYPE html><html><head>
|
||||
<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>
|
||||
</head><body style='overflow: hidden'><div></div></body></html>`;
|
||||
|
||||
return {
|
||||
viewablePageNumber : 0,
|
||||
height : 0,
|
||||
isMounted : false,
|
||||
//v=====----------------------< Brew Page Component >---------------------=====v//
|
||||
const BrewPage = (props)=>{
|
||||
props = {
|
||||
contents : '',
|
||||
index : 0,
|
||||
...props
|
||||
};
|
||||
return <div className={props.className} id={`p${props.index + 1}`} >
|
||||
<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: props.contents }} />
|
||||
</div>;
|
||||
};
|
||||
|
||||
pages : pages,
|
||||
usePPR : pages.length >= PPR_THRESHOLD,
|
||||
visibility : 'hidden',
|
||||
initialContent : `<!DOCTYPE html><html><head>
|
||||
<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>
|
||||
</head><body style='overflow: hidden'><div></div></body></html>`
|
||||
};
|
||||
},
|
||||
height : 0,
|
||||
lastRender : <div></div>,
|
||||
|
||||
componentWillUnmount : function() {
|
||||
window.removeEventListener('resize', this.updateSize);
|
||||
},
|
||||
//v=====--------------------< Brew Renderer Component >-------------------=====v//
|
||||
const renderedPages = [];
|
||||
let rawPages = [];
|
||||
|
||||
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
|
||||
});
|
||||
}
|
||||
},
|
||||
const BrewRenderer = (props)=>{
|
||||
props = {
|
||||
text : '',
|
||||
style : '',
|
||||
renderer : 'legacy',
|
||||
theme : '5ePHB',
|
||||
lang : '',
|
||||
errors : [],
|
||||
currentEditorPage : 0,
|
||||
...props
|
||||
};
|
||||
|
||||
updateSize : function() {
|
||||
this.setState({
|
||||
height : this.refs.main.parentNode.clientHeight,
|
||||
});
|
||||
},
|
||||
const [state, setState] = useState({
|
||||
viewablePageNumber : 0,
|
||||
height : PAGE_HEIGHT,
|
||||
isMounted : false,
|
||||
visibility : 'hidden',
|
||||
});
|
||||
|
||||
handleScroll : function(e){
|
||||
const target = e.target;
|
||||
this.setState((prevState)=>({
|
||||
viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * prevState.pages.length)
|
||||
const mainRef = useRef(null);
|
||||
|
||||
if(props.renderer == 'legacy') {
|
||||
rawPages = props.text.split('\\page');
|
||||
} else {
|
||||
rawPages = props.text.split(/^\\page$/gm);
|
||||
}
|
||||
|
||||
useEffect(()=>{ // Unmounting steps
|
||||
return ()=>{window.removeEventListener('resize', updateSize);};
|
||||
}, []);
|
||||
|
||||
const updateSize = ()=>{
|
||||
setState((prevState)=>({
|
||||
...prevState,
|
||||
height : mainRef.current.parentNode.clientHeight,
|
||||
}));
|
||||
},
|
||||
};
|
||||
|
||||
shouldRender : function(pageText, index){
|
||||
if(!this.state.isMounted) return false;
|
||||
const handleScroll = (e)=>{
|
||||
const target = e.target;
|
||||
setState((prevState)=>({
|
||||
...prevState,
|
||||
viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * rawPages.length)
|
||||
}));
|
||||
};
|
||||
|
||||
const viewIndex = this.state.viewablePageNumber;
|
||||
if(index == viewIndex - 3) return true;
|
||||
if(index == viewIndex - 2) return true;
|
||||
if(index == viewIndex - 1) return true;
|
||||
if(index == viewIndex) return true;
|
||||
if(index == viewIndex + 1) return true;
|
||||
if(index == viewIndex + 2) return true;
|
||||
if(index == viewIndex + 3) return true;
|
||||
const isInView = (index)=>{
|
||||
if(!state.isMounted)
|
||||
return false;
|
||||
|
||||
//Check for style tages
|
||||
if(pageText.indexOf('<style>') !== -1) return true;
|
||||
if(index == props.currentEditorPage) //Already rendered before this step
|
||||
return false;
|
||||
|
||||
if(Math.abs(index - state.viewablePageNumber) <= 3)
|
||||
return true;
|
||||
|
||||
return false;
|
||||
},
|
||||
};
|
||||
|
||||
sanitizeScriptTags : function(content) {
|
||||
const sanitizeScriptTags = (content)=>{
|
||||
return content
|
||||
.replace(/<script/ig, '<script')
|
||||
.replace(/<\/script>/ig, '</script>');
|
||||
},
|
||||
?.replace(/<script/ig, '<script')
|
||||
.replace(/<\/script>/ig, '</script>')
|
||||
|| '';
|
||||
};
|
||||
|
||||
renderPageInfo : function(){
|
||||
return <div className='pageInfo' ref='main'>
|
||||
const renderPageInfo = ()=>{
|
||||
return <div className='pageInfo' ref={mainRef}>
|
||||
<div>
|
||||
{this.props.renderer}
|
||||
{props.renderer}
|
||||
</div>
|
||||
<div>
|
||||
{this.state.viewablePageNumber + 1} / {this.state.pages.length}
|
||||
{state.viewablePageNumber + 1} / {rawPages.length}
|
||||
</div>
|
||||
</div>;
|
||||
},
|
||||
};
|
||||
|
||||
renderPPRmsg : function(){
|
||||
if(!this.state.usePPR) return;
|
||||
|
||||
return <div className='ppr_msg'>
|
||||
Partial Page Renderer is enabled, because your brew is so large. May affect rendering.
|
||||
</div>;
|
||||
},
|
||||
|
||||
renderDummyPage : function(index){
|
||||
const renderDummyPage = (index)=>{
|
||||
return <div className='phb page' id={`p${index + 1}`} key={index}>
|
||||
<i className='fas fa-spinner fa-spin' />
|
||||
</div>;
|
||||
},
|
||||
};
|
||||
|
||||
renderStyle : function() {
|
||||
if(!this.props.style) return;
|
||||
const cleanStyle = this.sanitizeScriptTags(this.props.style);
|
||||
//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.sanitizeScriptTags(this.props.style)}\n} </style>` }} />;
|
||||
const renderStyle = ()=>{
|
||||
if(!props.style) return;
|
||||
const cleanStyle = sanitizeScriptTags(props.style);
|
||||
//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${sanitizeScriptTags(props.style)}\n} </style>` }} />;
|
||||
return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${cleanStyle} </style>` }} />;
|
||||
},
|
||||
};
|
||||
|
||||
renderPage : function(pageText, index){
|
||||
const cleanPageText = this.sanitizeScriptTags(pageText);
|
||||
if(this.props.renderer == 'legacy')
|
||||
return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(cleanPageText) }} key={index} />;
|
||||
else {
|
||||
pageText += `\n\n \n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
|
||||
return (
|
||||
<div className='page' id={`p${index + 1}`} key={index} >
|
||||
<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(cleanPageText) }} />
|
||||
</div>
|
||||
);
|
||||
const renderPage = (pageText, index)=>{
|
||||
let cleanPageText = sanitizeScriptTags(pageText);
|
||||
if(props.renderer == 'legacy') {
|
||||
const html = MarkdownLegacy.render(cleanPageText);
|
||||
return <BrewPage className='page phb' index={index} key={index} contents={html} />;
|
||||
} else {
|
||||
cleanPageText += `\n\n \n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
|
||||
const html = Markdown.render(cleanPageText, index);
|
||||
return <BrewPage className='page' index={index} key={index} contents={html} />;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
renderPages : function(){
|
||||
if(this.state.usePPR){
|
||||
return _.map(this.state.pages, (page, index)=>{
|
||||
if(this.shouldRender(page, index) && typeof window !== 'undefined'){
|
||||
return this.renderPage(page, index);
|
||||
} else {
|
||||
return this.renderDummyPage(index);
|
||||
}
|
||||
});
|
||||
}
|
||||
if(this.props.errors && this.props.errors.length) return this.lastRender;
|
||||
this.lastRender = _.map(this.state.pages, (page, index)=>{
|
||||
if(typeof window !== 'undefined') {
|
||||
return this.renderPage(page, index);
|
||||
} else {
|
||||
return this.renderDummyPage(index);
|
||||
const renderPages = ()=>{
|
||||
if(props.errors && props.errors.length)
|
||||
return renderedPages;
|
||||
|
||||
if(rawPages.length != renderedPages.length) // Re-render all pages when page count changes
|
||||
renderedPages.length = 0;
|
||||
|
||||
// Render currently-edited page first so cross-page effects (variables, links) can propagate out first
|
||||
renderedPages[props.currentEditorPage] = renderPage(rawPages[props.currentEditorPage], props.currentEditorPage);
|
||||
|
||||
_.forEach(rawPages, (page, index)=>{
|
||||
if((isInView(index) || !renderedPages[index]) && typeof window !== 'undefined'){
|
||||
renderedPages[index] = renderPage(page, index); // Render any page not yet rendered, but only re-render those in PPR range
|
||||
}
|
||||
});
|
||||
return this.lastRender;
|
||||
},
|
||||
return renderedPages;
|
||||
};
|
||||
|
||||
frameDidMount : function(){ //This triggers when iFrame finishes internal "componentDidMount"
|
||||
const frameDidMount = ()=>{ //This triggers when iFrame finishes internal "componentDidMount"
|
||||
setTimeout(()=>{ //We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame
|
||||
this.updateSize();
|
||||
window.addEventListener('resize', this.updateSize);
|
||||
this.renderPages(); //Make sure page is renderable before showing
|
||||
this.setState({
|
||||
updateSize();
|
||||
window.addEventListener('resize', updateSize);
|
||||
renderPages(); //Make sure page is renderable before showing
|
||||
setState((prevState)=>({
|
||||
...prevState,
|
||||
isMounted : true,
|
||||
visibility : 'visible'
|
||||
});
|
||||
}));
|
||||
}, 100);
|
||||
},
|
||||
};
|
||||
|
||||
emitClick : function(){
|
||||
// console.log('iFrame clicked');
|
||||
const emitClick = ()=>{ // Allow clicks inside iFrame to interact with dropdowns, etc. from outside
|
||||
if(!window || !document) return;
|
||||
document.dispatchEvent(new MouseEvent('click'));
|
||||
},
|
||||
};
|
||||
|
||||
render : function(){
|
||||
//render in iFrame so broken code doesn't crash the site.
|
||||
//Also render dummy page while iframe is mounting.
|
||||
const rendererPath = this.props.renderer == 'V3' ? 'V3' : 'Legacy';
|
||||
const themePath = this.props.theme ?? '5ePHB';
|
||||
const baseThemePath = Themes[rendererPath][themePath].baseTheme;
|
||||
return (
|
||||
<React.Fragment>
|
||||
{!this.state.isMounted
|
||||
? <div className='brewRenderer' onScroll={this.handleScroll}>
|
||||
<div className='pages' ref='pages'>
|
||||
{this.renderDummyPage(1)}
|
||||
</div>
|
||||
const rendererPath = props.renderer == 'V3' ? 'V3' : 'Legacy';
|
||||
const themePath = props.theme ?? '5ePHB';
|
||||
const baseThemePath = Themes[rendererPath][themePath].baseTheme;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/*render dummy page while iFrame is mounting.*/}
|
||||
{!state.isMounted
|
||||
? <div className='brewRenderer' onScroll={handleScroll}>
|
||||
<div className='pages'>
|
||||
{renderDummyPage(1)}
|
||||
</div>
|
||||
: null}
|
||||
</div>
|
||||
: null}
|
||||
|
||||
<Frame id='BrewRenderer' initialContent={this.state.initialContent}
|
||||
style={{ width: '100%', height: '100%', visibility: this.state.visibility }}
|
||||
contentDidMount={this.frameDidMount}
|
||||
onClick={()=>{this.emitClick();}}
|
||||
>
|
||||
<div className={'brewRenderer'}
|
||||
onScroll={this.handleScroll}
|
||||
style={{ height: this.state.height }}>
|
||||
{/*render in iFrame so broken code doesn't crash the site.*/}
|
||||
<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
|
||||
style={{ width: '100%', height: '100%', visibility: state.visibility }}
|
||||
contentDidMount={frameDidMount}
|
||||
onClick={()=>{emitClick();}}
|
||||
>
|
||||
<div className={'brewRenderer'}
|
||||
onScroll={handleScroll}
|
||||
style={{ height: state.height }}>
|
||||
|
||||
<ErrorBar errors={this.props.errors} />
|
||||
<div className='popups'>
|
||||
<RenderWarnings />
|
||||
<NotificationPopup />
|
||||
</div>
|
||||
<link href={`/themes/${rendererPath}/Blank/style.css`} rel='stylesheet'/>
|
||||
{baseThemePath &&
|
||||
<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} rel='stylesheet'/>
|
||||
}
|
||||
<link href={`/themes/${rendererPath}/${themePath}/style.css`} rel='stylesheet'/>
|
||||
{/* Apply CSS from Style tab and render pages from Markdown tab */}
|
||||
{this.state.isMounted
|
||||
&&
|
||||
<>
|
||||
{this.renderStyle()}
|
||||
<div className='pages' ref='pages' lang={`${this.props.lang || 'en'}`}>
|
||||
{this.renderPages()}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
<ErrorBar errors={props.errors} />
|
||||
<div className='popups'>
|
||||
<RenderWarnings />
|
||||
<NotificationPopup />
|
||||
</div>
|
||||
</Frame>
|
||||
{this.renderPageInfo()}
|
||||
{this.renderPPRmsg()}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
});
|
||||
<link href={`/themes/${rendererPath}/Blank/style.css`} rel='stylesheet'/>
|
||||
{baseThemePath &&
|
||||
<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} rel='stylesheet'/>
|
||||
}
|
||||
<link href={`/themes/${rendererPath}/${themePath}/style.css`} rel='stylesheet'/>
|
||||
|
||||
{/* Apply CSS from Style tab and render pages from Markdown tab */}
|
||||
{state.isMounted
|
||||
&&
|
||||
<>
|
||||
{renderStyle()}
|
||||
<div className='pages' lang={`${props.lang || 'en'}`}>
|
||||
{renderPages()}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</Frame>
|
||||
{renderPageInfo()}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = BrewRenderer;
|
||||
|
||||
@@ -1,46 +1,44 @@
|
||||
@import (multiple, less) 'shared/naturalcrit/styles/reset.less';
|
||||
|
||||
.brewRenderer{
|
||||
.brewRenderer {
|
||||
will-change : transform;
|
||||
overflow-y : scroll;
|
||||
.pages{
|
||||
:where(.pages) {
|
||||
margin : 30px 0px;
|
||||
&>.page{
|
||||
& > :where(.page) {
|
||||
width : 215.9mm;
|
||||
height : 279.4mm;
|
||||
margin-right : auto;
|
||||
margin-bottom : 30px;
|
||||
margin-left : auto;
|
||||
box-shadow : 1px 4px 14px #000;
|
||||
box-shadow : 1px 4px 14px #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pane{
|
||||
position : relative;
|
||||
}
|
||||
.pageInfo{
|
||||
.pane { position : relative; }
|
||||
.pageInfo {
|
||||
position : absolute;
|
||||
right : 17px;
|
||||
bottom : 0;
|
||||
z-index : 1000;
|
||||
background-color : #333;
|
||||
font-size : 10px;
|
||||
font-weight : 800;
|
||||
color : white;
|
||||
background-color : #333333;
|
||||
div {
|
||||
display: inline-block;
|
||||
display : inline-block;
|
||||
padding : 8px 10px;
|
||||
&:not(:last-child){
|
||||
border-right: 1px solid #666;
|
||||
}
|
||||
&:not(:last-child) { border-right : 1px solid #666666; }
|
||||
}
|
||||
}
|
||||
.ppr_msg{
|
||||
.ppr_msg {
|
||||
position : absolute;
|
||||
left : 0px;
|
||||
bottom : 0;
|
||||
left : 0px;
|
||||
z-index : 1000;
|
||||
padding : 8px 10px;
|
||||
background-color : #333;
|
||||
font-size : 10px;
|
||||
font-weight : 800;
|
||||
color : white;
|
||||
background-color : #333333;
|
||||
}
|
||||
|
||||
@@ -25,13 +25,10 @@ const NotificationPopup = createClass({
|
||||
return (
|
||||
<>
|
||||
<li key='psa'>
|
||||
<em>Broken default logo on <b>CoverPage</b> </em> <br />
|
||||
If you have used the Cover Page snippet and notice the Naturalcrit
|
||||
logo is showing as a broken image, this is due to some small tweaks
|
||||
of this BETA feature. To fix the logo in your cover page, rename
|
||||
the image link <b>"/assets/naturalCritLogoRed.svg"</b>. Remember
|
||||
that any snippet marked "BETA" may have a similar change in the
|
||||
future as we encounter any bugs or reworks.
|
||||
<em>Don't store IMAGES in Google Drive</em><br />
|
||||
Google Drive is not an image service, and will block images from being used
|
||||
in brews if they get more views than expected. Google has confirmed they won't fix
|
||||
this, so we recommend you look for another image hosting service such as imgur, ImgBB or Google Photos.
|
||||
</li>
|
||||
|
||||
<li key='googleDriveFolder'>
|
||||
|
||||
@@ -10,6 +10,8 @@ const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
|
||||
const SnippetBar = require('./snippetbar/snippetbar.jsx');
|
||||
const MetadataEditor = require('./metadataEditor/metadataEditor.jsx');
|
||||
|
||||
const EDITOR_THEME_KEY = 'HOMEBREWERY-EDITOR-THEME';
|
||||
|
||||
const SNIPPETBAR_HEIGHT = 25;
|
||||
const DEFAULT_STYLE_TEXT = dedent`
|
||||
/*=======--- Example CSS styling ---=======*/
|
||||
@@ -34,12 +36,14 @@ const Editor = createClass({
|
||||
onMetaChange : ()=>{},
|
||||
reportError : ()=>{},
|
||||
|
||||
renderer : 'legacy'
|
||||
editorTheme : 'default',
|
||||
renderer : 'legacy'
|
||||
};
|
||||
},
|
||||
getInitialState : function() {
|
||||
return {
|
||||
view : 'text' //'text', 'style', 'meta'
|
||||
editorTheme : this.props.editorTheme,
|
||||
view : 'text' //'text', 'style', 'meta'
|
||||
};
|
||||
},
|
||||
|
||||
@@ -51,6 +55,13 @@ const Editor = createClass({
|
||||
this.updateEditorSize();
|
||||
this.highlightCustomMarkdown();
|
||||
window.addEventListener('resize', this.updateEditorSize);
|
||||
|
||||
const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
|
||||
if(editorTheme) {
|
||||
this.setState({
|
||||
editorTheme : editorTheme
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
componentWillUnmount : function() {
|
||||
@@ -138,9 +149,38 @@ const Editor = createClass({
|
||||
codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
|
||||
}
|
||||
|
||||
// definition lists
|
||||
if(line.includes('::')){
|
||||
const regex = /^([^\n]*?)::([^\n]*)(?:\n|$)/ym;
|
||||
let match;
|
||||
while ((match = regex.exec(line)) != null){
|
||||
codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[0]) }, { line: lineNumber, ch: line.indexOf(match[0]) + match[0].length }, { className: 'define' });
|
||||
codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'term' });
|
||||
codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[2]) }, { line: lineNumber, ch: line.indexOf(match[2]) + match[2].length }, { className: 'definition' });
|
||||
}
|
||||
}
|
||||
|
||||
// Superscript
|
||||
if(line.includes('\^')) {
|
||||
const regex = /\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/g;
|
||||
let match;
|
||||
while ((match = regex.exec(line)) != null) {
|
||||
codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) - 1 }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length + 1 }, { className: 'superscript' });
|
||||
}
|
||||
}
|
||||
|
||||
// Subscript
|
||||
if(line.includes('^^')) {
|
||||
const regex = /\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/g;
|
||||
let match;
|
||||
while ((match = regex.exec(line)) != null) {
|
||||
codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) - 2 }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length + 2 }, { className: 'subscript' });
|
||||
}
|
||||
}
|
||||
|
||||
// Highlight injectors {style}
|
||||
if(line.includes('{') && line.includes('}')){
|
||||
const regex = /(?:^|[^{\n])({(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\2})/gm;
|
||||
const regex = /(?:^|[^{\n])({(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\2})/gm;
|
||||
let match;
|
||||
while ((match = regex.exec(line)) != null) {
|
||||
codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'injection' });
|
||||
@@ -148,7 +188,7 @@ const Editor = createClass({
|
||||
}
|
||||
// Highlight inline spans {{content}}
|
||||
if(line.includes('{{') && line.includes('}}')){
|
||||
const regex = /{{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1 *|}}/g;
|
||||
const regex = /{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *|}}/g;
|
||||
let match;
|
||||
let blockCount = 0;
|
||||
while ((match = regex.exec(line)) != null) {
|
||||
@@ -167,7 +207,7 @@ const Editor = createClass({
|
||||
// Highlight block divs {{\n Content \n}}
|
||||
let endCh = line.length+1;
|
||||
|
||||
const match = line.match(/^ *{{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1 *$|^ *}}$/);
|
||||
const match = line.match(/^ *{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *$|^ *}}$/);
|
||||
if(match)
|
||||
endCh = match.index+match[0].length;
|
||||
codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
|
||||
@@ -255,6 +295,13 @@ const Editor = createClass({
|
||||
this.refs.codeEditor?.updateSize();
|
||||
},
|
||||
|
||||
updateEditorTheme : function(newTheme){
|
||||
window.localStorage.setItem(EDITOR_THEME_KEY, newTheme);
|
||||
this.setState({
|
||||
editorTheme : newTheme
|
||||
});
|
||||
},
|
||||
|
||||
//Called by CodeEditor after document switch, so Snippetbar can refresh UndoHistory
|
||||
rerenderParent : function (){
|
||||
this.forceUpdate();
|
||||
@@ -269,6 +316,7 @@ const Editor = createClass({
|
||||
view={this.state.view}
|
||||
value={this.props.brew.text}
|
||||
onChange={this.props.onTextChange}
|
||||
editorTheme={this.state.editorTheme}
|
||||
rerenderParent={this.rerenderParent} />
|
||||
</>;
|
||||
}
|
||||
@@ -281,6 +329,7 @@ const Editor = createClass({
|
||||
value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
|
||||
onChange={this.props.onStyleChange}
|
||||
enableFolding={false}
|
||||
editorTheme={this.state.editorTheme}
|
||||
rerenderParent={this.rerenderParent} />
|
||||
</>;
|
||||
}
|
||||
@@ -310,6 +359,14 @@ const Editor = createClass({
|
||||
return this.refs.codeEditor?.undo();
|
||||
},
|
||||
|
||||
foldCode : function(){
|
||||
return this.refs.codeEditor?.foldAllCode();
|
||||
},
|
||||
|
||||
unfoldCode : function(){
|
||||
return this.refs.codeEditor?.unfoldAllCode();
|
||||
},
|
||||
|
||||
render : function(){
|
||||
return (
|
||||
<div className='editor' ref='main'>
|
||||
@@ -323,7 +380,11 @@ const Editor = createClass({
|
||||
theme={this.props.brew.theme}
|
||||
undo={this.undo}
|
||||
redo={this.redo}
|
||||
foldCode={this.foldCode}
|
||||
unfoldCode={this.unfoldCode}
|
||||
historySize={this.historySize()}
|
||||
currentEditorTheme={this.state.editorTheme}
|
||||
updateEditorTheme={this.updateEditorTheme}
|
||||
cursorPos={this.refs.codeEditor?.getCursorPosition() || {}} />
|
||||
|
||||
{this.renderEditor()}
|
||||
|
||||
@@ -1,65 +1,85 @@
|
||||
|
||||
.editor{
|
||||
@import 'themes/codeMirror/customEditorStyles.less';
|
||||
.editor {
|
||||
position : relative;
|
||||
width : 100%;
|
||||
|
||||
.codeEditor{
|
||||
.codeEditor {
|
||||
height : 100%;
|
||||
.pageLine{
|
||||
.pageLine {
|
||||
background : #33333328;
|
||||
border-top : #339 solid 1px;
|
||||
border-top : #333399 solid 1px;
|
||||
}
|
||||
.editor-page-count{
|
||||
color : grey;
|
||||
.editor-page-count {
|
||||
float : right;
|
||||
color : grey;
|
||||
}
|
||||
.columnSplit{
|
||||
font-style : italic;
|
||||
color : grey;
|
||||
background-color : fade(#299, 15%);
|
||||
border-bottom : #299 solid 1px;
|
||||
.columnSplit {
|
||||
font-style : italic;
|
||||
color : grey;
|
||||
background-color : fade(#229999, 15%);
|
||||
border-bottom : #229999 solid 1px;
|
||||
}
|
||||
.block:not(.cm-comment){
|
||||
color : purple;
|
||||
.define {
|
||||
&:not(.term):not(.definition) {
|
||||
font-weight : bold;
|
||||
color : #949494;
|
||||
background : #E5E5E5;
|
||||
border-radius : 3px;
|
||||
}
|
||||
&.term { color : rgb(96, 117, 143); }
|
||||
&.definition { color : rgb(97, 57, 178); }
|
||||
}
|
||||
.block:not(.cm-comment) {
|
||||
font-weight : bold;
|
||||
color : purple;
|
||||
//font-style: italic;
|
||||
}
|
||||
.inline-block:not(.cm-comment){
|
||||
color : red;
|
||||
.inline-block:not(.cm-comment) {
|
||||
font-weight : bold;
|
||||
color : red;
|
||||
//font-style: italic;
|
||||
}
|
||||
.injection:not(.cm-comment){
|
||||
.injection:not(.cm-comment) {
|
||||
font-weight : bold;
|
||||
color : green;
|
||||
font-weight : bold;
|
||||
}
|
||||
.superscript:not(.cm-comment) {
|
||||
font-weight : bold;
|
||||
color : goldenrod;
|
||||
vertical-align : super;
|
||||
font-size : 0.9em;
|
||||
}
|
||||
.subscript:not(.cm-comment) {
|
||||
font-weight : bold;
|
||||
color : rgb(123, 123, 15);
|
||||
vertical-align : sub;
|
||||
font-size : 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
.brewJump{
|
||||
position : absolute;
|
||||
background-color : @teal;
|
||||
cursor : pointer;
|
||||
width : 30px;
|
||||
height : 30px;
|
||||
display : flex;
|
||||
align-items : center;
|
||||
bottom : 20px;
|
||||
right : 20px;
|
||||
z-index : 1000000;
|
||||
justify-content : center;
|
||||
.tooltipLeft("Jump to brew page");
|
||||
.brewJump {
|
||||
position : absolute;
|
||||
right : 20px;
|
||||
bottom : 20px;
|
||||
z-index : 1000000;
|
||||
display : flex;
|
||||
align-items : center;
|
||||
justify-content : center;
|
||||
width : 30px;
|
||||
height : 30px;
|
||||
cursor : pointer;
|
||||
background-color : @teal;
|
||||
.tooltipLeft('Jump to brew page');
|
||||
}
|
||||
|
||||
.editorToolbar{
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 50%;
|
||||
color: black;
|
||||
font-size: 13px;
|
||||
z-index: 9;
|
||||
span {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
.editorToolbar {
|
||||
position : absolute;
|
||||
top : 5px;
|
||||
left : 50%;
|
||||
z-index : 9;
|
||||
font-size : 13px;
|
||||
color : black;
|
||||
span { padding : 2px 5px; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
.metadataEditor{
|
||||
position : absolute;
|
||||
z-index : 10000;
|
||||
z-index : 5;
|
||||
box-sizing : border-box;
|
||||
width : 100%;
|
||||
padding : 25px;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/*eslint max-lines: ["warn", {"max": 250, "skipBlankLines": true, "skipComments": true}]*/
|
||||
require('./snippetbar.less');
|
||||
const React = require('react');
|
||||
const createClass = require('create-react-class');
|
||||
@@ -15,6 +16,8 @@ ThemeSnippets['V3_5eDMG'] = require('themes/V3/5eDMG/snippets.js');
|
||||
ThemeSnippets['V3_Journal'] = require('themes/V3/Journal/snippets.js');
|
||||
ThemeSnippets['V3_Blank'] = require('themes/V3/Blank/snippets.js');
|
||||
|
||||
const EditorThemes = require('build/homebrew/codeMirror/editorThemes.json');
|
||||
|
||||
const execute = function(val, props){
|
||||
if(_.isFunction(val)) return val(props);
|
||||
return val;
|
||||
@@ -24,24 +27,28 @@ const Snippetbar = createClass({
|
||||
displayName : 'SnippetBar',
|
||||
getDefaultProps : function() {
|
||||
return {
|
||||
brew : {},
|
||||
view : 'text',
|
||||
onViewChange : ()=>{},
|
||||
onInject : ()=>{},
|
||||
onToggle : ()=>{},
|
||||
showEditButtons : true,
|
||||
renderer : 'legacy',
|
||||
undo : ()=>{},
|
||||
redo : ()=>{},
|
||||
historySize : ()=>{},
|
||||
cursorPos : {}
|
||||
brew : {},
|
||||
view : 'text',
|
||||
onViewChange : ()=>{},
|
||||
onInject : ()=>{},
|
||||
onToggle : ()=>{},
|
||||
showEditButtons : true,
|
||||
renderer : 'legacy',
|
||||
undo : ()=>{},
|
||||
redo : ()=>{},
|
||||
historySize : ()=>{},
|
||||
foldCode : ()=>{},
|
||||
unfoldCode : ()=>{},
|
||||
updateEditorTheme : ()=>{},
|
||||
cursorPos : {}
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState : function() {
|
||||
return {
|
||||
renderer : this.props.renderer,
|
||||
snippets : []
|
||||
renderer : this.props.renderer,
|
||||
themeSelector : false,
|
||||
snippets : []
|
||||
};
|
||||
},
|
||||
|
||||
@@ -67,6 +74,7 @@ const Snippetbar = createClass({
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
mergeCustomizer : function(valueA, valueB, key) {
|
||||
if(key == 'snippets') {
|
||||
const result = _.reverse(_.unionBy(_.reverse(valueB), _.reverse(valueA), 'name')); // Join snippets together, with preference for the current theme over the base theme
|
||||
@@ -95,6 +103,33 @@ const Snippetbar = createClass({
|
||||
this.props.onInject(injectedText);
|
||||
},
|
||||
|
||||
toggleThemeSelector : function(e){
|
||||
if(e.target.tagName != 'SELECT'){
|
||||
this.setState({
|
||||
themeSelector : !this.state.themeSelector
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
changeTheme : function(e){
|
||||
if(e.target.value == this.props.currentEditorTheme) return;
|
||||
this.props.updateEditorTheme(e.target.value);
|
||||
|
||||
this.setState({
|
||||
showThemeSelector : false,
|
||||
});
|
||||
},
|
||||
|
||||
renderThemeSelector : function(){
|
||||
return <div className='themeSelector'>
|
||||
<select value={this.props.currentEditorTheme} onChange={this.changeTheme} >
|
||||
{EditorThemes.map((theme, key)=>{
|
||||
return <option key={key} value={theme}>{theme}</option>;
|
||||
})}
|
||||
</select>
|
||||
</div>;
|
||||
},
|
||||
|
||||
renderSnippetGroups : function(){
|
||||
const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
|
||||
|
||||
@@ -114,6 +149,22 @@ const Snippetbar = createClass({
|
||||
renderEditorButtons : function(){
|
||||
if(!this.props.showEditButtons) return;
|
||||
|
||||
let foldButtons;
|
||||
if(this.props.view == 'text'){
|
||||
foldButtons =
|
||||
<>
|
||||
<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
|
||||
onClick={this.props.foldCode} >
|
||||
<i className='fas fa-compress-alt' />
|
||||
</div>
|
||||
<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
|
||||
onClick={this.props.unfoldCode} >
|
||||
<i className='fas fa-expand-alt' />
|
||||
</div>
|
||||
</>
|
||||
|
||||
}
|
||||
|
||||
return <div className='editors'>
|
||||
<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
|
||||
onClick={this.props.undo} >
|
||||
@@ -123,6 +174,14 @@ const Snippetbar = createClass({
|
||||
onClick={this.props.redo} >
|
||||
<i className='fas fa-redo' />
|
||||
</div>
|
||||
<div className='divider'></div>
|
||||
{foldButtons}
|
||||
<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
|
||||
onClick={this.toggleThemeSelector} >
|
||||
<i className='fas fa-palette' />
|
||||
{this.state.themeSelector && this.renderThemeSelector()}
|
||||
</div>
|
||||
|
||||
<div className='divider'></div>
|
||||
<div className={cx('text', { selected: this.props.view === 'text' })}
|
||||
onClick={()=>this.props.onViewChange('text')}>
|
||||
@@ -173,7 +232,7 @@ const SnippetGroup = createClass({
|
||||
return _.map(snippets, (snippet)=>{
|
||||
return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
|
||||
<i className={snippet.icon} />
|
||||
<span className='name'>{snippet.name}</span>
|
||||
<span className='name'title={snippet.name}>{snippet.name}</span>
|
||||
{snippet.experimental && <span className='beta'>beta</span>}
|
||||
{snippet.subsnippets && <>
|
||||
<i className='fas fa-caret-right'></i>
|
||||
@@ -196,5 +255,4 @@ const SnippetGroup = createClass({
|
||||
</div>
|
||||
</div>;
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
@@ -1,144 +1,190 @@
|
||||
@import (less) './client/icons/customIcons.less';
|
||||
.snippetBar{
|
||||
@import (less) '././././themes/fonts/5e/fonts.less';
|
||||
|
||||
.snippetBar {
|
||||
@menuHeight : 25px;
|
||||
position : relative;
|
||||
height : @menuHeight;
|
||||
background-color : #ddd;
|
||||
.editors{
|
||||
color : black;
|
||||
background-color : #DDDDDD;
|
||||
|
||||
.editors {
|
||||
position : absolute;
|
||||
display : flex;
|
||||
top : 0px;
|
||||
right : 0px;
|
||||
height : @menuHeight;
|
||||
width : 125px;
|
||||
display : flex;
|
||||
justify-content : space-between;
|
||||
&>div{
|
||||
height : @menuHeight;
|
||||
height : @menuHeight;
|
||||
& > div {
|
||||
width : @menuHeight;
|
||||
cursor : pointer;
|
||||
height : @menuHeight;
|
||||
line-height : @menuHeight;
|
||||
text-align : center;
|
||||
&:hover,&.selected{
|
||||
background-color : #999;
|
||||
}
|
||||
&.text{
|
||||
cursor : pointer;
|
||||
&:hover,&.selected { background-color : #999999; }
|
||||
&.text {
|
||||
.tooltipLeft('Brew Editor');
|
||||
}
|
||||
&.style{
|
||||
&.style {
|
||||
.tooltipLeft('Style Editor');
|
||||
}
|
||||
&.meta{
|
||||
&.meta {
|
||||
.tooltipLeft('Properties');
|
||||
}
|
||||
&.undo{
|
||||
&.undo {
|
||||
.tooltipLeft('Undo');
|
||||
font-size : 0.75em;
|
||||
color : grey;
|
||||
&.active{
|
||||
color : black;
|
||||
}
|
||||
&.active { color : inherit; }
|
||||
}
|
||||
&.redo{
|
||||
&.redo {
|
||||
.tooltipLeft('Redo');
|
||||
font-size : 0.75em;
|
||||
color : grey;
|
||||
&.active{
|
||||
color : black;
|
||||
&.active { color : inherit; }
|
||||
}
|
||||
&.foldAll {
|
||||
.tooltipLeft('Fold All');
|
||||
font-size : 0.75em;
|
||||
color : inherit;
|
||||
}
|
||||
&.unfoldAll {
|
||||
.tooltipLeft('Unfold All');
|
||||
font-size : 0.75em;
|
||||
color : inherit;
|
||||
}
|
||||
&.editorTheme {
|
||||
.tooltipLeft('Editor Themes');
|
||||
font-size : 0.75em;
|
||||
color : black;
|
||||
&.active {
|
||||
position : relative;
|
||||
background-color : #999999;
|
||||
}
|
||||
}
|
||||
&.divider {
|
||||
background: linear-gradient(#000, #000) no-repeat center/1px 100%;
|
||||
width: 5px;
|
||||
&:hover{
|
||||
background-color: inherit;
|
||||
}
|
||||
width : 5px;
|
||||
background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
|
||||
&:hover { background-color : inherit; }
|
||||
}
|
||||
}
|
||||
.themeSelector {
|
||||
position : absolute;
|
||||
top : 25px;
|
||||
right : 0;
|
||||
z-index : 10;
|
||||
display : flex;
|
||||
align-items : center;
|
||||
justify-content : center;
|
||||
width : 170px;
|
||||
height : inherit;
|
||||
background-color : inherit;
|
||||
}
|
||||
}
|
||||
.snippetBarButton{
|
||||
height : @menuHeight;
|
||||
line-height : @menuHeight;
|
||||
.snippetBarButton {
|
||||
display : inline-block;
|
||||
height : @menuHeight;
|
||||
padding : 0px 5px;
|
||||
font-weight : 800;
|
||||
font-size : 0.625em;
|
||||
font-weight : 800;
|
||||
line-height : @menuHeight;
|
||||
text-transform : uppercase;
|
||||
cursor : pointer;
|
||||
&:hover, &.selected{
|
||||
background-color : #999;
|
||||
}
|
||||
i{
|
||||
vertical-align : middle;
|
||||
&:hover, &.selected { background-color : #999999; }
|
||||
i {
|
||||
margin-right : 3px;
|
||||
font-size : 1.4em;
|
||||
vertical-align : middle;
|
||||
}
|
||||
}
|
||||
.toggleMeta{
|
||||
position : absolute;
|
||||
top : 0px;
|
||||
right : 0px;
|
||||
border-left : 1px solid black;
|
||||
.tooltipLeft("Edit Brew Properties");
|
||||
.toggleMeta {
|
||||
position : absolute;
|
||||
top : 0px;
|
||||
right : 0px;
|
||||
border-left : 1px solid black;
|
||||
.tooltipLeft('Edit Brew Properties');
|
||||
}
|
||||
.snippetGroup{
|
||||
border-right : 1px solid black;
|
||||
&:hover{
|
||||
&>.dropdown{
|
||||
visibility : visible;
|
||||
}
|
||||
.snippetGroup {
|
||||
border-right : 1px solid currentColor;
|
||||
&:hover {
|
||||
& > .dropdown { visibility : visible; }
|
||||
}
|
||||
.dropdown{
|
||||
.dropdown {
|
||||
position : absolute;
|
||||
top : 100%;
|
||||
visibility : hidden;
|
||||
z-index : 1000;
|
||||
margin-left : -5px;
|
||||
padding : 0px;
|
||||
background-color : #ddd;
|
||||
.snippet{
|
||||
position: relative;
|
||||
.animate(background-color);
|
||||
margin-left : -5px;
|
||||
visibility : hidden;
|
||||
background-color : #DDDDDD;
|
||||
.snippet {
|
||||
position : relative;
|
||||
display : flex;
|
||||
align-items : center;
|
||||
min-width : max-content;
|
||||
padding : 5px;
|
||||
cursor : pointer;
|
||||
font-size : 10px;
|
||||
i{
|
||||
cursor : pointer;
|
||||
.animate(background-color);
|
||||
i {
|
||||
height : 1.2em;
|
||||
margin-right : 8px;
|
||||
font-size : 1.2em;
|
||||
height : 1.2em;
|
||||
&~i{
|
||||
margin-right: 0;
|
||||
margin-left: 5px;
|
||||
& ~ i {
|
||||
margin-right : 0;
|
||||
margin-left : 5px;
|
||||
}
|
||||
/* Fonts */
|
||||
&.font {
|
||||
height : auto;
|
||||
&::before {
|
||||
font-size : 1.4em;
|
||||
content : 'ABC';
|
||||
}
|
||||
|
||||
&.OpenSans {font-family : 'OpenSans';}
|
||||
&.CodeBold {font-family : 'CodeBold';}
|
||||
&.CodeLight {font-family : 'CodeLight';}
|
||||
&.ScalySansRemake {font-family : 'ScalySansRemake';}
|
||||
&.BookInsanityRemake {font-family : 'BookInsanityRemake';}
|
||||
&.MrEavesRemake {font-family : 'MrEavesRemake';}
|
||||
&.SolberaImitationRemake {font-family : 'SolberaImitationRemake';}
|
||||
&.ScalySansSmallCapsRemake {font-family : 'ScalySansSmallCapsRemake';}
|
||||
&.WalterTurncoat {font-family : 'WalterTurncoat';}
|
||||
&.Lato {font-family : 'Lato';}
|
||||
&.Courier {font-family : 'Courier';}
|
||||
&.NodestoCapsCondensed {font-family : 'NodestoCapsCondensed';}
|
||||
&.Overpass {font-family : 'Overpass';}
|
||||
&.Davek {font-family : 'Davek';}
|
||||
&.Iokharic {font-family : 'Iokharic';}
|
||||
&.Rellanic {font-family : 'Rellanic';}
|
||||
&.TimesNewRoman {font-family : 'Times New Roman';}
|
||||
}
|
||||
}
|
||||
.name {
|
||||
margin-right : auto;
|
||||
}
|
||||
.name { margin-right : auto; }
|
||||
.beta {
|
||||
color : white;
|
||||
padding : 4px 6px;
|
||||
line-height : 1em;
|
||||
margin-left : 5px;
|
||||
align-self : center;
|
||||
padding : 4px 6px;
|
||||
margin-left : 5px;
|
||||
font-family : monospace;
|
||||
line-height : 1em;
|
||||
color : white;
|
||||
background : grey;
|
||||
border-radius : 12px;
|
||||
font-family : monospace;
|
||||
}
|
||||
&:hover{
|
||||
background-color : #999;
|
||||
&>.dropdown{
|
||||
&:hover {
|
||||
background-color : #999999;
|
||||
& > .dropdown {
|
||||
visibility : visible;
|
||||
&.side {
|
||||
left: 100%;
|
||||
top: 0%;
|
||||
margin-left:0;
|
||||
box-shadow: -1px 1px 2px 0px #999;
|
||||
top : 0%;
|
||||
left : 100%;
|
||||
margin-left : 0;
|
||||
box-shadow : -1px 1px 2px 0px #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -21,10 +21,11 @@ const ErrorNavItem = createClass({
|
||||
this.props.parent.setState(state);
|
||||
};
|
||||
|
||||
const error = this.props.error;
|
||||
const response = error.response;
|
||||
const status = response.status;
|
||||
const message = response.body?.message;
|
||||
const error = this.props.error;
|
||||
const response = error.response;
|
||||
const status = response.status;
|
||||
const HBErrorCode = response.body?.HBErrorCode;
|
||||
const message = response.body?.message;
|
||||
let errMsg = '';
|
||||
try {
|
||||
errMsg += `${error.toString()}\n\n`;
|
||||
@@ -40,7 +41,9 @@ const ErrorNavItem = createClass({
|
||||
{message ?? 'Conflict: please refresh to get latest changes'}
|
||||
</div>
|
||||
</Nav.item>;
|
||||
} else if(status === 412) {
|
||||
}
|
||||
|
||||
if(status === 412) {
|
||||
return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
|
||||
Oops!
|
||||
<div className='errorContainer' onClick={clearError}>
|
||||
@@ -48,6 +51,36 @@ const ErrorNavItem = createClass({
|
||||
</div>
|
||||
</Nav.item>;
|
||||
}
|
||||
|
||||
if(HBErrorCode === '04') {
|
||||
return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
|
||||
Oops!
|
||||
<div className='errorContainer' onClick={clearError}>
|
||||
You are no longer signed in as an author of
|
||||
this brew! Were you signed out from a different
|
||||
window? Visit our log in page, then try again!
|
||||
<br></br>
|
||||
<a target='_blank' rel='noopener noreferrer'
|
||||
href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
|
||||
<div className='confirm'>
|
||||
Sign In
|
||||
</div>
|
||||
</a>
|
||||
<div className='deny'>
|
||||
Not Now
|
||||
</div>
|
||||
</div>
|
||||
</Nav.item>;
|
||||
}
|
||||
|
||||
if(response.body?.errors?.[0].reason == 'storageQuotaExceeded') {
|
||||
return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
|
||||
Oops!
|
||||
<div className='errorContainer' onClick={clearError}>
|
||||
Can't save because your Google Drive seems to be full!
|
||||
</div>
|
||||
</Nav.item>;
|
||||
}
|
||||
|
||||
if(response.req.url.match(/^\/api.*Google.*$/m)){
|
||||
return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
|
||||
@@ -57,6 +90,7 @@ const ErrorNavItem = createClass({
|
||||
expired! Visit our log in page to sign out
|
||||
and sign back in with Google,
|
||||
then try saving again!
|
||||
<br></br>
|
||||
<a target='_blank' rel='noopener noreferrer'
|
||||
href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
|
||||
<div className='confirm'>
|
||||
|
||||
@@ -4,6 +4,7 @@ const Nav = require('naturalcrit/nav/nav.jsx');
|
||||
module.exports = function(props){
|
||||
return <Nav.item
|
||||
href='/new'
|
||||
newTab={true}
|
||||
color='purple'
|
||||
icon='fas fa-plus-square'>
|
||||
new
|
||||
|
||||
@@ -16,6 +16,8 @@ const HelpNavItem = require('../../navbar/help.navitem.jsx');
|
||||
|
||||
const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
|
||||
|
||||
let SAVEKEY = '';
|
||||
|
||||
const AccountPage = createClass({
|
||||
displayName : 'AccountPage',
|
||||
getDefaultProps : function() {
|
||||
@@ -29,6 +31,27 @@ const AccountPage = createClass({
|
||||
uiItems : this.props.uiItems
|
||||
};
|
||||
},
|
||||
componentDidMount : function(){
|
||||
if(!this.state.saveLocation && this.props.uiItems.username) {
|
||||
SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${this.props.uiItems.username}`;
|
||||
let saveLocation = window.localStorage.getItem(SAVEKEY);
|
||||
saveLocation = saveLocation ?? (this.state.uiItems.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY');
|
||||
this.makeActive(saveLocation);
|
||||
}
|
||||
},
|
||||
|
||||
makeActive : function(newSelection){
|
||||
if(this.state.saveLocation == newSelection) return;
|
||||
window.localStorage.setItem(SAVEKEY, newSelection);
|
||||
this.setState({
|
||||
saveLocation : newSelection
|
||||
});
|
||||
},
|
||||
|
||||
renderButton : function(name, key, shouldRender=true){
|
||||
if(!shouldRender) return;
|
||||
return <button className={this.state.saveLocation==key ? 'active' : ''} onClick={()=>{this.makeActive(key);}}>{name}</button>;
|
||||
},
|
||||
|
||||
renderNavItems : function() {
|
||||
return <Navbar>
|
||||
@@ -61,6 +84,11 @@ const AccountPage = createClass({
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
<div className='dataGroup'>
|
||||
<h4>Default Save Location</h4>
|
||||
{this.renderButton('Homebrewery', 'HOMEBREWERY')}
|
||||
{this.renderButton('Google Drive', 'GOOGLE-DRIVE', this.state.uiItems.googleId)}
|
||||
</div>
|
||||
</>;
|
||||
},
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@ const moment = require('moment');
|
||||
const request = require('../../../../utils/request-middleware.js');
|
||||
|
||||
const googleDriveIcon = require('../../../../googleDrive.svg');
|
||||
const homebreweryIcon = require('../../../../thumbnail.png');
|
||||
const dedent = require('dedent-tabs').default;
|
||||
|
||||
const BrewItem = createClass({
|
||||
@@ -90,11 +91,17 @@ const BrewItem = createClass({
|
||||
</a>;
|
||||
},
|
||||
|
||||
renderGoogleDriveIcon : function(){
|
||||
if(!this.props.brew.googleId) return;
|
||||
renderStorageIcon : function(){
|
||||
if(this.props.brew.googleId) {
|
||||
return <span title={this.props.brew.webViewLink ? 'Your Google Drive Storage': 'Another User\'s Google Drive Storage'}>
|
||||
<a href={this.props.brew.webViewLink} target='_blank'>
|
||||
<img className='googleDriveIcon' src={googleDriveIcon} alt='googleDriveIcon' />
|
||||
</a>
|
||||
</span>;
|
||||
}
|
||||
|
||||
return <span>
|
||||
<img className='googleDriveIcon' src={googleDriveIcon} alt='googleDriveIcon' />
|
||||
return <span title='Homebrewery Storage'>
|
||||
<img className='homebreweryIcon' src={homebreweryIcon} alt='homebreweryIcon' />
|
||||
</span>;
|
||||
},
|
||||
|
||||
@@ -118,7 +125,7 @@ const BrewItem = createClass({
|
||||
<div className='info'>
|
||||
|
||||
{brew.tags?.length ? <>
|
||||
<div className='brewTags' title={`Tags:\n${brew.tags.join('\n')}`}>
|
||||
<div className='brewTags' title={`${brew.tags.length} tags:\n${brew.tags.join('\n')}`}>
|
||||
<i className='fas fa-tags'/>
|
||||
{brew.tags.map((tag, idx)=>{
|
||||
const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
|
||||
@@ -128,7 +135,11 @@ const BrewItem = createClass({
|
||||
</> : <></>
|
||||
}
|
||||
<span title={`Authors:\n${brew.authors?.join('\n')}`}>
|
||||
<i className='fas fa-user'/> {brew.authors?.join(', ')}
|
||||
<i className='fas fa-user'/> {brew.authors?.map((author, index)=>(
|
||||
<>
|
||||
<a key={index} href={`/user/${author}`}>{author}</a>
|
||||
{index < brew.authors.length - 1 && ', '}
|
||||
</>))}
|
||||
</span>
|
||||
<br />
|
||||
<span title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>
|
||||
@@ -144,7 +155,7 @@ const BrewItem = createClass({
|
||||
Last updated: ${moment(brew.updatedAt).local().format(dateFormatString)}`}>
|
||||
<i className='fas fa-sync-alt' /> {moment(brew.updatedAt).fromNow()}
|
||||
</span>
|
||||
{this.renderGoogleDriveIcon()}
|
||||
{this.renderStorageIcon()}
|
||||
</div>
|
||||
|
||||
<div className='links'>
|
||||
|
||||
@@ -48,6 +48,10 @@
|
||||
&>span{
|
||||
margin-right : 12px;
|
||||
line-height : 1.5em;
|
||||
|
||||
a {
|
||||
color:inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
.brewTags span {
|
||||
@@ -98,4 +102,11 @@
|
||||
padding : 0px;
|
||||
margin : -5px;
|
||||
}
|
||||
.homebreweryIcon {
|
||||
mix-blend-mode : darken;
|
||||
height : 24px;
|
||||
position : relative;
|
||||
top : 5px;
|
||||
left : -5px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -89,7 +89,7 @@ const ListPage = createClass({
|
||||
sortBrewOrder : function(brew){
|
||||
if(!brew.title){brew.title = 'No Title';}
|
||||
const mapping = {
|
||||
'alpha' : _.deburr(brew.title.toLowerCase()),
|
||||
'alpha' : _.deburr(brew.title.trim().toLowerCase()),
|
||||
'created' : moment(brew.createdAt).format(),
|
||||
'updated' : moment(brew.updatedAt).format(),
|
||||
'views' : brew.views,
|
||||
@@ -220,6 +220,7 @@ const ListPage = createClass({
|
||||
render : function(){
|
||||
return <div className='listPage sitePage'>
|
||||
{/*<style>@layer V3_5ePHB, bundle;</style>*/}
|
||||
<link href='/themes/V3/Blank/style.css' rel='stylesheet'/>
|
||||
<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
|
||||
{this.props.navItems}
|
||||
{this.renderSortOptions()}
|
||||
|
||||
@@ -2,17 +2,18 @@
|
||||
.noColumns(){
|
||||
column-count : auto;
|
||||
column-fill : auto;
|
||||
column-gap : auto;
|
||||
column-gap : normal;
|
||||
column-width : auto;
|
||||
-webkit-column-count : auto;
|
||||
-moz-column-count : auto;
|
||||
-webkit-column-width : auto;
|
||||
-moz-column-width : auto;
|
||||
-webkit-column-gap : auto;
|
||||
-moz-column-gap : auto;
|
||||
-webkit-column-gap : normal;
|
||||
-moz-column-gap : normal;
|
||||
height : auto;
|
||||
min-height : 279.4mm;
|
||||
margin : 20px auto;
|
||||
contain : unset;
|
||||
}
|
||||
.listPage{
|
||||
.content{
|
||||
|
||||
@@ -16,6 +16,23 @@
|
||||
margin : 5px 0px;
|
||||
border : 2px solid black;
|
||||
border-radius : 5px;
|
||||
button {
|
||||
background-color : transparent;
|
||||
border : 1px solid black;
|
||||
border-radius : 5px;
|
||||
width : 125px;
|
||||
color : black;
|
||||
margin-right : 5px;
|
||||
&.active {
|
||||
background-color: #0007;
|
||||
color: white;
|
||||
&:before {
|
||||
content: '\f00c';
|
||||
font-family: 'FONT AWESOME 5 FREE';
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
h1, h2, h3, h4 {
|
||||
width : 100%;
|
||||
|
||||
@@ -50,7 +50,8 @@ const EditPage = createClass({
|
||||
url : '',
|
||||
autoSave : true,
|
||||
autoSaveWarning : false,
|
||||
unsavedTime : new Date()
|
||||
unsavedTime : new Date(),
|
||||
currentEditorPage : 0
|
||||
};
|
||||
},
|
||||
savedBrew : null,
|
||||
@@ -91,7 +92,7 @@ const EditPage = createClass({
|
||||
if(!(e.ctrlKey || e.metaKey)) return;
|
||||
const S_KEY = 83;
|
||||
const P_KEY = 80;
|
||||
if(e.keyCode == S_KEY) this.save();
|
||||
if(e.keyCode == S_KEY) this.trySave(true);
|
||||
if(e.keyCode == P_KEY) window.open(`/print/${this.processShareId()}?dialog=true`, '_blank').focus();
|
||||
if(e.keyCode == P_KEY || e.keyCode == S_KEY){
|
||||
e.stopPropagation();
|
||||
@@ -109,9 +110,10 @@ const EditPage = createClass({
|
||||
if(htmlErrors.length) htmlErrors = Markdown.validate(text);
|
||||
|
||||
this.setState((prevState)=>({
|
||||
brew : { ...prevState.brew, text: text },
|
||||
isPending : true,
|
||||
htmlErrors : htmlErrors
|
||||
brew : { ...prevState.brew, text: text },
|
||||
isPending : true,
|
||||
htmlErrors : htmlErrors,
|
||||
currentEditorPage : this.refs.editor.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
|
||||
}), ()=>{if(this.state.autoSave) this.trySave();});
|
||||
},
|
||||
|
||||
@@ -137,13 +139,14 @@ const EditPage = createClass({
|
||||
return !_.isEqual(this.state.brew, this.savedBrew);
|
||||
},
|
||||
|
||||
trySave : function(){
|
||||
trySave : function(immediate=false){
|
||||
if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
|
||||
if(this.hasChanges()){
|
||||
this.debounceSave();
|
||||
} else {
|
||||
this.debounceSave.cancel();
|
||||
}
|
||||
if(immediate) this.debounceSave.flush();
|
||||
},
|
||||
|
||||
handleGoogleClick : function(){
|
||||
@@ -404,6 +407,7 @@ const EditPage = createClass({
|
||||
theme={this.state.brew.theme}
|
||||
errors={this.state.htmlErrors}
|
||||
lang={this.state.brew.lang}
|
||||
currentEditorPage={this.state.currentEditorPage}
|
||||
/>
|
||||
</SplitPane>
|
||||
</div>
|
||||
|
||||
@@ -22,18 +22,18 @@ const errorIndex = (props)=>{
|
||||
## We can't find this brew in Google Drive!
|
||||
|
||||
This file was saved on Google Drive, but this link doesn't work anymore.
|
||||
${ props.brew.authors?.length > 0
|
||||
? `Note that this brew belongs to the Homebrewery account **${ props.brew.authors[0] }**,
|
||||
${ props.brew.account
|
||||
? `which is
|
||||
${props.brew.authors?.length > 0
|
||||
? `Note that this brew belongs to the Homebrewery account **${props.brew.authors[0]}**,
|
||||
${props.brew.account
|
||||
? `which is
|
||||
${props.brew.authors[0] == props.brew.account
|
||||
? `your account.`
|
||||
: `not your account (you are currently signed in as **${props.brew.account}**).`
|
||||
}`
|
||||
: 'and you are not currently signed in to any account.'
|
||||
}`
|
||||
: ''
|
||||
}
|
||||
? `your account.`
|
||||
: `not your account (you are currently signed in as **${props.brew.account}**).`
|
||||
}`
|
||||
: 'and you are not currently signed in to any account.'
|
||||
}`
|
||||
: ''
|
||||
}
|
||||
The Homebrewery cannot delete files from Google Drive on its own, so there
|
||||
are three most likely possibilities:
|
||||
:
|
||||
@@ -75,7 +75,9 @@ const errorIndex = (props)=>{
|
||||
|
||||
**Brew Title:** ${props.brew.brewTitle || 'Unable to show title'}
|
||||
|
||||
**Current Authors:** ${props.brew.authors?.map((author)=>{return `${author}`;}).join(', ') || 'Unable to list authors'}`,
|
||||
**Current Authors:** ${props.brew.authors?.map((author)=>{return `${author}`;}).join(', ') || 'Unable to list authors'}
|
||||
|
||||
[Click here to be redirected to the brew's share page.](/share/${props.brew.shareId})`,
|
||||
|
||||
// User is not signed in; must be a user on the Authors List
|
||||
'04' : dedent`
|
||||
|
||||
@@ -31,9 +31,10 @@ const HomePage = createClass({
|
||||
},
|
||||
getInitialState : function() {
|
||||
return {
|
||||
brew : this.props.brew,
|
||||
welcomeText : this.props.brew.text,
|
||||
error : undefined
|
||||
brew : this.props.brew,
|
||||
welcomeText : this.props.brew.text,
|
||||
error : undefined,
|
||||
currentEditorPage : 0
|
||||
};
|
||||
},
|
||||
handleSave : function(){
|
||||
@@ -53,7 +54,8 @@ const HomePage = createClass({
|
||||
},
|
||||
handleTextChange : function(text){
|
||||
this.setState((prevState)=>({
|
||||
brew : { ...prevState.brew, text: text }
|
||||
brew : { ...prevState.brew, text: text },
|
||||
currentEditorPage : this.refs.editor.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
|
||||
}));
|
||||
},
|
||||
renderNavbar : function(){
|
||||
@@ -85,7 +87,12 @@ const HomePage = createClass({
|
||||
renderer={this.state.brew.renderer}
|
||||
showEditButtons={false}
|
||||
/>
|
||||
<BrewRenderer text={this.state.brew.text} style={this.state.brew.style} renderer={this.state.brew.renderer}/>
|
||||
<BrewRenderer
|
||||
text={this.state.brew.text}
|
||||
style={this.state.brew.style}
|
||||
renderer={this.state.brew.renderer}
|
||||
currentEditorPage={this.state.currentEditorPage}
|
||||
/>
|
||||
</SplitPane>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -16,9 +16,9 @@ The Homebrewery makes the creation and sharing of authentic looking Fifth-Editio
|
||||
**Try it!** Simply edit the text on the left and watch it *update live* on the right. Note that not every button is visible on this demo page. Click New {{fas,fa-plus-square}} in the navbar above to start brewing with all the features!
|
||||
|
||||
### Editing and Sharing
|
||||
When you create your own homebrew, you will be given a *edit url* and a *share url*.
|
||||
When you create a new homebrew document ("brew"), your document will be given a *edit link* and a *share link*.
|
||||
|
||||
Any changes you make while on the *edit url* will be automatically saved to the database within a few seconds. Anyone with the edit url will be able to make edits to your homebrew, so be careful about who you share it with.
|
||||
The *edit link* is where you write your brew. If you edit a brew while logged in, you are added as one of the brew's authors, and no one else can edit that brew until you add them as a new author via the {{fa,fa-info-circle}} **Properties** tab. Brews without any author can still be edited by anyone with the *edit link*, so be careful about who you share it with if you prefer to work without an account.
|
||||
|
||||
Anyone with the *share url* will be able to access a read-only version of your homebrew.
|
||||
|
||||
@@ -48,57 +48,63 @@ If you want to save ink or have a monochrome printer, add the **PRINT → {{fas,
|
||||
|
||||
\column
|
||||
|
||||
## New in V3.0.0
|
||||
We've implemented an extended Markdown-like syntax for block and span elements, plus a few other changes, eliminating the need for HTML tags like `div` and `span` in most cases. No raw HTML tags should be needed in a brew (*but can still be used if you insist*).
|
||||
## V3 vs Legacy
|
||||
The Homebrewery has two renderers: Legacy and V3. The V3 renderer is recommended for all users because it is more powerful, more customizable, and continues to receive new feature updates while Legacy does not. However Legacy mode will remain available for older brews and veteran users.
|
||||
|
||||
At any time, any individual brew can be changed to your renderer of choice via the {{fa,fa-info-circle}} **Properties** tab on your brew. However, converting between Legacy and V3 may require heavily tweaking the document; while both renderers can use raw HTML, V3 prefers a streamlined curly bracket syntax that avoids the complex HTML structures required by Legacy.
|
||||
|
||||
Much of the syntax and styling has changed in V3, so converting a Legacy brew to V3 (or vice-versa) will require tweaking your document. *However*, all brews made prior to the release of v3.0.0 will still render normally, and you may switch between the "Legacy" brew renderer and the newer "V3" renderer via the {{fa,fa-info-circle}} **Properties** button on your brew at any time.
|
||||
|
||||
Scroll down to the next page for a brief summary of the changes and new features available in V3!
|
||||
|
||||
Scroll down to the next page for a brief summary of the changes and features available in V3!
|
||||
#### New Things All The Time!
|
||||
Check out the latest updates in the full changelog [here](/changelog).
|
||||
|
||||
### Helping out
|
||||
Like this tool? Want to buy me a beer? [Head here](https://www.patreon.com/Naturalcrit) to help me keep the servers running.
|
||||
Like this tool? Head over to our [Patreon](https://www.patreon.com/Naturalcrit) to help us keep the servers running.
|
||||
|
||||
This tool will **always** be free, never have ads, and I will never offer any "premium" features or whatever.
|
||||
|
||||
This tool will **always** be free, never have ads, and we will never offer any "premium" features or whatever.
|
||||
|
||||
### Bugs, Issues, Suggestions?
|
||||
Take a quick look at our [Frequently Asked Questions page](/faq) to see if your question has a handy answer.
|
||||
|
||||
Need help getting started or just the right look for your brew? Head to [r/Homebrewery](https://www.reddit.com/r/homebrewery/submit?selftext=true&title=%5BIssue%5D%20Describe%20Your%20Issue%20Here) and let us know!
|
||||
|
||||
Have an idea to make The Homebrewery better? Or did you find something that wasn't quite right? Check out the [GitHub Repo](https://github.com/naturalcrit/homebrewery/) to report technical issues.
|
||||
- Check the [Frequently Asked Questions](/faq) page first for quick answers.
|
||||
- Get help or the right look for your brew by posting on [r/Homebrewery](https://www.reddit.com/r/homebrewery/submit?selftext=true&title=%5BIssue%5D%20Describe%20Your%20Issue%20Here) or joining the [Discord Of Many Things](https://discord.gg/by3deKx).
|
||||
- Report technical issues or provide feedback on the [GitHub Repo](https://github.com/naturalcrit/homebrewery/).
|
||||
|
||||
### Legal Junk
|
||||
The Homebrewery is licensed using the [MIT License](https://github.com/naturalcrit/homebrewery/blob/master/license). Which means you are free to use The Homebrewery codebase any way that you want, except for claiming that you made it yourself.
|
||||
|
||||
If you wish to sell or in some way gain profit for what's created on this site, it's your responsibility to ensure you have the proper licenses/rights for any images or resources used.
|
||||
|
||||
#### Crediting Me
|
||||
If you'd like to credit me in your brew, I'd be flattered! Just reference that you made it with The Homebrewery.
|
||||
#### Crediting Us
|
||||
If you'd like to credit us in your brew, we'd be flattered! Just reference that you made it with The Homebrewery.
|
||||
|
||||
### More Homebrew Resources
|
||||
<a href='https://discord.gg/by3deKx' target='_blank'><img src='/assets/discordOfManyThings.svg' alt='Discord of Many Things Logo' title='Discord of Many Things Logo' style='width:50px; float: right; padding-left: 10px;'/></a>
|
||||
If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](https://www.reddit.com/r/UnearthedArcana/) and their list of useful resources [here](https://www.reddit.com/r/UnearthedArcana/wiki/resources). The <a href='https://discord.gg/by3deKx' target='_blank' title='Discord of Many Things'>Discord of Many Things</a> is another great resource to connect with fellow homebrewers for help and feedback.
|
||||
[{width:50px,float:right,padding-left:10px}](https://discord.gg/by3deKx)
|
||||
|
||||
If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](https://www.reddit.com/r/UnearthedArcana/) and their list of useful resources [here](https://www.reddit.com/r/UnearthedArcana/wiki/resources). The [Discord Of Many Things](https://discord.gg/by3deKx) is another great resource to connect with fellow homebrewers for help and feedback.
|
||||
|
||||
|
||||
{{position:absolute;top:20px;right:20px;width:auto
|
||||
<a href='https://discord.gg/by3deKx' target='_blank' title='Discord of Many Things' style='color: black;'><img src='/assets/discord.png' style='height:30px'/></a>
|
||||
<a href='https://github.com/naturalcrit/homebrewery' target='_blank' title='Github' style='color: black; padding-left: 5px;'><img src='/assets/github.png' style='height:30px'/></a>
|
||||
<a href='https://patreon.com/NaturalCrit' target='_blank' title='Patreon' style='color: black; padding-left: 5px;'><img src='/assets/patreon.png' style='height:30px'/></a>
|
||||
<a href='https://www.reddit.com/r/homebrewery/' target='_blank' title='Reddit' style='color: black; padding-left: 5px;'><img src='/assets/reddit.png' style='height:30px'/></a>
|
||||
[{height:30px}](https://discord.gg/by3deKx)
|
||||
[{height:30px}](https://github.com/naturalcrit/homebrewery)
|
||||
[{height:30px}](https://patreon.com/NaturalCrit)
|
||||
[{height:30px}](https://www.reddit.com/r/homebrewery/)
|
||||
}}
|
||||
|
||||
\page
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Markdown+
|
||||
The Homebrewery aims to make homebrewing as simple as possible, providing a live editor with Markdown syntax that is more human-readable and faster to write with than raw HTML.
|
||||
|
||||
In version 3.0.0, with a goal of adding maximum flexibility without users resorting to complex HTML to accomplish simple tasks, Homebrewery provides an extended verision of Markdown with additional syntax.
|
||||
**You can enable V3 via the {{fa,fa-info-circle}} Properties button!**
|
||||
From version 3.0.0, with a goal of adding maximum flexibility without users resorting to complex HTML to accomplish simple tasks, Homebrewery provides an extended verision of Markdown with additional syntax.
|
||||
|
||||
### Curly Brackets
|
||||
The biggest change in V3 is the replacement of `<span></span>` and `<div></div>` with `{{ }}` for a cleaner custom formatting. Inline spans and block elements can be created and given ID's and Classes, as well as css properties, each of which are comma separated with no spaces. Use double quotes if a value requires spaces. Spans and Blocks start the same:
|
||||
Standard Markdown lacks several equivalences to HTML. Hence, we have introduced `{{ }}` as a replacement for `<span></span>` and `<div></div>` for a cleaner custom formatting. Inline spans and block elements can be created and given ID's and Classes, as well as CSS properties, each of which are comma separated with no spaces. Use double quotes if a value requires spaces. Spans and Blocks start the same:
|
||||
|
||||
#### Span
|
||||
My favorite author is {{pen,#author,color:orange,font-family:"trebuchet ms" Brandon Sanderson}}. The orange text has a class of `pen`, an id of `author`, is colored orange, and given a new font. The first space outside of quotes marks the beginning of the content.
|
||||
@@ -126,16 +132,17 @@ A blank line can be achieved with a run of one or more `:` alone on a line. More
|
||||
|
||||
::
|
||||
|
||||
|
||||
Much nicer than `<br><br><br><br><br>`
|
||||
|
||||
### Definition Lists
|
||||
**Example** :: V3 uses HTML *definition lists* to create "lists" with hanging indents.
|
||||
|
||||
|
||||
|
||||
### Column Breaks
|
||||
Column and page breaks with `\column` and `\page`.
|
||||
|
||||
\column
|
||||
|
||||
### Tables
|
||||
Tables now allow column & row spanning between cells. This is included in some updated snippets, but a simplified example is given below.
|
||||
|
||||
@@ -163,13 +170,13 @@ Using *Curly Injection* you can assign an id, classes, or inline CSS properties
|
||||
|
||||
 {width:100px,border:"2px solid",border-radius:10px}
|
||||
|
||||
\* *When using Imgur-hosted images, use the "direct link", which can be found when you click into your image in the Imgur interace.*
|
||||
\* *When using Imgur-hosted images, use the "direct link", which can be found when you click into your image in the Imgur interface.*
|
||||
|
||||
## Snippets
|
||||
Homebrewery comes with a series of *code snippets* found at the top of the editor pane that make it easy to create brews as quickly as possible. Just set your cursor where you want the code to appear in the editor pane, choose a snippet, and make the adjustments you need.
|
||||
|
||||
## Style Editor Panel
|
||||
{{fa,fa-paint-brush}} Technically released prior to v3 but still new to many users, check out the new **Style Editor** located on the right side of the Snippet bar. This editor accepts CSS for styling without requiring `<style>` tags-- anything that would have gone inside style tags before can now be placed here, and snippets that insert CSS styles are now located on that tab.
|
||||
{{fa,fa-paint-brush}} Usually overlooked or unused by some users, the **Style Editor** tab is located on the right side of the Snippet bar. This editor accepts CSS for styling without requiring `<style>` tags-- anything that would have gone inside style tags before can now be placed here, and snippets that insert CSS styles are now located on that tab.
|
||||
|
||||
{{pageNumber 2}}
|
||||
{{footnote PART 2 | BORING STUFF}}
|
||||
|
||||
@@ -20,9 +20,10 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
||||
|
||||
const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
|
||||
|
||||
const BREWKEY = 'homebrewery-new';
|
||||
const BREWKEY = 'homebrewery-new';
|
||||
const STYLEKEY = 'homebrewery-new-style';
|
||||
const METAKEY = 'homebrewery-new-meta';
|
||||
const METAKEY = 'homebrewery-new-meta';
|
||||
let SAVEKEY;
|
||||
|
||||
|
||||
const NewPage = createClass({
|
||||
@@ -37,11 +38,12 @@ const NewPage = createClass({
|
||||
const brew = this.props.brew;
|
||||
|
||||
return {
|
||||
brew : brew,
|
||||
isSaving : false,
|
||||
saveGoogle : (global.account && global.account.googleId ? true : false),
|
||||
error : null,
|
||||
htmlErrors : Markdown.validate(brew.text)
|
||||
brew : brew,
|
||||
isSaving : false,
|
||||
saveGoogle : (global.account && global.account.googleId ? true : false),
|
||||
error : null,
|
||||
htmlErrors : Markdown.validate(brew.text),
|
||||
currentEditorPage : 0
|
||||
};
|
||||
},
|
||||
|
||||
@@ -62,12 +64,16 @@ const NewPage = createClass({
|
||||
brew.renderer = metaStorage?.renderer ?? brew.renderer;
|
||||
brew.theme = metaStorage?.theme ?? brew.theme;
|
||||
brew.lang = metaStorage?.lang ?? brew.lang;
|
||||
|
||||
this.setState({
|
||||
brew : brew
|
||||
});
|
||||
}
|
||||
|
||||
SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${global.account?.username || ''}`;
|
||||
const saveStorage = localStorage.getItem(SAVEKEY) || 'HOMEBREWERY';
|
||||
|
||||
this.setState({
|
||||
brew : brew,
|
||||
saveGoogle : (saveStorage == 'GOOGLE-DRIVE' && this.state.saveGoogle)
|
||||
});
|
||||
|
||||
localStorage.setItem(BREWKEY, brew.text);
|
||||
if(brew.style)
|
||||
localStorage.setItem(STYLEKEY, brew.style);
|
||||
@@ -99,8 +105,9 @@ const NewPage = createClass({
|
||||
if(htmlErrors.length) htmlErrors = Markdown.validate(text);
|
||||
|
||||
this.setState((prevState)=>({
|
||||
brew : { ...prevState.brew, text: text },
|
||||
htmlErrors : htmlErrors
|
||||
brew : { ...prevState.brew, text: text },
|
||||
htmlErrors : htmlErrors,
|
||||
currentEditorPage : this.refs.editor.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
|
||||
}));
|
||||
localStorage.setItem(BREWKEY, text);
|
||||
},
|
||||
@@ -215,7 +222,15 @@ const NewPage = createClass({
|
||||
onMetaChange={this.handleMetaChange}
|
||||
renderer={this.state.brew.renderer}
|
||||
/>
|
||||
<BrewRenderer text={this.state.brew.text} style={this.state.brew.style} renderer={this.state.brew.renderer} theme={this.state.brew.theme} lang={this.state.brew.lang} errors={this.state.htmlErrors}/>
|
||||
<BrewRenderer
|
||||
text={this.state.brew.text}
|
||||
style={this.state.brew.style}
|
||||
renderer={this.state.brew.renderer}
|
||||
theme={this.state.brew.theme}
|
||||
errors={this.state.htmlErrors}
|
||||
lang={this.state.brew.lang}
|
||||
currentEditorPage={this.state.currentEditorPage}
|
||||
/>
|
||||
</SplitPane>
|
||||
</div>
|
||||
</div>;
|
||||
|
||||
@@ -21,7 +21,8 @@ const PrintPage = createClass({
|
||||
brew : {
|
||||
text : '',
|
||||
style : '',
|
||||
renderer : 'legacy'
|
||||
renderer : 'legacy',
|
||||
lang : ''
|
||||
}
|
||||
};
|
||||
},
|
||||
@@ -32,7 +33,8 @@ const PrintPage = createClass({
|
||||
text : this.props.brew.text || '',
|
||||
style : this.props.brew.style || undefined,
|
||||
renderer : this.props.brew.renderer || 'legacy',
|
||||
theme : this.props.brew.theme || '5ePHB'
|
||||
theme : this.props.brew.theme || '5ePHB',
|
||||
lang : this.props.brew.lang || 'en'
|
||||
}
|
||||
};
|
||||
},
|
||||
@@ -49,7 +51,8 @@ const PrintPage = createClass({
|
||||
text : brewStorage,
|
||||
style : styleStorage,
|
||||
renderer : metaStorage?.renderer || 'legacy',
|
||||
theme : metaStorage?.theme || '5ePHB'
|
||||
theme : metaStorage?.theme || '5ePHB',
|
||||
lang : metaStorage?.lang || 'en'
|
||||
}
|
||||
};
|
||||
});
|
||||
@@ -100,7 +103,7 @@ const PrintPage = createClass({
|
||||
<link href={`/themes/${rendererPath}/${themePath}/style.css`} rel='stylesheet'/>
|
||||
{/* Apply CSS from Style tab */}
|
||||
{this.renderStyle()}
|
||||
<div className='pages' ref='pages'>
|
||||
<div className='pages' ref='pages' lang={this.state.brew.lang}>
|
||||
{this.renderPages()}
|
||||
</div>
|
||||
</div>;
|
||||
|
||||
29
faq.md
29
faq.md
@@ -62,16 +62,13 @@ pre {
|
||||
```
|
||||
|
||||
# FAQ
|
||||
{{wide Updated Oct. 11, 2021}}
|
||||
{{wide Updated Apr. 15, 2023}}
|
||||
|
||||
|
||||
### The site is down for me! Anyone else?
|
||||
|
||||
You can check the site status here: [Everyone or Just Me](https://downforeveryoneorjustme.com/homebrewery.naturalcrit.com)
|
||||
|
||||
### How do I log out?
|
||||
|
||||
Go to https://homebrewery.naturalcrit.com/login, and hit the "*logout*" link.
|
||||
|
||||
### Why am I getting an error when trying to save, and my account is linked to Google?
|
||||
|
||||
@@ -105,7 +102,7 @@ The best way to avoid this is to leave space at the end of a column equal to one
|
||||
|
||||
### Why do I need to manually create a new page? Why doesn't text flow between pages?
|
||||
|
||||
A Homebrewery document is at it's core an HTML & CSS document, and currently limited by the specs of those technologies. It is currently not possible to flow content from inside one box ("page") to the inside of another box. It seems likely that someday CSS will add this capability, and if/when that happens, Homebrewery will adopt it as soon as possible.
|
||||
A Homebrewery document is at its core an HTML & CSS document, and currently limited by the specs of those technologies. It is currently not possible to flow content from inside one box ("page") to the inside of another box. It seems likely that someday CSS will add this capability, and if/when that happens, Homebrewery will adopt it as soon as possible.
|
||||
|
||||
### Where do I get images?
|
||||
The Homebrewery does not provide images for use besides some page elements and example images for snippets. You will need to find your own images for use and be sure you are following the appropriate license requirements.
|
||||
@@ -120,26 +117,6 @@ The fonts used were originally created for use with the English language, though
|
||||
### Whenever I click on the "Get PDF" button, instead of getting a download, it opens Print Preview in another tab.
|
||||
Yes, this is by design. In the print preview, select "Save as PDF" as the Destination, and then click "Save". There will be a normal download dialog where you can save your brew as a PDF.
|
||||
|
||||
### The preview window is suddenly gone, I can only see the editor side of the Homebrewery (or the other way around).
|
||||
|
||||
1. Press `CTRL`+`SHIFT`+`i` (or right-click and select "Inspect") while in the Homebrewery.
|
||||
|
||||
2. Expand...
|
||||
```
|
||||
- `body`
|
||||
- `main`
|
||||
- `div class="homebrew"`
|
||||
- `div class="editPage page"`
|
||||
- `div class="content"`
|
||||
- `div class="splitPane"`
|
||||
```
|
||||
|
||||
There you will find 3 divs: `div class="pane" [...]`, `div class="divider" [...]`, and `div class="pane" [...]`.
|
||||
|
||||
The `class="pane"` looks similar to this: `div class="pane" data-reactid="36" style="flex: 0 0 auto; width: 925px;"`.
|
||||
|
||||
Change whatever stands behind width: to something smaller than your display width.
|
||||
|
||||
### I have white borders on the bottom/sides of the print preview.
|
||||
|
||||
The Homebrewery paper size and your print paper size do not match.
|
||||
@@ -149,4 +126,4 @@ The Homebrewery defaults to creating US Letter page sizes. If you are printing
|
||||
|
||||
### Typing `#### Adhesion` in the text editor doesn't show the header at all in the completed page?
|
||||
|
||||
Your ad-blocking software is mistakenly assuming your text to be an ad. Whitelist homebrewery.naturalcrit.com in your ad-blocking software.
|
||||
Your ad-blocking software is mistakenly assuming your text to be an ad. Whitelist homebrewery.naturalcrit.com in your ad-blocking software.
|
||||
|
||||
@@ -13,7 +13,7 @@ npm install
|
||||
npm audit fix
|
||||
npm run postinstall
|
||||
|
||||
cp freebsd/rc.d/homebrewery /usr/local/etc/rc.d/
|
||||
cp install/freebsd/rc.d/homebrewery /usr/local/etc/rc.d/
|
||||
chmod +x /usr/local/etc/rc.d/homebrewery
|
||||
|
||||
sysrc homebrewery_enable=YES
|
||||
|
||||
5887
package-lock.json
generated
5887
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
52
package.json
52
package.json
@@ -1,9 +1,10 @@
|
||||
{
|
||||
"name": "homebrewery",
|
||||
"description": "Create authentic looking D&D homebrews using only markdown",
|
||||
"version": "3.9.1",
|
||||
"version": "3.11.0",
|
||||
"engines": {
|
||||
"node": ">=18.16.x"
|
||||
"npm": "^10.2.x",
|
||||
"node": "^20.8.x"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -25,6 +26,7 @@
|
||||
"test:coverage": "jest --coverage --silent --runInBand",
|
||||
"test:dev": "jest --verbose --watch",
|
||||
"test:basic": "jest tests/markdown/basic.test.js --verbose",
|
||||
"test:variables": "jest tests/markdown/variables.test.js --verbose",
|
||||
"test:mustache-syntax": "jest '.*(mustache-syntax).*' --verbose --noStackTrace",
|
||||
"test:mustache-syntax:inline": "jest '.*(mustache-syntax).*' -t '^Inline:.*' --verbose --noStackTrace",
|
||||
"test:mustache-syntax:block": "jest '.*(mustache-syntax).*' -t '^Block:.*' --verbose --noStackTrace",
|
||||
@@ -78,54 +80,54 @@
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.22.9",
|
||||
"@babel/plugin-transform-runtime": "^7.22.9",
|
||||
"@babel/preset-env": "^7.22.9",
|
||||
"@babel/preset-react": "^7.22.5",
|
||||
"@googleapis/drive": "^5.1.0",
|
||||
"@babel/core": "^7.23.9",
|
||||
"@babel/plugin-transform-runtime": "^7.23.9",
|
||||
"@babel/preset-env": "^7.23.9",
|
||||
"@babel/preset-react": "^7.23.3",
|
||||
"@googleapis/drive": "^8.7.0",
|
||||
"body-parser": "^1.20.2",
|
||||
"classnames": "^2.3.2",
|
||||
"codemirror": "^5.65.6",
|
||||
"cookie-parser": "^1.4.6",
|
||||
"create-react-class": "^15.7.0",
|
||||
"dedent-tabs": "^0.10.3",
|
||||
"expr-eval": "^2.0.2",
|
||||
"express": "^4.18.2",
|
||||
"express-async-handler": "^1.2.0",
|
||||
"express-static-gzip": "2.1.7",
|
||||
"fs-extra": "11.1.1",
|
||||
"fs-extra": "11.2.0",
|
||||
"js-yaml": "^4.1.0",
|
||||
"jwt-simple": "^0.5.6",
|
||||
"less": "^3.13.1",
|
||||
"lodash": "^4.17.21",
|
||||
"marked": "5.1.1",
|
||||
"marked-extended-tables": "^1.0.6",
|
||||
"marked-gfm-heading-id": "^3.0.4",
|
||||
"marked-smartypants-lite": "^1.0.0",
|
||||
"marked": "11.2.0",
|
||||
"marked-extended-tables": "^1.0.8",
|
||||
"marked-gfm-heading-id": "^3.1.3",
|
||||
"marked-smartypants-lite": "^1.0.2",
|
||||
"markedLegacy": "npm:marked@^0.3.19",
|
||||
"moment": "^2.29.4",
|
||||
"mongoose": "^7.4.2",
|
||||
"moment": "^2.30.1",
|
||||
"mongoose": "^8.2.0",
|
||||
"nanoid": "3.3.4",
|
||||
"nconf": "^0.12.0",
|
||||
"npm": "^9.8.1",
|
||||
"nconf": "^0.12.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-frame-component": "^4.1.3",
|
||||
"react-router-dom": "6.14.2",
|
||||
"react-router-dom": "6.22.1",
|
||||
"sanitize-filename": "1.6.3",
|
||||
"superagent": "^6.1.0",
|
||||
"superagent": "^8.1.2",
|
||||
"vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^8.46.0",
|
||||
"eslint-plugin-jest": "^27.2.3",
|
||||
"eslint-plugin-react": "^7.33.1",
|
||||
"jest": "^29.6.2",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-plugin-jest": "^27.9.0",
|
||||
"eslint-plugin-react": "^7.33.2",
|
||||
"jest": "^29.7.0",
|
||||
"jest-expect-message": "^1.1.3",
|
||||
"postcss-less": "^6.0.0",
|
||||
"stylelint": "^15.10.2",
|
||||
"stylelint-config-recess-order": "^4.3.0",
|
||||
"stylelint": "^15.11.0",
|
||||
"stylelint-config-recess-order": "^4.6.0",
|
||||
"stylelint-config-recommended": "^13.0.0",
|
||||
"stylelint-stylistic": "^0.4.3",
|
||||
"supertest": "^6.3.3"
|
||||
"supertest": "^6.3.4"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -99,6 +99,27 @@ fs.emptyDirSync('./build');
|
||||
await fs.copy('./themes/assets', './build/assets');
|
||||
await fs.copy('./client/icons', './build/icons');
|
||||
|
||||
//v==---------------------------MOVE CM EDITOR THEMES -----------------------------==v//
|
||||
|
||||
const editorThemesBuildDir = './build/homebrew/cm-themes';
|
||||
await fs.copy('./node_modules/codemirror/theme', editorThemesBuildDir);
|
||||
await fs.copy('./themes/codeMirror/customThemes', editorThemesBuildDir);
|
||||
editorThemeFiles = fs.readdirSync(editorThemesBuildDir);
|
||||
|
||||
const editorThemeFile = './themes/codeMirror/editorThemes.json';
|
||||
if(fs.existsSync(editorThemeFile)) fs.rmSync(editorThemeFile);
|
||||
const stream = fs.createWriteStream(editorThemeFile, { flags: 'a' });
|
||||
stream.write('[\n"default"');
|
||||
|
||||
for (themeFile of editorThemeFiles) {
|
||||
stream.write(`,\n"${themeFile.slice(0, -4)}"`);
|
||||
}
|
||||
stream.write('\n]\n');
|
||||
stream.end();
|
||||
|
||||
|
||||
await fs.copy('./themes/codeMirror', './build/homebrew/codeMirror');
|
||||
|
||||
//v==----------------------------- BUNDLE PACKAGES --------------------------------==v//
|
||||
|
||||
const bundles = await pack('./client/homebrew/homebrew.jsx', {
|
||||
@@ -133,14 +154,14 @@ fs.emptyDirSync('./build');
|
||||
// build(bundles);
|
||||
//
|
||||
|
||||
})().catch(console.error);
|
||||
//In development, set up LiveReload (refreshes browser), and Nodemon (restarts server)
|
||||
if(isDev){
|
||||
livereload('./build'); // Install the Chrome extension LiveReload to automatically refresh the browser
|
||||
watchFile('./server.js', { // Restart server when change detected to this file or any nested directory from here
|
||||
ignore : ['./build', './client', './themes'], // Ignore folders that are not running server code / avoids unneeded restarts
|
||||
ext : 'js json' // Extensions to watch (only .js/.json by default)
|
||||
//watch : ['./server', './themes'], // Watch additional folders if needed
|
||||
});
|
||||
}
|
||||
|
||||
//In development, set up LiveReload (refreshes browser), and Nodemon (restarts server)
|
||||
if(isDev){
|
||||
livereload('./build'); // Install the Chrome extension LiveReload to automatically refresh the browser
|
||||
watchFile('./server.js', { // Restart server when change detected to this file or any nested directory from here
|
||||
ignore : ['./build', './client', './themes'], // Ignore folders that are not running server code / avoids unneeded restarts
|
||||
ext : 'js json' // Extensions to watch (only .js/.json by default)
|
||||
//watch : ['./server', './themes'], // Watch additional folders if needed
|
||||
});
|
||||
}
|
||||
})().catch(console.error);
|
||||
@@ -26,7 +26,6 @@
|
||||
"codemirror/addon/edit/trailingspace.js",
|
||||
"codemirror/addon/selection/active-line.js",
|
||||
"moment",
|
||||
"superagent",
|
||||
"marked"
|
||||
"superagent"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -26,85 +26,124 @@ const mw = {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/* Search for brews that are older than 3 days and that are shorter than a tweet */
|
||||
const junkBrewQuery = HomebrewModel.find({
|
||||
'$where' : 'this.text.length < 140',
|
||||
createdAt : {
|
||||
$lt : Moment().subtract(30, 'days').toDate()
|
||||
}
|
||||
}).limit(100).maxTime(60000);
|
||||
const junkBrewPipeline = [
|
||||
{ $match : {
|
||||
updatedAt : { $lt: Moment().subtract(30, 'days').toDate() },
|
||||
lastViewed : { $lt: Moment().subtract(30, 'days').toDate() }
|
||||
}},
|
||||
{ $project: { textBinSize: { $binarySize: '$textBin' } } },
|
||||
{ $match: { textBinSize: { $lt: 140 } } },
|
||||
{ $limit: 100 }
|
||||
];
|
||||
|
||||
/* Search for brews that aren't compressed (missing the compressed text field) */
|
||||
const uncompressedBrewQuery = HomebrewModel.find({
|
||||
'text' : { '$exists': true }
|
||||
}).lean().limit(10000).select('_id');
|
||||
|
||||
// Search for up to 100 brews that have not been viewed or updated in 30 days and are shorter than 140 bytes
|
||||
router.get('/admin/cleanup', mw.adminOnly, (req, res)=>{
|
||||
junkBrewQuery.exec((err, objs)=>{
|
||||
if(err) return res.status(500).send(err);
|
||||
return res.json({ count: objs.length });
|
||||
});
|
||||
HomebrewModel.aggregate(junkBrewPipeline).option({ maxTimeMS: 60000 })
|
||||
.then((objs)=>res.json({ count: objs.length }))
|
||||
.catch((error)=>{
|
||||
console.error(error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
});
|
||||
});
|
||||
/* Removes all empty brews that are older than 3 days and that are shorter than a tweet */
|
||||
|
||||
// Delete up to 100 brews that have not been viewed or updated in 30 days and are shorter than 140 bytes
|
||||
router.post('/admin/cleanup', mw.adminOnly, (req, res)=>{
|
||||
junkBrewQuery.remove().exec((err, objs)=>{
|
||||
if(err) return res.status(500).send(err);
|
||||
return res.json({ count: objs.length });
|
||||
});
|
||||
HomebrewModel.aggregate(junkBrewPipeline).option({ maxTimeMS: 60000 })
|
||||
.then((docs)=>{
|
||||
const ids = docs.map((doc)=>doc._id);
|
||||
return HomebrewModel.deleteMany({ _id: { $in: ids } });
|
||||
}).then((result)=>{
|
||||
res.json({ count: result.deletedCount });
|
||||
}).catch((error)=>{
|
||||
console.error(error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
});
|
||||
});
|
||||
|
||||
/* Searches for matching edit or share id, also attempts to partial match */
|
||||
router.get('/admin/lookup/:id', mw.adminOnly, (req, res, next)=>{
|
||||
HomebrewModel.findOne({ $or : [
|
||||
{ editId: { '$regex': req.params.id, '$options': 'i' } },
|
||||
{ shareId: { '$regex': req.params.id, '$options': 'i' } },
|
||||
] }).exec((err, brew)=>{
|
||||
return res.json(brew);
|
||||
router.get('/admin/lookup/:id', mw.adminOnly, async (req, res, next)=>{
|
||||
HomebrewModel.findOne({
|
||||
$or : [
|
||||
{ editId: { $regex: req.params.id, $options: 'i' } },
|
||||
{ shareId: { $regex: req.params.id, $options: 'i' } },
|
||||
]
|
||||
}).exec()
|
||||
.then((brew)=>{
|
||||
if(!brew) // No document found
|
||||
return res.status(404).json({ error: 'Document not found' });
|
||||
else
|
||||
return res.json(brew);
|
||||
})
|
||||
.catch((err)=>{
|
||||
console.error(err);
|
||||
return res.status(500).json({ error: 'Internal Server Error' });
|
||||
});
|
||||
});
|
||||
|
||||
/* Find 50 brews that aren't compressed yet */
|
||||
router.get('/admin/finduncompressed', mw.adminOnly, (req, res)=>{
|
||||
uncompressedBrewQuery.exec((err, objs)=>{
|
||||
if(err) return res.status(500).send(err);
|
||||
objs = objs.map((obj)=>{return obj._id;});
|
||||
return res.json({ count: objs.length, ids: objs });
|
||||
});
|
||||
const query = uncompressedBrewQuery.clone();
|
||||
|
||||
query.exec()
|
||||
.then((objs)=>{
|
||||
const ids = objs.map((obj)=>obj._id);
|
||||
res.json({ count: ids.length, ids });
|
||||
})
|
||||
.catch((err)=>{
|
||||
console.error(err);
|
||||
res.status(500).send(err.message || 'Internal Server Error');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/* Compresses the "text" field of a brew to binary */
|
||||
router.put('/admin/compress/:id', (req, res)=>{
|
||||
HomebrewModel.get({ _id: req.params.id })
|
||||
HomebrewModel.findOne({ _id: req.params.id })
|
||||
.then((brew)=>{
|
||||
brew.textBin = zlib.deflateRawSync(brew.text); // Compress brew text to binary before saving
|
||||
brew.text = undefined; // Delete the non-binary text field since it's not needed anymore
|
||||
if(!brew)
|
||||
return res.status(404).send('Brew not found');
|
||||
|
||||
brew.save((err, obj)=>{
|
||||
if(err) throw err;
|
||||
return res.status(200).send(obj);
|
||||
});
|
||||
if(brew.text) {
|
||||
brew.textBin = brew.textBin || zlib.deflateRawSync(brew.text); //Don't overwrite textBin if exists
|
||||
brew.text = undefined;
|
||||
}
|
||||
|
||||
return brew.save();
|
||||
})
|
||||
.then((obj)=>res.status(200).send(obj))
|
||||
.catch((err)=>{
|
||||
console.log(err);
|
||||
return res.status(500).send('Error while saving');
|
||||
console.error(err);
|
||||
res.status(500).send('Error while saving');
|
||||
});
|
||||
});
|
||||
|
||||
router.get('/admin/stats', mw.adminOnly, (req, res)=>{
|
||||
HomebrewModel.count({}, (err, count)=>{
|
||||
|
||||
router.get('/admin/stats', mw.adminOnly, async (req, res)=>{
|
||||
try {
|
||||
const totalBrewsCount = await HomebrewModel.countDocuments({});
|
||||
const publishedBrewsCount = await HomebrewModel.countDocuments({ published: true });
|
||||
|
||||
return res.json({
|
||||
totalBrews : count
|
||||
totalBrews : totalBrewsCount,
|
||||
totalPublishedBrews : publishedBrewsCount
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/admin', mw.adminOnly, (req, res)=>{
|
||||
templateFn('admin', {
|
||||
url : req.originalUrl
|
||||
})
|
||||
.then((page)=>res.send(page))
|
||||
.catch((err)=>res.sendStatus(500));
|
||||
.then((page)=>res.send(page))
|
||||
.catch((err)=>res.sendStatus(500));
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
|
||||
@@ -257,6 +257,7 @@ app.get('/user/:username', async (req, res, next)=>{
|
||||
brew.pageCount = googleBrews[match].pageCount;
|
||||
brew.renderer = googleBrews[match].renderer;
|
||||
brew.version = googleBrews[match].version;
|
||||
brew.webViewLink = googleBrews[match].webViewLink;
|
||||
googleBrews.splice(match, 1);
|
||||
}
|
||||
}
|
||||
@@ -267,6 +268,9 @@ app.get('/user/:username', async (req, res, next)=>{
|
||||
}
|
||||
|
||||
req.brews = _.map(brews, (brew)=>{
|
||||
// Clean up brew data
|
||||
brew.title = brew.title?.trim();
|
||||
brew.description = brew.description?.trim();
|
||||
return sanitizeBrew(brew, ownAccount ? 'edit' : 'share');
|
||||
});
|
||||
|
||||
@@ -300,7 +304,8 @@ app.get('/new/:id', asyncHandler(getBrew('share')), (req, res, next)=>{
|
||||
text : req.brew.text,
|
||||
style : req.brew.style,
|
||||
renderer : req.brew.renderer,
|
||||
theme : req.brew.theme
|
||||
theme : req.brew.theme,
|
||||
tags : req.brew.tags
|
||||
};
|
||||
req.brew = _.defaults(brew, DEFAULT_BREW);
|
||||
|
||||
@@ -323,14 +328,17 @@ app.get('/share/:id', asyncHandler(getBrew('share')), asyncHandler(async (req, r
|
||||
type : 'article'
|
||||
};
|
||||
|
||||
if(req.params.id.length > 12 && !brew._id) {
|
||||
const googleId = brew.googleId;
|
||||
const shareId = brew.shareId;
|
||||
await GoogleActions.increaseView(googleId, shareId, 'share', brew)
|
||||
.catch((err)=>{next(err);});
|
||||
} else {
|
||||
await HomebrewModel.increaseView({ shareId: brew.shareId });
|
||||
}
|
||||
// increase visitor view count, do not include visits by author(s)
|
||||
if(!brew.authors.includes(req.account?.username)){
|
||||
if(req.params.id.length > 12 && !brew._id) {
|
||||
const googleId = brew.googleId;
|
||||
const shareId = brew.shareId;
|
||||
await GoogleActions.increaseView(googleId, shareId, 'share', brew)
|
||||
.catch((err)=>{next(err);});
|
||||
} else {
|
||||
await HomebrewModel.increaseView({ shareId: brew.shareId });
|
||||
}
|
||||
};
|
||||
sanitizeBrew(req.brew, 'share');
|
||||
splitTextStyleAndMetadata(req.brew);
|
||||
return next();
|
||||
@@ -465,9 +473,18 @@ const getPureError = (error)=>{
|
||||
};
|
||||
|
||||
app.use(async (err, req, res, next)=>{
|
||||
const status = err.status || err.code || 500;
|
||||
err.originalUrl = req.originalUrl;
|
||||
console.error(err);
|
||||
|
||||
if(err.originalUrl?.startsWith('/api/')) {
|
||||
// console.log('API error');
|
||||
res.status(err.status || err.response?.status || 500).send(err);
|
||||
return;
|
||||
}
|
||||
|
||||
// console.log('non-API error');
|
||||
const status = err.status || err.code || 500;
|
||||
|
||||
req.ogMeta = { ...defaultMetaTags,
|
||||
title : 'Error Page',
|
||||
description : 'Something went wrong!'
|
||||
|
||||
@@ -106,7 +106,7 @@ const GoogleActions = {
|
||||
const obj = await drive.files.list({
|
||||
pageSize : 1000,
|
||||
pageToken : NextPageToken || '',
|
||||
fields : 'nextPageToken, files(id, name, description, createdTime, modifiedTime, properties)',
|
||||
fields : 'nextPageToken, files(id, name, description, createdTime, modifiedTime, properties, webViewLink)',
|
||||
q : 'mimeType != \'application/vnd.google-apps.folder\' and trashed = false'
|
||||
})
|
||||
.catch((err)=>{
|
||||
@@ -139,7 +139,8 @@ const GoogleActions = {
|
||||
published : file.properties.published ? file.properties.published == 'true' : false,
|
||||
systems : [],
|
||||
lang : file.properties.lang,
|
||||
thumbnail : file.properties.thumbnail
|
||||
thumbnail : file.properties.thumbnail,
|
||||
webViewLink : file.webViewLink
|
||||
};
|
||||
});
|
||||
return brews;
|
||||
|
||||
@@ -79,7 +79,7 @@ const api = {
|
||||
if(accessType === 'edit' && (authorsExist && !(isAuthor || isInvited))) {
|
||||
const accessError = { name: 'Access Error', status: 401 };
|
||||
if(req.account){
|
||||
throw { ...accessError, message: 'User is not an Author', HBErrorCode: '03', authors: stub.authors, brewTitle: stub.title };
|
||||
throw { ...accessError, message: 'User is not an Author', HBErrorCode: '03', authors: stub.authors, brewTitle: stub.title, shareId: stub.shareId };
|
||||
}
|
||||
throw { ...accessError, message: 'User is not logged in', HBErrorCode: '04', authors: stub.authors, brewTitle: stub.title };
|
||||
}
|
||||
@@ -153,6 +153,9 @@ const api = {
|
||||
brew.text = api.mergeBrewText(brew);
|
||||
|
||||
_.defaults(brew, DEFAULT_BREW);
|
||||
|
||||
brew.title = brew.title.trim();
|
||||
brew.description = brew.description.trim();
|
||||
},
|
||||
newGoogleBrew : async (account, brew, res)=>{
|
||||
const oAuth2Client = GoogleActions.authCheck(account, res);
|
||||
@@ -217,6 +220,8 @@ const api = {
|
||||
const { saveToGoogle, removeFromGoogle } = req.query;
|
||||
let afterSave = async ()=>true;
|
||||
|
||||
brew.title = brew.title.trim();
|
||||
brew.description = brew.description.trim() || '';
|
||||
brew.text = api.mergeBrewText(brew);
|
||||
|
||||
if(brew.googleId && removeFromGoogle) {
|
||||
|
||||
@@ -7,7 +7,7 @@ const cx = require('classnames');
|
||||
const closeTag = require('./close-tag');
|
||||
|
||||
let CodeMirror;
|
||||
if(typeof navigator !== 'undefined'){
|
||||
if(typeof window !== 'undefined'){
|
||||
CodeMirror = require('codemirror');
|
||||
|
||||
//Language Modes
|
||||
@@ -49,7 +49,8 @@ const CodeEditor = createClass({
|
||||
value : '',
|
||||
wrap : true,
|
||||
onChange : ()=>{},
|
||||
enableFolding : true
|
||||
enableFolding : true,
|
||||
editorTheme : 'default'
|
||||
};
|
||||
},
|
||||
|
||||
@@ -91,6 +92,10 @@ const CodeEditor = createClass({
|
||||
} else {
|
||||
this.codeMirror.setOption('foldOptions', false);
|
||||
}
|
||||
|
||||
if(prevProps.editorTheme !== this.props.editorTheme){
|
||||
this.codeMirror.setOption('theme', this.props.editorTheme);
|
||||
}
|
||||
},
|
||||
|
||||
buildEditor : function() {
|
||||
@@ -107,6 +112,10 @@ const CodeEditor = createClass({
|
||||
'Shift-Tab' : this.dedent,
|
||||
'Ctrl-B' : this.makeBold,
|
||||
'Cmd-B' : this.makeBold,
|
||||
'Shift-Ctrl-=' : this.makeSuper,
|
||||
'Shift-Cmd-=' : this.makeSuper,
|
||||
'Ctrl-=' : this.makeSub,
|
||||
'Cmd-=' : this.makeSub,
|
||||
'Ctrl-I' : this.makeItalic,
|
||||
'Cmd-I' : this.makeItalic,
|
||||
'Ctrl-U' : this.makeUnderline,
|
||||
@@ -159,6 +168,7 @@ const CodeEditor = createClass({
|
||||
autoCloseTags : true,
|
||||
styleActiveLine : true,
|
||||
showTrailingSpace : false,
|
||||
theme : this.props.editorTheme
|
||||
// specialChars : / /,
|
||||
// specialCharPlaceholder : function(char) {
|
||||
// const el = document.createElement('span');
|
||||
@@ -213,6 +223,25 @@ const CodeEditor = createClass({
|
||||
}
|
||||
},
|
||||
|
||||
makeSuper : function() {
|
||||
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '^' && selection.slice(-1) === '^';
|
||||
this.codeMirror.replaceSelection(t ? selection.slice(1, -1) : `^${selection}^`, 'around');
|
||||
if(selection.length === 0){
|
||||
const cursor = this.codeMirror.getCursor();
|
||||
this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 1 });
|
||||
}
|
||||
},
|
||||
|
||||
makeSub : function() {
|
||||
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '^^' && selection.slice(-2) === '^^';
|
||||
this.codeMirror.replaceSelection(t ? selection.slice(2, -2) : `^^${selection}^^`, 'around');
|
||||
if(selection.length === 0){
|
||||
const cursor = this.codeMirror.getCursor();
|
||||
this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 2 });
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
makeNbsp : function() {
|
||||
this.codeMirror.replaceSelection(' ', 'end');
|
||||
},
|
||||
@@ -406,7 +435,10 @@ const CodeEditor = createClass({
|
||||
//----------------------//
|
||||
|
||||
render : function(){
|
||||
return <div className='codeEditor' ref='editor' style={this.props.style}/>;
|
||||
return <>
|
||||
<link href={`../homebrew/cm-themes/${this.props.editorTheme}.css`} rel='stylesheet' />
|
||||
<div className='codeEditor' ref='editor' style={this.props.style}/>
|
||||
</>;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -4,7 +4,40 @@ const Marked = require('marked');
|
||||
const MarkedExtendedTables = require('marked-extended-tables');
|
||||
const { markedSmartypantsLite: MarkedSmartypantsLite } = require('marked-smartypants-lite');
|
||||
const { gfmHeadingId: MarkedGFMHeadingId } = require('marked-gfm-heading-id');
|
||||
const MathParser = require('expr-eval').Parser;
|
||||
const renderer = new Marked.Renderer();
|
||||
const tokenizer = new Marked.Tokenizer();
|
||||
|
||||
//Limit math features to simple items
|
||||
const mathParser = new MathParser({
|
||||
operators : {
|
||||
// These default to true, but are included to be explicit
|
||||
add : true,
|
||||
subtract : true,
|
||||
multiply : true,
|
||||
divide : true,
|
||||
power : true,
|
||||
round : true,
|
||||
floor : true,
|
||||
ceil : true,
|
||||
|
||||
sin : false, cos : false, tan : false, asin : false, acos : false,
|
||||
atan : false, sinh : false, cosh : false, tanh : false, asinh : false,
|
||||
acosh : false, atanh : false, sqrt : false, cbrt : false, log : false,
|
||||
log2 : false, ln : false, lg : false, log10 : false, expm1 : false,
|
||||
log1p : false, abs : false, trunc : false, join : false, sum : false,
|
||||
'-' : false, '+' : false, exp : false, not : false, length : false,
|
||||
'!' : false, sign : false, random : false, fac : false, min : false,
|
||||
max : false, hypot : false, pyt : false, pow : false, atan2 : false,
|
||||
'if' : false, gamma : false, roundTo : false, map : false, fold : false,
|
||||
filter : false, indexOf : false,
|
||||
|
||||
remainder : false, factorial : false,
|
||||
comparison : false, concatenate : false,
|
||||
logical : false, assignment : false,
|
||||
array : false, fndef : false
|
||||
}
|
||||
});
|
||||
|
||||
//Processes the markdown within an HTML block if it's just a class-wrapper
|
||||
renderer.html = function (html) {
|
||||
@@ -28,13 +61,40 @@ renderer.paragraph = function(text){
|
||||
return `<p>${text}</p>\n`;
|
||||
};
|
||||
|
||||
//Fix local links in the Preview iFrame to link inside the frame
|
||||
renderer.link = function (href, title, text) {
|
||||
let self = false;
|
||||
if(href[0] == '#') {
|
||||
self = true;
|
||||
}
|
||||
href = cleanUrl(this.options.sanitize, this.options.baseUrl, href);
|
||||
|
||||
if(href === null) {
|
||||
return text;
|
||||
}
|
||||
let out = `<a href="${escape(href)}"`;
|
||||
if(title) {
|
||||
out += ` title="${title}"`;
|
||||
}
|
||||
if(self) {
|
||||
out += ' target="_self"';
|
||||
}
|
||||
out += `>${text}</a>`;
|
||||
return out;
|
||||
};
|
||||
|
||||
// Disable default reflink behavior, as it steps on our variables extension
|
||||
tokenizer.def = function () {
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const mustacheSpans = {
|
||||
name : 'mustacheSpans',
|
||||
level : 'inline', // Is this a block-level or inline-level tokenizer?
|
||||
start(src) { return src.match(/{{[^{]/)?.index; }, // Hint to Marked.js to stop and check for a match
|
||||
tokenizer(src, tokens) {
|
||||
const completeSpan = /^{{[^\n]*}}/; // Regex for the complete token
|
||||
const inlineRegex = /{{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1 *|}}/g;
|
||||
const inlineRegex = /{{(?=((?:[:=](?:"['\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1 *|}}/g;
|
||||
const match = completeSpan.exec(src);
|
||||
if(match) {
|
||||
//Find closing delimiter
|
||||
@@ -45,7 +105,7 @@ const mustacheSpans = {
|
||||
let delim;
|
||||
while (delim = inlineRegex.exec(match[0])) {
|
||||
if(!tags) {
|
||||
tags = ` ${processStyleTags(delim[0].substring(2))}`;
|
||||
tags = `${processStyleTags(delim[0].substring(2))}`;
|
||||
endTags = delim[0].length;
|
||||
}
|
||||
if(delim[0].startsWith('{{')) {
|
||||
@@ -84,7 +144,7 @@ const mustacheDivs = {
|
||||
start(src) { return src.match(/\n *{{[^{]/m)?.index; }, // Hint to Marked.js to stop and check for a match
|
||||
tokenizer(src, tokens) {
|
||||
const completeBlock = /^ *{{[^\n}]* *\n.*\n *}}/s; // Regex for the complete token
|
||||
const blockRegex = /^ *{{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1 *$|^ *}}$/gm;
|
||||
const blockRegex = /^ *{{(?=((?:[:=](?:"['\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1 *$|^ *}}$/gm;
|
||||
const match = completeBlock.exec(src);
|
||||
if(match) {
|
||||
//Find closing delimiter
|
||||
@@ -95,8 +155,8 @@ const mustacheDivs = {
|
||||
let delim;
|
||||
while (delim = blockRegex.exec(match[0])?.[0].trim()) {
|
||||
if(!tags) {
|
||||
tags = ` ${processStyleTags(delim.substring(2))}`;
|
||||
endTags = delim.length;
|
||||
tags = `${processStyleTags(delim.substring(2))}`;
|
||||
endTags = delim.length + src.indexOf(delim);
|
||||
}
|
||||
if(delim.startsWith('{{')) {
|
||||
blockCount++;
|
||||
@@ -132,14 +192,14 @@ const mustacheInjectInline = {
|
||||
level : 'inline',
|
||||
start(src) { return src.match(/ *{[^{\n]/)?.index; }, // Hint to Marked.js to stop and check for a match
|
||||
tokenizer(src, tokens) {
|
||||
const inlineRegex = /^ *{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1}/g;
|
||||
const inlineRegex = /^ *{(?=((?:[:=](?:"['\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1}/g;
|
||||
const match = inlineRegex.exec(src);
|
||||
if(match) {
|
||||
const lastToken = tokens[tokens.length - 1];
|
||||
if(!lastToken || lastToken.type == 'mustacheInjectInline')
|
||||
return false;
|
||||
|
||||
const tags = ` ${processStyleTags(match[1])}`;
|
||||
const tags = `${processStyleTags(match[1])}`;
|
||||
lastToken.originalType = lastToken.type;
|
||||
lastToken.type = 'mustacheInjectInline';
|
||||
lastToken.tags = tags;
|
||||
@@ -167,7 +227,7 @@ const mustacheInjectBlock = {
|
||||
level : 'block',
|
||||
start(src) { return src.match(/\n *{[^{\n]/m)?.index; }, // Hint to Marked.js to stop and check for a match
|
||||
tokenizer(src, tokens) {
|
||||
const inlineRegex = /^ *{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1}/ym;
|
||||
const inlineRegex = /^ *{(?=((?:[:=](?:"['\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1}/ym;
|
||||
const match = inlineRegex.exec(src);
|
||||
if(match) {
|
||||
const lastToken = tokens[tokens.length - 1];
|
||||
@@ -175,7 +235,7 @@ const mustacheInjectBlock = {
|
||||
return false;
|
||||
|
||||
lastToken.originalType = 'mustacheInjectBlock';
|
||||
lastToken.tags = ` ${processStyleTags(match[1])}`;
|
||||
lastToken.tags = `${processStyleTags(match[1])}`;
|
||||
return {
|
||||
type : 'mustacheInjectBlock', // Should match "name" above
|
||||
raw : match[0], // Text to consume from the source
|
||||
@@ -206,6 +266,34 @@ const mustacheInjectBlock = {
|
||||
}
|
||||
};
|
||||
|
||||
const superSubScripts = {
|
||||
name : 'superSubScript',
|
||||
level : 'inline',
|
||||
start(src) { return src.match(/\^/m)?.index; }, // Hint to Marked.js to stop and check for a match
|
||||
tokenizer(src, tokens) {
|
||||
const superRegex = /^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/m;
|
||||
const subRegex = /^\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/m;
|
||||
let isSuper = false;
|
||||
let match = subRegex.exec(src);
|
||||
if(!match){
|
||||
match = superRegex.exec(src);
|
||||
if(match)
|
||||
isSuper = true;
|
||||
}
|
||||
if(match?.length) {
|
||||
return {
|
||||
type : 'superSubScript', // Should match "name" above
|
||||
raw : match[0], // Text to consume from the source
|
||||
tag : isSuper ? 'sup' : 'sub',
|
||||
tokens : this.lexer.inlineTokens(match[1])
|
||||
};
|
||||
}
|
||||
},
|
||||
renderer(token) {
|
||||
return `<${token.tag}>${this.parser.parseInline(token.tokens)}</${token.tag}>`;
|
||||
}
|
||||
};
|
||||
|
||||
const definitionLists = {
|
||||
name : 'definitionLists',
|
||||
level : 'block',
|
||||
@@ -238,33 +326,257 @@ const definitionLists = {
|
||||
}
|
||||
};
|
||||
|
||||
Marked.use({ extensions: [mustacheSpans, mustacheDivs, mustacheInjectInline, definitionLists] });
|
||||
Marked.use(mustacheInjectBlock);
|
||||
Marked.use({ renderer: renderer, mangle: false });
|
||||
Marked.use(MarkedExtendedTables(), MarkedGFMHeadingId(), MarkedSmartypantsLite());
|
||||
|
||||
//Fix local links in the Preview iFrame to link inside the frame
|
||||
renderer.link = function (href, title, text) {
|
||||
let self = false;
|
||||
if(href[0] == '#') {
|
||||
self = true;
|
||||
}
|
||||
href = cleanUrl(this.options.sanitize, this.options.baseUrl, href);
|
||||
//v=====--------------------< Variable Handling >-------------------=====v// 242 lines
|
||||
const replaceVar = function(input, hoist=false, allowUnresolved=false) {
|
||||
const regex = /([!$]?)\[((?!\s*\])(?:\\.|[^\[\]\\])+)\]/g;
|
||||
const match = regex.exec(input);
|
||||
|
||||
if(href === null) {
|
||||
return text;
|
||||
const prefix = match[1];
|
||||
const label = match[2];
|
||||
|
||||
//v=====--------------------< HANDLE MATH >-------------------=====v//
|
||||
const mathRegex = /[a-z]+\(|[+\-*/^()]/g;
|
||||
const matches = label.split(mathRegex);
|
||||
const mathVars = matches.filter((match)=>isNaN(match))?.map((s)=>s.trim()); // Capture any variable names
|
||||
|
||||
let replacedLabel = label;
|
||||
|
||||
if(prefix[0] == '$' && mathVars?.[0] !== label.trim()) {// If there was mathy stuff not captured, let's do math!
|
||||
mathVars?.forEach((variable)=>{
|
||||
const foundVar = lookupVar(variable, globalPageNumber, hoist);
|
||||
if(foundVar && foundVar.resolved && foundVar.content && !isNaN(foundVar.content)) // Only subsitute math values if fully resolved, not empty strings, and numbers
|
||||
replacedLabel = replacedLabel.replaceAll(variable, foundVar.content);
|
||||
});
|
||||
|
||||
try {
|
||||
return mathParser.evaluate(replacedLabel);
|
||||
} catch (error) {
|
||||
return undefined; // Return undefined if invalid math result
|
||||
}
|
||||
}
|
||||
let out = `<a href="${escape(href)}"`;
|
||||
if(title) {
|
||||
out += ` title="${title}"`;
|
||||
}
|
||||
if(self) {
|
||||
out += ' target="_self"';
|
||||
}
|
||||
out += `>${text}</a>`;
|
||||
return out;
|
||||
//^=====--------------------< HANDLE MATH >-------------------=====^//
|
||||
|
||||
const foundVar = lookupVar(label, globalPageNumber, hoist);
|
||||
|
||||
if(!foundVar || (!foundVar.resolved && !allowUnresolved))
|
||||
return undefined; // Return undefined if not found, or parially-resolved vars are not allowed
|
||||
|
||||
// url or <url> "title" or 'title' or (title)
|
||||
const linkRegex = /^([^<\s][^\s]*|<.*?>)(?: ("(?:\\"|[^"])*"|'(?:\\'|[^'])*'|\((?:\\\(|\\\)|[^()])*\)))?$/m;
|
||||
const linkMatch = linkRegex.exec(foundVar.content);
|
||||
|
||||
const href = linkMatch ? linkMatch[1] : null; //TODO: TRIM OFF < > IF PRESENT
|
||||
const title = linkMatch ? linkMatch[2]?.slice(1, -1) : null;
|
||||
|
||||
if(!prefix[0] && href) // Link
|
||||
return `[${label}](${href}${title ? ` "${title}"` : ''})`;
|
||||
|
||||
if(prefix[0] == '!' && href) // Image
|
||||
return `![${label}](${href} ${title ? ` "${title}"` : ''})`;
|
||||
|
||||
if(prefix[0] == '$') // Variable
|
||||
return foundVar.content;
|
||||
};
|
||||
|
||||
const lookupVar = function(label, index, hoist=false) {
|
||||
while (index >= 0) {
|
||||
if(globalVarsList[index]?.[label] !== undefined)
|
||||
return globalVarsList[index][label];
|
||||
index--;
|
||||
}
|
||||
|
||||
if(hoist) { //If normal lookup failed, attempt hoisting
|
||||
index = Object.keys(globalVarsList).length; // Move index to start from last page
|
||||
while (index >= 0) {
|
||||
if(globalVarsList[index]?.[label] !== undefined)
|
||||
return globalVarsList[index][label];
|
||||
index--;
|
||||
}
|
||||
}
|
||||
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const processVariableQueue = function() {
|
||||
let resolvedOne = true;
|
||||
let finalLoop = false;
|
||||
while (resolvedOne || finalLoop) { // Loop through queue until no more variable calls can be resolved
|
||||
resolvedOne = false;
|
||||
for (const item of varsQueue) {
|
||||
if(item.type == 'text')
|
||||
continue;
|
||||
|
||||
if(item.type == 'varDefBlock') {
|
||||
const regex = /[!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\]/g;
|
||||
let match;
|
||||
let resolved = true;
|
||||
let tempContent = item.content;
|
||||
while (match = regex.exec(item.content)) { // regex to find variable calls
|
||||
const value = replaceVar(match[0], true);
|
||||
|
||||
if(value == undefined)
|
||||
resolved = false;
|
||||
else
|
||||
tempContent = tempContent.replaceAll(match[0], value);
|
||||
}
|
||||
|
||||
if(resolved == true || item.content != tempContent) {
|
||||
resolvedOne = true;
|
||||
item.content = tempContent;
|
||||
}
|
||||
|
||||
globalVarsList[globalPageNumber][item.varName] = {
|
||||
content : item.content,
|
||||
resolved : resolved
|
||||
};
|
||||
|
||||
if(resolved)
|
||||
item.type = 'resolved';
|
||||
}
|
||||
|
||||
if(item.type == 'varCallBlock' || item.type == 'varCallInline') {
|
||||
const value = replaceVar(item.content, true, finalLoop); // final loop will just use the best value so far
|
||||
|
||||
if(value == undefined)
|
||||
continue;
|
||||
|
||||
resolvedOne = true;
|
||||
item.content = value;
|
||||
item.type = 'text';
|
||||
}
|
||||
}
|
||||
varsQueue = varsQueue.filter((item)=>item.type !== 'resolved'); // Remove any fully-resolved variable definitions
|
||||
|
||||
if(finalLoop)
|
||||
break;
|
||||
if(!resolvedOne)
|
||||
finalLoop = true;
|
||||
}
|
||||
varsQueue = varsQueue.filter((item)=>item.type !== 'varDefBlock');
|
||||
};
|
||||
|
||||
function MarkedVariables() {
|
||||
return {
|
||||
hooks : {
|
||||
preprocess(src) {
|
||||
const codeBlockSkip = /^(?: {4}[^\n]+(?:\n(?: *(?:\n|$))*)?)+|^ {0,3}(`{3,}(?=[^`\n]*(?:\n|$))|~{3,})(?:[^\n]*)(?:\n|$)(?:|(?:[\s\S]*?)(?:\n|$))(?: {0,3}\2[~`]* *(?=\n|$))|`[^`]*?`/;
|
||||
const blockDefRegex = /^[!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\]:(?!\() *((?:\n? *[^\s].*)+)(?=\n+|$)/; //Matches 3, [4]:5
|
||||
const blockCallRegex = /^[!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\](?=\n|$)/; //Matches 6, [7]
|
||||
const inlineDefRegex = /([!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\])\(([^\n]+)\)/; //Matches 8, 9[10](11)
|
||||
const inlineCallRegex = /[!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\](?!\()/; //Matches 12, [13]
|
||||
|
||||
// Combine regexes and wrap in parens like so: (regex1)|(regex2)|(regex3)|(regex4)
|
||||
const combinedRegex = new RegExp([codeBlockSkip, blockDefRegex, blockCallRegex, inlineDefRegex, inlineCallRegex].map((s)=>`(${s.source})`).join('|'), 'gm');
|
||||
|
||||
let lastIndex = 0;
|
||||
let match;
|
||||
while ((match = combinedRegex.exec(src)) !== null) {
|
||||
// Format any matches into tokens and store
|
||||
if(match.index > lastIndex) { // Any non-variable stuff
|
||||
varsQueue.push(
|
||||
{ type : 'text',
|
||||
varName : null,
|
||||
content : src.slice(lastIndex, match.index)
|
||||
});
|
||||
}
|
||||
if(match[1]) {
|
||||
varsQueue.push(
|
||||
{ type : 'text',
|
||||
varName : null,
|
||||
content : match[0]
|
||||
});
|
||||
}
|
||||
if(match[3]) { // Block Definition
|
||||
const label = match[4] ? match[4].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
|
||||
const content = match[5] ? match[5].trim().replace(/[ \t]+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
|
||||
|
||||
varsQueue.push(
|
||||
{ type : 'varDefBlock',
|
||||
varName : label,
|
||||
content : content
|
||||
});
|
||||
}
|
||||
if(match[6]) { // Block Call
|
||||
const label = match[7] ? match[7].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
|
||||
|
||||
varsQueue.push(
|
||||
{ type : 'varCallBlock',
|
||||
varName : label,
|
||||
content : match[0]
|
||||
});
|
||||
}
|
||||
if(match[8]) { // Inline Definition
|
||||
const label = match[10] ? match[10].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
|
||||
let content = match[11] ? match[11].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
|
||||
|
||||
// In case of nested (), find the correct matching end )
|
||||
let level = 0;
|
||||
let i;
|
||||
for (i = 0; i < content.length; i++) {
|
||||
if(content[i] === '\\') {
|
||||
i++;
|
||||
} else if(content[i] === '(') {
|
||||
level++;
|
||||
} else if(content[i] === ')') {
|
||||
level--;
|
||||
if(level < 0)
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(i > -1) {
|
||||
combinedRegex.lastIndex = combinedRegex.lastIndex - (content.length - i);
|
||||
content = content.slice(0, i).trim().replace(/\s+/g, ' ');
|
||||
}
|
||||
|
||||
varsQueue.push(
|
||||
{ type : 'varDefBlock',
|
||||
varName : label,
|
||||
content : content
|
||||
});
|
||||
varsQueue.push(
|
||||
{ type : 'varCallInline',
|
||||
varName : label,
|
||||
content : match[9]
|
||||
});
|
||||
}
|
||||
if(match[12]) { // Inline Call
|
||||
const label = match[13] ? match[13].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
|
||||
|
||||
varsQueue.push(
|
||||
{ type : 'varCallInline',
|
||||
varName : label,
|
||||
content : match[0]
|
||||
});
|
||||
}
|
||||
lastIndex = combinedRegex.lastIndex;
|
||||
}
|
||||
|
||||
if(lastIndex < src.length) {
|
||||
varsQueue.push(
|
||||
{ type : 'text',
|
||||
varName : null,
|
||||
content : src.slice(lastIndex)
|
||||
});
|
||||
}
|
||||
|
||||
processVariableQueue();
|
||||
|
||||
const output = varsQueue.map((item)=>item.content).join('');
|
||||
varsQueue = []; // Must clear varsQueue because custom HTML renderer uses Marked.parse which will preprocess again without clearing the array
|
||||
return output;
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
//^=====--------------------< Variable Handling >-------------------=====^//
|
||||
|
||||
Marked.use(MarkedVariables());
|
||||
Marked.use({ extensions: [mustacheSpans, mustacheDivs, mustacheInjectInline, definitionLists, superSubScripts] });
|
||||
Marked.use(mustacheInjectBlock);
|
||||
Marked.use({ renderer: renderer, tokenizer: tokenizer, mangle: false });
|
||||
Marked.use(MarkedExtendedTables(), MarkedGFMHeadingId(), MarkedSmartypantsLite());
|
||||
|
||||
const nonWordAndColonTest = /[^\w:]/g;
|
||||
const cleanUrl = function (sanitize, base, href) {
|
||||
if(sanitize) {
|
||||
@@ -326,24 +638,43 @@ const voidTags = new Set([
|
||||
]);
|
||||
|
||||
const processStyleTags = (string)=>{
|
||||
//split tags up. quotes can only occur right after colons.
|
||||
//split tags up. quotes can only occur right after : or =.
|
||||
//TODO: can we simplify to just split on commas?
|
||||
const tags = string.match(/(?:[^, ":]+|:(?:"[^"]*"|))+/g);
|
||||
const tags = string.match(/(?:[^, ":=]+|[:=](?:"[^"]*"|))+/g);
|
||||
|
||||
if(!tags) return '"';
|
||||
const id = _.remove(tags, (tag)=>tag.startsWith('#')).map((tag)=>tag.slice(1))[0];
|
||||
const classes = _.remove(tags, (tag)=>(!tag.includes(':')) && (!tag.includes('=')));
|
||||
const attributes = _.remove(tags, (tag)=>(tag.includes('='))).map((tag)=>tag.replace(/="?([^"]*)"?/g, '="$1"'));
|
||||
const styles = tags?.length ? tags.map((tag)=>tag.replace(/:"?([^"]*)"?/g, ':$1;').trim()) : [];
|
||||
|
||||
const id = _.remove(tags, (tag)=>tag.startsWith('#')).map((tag)=>tag.slice(1))[0];
|
||||
const classes = _.remove(tags, (tag)=>!tag.includes(':'));
|
||||
const styles = tags.map((tag)=>tag.replace(/:"?([^"]*)"?/g, ':$1;'));
|
||||
return `${classes.join(' ')}" ${id ? `id="${id}"` : ''} ${styles.length ? `style="${styles.join(' ')}"` : ''}`;
|
||||
return `${classes?.length ? ` ${classes.join(' ')}` : ''}"` +
|
||||
`${id ? ` id="${id}"` : ''}` +
|
||||
`${styles?.length ? ` style="${styles.join(' ')}"` : ''}` +
|
||||
`${attributes?.length ? ` ${attributes.join(' ')}` : ''}`;
|
||||
};
|
||||
|
||||
const globalVarsList = {};
|
||||
let varsQueue = [];
|
||||
let globalPageNumber = 0;
|
||||
|
||||
module.exports = {
|
||||
marked : Marked,
|
||||
render : (rawBrewText)=>{
|
||||
render : (rawBrewText, pageNumber=1)=>{
|
||||
globalVarsList[pageNumber] = {}; //Reset global links for current page, to ensure values are parsed in order
|
||||
varsQueue = []; //Could move into MarkedVariables()
|
||||
globalPageNumber = pageNumber;
|
||||
|
||||
rawBrewText = rawBrewText.replace(/^\\column$/gm, `\n<div class='columnSplit'></div>\n`)
|
||||
.replace(/^(:+)$/gm, (match)=>`${`<div class='blank'></div>`.repeat(match.length)}\n`);
|
||||
return Marked.parse(rawBrewText);
|
||||
const opts = Marked.defaults;
|
||||
|
||||
rawBrewText = opts.hooks.preprocess(rawBrewText);
|
||||
const tokens = Marked.lexer(rawBrewText, opts);
|
||||
|
||||
Marked.walkTokens(tokens, opts.walkTokens);
|
||||
|
||||
const html = Marked.parser(tokens, opts);
|
||||
return opts.hooks.postprocess(html);
|
||||
},
|
||||
|
||||
validate : (rawBrewText)=>{
|
||||
|
||||
@@ -77,9 +77,9 @@ const SplitPane = createClass({
|
||||
},
|
||||
|
||||
handleMove : function(e){
|
||||
e.preventDefault();
|
||||
if(!this.state.isDragging) return;
|
||||
|
||||
e.preventDefault();
|
||||
const newSize = this.limitPosition(e.pageX);
|
||||
this.setState({
|
||||
currentDividerPos : newSize,
|
||||
|
||||
@@ -13,137 +13,134 @@ String.prototype.trimReturns = function(){
|
||||
// Remove the `.failing()` method once you have fixed the issue.
|
||||
|
||||
describe('Inline: When using the Inline syntax {{ }}', ()=>{
|
||||
it.failing('Renders a mustache span with text only', function() {
|
||||
it('Renders a mustache span with text only', function() {
|
||||
const source = '{{ text}}';
|
||||
const rendered = Markdown.render(source);
|
||||
// FIXME: adds extra \s after class names
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block">text</span>');
|
||||
});
|
||||
|
||||
it.failing('Renders a mustache span with text only, but with spaces', function() {
|
||||
it('Renders a mustache span with text only, but with spaces', function() {
|
||||
const source = '{{ this is a text}}';
|
||||
const rendered = Markdown.render(source);
|
||||
// FIXME: adds extra \s after class names
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block">this is a text</span>');
|
||||
});
|
||||
|
||||
it.failing('Renders an empty mustache span', function() {
|
||||
it('Renders an empty mustache span', function() {
|
||||
const source = '{{}}';
|
||||
const rendered = Markdown.render(source);
|
||||
// FIXME: adds extra \s after class names
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block"></span>');
|
||||
});
|
||||
|
||||
it.failing('Renders a mustache span with just a space', function() {
|
||||
it('Renders a mustache span with just a space', function() {
|
||||
const source = '{{ }}';
|
||||
const rendered = Markdown.render(source);
|
||||
// FIXME: adds extra \s after class names
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block"></span>');
|
||||
});
|
||||
|
||||
it.failing('Renders a mustache span with a few spaces only', function() {
|
||||
it('Renders a mustache span with a few spaces only', function() {
|
||||
const source = '{{ }}';
|
||||
const rendered = Markdown.render(source);
|
||||
// FIXME: adds extra \s after class names
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block"></span>');
|
||||
});
|
||||
|
||||
it.failing('Renders a mustache span with text and class', function() {
|
||||
it('Renders a mustache span with text and class', function() {
|
||||
const source = '{{my-class text}}';
|
||||
const rendered = Markdown.render(source);
|
||||
// FIXME: adds two extra \s before closing `>` in opening tag.
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block my-class">text</span>');
|
||||
});
|
||||
|
||||
it.failing('Renders a mustache span with text and two classes', function() {
|
||||
it('Renders a mustache span with text and two classes', function() {
|
||||
const source = '{{my-class,my-class2 text}}';
|
||||
const rendered = Markdown.render(source);
|
||||
// FIXME: adds two extra \s before closing `>` in opening tag.
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block my-class my-class2">text</span>');
|
||||
});
|
||||
|
||||
it.failing('Renders a mustache span with text with spaces and class', function() {
|
||||
it('Renders a mustache span with text with spaces and class', function() {
|
||||
const source = '{{my-class this is a text}}';
|
||||
const rendered = Markdown.render(source);
|
||||
// FIXME: adds two extra \s before closing `>` in opening tag
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block my-class">this is a text</span>');
|
||||
});
|
||||
|
||||
it.failing('Renders a mustache span with text and id', function() {
|
||||
it('Renders a mustache span with text and id', function() {
|
||||
const source = '{{#my-span text}}';
|
||||
const rendered = Markdown.render(source);
|
||||
// FIXME: adds extra \s before closing `>` in opening tag, and another after class names
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" id="my-span">text</span>');
|
||||
});
|
||||
|
||||
it.failing('Renders a mustache span with text and two ids', function() {
|
||||
it('Renders a mustache span with text and two ids', function() {
|
||||
const source = '{{#my-span,#my-favorite-span text}}';
|
||||
const rendered = Markdown.render(source);
|
||||
// FIXME: adds extra \s before closing `>` in opening tag, and another after class names
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" id="my-span">text</span>');
|
||||
});
|
||||
|
||||
it.failing('Renders a mustache span with text and css property', function() {
|
||||
it('Renders a mustache span with text and css property', function() {
|
||||
const source = '{{color:red text}}';
|
||||
const rendered = Markdown.render(source);
|
||||
// FIXME: adds extra \s after class names
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="color:red;">text</span>');
|
||||
});
|
||||
|
||||
it.failing('Renders a mustache span with text and two css properties', function() {
|
||||
it('Renders a mustache span with text and two css properties', function() {
|
||||
const source = '{{color:red,padding:5px text}}';
|
||||
const rendered = Markdown.render(source);
|
||||
// FIXME: adds extra \s after class names
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="color:red; padding:5px;">text</span>');
|
||||
});
|
||||
|
||||
it.failing('Renders a mustache span with text and css property which contains quotes', function() {
|
||||
it('Renders a mustache span with text and css property which contains quotes', function() {
|
||||
const source = '{{font-family:"trebuchet ms" text}}';
|
||||
const rendered = Markdown.render(source);
|
||||
// FIXME: adds extra \s after class names
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="font-family:trebuchet ms;">text</span>');
|
||||
});
|
||||
|
||||
it.failing('Renders a mustache span with text and two css properties which contains quotes', function() {
|
||||
it('Renders a mustache span with text and two css properties which contains quotes', function() {
|
||||
const source = '{{font-family:"trebuchet ms",padding:"5px 10px" text}}';
|
||||
const rendered = Markdown.render(source);
|
||||
// FIXME: adds extra \s after class names
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="font-family:trebuchet ms; padding:5px 10px;">text</span>');
|
||||
});
|
||||
|
||||
|
||||
it.failing('Renders a mustache span with text with quotes and css property which contains quotes', function() {
|
||||
it('Renders a mustache span with text with quotes and css property which contains double quotes', function() {
|
||||
const source = '{{font-family:"trebuchet ms" text "with quotes"}}';
|
||||
const rendered = Markdown.render(source);
|
||||
// FIXME: adds extra \s after class names
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="font-family:trebuchet ms;">text “with quotes”</span>');
|
||||
});
|
||||
|
||||
|
||||
it('Renders a mustache span with text with quotes and css property which contains double and simple quotes', function() {
|
||||
const source = `{{--stringVariable:"'string'" text "with quotes"}}`;
|
||||
const rendered = Markdown.render(source);
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<span class="inline-block" style="--stringVariable:'string';">text “with quotes”</span>`);
|
||||
});
|
||||
|
||||
|
||||
it('Renders a mustache span with text, id, class and a couple of css properties', function() {
|
||||
const source = '{{pen,#author,color:orange,font-family:"trebuchet ms" text}}';
|
||||
const rendered = Markdown.render(source);
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block pen" id="author" style="color:orange; font-family:trebuchet ms;">text</span>');
|
||||
});
|
||||
|
||||
it('Renders a span with added attributes', function() {
|
||||
const source = 'Text and {{pen,#author,color:orange,font-family:"trebuchet ms",a="b and c",d=e, text}} and more text!';
|
||||
const rendered = Markdown.render(source);
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>Text and <span class="inline-block pen" id="author" style="color:orange; font-family:trebuchet ms;" a="b and c" d="e">text</span> and more text!</p>\n');
|
||||
});
|
||||
});
|
||||
|
||||
// BLOCK SYNTAX
|
||||
|
||||
describe(`Block: When using the Block syntax {{tags\\ntext\\n}}`, ()=>{
|
||||
it.failing('Renders a div with text only', function() {
|
||||
it('Renders a div with text only', function() {
|
||||
const source = dedent`{{
|
||||
text
|
||||
}}`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
// FIXME: adds extra \s after class names
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block"><p>text</p></div>`);
|
||||
});
|
||||
|
||||
it.failing('Renders an empty div', function() {
|
||||
it('Renders an empty div', function() {
|
||||
const source = dedent`{{
|
||||
|
||||
}}`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
// FIXME: adds extra \s after class names
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block"></div>`);
|
||||
});
|
||||
|
||||
@@ -151,52 +148,62 @@ describe(`Block: When using the Block syntax {{tags\\ntext\\n}}`, ()=>{
|
||||
const source = dedent`{{
|
||||
}}`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
// this actually renders in HB as '{{ }}'...
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>{{}}</p>`);
|
||||
});
|
||||
|
||||
it.failing('Renders a div with a single class', function() {
|
||||
it('Renders a div with a single class', function() {
|
||||
const source = dedent`{{cat
|
||||
|
||||
}}`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
// FIXME: adds two extra \s before closing `>` in opening tag
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat"></div>`);
|
||||
});
|
||||
|
||||
it.failing('Renders a div with a single class and text', function() {
|
||||
it('Renders a div with a single class and text', function() {
|
||||
const source = dedent`{{cat
|
||||
Sample text.
|
||||
}}`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
// FIXME: adds two extra \s before closing `>` in opening tag
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat"><p>Sample text.</p></div>`);
|
||||
});
|
||||
|
||||
it.failing('Renders a div with two classes and text', function() {
|
||||
it('Renders a div with two classes and text', function() {
|
||||
const source = dedent`{{cat,dog
|
||||
Sample text.
|
||||
}}`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
// FIXME: adds two extra \s before closing `>` in opening tag
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat dog"><p>Sample text.</p></div>`);
|
||||
});
|
||||
|
||||
it.failing('Renders a div with a style and text', function() {
|
||||
it('Renders a div with a style and text', function() {
|
||||
const source = dedent`{{color:red
|
||||
Sample text.
|
||||
}}`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
// FIXME: adds two extra \s before closing `>` in opening tag
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="color:red;"><p>Sample text.</p></div>`);
|
||||
});
|
||||
|
||||
it.failing('Renders a div with a class, style and text', function() {
|
||||
it('Renders a div with a style that has a string variable, and text', function() {
|
||||
const source = dedent`{{--stringVariable:"'string'"
|
||||
Sample text.
|
||||
}}`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="--stringVariable:'string';"><p>Sample text.</p></div>`);
|
||||
});
|
||||
|
||||
it('Renders a div with a style that has a string variable, and text', function() {
|
||||
const source = dedent`{{--stringVariable:"'string'"
|
||||
Sample text.
|
||||
}}`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="--stringVariable:'string';"><p>Sample text.</p></div>`);
|
||||
});
|
||||
|
||||
it('Renders a div with a class, style and text', function() {
|
||||
const source = dedent`{{cat,color:red
|
||||
Sample text.
|
||||
}}`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
// FIXME: adds extra \s after the class attribute
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat" style="color:red;"><p>Sample text.</p></div>`);
|
||||
});
|
||||
|
||||
@@ -208,14 +215,27 @@ describe(`Block: When using the Block syntax {{tags\\ntext\\n}}`, ()=>{
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat" id="dog" style="color:red;"><p>Sample text.</p></div>`);
|
||||
});
|
||||
|
||||
it.failing('Renders a div with a single ID', function() {
|
||||
it('Renders a div with a single ID', function() {
|
||||
const source = dedent`{{#cat,#dog
|
||||
Sample text.
|
||||
}}`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
// FIXME: adds extra \s before closing `>` in opening tag, and another after class names
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" id="cat"><p>Sample text.</p></div>`);
|
||||
});
|
||||
|
||||
it('Renders a div with an ID, class, style and text, and a variable assignment', function() {
|
||||
const source = dedent`{{color:red,cat,#dog,a="b and c",d="e"
|
||||
Sample text.
|
||||
}}`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class=\"block cat\" id=\"dog\" style=\"color:red;\" a=\"b and c\" d=\"e\"><p>Sample text.</p></div>`);
|
||||
});
|
||||
|
||||
it('Renders a div with added attributes', function() {
|
||||
const source = '{{pen,#author,color:orange,font-family:"trebuchet ms",a="b and c",d=e\nText and text and more text!\n}}\n';
|
||||
const rendered = Markdown.render(source);
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block pen" id="author" style="color:orange; font-family:trebuchet ms;" a="b and c" d="e"><p>Text and text and more text!</p>\n</div>');
|
||||
});
|
||||
});
|
||||
|
||||
// MUSTACHE INJECTION SYNTAX
|
||||
@@ -235,12 +255,24 @@ describe('Injection: When an injection tag follows an element', ()=>{
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block ClassName">text</span>');
|
||||
});
|
||||
|
||||
it.failing('Renders a span "text" with injected attribute', function() {
|
||||
const source = '{{ text}}{a="b and c"}';
|
||||
const rendered = Markdown.render(source);
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span a="b and c" class="inline-block ">text</span>');
|
||||
});
|
||||
|
||||
it.failing('Renders a span "text" with injected style', function() {
|
||||
const source = '{{ text}}{color:red}';
|
||||
const rendered = Markdown.render(source);
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="color:red;">text</span>');
|
||||
});
|
||||
|
||||
it.failing('Renders a span "text" with injected style using a string variable', function() {
|
||||
const source = `{{ text}}{--stringVariable:"'string'"}`;
|
||||
const rendered = Markdown.render(source);
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<span class="inline-block" style="--stringVariable:'string';">text</span>`);
|
||||
});
|
||||
|
||||
it.failing('Renders a span "text" with two injected styles', function() {
|
||||
const source = '{{ text}}{color:red,background:blue}';
|
||||
const rendered = Markdown.render(source);
|
||||
@@ -270,6 +302,12 @@ describe('Injection: When an injection tag follows an element', ()=>{
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p><span class="inline-block" style="color:red;">text</span>{background:blue}</p>');
|
||||
});
|
||||
|
||||
it('Renders an image with added attributes', function() {
|
||||
const source = ` {position:absolute,bottom:20px,left:130px,width:220px,a="b and c",d=e}`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img class="" style="position:absolute; bottom:20px; left:130px; width:220px;" a="b and c" d="e" src="https://i.imgur.com/hMna6G0.png" alt="homebrew mug"></p>`);
|
||||
});
|
||||
});
|
||||
|
||||
describe('and that element is a block', ()=>{
|
||||
@@ -297,7 +335,16 @@ describe('Injection: When an injection tag follows an element', ()=>{
|
||||
}}
|
||||
{color:red,background:blue}`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block" style="color:red; background:blue;"><p>text</p></div>');
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="color:red; background:blue"><p>text</p></div>`);
|
||||
});
|
||||
|
||||
it.failing('renders a div "text" with injected variable string', function() {
|
||||
const source = dedent`{{
|
||||
text
|
||||
}}
|
||||
{--stringVariable:"'string'"}`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="--stringVariable:'string'"><p>text</p></div>`);
|
||||
});
|
||||
|
||||
it.failing('renders an h2 header "text" with injected class name', function() {
|
||||
|
||||
373
tests/markdown/variables.test.js
Normal file
373
tests/markdown/variables.test.js
Normal file
@@ -0,0 +1,373 @@
|
||||
/* eslint-disable max-lines */
|
||||
|
||||
const dedent = require('dedent-tabs').default;
|
||||
const Markdown = require('naturalcrit/markdown.js');
|
||||
|
||||
// Marked.js adds line returns after closing tags on some default tokens.
|
||||
// This removes those line returns for comparison sake.
|
||||
String.prototype.trimReturns = function(){
|
||||
return this.replace(/\r?\n|\r/g, '').trim();
|
||||
};
|
||||
|
||||
renderAllPages = function(pages){
|
||||
const outputs = [];
|
||||
pages.forEach((page, index)=>{
|
||||
const output = Markdown.render(page, index);
|
||||
outputs.push(output);
|
||||
});
|
||||
|
||||
return outputs;
|
||||
};
|
||||
|
||||
// Adding `.failing()` method to `describe` or `it` will make failing tests "pass" as long as they continue to fail.
|
||||
// Remove the `.failing()` method once you have fixed the issue.
|
||||
|
||||
describe('Block-level variables', ()=>{
|
||||
it('Handles variable assignment and recall with simple text', function() {
|
||||
const source = dedent`
|
||||
[var]: string
|
||||
|
||||
$[var]
|
||||
`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>string</p>');
|
||||
});
|
||||
|
||||
it('Handles variable assignment and recall with multiline string', function() {
|
||||
const source = dedent`
|
||||
[var]: string
|
||||
across multiple
|
||||
lines
|
||||
|
||||
$[var]`;
|
||||
const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>string across multiple lines</p>');
|
||||
});
|
||||
|
||||
it('Handles variable assignment and recall with tables', function() {
|
||||
const source = dedent`
|
||||
[var]:
|
||||
##### Title
|
||||
| H1 | H2 |
|
||||
|:---|:--:|
|
||||
| A | B |
|
||||
| C | D |
|
||||
|
||||
$[var]`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
|
||||
<h5 id="title">Title</h5>
|
||||
<table><thead><tr><th align=left>H1</th>
|
||||
<th align=center>H2</th>
|
||||
</tr></thead><tbody><tr><td align=left>A</td>
|
||||
<td align=center>B</td>
|
||||
</tr><tr><td align=left>C</td>
|
||||
<td align=center>D</td>
|
||||
</tr></tbody></table>`.trimReturns());
|
||||
});
|
||||
|
||||
it('Hoists undefined variables', function() {
|
||||
const source = dedent`
|
||||
$[var]
|
||||
|
||||
[var]: string`;
|
||||
const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>string</p>');
|
||||
});
|
||||
|
||||
it('Hoists last instance of variable', function() {
|
||||
const source = dedent`
|
||||
$[var]
|
||||
|
||||
[var]: string
|
||||
|
||||
[var]: new string`;
|
||||
const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>new string</p>');
|
||||
});
|
||||
|
||||
it('Handles complex hoisting', function() {
|
||||
const source = dedent`
|
||||
$[titleAndName]: $[title] $[fullName]
|
||||
|
||||
$[title]: Mr.
|
||||
|
||||
$[fullName]: $[firstName] $[lastName]
|
||||
|
||||
[firstName]: Bob
|
||||
|
||||
Welcome, $[titleAndName]!
|
||||
|
||||
[lastName]: Jacob
|
||||
|
||||
[lastName]: $[lastName]son
|
||||
`;
|
||||
const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>Welcome, Mr. Bob Jacobson!</p>');
|
||||
});
|
||||
|
||||
it('Handles variable reassignment', function() {
|
||||
const source = dedent`
|
||||
[var]: one
|
||||
|
||||
$[var]
|
||||
|
||||
[var]: two
|
||||
|
||||
$[var]
|
||||
`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>one</p><p>two</p>'.trimReturns());
|
||||
});
|
||||
|
||||
it('Handles variable reassignment with hoisting', function() {
|
||||
const source = dedent`
|
||||
$[var]
|
||||
|
||||
[var]: one
|
||||
|
||||
$[var]
|
||||
|
||||
[var]: two
|
||||
|
||||
$[var]
|
||||
`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>two</p><p>one</p><p>two</p>'.trimReturns());
|
||||
});
|
||||
|
||||
it('Ignores undefined variables that can\'t be hoisted', function() {
|
||||
const source = dedent`
|
||||
$[var](My name is $[first] $[last])
|
||||
|
||||
$[last]: Jones
|
||||
`;
|
||||
const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>My name is $[first] Jones</p>`.trimReturns());
|
||||
});
|
||||
});
|
||||
|
||||
describe('Inline-level variables', ()=>{
|
||||
it('Handles variable assignment and recall with simple text', function() {
|
||||
const source = dedent`
|
||||
$[var](string)
|
||||
|
||||
$[var]
|
||||
`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>string</p><p>string</p>');
|
||||
});
|
||||
|
||||
it('Hoists undefined variables when possible', function() {
|
||||
const source = dedent`
|
||||
$[var](My name is $[name] Jones)
|
||||
|
||||
[name]: Bob`;
|
||||
const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>My name is Bob Jones</p>');
|
||||
});
|
||||
|
||||
it('Hoists last instance of variable', function() {
|
||||
const source = dedent`
|
||||
$[var](My name is $[name] Jones)
|
||||
|
||||
$[name](Bob)
|
||||
|
||||
[name]: Bill`;
|
||||
const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>My name is Bill Jones</p> <p>Bob</p>`.trimReturns());
|
||||
});
|
||||
|
||||
it('Only captures nested parens if balanced', function() {
|
||||
const source = dedent`
|
||||
$[var1](A variable (with nested parens) inside)
|
||||
|
||||
$[var1]
|
||||
|
||||
$[var2](A variable ) with unbalanced parens)
|
||||
|
||||
$[var2]`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
|
||||
<p>A variable (with nested parens) inside</p>
|
||||
<p>A variable (with nested parens) inside</p>
|
||||
<p>A variable with unbalanced parens)</p>
|
||||
<p>A variable</p>
|
||||
`.trimReturns());
|
||||
});
|
||||
});
|
||||
|
||||
describe('Math', ()=>{
|
||||
it('Handles simple math using numbers only', function() {
|
||||
const source = dedent`
|
||||
$[1 + 3 * 5 - (1 / 4)]
|
||||
`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>15.75</p>');
|
||||
});
|
||||
|
||||
it('Handles round function', function() {
|
||||
const source = dedent`
|
||||
$[round(1/4)]`;
|
||||
const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>0</p>');
|
||||
});
|
||||
|
||||
it('Handles floor function', function() {
|
||||
const source = dedent`
|
||||
$[floor(0.6)]`;
|
||||
const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>0</p>');
|
||||
});
|
||||
|
||||
it('Handles ceil function', function() {
|
||||
const source = dedent`
|
||||
$[ceil(0.2)]`;
|
||||
const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>1</p>');
|
||||
});
|
||||
|
||||
it('Handles nested functions', function() {
|
||||
const source = dedent`
|
||||
$[ceil(floor(round(0.6)))]`;
|
||||
const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>1</p>');
|
||||
});
|
||||
|
||||
it('Handles simple math with variables', function() {
|
||||
const source = dedent`
|
||||
$[num1]: 5
|
||||
|
||||
$[num2]: 4
|
||||
|
||||
Answer is $[answer]($[1 + 3 * num1 - (1 / num2)]).
|
||||
`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>Answer is 15.75.</p>');
|
||||
});
|
||||
|
||||
it('Handles variable incrementing', function() {
|
||||
const source = dedent`
|
||||
$[num1]: 5
|
||||
|
||||
Increment num1 to get $[num1]($[num1 + 1]) and again to $[num1]($[num1 + 1]).
|
||||
`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>Increment num1 to get 6 and again to 7.</p>');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Code blocks', ()=>{
|
||||
it('Ignores all variables in fenced code blocks', function() {
|
||||
const source = dedent`
|
||||
\`\`\`
|
||||
[var]: string
|
||||
|
||||
$[var]
|
||||
|
||||
$[var](new string)
|
||||
\`\`\`
|
||||
`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
|
||||
<pre><code>
|
||||
[var]: string
|
||||
|
||||
$[var]
|
||||
|
||||
$[var](new string)
|
||||
</code></pre>`.trimReturns());
|
||||
});
|
||||
|
||||
it('Ignores all variables in indented code blocks', function() {
|
||||
const source = dedent`
|
||||
test
|
||||
|
||||
[var]: string
|
||||
|
||||
$[var]
|
||||
|
||||
$[var](new string)
|
||||
`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
|
||||
<p>test</p>
|
||||
|
||||
<pre><code>
|
||||
[var]: string
|
||||
|
||||
$[var]
|
||||
|
||||
$[var](new string)
|
||||
</code></pre>`.trimReturns());
|
||||
});
|
||||
|
||||
it('Ignores all variables in inline code blocks', function() {
|
||||
const source = '[var](Hello) `[link](url)`. This `[var] does not work`';
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
|
||||
<p><a href="Hello">var</a> <code>[link](url)</code>. This <code>[var] does not work</code></p>`.trimReturns());
|
||||
});
|
||||
});
|
||||
|
||||
describe('Normal Links and Images', ()=>{
|
||||
it('Renders normal images', function() {
|
||||
const source = ``;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
|
||||
<p><img src="url" alt="alt text"></p>`.trimReturns());
|
||||
});
|
||||
|
||||
it('Renders normal images with a title', function() {
|
||||
const source = 'An image !';
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
|
||||
<p>An image <img src="url" alt="alt text" title="and title">!</p>`.trimReturns());
|
||||
});
|
||||
|
||||
it('Applies curly injectors to images', function() {
|
||||
const source = `{width:100px}`;
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
|
||||
<p><img class="" style="width:100px;" src="url" alt="alt text"></p>`.trimReturns());
|
||||
});
|
||||
|
||||
it('Renders normal links', function() {
|
||||
const source = 'A Link to my [website](url)!';
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
|
||||
<p>A Link to my <a href="url">website</a>!</p>`.trimReturns());
|
||||
});
|
||||
|
||||
it('Renders normal links with a title', function() {
|
||||
const source = 'A Link to my [website](url "and title")!';
|
||||
const rendered = Markdown.render(source).trimReturns();
|
||||
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
|
||||
<p>A Link to my <a href="url" title="and title">website</a>!</p>`.trimReturns());
|
||||
});
|
||||
});
|
||||
|
||||
describe('Cross-page variables', ()=>{
|
||||
it('Handles variable assignment and recall across pages', function() {
|
||||
const source0 = `[var]: string`;
|
||||
const source1 = `$[var]`;
|
||||
const rendered = renderAllPages([source0, source1]).join('\n\\page\n').trimReturns();
|
||||
expect(rendered, `Input:\n${[source0, source1].join('\n\\page\n')}`, { showPrefix: false }).toBe('\\page<p>string</p>');
|
||||
});
|
||||
|
||||
it('Handles hoisting across pages', function() {
|
||||
const source0 = `$[var]`;
|
||||
const source1 = `[var]: string`;
|
||||
renderAllPages([source0, source1]).join('\n\\page\n').trimReturns(); //Requires one full render of document before hoisting is picked up
|
||||
const rendered = renderAllPages([source0, source1]).join('\n\\page\n').trimReturns();
|
||||
expect(rendered, `Input:\n${[source0, source1].join('\n\\page\n')}`, { showPrefix: false }).toBe('<p>string</p>\\page');
|
||||
});
|
||||
|
||||
it('Handles reassignment and hoisting across pages', function() {
|
||||
const source0 = `$[var]\n\n[var]: one\n\n$[var]`;
|
||||
const source1 = `[var]: two\n\n$[var]`;
|
||||
renderAllPages([source0, source1]).join('\n\\page\n').trimReturns(); //Requires one full render of document before hoisting is picked up
|
||||
const rendered = renderAllPages([source0, source1]).join('\n\\page\n').trimReturns();
|
||||
expect(rendered, `Input:\n${[source0, source1].join('\n\\page\n')}`, { showPrefix: false }).toBe('<p>two</p><p>one</p>\\page<p>two</p>');
|
||||
});
|
||||
});
|
||||
@@ -40,7 +40,7 @@ body {
|
||||
-webkit-column-gap : 1cm;
|
||||
-moz-column-gap : 1cm;
|
||||
}
|
||||
.phb{
|
||||
.phb, .page{
|
||||
.useColumns();
|
||||
counter-increment : phb-page-numbers;
|
||||
position : relative;
|
||||
@@ -59,6 +59,9 @@ body {
|
||||
page-break-before : always;
|
||||
page-break-after : always;
|
||||
contain : size;
|
||||
}
|
||||
|
||||
.phb{
|
||||
//*****************************
|
||||
// * BASE
|
||||
// *****************************/
|
||||
|
||||
@@ -10,6 +10,21 @@
|
||||
background-image : url(/assets/DMG_background.png);
|
||||
background-size : cover;
|
||||
|
||||
/*TABLES WITHIN NOTES*/
|
||||
.note table tbody tr:nth-child(odd) {
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
/*DROP CAP*/
|
||||
h1 + p::first-letter {
|
||||
background-image: unset;
|
||||
color:black;
|
||||
}
|
||||
|
||||
.quote p:first-child::first-line {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-image : url(/assets/DMG_footerAccent.png);
|
||||
height: 58px;
|
||||
@@ -25,4 +40,4 @@
|
||||
.partCover {
|
||||
background-image: @partCoverHeaderDMG;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@ const ClassFeatureGen = require('./snippets/classfeature.gen.js');
|
||||
const CoverPageGen = require('./snippets/coverpage.gen.js');
|
||||
const TableOfContentsGen = require('./snippets/tableOfContents.gen.js');
|
||||
const indexGen = require('./snippets/index.gen.js');
|
||||
const QuoteGen = require('./snippets/quote.gen.js');
|
||||
const dedent = require('dedent-tabs').default;
|
||||
|
||||
|
||||
@@ -123,6 +124,11 @@ module.exports = [
|
||||
icon : 'fas fa-mask',
|
||||
gen : ClassFeatureGen,
|
||||
},
|
||||
{
|
||||
name : 'Quote',
|
||||
icon : 'fas fa-quote-right',
|
||||
gen : QuoteGen,
|
||||
},
|
||||
{
|
||||
name : 'Note',
|
||||
icon : 'fas fa-sticky-note',
|
||||
|
||||
@@ -42,8 +42,8 @@ module.exports = function(classname){
|
||||
|
||||
#### Equipment
|
||||
You start with the following equipment, in addition to the equipment granted by your background:
|
||||
- *(a)* a martial weapon and a shield or *(b)* two martial weapons
|
||||
- *(a)* five javelins or *(b)* any simple melee weapon
|
||||
- (*a*) a martial weapon and a shield or (*b*) two martial weapons
|
||||
- (*a*) five javelins or (*b*) any simple melee weapon
|
||||
- ${_.sample(['10 lint fluffs', '1 button', 'a cherished lost sock'])}
|
||||
`;
|
||||
};
|
||||
|
||||
51
themes/V3/5ePHB/snippets/quote.gen.js
Normal file
51
themes/V3/5ePHB/snippets/quote.gen.js
Normal file
@@ -0,0 +1,51 @@
|
||||
const _ = require("lodash");
|
||||
|
||||
const quotes = [
|
||||
"The sword glinted in the dim light, its edges keen and deadly. As the adventurer reached for it, he couldn't help but feel a surge of excitement mixed with fear. This was no ordinary blade.",
|
||||
"The dragon's roar shook the ground beneath their feet, and the brave knight stood tall, his sword at the ready. He knew that this would be the battle of his life, but he was determined to emerge victorious.",
|
||||
"The wizard's laboratory was a sight to behold, filled with bubbling cauldrons, ancient tomes, and strange artifacts from distant lands. As the apprentice gazed around in wonder, she knew that she was about to embark on a journey unlike any other.",
|
||||
"The tavern was packed with rowdy patrons, their voices raised in song and laughter. The bard took center stage, strumming his lute and launching into a tale of adventure and heroism that had the crowd hanging on his every word.",
|
||||
"The thief crept through the shadows, his eyes scanning the room for any sign of danger. He knew that one false move could mean the difference between success and failure, and he was determined to come out on top.",
|
||||
"The elf queen stood atop her castle walls, surveying the kingdom below with a mix of pride and sadness. She knew that the coming war would be brutal, but she was determined to protect her people at all costs.",
|
||||
"The necromancer's tower loomed in the distance, its dark spires piercing the sky. As the adventurers approached, they could feel the chill of death emanating from within",
|
||||
"The ranger moved through the forest like a shadow, his senses attuned to every sound and movement around him. He knew that danger lurked behind every tree, but he was ready for whatever came his way.",
|
||||
"The paladin knelt before the altar, his hands clasped in prayer. He knew that his faith would be tested in the days ahead, but he was ready to face whatever trials lay in store for him.",
|
||||
"The druid communed with the spirits of nature, his mind merging with the trees, the animals, and the very earth itself. He knew that his power came with a great responsibility, and he was determined to use it for the greater good.",
|
||||
];
|
||||
|
||||
const authors = [
|
||||
"Unknown",
|
||||
"James Wyatt",
|
||||
"Eolande Blackwood",
|
||||
"Ragnar Ironheart",
|
||||
"Lyra Nightshade",
|
||||
"Valtorius Darkstar",
|
||||
"Isadora Fireheart",
|
||||
"Theron Shadowbane",
|
||||
"Lirien Starweaver",
|
||||
"Drogathar Bonecrusher",
|
||||
"Kaelen Frostblade",
|
||||
];
|
||||
|
||||
const books = [
|
||||
"The Blade of Destiny",
|
||||
"Dragonfire and Steel",
|
||||
"The Bard's Tale",
|
||||
"Darkness Rising",
|
||||
"The Sacred Quest",
|
||||
"Shadows in the Forest",
|
||||
"The Starweaver Chronicles",
|
||||
"Beneath the Bones",
|
||||
"Moonlit Magic",
|
||||
"Frost and Fury",
|
||||
|
||||
];
|
||||
module.exports = () => {
|
||||
return `
|
||||
{{quote
|
||||
${_.sample(quotes)}
|
||||
|
||||
{{attribution ${_.sample(authors)}, *${_.sample(books)}*}}
|
||||
}}
|
||||
\n`;
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -111,6 +111,21 @@ module.exports = [
|
||||
icon : 'fas fa-code',
|
||||
gen : '<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->'
|
||||
},
|
||||
{
|
||||
name : 'Homebrewery Credit',
|
||||
icon : 'fas fa-dice-d20',
|
||||
gen : function(){
|
||||
return dedent`
|
||||
{{homebreweryCredits
|
||||
Made With
|
||||
|
||||
{{homebreweryIcon}}
|
||||
|
||||
The Homebrewery
|
||||
[Homebrewery.Naturalcrit.com](https://homebrewery.naturalcrit.com)
|
||||
}}\n\n`;
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -289,6 +304,99 @@ module.exports = [
|
||||
}
|
||||
]
|
||||
},
|
||||
/**************** FONTS *************/
|
||||
{
|
||||
groupName : 'Fonts',
|
||||
icon : 'fas fa-keyboard',
|
||||
view : 'text',
|
||||
snippets : [
|
||||
{
|
||||
name : 'Open Sans',
|
||||
icon : 'font OpenSans',
|
||||
gen : dedent`{{font-family:OpenSans Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Code Bold',
|
||||
icon : 'font CodeBold',
|
||||
gen : dedent`{{font-family:CodeBold Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Code Light',
|
||||
icon : 'font CodeLight',
|
||||
gen : dedent`{{font-family:CodeLight Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Scaly Sans Remake',
|
||||
icon : 'font ScalySansRemake',
|
||||
gen : dedent`{{font-family:ScalySansRemake Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Book Insanity Remake',
|
||||
icon : 'font BookInsanityRemake',
|
||||
gen : dedent`{{font-family:BookInsanityRemake Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Mr Eaves Remake',
|
||||
icon : 'font MrEavesRemake',
|
||||
gen : dedent`{{font-family:MrEavesRemake Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name: 'Solbera Imitation Remake',
|
||||
icon: 'font SolberaImitationRemake',
|
||||
gen: dedent`{{font-family:SolberaImitationRemake Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name: 'Scaly Sans Small Caps Remake',
|
||||
icon: 'font ScalySansSmallCapsRemake',
|
||||
gen: dedent`{{font-family:ScalySansSmallCapsRemake Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name: 'Walter Turncoat',
|
||||
icon: 'font WalterTurncoat',
|
||||
gen: dedent`{{font-family:WalterTurncoat Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name: 'Lato',
|
||||
icon: 'font Lato',
|
||||
gen: dedent`{{font-family:Lato Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name: 'Courier',
|
||||
icon: 'font Courier',
|
||||
gen: dedent`{{font-family:Courier Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name: 'Nodesto Caps Condensed',
|
||||
icon: 'font NodestoCapsCondensed',
|
||||
gen: dedent`{{font-family:NodestoCapsCondensed Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name: 'Overpass',
|
||||
icon: 'font Overpass',
|
||||
gen: dedent`{{font-family:Overpass Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name: 'Davek',
|
||||
icon: 'font Davek',
|
||||
gen: dedent`{{font-family:Davek Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name: 'Iokharic',
|
||||
icon: 'font Iokharic',
|
||||
gen: dedent`{{font-family:Iokharic Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name: 'Rellanic',
|
||||
icon: 'font Rellanic',
|
||||
gen: dedent`{{font-family:Rellanic Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name: 'Times New Roman',
|
||||
icon: 'font TimesNewRoman',
|
||||
gen: dedent`{{font-family:"Times New Roman" Dummy Text}}`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
/**************** PAGE *************/
|
||||
|
||||
|
||||
@@ -7,13 +7,9 @@
|
||||
--HB_Color_WatercolorStain : #000000; // Black
|
||||
}
|
||||
|
||||
@page { margin: 0; }
|
||||
body {
|
||||
counter-reset : phb-page-numbers;
|
||||
}
|
||||
*{
|
||||
-webkit-print-color-adjust : exact;
|
||||
}
|
||||
@page { margin : 0; }
|
||||
body { counter-reset : phb-page-numbers; }
|
||||
* { -webkit-print-color-adjust : exact; }
|
||||
|
||||
//*****************************
|
||||
// * MUSTACHE DIVS/SPANS
|
||||
@@ -23,9 +19,7 @@ body {
|
||||
break-inside : avoid;
|
||||
display : inline-block;
|
||||
width : 100%;
|
||||
img {
|
||||
z-index : 0;
|
||||
}
|
||||
img { z-index : 0; }
|
||||
}
|
||||
.inline-block {
|
||||
display : inline-block;
|
||||
@@ -33,98 +27,81 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.useColumns(@multiplier : 1, @fillMode: balance){
|
||||
.useColumns(@multiplier : 1, @fillMode: auto) {
|
||||
column-fill : @fillMode;
|
||||
column-count : 2;
|
||||
}
|
||||
.columnWrapper{
|
||||
.columnWrapper {
|
||||
column-gap : inherit;
|
||||
max-height : 100%;
|
||||
column-span : all;
|
||||
columns : inherit;
|
||||
column-gap : inherit;
|
||||
column-fill : inherit;
|
||||
}
|
||||
.page{
|
||||
.page {
|
||||
.useColumns();
|
||||
height : 279.4mm;
|
||||
width : 215.9mm;
|
||||
padding : 1.4cm 1.9cm 1.7cm;
|
||||
counter-increment : phb-page-numbers;
|
||||
background-color : var(--HB_Color_Background);
|
||||
position : relative;
|
||||
z-index : 15;
|
||||
box-sizing : border-box;
|
||||
width : 215.9mm;
|
||||
height : 279.4mm;
|
||||
padding : 1.4cm 1.9cm 1.7cm;
|
||||
overflow : hidden;
|
||||
counter-increment : phb-page-numbers;
|
||||
background-color : var(--HB_Color_Background);
|
||||
text-rendering : optimizeLegibility;
|
||||
page-break-before : always;
|
||||
page-break-after : always;
|
||||
contain : size;
|
||||
}
|
||||
//*****************************
|
||||
// * BASE
|
||||
//*****************************
|
||||
// * BASE
|
||||
// *****************************/
|
||||
.page{
|
||||
p{
|
||||
overflow-wrap : break-word;
|
||||
.page {
|
||||
p {
|
||||
display : block;
|
||||
overflow-wrap : break-word;
|
||||
}
|
||||
strong{
|
||||
font-weight : bold;
|
||||
}
|
||||
em{
|
||||
font-style : italic;
|
||||
}
|
||||
sup{
|
||||
strong { font-weight : bold; }
|
||||
em { font-style : italic; }
|
||||
sup {
|
||||
font-size : smaller;
|
||||
line-height : 0;
|
||||
vertical-align : super;
|
||||
font-size : smaller;
|
||||
line-height : 0;
|
||||
}
|
||||
sub{
|
||||
vertical-align : sub;
|
||||
sub {
|
||||
font-size : smaller;
|
||||
line-height : 0;
|
||||
vertical-align : sub;
|
||||
}
|
||||
ul {
|
||||
padding-left : 1.4em;
|
||||
list-style-position : outside; //Needed for multiline list items
|
||||
list-style-type : disc;
|
||||
padding-left : 1.4em;
|
||||
}
|
||||
ol {
|
||||
padding-left : 1.4em;
|
||||
list-style-position : outside;
|
||||
list-style-type : decimal;
|
||||
padding-left : 1.4em;
|
||||
}
|
||||
img{
|
||||
z-index : -1;
|
||||
}
|
||||
img { z-index : -1; }
|
||||
|
||||
//*****************************
|
||||
// * HEADERS
|
||||
// *****************************/
|
||||
h1,h2,h3,h4,h5,h6{
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-weight : bold;
|
||||
line-height : 1.2em;
|
||||
}
|
||||
h1{
|
||||
font-size : 2em;
|
||||
}
|
||||
h2{
|
||||
font-size : 1.5em;
|
||||
}
|
||||
h3{
|
||||
font-size : 1.17em;
|
||||
}
|
||||
h4{
|
||||
font-size : 1em;
|
||||
}
|
||||
h5{
|
||||
font-size : 0.83em;
|
||||
}
|
||||
h1 { font-size : 2em; }
|
||||
h2 { font-size : 1.5em; }
|
||||
h3 { font-size : 1.17em; }
|
||||
h4 { font-size : 1em; }
|
||||
h5 { font-size : 0.83em; }
|
||||
//*****************************
|
||||
// * TABLE
|
||||
// *****************************/
|
||||
table{
|
||||
table {
|
||||
width : 100%;
|
||||
thead{
|
||||
thead {
|
||||
display : table-row-group;
|
||||
font-weight : bold;
|
||||
}
|
||||
@@ -136,42 +113,40 @@ body {
|
||||
//************************************
|
||||
// * CODE BLOCKS
|
||||
// ************************************/
|
||||
code{
|
||||
font-family : "Courier New", Courier, monospace;
|
||||
white-space : pre-wrap;
|
||||
code {
|
||||
font-family : 'Courier New', "Courier", monospace;
|
||||
overflow-wrap : break-word;
|
||||
white-space : pre-wrap;
|
||||
}
|
||||
|
||||
pre code{
|
||||
width : 100%;
|
||||
pre code {
|
||||
display : inline-block;
|
||||
width : 100%;
|
||||
}
|
||||
//*****************************
|
||||
// * EXTRAS
|
||||
// *****************************/
|
||||
.columnSplit {
|
||||
margin-top : 0;
|
||||
visibility : hidden;
|
||||
-webkit-column-break-after : always;
|
||||
break-after : always;
|
||||
-moz-column-break-after : always;
|
||||
margin-top : 0;
|
||||
& + * {
|
||||
margin-top : 0;
|
||||
}
|
||||
& + * { margin-top : 0; }
|
||||
}
|
||||
//Avoid breaking up
|
||||
blockquote,table{
|
||||
blockquote,table {
|
||||
z-index : 15;
|
||||
-webkit-column-break-inside : avoid;
|
||||
page-break-inside : avoid;
|
||||
break-inside : avoid;
|
||||
}
|
||||
// Nested lists
|
||||
ul ul,ol ol,ul ol,ol ul{
|
||||
ul ul,ol ol,ul ol,ol ul {
|
||||
margin-bottom : 0px;
|
||||
margin-left : 1.5em;
|
||||
}
|
||||
li{
|
||||
li {
|
||||
-webkit-column-break-inside : avoid;
|
||||
page-break-inside : avoid;
|
||||
break-inside : avoid;
|
||||
@@ -179,69 +154,66 @@ body {
|
||||
|
||||
/* Watermark */
|
||||
.watermark {
|
||||
display : grid !important;
|
||||
place-items : center;
|
||||
justify-content : center;
|
||||
position : absolute;
|
||||
margin : 0;
|
||||
top : 0;
|
||||
left : 0;
|
||||
z-index : 500;
|
||||
display : grid !important;
|
||||
place-items : center;
|
||||
justify-content : center;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
margin : 0;
|
||||
font-size : 120px;
|
||||
text-transform : uppercase;
|
||||
text-transform : uppercase;
|
||||
mix-blend-mode : overlay;
|
||||
opacity : 30%;
|
||||
transform : rotate(-45deg);
|
||||
z-index : 500;
|
||||
p {
|
||||
margin-bottom : none;
|
||||
}
|
||||
p { margin-bottom : none; }
|
||||
}
|
||||
|
||||
/* Watercolor */
|
||||
[class*="watercolor"] {
|
||||
[class*='watercolor'] {
|
||||
position : absolute;
|
||||
z-index : -2;
|
||||
width : 2000px; /* dimensions need to be real big so the user can set */
|
||||
height : 2000px; /* height or width and the image will maintain aspect ratio */
|
||||
background-color : var(--HB_Color_WatercolorStain); /* default color */
|
||||
background-size : cover;
|
||||
-webkit-mask-image : var(--wc);
|
||||
-webkit-mask-size : contain;
|
||||
-webkit-mask-repeat : no-repeat;
|
||||
mask-image : var(--wc);
|
||||
mask-size : contain;
|
||||
mask-repeat : no-repeat;
|
||||
background-size : cover;
|
||||
background-color : var(--HB_Color_WatercolorStain); /*default color*/
|
||||
--wc : @watercolor1; /*default image*/
|
||||
z-index : -2;
|
||||
--wc : @watercolor1; /* default image */
|
||||
}
|
||||
|
||||
.watercolor1 { --wc : @watercolor1; }
|
||||
.watercolor2 { --wc : @watercolor2; }
|
||||
.watercolor3 { --wc : @watercolor3; }
|
||||
.watercolor4 { --wc : @watercolor4; }
|
||||
.watercolor5 { --wc : @watercolor5; }
|
||||
.watercolor6 { --wc : @watercolor6; }
|
||||
.watercolor7 { --wc : @watercolor7; }
|
||||
.watercolor8 { --wc : @watercolor8; }
|
||||
.watercolor9 { --wc : @watercolor9; }
|
||||
.watercolor1 { --wc : @watercolor1; }
|
||||
.watercolor2 { --wc : @watercolor2; }
|
||||
.watercolor3 { --wc : @watercolor3; }
|
||||
.watercolor4 { --wc : @watercolor4; }
|
||||
.watercolor5 { --wc : @watercolor5; }
|
||||
.watercolor6 { --wc : @watercolor6; }
|
||||
.watercolor7 { --wc : @watercolor7; }
|
||||
.watercolor8 { --wc : @watercolor8; }
|
||||
.watercolor9 { --wc : @watercolor9; }
|
||||
.watercolor10 { --wc : @watercolor10; }
|
||||
.watercolor11 { --wc : @watercolor11; }
|
||||
.watercolor12 { --wc : @watercolor12; }
|
||||
|
||||
/* Image Masks */
|
||||
|
||||
[class*="imageMask"] {
|
||||
[class*='imageMask'] {
|
||||
position : absolute;
|
||||
height : 200%;
|
||||
width : 200%;
|
||||
left : 50%;
|
||||
bottom : 50%;
|
||||
--rotation : 0;
|
||||
--revealer : none;
|
||||
--checkerboard : none;
|
||||
--scaleX : 1;
|
||||
--scaleY : 1;
|
||||
left : 50%;
|
||||
z-index : -1;
|
||||
width : 200%;
|
||||
height : 200%;
|
||||
background-image : var(--checkerboard);
|
||||
background-size : 20px;
|
||||
transform : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
|
||||
-webkit-mask-image : var(--wc), var(--revealer);
|
||||
-webkit-mask-repeat : repeat-x;
|
||||
-webkit-mask-size : 50%; //Scale only X to fit page width, leave height at aspect ratio, designed to hang off the edge
|
||||
@@ -250,61 +222,63 @@ body {
|
||||
mask-repeat : repeat-x;
|
||||
mask-size : 50%;
|
||||
mask-position : 50% calc(50% - var(--offset));
|
||||
background-image : var(--checkerboard);
|
||||
background-size : 20px;
|
||||
z-index : -1;
|
||||
transform : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
|
||||
--rotation : 0;
|
||||
--revealer : none;
|
||||
--checkerboard : none;
|
||||
--scaleX : 1;
|
||||
--scaleY : 1;
|
||||
& > p:has(img) {
|
||||
position : absolute;
|
||||
width : 50%;
|
||||
height : 50%;
|
||||
bottom : 50%;
|
||||
left : 50%;
|
||||
width : 50%;
|
||||
height : 50%;
|
||||
transform : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation))) scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)));
|
||||
}
|
||||
& img {
|
||||
position : absolute;
|
||||
display : block;
|
||||
bottom : 0;
|
||||
display : block;
|
||||
}
|
||||
&.bottom {
|
||||
--rotation : 0;
|
||||
& img {bottom: 0;}
|
||||
& img {bottom : 0;}
|
||||
}
|
||||
&.top {
|
||||
--rotation : 180;
|
||||
& img {top: 0;}
|
||||
& img {top : 0;}
|
||||
}
|
||||
&.left {
|
||||
--rotation : 90;
|
||||
& img {left: 0;}
|
||||
& img {left : 0;}
|
||||
}
|
||||
&.right {
|
||||
--rotation : -90;
|
||||
& img {right: 0;}
|
||||
& img {right : 0;}
|
||||
}
|
||||
&.revealImage {
|
||||
--revealer : linear-gradient(0deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0.2));
|
||||
--checkerboard : url(/assets/waterColorMasks/missingImage.png); //shows any masked regions not filled by image
|
||||
--revealer : linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2));
|
||||
--checkerboard : url("/assets/waterColorMasks/missingImage.png"); //shows any masked regions not filled by image
|
||||
}
|
||||
}
|
||||
|
||||
.imageMaskEdge {
|
||||
&1 { --wc : url(/assets/waterColorMasks/edge/0001.webp); }
|
||||
&2 { --wc : url(/assets/waterColorMasks/edge/0002.webp); }
|
||||
&3 { --wc : url(/assets/waterColorMasks/edge/0003.webp); }
|
||||
&4 { --wc : url(/assets/waterColorMasks/edge/0004.webp); }
|
||||
&5 { --wc : url(/assets/waterColorMasks/edge/0005.webp); }
|
||||
&6 { --wc : url(/assets/waterColorMasks/edge/0006.webp); }
|
||||
&7 { --wc : url(/assets/waterColorMasks/edge/0007.webp); }
|
||||
&8 { --wc : url(/assets/waterColorMasks/edge/0008.webp); }
|
||||
&1 { --wc : url("/assets/waterColorMasks/edge/0001.webp"); }
|
||||
&2 { --wc : url("/assets/waterColorMasks/edge/0002.webp"); }
|
||||
&3 { --wc : url("/assets/waterColorMasks/edge/0003.webp"); }
|
||||
&4 { --wc : url("/assets/waterColorMasks/edge/0004.webp"); }
|
||||
&5 { --wc : url("/assets/waterColorMasks/edge/0005.webp"); }
|
||||
&6 { --wc : url("/assets/waterColorMasks/edge/0006.webp"); }
|
||||
&7 { --wc : url("/assets/waterColorMasks/edge/0007.webp"); }
|
||||
&8 { --wc : url("/assets/waterColorMasks/edge/0008.webp"); }
|
||||
}
|
||||
|
||||
[class*="imageMaskCenter"] {
|
||||
[class*='imageMaskCenter'] {
|
||||
bottom : calc(var(--offsetY));
|
||||
left : calc(var(--offsetX));
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
left : calc(var(--offsetX));
|
||||
bottom : calc(var(--offsetY));
|
||||
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
|
||||
-webkit-mask-image : var(--wc), var(--revealer);
|
||||
-webkit-mask-repeat : no-repeat;
|
||||
-webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size
|
||||
@@ -313,48 +287,48 @@ body {
|
||||
mask-repeat : no-repeat;
|
||||
mask-size : 100% 100%; //Scale both dimensions to fit page size
|
||||
mask-position : 50% 50%;
|
||||
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
|
||||
|
||||
& > p:has(img) {
|
||||
position : absolute;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
bottom : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
transform : unset;
|
||||
transform : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
|
||||
rotate(calc(-1deg * var(--rotation)))
|
||||
translateX(calc(-1 * var(--offsetX)))
|
||||
translateY(calc(1 * var(--offsetY)));
|
||||
rotate(calc(-1deg * var(--rotation)))
|
||||
translateX(calc(-1 * var(--offsetX)))
|
||||
translateY(calc(1 * var(--offsetY)));
|
||||
}
|
||||
}
|
||||
|
||||
.imageMaskCenter {
|
||||
&1 { --wc : url(/assets/waterColorMasks/center/0001.webp); }
|
||||
&2 { --wc : url(/assets/waterColorMasks/center/0002.webp); }
|
||||
&3 { --wc : url(/assets/waterColorMasks/center/0003.webp); }
|
||||
&4 { --wc : url(/assets/waterColorMasks/center/0004.webp); }
|
||||
&5 { --wc : url(/assets/waterColorMasks/center/0005.webp); }
|
||||
&6 { --wc : url(/assets/waterColorMasks/center/0006.webp); }
|
||||
&7 { --wc : url(/assets/waterColorMasks/center/0007.webp); }
|
||||
&8 { --wc : url(/assets/waterColorMasks/center/0008.webp); }
|
||||
&9 { --wc : url(/assets/waterColorMasks/center/0009.webp); }
|
||||
&10 { --wc : url(/assets/waterColorMasks/center/0010.webp); }
|
||||
&11 { --wc : url(/assets/waterColorMasks/center/0011.webp); }
|
||||
&12 { --wc : url(/assets/waterColorMasks/center/0012.webp); }
|
||||
&13 { --wc : url(/assets/waterColorMasks/center/0013.webp); }
|
||||
&14 { --wc : url(/assets/waterColorMasks/center/0014.webp); }
|
||||
&15 { --wc : url(/assets/waterColorMasks/center/0015.webp); }
|
||||
&16 { --wc : url(/assets/waterColorMasks/center/0016.webp); }
|
||||
&special { --wc : url(/assets/waterColorMasks/center/special.webp); }
|
||||
&1 { --wc : url("/assets/waterColorMasks/center/0001.webp"); }
|
||||
&2 { --wc : url("/assets/waterColorMasks/center/0002.webp"); }
|
||||
&3 { --wc : url("/assets/waterColorMasks/center/0003.webp"); }
|
||||
&4 { --wc : url("/assets/waterColorMasks/center/0004.webp"); }
|
||||
&5 { --wc : url("/assets/waterColorMasks/center/0005.webp"); }
|
||||
&6 { --wc : url("/assets/waterColorMasks/center/0006.webp"); }
|
||||
&7 { --wc : url("/assets/waterColorMasks/center/0007.webp"); }
|
||||
&8 { --wc : url("/assets/waterColorMasks/center/0008.webp"); }
|
||||
&9 { --wc : url("/assets/waterColorMasks/center/0009.webp"); }
|
||||
&10 { --wc : url("/assets/waterColorMasks/center/0010.webp"); }
|
||||
&11 { --wc : url("/assets/waterColorMasks/center/0011.webp"); }
|
||||
&12 { --wc : url("/assets/waterColorMasks/center/0012.webp"); }
|
||||
&13 { --wc : url("/assets/waterColorMasks/center/0013.webp"); }
|
||||
&14 { --wc : url("/assets/waterColorMasks/center/0014.webp"); }
|
||||
&15 { --wc : url("/assets/waterColorMasks/center/0015.webp"); }
|
||||
&16 { --wc : url("/assets/waterColorMasks/center/0016.webp"); }
|
||||
&special { --wc : url("/assets/waterColorMasks/center/special.webp"); }
|
||||
}
|
||||
|
||||
|
||||
[class*="imageMaskCorner"] {
|
||||
height : 200%;
|
||||
width : 200%;
|
||||
left : calc(-50% + var(--offsetX));
|
||||
[class*='imageMaskCorner'] {
|
||||
bottom : calc(-50% + var(--offsetY));
|
||||
left : calc(-50% + var(--offsetX));
|
||||
width : 200%;
|
||||
height : 200%;
|
||||
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
|
||||
-webkit-mask-image : var(--wc), var(--revealer);
|
||||
-webkit-mask-repeat : no-repeat;
|
||||
-webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size
|
||||
@@ -363,56 +337,55 @@ body {
|
||||
mask-repeat : no-repeat;
|
||||
mask-size : 100% 100%; //Scale both dimensions to fit page size
|
||||
mask-position : 50% 50%;
|
||||
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
|
||||
& > p:has(img) {
|
||||
bottom : 25%;
|
||||
left : 25%;
|
||||
width : 50%;
|
||||
height : 50%; //Complex transform below to handle mix of % and cm offsets
|
||||
left : 25%;
|
||||
bottom : 25%;
|
||||
transform : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
|
||||
rotate(calc(-1deg * var(--rotation)))
|
||||
translateX(calc(-1 * var(--offsetX)))
|
||||
translateY(calc(1 * var(--offsetY)));
|
||||
rotate(calc(-1deg * var(--rotation)))
|
||||
translateX(calc(-1 * var(--offsetX)))
|
||||
translateY(calc(1 * var(--offsetY)));
|
||||
}
|
||||
}
|
||||
.imageMaskCorner {
|
||||
&1 { --wc : url(/assets/waterColorMasks/corner/0001.webp); }
|
||||
&2 { --wc : url(/assets/waterColorMasks/corner/0002.webp); }
|
||||
&3 { --wc : url(/assets/waterColorMasks/corner/0003.webp); }
|
||||
&4 { --wc : url(/assets/waterColorMasks/corner/0004.webp); }
|
||||
&5 { --wc : url(/assets/waterColorMasks/corner/0005.webp); }
|
||||
&6 { --wc : url(/assets/waterColorMasks/corner/0006.webp); }
|
||||
&7 { --wc : url(/assets/waterColorMasks/corner/0007.webp); }
|
||||
&8 { --wc : url(/assets/waterColorMasks/corner/0008.webp); }
|
||||
&9 { --wc : url(/assets/waterColorMasks/corner/0009.webp); }
|
||||
&10 { --wc : url(/assets/waterColorMasks/corner/0010.webp); }
|
||||
&11 { --wc : url(/assets/waterColorMasks/corner/0011.webp); }
|
||||
&12 { --wc : url(/assets/waterColorMasks/corner/0012.webp); }
|
||||
&13 { --wc : url(/assets/waterColorMasks/corner/0013.webp); }
|
||||
&14 { --wc : url(/assets/waterColorMasks/corner/0014.webp); }
|
||||
&15 { --wc : url(/assets/waterColorMasks/corner/0015.webp); }
|
||||
&16 { --wc : url(/assets/waterColorMasks/corner/0016.webp); }
|
||||
&17 { --wc : url(/assets/waterColorMasks/corner/0017.webp); }
|
||||
&18 { --wc : url(/assets/waterColorMasks/corner/0018.webp); }
|
||||
&19 { --wc : url(/assets/waterColorMasks/corner/0019.webp); }
|
||||
&20 { --wc : url(/assets/waterColorMasks/corner/0020.webp); }
|
||||
&21 { --wc : url(/assets/waterColorMasks/corner/0021.webp); }
|
||||
&22 { --wc : url(/assets/waterColorMasks/corner/0022.webp); }
|
||||
&23 { --wc : url(/assets/waterColorMasks/corner/0023.webp); }
|
||||
&24 { --wc : url(/assets/waterColorMasks/corner/0024.webp); }
|
||||
&25 { --wc : url(/assets/waterColorMasks/corner/0025.webp); }
|
||||
&26 { --wc : url(/assets/waterColorMasks/corner/0026.webp); }
|
||||
&27 { --wc : url(/assets/waterColorMasks/corner/0027.webp); }
|
||||
&28 { --wc : url(/assets/waterColorMasks/corner/0028.webp); }
|
||||
&29 { --wc : url(/assets/waterColorMasks/corner/0029.webp); }
|
||||
&30 { --wc : url(/assets/waterColorMasks/corner/0030.webp); }
|
||||
&31 { --wc : url(/assets/waterColorMasks/corner/0031.webp); }
|
||||
&32 { --wc : url(/assets/waterColorMasks/corner/0032.webp); }
|
||||
&33 { --wc : url(/assets/waterColorMasks/corner/0033.webp); }
|
||||
&34 { --wc : url(/assets/waterColorMasks/corner/0034.webp); }
|
||||
&35 { --wc : url(/assets/waterColorMasks/corner/0035.webp); }
|
||||
&36 { --wc : url(/assets/waterColorMasks/corner/0036.webp); }
|
||||
&37 { --wc : url(/assets/waterColorMasks/corner/0037.webp); }
|
||||
&1 { --wc : url("/assets/waterColorMasks/corner/0001.webp"); }
|
||||
&2 { --wc : url("/assets/waterColorMasks/corner/0002.webp"); }
|
||||
&3 { --wc : url("/assets/waterColorMasks/corner/0003.webp"); }
|
||||
&4 { --wc : url("/assets/waterColorMasks/corner/0004.webp"); }
|
||||
&5 { --wc : url("/assets/waterColorMasks/corner/0005.webp"); }
|
||||
&6 { --wc : url("/assets/waterColorMasks/corner/0006.webp"); }
|
||||
&7 { --wc : url("/assets/waterColorMasks/corner/0007.webp"); }
|
||||
&8 { --wc : url("/assets/waterColorMasks/corner/0008.webp"); }
|
||||
&9 { --wc : url("/assets/waterColorMasks/corner/0009.webp"); }
|
||||
&10 { --wc : url("/assets/waterColorMasks/corner/0010.webp"); }
|
||||
&11 { --wc : url("/assets/waterColorMasks/corner/0011.webp"); }
|
||||
&12 { --wc : url("/assets/waterColorMasks/corner/0012.webp"); }
|
||||
&13 { --wc : url("/assets/waterColorMasks/corner/0013.webp"); }
|
||||
&14 { --wc : url("/assets/waterColorMasks/corner/0014.webp"); }
|
||||
&15 { --wc : url("/assets/waterColorMasks/corner/0015.webp"); }
|
||||
&16 { --wc : url("/assets/waterColorMasks/corner/0016.webp"); }
|
||||
&17 { --wc : url("/assets/waterColorMasks/corner/0017.webp"); }
|
||||
&18 { --wc : url("/assets/waterColorMasks/corner/0018.webp"); }
|
||||
&19 { --wc : url("/assets/waterColorMasks/corner/0019.webp"); }
|
||||
&20 { --wc : url("/assets/waterColorMasks/corner/0020.webp"); }
|
||||
&21 { --wc : url("/assets/waterColorMasks/corner/0021.webp"); }
|
||||
&22 { --wc : url("/assets/waterColorMasks/corner/0022.webp"); }
|
||||
&23 { --wc : url("/assets/waterColorMasks/corner/0023.webp"); }
|
||||
&24 { --wc : url("/assets/waterColorMasks/corner/0024.webp"); }
|
||||
&25 { --wc : url("/assets/waterColorMasks/corner/0025.webp"); }
|
||||
&26 { --wc : url("/assets/waterColorMasks/corner/0026.webp"); }
|
||||
&27 { --wc : url("/assets/waterColorMasks/corner/0027.webp"); }
|
||||
&28 { --wc : url("/assets/waterColorMasks/corner/0028.webp"); }
|
||||
&29 { --wc : url("/assets/waterColorMasks/corner/0029.webp"); }
|
||||
&30 { --wc : url("/assets/waterColorMasks/corner/0030.webp"); }
|
||||
&31 { --wc : url("/assets/waterColorMasks/corner/0031.webp"); }
|
||||
&32 { --wc : url("/assets/waterColorMasks/corner/0032.webp"); }
|
||||
&33 { --wc : url("/assets/waterColorMasks/corner/0033.webp"); }
|
||||
&34 { --wc : url("/assets/waterColorMasks/corner/0034.webp"); }
|
||||
&35 { --wc : url("/assets/waterColorMasks/corner/0035.webp"); }
|
||||
&36 { --wc : url("/assets/waterColorMasks/corner/0036.webp"); }
|
||||
&37 { --wc : url("/assets/waterColorMasks/corner/0037.webp"); }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -424,16 +397,16 @@ body {
|
||||
padding-left : 1em;
|
||||
white-space : pre-line;
|
||||
}
|
||||
dt {
|
||||
display : inline;
|
||||
margin-right : 0.5ch;
|
||||
dt {
|
||||
display : inline;
|
||||
margin-right : 0.5ch;
|
||||
margin-left : -1em;
|
||||
}
|
||||
dd {
|
||||
}
|
||||
dd {
|
||||
display : inline;
|
||||
margin-left : 0;
|
||||
text-indent : 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
@@ -443,9 +416,7 @@ body {
|
||||
.blank {
|
||||
height : 1em;
|
||||
margin-top : 0;
|
||||
& + * {
|
||||
margin-top : 0;
|
||||
}
|
||||
& + * { margin-top : 0; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -453,12 +424,39 @@ body {
|
||||
// * WIDE
|
||||
// *****************************/
|
||||
.page {
|
||||
.wide{
|
||||
.wide {
|
||||
column-span : all;
|
||||
display : block;
|
||||
margin-bottom : 1em;
|
||||
&+* {
|
||||
margin-top : 0;
|
||||
}
|
||||
& + * { margin-top : 0; }
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
//* CREDITS
|
||||
//*****************************/
|
||||
.page .homebreweryCredits {
|
||||
p {
|
||||
font-family : 'NodestoCapsWide';
|
||||
font-size : 0.4cm;
|
||||
line-height : 1em;
|
||||
text-align : center;
|
||||
text-indent : 0;
|
||||
letter-spacing : 0.08em;
|
||||
}
|
||||
a {
|
||||
color : inherit;
|
||||
text-decoration : none;
|
||||
&:hover { text-decoration : underline; }
|
||||
}
|
||||
.homebreweryIcon {
|
||||
display : block;
|
||||
height : 1.5cm;
|
||||
margin : 0 auto;
|
||||
background-color : black;
|
||||
-webkit-mask : url("/assets/naturalCritLogoWhite.svg") center / contain no-repeat;
|
||||
mask : url("/assets/naturalCritLogoWhite.svg") center / contain no-repeat;
|
||||
}
|
||||
.homebreweryIcon.red { background-color : red; }
|
||||
.homebreweryIcon.gold { background-image : linear-gradient(to top left, brown 22.5%, gold 40%, white 60%, gold 67.5%, brown 82.5%); }
|
||||
}
|
||||
|
||||
88
themes/codeMirror/customEditorStyles.less
Normal file
88
themes/codeMirror/customEditorStyles.less
Normal file
@@ -0,0 +1,88 @@
|
||||
.editor .codeEditor .CodeMirror {
|
||||
// Themes with dark backgrounds
|
||||
&.cm-s-3024-night,
|
||||
&.cm-s-abbott,
|
||||
&.cm-s-abcdef,
|
||||
&.cm-s-ambiance,
|
||||
&.cm-s-ayu-dark,
|
||||
&.cm-s-ayu-mirage,
|
||||
&.cm-s-base16-dark,
|
||||
&.cm-s-bespin,
|
||||
&.cm-s-blackboard,
|
||||
&.cm-s-cobalt,
|
||||
&.cm-s-colorforth,
|
||||
&.cm-s-darcula,
|
||||
&.cm-s-dracula,
|
||||
&.cm-s-duotone-dark,
|
||||
&.cm-s-erlang-dark,
|
||||
&.cm-s-gruvbox-dark,
|
||||
&.cm-s-hopscotch,
|
||||
&.cm-s-icecoder,
|
||||
&.cm-s-isotope,
|
||||
&.cm-s-lesser-dark,
|
||||
&.cm-s-liquibyte,
|
||||
&.cm-s-lucario,
|
||||
&.cm-s-material,
|
||||
&.cm-s-material-darker,
|
||||
&.cm-s-material-ocean,
|
||||
&.cm-s-material-palenight,
|
||||
&.cm-s-mbo,
|
||||
&.cm-s-midnight,
|
||||
&.cm-s-monokai,
|
||||
&.cm-s-moxer,
|
||||
&.cm-s-night,
|
||||
&.cm-s-nord,
|
||||
&.cm-s-oceanic-next,
|
||||
&.cm-s-panda-syntax,
|
||||
&.cm-s-paraiso-dark,
|
||||
&.cm-s-pastel-on-dark,
|
||||
&.cm-s-railscasts,
|
||||
&.cm-s-rubyblue,
|
||||
&.cm-s-seti,
|
||||
&.cm-s-shadowfox,
|
||||
&.cm-s-the-matrix,
|
||||
&.cm-s-tomorrow-night-bright,
|
||||
&.cm-s-tomorrow-night-eighties,
|
||||
&.cm-s-twilight,
|
||||
&.cm-s-vibrant-ink,
|
||||
&.cm-s-xq-dark,
|
||||
&.cm-s-yonce,
|
||||
&.cm-s-zenburn
|
||||
{
|
||||
.CodeMirror-code {
|
||||
.block:not(.cm-comment) {
|
||||
color: magenta;
|
||||
}
|
||||
.columnSplit {
|
||||
color: black;
|
||||
background-color: rgba(35,153,153,0.5);
|
||||
}
|
||||
.pageLine {
|
||||
background-color: rgba(255,255,255,0.75);
|
||||
& ~ pre.CodeMirror-line {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Themes with light backgrounds
|
||||
&.cm-s-default,
|
||||
&.cm-s-3024-day,
|
||||
&.cm-s-ambiance-mobile,
|
||||
&.cm-s-base16-light,
|
||||
&.cm-s-duotone-light,
|
||||
&.cm-s-eclipse,
|
||||
&.cm-s-elegant,
|
||||
&.cm-s-juejin,
|
||||
&.cm-s-neat,
|
||||
&.cm-s-neo,
|
||||
&.cm-s-paraiso-lightm
|
||||
&.cm-s-solarized,
|
||||
&.cm-s-ssms,
|
||||
&.cm-s-ttcn,
|
||||
&.cm-s-xq-light,
|
||||
&.cm-s-yeti {
|
||||
// Future styling for themes with light backgrounds
|
||||
--dummyVar: 'currently unused';
|
||||
}
|
||||
}
|
||||
129
themes/codeMirror/customThemes/darkbrewery-v301.css
Normal file
129
themes/codeMirror/customThemes/darkbrewery-v301.css
Normal file
@@ -0,0 +1,129 @@
|
||||
/* Main BG color and normal text color */
|
||||
.CodeMirror {
|
||||
background: #293134;
|
||||
color: #91A6AA;
|
||||
}
|
||||
|
||||
/* Brew BG */
|
||||
.brewRenderer {
|
||||
background-color: #293134;
|
||||
}
|
||||
/* Blinking cursor */
|
||||
.CodeMirror-cursor {
|
||||
border-left: 1px solid #e0e2e4;
|
||||
}
|
||||
|
||||
/* HB DARK NAV START*/
|
||||
|
||||
/* Bars at the top */
|
||||
.snippetBar {
|
||||
background-color: #2F393C;
|
||||
color: white;
|
||||
}
|
||||
nav {
|
||||
background-color: #293134;
|
||||
}
|
||||
nav .navItem {
|
||||
background-color: #293134;
|
||||
}
|
||||
/* Fix for Homebrewery custom Snippet icons */
|
||||
.snippetBar .fac {
|
||||
filter: invert(1);
|
||||
}
|
||||
.snippetBar .snippetGroup .dropdown {
|
||||
background-color: #2F393C;
|
||||
}
|
||||
/* HB DARK NAV END */
|
||||
|
||||
/* Line number stuff */
|
||||
.CodeMirror-gutter-elt {
|
||||
color: #81969A;
|
||||
}
|
||||
.CodeMirror-linenumber {
|
||||
background-color: #293134;
|
||||
}
|
||||
.CodeMirror-gutter {
|
||||
background-color: #293134;
|
||||
}
|
||||
/* column splits */
|
||||
.editor .codeEditor .columnSplit {
|
||||
font-style: italic;
|
||||
color: inherit;
|
||||
background-color:#1f5763;
|
||||
border-bottom: #299 solid 1px;
|
||||
}
|
||||
|
||||
/* Colors for headings and such */
|
||||
/* ###Headings */
|
||||
.cm-s-default .cm-header {
|
||||
color: #c51b1b;
|
||||
-webkit-text-stroke-width: 0.1px;
|
||||
-webkit-text-stroke-color: #000;
|
||||
}
|
||||
/* bold points */
|
||||
.cm-header, .cm-strong {
|
||||
font-weight: bold;
|
||||
color: #309dd2;
|
||||
}
|
||||
/* Link headings */
|
||||
.cm-s-default .cm-link {
|
||||
color: #dd6300;
|
||||
}
|
||||
/* links */
|
||||
.cm-s-default .cm-string {
|
||||
color: #aa8261;
|
||||
}
|
||||
/*@import*/
|
||||
.cm-s-default .cm-def {
|
||||
color:#2986cc;
|
||||
}
|
||||
/* Bullets and such */
|
||||
.cm-s-default .cm-variable-2 {
|
||||
color: #3cbf30;
|
||||
}
|
||||
/* blocks */
|
||||
.editor .codeEditor .block:not(.cm-comment) {
|
||||
color: #e3e3e3;
|
||||
}
|
||||
/* inline blocks */
|
||||
.editor .codeEditor .inline-block {
|
||||
color: #e3e3e3;
|
||||
}
|
||||
/* Tags (divs) */
|
||||
.cm-s-default .cm-tag {
|
||||
color: #e3ff00;
|
||||
}
|
||||
.cm-s-default .cm-attribute {
|
||||
color: #e3ff00;
|
||||
}
|
||||
.cm-s-default .cm-atom {
|
||||
color:#000;
|
||||
}
|
||||
.cm-s-default .cm-qualifier{
|
||||
color:#ee1919;
|
||||
}
|
||||
.cm-s-default .cm-comment{
|
||||
color:#bbc700;
|
||||
}
|
||||
.cm-s-default .cm-keyword {
|
||||
color:#c302df;
|
||||
background-color:#b1b1b1;
|
||||
}
|
||||
.cm-s-default .cm-property.cm-error {
|
||||
color:#c50202;
|
||||
}
|
||||
|
||||
.CodeMirror-foldmarker {
|
||||
color:#f0ff00;
|
||||
}
|
||||
|
||||
/* New page */
|
||||
.editor .codeEditor .pageLine {
|
||||
background: #000;
|
||||
color:#000;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
|
||||
.cm-s-default .cm-builtin {
|
||||
color:#fff;
|
||||
}
|
||||
69
themes/codeMirror/editorThemes.json
Normal file
69
themes/codeMirror/editorThemes.json
Normal file
@@ -0,0 +1,69 @@
|
||||
[
|
||||
"default",
|
||||
"3024-day",
|
||||
"3024-night",
|
||||
"abbott",
|
||||
"abcdef",
|
||||
"ambiance-mobile",
|
||||
"ambiance",
|
||||
"ayu-dark",
|
||||
"ayu-mirage",
|
||||
"base16-dark",
|
||||
"base16-light",
|
||||
"bespin",
|
||||
"blackboard",
|
||||
"cobalt",
|
||||
"colorforth",
|
||||
"darcula",
|
||||
"darkbrewery-v301",
|
||||
"dracula",
|
||||
"duotone-dark",
|
||||
"duotone-light",
|
||||
"eclipse",
|
||||
"elegant",
|
||||
"erlang-dark",
|
||||
"gruvbox-dark",
|
||||
"hopscotch",
|
||||
"icecoder",
|
||||
"idea",
|
||||
"isotope",
|
||||
"juejin",
|
||||
"lesser-dark",
|
||||
"liquibyte",
|
||||
"lucario",
|
||||
"material-darker",
|
||||
"material-ocean",
|
||||
"material-palenight",
|
||||
"material",
|
||||
"mbo",
|
||||
"mdn-like",
|
||||
"midnight",
|
||||
"monokai",
|
||||
"moxer",
|
||||
"neat",
|
||||
"neo",
|
||||
"night",
|
||||
"nord",
|
||||
"oceanic-next",
|
||||
"panda-syntax",
|
||||
"paraiso-dark",
|
||||
"paraiso-light",
|
||||
"pastel-on-dark",
|
||||
"railscasts",
|
||||
"rubyblue",
|
||||
"seti",
|
||||
"shadowfox",
|
||||
"solarized",
|
||||
"ssms",
|
||||
"the-matrix",
|
||||
"tomorrow-night-bright",
|
||||
"tomorrow-night-eighties",
|
||||
"ttcn",
|
||||
"twilight",
|
||||
"vibrant-ink",
|
||||
"xq-dark",
|
||||
"xq-light",
|
||||
"yeti",
|
||||
"yonce",
|
||||
"zenburn"
|
||||
]
|
||||
BIN
themes/fonts/icon fonts/Elderberry-Inn-Icons.woff2
Normal file
BIN
themes/fonts/icon fonts/Elderberry-Inn-Icons.woff2
Normal file
Binary file not shown.
224
themes/fonts/icon fonts/font-icons.less
Normal file
224
themes/fonts/icon fonts/font-icons.less
Normal file
@@ -0,0 +1,224 @@
|
||||
/* Main Font, serif */
|
||||
@font-face {
|
||||
font-family : 'Eldeberry-Inn';
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/icon fonts/Elderberry-Inn-Icons.woff2');
|
||||
}
|
||||
|
||||
.page {
|
||||
span.ei {
|
||||
display : inline-block;
|
||||
margin-right : 3px;
|
||||
font-family : 'Eldeberry-Inn';
|
||||
line-height : 1;
|
||||
vertical-align : baseline;
|
||||
-moz-osx-font-smoothing : grayscale;
|
||||
-webkit-font-smoothing : antialiased;
|
||||
text-rendering : auto;
|
||||
|
||||
&.book::before { content : '\E900'; }
|
||||
&.screen::before { content : '\E901'; }
|
||||
|
||||
/* Spell levels */
|
||||
&.spell-0::before { content : '\E902'; }
|
||||
&.spell-1::before { content : '\E903'; }
|
||||
&.spell-2::before { content : '\E904'; }
|
||||
&.spell-3::before { content : '\E905'; }
|
||||
&.spell-4::before { content : '\E906'; }
|
||||
&.spell-5::before { content : '\E907'; }
|
||||
&.spell-6::before { content : '\E908'; }
|
||||
&.spell-7::before { content : '\E909'; }
|
||||
&.spell-8::before { content : '\E90A'; }
|
||||
&.spell-9::before { content : '\E90B'; }
|
||||
|
||||
/* Damage types */
|
||||
&.acid::before { content : '\E90C'; }
|
||||
&.bludgeoning::before { content : '\E90D'; }
|
||||
&.cold::before { content : '\E90E'; }
|
||||
&.fire::before { content : '\E90F'; }
|
||||
&.force::before { content : '\E910'; }
|
||||
&.lightning::before { content : '\E911'; }
|
||||
&.necrotic::before { content : '\E912'; }
|
||||
&.piercing::before { content : '\E914'; }
|
||||
&.poison::before { content : '\E913'; }
|
||||
&.psychic::before { content : '\E915'; }
|
||||
&.radiant::before { content : '\E916'; }
|
||||
&.slashing::before { content : '\E917'; }
|
||||
&.thunder::before { content : '\E918'; }
|
||||
|
||||
/* DnD Conditions */
|
||||
&.blinded::before { content : '\E919'; }
|
||||
&.charmed::before { content : '\E91A'; }
|
||||
&.deafened::before { content : '\E91B'; }
|
||||
&.exhaust-1::before { content : '\E91C'; }
|
||||
&.exhaust-2::before { content : '\E91D'; }
|
||||
&.exhaust-3::before { content : '\E91E'; }
|
||||
&.exhaust-4::before { content : '\E91F'; }
|
||||
&.exhaust-5::before { content : '\E920'; }
|
||||
&.exhaust-6::before { content : '\E921'; }
|
||||
&.frightened::before { content : '\E922'; }
|
||||
&.grappled::before { content : '\E923'; }
|
||||
&.incapacitated::before { content : '\E924'; }
|
||||
&.invisible::before { content : '\E926'; }
|
||||
&.paralyzed::before { content : '\E927'; }
|
||||
&.petrified::before { content : '\E928'; }
|
||||
&.poisoned::before { content : '\E929'; }
|
||||
&.prone::before { content : '\E92A'; }
|
||||
&.restrained::before { content : '\E92B'; }
|
||||
&.stunned::before { content : '\E92C'; }
|
||||
&.unconscious::before { content : '\E925'; }
|
||||
|
||||
/* Character Classes and Features */
|
||||
&.barbarian-rage::before { content : '\E92D'; }
|
||||
&.barbarian-reckless-attack::before { content : '\E92E'; }
|
||||
&.bardic-inspiration::before { content : '\E92F'; }
|
||||
&.cleric-channel-divinity::before { content : '\E930'; }
|
||||
&.druid-wild-shape::before { content : '\E931'; }
|
||||
&.fighter-action-surge::before { content : '\E932'; }
|
||||
&.fighter-second-wind::before { content : '\E933'; }
|
||||
&.monk-flurry-blows::before { content : '\E934'; }
|
||||
&.monk-patient-defense::before { content : '\E935'; }
|
||||
&.monk-step-of-the-wind::before { content : '\E936'; }
|
||||
&.monk-step-of-the-wind-2::before { content : '\E937'; }
|
||||
&.monk-step-of-the-wind-3::before { content : '\E938'; }
|
||||
&.monk-stunning-strike::before { content : '\E939'; }
|
||||
&.monk-stunning-strike-2::before { content : '\E939'; }
|
||||
&.paladin-divine-smite::before { content : '\E93B'; }
|
||||
&.paladin-lay-on-hands::before { content : '\E93C'; }
|
||||
&.barbarian-abilities::before { content : '\E93D'; }
|
||||
&.barbarian::before { content : '\E93E'; }
|
||||
&.bard-abilities::before { content : '\E93F'; }
|
||||
&.bard::before { content : '\E940'; }
|
||||
&.cleric-abilities::before { content : '\E941'; }
|
||||
&.cleric::before { content : '\E942'; }
|
||||
&.druid-abilities::before { content : '\E943'; }
|
||||
&.druid::before { content : '\E944'; }
|
||||
&.fighter-abilities::before { content : '\E945'; }
|
||||
&.fighter::before { content : '\E946'; }
|
||||
&.monk-abilities::before { content : '\E947'; }
|
||||
&.monk::before { content : '\E948'; }
|
||||
&.paladin-abilities::before { content : '\E949'; }
|
||||
&.paladin::before { content : '\E94A'; }
|
||||
&.ranger-abilities::before { content : '\E94B'; }
|
||||
&.ranger::before { content : '\E94C'; }
|
||||
&.rogue-abilities::before { content : '\E94D'; }
|
||||
&.rogue::before { content : '\E94E'; }
|
||||
&.sorcerer-abilities::before { content : '\E94F'; }
|
||||
&.sorcerer::before { content : '\E950'; }
|
||||
&.warlock-abilities::before { content : '\E951'; }
|
||||
&.warlock::before { content : '\E952'; }
|
||||
&.wizard-abilities::before { content : '\E953'; }
|
||||
&.wizard::before { content : '\E954'; }
|
||||
|
||||
/* Types of actions */
|
||||
&.movement::before { content : '\E955'; }
|
||||
&.action::before { content : '\E956'; }
|
||||
&.bonus-action::before { content : '\E957'; }
|
||||
&.reaction::before { content : '\E958'; }
|
||||
|
||||
/* SRD Spells */
|
||||
&.acid-arrow::before { content : '\E959'; }
|
||||
&.action-1::before { content : '\E95A'; }
|
||||
&.alter-self::before { content : '\E95B'; }
|
||||
&.alter-self-2::before { content : '\E95C'; }
|
||||
&.animal-friendship::before { content : '\E95E'; }
|
||||
&.animate-dead::before { content : '\E95F'; }
|
||||
&.animate-objects::before { content : '\E960'; }
|
||||
&.animate-objects-2::before { content : '\E961'; }
|
||||
&.bane::before { content : '\E962'; }
|
||||
&.bless::before { content : '\E963'; }
|
||||
&.blur::before { content : '\E964'; }
|
||||
&.bonus::before { content : '\E965'; }
|
||||
&.branding-smite::before { content : '\E966'; }
|
||||
&.burning-hands::before { content : '\E967'; }
|
||||
&.charm-person::before { content : '\E968'; }
|
||||
&.chill-touch::before { content : '\E969'; }
|
||||
&.cloudkill::before { content : '\E96A'; }
|
||||
&.comprehend-languages::before { content : '\E96B'; }
|
||||
&.cone-of-cold::before { content : '\E96C'; }
|
||||
&.conjure-elemental::before { content : '\E96D'; }
|
||||
&.conjure-minor-elemental::before { content : '\E96E'; }
|
||||
&.control-water::before { content : '\E96F'; }
|
||||
&.counterspell::before { content : '\E970'; }
|
||||
&.cure-wounds::before { content : '\E971'; }
|
||||
&.dancing-lights::before { content : '\E972'; }
|
||||
&.darkness::before { content : '\E973'; }
|
||||
&.detect-magic::before { content : '\E974'; }
|
||||
&.disguise-self::before { content : '\E975'; }
|
||||
&.disintegrate::before { content : '\E976'; }
|
||||
&.dispel-evil-and-good::before { content : '\E977'; }
|
||||
&.dispel-magic::before { content : '\E978'; }
|
||||
&.dominate-monster::before { content : '\E979'; }
|
||||
&.dominate-person::before { content : '\E97A'; }
|
||||
&.eldritch-blast::before { content : '\E97B'; }
|
||||
&.enlarge-reduce::before { content : '\E97C'; }
|
||||
&.entangle::before { content : '\E97D'; }
|
||||
&.faerie-fire::before { content : '\E97E'; }
|
||||
&.faerie-fire2::before { content : '\E97F'; }
|
||||
&.feather-fall::before { content : '\E980'; }
|
||||
&.find-familiar::before { content : '\E981'; }
|
||||
&.finger-of-death::before { content : '\E982'; }
|
||||
&.fireball::before { content : '\E983'; }
|
||||
&.floating-disk::before { content : '\E984'; }
|
||||
&.fly::before { content : '\E985'; }
|
||||
&.fog-cloud::before { content : '\E986'; }
|
||||
&.gaseous-form::before { content : '\E987'; }
|
||||
&.gaseous-form2::before { content : '\E988'; }
|
||||
&.gentle-repose::before { content : '\E989'; }
|
||||
&.gentle-repose2::before { content : '\E98A'; }
|
||||
&.globe-of-invulnerability::before { content : '\E98B'; }
|
||||
&.guiding-bolt::before { content : '\E98C'; }
|
||||
&.healing-word::before { content : '\E98D'; }
|
||||
&.heat-metal::before { content : '\E98E'; }
|
||||
&.hellish-rebuke::before { content : '\E98F'; }
|
||||
&.heroes-feast::before { content : '\E990'; }
|
||||
&.heroism::before { content : '\E991'; }
|
||||
&.hideous-laughter::before { content : '\E992'; }
|
||||
&.identify::before { content : '\E993'; }
|
||||
&.illusory-script::before { content : '\E994'; }
|
||||
&.inflict-wounds::before { content : '\E995'; }
|
||||
&.light::before { content : '\E996'; }
|
||||
&.longstrider::before { content : '\E997'; }
|
||||
&.mage-armor::before { content : '\E998'; }
|
||||
&.mage-hand::before { content : '\E999'; }
|
||||
&.magic-missile::before { content : '\E99A'; }
|
||||
&.mass-cure-wounds::before { content : '\E99B'; }
|
||||
&.mass-healing-word::before { content : '\E99C'; }
|
||||
&.Mending::before { content : '\E99D'; }
|
||||
&.message::before { content : '\E99E'; }
|
||||
&.Minor-illusion::before { content : '\E99F'; }
|
||||
&.movement1::before { content : '\E9A0'; }
|
||||
&.polymorph::before { content : '\E9A1'; }
|
||||
&.power-word-kill::before { content : '\E9A2'; }
|
||||
&.power-word-stun::before { content : '\E9A3'; }
|
||||
&.prayer-of-healing::before { content : '\E9A4'; }
|
||||
&.prestidigitation::before { content : '\E9A5'; }
|
||||
&.protection-from-evil-and-good::before { content : '\E9A6'; }
|
||||
&.raise-read::before { content : '\E9A7'; }
|
||||
&.raise-read2::before { content : '\E9A8'; }
|
||||
&.reaction1::before { content : '\E9A9'; }
|
||||
&.resurrection::before { content : '\E9AA'; }
|
||||
&.resurrection2::before { content : '\E9AB'; }
|
||||
&.revivify::before { content : '\E9AC'; }
|
||||
&.revivify2::before { content : '\E9AD'; }
|
||||
&.sacred-flame::before { content : '\E9AE'; }
|
||||
&.sanctuary::before { content : '\E9AF'; }
|
||||
&.scorching-ray::before { content : '\E9B0'; }
|
||||
&.sending::before { content : '\E9B1'; }
|
||||
&.shatter::before { content : '\E9B2'; }
|
||||
&.shield::before { content : '\E9B3'; }
|
||||
&.silent-image::before { content : '\E9B4'; }
|
||||
&.sleep::before { content : '\E9B5'; }
|
||||
&.speak-with-animals::before { content : '\E9B6'; }
|
||||
&.telekinesis::before { content : '\E9B7'; }
|
||||
&.true-strike::before { content : '\E9B8'; }
|
||||
&.vicious-mockery::before { content : '\E9B9'; }
|
||||
&.wall-of-fire::before { content : '\E9BA'; }
|
||||
&.wall-of-force::before { content : '\E9BB'; }
|
||||
&.wall-of-ice::before { content : '\E9BC'; }
|
||||
&.wall-of-stone::before { content : '\E9BD'; }
|
||||
&.wall-of-thorns::before { content : '\E9BE'; }
|
||||
&.wish::before { content : '\E9BF'; }
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user