Website: document 3rd party job type compatibility

All 3rd party job types should get a box with the versions of Flamenco and
Blender they are compatible / tested with.

web/project-website/content/third-party-jobs/compositor-script.md

@@ -3,18 +3,13 @@ title: Compositor Nodes
 weight: 10
 ---
 
-*Job type documented and maintained by: [Dylan Blanqué][author]. Please report any issues at [the script's Github project][github].*
+{{< flamenco/thirdPartyCompatibility blender="v4.0" flamenco="v3.5" >}}
+Documented and maintained by [Dylan Blanqué][author].
+Please report any issues at [the script's Github][github].
 
 [author]: https://projects.blender.org/Dylan-Blanque
 [github]: https://github.com/dblanque/flamenco-compositor-script/issues
-
-{{< hint >}}
-
-This is a community-made job type. It may not reflect the same design as the
-rest of Flamenco, as it was made for a specific person to solve a specific need.
-
-{{< /hint >}}
-
+{{< /flamenco/thirdPartyCompatibility >}}
 
 This job type updates Blender's compositor nodes to work with Flamenco.
 

web/project-website/layouts/shortcodes/flamenco/thirdPartyCompatibility.html

@@ -0,0 +1,39 @@
+{{/*
+This is an adjusted copy of themes/hugo-geekdoc/layouts/shortcodes/hint.html
+
+- Add a CSS class.
+- Different the default title.
+*/}}
+{{ $type := default "note" (.Get "type") }}
+{{ $icon := .Get "icon" }}
+{{ $title := default "Compatibility Information" (.Get "title") }}
+
+{{ $blender := default "unknown" (.Get "blender" ) }}
+{{ $flamenco := default "unknown" (.Get "flamenco" ) }}
+
+<blockquote class="gdoc-hint {{ $type | lower }} compatibility-box">
+  <div class="gdoc-hint__title flex align-center">
+    {{- with $icon -}}
+    <svg class="gdoc-icon {{ . }}">
+      <use xlink:href="#{{ . }}"></use>
+    </svg>
+    <span>{{ $title }}</span>
+    {{- else -}}
+    <i class="fa {{ $type | lower }}" title="{{ $title }}"></i>
+    {{- end -}}
+  </div>
+  <div class="gdoc-hint__text">
+    <div class="infobox">
+      <dl class="versions">
+        <dt>Blender</dt>
+        <dd>{{ $blender }}</dd>
+        <dt>Flamenco</dt>
+        <dd>{{ $flamenco }}</dd>
+      </dl>
+      <p class="disclaimer">This is a community-made job type. It may not reflect the same design as the
+        rest of Flamenco, as it was made for a specific person to solve a specific need.</p>
+    </div>
+
+    {{ .Inner | $.Page.RenderString }}
+  </div>
+</blockquote>

web/project-website/static/custom.css

@@ -208,3 +208,38 @@ article p {
 table tbody td {
   vertical-align: top;
 }
+
+/* 3rd party job types compatibility notes. */
+.compatibility-box .infobox {
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+}
+.compatibility-box p.disclaimer {
+  font-style: italic;
+  flex-basis: 70%;
+  text-align: justify;
+}
+.compatibility-box .infobox dl, .compatibility-box .infobox p.disclaimer {
+  margin: 0.6ex;
+}
+.compatibility-box dl {
+  flex-basis: 20%;
+  display: flex;
+  flex-flow: row wrap;
+}
+.compatibility-box dl dt {
+  margin: 0;
+  flex-basis: 66%;
+  padding: 0.2em 0.4em;
+  text-align: right;
+}
+.compatibility-box dl dt::after {
+  content: ":";
+}
+.compatibility-box dl dd {
+  flex-basis: 33%;
+  flex-grow: 1;
+  margin: 0;
+  padding: 0.2em 0.4em;
+}