From ea62585a5370b55d2be8647d8950686d14519729 Mon Sep 17 00:00:00 2001 From: Niedziolka Michal Date: Sun, 20 Nov 2022 22:43:43 +0100 Subject: [PATCH 1/2] Allow hidden CSS src in tabbed examples --- editor/tmpl/live-tabbed-tmpl.html | 1 + lib/tabbedPageBuilder.js | 21 +++++++++ live-examples/fonts/molot.css | 4 ++ .../html-examples/table-content/caption.html | 23 ++++++++++ .../table-content/css/caption.css | 45 +++++++++++++++++++ .../html-examples/table-content/meta.json | 13 ++++++ 6 files changed, 107 insertions(+) create mode 100644 live-examples/fonts/molot.css create mode 100644 live-examples/html-examples/table-content/caption.html create mode 100644 live-examples/html-examples/table-content/css/caption.css create mode 100644 live-examples/html-examples/table-content/meta.json diff --git a/editor/tmpl/live-tabbed-tmpl.html b/editor/tmpl/live-tabbed-tmpl.html index 810985cb7..b350052d8 100644 --- a/editor/tmpl/live-tabbed-tmpl.html +++ b/editor/tmpl/live-tabbed-tmpl.html @@ -128,6 +128,7 @@

Console Output

+ diff --git a/lib/tabbedPageBuilder.js b/lib/tabbedPageBuilder.js index 2b17481d1..3c0984462 100644 --- a/lib/tabbedPageBuilder.js +++ b/lib/tabbedPageBuilder.js @@ -1,6 +1,7 @@ import fse from "fs-extra"; import * as pageBuilderUtils from "./pageBuilderUtils.js"; import * as processor from "./processor.js"; +import CleanCSS from "clean-css"; /** * Replace the template tag with the CSS source, or an empty string @@ -46,6 +47,24 @@ function addJS(currentPage, tmpl) { return tmpl; } +/** + * Adds optional hidden CSS to tabbed example. + * Its primary use case is adding new font to the example, without displaying @font-face to the user + * @param {Object} currentPage - The current page as an Object + * @param {String} tmpl - The template as a string + * @returns the processed template string + */ +function addHiddenCSS(currentPage, tmpl) { + if (currentPage.cssHiddenSrc) { + const content = fse.readFileSync(currentPage.cssHiddenSrc, "utf8"); + const minified = new CleanCSS().minify(content).styles; + + return tmpl.replace("%example-hidden-css-src%", minified); + } else { + return tmpl.replace("%example-hidden-css-src%", ""); + } +} + /** * Builds and returns the HTML source for a tabbed example * @param {String} tmpl - The template as a string @@ -70,5 +89,7 @@ export function buildTabbedExample(tmpl, currentPage) { tmpl = addHTML(currentPage, tmpl); // add the example JS tmpl = addJS(currentPage, tmpl); + // add hidden example-dependent CSS + tmpl = addHiddenCSS(currentPage, tmpl); return tmpl; } diff --git a/live-examples/fonts/molot.css b/live-examples/fonts/molot.css new file mode 100644 index 000000000..38bc6ce1e --- /dev/null +++ b/live-examples/fonts/molot.css @@ -0,0 +1,4 @@ +@font-face { + font-family: molot; + src: url("/media/fonts/molot.woff2") format("woff2"); +} diff --git a/live-examples/html-examples/table-content/caption.html b/live-examples/html-examples/table-content/caption.html new file mode 100644 index 000000000..9af598d02 --- /dev/null +++ b/live-examples/html-examples/table-content/caption.html @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + +
He-Man and Skeletor facts
 He-ManSkeletor
RoleHeroVillain
WeaponPower SwordHavoc Staff
Dark secretExpert floristCries at romcoms
diff --git a/live-examples/html-examples/table-content/css/caption.css b/live-examples/html-examples/table-content/css/caption.css new file mode 100644 index 000000000..ca858d25c --- /dev/null +++ b/live-examples/html-examples/table-content/css/caption.css @@ -0,0 +1,45 @@ +caption { + padding: 10px; + caption-side: bottom; +} + +table { + border-collapse: collapse; + border: 2px solid rgb(200, 200, 200); + letter-spacing: 1px; + font-family: sans-serif; + font-size: .8rem; +} + +td, +th { + border: 1px solid rgb(190, 190, 190); + padding: 7px 5px; +} + +th { + background-color: rgb(235, 235, 235); +} + +td { + text-align: center; +} + +tr:nth-child(even) td { + background-color: rgb(250, 250, 250); +} + +tr:nth-child(odd) td { + background-color: rgb(240, 240, 240); +} + +.heman { + font: 1.4rem molot; + text-shadow: 1px 1px 1px #fff, 2px 2px 1px #000; +} + +.skeletor { + font: 1.7rem rapscallion; + letter-spacing: 3px; + text-shadow: 1px 1px 0 #fff, 0 0 9px #000; +} diff --git a/live-examples/html-examples/table-content/meta.json b/live-examples/html-examples/table-content/meta.json new file mode 100644 index 000000000..334024f01 --- /dev/null +++ b/live-examples/html-examples/table-content/meta.json @@ -0,0 +1,13 @@ +{ + "pages": { + "dialog": { + "exampleCode": "live-examples/html-examples/table-content/caption.html", + "cssExampleSrc": "live-examples/html-examples/table-content/css/caption.css", + "cssHiddenSrc": "live-examples/fonts/molot.css", + "fileName": "caption.html", + "title": "HTML Demo: ", + "type": "tabbed", + "height": "tabbed-taller" + } + } +} From 175b936f05ea477de7f2cc7a92bade11f5c913b6 Mon Sep 17 00:00:00 2001 From: Niedziolka Michal Date: Sun, 20 Nov 2022 23:08:19 +0100 Subject: [PATCH 2/2] prettier --- editor/tmpl/live-tabbed-tmpl.html | 4 +- lib/tabbedPageBuilder.js | 2 +- live-examples/fonts/molot.css | 4 +- .../html-examples/table-content/caption.html | 44 ++++++++++--------- .../table-content/css/caption.css | 36 +++++++-------- .../html-examples/table-content/meta.json | 20 ++++----- 6 files changed, 57 insertions(+), 53 deletions(-) diff --git a/editor/tmpl/live-tabbed-tmpl.html b/editor/tmpl/live-tabbed-tmpl.html index b350052d8..7c27fc9fe 100644 --- a/editor/tmpl/live-tabbed-tmpl.html +++ b/editor/tmpl/live-tabbed-tmpl.html @@ -128,7 +128,9 @@

Console Output

- + diff --git a/lib/tabbedPageBuilder.js b/lib/tabbedPageBuilder.js index 3c0984462..9bf283e88 100644 --- a/lib/tabbedPageBuilder.js +++ b/lib/tabbedPageBuilder.js @@ -58,7 +58,7 @@ function addHiddenCSS(currentPage, tmpl) { if (currentPage.cssHiddenSrc) { const content = fse.readFileSync(currentPage.cssHiddenSrc, "utf8"); const minified = new CleanCSS().minify(content).styles; - + return tmpl.replace("%example-hidden-css-src%", minified); } else { return tmpl.replace("%example-hidden-css-src%", ""); diff --git a/live-examples/fonts/molot.css b/live-examples/fonts/molot.css index 38bc6ce1e..d6e91685c 100644 --- a/live-examples/fonts/molot.css +++ b/live-examples/fonts/molot.css @@ -1,4 +1,4 @@ @font-face { - font-family: molot; - src: url("/media/fonts/molot.woff2") format("woff2"); + font-family: molot; + src: url("/media/fonts/molot.woff2") format("woff2"); } diff --git a/live-examples/html-examples/table-content/caption.html b/live-examples/html-examples/table-content/caption.html index 9af598d02..c0e53b83f 100644 --- a/live-examples/html-examples/table-content/caption.html +++ b/live-examples/html-examples/table-content/caption.html @@ -1,23 +1,25 @@ - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + +
He-Man and Skeletor facts
 He-ManSkeletor
RoleHeroVillain
WeaponPower SwordHavoc Staff
Dark secretExpert floristCries at romcoms
 + He-Man and Skeletor facts +
 He-ManSkeletor
RoleHeroVillain
WeaponPower SwordHavoc Staff
Dark secretExpert floristCries at romcoms
diff --git a/live-examples/html-examples/table-content/css/caption.css b/live-examples/html-examples/table-content/css/caption.css index ca858d25c..4cd84684e 100644 --- a/live-examples/html-examples/table-content/css/caption.css +++ b/live-examples/html-examples/table-content/css/caption.css @@ -1,45 +1,45 @@ caption { - padding: 10px; - caption-side: bottom; + padding: 10px; + caption-side: bottom; } table { - border-collapse: collapse; - border: 2px solid rgb(200, 200, 200); - letter-spacing: 1px; - font-family: sans-serif; - font-size: .8rem; + border-collapse: collapse; + border: 2px solid rgb(200, 200, 200); + letter-spacing: 1px; + font-family: sans-serif; + font-size: 0.8rem; } td, th { - border: 1px solid rgb(190, 190, 190); - padding: 7px 5px; + border: 1px solid rgb(190, 190, 190); + padding: 7px 5px; } th { - background-color: rgb(235, 235, 235); + background-color: rgb(235, 235, 235); } td { - text-align: center; + text-align: center; } tr:nth-child(even) td { - background-color: rgb(250, 250, 250); + background-color: rgb(250, 250, 250); } tr:nth-child(odd) td { - background-color: rgb(240, 240, 240); + background-color: rgb(240, 240, 240); } .heman { - font: 1.4rem molot; - text-shadow: 1px 1px 1px #fff, 2px 2px 1px #000; + font: 1.4rem molot; + text-shadow: 1px 1px 1px #fff, 2px 2px 1px #000; } .skeletor { - font: 1.7rem rapscallion; - letter-spacing: 3px; - text-shadow: 1px 1px 0 #fff, 0 0 9px #000; + font: 1.7rem rapscallion; + letter-spacing: 3px; + text-shadow: 1px 1px 0 #fff, 0 0 9px #000; } diff --git a/live-examples/html-examples/table-content/meta.json b/live-examples/html-examples/table-content/meta.json index 334024f01..6dfeba4c5 100644 --- a/live-examples/html-examples/table-content/meta.json +++ b/live-examples/html-examples/table-content/meta.json @@ -1,13 +1,13 @@ { - "pages": { - "dialog": { - "exampleCode": "live-examples/html-examples/table-content/caption.html", - "cssExampleSrc": "live-examples/html-examples/table-content/css/caption.css", - "cssHiddenSrc": "live-examples/fonts/molot.css", - "fileName": "caption.html", - "title": "HTML Demo: ", - "type": "tabbed", - "height": "tabbed-taller" - } + "pages": { + "dialog": { + "exampleCode": "live-examples/html-examples/table-content/caption.html", + "cssExampleSrc": "live-examples/html-examples/table-content/css/caption.css", + "cssHiddenSrc": "live-examples/fonts/molot.css", + "fileName": "caption.html", + "title": "HTML Demo: ", + "type": "tabbed", + "height": "tabbed-taller" } + } }