Finish image includes

• Finish the image-gallery
• Add Figure-Image with a single image, which can be floated to the left
or right, or fill the entire document width
• Publish the first real blog post!

_config.yml

@@ -20,4 +20,4 @@ defaults:
       layout: post
 
 
-mobile-width: "600px"
+mobile-width: "700px"

_includes/figure-gallery.html

@@ -0,0 +1,29 @@
+<figure class="figure-gallery">
+
+{% assign rows = include.src | split: ':' %}
+{% capture path %}/images/{{page.path | split: '/' | last | split: '.' | first }}{% endcapture %}
+{% capture alt %}{{ include.caption | markdownify | strip_html }} {{ include.alt }}{% endcapture %}
+
+{% for row in rows %}
+    {% assign imgs = row | split: ' ' %}
+
+    {% if imgs.size == 1 %}
+        <div class="gallery-solo">
+    {% else %}
+        <div class="gallery-grid">
+    {% endif %}
+
+    {% for img in imgs %}
+            {% capture src %}{{ path }}/{{ img }}{% endcapture %}
+            {% include image.html src=src alt=alt %}
+    {% endfor %}
+        </div>
+{% endfor %}
+
+{% if include.caption %}
+    <figcaption>
+        {{ include.caption | markdownify | remove: '<p>' | remove: '</p>' }}
+    </figcaption>
+{% endif %}
+
+</figure>

_includes/figure-image.html

@@ -1,25 +1,14 @@
-<figure
-    {% if include.float %}
-        style="float: {{include.float}};"
-    {% else %}
-        style="float: none; width:100%"
-    {% endif %}>
+{% if include.float %}
+<figure class="figure-float" style="float:{{ include.float }};">
+{% else %}
+<figure class="figure-image">
+{% endif %}
 
-{% assign srcs = include.src | split: ' ' %}
 {% capture path %}/images/{{page.path | split: '/' | last | split: '.' | first }}{% endcapture %}
+{% capture alt %}{{ include.caption | markdownify | strip_html }} {{ include.alt }}{% endcapture %}
 
-    <div class="figure-contents">
-{% for src in srcs %}
-    {% capture img %} {{path}}/{{src}} {% endcapture %}
-        <a href="{{ img | remove: "-small" }}"> <img
-            src="{{ img }}"
-        {% if include.caption %}
-            alt="{{ include.caption | markdownify | strip_html }}"
-        {% else %}
-            alt="{{ include.alt }}"
-        {% endif %}> </a>
-{% endfor %}
-    </div>
+{% capture src %}{{ path }}/{{ include.src }}{% endcapture %}
+{% include image.html src=src alt=alt %}
 
 {% if include.caption %}
     <figcaption>

_includes/image.html

@@ -0,0 +1,4 @@
+<a href="{{ include.src | remove: "-small" }}"> <img
+    src="{{ include.src}}"
+    alt="{{ include.alt }}">
+</a>

_posts/2017-11-13-Apple-Mouse.md

@@ -1,6 +1,10 @@
 ---
 title: Hacking a 1986 computer mouse into the 21st century
 ---
+{% include figure-image.html
+    src="atkinson.png"
+    alt="Finished product" %}
+
 
 While looking through a pile of computer hardware I found an original Apple ADB mouse, the one that shipped with the Apple II<span style="font-variant: small-caps;">gs</span> and several models of mac. It’s an extremely simple piece of hardware, with only a single button on top and a mechanical ball on the bottom. Interestingly, the cable on the mouse is very short, since it was designed to be daisy-chained with an ADB keyboard.
 My idea was to transplant the internals from a cheap bluetooth mouse (one I have kept in my backpack for use at school) into the ADB mouse, making it into something I could use daily. I needed to add several things to the hardware:
@@ -13,18 +17,48 @@ My idea was to transplant the internals from a cheap bluetooth mouse (one I have
 ## Day 1: The Mouse Buttons
 The first step was to split the existing single button into two. After grinding off the plastic welding on the pins holding the button in, I used a hacksaw guided by a block of wood to saw the button in half all the way down to the center part of the hinge. After sanding I think the cut looked pretty good! Something like a laser, or a better suited saw would probably have gotten a cleaner cut, but I was happy with this
 
-{% include figure-image.html src="img-2-small.jpg img-3-small.jpg img-4-small.jpg img-5-small.jpg" caption="the _mouse_ case" %}
+{% include figure-gallery.html
+    src="img-2-small.jpg img-3-small.jpg img-4-small.jpg img-5-small.jpg"
+    caption="the mouse case" %}
 
 ## Day 2: The Board
-Since i wanted the optical sensor to peer through where the ball went, I needed it to be centered, but the bluetooth mouse’s board was slightly too wide to do this. Luckily the only thing on that part was the right mouse button, which I had to move anyways, and the connector for the batteries, which i was already replacing with a Lithium battery.
+
+{% include figure-image.html
+    src="img-6-small.jpg"
+    float="right"
+    caption="The Board needed to be cut down" %}
+
+{% include figure-image.html
+    src="img-11-small.jpg"
+    float="right"
+    caption="Bluetooth mouse board and lens assembly" %}
+
+
+Since I wanted the optical sensor to peer through where the ball went, I needed it to be centered, but the bluetooth mouse’s board was slightly too wide to do this. Luckily the only thing on that part was the right mouse button, which I had to move anyways, and the connector for the batteries, which I was already replacing with a Lithium battery.
+
+
 I unfortunately had to scrape away some of the solder mask from the underside of the board to solder on a wire for the power connection, since all the plated holes were on the cutoff part (I couldn’t trace it to any of the pins on the sensor, I suspect there was some voltage conversioning happening). I also had to solder a piece of 30AWG wire directly to the surface mounted bluetooth module for right click, since that trace went all the way around the outside edge of the board.
 
 I also cut down the plastic lens to fit inside the ball door of the original mouse. miraculously the distance between the sensor and the desk was exactly the same as the thickness of the ball hatch.
 
 ## Day 3: Assembly
+
+{% include figure-image.html
+    src="img-15-small.jpg"
+    float="left"
+    caption="electrical assembly" %}
+
 The final major component of the mouse were the left and right click buttons. I used some strip-board cut into a C-shape to accommodate the charging port in the center, which had its middle pin (shorted to ground while disconnected) soldered to it for mechanical support. This was connected to the 5V input on the [charging module](https://www.adafruit.com/product/1904), as well as to the button and common pins of the logic board. Once I had cleaned up the wiring I had a somewhat useful bluetooth mouse (only clicking required pressing the microswitches directly)
 
 Next came the part of the project I was putting off: the scroll wheel. there isnt enough room for the scroll wheel to go between the click buttons, both vertically due to the charge port placement and because the buttons were small enough already. I decided to cut a slot in the side for a mouse wheel to fit that would be operated with the thumb, with a separate button for the middle mouse click (I decided the mechanism for a clicking scroll wheel was too complicated. I also cut a hole for the status LED and a power switch, which I had accidentally neglected before
 
+{% include figure-gallery.html
+    src="img-16-small.jpg img-17-small.jpg"
+    alt="Putting the pieces together" %}
+
 After this, I did the final assembly by glueing each part in using hot glue, since hot glue can easily be removed by peeling it off or heating with a soldering iron if necessary. I needed to shim the mouse buttons with a bit of wood so they would hit the microswitches correctly (I’ll likely print some nicer looking shims later).
 I think the final result looks pretty good, and the modifications don’t look to out of place compared to the original apple hardware. If I were to repeat the project I think I would have taken greater care with cutting the case, and perhaps found a way to make a scroll wheel that matches the shade of beige used at the time. The plastic is yellowed, but I think I like it like that, it adds a bit of authenticity.
+
+{% include figure-gallery.html
+    src="img-19-small.jpg img-20-small.jpg : img-18-small.jpg"
+    alt="The Finished Product" %}

css/style.scss

@@ -142,6 +142,7 @@ p {
 }
 
 h1,h2,h3 {
+    clear: both;
     margin: {
         top: 0px;
         bottom: 10px;
@@ -159,38 +160,74 @@ small {
     font-size: 0.8em;
 }
 
-figure {
+.figure-gallery {
     margin: 0;
 
+    .gallery-grid {
+        margin-left: -20px;
+        margin-right: -20px;
+        line-height: 0;
 
-    .figure-contents {
         display: flex;
         flex-flow: row wrap;
         justify-content: center;
+
+        img {
+            width: auto;
+            margin: 3px;
+            height: 220px;
+
+        }
+
+        @media screen and (max-width: 500px) {
+            margin-left: -20px;
+
+            img {
+                height: 160px
+            }
+        }
+
     }
 
-    a {
-        padding: 3px;
+    .gallery-solo {
         margin: 0;
-        height: 100%;
-        width: auto;
-        flex-basis: auto;
-        flex-shrink: 1;
-
-    }
-
-    img {
-        margin: auto;
-        max-height: 240px;
-        min-height: 100px;
-    }
-
-    figcaption {
-        text-align: center;
+        line-height: 0;
 
+        img {
+            height: auto;
+            width: 100%;
+            margin: 3px auto;
+        }
     }
 }
 
+.figure-image {
+    width: 100%;
+    margin: 0;
+    margin-bottom: 20px;
+
+    img {
+        width: 100%;
+        height: auto;
+    }
+}
+
+.figure-float {
+    width: 50%;
+    margin: 10px;
+
+    img {
+        width: 100%;
+        height: auto;
+    }
+}
+
+figcaption {
+    text-align: center;
+
+}
+
+
 
 // narrow screens override
 @media screen and (max-width: $mobile-width) {