docs: provide previews of built-in layouts

Closes #163

CHANGELOG.md

@@ -6,6 +6,9 @@ Squib follows [semantic versioning](http://semver.org).
 Features:
 * Unit conversion supports mm (#161)
 
+Docs:
+* Provide previews of each built-in template on the docs (#163)
+
 Bugs:
 * Fresh installs of Squib were broken due to two hidden dependencies, gio2 and gobject-introspection. (#172)
 * Embedding icons in text show unicode placeholders on some OSs. This is a workaround until we get a better solution for embedding icons. See #170, #171, and #176. For that matter, see #103, #153, and #30 if you really want the whole story.

docs/_static/css/squibdocs.css

@@ -16,3 +16,8 @@ code.code_img{
 code.code_img_small{
   width: 33%;
 }
+
+.figure{
+  border: 1pt solid black;
+  box-shadow: 5px 5px 8px #333;
+}

docs/layouts.rst

@@ -227,6 +227,61 @@ If your layout file is not found in the current directory, Squib will search for
 
 Contributions in this area are particularly welcome!!
 
+The following depictions of the layouts are generated with `this script <https://github.com/andymeneely/squib/tree/master/samples/layouts/builtin_layouts.rb>`_
+
+fantasy.yml
+~~~~~~~~~~~
+
+.. raw:: html
+
+  <img src="../layouts/expected_layouts_builtin_fantasy_00.png"
+    class="figure" width=350>
+
+https://github.com/andymeneely/squib/tree/master/lib/squib/layouts/fantasy.yml
+
+economy.yml
+~~~~~~~~~~~
+
+.. raw:: html
+
+  <img src="../layouts/expected_layouts_builtin_economy_00.png"
+    class="figure" width=350>
+
+https://github.com/andymeneely/squib/tree/master/lib/squib/layouts/economy.yml
+
+tuck_box.yml
+~~~~~~~~~~~
+
+Based on TheGameCrafter's template.
+
+.. raw:: html
+
+  <img src="../layouts/expected_layouts_builtin_tuck_box_00.png"
+    class="figure" width=450>
+
+https://github.com/andymeneely/squib/tree/master/lib/squib/layouts/tuck_box.yml
+
+
+hand.yml
+~~~~~~~~~~~
+
+.. raw:: html
+
+  <img src="../layouts/expected_layouts_builtin_hand_00.png"
+    class="figure" width=350>
+
+https://github.com/andymeneely/squib/tree/master/lib/squib/layouts/hand.yml
+
+playing_card.yml
+~~~~~~~~~~~
+
+.. raw:: html
+
+  <img src="../layouts/expected_layouts_builtin_playing_card_00.png"
+    class="figure" width=350>
+
+https://github.com/andymeneely/squib/tree/master/lib/squib/layouts/playing_card.yml
+
 See Layouts in Action
 ---------------------
 

samples/layouts/_output/.gitignore

@@ -0,0 +1,2 @@
+# Ignore outputs in directory, but keep the directory to suppress warning
+*.png

samples/layouts/builtin_layouts.rb

@@ -42,10 +42,33 @@ Squib::Deck.new(layout: 'economy.yml') do
   save_png prefix: 'layouts_builtin_economy_'
 end
 
-# Stitch together a deck of all the above examples
-Squib::Deck.new(cards: 2) do
-  Dir.glob('_output/layouts_builtin_*.png').each.with_index do |file, i|
-    png file: file, range: i
+Squib::Deck.new(layout: 'hand.yml') do
+  background color: 'white'
+  %w(title bonus1 bonus2 bonus3 bonus4 bonus5 description
+     snark art).each do |icon|
+    text str: icon.capitalize, layout: icon,
+         hint: :red, valign: 'middle', align: 'center'
   end
-  save_sheet prefix: 'layouts_builtinsheet_'
+  save_png prefix: 'layouts_builtin_hand_'
+end
+
+Squib::Deck.new(layout: 'playing-card.yml') do
+  background color: 'white'
+  text str: "A\u2660", layout: :bonus_ul, font: 'Sans bold 100', hint: :red
+  text str: "A\u2660", layout: :bonus_lr, font: 'Sans bold 100', hint: :red
+  text str: 'artwork here', layout: :art, hint: :red
+  save_png prefix: 'layouts_builtin_playing_card_'
+end
+
+Squib::Deck.new(layout: 'tuck_box.yml', width: 2325, height: 1950) do
+  background color: 'white'
+  rect layout: :top_rect
+  rect layout: :bottom_rect
+  rect layout: :right_rect
+  rect layout: :left_rect
+  rect layout: :back_rect
+  rect layout: :front_rect
+  curve layout: :front_curve
+
+  save_png prefix: 'layouts_builtin_tuck_box_'
 end

samples/layouts/layouts.rb

@@ -57,7 +57,6 @@ Squib::Deck.new(layout: 'hand.yml') do
     text str: icon.capitalize, layout: icon,
          hint: :red, valign: 'middle', align: 'center'
   end
-  png file: 'pokercard.png', alpha: 0.5
   save_png prefix: 'layout_builtin_hand_'
 end
 

samples/layouts/spanner.svg

@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 128 128"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.3.1 r9886"
+   width="100%"
+   height="100%"
+   sodipodi:docname="spanner.svg">
+  <metadata
+     id="metadata18">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1280"
+     inkscape:window-height="1002"
+     id="namedview14"
+     showgrid="false"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="98.928938"
+     inkscape:cy="62.194589"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g3767"
+     inkscape:document-units="in"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true" />
+  <g
+     id="g3767"
+     transform="matrix(0.24961486,0,0,0.24961486,0.197194,96.049335)">
+    <rect
+       ry="67.108368"
+       y="-378.68747"
+       x="5.3126979"
+       height="501.3746"
+       width="501.3746"
+       id="backdrop"
+       style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:10.62539577;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       inkscape:label="#rect3765" />
+    <path
+       style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       d="M 36.267098,-7.709219 C 16.393265,5.1318032 3.2161811,27.462365 3.2161811,52.884128 c 0,39.825874 32.2852369,72.111092 72.1110909,72.111092 23.870397,0 44.964938,-11.67699 58.089488,-29.545518 -11.26063,7.275808 -24.65607,11.517748 -39.060173,11.517748 -39.825853,0 -72.11109,-32.285221 -72.11109,-72.111095 0,-15.95546 5.248882,-30.6218942 14.021601,-42.565574 z"
+       id="path3790"
+       inkscape:connector-curvature="0" />
+    <g
+       id="g6"
+       transform="matrix(18.68858,0,0,18.68858,-3385.6437,-2608.3849)">
+      <path
+         style="fill:#ffffff"
+         inkscape:connector-curvature="0"
+         id="path8"
+         d="m 192.2325,129.3203 -10,10 v 5.5625 h 5.375 l 10.0938,-10.0938 -5.4688,-5.4688 z" />
+      <path
+         style="fill:#ffffff;stroke:#000000"
+         inkscape:connector-curvature="0"
+         id="path10"
+         d="m 181.7796,141.8591 15.6196,-15.6178 m 3.349,3.3486 -15.8051,15.8032" />
+      <path
+         style="fill:#ffffff"
+         inkscape:connector-curvature="0"
+         id="path12"
+         d="m 201.2023,119.7104 c -2.8283,-0.73 -5.9623,-0.004 -8.1759,2.2097 -3.3293,3.3292 -3.3293,8.7358 -2e-5,12.065 3.32928,3.3292 8.7358,3.3292 12.065,0 2.216,-2.216 2.9436,-5.3452 2.2097,-8.1759 l -5.6348,5.6348 -4.8172,-1.2816 -1.2816,-4.8171 5.6348,-5.6348 z" />
+    </g>
+  </g>
+</svg>