@codename/deck 0.1.1 → 0.1.2

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.1.1";
+export declare const VERSION = "0.1.2";

package/docs/format.md

@@ -43,7 +43,7 @@ Slidev's form, as `@slidev/parser` splits it, and the parts a deck for knowledge
 - **Code** in fences, with lines marked as Slidev marks them: ` ```ts {2,4-5} `.
 - **Charts:** ` ```echarts ` holding an ECharts option as JSON, data only.
 - **Diagrams:** ` ```mermaid ` holding Mermaid's language.
-- **Markdown** as CommonMark and GFM have it: headings, lists, task lists, tables, quotes, emphasis, links, pictures.
+- **Markdown** as CommonMark and GFM have it: headings, lists, task lists, tables, quotes, emphasis, links, pictures. A picture alone on its line fills what its slot leaves, whole, whatever its own size.
 
 ### Added by deck
 

package/docs/host.md

@@ -1,6 +1,6 @@
 # Drawing decks in a host
 
-A host is a page that draws decks itself: Jean, or any other. deck builds every element with the DOM's own calls, sets custom properties through the CSSOM rather than style attributes, and needs no Trusted Types policy, so it runs under a policy with `style-src 'self'` and `trusted-types 'none'`. Load `@codename/deck` (with your own `marked` through an import map) or `@codename/deck/bundle`, and `@codename/deck/css` as a stylesheet.
+A host is a page that draws decks itself. deck builds every element with the DOM's own calls, sets custom properties through the CSSOM rather than style attributes, and needs no Trusted Types policy, so it runs under a policy with `style-src 'self'` and `trusted-types 'none'`. Load `@codename/deck` (with your own `marked` through an import map) or `@codename/deck/bundle`, and `@codename/deck/css` as a stylesheet.
 
 ## createDeck(element, options)
 
@@ -40,7 +40,7 @@ Every block that can be changed by hand carries `data-edit="from-to"`, the offse
 const { blob, report } = await toPptx(view, { PptxGenJS, JSZip })
 ```
 
-PptxGenJS 4 (its bundle carries JSZip) is the host's to load, on demand. The file is made from the deck as drawn: a slide layout per deck layout, named by its label in the deck's language, with a placeholder for its title and each slot; lists as lists with their levels; tables; bars, lines, areas, pies, rings, points and radars as native charts with their numbers, other charts and diagrams as pictures; notes; transitions; the kit's colours as the theme. `report` counts slides, charts, tables, pictures and placeholders.
+PptxGenJS 4 (its bundle carries JSZip) is the host's to load, on demand. The file is made from the deck as drawn: a slide layout per deck layout, named by its label in the deck's language, with a placeholder for its title and each slot; lists as lists with their levels; tables; bars, lines, areas, pies, rings, points and radars as native charts with their numbers, other charts and diagrams as pictures, and pictures, alone on their line or beside the words, as pictures; notes; transitions; the kit's colours as the theme. `report` counts slides, charts, tables, pictures and placeholders.
 
 ## Files
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codename/deck",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Slide decks as one web page: Markdown in Slidev's form inside a .deck.html file any browser presents, a renderer that runs anywhere, kits of layouts and looks, and an editable PowerPoint out",
   "license": "MIT",
   "type": "module",

package/src/blocks.js

@@ -2,7 +2,7 @@
 // from `base` (a CDN by default) the first time a slide needs it, never before. A chart is data,
 // read with JSON.parse; it takes the deck's colours and type, light or dark, and is drawn as SVG.
 // A diagram is drawn by Pele from Mermaid's language as SVG, then shown as a picture, so nothing it
-// makes runs or joins the page; its words are its picture's text for whoever can't see it. A host (Jean) gives
+// makes runs or joins the page; its words are its picture's text for whoever can't see it. A host gives
 // its own drawers instead.
 
 /** @typedef {{ base: string, root: HTMLElement, versions?: { echarts?: string, pele?: string } }} Where */

package/src/deck.css

@@ -33,7 +33,7 @@
 .deck-slide pre.has-marks .deck-line:not(.is-marked) { opacity: 0.45; }
 .deck-slide blockquote { border-inline-start: 0.25em solid var(--deck-fill); padding-inline-start: 0.9em; margin-inline: 0; font-style: italic; }
 .deck-slide img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
-.deck-slide .deck-picture { flex: 1; min-block-size: 0; display: grid; place-items: center; }
+.deck-slide .deck-picture { flex: 1; min-block-size: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
 .deck-slide .deck-picture img { block-size: 100%; }
 .deck-table { overflow: hidden; }
 .deck-slide table { border-collapse: collapse; inline-size: 100%; font-size: 0.85em; }

package/src/pptx.js

@@ -11,7 +11,8 @@
 import { labelOf } from './kit.js'
 
 const W = 13.333, H = 7.5
-const TEXT = 'h1, h2, h3, h4, h5, h6, .deck-h, p, ul, ol, blockquote'
+// Words: a paragraph that is a picture alone on its line is the picture.
+const TEXT = 'h1, h2, h3, h4, h5, h6, .deck-h, p:not(.deck-picture), ul, ol, blockquote'
 
 /** @param {string} value rgb(…) or #… @returns {string} six hex digits */
 function hexOf(value) {
@@ -121,6 +122,8 @@ export async function toPptx(view, { PptxGenJS, JSZip }) {
         } else {
           const img = block.querySelector('img')
           if (img) {
+            // A slide's pictures are read as they come near the screen: one not read yet is read now, so that it has its size.
+            if (!img.complete) { img.loading = 'eager'; await img.decode().catch(() => {}) }
             const data = await pictureOf(img.src, img.clientWidth * 2, img.clientHeight * 2)
             if (data) { slide.addImage({ data, ...place(img), altText: img.alt }); report.pictures++ }
           }

package/src/version.js

@@ -1,2 +1,2 @@
 // deck's version, which a linked file names in its renderer's address. Kept equal to package.json's by a test.
-export const VERSION = '0.1.1'
+export const VERSION = '0.1.2'