mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-25 14:02:40 +00:00
Merge branch 'master' of https://github.com/naturalcrit/homebrewery
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
|
||||
|
||||
66
changelog.md
66
changelog.md
@@ -80,6 +80,56 @@ pre {
|
||||
## changelog
|
||||
For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
|
||||
|
||||
### 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
|
||||
|
||||
@@ -119,14 +169,15 @@ Fixes issue [#2943](https://github.com/naturalcrit/homebrewery/issues/2943)
|
||||
|
||||
* [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)
|
||||
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
|
||||
|
||||
@@ -171,6 +222,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
|
||||
|
||||
@@ -232,8 +285,6 @@ Fixes issues [#2731](https://github.com/naturalcrit/homebrewery/issues/2731)
|
||||
|
||||
}}
|
||||
|
||||
\page
|
||||
|
||||
### Monday 13/03/2023 - v3.7.2
|
||||
{{taskList
|
||||
|
||||
@@ -314,7 +365,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
|
||||
@@ -324,7 +379,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
|
||||
@@ -1408,4 +1462,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,214 @@ 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 : [],
|
||||
...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 shouldRender = (index)=>{
|
||||
if(!state.isMounted) return false;
|
||||
|
||||
//Check for style tages
|
||||
if(pageText.indexOf('<style>') !== -1) return true;
|
||||
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>');
|
||||
},
|
||||
};
|
||||
|
||||
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){
|
||||
let 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 {
|
||||
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)
|
||||
return (
|
||||
<div className='page' id={`p${index + 1}`} key={index} >
|
||||
<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(cleanPageText) }} />
|
||||
</div>
|
||||
);
|
||||
const html = Markdown.render(cleanPageText);
|
||||
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;
|
||||
|
||||
_.forEach(rawPages, (page, index)=>{
|
||||
if((shouldRender(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{
|
||||
.pages {
|
||||
margin : 30px 0px;
|
||||
&>.page{
|
||||
& > .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;
|
||||
}
|
||||
|
||||
@@ -149,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' });
|
||||
@@ -159,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) {
|
||||
@@ -178,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' });
|
||||
@@ -330,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'>
|
||||
@@ -343,6 +380,8 @@ 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}
|
||||
|
||||
@@ -1,65 +1,85 @@
|
||||
@import 'themes/codeMirror/customEditorStyles.less';
|
||||
.editor{
|
||||
.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; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -37,6 +37,8 @@ const Snippetbar = createClass({
|
||||
undo : ()=>{},
|
||||
redo : ()=>{},
|
||||
historySize : ()=>{},
|
||||
foldCode : ()=>{},
|
||||
unfoldCode : ()=>{},
|
||||
updateEditorTheme : ()=>{},
|
||||
cursorPos : {}
|
||||
};
|
||||
@@ -144,6 +146,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} >
|
||||
@@ -154,6 +172,7 @@ const Snippetbar = createClass({
|
||||
<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' />
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
top : 0px;
|
||||
right : 0px;
|
||||
height : @menuHeight;
|
||||
width : 125px;
|
||||
justify-content : space-between;
|
||||
&>div{
|
||||
height : @menuHeight;
|
||||
@@ -46,6 +45,22 @@
|
||||
color : black;
|
||||
}
|
||||
}
|
||||
&.foldAll{
|
||||
.tooltipLeft('Fold All');
|
||||
font-size : 0.75em;
|
||||
color : grey;
|
||||
&.active{
|
||||
color : black;
|
||||
}
|
||||
}
|
||||
&.unfoldAll{
|
||||
.tooltipLeft('Unfold All');
|
||||
font-size : 0.75em;
|
||||
color : grey;
|
||||
&.active{
|
||||
color : black;
|
||||
}
|
||||
}
|
||||
&.editorTheme{
|
||||
.tooltipLeft('Editor Themes');
|
||||
font-size : 0.75em;
|
||||
|
||||
@@ -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`
|
||||
|
||||
4
faq.md
4
faq.md
@@ -102,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.
|
||||
@@ -126,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.
|
||||
|
||||
1300
package-lock.json
generated
1300
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
38
package.json
38
package.json
@@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "homebrewery",
|
||||
"description": "Create authentic looking D&D homebrews using only markdown",
|
||||
"version": "3.9.2",
|
||||
"version": "3.10.0",
|
||||
"engines": {
|
||||
"npm": "^10.1.x",
|
||||
"node": ">=20.7.x"
|
||||
"npm": "^10.2.x",
|
||||
"node": "^20.8.x"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -79,11 +79,11 @@
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.22.20",
|
||||
"@babel/plugin-transform-runtime": "^7.22.15",
|
||||
"@babel/preset-env": "^7.22.20",
|
||||
"@babel/preset-react": "^7.22.15",
|
||||
"@googleapis/drive": "^8.3.1",
|
||||
"@babel/core": "^7.23.6",
|
||||
"@babel/plugin-transform-runtime": "^7.23.6",
|
||||
"@babel/preset-env": "^7.23.6",
|
||||
"@babel/preset-react": "^7.23.3",
|
||||
"@googleapis/drive": "^8.4.0",
|
||||
"body-parser": "^1.20.2",
|
||||
"classnames": "^2.3.2",
|
||||
"codemirror": "^5.65.6",
|
||||
@@ -93,37 +93,37 @@
|
||||
"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.1.0",
|
||||
"marked-smartypants-lite": "^1.0.0",
|
||||
"marked-extended-tables": "^1.0.8",
|
||||
"marked-gfm-heading-id": "^3.1.2",
|
||||
"marked-smartypants-lite": "^1.0.1",
|
||||
"markedLegacy": "npm:marked@^0.3.19",
|
||||
"moment": "^2.29.4",
|
||||
"mongoose": "^7.5.2",
|
||||
"mongoose": "^8.0.3",
|
||||
"nanoid": "3.3.4",
|
||||
"nconf": "^0.12.0",
|
||||
"nconf": "^0.12.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-frame-component": "^4.1.3",
|
||||
"react-router-dom": "6.16.0",
|
||||
"react-router-dom": "6.21.0",
|
||||
"sanitize-filename": "1.6.3",
|
||||
"superagent": "^8.1.2",
|
||||
"vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^8.50.0",
|
||||
"eslint-plugin-jest": "^27.4.0",
|
||||
"eslint": "^8.55.0",
|
||||
"eslint-plugin-jest": "^27.6.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.3",
|
||||
"stylelint-config-recess-order": "^4.3.0",
|
||||
"stylelint": "^15.11.0",
|
||||
"stylelint-config-recess-order": "^4.4.0",
|
||||
"stylelint-config-recommended": "^13.0.0",
|
||||
"stylelint-stylistic": "^0.4.3",
|
||||
"supertest": "^6.3.3"
|
||||
|
||||
@@ -101,7 +101,10 @@ fs.emptyDirSync('./build');
|
||||
|
||||
//v==---------------------------MOVE CM EDITOR THEMES -----------------------------==v//
|
||||
|
||||
editorThemeFiles = fs.readdirSync('./node_modules/codemirror/theme');
|
||||
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);
|
||||
@@ -114,7 +117,7 @@ fs.emptyDirSync('./build');
|
||||
stream.write('\n]\n');
|
||||
stream.end();
|
||||
|
||||
await fs.copy('./node_modules/codemirror/theme', './build/homebrew/cm-themes');
|
||||
|
||||
await fs.copy('./themes/codeMirror', './build/homebrew/codeMirror');
|
||||
|
||||
//v==----------------------------- BUNDLE PACKAGES --------------------------------==v//
|
||||
@@ -151,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);
|
||||
@@ -327,14 +327,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();
|
||||
|
||||
@@ -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 };
|
||||
}
|
||||
|
||||
@@ -112,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,
|
||||
@@ -219,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');
|
||||
},
|
||||
|
||||
@@ -34,7 +34,7 @@ const mustacheSpans = {
|
||||
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 +45,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 +84,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,7 +95,7 @@ const mustacheDivs = {
|
||||
let delim;
|
||||
while (delim = blockRegex.exec(match[0])?.[0].trim()) {
|
||||
if(!tags) {
|
||||
tags = ` ${processStyleTags(delim.substring(2))}`;
|
||||
tags = `${processStyleTags(delim.substring(2))}`;
|
||||
endTags = delim.length;
|
||||
}
|
||||
if(delim.startsWith('{{')) {
|
||||
@@ -132,14 +132,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 +167,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 +175,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 +206,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,7 +266,7 @@ const definitionLists = {
|
||||
}
|
||||
};
|
||||
|
||||
Marked.use({ extensions: [mustacheSpans, mustacheDivs, mustacheInjectInline, definitionLists] });
|
||||
Marked.use({ extensions: [mustacheSpans, mustacheDivs, mustacheInjectInline, definitionLists, superSubScripts] });
|
||||
Marked.use(mustacheInjectBlock);
|
||||
Marked.use({ renderer: renderer, mangle: false });
|
||||
Marked.use(MarkedExtendedTables(), MarkedGFMHeadingId(), MarkedSmartypantsLite());
|
||||
@@ -326,16 +354,19 @@ 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(' ')}` : ''}`;
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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
|
||||
// *****************************/
|
||||
|
||||
@@ -14,16 +14,13 @@
|
||||
--HB_Color_Footnotes : #C9AD6A; // Gold
|
||||
}
|
||||
|
||||
@page { margin : 0; }
|
||||
body { counter-reset : phb-page-numbers; }
|
||||
* { -webkit-print-color-adjust : exact; }
|
||||
.useSansSerif() {
|
||||
font-family : "ScalySansRemake";
|
||||
font-family : 'ScalySansRemake';
|
||||
font-size : 0.318cm;
|
||||
line-height : 1.2em;
|
||||
p,dl,ul,ol { line-height : 1.2em; }
|
||||
ul, ol { padding-left : 1em; }
|
||||
em { font-style : italic; }
|
||||
em { font-style : italic; }
|
||||
strong {
|
||||
font-weight : 800;
|
||||
letter-spacing : -0.02em;
|
||||
@@ -42,55 +39,31 @@ body { counter-reset : phb-page-numbers; }
|
||||
-webkit-column-gap : 0.9cm;
|
||||
-moz-column-gap : 0.9cm;
|
||||
}
|
||||
.columnWrapper {
|
||||
column-gap : inherit;
|
||||
max-height : 100%;
|
||||
column-span : all;
|
||||
columns : inherit;
|
||||
}
|
||||
.page {
|
||||
.useColumns();
|
||||
position : relative;
|
||||
z-index : 15;
|
||||
box-sizing : border-box;
|
||||
width : 215.9mm;
|
||||
height : 279.4mm;
|
||||
padding : 1.4cm 1.9cm 1.7cm;
|
||||
overflow : hidden;
|
||||
font-family : "BookInsanityRemake";
|
||||
font-size : 0.34cm;
|
||||
counter-increment : phb-page-numbers;
|
||||
background-color : var(--HB_Color_Background);
|
||||
background-image : @backgroundImage;
|
||||
text-rendering : optimizeLegibility;
|
||||
page-break-before : always;
|
||||
page-break-after : always;
|
||||
font-family : 'BookInsanityRemake';
|
||||
font-size : 0.34cm;
|
||||
background-image : @backgroundImage;
|
||||
}
|
||||
//*****************************
|
||||
// *****************************
|
||||
// * BASE
|
||||
// *****************************/
|
||||
// *****************************/
|
||||
|
||||
.page {
|
||||
p {
|
||||
display : block;
|
||||
line-height : 1.25em;
|
||||
overflow-wrap : break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
|
||||
& + * { margin-top : 0.325cm; }
|
||||
line-height : 1.25em;
|
||||
& + * { margin-top : 0.325cm; } //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
|
||||
& + p { margin-top : 0; }
|
||||
}
|
||||
ul {
|
||||
padding-left : 1.4em;
|
||||
margin-bottom : 0.8em;
|
||||
line-height : 1.25em;
|
||||
list-style-position : outside;
|
||||
list-style-type : disc;
|
||||
padding-left : 1.4em;
|
||||
margin-bottom : 0.8em;
|
||||
line-height : 1.25em;
|
||||
}
|
||||
ol {
|
||||
padding-left : 1.4em;
|
||||
margin-bottom : 0.8em;
|
||||
line-height : 1.25em;
|
||||
list-style-position : outside;
|
||||
list-style-type : decimal;
|
||||
padding-left : 1.4em;
|
||||
margin-bottom : 0.8em;
|
||||
line-height : 1.25em;
|
||||
}
|
||||
//Indents after p or lists
|
||||
p + p, ul + p, ol + p { text-indent : 1em; }
|
||||
@@ -99,24 +72,12 @@ body { counter-reset : phb-page-numbers; }
|
||||
font-weight : bold;
|
||||
letter-spacing : -0.02em;
|
||||
}
|
||||
em { font-style : italic; }
|
||||
sup {
|
||||
font-size : smaller;
|
||||
line-height : 0;
|
||||
vertical-align : super;
|
||||
}
|
||||
sub {
|
||||
font-size : smaller;
|
||||
line-height : 0;
|
||||
vertical-align : sub;
|
||||
}
|
||||
//*****************************
|
||||
// *****************************
|
||||
// * HEADERS
|
||||
// *****************************/
|
||||
h1,h2,h3,h4 {
|
||||
font-family : "MrEavesRemake";
|
||||
font-weight : 800;
|
||||
color : var(--HB_Color_HeaderText);
|
||||
font-family : 'MrEavesRemake';
|
||||
color : var(--HB_Color_HeaderText);
|
||||
}
|
||||
h1 {
|
||||
margin-bottom : 0.18cm; //Margin-bottom only because this is WIDE
|
||||
@@ -132,7 +93,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
margin-top : -0.3cm;
|
||||
margin-bottom : -20px;
|
||||
margin-left : -40px;
|
||||
font-family : "SolberaImitationRemake";
|
||||
font-family : 'SolberaImitationRemake';
|
||||
font-size : 3.5cm;
|
||||
line-height : 1em;
|
||||
color : rgba(0, 0, 0, 0);
|
||||
@@ -145,8 +106,8 @@ body { counter-reset : phb-page-numbers; }
|
||||
h2 {
|
||||
//margin-top : 0px; //Font is misaligned. Shift up slightly
|
||||
//margin-bottom : 0.05cm;
|
||||
font-size : 0.75cm;
|
||||
line-height : 0.988em; //Font is misaligned. Shift up slightly
|
||||
font-size : 0.75cm;
|
||||
line-height : 0.988em; //Font is misaligned. Shift up slightly
|
||||
}
|
||||
h3 {
|
||||
//margin-top : -0.1cm; //Font is misaligned. Shift up slightly
|
||||
@@ -162,8 +123,8 @@ body { counter-reset : phb-page-numbers; }
|
||||
h4 {
|
||||
//margin-top : -0.02cm; //Font is misaligned. Shift up slightly
|
||||
//margin-bottom : 0.02cm;
|
||||
font-size : 0.458cm;
|
||||
line-height : 0.971em; //Font is misaligned. Shift up slightly
|
||||
font-size : 0.458cm;
|
||||
line-height : 0.971em; //Font is misaligned. Shift up slightly
|
||||
& + * { margin-top : 0.09cm; }
|
||||
}
|
||||
* + h4 {
|
||||
@@ -172,19 +133,17 @@ body { counter-reset : phb-page-numbers; }
|
||||
h5 {
|
||||
//margin-top : -0.02cm; //Font is misaligned. Shift up slightly
|
||||
//margin-bottom : 0.02cm;
|
||||
font-family : "ScalySansSmallCapsRemake";
|
||||
font-size : 0.423cm;
|
||||
font-weight : 900;
|
||||
line-height : 0.951em; //Font is misaligned. Shift up slightly
|
||||
font-family : 'ScalySansSmallCapsRemake';
|
||||
font-size : 0.423cm;
|
||||
line-height : 0.951em; //Font is misaligned. Shift up slightly
|
||||
& + * { margin-top : 0.2cm; }
|
||||
}
|
||||
//*****************************
|
||||
// *****************************
|
||||
// * TABLE
|
||||
// *****************************/
|
||||
table {
|
||||
.useSansSerif();
|
||||
width : 100%;
|
||||
line-height : 16px;
|
||||
line-height : 16px;
|
||||
& + * { margin-top : 0.325cm; }
|
||||
thead {
|
||||
display : table-row-group;
|
||||
@@ -200,15 +159,15 @@ body { counter-reset : phb-page-numbers; }
|
||||
tr {
|
||||
td {
|
||||
//padding : 0.14em 0.4em;
|
||||
padding : 0px 1.5px; // Both of these are temporary, just to force
|
||||
padding : 0px 1.5px; // Both of these are temporary, just to force
|
||||
//line-height : 16px; // PDF to render at same height until Chrome 108
|
||||
}
|
||||
&:nth-child(odd) { background-color : var(--HB_Color_Accent); }
|
||||
}
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// * QUOTE
|
||||
// *****************************
|
||||
// * QUOTE
|
||||
// *****************************/
|
||||
.quote {
|
||||
|
||||
@@ -241,9 +200,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
//*****************************
|
||||
// *****************************
|
||||
// * NOTE
|
||||
// *****************************/
|
||||
.note {
|
||||
@@ -257,7 +214,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
border-image-outset : 9px 0px;
|
||||
box-shadow : 1px 4px 14px #888888;
|
||||
.page :where(&) {
|
||||
margin-top : 9px; //Prevent top border getting cut off on colbreak
|
||||
margin-top : 9px; //Prevent top border getting cut off on colbreak
|
||||
}
|
||||
& + * { margin-top : 0.45cm; }
|
||||
h5 { font-size : 0.375cm; }
|
||||
@@ -267,7 +224,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
}
|
||||
:last-child { margin-bottom : 0; }
|
||||
}
|
||||
//************************************
|
||||
// ************************************
|
||||
// * DESCRIPTIVE TEXT BOX
|
||||
// ************************************/
|
||||
.descriptive {
|
||||
@@ -291,7 +248,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
}
|
||||
:last-child { margin-bottom : 0; }
|
||||
}
|
||||
//*****************************
|
||||
// *****************************
|
||||
// * Images Snippets
|
||||
// *****************************/
|
||||
|
||||
@@ -299,7 +256,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
.artist {
|
||||
position : absolute;
|
||||
width : auto;
|
||||
font-family : "WalterTurncoat";
|
||||
font-family : 'WalterTurncoat';
|
||||
font-size : 0.27cm;
|
||||
color : var(--HB_Color_CaptionText);
|
||||
text-align : center;
|
||||
@@ -309,7 +266,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
text-indent : unset;
|
||||
}
|
||||
h5 {
|
||||
font-family : "WalterTurncoat";
|
||||
font-family : 'WalterTurncoat';
|
||||
font-size : 1.3em;
|
||||
}
|
||||
a {
|
||||
@@ -320,42 +277,10 @@ body { counter-reset : phb-page-numbers; }
|
||||
}
|
||||
|
||||
/* Watermark */
|
||||
.watermark {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
z-index : 500;
|
||||
display : grid !important;
|
||||
place-items : center;
|
||||
justify-content : center;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
font-size : 120px;
|
||||
color : black;
|
||||
text-transform : uppercase;
|
||||
mix-blend-mode : overlay;
|
||||
opacity : 30%;
|
||||
transform : rotate(-45deg);
|
||||
p { margin-bottom : none; }
|
||||
}
|
||||
.watermark { color : black; }
|
||||
|
||||
/* 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;
|
||||
--wc : @watercolor1; /* default image */
|
||||
}
|
||||
|
||||
|
||||
.watercolor1 { --wc : @watercolor1; }
|
||||
.watercolor2 { --wc : @watercolor2; }
|
||||
.watercolor3 { --wc : @watercolor3; }
|
||||
@@ -369,7 +294,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
.watercolor11 { --wc : @watercolor11; }
|
||||
.watercolor12 { --wc : @watercolor12; }
|
||||
|
||||
//*****************************
|
||||
// *****************************
|
||||
// * MONSTER STAT BLOCK
|
||||
// *****************************/
|
||||
.monster {
|
||||
@@ -390,27 +315,24 @@ body { counter-reset : phb-page-numbers; }
|
||||
box-shadow : 1px 4px 14px #888888;
|
||||
}
|
||||
|
||||
position : relative;
|
||||
padding : 0px;
|
||||
margin-bottom : 0.325cm;
|
||||
position : relative;
|
||||
padding : 0px;
|
||||
margin-bottom : 0.325cm;
|
||||
|
||||
//Headers
|
||||
h2 {
|
||||
margin : 0;
|
||||
font-size : 0.62cm;
|
||||
line-height : 1em;
|
||||
margin : 0;
|
||||
font-size : 0.62cm;
|
||||
line-height : 1em;
|
||||
& + p {
|
||||
margin-bottom : 0;
|
||||
font-size : 0.304cm; //Monster size and type subtext
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
// margin-top : 0.05cm; //Font is misaligned. Shift up slightly
|
||||
padding-bottom : 0.05cm;
|
||||
font-family : "ScalySansRemake";
|
||||
font-weight : 800;
|
||||
font-variant : small-caps;
|
||||
border-bottom : 2px solid var(--HB_Color_HeaderText);
|
||||
font-family : 'ScalySansSmallCapsRemake';
|
||||
font-size : 0.45cm;
|
||||
border-bottom : 1.5px solid var(--HB_Color_HeaderText);
|
||||
}
|
||||
|
||||
//Triangle dividers
|
||||
@@ -446,6 +368,8 @@ body { counter-reset : phb-page-numbers; }
|
||||
tr { background-color : transparent; }
|
||||
td,th { padding : 0px; }
|
||||
}
|
||||
//indent fix after bulleted lists
|
||||
:is(ul,ol) + p { text-indent : 0; }
|
||||
|
||||
:last-child { margin-bottom : 0; }
|
||||
}
|
||||
@@ -455,10 +379,10 @@ body { counter-reset : phb-page-numbers; }
|
||||
.useColumns(0.96, @fillMode: balance);
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// *****************************
|
||||
// * FOOTER
|
||||
// *****************************/
|
||||
&:after {
|
||||
&::after {
|
||||
position : absolute;
|
||||
bottom : 0px;
|
||||
left : 0px;
|
||||
@@ -498,23 +422,18 @@ body { counter-reset : phb-page-numbers; }
|
||||
color : var(--HB_Color_Footnotes);
|
||||
text-align : right;
|
||||
}
|
||||
//************************************
|
||||
// ************************************
|
||||
// * CODE BLOCKS
|
||||
// ************************************/
|
||||
code {
|
||||
padding : 0px 4px;
|
||||
font-family : 'Courier New', "Courier", monospace;
|
||||
font-size : 0.325;
|
||||
font-size : 0.325cm;
|
||||
color : #58180D;
|
||||
overflow-wrap : break-word;
|
||||
white-space : pre-wrap;
|
||||
background-color : #FAF7EA;
|
||||
border-radius : 4px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
display : inline-block;
|
||||
width : 100%;
|
||||
padding : 0.15cm;
|
||||
margin-bottom : 2px;
|
||||
border-style : solid;
|
||||
@@ -528,26 +447,13 @@ body { counter-reset : phb-page-numbers; }
|
||||
}
|
||||
& + * { margin-top : 0.325cm; }
|
||||
}
|
||||
//*****************************
|
||||
// *****************************
|
||||
// * EXTRAS
|
||||
// *****************************/
|
||||
hr {
|
||||
margin : 0px;
|
||||
visibility : hidden;
|
||||
}
|
||||
.columnSplit {
|
||||
visibility : hidden;
|
||||
-webkit-column-break-after : always;
|
||||
break-after : always;
|
||||
-moz-column-break-after : always;
|
||||
}
|
||||
//Avoid breaking up
|
||||
blockquote,table {
|
||||
z-index : 15;
|
||||
-webkit-column-break-inside : avoid;
|
||||
page-break-inside : avoid;
|
||||
break-inside : avoid;
|
||||
}
|
||||
//Text indent right after table
|
||||
table + p { text-indent : 1em; }
|
||||
// Nested lists
|
||||
@@ -555,18 +461,13 @@ body { counter-reset : phb-page-numbers; }
|
||||
margin-bottom : 0px;
|
||||
margin-left : 1.5em;
|
||||
}
|
||||
li {
|
||||
-webkit-column-break-inside : avoid;
|
||||
page-break-inside : avoid;
|
||||
break-inside : avoid;
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// *****************************
|
||||
// * SPELL LIST
|
||||
// *****************************/
|
||||
.page .spellList {
|
||||
.useSansSerif();
|
||||
column-count : 2;
|
||||
column-count : 2;
|
||||
ul + h5 { margin-top : 15px; }
|
||||
p, ul {
|
||||
font-size : 0.352cm;
|
||||
@@ -584,7 +485,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
&.wide { column-count : 4; }
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// *****************************
|
||||
// * CLASS TABLE
|
||||
// *****************************/
|
||||
.page .classTable {
|
||||
@@ -631,7 +532,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
}
|
||||
h5 + table { margin-top : 0.2cm; }
|
||||
}
|
||||
//*****************************
|
||||
// *****************************
|
||||
// * FRONT COVER PAGE
|
||||
// *****************************/
|
||||
.page:has(.frontCover) {
|
||||
@@ -641,7 +542,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
h1 {
|
||||
margin-top : 1.2cm;
|
||||
margin-bottom : 0;
|
||||
font-family : "NodestoCapsCondensed";
|
||||
font-family : 'NodestoCapsCondensed';
|
||||
font-size : 2.245cm;
|
||||
font-weight : normal;
|
||||
line-height : 0.85em;
|
||||
@@ -654,7 +555,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
|
||||
}
|
||||
h2 {
|
||||
font-family : "NodestoCapsCondensed";
|
||||
font-family : 'NodestoCapsCondensed';
|
||||
font-size : 0.85cm;
|
||||
font-weight : normal;
|
||||
color : white;
|
||||
@@ -687,7 +588,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
height : 1.7cm;
|
||||
padding-top : 0.1cm;
|
||||
padding-left : 1cm;
|
||||
font-family : "NodestoCapsCondensed";
|
||||
font-family : 'NodestoCapsCondensed';
|
||||
font-size : 1cm;
|
||||
font-weight : normal;
|
||||
color : white;
|
||||
@@ -704,7 +605,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
width : 70%;
|
||||
margin-right : auto;
|
||||
margin-left : auto;
|
||||
font-family : "Overpass";
|
||||
font-family : 'Overpass';
|
||||
font-size : 0.496cm;
|
||||
color : white;
|
||||
text-align : center;
|
||||
@@ -725,7 +626,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
}
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// *****************************
|
||||
// * INSIDE COVER PAGE
|
||||
// *****************************/
|
||||
.page:has(.insideCover) {
|
||||
@@ -735,14 +636,14 @@ body { counter-reset : phb-page-numbers; }
|
||||
h1 {
|
||||
margin-top : 1.2cm;
|
||||
margin-bottom : 0;
|
||||
font-family : "NodestoCapsCondensed";
|
||||
font-family : 'NodestoCapsCondensed';
|
||||
font-size : 2.1cm;
|
||||
font-weight : normal;
|
||||
line-height : 0.85em;
|
||||
text-transform : uppercase;
|
||||
}
|
||||
h2 {
|
||||
font-family : "NodestoCapsCondensed";
|
||||
font-family : 'NodestoCapsCondensed';
|
||||
font-size : 0.85cm;
|
||||
font-weight : normal;
|
||||
letter-spacing : 0.5cm;
|
||||
@@ -770,7 +671,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
}
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// *****************************
|
||||
// * BACK COVER
|
||||
// *****************************/
|
||||
.page:has(.backCover) {
|
||||
@@ -791,7 +692,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
.blank { height : 1.4em; }
|
||||
h1 {
|
||||
margin-bottom : 0.3cm;
|
||||
font-family : "NodestoCapsCondensed";
|
||||
font-family : 'NodestoCapsCondensed';
|
||||
font-size : 1.35cm;
|
||||
line-height : 0.95em;
|
||||
color : #ED1C24;
|
||||
@@ -817,7 +718,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
border : none;
|
||||
}
|
||||
p {
|
||||
font-family : "Overpass";
|
||||
font-family : 'Overpass';
|
||||
font-size : 0.332cm;
|
||||
line-height : 1.5em;
|
||||
}
|
||||
@@ -841,7 +742,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
p {
|
||||
position : relative;
|
||||
width : 100%;
|
||||
font-family : "NodestoCapsWide";
|
||||
font-family : 'NodestoCapsWide';
|
||||
font-size : 0.4cm;
|
||||
line-height : 1em;
|
||||
color : #FFFFFF;
|
||||
@@ -852,10 +753,10 @@ body { counter-reset : phb-page-numbers; }
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// *****************************
|
||||
// * PART COVER
|
||||
// *****************************/
|
||||
.page:has(.partCover) {
|
||||
// *****************************/
|
||||
.page:has(.partCover) {
|
||||
padding-top : 0;
|
||||
text-align : center;
|
||||
columns : 1;
|
||||
@@ -874,7 +775,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
h1 {
|
||||
position : relative;
|
||||
margin-top : 0.4cm;
|
||||
font-family : "NodestoCapsCondensed";
|
||||
font-family : 'NodestoCapsCondensed';
|
||||
font-size : 2.3cm;
|
||||
text-align : center;
|
||||
text-transform : uppercase;
|
||||
@@ -885,13 +786,13 @@ body { counter-reset : phb-page-numbers; }
|
||||
margin-top : -0.7em;
|
||||
margin-right : auto;
|
||||
margin-left : auto;
|
||||
font-family : "Overpass";
|
||||
font-family : 'Overpass';
|
||||
font-size : 0.45cm;
|
||||
line-height : 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// *****************************
|
||||
// * TABLE OF CONTENTS
|
||||
// *****************************/
|
||||
.page {
|
||||
@@ -960,34 +861,25 @@ body { counter-reset : phb-page-numbers; }
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// *****************************
|
||||
// * DEFINITION LISTS
|
||||
// *****************************/
|
||||
.page {
|
||||
dl {
|
||||
padding-left : 1em;
|
||||
line-height : 1.25em;
|
||||
white-space : pre-line;
|
||||
& + * { margin-top : 0.28cm; }
|
||||
& + * { margin-top : 0.17cm; }
|
||||
}
|
||||
dl + * { margin-top : 0.17cm; }
|
||||
p + dl { margin-top : 0.17cm; }
|
||||
dt {
|
||||
display : inline;
|
||||
margin-right : 5px;
|
||||
margin-left : -1em;
|
||||
}
|
||||
dd {
|
||||
display : inline;
|
||||
margin-left : 0px;
|
||||
text-indent : 0px;
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// *****************************
|
||||
// * WIDE
|
||||
// *****************************/
|
||||
.page .wide { margin-bottom : 0.325cm; }
|
||||
.page .wide { margin-bottom : 0.325cm; }
|
||||
|
||||
.page h1 + * { margin-top : 0; }
|
||||
|
||||
@@ -1009,7 +901,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
outline : 1px solid #000000;
|
||||
}
|
||||
th {
|
||||
font-family : "BookInsanityRemake";
|
||||
font-family : 'BookInsanityRemake';
|
||||
font-size : 0.45cm;
|
||||
}
|
||||
td { font-size : 0.7cm; }
|
||||
@@ -1026,7 +918,7 @@ body { counter-reset : phb-page-numbers; }
|
||||
}
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// *****************************
|
||||
// * INDEX
|
||||
// *****************************/
|
||||
.page {
|
||||
|
||||
@@ -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`;
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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,99 +27,81 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.useColumns(@multiplier : 1, @fillMode: auto){
|
||||
.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;
|
||||
}
|
||||
@@ -137,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;
|
||||
@@ -180,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
|
||||
@@ -251,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
|
||||
@@ -314,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
|
||||
@@ -364,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"); }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -425,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
@@ -444,9 +416,7 @@ body {
|
||||
.blank {
|
||||
height : 1em;
|
||||
margin-top : 0;
|
||||
& + * {
|
||||
margin-top : 0;
|
||||
}
|
||||
& + * { margin-top : 0; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -454,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%); }
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
@@ -15,6 +15,7 @@
|
||||
"cobalt",
|
||||
"colorforth",
|
||||
"darcula",
|
||||
"darkbrewery-v301",
|
||||
"dracula",
|
||||
"duotone-dark",
|
||||
"duotone-light",
|
||||
|
||||
Reference in New Issue
Block a user