From ee67ba729a9e8288581354a44b95d347541f7d2f Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Thu, 1 Jul 2021 23:43:01 -0400 Subject: [PATCH 1/4] V & H spacing, wide block, image snippets --- .../editor/snippetbar/snippets/snippets.js | 28 +++++++++++++++---- client/homebrew/phbStyle/phb.style.less | 4 +-- 2 files changed, 24 insertions(+), 8 deletions(-) diff --git a/client/homebrew/editor/snippetbar/snippets/snippets.js b/client/homebrew/editor/snippetbar/snippets/snippets.js index f72817c7a..fca5a539b 100644 --- a/client/homebrew/editor/snippetbar/snippets/snippets.js +++ b/client/homebrew/editor/snippetbar/snippets/snippets.js @@ -27,18 +27,34 @@ module.exports = [ }, { name : 'Vertical Spacing', - icon : 'fas fa-times-circle', - gen : '' + icon : 'fas fa-arrows-alt-v', + gen : '\n::::\n' + }, + { + name : 'Horizontal Spacing', + icon : 'fas fa-arrows-alt-h', + gen : ' {{width="100px"}} ' }, { name : 'Wide Block', - icon : 'fas fa-times-circle', - gen : '' + icon : 'fas fa-window-maximize', + gen : dedent`\n + {{wide + Everything in here will be extra wide. Tables, text, everything! + Beware though, CSS columns can behave a bit weird sometimes. You may + have to rely on the automatic column-break rather than \`\column\` if + you mix columns and wide blocks on the same page. + }} + \n` }, { name : 'Image', - icon : 'fas fa-times-circle', - gen : '' + icon : 'fas fa-image', + gen : dedent` + + Credit: Kyounghwan Kim` }, { name : 'Background Image', diff --git a/client/homebrew/phbStyle/phb.style.less b/client/homebrew/phbStyle/phb.style.less index a5c66b7f4..ded9462e1 100644 --- a/client/homebrew/phbStyle/phb.style.less +++ b/client/homebrew/phbStyle/phb.style.less @@ -528,8 +528,8 @@ body { .block { break-inside : avoid; } - .inline-block { - display : block; + .inline { + display : inline-block; } div { column-gap : 0.5cm; //Default spacing if a div uses multicolumns From efd0fd1f4ab6e50046ee863547ce6dc73626c0ac Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Sat, 10 Jul 2021 19:01:12 -0400 Subject: [PATCH 2/4] Table of Contents CSS and snippet --- .../snippets/tableOfContents.gen.js | 16 +++--- client/homebrew/phbStyle/phb.style.less | 49 +++++++++++++++++-- 2 files changed, 55 insertions(+), 10 deletions(-) diff --git a/client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js b/client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js index 8a03b0530..e2a1221eb 100644 --- a/client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js +++ b/client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js @@ -1,4 +1,5 @@ const _ = require('lodash'); +const dedent = require('dedent-tabs').default; const getTOC = (pages)=>{ const add1 = (title, page)=>{ @@ -51,13 +52,13 @@ module.exports = function(brew){ const pages = brew.text.split('\\page'); const TOC = getTOC(pages); const markdown = _.reduce(TOC, (r, g1, idx1)=>{ - r.push(`- **[${idx1 + 1} ${g1.title}](#p${g1.page})**`); + r.push(`\t\t- ### [{{ ${g1.title}}}{{ ${g1.page}}}](#p${g1.page})`); if(g1.children.length){ _.each(g1.children, (g2, idx2)=>{ - r.push(` - [${idx1 + 1}.${idx2 + 1} ${g2.title}](#p${g2.page})`); + r.push(`\t\t - #### [{{ ${g2.title}}}{{ ${g2.page}}}](#p${g2.page})`); if(g2.children.length){ _.each(g2.children, (g3, idx3)=>{ - r.push(` - [${idx1 + 1}.${idx2 + 1}.${idx3 + 1} ${g3.title}](#p${g3.page})`); + r.push(`\t\t - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`); }); } }); @@ -65,8 +66,11 @@ module.exports = function(brew){ return r; }, []).join('\n'); - return `
-##### Table Of Contents + return dedent` + {{toc + # Table Of Contents + ${markdown} -
\n`; + }} + \n`; }; diff --git a/client/homebrew/phbStyle/phb.style.less b/client/homebrew/phbStyle/phb.style.less index ded9462e1..30ecb657a 100644 --- a/client/homebrew/phbStyle/phb.style.less +++ b/client/homebrew/phbStyle/phb.style.less @@ -505,19 +505,60 @@ body { -webkit-column-break-inside : avoid; page-break-inside : avoid; break-inside : avoid; + h1 { + text-align : center; + margin-bottom : 0.1cm; + } a{ - color : black; + display : table; + color : inherit; text-decoration : none; &:hover{ text-decoration : underline; } } + h4 { + margin-top : 0.1cm; + } ul{ padding-left : 0; list-style-type : none; - } - &>ul>li{ - margin-bottom : 10px; + li + li h3 { + margin-top : 0.26cm; + line-height : 1em + } + h3 span:first-child::after { + border : none; + } + span { + display : table-cell; + &:first-child { + position : relative; + overflow : hidden; + &::after { + content : ""; + position : absolute; + bottom : 0.08cm; /* Set as you want */ + margin-left : 0.06cm; /* Spacing before dot leaders */ + width : 100%; + border-bottom : 0.05cm dotted #000; + } + } + &:last-child { + font-family : BookInsanityRemake; + font-size : 0.34cm; + font-weight : normal; + color : black; + text-align : right; + vertical-align : bottom; /* Keep Price text bottom-aligned */ + width : 1%; + padding-left : 0.06cm; /* Spacing after dot leaders */ + /*white-space: nowrap; /* Uncomment if needed */ + } + } + ul { /*List indent*/ + margin-left : 1em; + } } } From 63ba9f4fb9a6a963d2669f0bb6e9e4b9090f48a7 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Sat, 10 Jul 2021 19:01:27 -0400 Subject: [PATCH 3/4] Change {{ span to Marked.js extension --- shared/naturalcrit/markdown.js | 84 ++++++++++++++++++++++------------ 1 file changed, 56 insertions(+), 28 deletions(-) diff --git a/shared/naturalcrit/markdown.js b/shared/naturalcrit/markdown.js index 317c8fdc0..3bc6c7693 100644 --- a/shared/naturalcrit/markdown.js +++ b/shared/naturalcrit/markdown.js @@ -19,12 +19,62 @@ renderer.paragraph = function(text){ let match; if(text.startsWith('${text}

\n`; }; +const mustacheSpans = { + name: 'mustacheSpans', + level: 'inline', // Is this a block-level or inline-level tokenizer? + start(src) { return src.match(/{{[^{]/)?.index; }, // Hint to Marked.js to stop and check for a match + tokenizer(src, tokens) { + const completeSpan = /^{{[^\n]*}}/; // Regex for the complete token + const inlineRegex = /{{(?:="[\w,\-. ]*"|[^"'{}}\s])*\s*|}}/g; + const match = completeSpan.exec(src); + if (match) { + //Find closing delimiter + let blockCount = 0; + let tags = ''; + let endIndex = 0; + let delim; + while (delim = inlineRegex.exec(match[0])) { + if(delim[0].startsWith('{{')) { + tags = tags || ' ' + processStyleTags(delim[0].substring(2)); + blockCount++; + } + else if(delim[0] == '}}' && blockCount !== 0) { + blockCount--; + if(blockCount == 0) { + endIndex = inlineRegex.lastIndex; + break; + } + } + } + + if(endIndex) { + const raw = src.slice(0, endIndex); + const text = raw.slice((raw.indexOf(' ')+1) || -2, -2) + + return { // Token to generate + type: 'mustacheSpans', // Should match "name" above + raw: raw, // Text to consume from the source + text: text, // Additional custom properties + tags: tags, + tokens: this.inlineTokens(text) // inlineTokens to process **bold**, *italics*, etc. + } + } + } + }, + renderer(token) { + console.log(token); + return `{ - - if(splitText) r.push(Markdown.parseInline(splitText, { renderer: renderer })); - - const block = matches[matchIndex] ? matches[matchIndex].trimLeft() : ''; - if(block && block.startsWith('{{')) { - const values = processStyleTags(block.substring(2)); - r.push(`tag.replace(/="(.*)"/g, ':$1;')); - return `${classes.join(' ')}" ${id ? `id="${id}"` : ''} ${styles ? `style="${styles.join(' ')}"` : ''}`; + return `${classes.join(' ')}" ${id ? `id="${id}"` : ''} ${styles.length ? `style="${styles.join(' ')}"` : ''}`; }; module.exports = { From 50991dfe9218827dd4f195216d55c4da524e01ef Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Sun, 11 Jul 2021 00:33:47 -0400 Subject: [PATCH 4/4] MustacheDivs to Marked.js extension --- shared/naturalcrit/markdown.js | 138 +++++++++++++++++---------------- 1 file changed, 70 insertions(+), 68 deletions(-) diff --git a/shared/naturalcrit/markdown.js b/shared/naturalcrit/markdown.js index 3bc6c7693..a8c287c93 100644 --- a/shared/naturalcrit/markdown.js +++ b/shared/naturalcrit/markdown.js @@ -20,20 +20,20 @@ renderer.paragraph = function(text){ if(text.startsWith('${match[1]}

` : ''}{ - if(splitText) r.push(Markdown.parseInline(splitText, { renderer: renderer })); - - const block = matches[matchIndex] ? matches[matchIndex].trimLeft() : ''; - if(block && block.startsWith('{')) { - const values = processStyleTags(block.substring(2)); - r.push(`
`); - blockCount++; - } else if(block == '}}' && blockCount !== 0){ - r.push('
'); - blockCount--; - } - - matchIndex++; - - return r; - }, []).join(''); - return res; - } else { - if(!matches) { - return `${text}`; } + }, + renderer(token) { + return `