Address reviews

* 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>
-{{< juxtapose id="cc0544e8-aba2-11ed-b5bd-6595d9b17862" class="juxtapose-35vh" >}}
+{{< single-title-imgs-compare
+    "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/content/entry/citra-progress-report-2023-q2/index.md

@@ -1,5 +1,5 @@
 +++
-date = "2023-07-01T05:00:00+01:00"
+date = "2023-07-18T20:00:00+01:00"
 title = "Citra Progress Report 2023 Q2"
 tags = [ "progress-report" ]
 author = "autumnburra"
@@ -82,7 +82,7 @@ What’s the point of being able to access the HOME Menu if I can’t launch my
 
 Instead of returning an empty list of tickets, we can pretend that any installed CIA has a ticket. That way the HOME Menu will discover and display games correctly.
 
-{{< mp4 src="open.mp4" >}}
+{{< mp4 src="open.mp4" title="It's just like unwrapping a gift on Christmas!" >}}
 
 Currently, only .cia (CTR Importable Archive) installed titles are detected by the HOME Menu. If you would like to try this out in Citra yourself, make sure your games are dumped as .cia files and installed into Citra via `File > Install CIA…`. Other files, such as .3ds and .cxi, still need to be launched from the Citra game list as normal.
 
@@ -91,7 +91,7 @@ Currently, only .cia (CTR Importable Archive) installed titles are detected by t
 Upon booting a 3DS for the first time, you will be met with a handy setup guide before being able to access anything else on the system. Needless to say, it’s also the first thing you will encounter when booting the HOME Menu in Citra.
 Unfortunately, it has also been riddled with issues ever since the beginning of the emulator’s life. Attempting to load the most important and well-known feature of the 3DS setup guide, the Nintendo 3DS User Agreement, would cause the emulator to freeze, thus preventing anyone from actually completing it!
 
-{{< mp4 src="eula-broken.mp4" >}}
+{{< mp4 src="eula-broken.mp4" title="Well... that isn't supposed to happen." >}}
 
 It wasn't until recently that the cause of this freeze was really understood. As it turns out, the settings app preloads the software keyboard applet for later use. When the Nintendo 3DS User Agreement is launched, it is supposed to close this preloaded applet, so that it can load the EULA applet instead.
 However, due to a combination of missing logic to provide applets with the correct ‘slot’ (Application, Library Applet, System Applet, or HOME Menu), and the command to close an applet not being implemented, the settings app was unaware that the keyboard applet remained loaded.
@@ -99,7 +99,7 @@ However, due to a combination of missing logic to provide applets with the corre
 By implementing the additional state management required for applets, the accuracy of Citra’s applet manager has been improved tremendously, bringing it closer to the real [APT](https://www.3dbrew.org/wiki/NS_and_APT_Services) behavior of the 3DS. 
 This means that the old workarounds required to get the HOME Menu to boot are no longer required! Not only that, but launching system applets now also works perfectly.
 
-{{< mp4 src="eula.mp4" >}}
+{{< mp4 src="eula.mp4" title="Now you have another EULA you can skip-I mean, thoroughly read!" >}}
 
 ### Add Config block enums documented by 3dbrew ([#6206](https://github.com/citra-emu/citra/pull/6206)) by [SachinVin](https://github.com/SachinVin)
 
@@ -129,11 +129,11 @@ Additionally, some titles (e.g. Super Mario 3D Land) can crash if you try to clo
 
 ### Fix HLE applet pre-start lifecycle ([#6362](https://github.com/citra-emu/citra/pull/6362)) by [Steveice10](https://github.com/Steveice10)
 
-After the afformentioned APT improvements had been merged we started receiving reports of certain games like Bravely Second: End Layer [crashing](https://github.com/citra-emu/citra/issues/6361). This game, as well as others, crashed when the Mii selection dialog was activated. In the absence of system files, Citra will use an open source replacement for Miis. After setting up the HOME menu though, there's no need to use the replacement and the native 3DS selection will be shown. Any Miis you create through Mii Maker will be available in the games you play! However, none of that would be relevant, if the native selection always crashed, right? So, Steveice10 investigated the issue and discovered that the now more accurate applet handling had exposed further inaccuracies. More specifically, problems arose when CancelLibraryApplet was called on an applet that hadn't started yet, as it would fail to receive the cancellation message and de-register itself.
+After the aformentioned APT improvements had been merged, we started receiving reports of certain games, such as Bravely Second: End Layer, [crashing](https://github.com/citra-emu/citra/issues/6361). This game, as well as others, crashed when the Mii selection dialog was activated. In the absence of system files, Citra will use an open source replacement for Miis. But, after setting up the HOME menu, there's no need to use the replacement and the native 3DS selection will be shown instead. Any Miis you create through Mii Maker will be available in the games you play! However, none of that would be relevant, if the native selection always crashed, right? So, Steveice10 investigated the issue and discovered that the now more accurate applet handling had exposed further inaccuracies. More specifically, problems arose when CancelLibraryApplet was called on an applet that hadn't started yet, as it would fail to receive the cancellation message and de-register itself.
 
 "What's the fix?" you might ask. Firstly, Steveice ensured that the applet update event starts immediately on creation. Then he implemented a distinction between running and active applets to determine what the update event should do each cycle. This fixed the crashing issues, not only in Bravely Second, but in Super Mario 3D Land as well. Enjoy selecting your Miis!
 
-{{< mp4 src="mii.mp4" >}}
+{{< mp4 src="mii.mp4" title="Wow! An actual Mii selector!" >}}
 
 ### Add stub for ns:c service ([#6409](https://github.com/citra-emu/citra/pull/6409)) by [Steveice10](https://github.com/Steveice10)
 
@@ -409,7 +409,7 @@ Due to the large amount of changes introduced by the previous PR, it was natural
     "digimonbroke.png=Where are you little monster?"
     "digimonfix.png=Oh, here!" >}}
 
-Next, let's talk about Disney. Not the company, but a pretty obscure game they made for the Nintendo 3DS called Disney Art Academy, where you get to draw Mickey Mouse and his friends using the touchscreen and stylus. Given the nature of the mechanics of the game, where the use of the touchscreen and stylus is centralized, not many people choose to emulate this title. So we were surprised when a bug report came in, stating that the game had become completely broken after the first refactor.
+Next, let's talk about Disney. Not the company, but a pretty obscure game they made for the Nintendo 3DS called Disney Art Academy, where you get to draw Mickey Mouse and his friends using the touchscreen and stylus. Given that the core gameplay mechanics require use of the touchscreen and stylus, not many people choose to emulate this title. So we were surprised when a bug report came in, stating that the game had become completely broken after the first refactor.
 
 {{< figure src="disneybroke.png"
     title="This will haunt our dreams..." >}}
@@ -428,7 +428,11 @@ MMPX is a texture filter centered around the preservation of those classic pixel
 
 This new texture filter can be enabled in `Emulation -> Configure -> Graphics -> Renderer` (`Citra -> Preferences` on macOS).
 
-{{< juxtapose id="e103936e-1122-11ee-b5bd-6595d9b17862" >}}
+{{< single-title-imgs-compare
+    "Left: unfiltered, Right: MMPX"
+    "./none.png"
+    "./mmpx.png"
+    >}} 
 
 # Audio
 
@@ -547,4 +551,6 @@ If you want to support this project, we have a [Patreon](https://www.patreon.com
 
 If you are looking to contribute to Citra or just want to get involved with our community, you can find us on our [Discord server](https://discord.com/invite/FAXfZV9) or on our IRC channel (#citra @ [Libera.Chat](https://libera.chat/)). 
 
-To those of you who made it to the end, thanks for reading! We have many more exciting things to tell you all about in the future, so stay tuned!
+To those of you who made it to the end, thanks for reading! We have many more exciting things to tell you all about in the future, so stay tuned!
+
+{{< imgs-compare-include-end >}}

site/content/help/feature/custom-textures/index.md

@@ -3,18 +3,54 @@ title = "Custom Textures"
 description = "Custom texture features for displaying custom graphics packs."
 +++
 
-Citra has the ability to dump game textures and load custom texture packs. Currently, only **`.PNG`** files are supported, but it is expected that more formats will come in the future.
+Citra has the ability to dump game textures and load custom texture packs. Game textures will be dumped as **`.png`** files. Texture packs may contain either **`.png`**, **`.dds`** or **`.ktx`** files. Supported compression formats include **`BCn`** and the various **`ASTC`** block variations.
 
 ## Instructions for dumping textures
 
 * Open `Emulation > Configure...` in Citra's menu and go to `Graphics > Enhancements`.
 * Enable **`Dump textures`** and click **`OK`**.
-* Now open a game of your choice, and start playing. As you keep playing, the textures used by the game will be dumped as **`.PNG`** files.
+* Now open a game of your choice, and start playing. As you keep playing, the textures used by the game will be dumped as **`.png`** files.
   - Right-click on your game in the games list and select **`Open Texture Dump Location`** to open the dump folder.
+  - The dump folder will contain a template **`pack.json`** file, that is used for configuration options. This file **must** be copied in the load folder.
 
 ## Instructions for replacing textures
 
 * Right-click on your game in the games list and select **`Open Custom Texture Location`** to open the folder where custom textures will be loaded from.
-* Place your custom texture **`.PNG`** files in the folder.
+* Place your custom texture **`.png`** files in the folder.
 * In `Emulation > Configure... > Graphics > Enhancements`, enable **`Use Custom Textures`** and click **`OK`**.
   - Additionally, if you want your custom textures to be pre-loaded to RAM, enable **`Preload Custom Textures`** as well. This will help improve the performance but will also increase memory usage.
+
+## Texture dumping
+
+Citra will dump textures when they are used by the game and uploaded from the guest VRAM to the host memory. Dumped textures may only have power-of-two dimensions in order to avoid dumping host framebuffers.
+
+The texture dumper will write a template **`pack.json`** file in the dump directory, which should be copied in the `load` folder when testing the texture pack. By default, textures will be dumped using the new hashing method. If a texture pack exists in the load folder, the dumper will use the same hashing method as that pack. Regardless of the hashing method, packs should still load correctly on any recent build of Citra. For any concerns regarding pack compatibility, possible breakages or feature requests please contact us either on [GitHub](https://github.com/citra-emu/citra/issues/) or on our [Discord server](https://citra-emu.org/discord/), as this is still a very new feature.
+
+The filename of dumped textures is comprised of various information about the guest texture. For example, the filename **"tex1_256x256_543624189C94B105_12_mip0.png"** includes the guest texture dimensions **256x256**, the texture hash **543624189C94B105**, the guest pixel format **12** and the mipmap level of the texture **mip0**
+
+## Pack configuration
+
+The custom textures rework introduced a new json configuration file for texture packs, which is used to distinguish between old and new packs. It contains information about the pack such as name, author, as well as other configuration options like the used hash format, automatic mipmap generation and control for texture flipping. The latter two options are **unsupported** when compressed texture formats are used.
+
+The new hashing option is recommended for new texture packs and is enabled by default. Advantages include faster hashing, as it requires less input data compared to the old hash and better compatibility between graphics APIs. In order to maintain compatibility with existing packs, loading the older hashing format is still fully supported. Usage of the old hash occurs either when the pack.json file does not exist in the texture pack load folder, or the **`use_new_hash`** option is disabled.
+
+The configuration file also allows for hash mappings, which means textures can have arbitrary filenames that don't strictly adhere to the dumper naming guidelines. For example:
+
+```
+"textures" : {
+  "114BFC385ED72F15" : "logo.png"
+  "22B8C43233F640AE" : "sky.png"
+}
+```
+
+## Normal maps
+
+The new custom texture system supports custom normal maps. This feature allows creators to add additional details to objects that would not be possible with only diffuse maps.
+
+Normal maps have the same filename as their diffuse counterpart, with an added **`.norm`** prefix before the file extension. For example the normal map for dumped texture **texture.png** will be named **texture.norm.png**. This applies for all supported file types and for hash mappings.
+
+There are limitations to when custom normal maps may be used. Most notably, the scene must enable fragment lighting. In the absence of lighting normal maps will **not** function and show the following error in the log:
+
+```
+[  24.086113] Render.OpenGL <Warning> video_core\renderer_opengl\gl_rasterizer.cpp:OpenGL::RasterizerOpenGL::BindMaterial:598: Custom normal map used but scene has no light enabled
+```

site/themes/citra-bs-theme/layouts/shortcodes/imgs-compare-include-end.html

@@ -0,0 +1,2 @@
+<script src="https://cdn.jsdelivr.net/npm/juxtaposejs@1.1.6/build/js/juxtapose.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/juxtaposejs@1.1.6/build/css/juxtapose.css">

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>

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

@@ -4,12 +4,12 @@
          <source src="{{ .Get "src" }}" type="video/mp4">
          Your browser doesn't support mp4 video. :(
       </video>
-      {{ with .Get "title" }}
-      <figcaption>
-         <h4>
-            {{ . }}
-         </h4>
-      </figcaption>
-      {{ end }}
    </div>
+   {{ with .Get "title" }}
+   <figcaption>
+      <h4>
+         {{ . }}
+      </h4>
+   </figcaption>
+   {{ end }}
 </figure>

site/themes/citra-bs-theme/layouts/shortcodes/single-title-imgs-compare.html

@@ -0,0 +1,30 @@
+{{ $title := .Get 0 }}
+{{ $originals := (.Page.Resources.ByType "image") }}
+<div class="columns is-bottom-marginless">
+    <div class="column is-bottom-paddingless juxtapose">
+    {{ range $param := last 2 .Params }}
+    <!-- image -->
+    {{ $items := split $param "|" }}
+    {{ $src := (index $items 0) }}
+    {{ $subtitle := (index $items 1) }}
+    {{ $split_src := split $src "." }}
+    {{ $extension := index $split_src (sub (len $split_src) 1) }}
+        {{- if eq $extension "png" -}}
+        {{ $original := $originals.GetMatch (printf "*%s" (path.Base $src)) }}
+        {{ $resized_width := math.Min $original.Width 1024 }}
+        {{ $resized := $original.Resize (print $resized_width "x q90 jpg" ) }}
+        <img src="{{ $resized.Permalink }}" alt="{{ $title }}">
+        {{- else -}}
+        <img src="{{ $src }}" alt="{{ $title }}">
+        {{- end -}}
+    {{ end }}
+    </div>
+</div>
+
+{{ with "title" }}
+<figcaption>
+    <h4 style="text-align: center">
+        {{ $title }}
+    </h4>
+</figcaption>
+{{ end }}