change old reports to use new juxtapose shortcode (#184)

* Change to new juxtapose system

* Remove old juxtapose shortcode

site/content/entry/citra-progress-report-2020-q2/index.md

@@ -138,7 +138,11 @@ Then, turn on the Use Custom Texture option in Graphics -> Enhancements and you
 
 The following are previews of some awesome texture pack projects by the community. They aren't finished yet, but stay tuned! You can also check out the `#mods-and-texture-packs` channel on the Citra Discord server.
 
-{{< juxtapose id="ec2bf8ba-a025-11ea-a7cb-0edaf8f81e27" >}}
+{{< single-title-imgs-compare
+    "Left: Custom Textures, Right: Original"
+    "./texturepack-post.png"
+    "./normal-post.png"
+    >}} 
 
 Click [here](https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=ec2bf8ba-a025-11ea-a7cb-0edaf8f81e27) to see a larger version of the above juxtapose.
 
@@ -153,7 +157,11 @@ Along with the change, Breadfish64 has brought in several high quality upscaling
 Seeing that some of these shaders don't work that well with Citra, he even wrote one himself, and [it works really great](https://www.youtube.com/watch?v=8epkdJ4OhQ0)!
 Try it out and see how it looks.
 
-{{< juxtapose id="5435de18-8d65-11ea-a879-0edaf8f81e27" >}}
+{{< single-title-imgs-compare
+    "Left: unfiltered, Right: ScaleForce"
+    "./unfiltered.png"
+    "./levelup.png"
+    >}} 
 
 Click [here](https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=5435de18-8d65-11ea-a879-0edaf8f81e27) to see a larger version of the above juxtapose.
 
@@ -682,3 +690,5 @@ There are always many more ways to improve, and contributions are always welcome
 If you'd like to contribute, hop in our [Discord](https://citra-emu.org/discord) or IRC (freenode #citra-dev). If you can't contribute code, consider subscribing on [Patreon](https://patreon.com/citraemu)!
 
 We are also looking for blog post writers! Reach out to us on [Discord](https://citra-emu.org/discord) if you are interested.
+
+{{< imgs-compare-include-end >}}

site/content/entry/citra-progress-report-2023-q1/index.md

@@ -92,8 +92,11 @@ Nearest Neighbour is a texture filter which is particularly effective at making
 
 All of these texture filters, including our shiny new Nearest Neighbour texture filter, can be found in `Emulation -> Configure -> Graphics -> Renderer` in Citra! (`Citra -> Preferences` on MacOS)
 
-<style>.juxtapose-35vh { display:block; margin:auto; width:100%; height:35vh; }</style>
+{{< single-title-imgs-compare
-{{< juxtapose id="cc0544e8-aba2-11ed-b5bd-6595d9b17862" class="juxtapose-35vh" >}}
+    "Left: unfiltered, Right: Nearest Neighbour"
+    "./linear.png"
+    "./nn.png"
+    >}} 
 
 ## Better Support for Picture-in-Picture Custom Layouts ([#6247](https://github.com/citra-emu/citra/pull/6247)) by [SomeDudeOnDiscord](https://github.com/SomeDudeOnDiscord)
 
@@ -412,3 +415,5 @@ If you are looking to contribute to Citra or just want to get involved with our
 Additionally, we’re still looking for writers! If you are interested in being a writer of these blog posts, please reach out to us on [Discord](https://discord.com/invite/FAXfZV9).
 
 Thank you for reading and keep your eyes peeled here, there is more to come in the future!
+
+{{< imgs-compare-include-end >}}

site/themes/citra-bs-theme/layouts/shortcodes/juxtapose.html

@@ -1,2 +0,0 @@
-<iframe src="https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid={{ .Get "id" }}"
-    {{ if .Get "class" }}class="{{ .Get "class" }}"{{ else }}style="display:block; margin:auto; width:100%; height:45vh;" {{ end }}frameborder="0"></iframe>