Merge branch 'side-images'

_posts/2022-07-06-command_line_slides.md

@@ -2,7 +2,6 @@
 title: Command Line Slides
 excerpt: |
   I made a set of interactive slides for a course on the command line, complete with command line playback!
-  <script async id="asciicast-498583" src="https://asciinema.org/a/498583.js" data-autoplay="true"></script>
 layout: post
 hide_image: true # Only use this image for static previews
 image: /assets/images/command_line_slides.png

_posts/2023-06-21-my_first_PCB.md

@@ -1,11 +1,11 @@
 ---
 title: My first PCB!
 excerpt: |
-    I've had a longstanding ambition to get a PCB manufactured but I've always put it off. Lately I had a need for a little adapter board to break out these 1.27mm spaced pins to 2.54mm pins that would fit into a breadboard. Feeling like it was a simple enough board I finally decided to fire up KiCad and give it a go.   <model-viewer alt="An interactive 3D render of a PCB with 2.54mm headers on one side to fit a breadboard and 1.27 inch headers on the other." src="/assets/blog/PCB/model/pcb.glb" ar camera-controls poster="/assets/social/pcb_1.png" interaction-prompt="none" shadow-intensity="1" shadow-softness="1" exposure="0.5" camera-orbit="196.6deg 59.73deg 0.1m" field-of-view="30deg" auto-rotate> </model-viewer>
+    I've had a longstanding ambition to get a PCB manufactured but I've always put it off. Lately I had a need for a little adapter board to break out these 1.27mm spaced pins to 2.54mm pins that would fit into a breadboard. Feeling like it was a simple enough board I finally decided to fire up KiCad and give it a go.
 layout: post
 commentid: 110810437631337327
-hide_image: true # Only use this image for static previews
-social_image: /assets/social/pcb_1.png
+image: /assets/blog/PCB/render.png
+thumbnail: /assets/social/pcb_1.png
 alt: A 3D render of a simple PCB.
 head: <script type="module" src="/assets/js/model-viewer.js"></script>
 ---

_posts/2023-06-22-tqdm_and_printing_in_notebooks.md

@@ -3,6 +3,7 @@ title: Progress bars and log output in Jupyter notebooks
 excerpt: 
 layout: post
 image: /assets/blog/progress_bars/bar.png
+thumbnail: /assets/blog/progress_bars/thumbnail.png
 alt: An image of a nice animated progress bar in a jupyter notebook output cell.
 ---
 I wanted to have just one updateable line of output that would play nicely with a tqdm progress bar. After playing around with `print(s, end="\r")` I settled on using `Ipython.display` with a handle. The problem with the print approach is that it doesn't work when the output is shorter than the previous line.

_posts/2023-07-20-writing_grammars_is_fun.md

@@ -2,21 +2,10 @@
 title: Parsing is fun!
 excerpt: |
     I came across something I wanted to quickly parse that was too niche to find a ready made parser for. Join me on a quick whip tour of writing a grammar for a PEG parser.
-    ```python
-    import pe
 
-    parser = pe.compile(
-        r'''
-        List    <- "[" String ("," Spacing String)* "]"
-        String  <- ~[a-zA-Z]+
-        Spacing <- [\t\n\f\r ]*
-        ''',
-    )
-    parser.match("[a, b, c]").groups()
-
-    >>> ('a', 'b', 'c')
-    ```
 social_image: /assets/social/parsing.png
+image: /assets/social/parsing.png
+thumbnail: /assets/blog/parsing/thumbnail.png
 alt: A screenshot of some python code showing a PEG grammar definition.
 layout: post
 commentid: 110746239432993930

_posts/2023-07-25-interactive-code-snippets.md

@@ -1,7 +1,8 @@
 ---
 title: A little REPL in every blog post
 layout: post
-image: /assets/blog/repl.png
+image: /assets/blog/REPL/repl.png
+thumbnail: /assets/blog/REPL/thumbnail.png
 alt: A screenshot of a small javascript widget that lets you evaluate python code. It's showing some numpy code and its evaluated output.
 klipse: True
 ---

_posts/2023-07-31-toothbrush-holder.md

@@ -1,12 +1,14 @@
 ---
 title: Toothbrush Shelf
 excerpt: |
-    It can be hard to find genuine everyday uses of 3D printing, but after a while you do find some. <model-viewer alt="An interactive 3D render of a small 3D printed shelf to hold a toothbrush near the bathroom shaver socket without the cables being messy" src="/assets/blog/toothbrush_shelf/model/toothbrush_shelf.glb" ar poster="/assets/blog/toothbrush_shelf/model/toothbrush_shelf.webp" camera-controls shadow-intensity="1.38" shadow-softness="2" exposure="0.8" auto-rotate camera-orbit="-35deg 78.72deg 411.2m" field-of-view="30deg" interaction-prompt="none" ar-placement="wall"> </model-viewer>
+    It can be hard to find genuine everyday uses of 3D printing, but after a while you do find some.
 layout: post
-hide_image: true # Only use this image for static previews
+hide_image: false # Only use this image for static previews
 image: /assets/blog/toothbrush_shelf/spin.gif
 alt: A render of a 3D printed shelf sitting above a shaver outlet, it spins slowly. 
 head: <script type="module" src="/assets/js/model-viewer.js"></script>
+media: |
+    <model-viewer alt="An interactive 3D render of a small 3D printed shelf to hold a toothbrush near the bathroom shaver socket without the cables being messy" src="/assets/blog/toothbrush_shelf/model/toothbrush_shelf.glb" ar poster="/assets/blog/toothbrush_shelf/model/toothbrush_shelf.webp" camera-controls shadow-intensity="1.38" shadow-softness="2" exposure="0.8" auto-rotate camera-orbit="-35deg 78.72deg 411.2m" field-of-view="30deg" interaction-prompt="none" ar-placement="wall"></model-viewer>
 ---
 
 It can be hard to find genuine everyday uses of 3D printing, but after a while you do find some! I made this little shelf to tidy up the wires to our devices in the bathroom. The wires are now hidden, coiled up, inside the shelf.

_posts/2023-08-23-weekend_builds-1.md

@@ -5,6 +5,7 @@ excerpt: |
     It's nice when a project can be done in just a few days. This is gonna be a little plant pot stand.
 
 image: /assets/blog/weekend_builds_1/stool.jpeg
+thumbnail: /assets/blog/weekend_builds_1/stool_thumbnail.jpeg
 assets: /assets/blog/weekend_builds_1/
 head: <script type="module" src="/assets/js/model-viewer.js"></script>
 ---

_posts/2023-09-13-maps-2.md

@@ -5,6 +5,7 @@ excerpt: |
     I finish my first laser etched map.
 
 image: /assets/blog/maps/after_sanding.jpeg
+thumbnail: /assets/blog/maps/after_sanding_thumbnail.jpeg
 ---
 
 A last minute leaving gift idea for a friend inspired me to finish my first actual laser cut map. I used leaflet.js to overlay the names of some places we had visited together in London onto those nice Stamen Design map tiles from before. You can see the digital version [here](/projects/tonis-map/).

_sass/blogroll.scss

@@ -1,3 +1,6 @@
+$image_size: 8em;
+$left_pad: 9em;
+
 h2.blogroll-title {
     a {
         text-decoration: none;
@@ -8,4 +11,37 @@ figure.blogroll {
     img, svg {
         margin-bottom: 0;
     }
+}
+
+article.blogroll {
+
+    h2 {margin-top: 0;}
+
+    section.title {
+        padding-left: $left_pad;
+    }
+
+    summary {padding-left: $left_pad;}
+
+    img {
+        float:left;
+        margin-right: 1em;
+        max-width: $image_size;
+        max-height: $image_size;
+        border-radius: 0.5em;
+        }
+}
+
+@media 
+    only screen and (max-width: 500px)
+    {  
+    article.blogroll {
+        summary {
+            padding-left: 0;
+        }
+        h2 {
+            font-size: 1.2em;
+        }
+    }
+
 }

blog-alt.md

@@ -0,0 +1,22 @@
+---
+title: Blog
+layout: default
+permalink: /blog-alt/
+head: <script type="module" src="/assets/js/model-viewer.js"></script>
+---
+{% for post in site.posts %}
+<article class="h-entry blogroll">
+
+<img class="u-photo" 
+    src = "{{ post.thumbnail | default: post.image }}"
+      alt="{{post.alt}}">
+
+<section class="title">
+  <h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2>
+  <time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time>
+</section>
+
+<summary class="p-summary">{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
+
+</article>
+{% endfor %}