Add shortcode for pcpartpicker list

content/setup/desktop.md

@@ -8,7 +8,7 @@ My setup is everything, I use my computer at least once a day to browse the inte
 
 Over the years, my setup has evolved from a single monitor i5 machine, to a triple monitor AMD FX-based monster of a computer.
 
-##### [Current Parts list](https://uk.pcpartpicker.com/user/TheOrangeOne/saved/7wswP6)
+{{% pcpartpicker ZhMzr7 %}}
 
 ### Next Generation
 
@@ -27,4 +27,4 @@ The first generation was the first custom build I'd ever done. When I first buil
 
 You can find the full list of parts over on the PCPartPicker link below. Unfortunately due to the lack of catalog, or bad memory on my part, not all the parts are there, but there are as many as possible.
 
-##### [Previous Parts List](https://uk.pcpartpicker.com/user/TheOrangeOne/saved/wPrZLk)
+{{% pcpartpicker zZ8pvV %}}

layouts/shortcodes/pcpartpicker.html

@@ -0,0 +1,13 @@
+{{ $id := .Get 0 }}
+{{ $data := getJSON "https://uk.pcpartpicker.com/qapi/partlist/markup/?mode=markdown&partlist=" $id }}
+
+<p>
+  <a class="btn btn-primary" data-toggle="collapse" href="#collapse{{ $id }}" aria-expanded="false" aria-controls="collapse{{ $id }}">
+    View Parts List
+  </a>
+  <div class="collapse" id="collapse{{ $id }}">
+    <div class="card card-block">
+      <p>{{ $data.content | markdownify }}</p>
+    </div>
+  </div>
+</p>

static/src/scss/style.scss

@@ -2,6 +2,9 @@ $fa-font-path: "../fonts";
 @import "node_modules/font-awesome/scss/font-awesome";
 
 @import "node_modules/bootstrap/scss/bootstrap-grid";
+@import "node_modules/bootstrap/scss/_mixins";
+@import "node_modules/bootstrap/scss/_transitions";
+@import "node_modules/bootstrap/scss/_card";
 @import "node_modules/pygments-css/github";
 
 @import "alpha.min";