(search) Add proper tailwind build and host fontawesome locally

code/services-application/search-service/build.gradle

@@ -27,6 +27,7 @@ sass {
     outputStyle = EXPANDED
 }
 
+
 apply from: "$rootProject.projectDir/srcsets.gradle"
 apply from: "$rootProject.projectDir/docker.gradle"
 
@@ -87,6 +88,35 @@ dependencies {
     testImplementation project(':code:libraries:test-helpers')
 }
 
+task compileTailwind {
+    def inputFile = file('tailwind/globals.css')
+    def configFile = file('tailwind/tailwind.config.js')
+    def outputFile = file('resources/static/css/style.css')
+
+    inputs.file inputFile
+    inputs.file configFile
+    outputs.file outputFile
+
+    doLast {
+        exec {
+            workingDir projectDir
+            if (System.getProperty('os.name').toLowerCase().contains('windows')) {
+                commandLine 'cmd', '/c', 'npx', 'tailwindcss',
+                        '-i', inputFile.toString(),
+                        '-o', outputFile.toString(),
+                        '-c', configFile.toString()
+            } else {
+                commandLine 'npx', 'tailwindcss',
+                        '-i', inputFile.toString(),
+                        '-o', outputFile.toString(),
+                        '-c', configFile.toString()
+            }
+        }
+    }
+}
+
+processResources.dependsOn(compileTailwind)
+
 tasks.register('paperDoll', Test) {
     useJUnitPlatform {
         includeTags "paperdoll"

code/services-application/search-service/resources/jte/part/head.jte

@@ -4,27 +4,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Marginalia Search Engine - ${title}</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/css/style.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link rel="stylesheet" href="/css/fa-all.min.css" />
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        nicotine: '#f8f8ee',
-                        margeblue: '#3e5f6f',
-                        liteblue: '#0066cc',
-                    }
-                },
-                screens: {
-                    'xs': '440px',
-                    'sm': '640px',
-                    'md': '768px',
-                    'lg': '1024px',
-                    'xl': '1280px',
-                    '2xl': '1536px',
-                },
-            }
-        }
-    </script>
 </head>

code/services-application/search-service/resources/jte/serp/error.jte

@@ -16,7 +16,7 @@
 <header class="border-b border-gray-300 bg-white">
     <div class="max-w-[1400px] mx-auto px-4 py-4">
         <div class="flex items-center">
-            <h1 class="text-xl mr-8 font-serif">Marginalia Search</h1>
+            <h1 class="text-md sm:text-xl mr-8 font-serif whitespace-nowrap"><a href="/">Marginalia Search</a></h1>
             @template.serp.part.searchform(query = model.parameters().query(), profile = model.parameters().profileStr(), filters = model.filters())
         </div>
     </div>

code/services-application/search-service/tailwind/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

code/services-application/search-service/tailwind/tailwind.config.js

@@ -0,0 +1,24 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./resources/jte/**/*.jte",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        nicotine: '#f8f8ee',
+        margeblue: '#3e5f6f',
+        liteblue: '#0066cc',
+      }
+    },
+    screens: {
+      'xs': '440px',
+      'sm': '640px',
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+    },
+  },
+  plugins: [],
+}