(favicon) Add favicons to the matchograms

code/services-application/search-service/resources/jte/serp/part/footerHowto.jte

@@ -26,15 +26,15 @@
             It operates a bit like a clock, starting at the top and working its way around clockwise.</p>
 
         <div class="flex gap-4 place-items-middle">
-            @template.serp.part.matchogram(mask = 90)
+            @template.serp.part.matchogram(mask = 90, domain = "example.com")
             <div>This is by the beginning</div>
         </div>
         <div class="flex gap-4 place-items-middle">
-            @template.serp.part.matchogram(mask = 90L<<26)
+            @template.serp.part.matchogram(mask = 90L<<26, domain = "example.com")
             <div>This is in the middle</div>
         </div>
         <div class="flex gap-4 place-items-middle">
-            @template.serp.part.matchogram(mask = 5L<<48)
+            @template.serp.part.matchogram(mask = 5L<<48, domain = "example.com")
             <div>This is toward the end</div>
         </div>
 

code/services-application/search-service/resources/jte/serp/part/matchogram.jte

@@ -1,11 +1,13 @@
 @import java.util.stream.IntStream
 
 @param long mask
+@param String domain
 
-<svg width="40" height="40">
+<svg width="40" height="40"
+     style="background-image: url('/site/${domain}/favicon'); background-repeat: no-repeat; background-size: 16px 16px; background-position: center; ">
     <circle
-            cx="18"
-            cy="18"
+            cx="20"
+            cy="20"
             r="16"
             fill="none"
             stroke="#eee"
@@ -13,10 +15,10 @@
     />
 @for (int bit : IntStream.range(0, 56).filter(bit -> (mask & (1L << bit)) != 0).toArray())
             <line
-                    x1="${18 + 15*Math.sin(2 * Math.PI * bit / 56.)}"
-                    y1="${18 - 15*Math.cos(2 * Math.PI * bit / 56.)}"
-                    x2="${18 + 17*Math.sin(2 * Math.PI * bit / 56.)}"
-                    y2="${18 - 17*Math.cos(2 * Math.PI * bit / 56.)}"
+                    x1="${20 + 15*Math.sin(2 * Math.PI * bit / 56.)}"
+                    y1="${20 - 15*Math.cos(2 * Math.PI * bit / 56.)}"
+                    x2="${20 + 17*Math.sin(2 * Math.PI * bit / 56.)}"
+                    y2="${20 - 17*Math.cos(2 * Math.PI * bit / 56.)}"
                     stroke="#444"
                     stroke-width="2"
             />

code/services-application/search-service/resources/jte/serp/part/result.jte

@@ -12,7 +12,7 @@
             <div class="flex flex-col grow" >
                 <div class="flex flex-row space-x-2 place-items-center">
                     <div class="flex-0" title="Match density">
-                        @template.serp.part.matchogram(mask = result.first.positionsMask)
+                        @template.serp.part.matchogram(mask = result.first.positionsMask, domain=result.getFirst().url.domain.toString())
                     </div>
                     <div class="flex grow justify-between items-start">
                         <div class="flex-1">