pfwr 0.10.0 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://github.com/nikku/pfwr/actions/workflows/CI.yml)
|
|
4
4
|
|
|
5
|
-
Turns your [Markdown file](https://github.com/nikku/pfwr/blob/main/README.md#example) into [a beautiful HTML slide deck](https://cdn.statically.io/gh/nikku/pfwr/v0.
|
|
5
|
+
Turns your [Markdown file](https://github.com/nikku/pfwr/blob/main/README.md#example) into [a beautiful HTML slide deck](https://cdn.statically.io/gh/nikku/pfwr/v0.11.0/example/presentation.html). Batteries included.
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
## Introduction
|
|
9
9
|
|
|
10
|
-
[](https://cdn.statically.io/gh/nikku/pfwr/v0.
|
|
10
|
+
[](https://cdn.statically.io/gh/nikku/pfwr/v0.11.0/example/presentation.html)
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
## Usage
|
|
@@ -74,7 +74,7 @@ Convert the file to an HTML file:
|
|
|
74
74
|
pfwr presentation.md presentation.html
|
|
75
75
|
```
|
|
76
76
|
|
|
77
|
-
Open [the slide deck](https://cdn.statically.io/gh/nikku/pfwr/v0.
|
|
77
|
+
Open [the slide deck](https://cdn.statically.io/gh/nikku/pfwr/v0.11.0/example/presentation.html) in your favorite browser.
|
|
78
78
|
|
|
79
79
|
|
|
80
80
|
## Security Considerations
|
package/dist/index.js
CHANGED
|
@@ -72370,7 +72370,7 @@ function tagSlide(node) {
|
|
|
72370
72370
|
|
|
72371
72371
|
}
|
|
72372
72372
|
|
|
72373
|
-
var pfwrStyle = "html,\nbody {\n margin: 0;\n padding: 0;\n height: 100%;\n box-sizing: border-box;\n}\n\n:root {\n\n --font-size-h1: 3em;\n --font-size-h2: 1.8em;\n --font-size-h3: 1.4em;\n --font-size-h4: 1.1em;\n --font-size-default: 3.5em;\n --font-size-small: .4em;\n\n --font-size-default-print: 2.5em;\n\n --slide-margin: 2rem;\n\n --font-family-body: 'Montserrat', sans-serif;\n --font-family-heading: 'Roboto Slab', serif;\n --font-family-code: 'Roboto Mono', monospace;\n\n --list-margin: .5em;\n\n --color-navy: #001F3F;\n --color-blue: #0074D9;\n --color-aqua: #7FDBFF;\n --color-teal: #39CCCC;\n --color-olive: #3D9970;\n --color-green: #2ECC40;\n --color-lime: #01FF70;\n --color-yellow: #FFDC00;\n --color-orange: #FF851B;\n --color-red: #FF4136;\n --color-fuchsia: #F012BE;\n --color-purple: #B10DC9;\n --color-maroon: #85144B;\n --color-white: #FFFFFF;\n --color-gray-7: #FCFCFC;\n --color-gray-6: #F0F0F0;\n --color-gray-5: #DDDDDD;\n --color-gray-4: #AAAAAA;\n --color-gray-3: #888;\n --color-gray-2: #666;\n --color-gray-1: #333;\n --color-black: #111;\n\n --color-default: var(--color-gray-1);\n --color-bg: var(--color-white);\n\n --color-highlight: var(--color-gray-7);\n --color-highlight-bg: var(--color-fuchsia);\n\n --color-slide-number: var(--color-gray-3);\n\n --color-code-bg: #cfcaca59;\n --color-code: var(--color-gray-7);\n\n --color-link: var(--color-blue);\n\n --color-table-head: var(--color-gray-7);\n --color-table-head-bg: var(--color-orange);\n --color-table: var(--color-default);\n --color-table-bg: var(--color-gray-6);\n --color-table-border: var(--color-gray-5);\n}\n\n.slide[data-theme='funky'] {\n\n --color-default: var(--color-gray-7);\n --color-bg: var(--color-fuchsia);\n\n --color-slide-number: var(--color-gray-5);\n\n --color-code: var(--color-gray-7);\n --color-code-bg: #cfcaca59;\n\n --color-highlight: var(--color-gray-7);\n --color-highlight-bg: var(--color-orange);\n\n --color-link: var(--color-gray-7);\n\n --color-table-head: var(--color-gray-1);\n --color-table-head-bg: var(--color-yellow);\n --color-table-bg: var(--color-gray-7);\n --color-table-border: var(--color-gray-4);\n}\n\n.slide[data-theme='eco'] {\n\n --color-default: var(--color-gray-7);\n --color-bg: var(--color-olive);\n\n --color-slide-number: var(--color-gray-5);\n\n --color-code: var(--color-gray-7);\n --color-code-bg: #cfcaca59;\n\n --color-highlight: var(--color-gray-6);\n --color-highlight-bg: var(--color-red);\n\n --color-link: var(--color-gray-7);\n\n --color-table-head: var(--color-gray-7);\n --color-table-head-bg: var(--color-orange);\n --color-table-bg: var(--color-gray-7);\n --color-table-border: var(--color-gray-4);\n}\n\ncode:not([class*=\"language-\"]) {\n padding: .2em .4em;\n margin: 0;\n font-size: 85%;\n border-radius: .1em;\n\n background-color: var(--color-code-bg);\n font-family: var(--font-family-code);\n}\n\nh1, h2, h3, h4 {\n font-family: var(--font-family-heading);\n\n margin: 1rem;\n}\n\nh1 {\n font-size: var(--font-size-h1);\n}\n\nh2 {\n font-size: var(--font-size-h2);\n}\n\nh3 {\n font-size: var(--font-size-h3);\n}\n\nh4 {\n font-size: var(--font-size-h4);\n}\n\nli + li {\n margin-top: var(--list-margin);\n}\n\na {\n color: var(--color-link);\n}\n\nem {\n background: var(--color-highlight-bg);\n font-style: normal;\n color: var(--color-highlight);\n}\n\ntable, pre {\n width: fit-content;\n min-width: 50%;\n}\n\n.slide-container {\n font-family: var(--font-family-body);\n font-size: var(--font-size-default);\n}\n\n.slide > *,\n.slide > pre[class*=\"language-\"] {\n margin: 0 var(--slide-margin);\n}\n\n.slide > ul,\n.slide > ol {\n margin: 0 calc(var(--slide-margin) * 2);\n}\n\n.slide > * + *,\n.slide > * + pre[class*=\"language-\"],\n.slide > * + ul,\n.slide > * + ol {\n margin-top: calc(var(--slide-margin) * 1.5);\n}\n\n.slide-container {\n width: 100vw;\n height: 100vh;\n}\n\n.slide {\n position: relative;\n\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n\n background: var(--color-bg);\n color: var(--color-default);\n}\n\n.slide[data-align='center'] {\n align-items: center;\n text-align: center;\n}\n\n.slide[data-align='left'] {\n align-items: flex-start;\n}\n\n.slide[data-align='right'] {\n align-items: flex-end;\n}\n\ntable {\n border-radius: 1rem;\n overflow: hidden;\n border-collapse: collapse;\n\n color: var(--color-table);\n background: var(--color-table-bg);\n\n font-size: .7em;\n}\n\nthead {\n color: var(--color-table-head);\n background: var(--color-table-head-bg);\n}\n\ntbody tr + tr {\n border-top: solid 1px var(--color-table-border);\n}\n\ntable td,\ntable th {\n padding: .7em .8em;\n}\n\ntable th:first-child,\ntable td:first-child {\n padding-left: 1.5em;\n}\n\ntable th:last-child,\ntable td:last-child {\n padding-right: 1.5em;\n}\n\n.slide-number {\n position: absolute;\n bottom: calc(var(--slide-margin) / 2);\n right: calc(var(--slide-margin) / 2);\n color: var(--color-slide-number);\n font-size: var(--font-size-small);\n margin: 0;\n}\n\nimg.emoji {\n height: 1em;\n width: 1em;\n margin: 0 .05em 0 .1em;\n vertical-align: -0.1em;\n}\n\nimg {\n object-fit: contain;\n}\n\n.slide > img:not(.emoji) {\n max-width: calc(100% - var(--slide-margin));\n max-height: calc(100% - var(--slide-margin));\n}\n\n.slide p > img:not(.emoji) {\n max-width: 100%;\n max-height: 100%;\n}\n\n.slide > pre[class*=\"language-\"] {\n font-size: .5em;\n}\n\n.slide-navigation {\n position: fixed;\n top: 20px;\n right: 20px;\n}\n\n.slide-navigation:not(.shown) {\n display: none;\n}\n\n.slide-navigation a {\n text-decoration: none;\n display: inline-block;\n margin: .05em;\n padding: .2em;\n\n background: var(--color-gray-5);\n color: var(--color-gray-1);\n opacity: .4;\n border-radius: .1em;\n}\n\n.slide-navigation a svg {\n display: block;\n}\n\n.slide-navigation a:hover {\n opacity: 1;\n}\n\n@media print {\n\n .slide-navigation {\n display: none;\n }\n\n .slide-container {\n font-size: var(--font-size-default-print);\n }\n\n .slide {\n page-break-after: always;\n }\n}\n\n@media screen {\n .slide-container {\n overflow: hidden;\n }\n\n .slide {\n position: absolute;\n transform: translate(-100%, -100%);\n }\n\n .slide.current {\n top: 0;\n left: 0;\n transform: translate(0, 0);\n }\n}";
|
|
72373
|
+
var pfwrStyle = "html,\nbody {\n margin: 0;\n padding: 0;\n height: 100%;\n box-sizing: border-box;\n}\n\n:root {\n\n --font-size-h1: 3em;\n --font-size-h2: 1.8em;\n --font-size-h3: 1.4em;\n --font-size-h4: 1.1em;\n --font-size-default: 3.5em;\n --font-size-small: .4em;\n --font-size-smaller: .7em;\n\n --font-size-default-print: 2.5em;\n\n --slide-margin: 2rem;\n\n --font-family-body: 'Montserrat', sans-serif;\n --font-family-heading: 'Roboto Slab', serif;\n --font-family-code: 'Roboto Mono', monospace;\n\n --list-margin: .5em;\n\n --color-navy: #001F3F;\n --color-blue: #0074D9;\n --color-aqua: #7FDBFF;\n --color-teal: #39CCCC;\n --color-olive: #3D9970;\n --color-green: #2ECC40;\n --color-lime: #01FF70;\n --color-yellow: #FFDC00;\n --color-orange: #FF851B;\n --color-red: #FF4136;\n --color-fuchsia: #F012BE;\n --color-purple: #B10DC9;\n --color-maroon: #85144B;\n --color-white: #FFFFFF;\n --color-gray-7: #FCFCFC;\n --color-gray-6: #F0F0F0;\n --color-gray-5: #DDDDDD;\n --color-gray-4: #AAAAAA;\n --color-gray-3: #888;\n --color-gray-2: #666;\n --color-gray-1: #333;\n --color-black: #111;\n\n --color-default: var(--color-gray-1);\n --color-bg: var(--color-white);\n\n --color-highlight: var(--color-gray-7);\n --color-highlight-bg: var(--color-fuchsia);\n\n --color-slide-number: var(--color-gray-3);\n\n --color-code-bg: #cfcaca59;\n --color-code: var(--color-gray-7);\n\n --color-link: var(--color-blue);\n\n --color-table-head: var(--color-gray-7);\n --color-table-head-bg: var(--color-orange);\n --color-table: var(--color-default);\n --color-table-bg: var(--color-gray-6);\n --color-table-border: var(--color-gray-5);\n}\n\n.slide[data-theme='funky'] {\n\n --color-default: var(--color-gray-7);\n --color-bg: var(--color-fuchsia);\n\n --color-slide-number: var(--color-gray-5);\n\n --color-code: var(--color-gray-7);\n --color-code-bg: #cfcaca59;\n\n --color-highlight: var(--color-gray-7);\n --color-highlight-bg: var(--color-orange);\n\n --color-link: var(--color-gray-7);\n\n --color-table-head: var(--color-gray-1);\n --color-table-head-bg: var(--color-yellow);\n --color-table-bg: var(--color-gray-7);\n --color-table-border: var(--color-gray-4);\n}\n\n.slide[data-theme='eco'] {\n\n --color-default: var(--color-gray-7);\n --color-bg: var(--color-olive);\n\n --color-slide-number: var(--color-gray-5);\n\n --color-code: var(--color-gray-7);\n --color-code-bg: #cfcaca59;\n\n --color-highlight: var(--color-gray-6);\n --color-highlight-bg: var(--color-red);\n\n --color-link: var(--color-gray-7);\n\n --color-table-head: var(--color-gray-7);\n --color-table-head-bg: var(--color-orange);\n --color-table-bg: var(--color-gray-7);\n --color-table-border: var(--color-gray-4);\n}\n\ncode:not([class*=\"language-\"]) {\n padding: .2em .4em;\n margin: 0;\n font-size: 85%;\n border-radius: .1em;\n\n background-color: var(--color-code-bg);\n font-family: var(--font-family-code);\n}\n\nh1, h2, h3, h4 {\n font-family: var(--font-family-heading);\n\n margin: 1rem;\n}\n\nh1 {\n font-size: var(--font-size-h1);\n}\n\nh2 {\n font-size: var(--font-size-h2);\n}\n\nh3 {\n font-size: var(--font-size-h3);\n}\n\nh4 {\n font-size: var(--font-size-h4);\n}\n\nli + li {\n margin-top: var(--list-margin);\n}\n\na {\n color: var(--color-link);\n}\n\nsmall {\n font-size: var(--font-size-smaller);\n}\n\nem {\n background: var(--color-highlight-bg);\n font-style: normal;\n color: var(--color-highlight);\n}\n\ntable, pre {\n width: fit-content;\n min-width: 50%;\n}\n\n.slide-container {\n font-family: var(--font-family-body);\n font-size: var(--font-size-default);\n}\n\n.slide > *,\n.slide > pre[class*=\"language-\"] {\n margin: 0 var(--slide-margin);\n}\n\n.slide > ul,\n.slide > ol {\n margin: 0 calc(var(--slide-margin) * 2);\n}\n\n.slide > * + *,\n.slide > * + pre[class*=\"language-\"],\n.slide > * + ul,\n.slide > * + ol {\n margin-top: calc(var(--slide-margin) * 1.5);\n}\n\n.slide-container {\n width: 100vw;\n height: 100vh;\n}\n\n.slide {\n position: relative;\n\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n\n background: var(--color-bg);\n color: var(--color-default);\n}\n\n.slide[data-align='center'] {\n align-items: center;\n text-align: center;\n}\n\n.slide[data-align='left'] {\n align-items: flex-start;\n}\n\n.slide[data-align='right'] {\n align-items: flex-end;\n}\n\ntable {\n border-radius: 1rem;\n overflow: hidden;\n border-collapse: collapse;\n\n color: var(--color-table);\n background: var(--color-table-bg);\n\n font-size: .7em;\n}\n\nthead {\n color: var(--color-table-head);\n background: var(--color-table-head-bg);\n}\n\ntbody tr + tr {\n border-top: solid 1px var(--color-table-border);\n}\n\ntable td,\ntable th {\n padding: .7em .8em;\n}\n\ntable th:first-child,\ntable td:first-child {\n padding-left: 1.5em;\n}\n\ntable th:last-child,\ntable td:last-child {\n padding-right: 1.5em;\n}\n\n.slide-number {\n position: absolute;\n bottom: calc(var(--slide-margin) / 2);\n right: calc(var(--slide-margin) / 2);\n color: var(--color-slide-number);\n font-size: var(--font-size-small);\n margin: 0;\n}\n\nimg.emoji {\n height: 1em;\n width: 1em;\n margin: 0 .05em 0 .1em;\n vertical-align: -0.1em;\n}\n\nimg {\n object-fit: contain;\n}\n\n.slide > img:not(.emoji) {\n max-width: calc(100% - var(--slide-margin));\n max-height: calc(100% - var(--slide-margin));\n}\n\n.slide p > img:not(.emoji) {\n max-width: 100%;\n max-height: 100%;\n}\n\n.slide > pre[class*=\"language-\"] {\n font-size: .5em;\n}\n\n.slide-navigation {\n position: fixed;\n top: 20px;\n right: 20px;\n}\n\n.slide-navigation:not(.shown) {\n display: none;\n}\n\n.slide-navigation a {\n text-decoration: none;\n display: inline-block;\n margin: .05em;\n padding: .2em;\n\n background: var(--color-gray-5);\n color: var(--color-gray-1);\n opacity: .4;\n border-radius: .1em;\n}\n\n.slide-navigation a svg {\n display: block;\n}\n\n.slide-navigation a:hover {\n opacity: 1;\n}\n\n@media print {\n\n .slide-navigation {\n display: none;\n }\n\n .slide-container {\n font-size: var(--font-size-default-print);\n }\n\n .slide {\n page-break-after: always;\n }\n}\n\n@media screen {\n .slide-container {\n overflow: hidden;\n }\n\n .slide {\n position: absolute;\n transform: translate(-100%, -100%);\n }\n\n .slide.current {\n top: 0;\n left: 0;\n transform: translate(0, 0);\n }\n}";
|
|
72374
72374
|
|
|
72375
72375
|
var pfwrScript = "function addPage(index, slide) {\n\n if (!index) {\n return;\n }\n\n const el = document.createElement('div');\n el.classList.add('slide-number');\n el.textContent = index + 1;\n\n slide.appendChild(el);\n}\n\nfunction addNavigationControls(container, goto) {\n\n const html = `<nav class=\"slide-navigation shown\">\n <a class=\"navigation-button\" data-navigate=\"first\" title=\"First slide\" href>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M12 16.5a4.5 4.5 0 100-9 4.5 4.5 0 000 9zm0 1.5a6 6 0 100-12 6 6 0 000 12z\"></path></svg>\n </a>\n <a class=\"navigation-button\" data-navigate=\"previous\" title=\"Previous slide (Left Arrow)\" href>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\"><path d=\"M8.854 11.646l5.792-5.792a.5.5 0 01.854.353v11.586a.5.5 0 01-.854.353l-5.792-5.792a.5.5 0 010-.708z\"></path></svg>\n </a>\n <a class=\"navigation-button\" data-navigate=\"next\" title=\"Next slide (Enter/Spacebar/Right Arrow)\" href>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\"><path d=\"M15.146 12.354l-5.792 5.792a.5.5 0 01-.854-.353V6.207a.5.5 0 01.854-.353l5.792 5.792a.5.5 0 010 .708z\"></path></svg>\n </a>\n <a class=\"navigation-button\" data-navigate=\"last\" title=\"Last slide\" href>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\"><path d=\"M12 18a6 6 0 100-12 6 6 0 000 12z\"></path></svg>\n </a>\n </nav>`;\n\n const tmp = document.createElement('div');\n\n tmp.innerHTML = html;\n\n const nav = tmp.removeChild(tmp.lastChild);\n\n nav.addEventListener('mouseenter', function(event) {\n nav.classList.add('hovered');\n });\n\n nav.addEventListener('mouseleave', function(event) {\n nav.classList.remove('hovered');\n });\n\n nav.addEventListener('click', function(event) {\n\n event.preventDefault();\n\n let target = event.target;\n\n while (!target.matches('[data-navigate]')) {\n target = target.parentNode;\n }\n\n if (!target) {\n return;\n }\n\n goto(target.dataset.navigate);\n });\n\n container.appendChild(nav);\n\n return nav;\n}\n\n// eslint-disable-next-line no-unused-vars\nfunction pfwr(options) {\n\n const {\n container\n } = options;\n\n // slide numbers\n const slides = Array.from(container.querySelectorAll('.slide'));\n\n for (const idx in slides) {\n addPage(+idx, slides[+idx]);\n }\n\n // mouse navigation controls\n const nav = addNavigationControls(container, goto);\n\n // event listeners ////////////////////////\n\n const listeners = [];\n\n function on(event, fn) {\n listeners.push([ event, fn ]);\n }\n\n function emit(event, data) {\n\n for (const [ eventType, fn ] of listeners) {\n if (event === eventType) {\n fn(data);\n }\n }\n }\n\n // slide life cycle ////////////////\n\n let slideIndex = -1;\n\n function goto(next) {\n\n const slide = slides[slideIndex] || slides.find(s => s.dataset.name === slideIndex);\n\n const nextIndex = ((next, currentIndex, numberOfSlides) => {\n\n if (next === 'next') {\n return currentIndex + 1;\n }\n\n if (next === 'previous') {\n return currentIndex - 1;\n }\n\n if (next === 'first') {\n return 0;\n }\n\n if (next === 'last') {\n return numberOfSlides - 1;\n }\n\n if (next < 0) {\n return numberOfSlides + next;\n }\n\n return next;\n })(next, slides.indexOf(slide), slides.length);\n\n if (slideIndex === nextIndex) {\n return;\n }\n\n const nextSlide = slides[nextIndex] || slides.find(s => s.dataset.name === nextIndex);\n\n if (!nextSlide) {\n return;\n }\n\n slide && slide.classList.remove('current');\n nextSlide.classList.add('current');\n\n slideIndex = nextIndex;\n\n emit('slideChanged', {\n slideIndex\n });\n }\n\n // slide navigation\n\n function showNav() {\n nav && nav.classList.toggle('shown', true);\n }\n\n function hideNav() {\n nav && !nav.matches('.hovered') && nav.classList.toggle('shown', false);\n }\n\n let hideTimer;\n\n container.addEventListener('mousemove', function() {\n\n showNav();\n\n clearTimeout(hideTimer);\n\n hideTimer = setTimeout(hideNav, 2000);\n });\n\n\n function handleKey(event) {\n\n const key = event.key;\n\n if (event.altKey || event.metaKey || event.ctrlKey) {\n return;\n }\n\n if (key === 'Home') {\n hideNav();\n goto('first');\n\n return false;\n }\n\n if (key === 'End') {\n hideNav();\n goto('last');\n\n return false;\n }\n\n if (key === 'ArrowRight' || key === 'Enter' || key === ' ') {\n hideNav();\n goto('next');\n\n return false;\n }\n\n if (key === 'ArrowLeft') {\n hideNav();\n goto('previous');\n\n return false;\n }\n }\n\n function destroy() {\n document.removeEventListener('keydown', handleKey);\n }\n\n document.addEventListener('keydown', handleKey);\n\n return {\n on,\n goto,\n destroy\n };\n}";
|
|
72376
72376
|
|