Fix figures

trailofbits · Feb 8, 2024 · caf8ccc · caf8ccc
1 parent d70d11a
commit caf8ccc
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 43 deletions.
diff --git a/README.md b/README.md
@@ -148,7 +148,7 @@ This addon works better than pandoc.
 ### Custom enviornments
 
 ```md
-{{< customFigure "" >}}
+{{< customFigure "Caption" >}}
 {{< /customFigure >}}
 
 {{< resourceFigure "cov1.png" >}}

diff --git a/assets/_custom.scss b/assets/_custom.scss
@@ -59,39 +59,42 @@
 }
 
 figure {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   counter-increment: figureIndex;
 
-  margin-block-start: 0;
-  margin-block-end: 0;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
+  width: 100%;
 
-  border: 2px solid var(--gray-100);
+  > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
 
-  > * {
-    max-width: 95%;
-    margin-top: 5px;
-    margin-bottom: 10px;
+    margin-top: 10px;
+
+    min-width: 90%;
 
+    > * {
+      max-width: 95%;
+    }
+
   }
 
-  > *:first-child {
-    margin-top: 10px;
+  //border: 2px solid var(--gray-100);
+
+
+
 
-  }
-  > *:last-child {
-    margin-bottom: 10px;
-  }
 
   figcaption::before {
     content: "Figure " counter(figureIndex) ": ";
   }
   figcaption {
     max-width: 90%;
     margin-top: 5px;
+    margin-bottom: 10px;
 
     font-style: italic;
 

diff --git a/content/docs/fuzzing/techniques/01-writing-harnesses.md b/content/docs/fuzzing/techniques/01-writing-harnesses.md
@@ -17,7 +17,7 @@ Any fuzzer using the following harness will find the bug quickly.
 
 
 
-{{< customFigure "" "html" >}}
+
 {{< tabs "beyond" >}}
 {{< tab "C/C++" >}}
 ```C++
@@ -74,7 +74,6 @@ fuzz_target!(|data: &[u8]| {
 ```
 {{< /tab >}}
 {{< /tabs >}}
-{{< /customFigure >}}
 
 
 If we move to a more complicated C/C++ example like the following string concatenation function, then we might want to use the helper class [`FuzzedDataProvider`](https://github.com/llvm/llvm-project/blob/main/compiler-rt/include/fuzzer/FuzzedDataProvider.h). The header can be copied into a project and used as follows:
@@ -168,7 +167,6 @@ The code below defines a harness and implements a SUT that can add, subtract, mu
 To prevent the implementation from crashing, the `divide` function must check that the divisor is non-zero and that no overflow occurs during the division. Afterwards, the resulting value is printed such that the compiler does not remove the call to the arithmetic functions (i.e., `add`, `subtract`, `multiply`, and `divide`) due to compilation optimizations.
 
 
-{{< customFigure "" "html" >}}
 {{< tabs "interleaved" >}}
 {{< tab "C/C++" >}}
 ```C++
@@ -287,7 +285,6 @@ fuzz_target!(|data: &[u8]| {
 ```
 {{< /tab >}}
 {{< /tabs >}}
-{{< /customFigure >}}
 
 
 There are multiple advantages to interleaved fuzzing:

diff --git a/layouts/shortcodes/customFigure.html b/layouts/shortcodes/customFigure.html
@@ -1,11 +1,13 @@
 <figure>
-  {{ if eq (.Get 1) "html" }}
+  <div>
+    {{ if eq (.Get 1) "html" }}
     {{ .Inner |  safeHTML }}
-  {{ else }}
-    {{ .Inner | .Page.RenderString (dict "display" "inline") }}
-  {{ end}}
+    {{ else }}
+       {{ .Inner | .Page.RenderString (dict "display" "inline") }}
+    {{ end}}
 
-  {{ if (.Get 0) }}
-  <figcaption>{{ (.Get 0) | .Page.RenderString (dict "display" "inline") }}</figcaption>
-  {{ end }}
+    {{ if (.Get 0) }}
+    <figcaption>{{ (.Get 0) | .Page.RenderString (dict "display" "inline") }}</figcaption>
+    {{ end }}
+  </div>
 </figure>
diff --git a/layouts/shortcodes/resourceFigure.html b/layouts/shortcodes/resourceFigure.html
@@ -1,19 +1,21 @@
 {{ $img := $.Page.Resources.GetMatch (.Get 0)}}
 
 <figure>
-  {{ if (.Get 2) }}
+  <div>
+    {{ if (.Get 2) }}
     {{ if eq $img.MediaType.SubType "svg" }}
-     <img src="{{ $img.RelPermalink }}" alt="{{ .Get 1 }}" width={{ (.Get 2) }} />
+    <img src="{{ $img.RelPermalink }}" alt="{{ .Get 1 }}" width={{ (.Get 2) }} />
     {{else }}
-      {{ $resize := (printf "%dx webp" (.Get 2)) }}
-      {{ $width := (printf "%dpx" (.Get 2)) }}
-      {{ $resized := ($img.Resize $resize ) }}
-      <img src="{{ $resized.RelPermalink }}" alt="{{ .Get 1 }}" width={{ $width }} />
-   {{ end }}
-  {{else }}
-    <img src="{{ $img.RelPermalink }}" alt="{{ .Get 1 }}" />
-  {{ end }}
-  {{ if .Inner }}
-  <figcaption>{{ .Inner | .Page.RenderString (dict "display" "inline") }}</figcaption>
-  {{ end }}
+        {{ $resize := (printf "%dx webp" (.Get 2)) }}
+        {{ $width := (printf "%dpx" (.Get 2)) }}
+        {{ $resized := ($img.Resize $resize ) }}
+        <img src="{{ $resized.RelPermalink }}" alt="{{ .Get 1 }}" width={{ $width }} />
+    {{ end }}
+    {{else }}
+      <img src="{{ $img.RelPermalink }}" alt="{{ .Get 1 }}" />
+    {{ end }}
+    {{ if .Inner }}
+    <figcaption>{{ .Inner | .Page.RenderString (dict "display" "inline") }}</figcaption>
+    {{ end }}
+  </div>
 </figure>