Fix image/video alignment with two column layouts, add file.io ack for CLI, update readme/changelog

Author: sqrrrl

CHANGELOG.md

@@ -3,9 +3,11 @@
 ## (pending)
 
 * Support local image upload (via file.io) and rasterization of SVG and TeX/MathML expressions
-* Allow custom layouts via markdown
+* Fix image alignment when included in a column
 * Allow offsets for images
+* Allow custom layouts via markdown
 * Update dependencies
+* Migrate code to TypeScript
 
 ## 0.4
 

README.md

@@ -295,6 +295,17 @@ are supported. For example, to use the github theme
 md2gslides slides.md --style github
 ```
 
+You can also apply additional style changes to the entire block, such as changing
+the font size:
+
+<pre>
+### Hello World
+
+```javascript
+console.log('Hello world');
+```{style="font-size: 36pt"}
+</pre>
+
 ### Tables
 
 Tables are supported via
@@ -316,13 +327,47 @@ Dogs   | 75 million
 Birds  | 16 million
 </pre>
 
+### Local images
+
+Images referencing local paths temporarily uploaded and hosted to [file.io](https://file.io)
+
+### Image rasterization
+
+Slides can also include generated images, using `$$$` fenced blocks
+for the data. Currently supported generated images are math expression (TeX
+and MathML) as well as SVG
+
+Using TeX:
+
+<pre>
+# How about some math?
+
+$$$ math
+\cos (2\theta) = \cos^2 \theta - \sin^2 \theta
+$$$
+</pre>
+
+SVG
+
+<pre>
+# Or some SVG?
+
+$$$ svg
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><defs><path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z"/><path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/><path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/><path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/></svg>
+$$$
+</pre>
+
+Like local images, generated images are temporarily served via file.io.
+
+Pull requests for other image generators (e.g. mermaid, chartjs, etc.) are welcome!
+
 ## Reading from standard input
 
 You can also pipe markdown into the tool by using `STDIN` as the file name.
 
 ## Contributing
 
-With the exception of `/bin/md2gslides.js`, ES6 is used throughout and compiled
+With the exception of `/bin/md2gslides.js`, TypeScript is used throughout and compiled
 with [Babel](https://babeljs.io/). [Mocha](https://mochajs.org/) and [Chai](http://chaijs.com/)
 are used for testing.
 
@@ -338,6 +383,12 @@ To run unit tests:
 npm run test
 ```
 
+To lint/format tests:
+
+```sh
+npm run lint
+```
+
 See [CONTRIBUTING](CONTRIBUTING.md) for additional terms.
 
 ## License

bin/md2gslides.js

@@ -80,13 +80,17 @@ parser.addArgument(['-c', '--copy'], {
     dest: 'copy',
     required: false,
 });
+parser.addArgument(['--use-fileio'], {
+    help: 'Acknolwedge local and generated images are uploaded to https://file.io',
+    action: 'storeTrue',
+    dest: 'useFileio',
+    require: false,
+});
 
 const args = parser.parseArgs();
 
 function handleError(err) {
     console.log('Unable to generate slides:', err);
-    console.log(err.stack);
-    console.log(JSON.stringify(err, null, 2));
 }
 
 function prompt(url) {
@@ -168,7 +172,10 @@ function generateSlides(slideGenerator) {
     const input = fs.readFileSync(file, { encoding: 'UTF-8' });
     const css = loadCss(args.style);
 
-    return slideGenerator.generateFromMarkdown(input, css);
+    return slideGenerator.generateFromMarkdown(input, {
+        css: css,
+        useFileio: args.useFileio,
+    });
 }
 
 function displayResults(id) {

examples/example.md

@@ -57,6 +57,16 @@ This is the *right* column
 
 ---
 
+# Columns can have images
+
+This is the *left* column
+
+{.column}
+
+![](https://picsum.photos/g/1600/900)
+
+---
+
 # Slides can have background images
 
 ![](https://picsum.photos/g/1600/900){.background}
@@ -139,7 +149,7 @@ Birds  | 16 million
 Use <span style="color:red">span</span> to color text.
 
 Use <sup>superscript</sup> and <sub>subscript</sub>, <span style="text-decoration: line-through">strikethrough</span>
-or <span style="text-decoration: underline">underline</span>, even <span style="font-variant: small-caps">small caps.</span>
+or <span style="text-decoration: underline">underline</span>, even <span style="font-variant: small-caps">small <span style="color:green">caps</span>.</span>
 
 ---
 # How about some math?
@@ -164,3 +174,5 @@ Custom master slides can be selected by adding the attribute `{layout="Title and
 the slide layout will be chosen from the available master slides by the name.
 
 This can be used with the flag `--copy=[presentation id]` to copy and use an existing presentation as the source rather than a blank slide.
+
+---

package.json

@@ -19,7 +19,7 @@
     "exec": "npm run compile && node bin/md2gslides.js",
     "test": "mocha --require ./test/register --timeout 5000 \"test/**/*.spec.ts\"",
     "test-debug": "mocha --debug-brk --inspect --require ./test/register --timeout 5000 \"test/**/*.spec.ts\"",
-    "lint": "./node_modules/.bin/eslint --fix \"src/**/*.ts\" bin",
+    "lint": "./node_modules/.bin/eslint --fix \"src/**/*.ts\" \"test/**/*.ts\" bin",
     "eslint-check": "eslint --print-config . | eslint-config-prettier-check"
   },
   "repository": {

src/layout/generic_layout.ts

@@ -30,13 +30,6 @@ interface BoundingBox {
     y: number;
 }
 
-function asArrayOrNull<T>(value: T): T[] | null {
-    if (!value) {
-        return null;
-    }
-    return [value];
-}
-
 /**
  * Performs most of the work of converting a slide into API requests.
  *
@@ -72,10 +65,9 @@ export default class GenericLayout {
     }
 
     public appendContentRequests(requests: SlidesV1.Schema$Request[]): SlidesV1.Schema$Request[] {
-        this.appendFillPlaceholderTextRequest(asArrayOrNull(this.slide.title), 'TITLE', requests);
-        this.appendFillPlaceholderTextRequest(asArrayOrNull(this.slide.title), 'CENTERED_TITLE', requests);
-        this.appendFillPlaceholderTextRequest(asArrayOrNull(this.slide.subtitle), 'SUBTITLE', requests);
-        this.appendFillPlaceholderTextRequest(this.slide.bodies, 'BODY', requests);
+        this.appendFillPlaceholderTextRequest(this.slide.title, 'TITLE', requests);
+        this.appendFillPlaceholderTextRequest(this.slide.title, 'CENTERED_TITLE', requests);
+        this.appendFillPlaceholderTextRequest(this.slide.subtitle, 'SUBTITLE', requests);
 
         if (this.slide.backgroundImage) {
             this.appendSetBackgroundImageRequest(this.slide.backgroundImage, requests);
@@ -85,12 +77,18 @@ export default class GenericLayout {
             this.appendCreateTableRequests(this.slide.tables, requests);
         }
 
-        if (this.slide.images.length) {
-            this.appendCreateImageRequests(this.slide.images, requests);
-        }
-
-        if (this.slide.videos.length) {
-            this.appendCreateVideoRequests(this.slide.videos, requests);
+        if (this.slide.bodies) {
+            const bodyElements = findPlaceholder(this.presentation, this.slide.objectId, 'BODY');
+            this.slide.bodies.forEach((body, index) => {
+                let placeholder = bodyElements[index];
+                this.appendFillPlaceholderTextRequest(body.text, placeholder, requests);
+                if (body.images && body.images.length) {
+                    this.appendCreateImageRequests(body.images, placeholder, requests);
+                }
+                if (body.videos && body.videos.length) {
+                    this.appendCreateVideoRequests(body.videos, placeholder, requests);
+                }
+            });
         }
 
         if (this.slide.notes) {
@@ -102,28 +100,25 @@ export default class GenericLayout {
     }
 
     protected appendFillPlaceholderTextRequest(
-        values: TextDefinition[],
-        placeholderName: string,
+        value: TextDefinition,
+        placeholder: string | SlidesV1.Schema$PageElement,
         requests: SlidesV1.Schema$Request[],
     ): SlidesV1.Schema$Request[] {
-        if (!(values && values.length)) {
-            debug('No text for placeholder %s', placeholderName);
+        if (!value) {
+            debug('No text for placeholder %s');
             return;
         }
 
-        const pageElements = findPlaceholder(this.presentation, this.slide.objectId, placeholderName);
-        if (!pageElements) {
-            debug('Skipping undefined placeholder %s', placeholderName);
-            return;
-        }
-
-        for (let i in pageElements) {
-            if (values[i] != undefined) {
-                debug('Slide #%d: setting %s[%d] to %s', this.slide.index, placeholderName, i, values[i].rawText);
-                let id = pageElements[i].objectId;
-                this.appendInsertTextRequests(values[i], { objectId: id }, requests);
+        if (typeof placeholder === 'string') {
+            const pageElements = findPlaceholder(this.presentation, this.slide.objectId, placeholder);
+            if (!pageElements) {
+                debug('Skipping undefined placeholder %s', placeholder);
+                return;
             }
+            placeholder = pageElements[0];
         }
+
+        this.appendInsertTextRequests(value, { objectId: placeholder.objectId }, requests);
     }
 
     protected appendInsertTextRequests(text: TextDefinition, locationProps, requests: SlidesV1.Schema$Request[]): void {
@@ -215,7 +210,7 @@ export default class GenericLayout {
         });
     }
 
-    protected appendCreateImageRequests(images, requests: SlidesV1.Schema$Request[]): void {
+    protected appendCreateImageRequests(images, placeholder, requests: SlidesV1.Schema$Request[]): void {
         // TODO - Fix weird cast
         const layer = (Layout as (s: string) => Layout.PackingSmith)('left-right'); // TODO - Configurable?
         for (let image of images) {
@@ -227,7 +222,7 @@ export default class GenericLayout {
             });
         }
 
-        const box = this.getBodyBoundingBox(false);
+        const box = this.getBodyBoundingBox(placeholder);
         const computedLayout = layer.export();
 
         let scaleRatio = Math.min(box.width / computedLayout.width, box.height / computedLayout.height);
@@ -277,15 +272,19 @@ export default class GenericLayout {
         }
     }
 
-    protected appendCreateVideoRequests(videos: VideoDefinition[], requests: SlidesV1.Schema$Request[]): void {
+    protected appendCreateVideoRequests(
+        videos: VideoDefinition[],
+        placeholder,
+        requests: SlidesV1.Schema$Request[],
+    ): void {
         if (videos.length > 1) {
             throw new Error('Multiple videos per slide are not supported.');
         }
         const video = videos[0];
 
         debug('Slide #%d: adding video %s', this.slide.index, video.id);
 
-        const box = this.getBodyBoundingBox(false);
+        const box = this.getBodyBoundingBox(placeholder);
 
         const scaleRatio = Math.min(box.width / video.width, box.height / video.height);
 
@@ -389,10 +388,9 @@ export default class GenericLayout {
         };
     }
 
-    protected getBodyBoundingBox(fullScreen: boolean): BoundingBox {
-        const body = findPlaceholder(this.presentation, this.slide.objectId, 'BODY');
-        if (body && !fullScreen) {
-            return this.calculateBoundingBox(body[0]);
+    protected getBodyBoundingBox(placeholder): BoundingBox {
+        if (placeholder) {
+            return this.calculateBoundingBox(placeholder);
         }
         return {
             width: this.presentation.pageSize.width.magnitude,

src/layout/match_layout.ts

@@ -65,9 +65,7 @@ function hasTextContent(slide: SlideDefinition): boolean {
 
 // Anything which takes up the main body space
 function hasContent(slide: SlideDefinition): boolean {
-    return (
-        slide.bodies.length !== 0 || slide.tables.length !== 0 || slide.videos.length !== 0 || slide.images.length !== 0
-    );
+    return slide.bodies.length !== 0 || slide.tables.length !== 0;
 }
 
 // Define rules for picking slide layouts based on the default

src/parser/env.ts

@@ -1,4 +1,12 @@
-import { SlideDefinition, TextDefinition, StyleDefinition, TableDefinition, ListDefinition } from '../slides';
+import {
+    SlideDefinition,
+    TextDefinition,
+    StyleDefinition,
+    TableDefinition,
+    ListDefinition,
+    ImageDefinition,
+    VideoDefinition,
+} from '../slides';
 import { uuid } from '../utils';
 import extend from 'extend';
 import * as _ from 'lodash';
@@ -16,6 +24,8 @@ export class Context {
     public table?: TableDefinition;
     public list?: ListDefinition;
     public inlineHtmlContext?: object;
+    public images: ImageDefinition[] = [];
+    public videos: VideoDefinition[] = [];
 
     public constructor(css: Stylesheet) {
         this.css = css;
@@ -41,11 +51,19 @@ export class Context {
 
     public endSlide(): void {
         if (this.currentSlide) {
-            if (this.text && this.text.rawText.trim().length) {
-                this.currentSlide.bodies.push(this.text);
+            if (this.images.length || this.videos.length || (this.text && this.text.rawText.trim().length)) {
+                this.currentSlide.bodies.push({
+                    text: this.text,
+                    images: this.images,
+                    videos: this.videos,
+                });
+                this.images = [];
+                this.videos = [];
             }
             this.slides.push(this.currentSlide);
         }
+        this.currentSlide = undefined;
+        this.text = undefined;
     }
 
     public startSlide(): void {
@@ -57,8 +75,6 @@ export class Context {
             backgroundImage: null,
             bodies: [],
             tables: [],
-            videos: [],
-            images: [],
             notes: null,
         };
     }