From d3ecfcc70c8592f097cf1d8f6d74d5ea1c90844a Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Mon, 3 Jul 2017 19:59:10 +0100
Subject: [PATCH] Add shortcode for pcpartpicker list

---
 content/setup/desktop.md             |  4 ++--
 layouts/shortcodes/pcpartpicker.html | 13 +++++++++++++
 static/src/scss/style.scss           |  3 +++
 3 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 layouts/shortcodes/pcpartpicker.html

diff --git a/content/setup/desktop.md b/content/setup/desktop.md
index 9c037ec..095dda0 100644
--- a/content/setup/desktop.md
+++ b/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 %}}
diff --git a/layouts/shortcodes/pcpartpicker.html b/layouts/shortcodes/pcpartpicker.html
new file mode 100644
index 0000000..6f83693
--- /dev/null
+++ b/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>
diff --git a/static/src/scss/style.scss b/static/src/scss/style.scss
index e8d42c0..fdacfbb 100644
--- a/static/src/scss/style.scss
+++ b/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";