Add example thumbnails to README (#116)

mrombout · Apr 20, 2024 · 92a16f6 · 92a16f6
1 parent bd6b1ad
commit 92a16f6
Show file tree

Hide file tree

Showing 14 changed files with 173 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -16,3 +16,130 @@ asciihero document.adoc
 ```
 
 For more thorough documentation, see the [documentation](https://mrombout.github.io/asciihero).
+
+# Examples
+
+<table width="100%">
+    <tr align="center">
+        <td width="25%">
+            <a href="./examples/attributes/attributes.pdf">
+                <img src="./examples/attributes/attributes.png" />
+            </a>
+        </td>
+        <td width="25%">
+            <a href="./examples/dice_footer/dice_footer.pdf">
+                <img src="./examples/dice_footer/dice_footer.png" />
+            </a>
+        </td>
+        <td width="25%">
+            <a href="./examples/dice_table/dice_table.pdf">
+                <img src="./examples/dice_table/dice_table.png" />
+            </a>
+        </td>
+        <td width="25%">
+            <a href="./examples/images/images.pdf">
+                <img src="./examples/images/images.png" />
+            </a>
+        </td>
+    </tr>
+    <tr align="center">
+        <td width="25%">
+            Attributes<br />
+            <a href="./examples/attributes/attributes.adoc"> Source </a> / 
+            <a href="./examples/attributes/attributes.pdf"> PDF </a>
+        </td>
+        <td width="25%">
+            Dice Footer<br />
+            <a href="./examples/dice_footer/dice_footer.adoc"> Source </a> / 
+            <a href="./examples/dice_footer/dice_footer.pdf"> PDF </a>
+        </td>
+        <td width="25%">
+            Dice Table<br />
+            <a href="./examples/dice_table/dice_table.adoc"> Source </a> / 
+            <a href="./examples/dice_table/dice_table.pdf"> PDF </a>
+        </td>
+        <td width="25%">
+            Images<br />
+            <a href="./examples/images/images.adoc"> Source </a> / 
+            <a href="./examples/images/images.pdf"> PDF </a>
+        </td>
+    </tr>
+</table>
+
+<table width="100%">
+    <tr align="center">
+        <td width="25%">
+            <a href="./examples/input/input.pdf">
+                <img src="./examples/input/input.png" />
+            </a>
+        </td>
+        <td width="25%">
+            <a href="./examples/manual_segment_number/manual_segment_number.pdf">
+                <img src="./examples/manual_segment_number/manual_segment_number.png" />
+            </a>
+        </td>
+        <td width="25%">
+            <a href="./examples/shuffle/shuffle.pdf">
+                <img src="./examples/shuffle/shuffle.png" />
+            </a>
+        </td>
+        <td width="25%">
+            <a href="./examples/simple/simple.pdf">
+                <img src="./examples/simple/simple.png" />
+            </a>
+        </td>
+    </tr>
+    <tr align="center">
+        <td width="25%">
+            Input<br />
+            <a href="./examples/input/input.adoc"> Source </a> / 
+            <a href="./examples/input/input.pdf"> PDF </a>
+        </td>
+        <td width="25%">
+            Manual Segment Number<br />
+            <a href="./examples/manual_segment_number/manual_segment_number.adoc"> Source </a> / 
+            <a href="./examples/manual_segment_number/manual_segment_number.pdf"> PDF </a>
+        </td>
+        <td width="25%">
+            Shuffle<br />
+            <a href="./examples/shuffle/shuffle.adoc"> Source </a> / 
+            <a href="./examples/shuffle/shuffle.pdf"> PDF </a>
+        </td>
+        <td width="25%">
+            Simple<br />
+            <a href="./examples/simple/simple.adoc"> Source </a> / 
+            <a href="./examples/simple/simple.pdf"> PDF </a>
+        </td>
+    </tr>
+</table>
+
+<table width="100%">
+    <tr align="center">
+        <td width="25%">
+            <a href="./examples/stable_segments/stable_segments.pdf">
+                <img src="./examples/stable_segments/stable_segments.png" />
+            </a>
+        </td>
+        <td width="25%">
+            <a href="./examples/stylesheet/stylesheet.pdf">
+                <img src="./examples/stylesheet/stylesheet.png" />
+            </a>
+        </td>
+        <td width="25%"></td>
+        <td width="25%"></td>
+    </tr>
+    <tr align="center">
+        <td width="25%">
+            Stable Segments<br />
+            <a href="./examples/stable_segments/stable_segments.adoc"> Source </a> / 
+            <a href="./examples/stable_segments/stable_segments.pdf"> PDF </a>
+        </td>
+        <td width="25%">
+            Stylesheet<br />
+            <a href="./examples/stylesheet/stylesheet.adoc"> Source </a> / 
+            <a href="./examples/stylesheet/stylesheet.pdf"> PDF </a>
+        </td>
+        <td width="25%"></td>
+        <td width="25%"></td>
+    </tr>
+</table>
diff --git a/examples/attributes/attributes.png b/examples/attributes/attributes.png
diff --git a/examples/dice_footer/dice_footer.png b/examples/dice_footer/dice_footer.png
diff --git a/examples/dice_table/dice_table.png b/examples/dice_table/dice_table.png
diff --git a/examples/images/images.png b/examples/images/images.png
diff --git a/examples/input/input.png b/examples/input/input.png
diff --git a/examples/manual_segment_number/manual_segment_number.png b/examples/manual_segment_number/manual_segment_number.png
diff --git a/examples/shuffle/shuffle.png b/examples/shuffle/shuffle.png
diff --git a/examples/simple/simple.png b/examples/simple/simple.png
diff --git a/examples/stable_segments/stable_segments.adoc b/examples/stable_segments/stable_segments.adoc
@@ -1,4 +1,4 @@
-= Shuffle
+= Stable Segments
 :doctype: book
 :asciihero-shuffle-style: random
 :asciihero-shuffle-seed: 1

diff --git a/examples/stable_segments/stable_segments.pdf b/examples/stable_segments/stable_segments.pdf
diff --git a/examples/stable_segments/stable_segments.png b/examples/stable_segments/stable_segments.png
diff --git a/examples/stylesheet/stylesheet.png b/examples/stylesheet/stylesheet.png
diff --git a/utils/example_thumbnails.js b/utils/example_thumbnails.js
@@ -0,0 +1,45 @@
+#!/usr/bin/env node
+
+const fs = require('fs')
+const { execFileSync } = require('child_process')
+const pdf2img = require('pdf-img-convert')
+const looksSame = require('looks-same')
+const path = require('path')
+const chai = require('chai')
+const { example } = require('yargs')
+const expect = chai.expect
+
+const thumbnailPages = {
+  "attributes": [2],
+  "dice_footer": [3],
+  "dice_table": [2],
+  "images": [2],
+  "input": [3],
+  "manual_segment_number": [3],
+  "shuffle": [3],
+  "simple": [3],
+  "stable_segments": [3],
+  "stylesheet": [7],
+}
+
+const examplesDir = './examples'
+fs.readdirSync(examplesDir).forEach(async (exampleDir) => {
+  const basePath = path.join(examplesDir, exampleDir)
+  const adocFile = path.join(basePath, `${exampleDir}.adoc`)
+  const pdfFile = path.join(basePath, `${exampleDir}.pdf`)
+  const thumbnailFile = path.join(basePath, `${exampleDir}.png`)
+
+  const pdf2imgOpts = {
+    width: 620,
+    height: 877,
+    page_numbers: thumbnailPages.hasOwnProperty(exampleDir) ? thumbnailPages[exampleDir] : [2]
+  }
+  const expectedOutputImgs = await pdf2img.convert(pdfFile, pdf2imgOpts)
+  for (expectedOutputImg of expectedOutputImgs) {
+    fs.writeFile(thumbnailFile, expectedOutputImg, (error) => {
+      if (error) {
+        console.log(`Error: ${error}`)
+      }
+    })
+  }
+})