feat(website): /_includes/Palette ( Fixes #44 )

Adding Palette preview square

Author: James Brundage

_includes/Palette.ps1

@@ -59,20 +59,53 @@ if (-not $script:Cache) {
     $script:Cache = [Ordered]@{}
 }
 
+
+$paletteSquare = "
+<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>
+    $(
+        $colors = 
+            'black', 'red', 'green', 'blue', 'yellow', 'cyan', 'purple', 'white'
+
+        $colors = @($colors) + @(
+            foreach ($color in $colors) {
+                "bright$(
+                    $color.Substring(0,1).ToUpper()                    
+                )$($color.Substring(1))"
+            }
+        )
+        for ($colorNumber =0;$colorNumber -lt $colors.Count; $colorNumber++) {
+            $row = [Math]::Floor($colorNumber / 4)
+            $column = $colorNumber % 4
+            $color = $colors[$colorNumber]
+            "<path fill='transparent' class='$($color)-stroke $($color)-fill' d='$(
+                # Move to our row / column
+                "m $($column * 5) $($row * 5)"
+                # and draw a square
+                "h 6 v 6 h -6 v -6"
+            )' />"
+        } 
+    )    
+</svg>
+"
+
 $paletteSelector = @"
 <style>
+
 .palette-controls {
     display: flex;
     flex-direction: row;
     place-items: center;
     justify-items: center;
     justify-content: space-between;
 }
+
 .palette-controls * {
     height: 2rem;
 }
+
 .invisible { display: none; }
 </style>
+
 <section class='palette-controls'>
 <select id='$SelectPaletteId' onchange='SetPalette(event)'>
 $(    
@@ -86,18 +119,21 @@ $(
 </select>
 <button class='random-palette-button' command='--random-palette' id='random-palette-button' commandfor='$SelectPaletteId'>$(
     /_includes/FeatherIcon -Icon refresh-cw
+    $paletteSquare
 )</button>
-
 </section>
 <script>
 document.getElementById('$selectPaletteId').addEventListener('command', (event)=> {
     if (event.command == '--random-palette') {
-        var SelectPalette = event.target
-        var randomNumber = Math.floor(Math.random() * SelectPalette.length);
-        SelectPalette.selectedIndex = randomNumber
+        var SelectPalette = event.target        
+        var randomNumber = Math.floor(
+            Math.random() * SelectPalette.length
+        )        
+        SelectPalette.selectedIndex = randomNumber;        
         SetPalette(event)
         return
     }
+    
 })
 </script>
 "@