From 9ea02f6898e7860e72f82de7b47cca4c45e81abe Mon Sep 17 00:00:00 2001
From: miaawong <miawongdev@gmail.com>
Date: Fri, 27 Sep 2024 14:24:37 -0400
Subject: [PATCH] replace tailwind cdn

---
 kurl_proxy/.gitignore           |   1 +
 kurl_proxy/assets/input.css     |   3 +
 kurl_proxy/assets/insecure.html |   2 +-
 kurl_proxy/assets/output.css    | 221 ++++++++++++++++++++++++++++++++
 kurl_proxy/assets/tls.html      |   2 +-
 kurl_proxy/assets/welcome.html  |   7 +-
 kurl_proxy/tailwind.config.js   |   8 ++
 7 files changed, 239 insertions(+), 5 deletions(-)
 create mode 100644 kurl_proxy/assets/input.css
 create mode 100644 kurl_proxy/tailwind.config.js

diff --git a/kurl_proxy/.gitignore b/kurl_proxy/.gitignore
index ae3c172604..5b104eb3a6 100644
--- a/kurl_proxy/.gitignore
+++ b/kurl_proxy/.gitignore
@@ -1 +1,2 @@
 /bin/
+tailwindcss
\ No newline at end of file
diff --git a/kurl_proxy/assets/input.css b/kurl_proxy/assets/input.css
new file mode 100644
index 0000000000..b5c61c9567
--- /dev/null
+++ b/kurl_proxy/assets/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/kurl_proxy/assets/insecure.html b/kurl_proxy/assets/insecure.html
index b62d5f02d9..a430399971 100644
--- a/kurl_proxy/assets/insecure.html
+++ b/kurl_proxy/assets/insecure.html
@@ -6,7 +6,7 @@
     <meta name="description" content="Replicated App Manager" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>TLS Warning | Admin Console</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/assets/output.css" />
     <link rel="stylesheet" href="/assets/tls-custom.css" />
     {{if .AppIcon }}
     <link rel="icon" type="image/png" href="{{ .AppIcon }}" />
diff --git a/kurl_proxy/assets/output.css b/kurl_proxy/assets/output.css
index 619203bbce..fa6323a958 100644
--- a/kurl_proxy/assets/output.css
+++ b/kurl_proxy/assets/output.css
@@ -553,3 +553,224 @@ video {
 [hidden] {
   display: none;
 }
+
+.relative {
+  position: relative;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.mx-6 {
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
+
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
+.block {
+  display: block;
+}
+
+.flex {
+  display: flex;
+}
+
+.hidden {
+  display: none;
+}
+
+.h-\[50px\] {
+  height: 50px;
+}
+
+.min-h-full {
+  min-height: 100%;
+}
+
+.w-\[400px\] {
+  width: 400px;
+}
+
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.max-w-\[1000px\] {
+  max-width: 1000px;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-solid {
+  border-style: solid;
+}
+
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
+.bg-\[\#F9FBFC\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 251 252 / var(--tw-bg-opacity));
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.p-8 {
+  padding: 2rem;
+}
+
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
+.pl-8 {
+  padding-left: 2rem;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.text-\[\#323232\] {
+  --tw-text-opacity: 1;
+  color: rgb(50 50 50 / var(--tw-text-opacity));
+}
+
+.text-\[\#9c9c9c9c\] {
+  color: #9c9c9c9c;
+}
+
+.shadow-\[0_1px_0_\#c4c8ca\] {
+  --tw-shadow: 0 1px 0 #c4c8ca;
+  --tw-shadow-colored: 0 1px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
diff --git a/kurl_proxy/assets/tls.html b/kurl_proxy/assets/tls.html
index a5b485d6c5..61575b3d47 100644
--- a/kurl_proxy/assets/tls.html
+++ b/kurl_proxy/assets/tls.html
@@ -6,7 +6,7 @@
     <meta name="description" content="Form to upload TLS certificate and key" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Configure TLS | Admin Console</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/tls/assets/output.css" />
     <link rel="stylesheet" href="/tls/assets/tls-custom.css" />
     {{if .AppIcon }}
     <link rel="icon" type="image/png" href="{{ .AppIcon }}" />
diff --git a/kurl_proxy/assets/welcome.html b/kurl_proxy/assets/welcome.html
index 1a1cf5c63d..89df67dc6e 100644
--- a/kurl_proxy/assets/welcome.html
+++ b/kurl_proxy/assets/welcome.html
@@ -6,8 +6,9 @@
     <meta name="description" content="Welcome" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Welcome to {{.AppTitle}} Admin Console</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+
     <link rel="stylesheet" href="/assets/tls-custom.css" />
+    <link rel="stylesheet" href="/assets/output.css" />
     {{if .AppIcon }}
     <link rel="icon" type="image/png" href="{{ .AppIcon }}" />
     {{end}}
@@ -21,9 +22,9 @@
     var insecureLink = httpsLink + "/insecure";
   </script>
   <body>
-    <div class="min-h-full w-full flex flex-col flex-1">
+    <div class="u-minHeight--full u-width--full flex flex-column flex1">
       <div class="flex mx-6 mt-6">
-        <div class="flex flex-col mb-8 items-center">
+        <div class="flex flex-column mb-8 items-center">
           {{if .AppIcon }}<span
             class="appIcon flex flex-auto"
             style="background-image: url('{{ .AppIcon }}')"
diff --git a/kurl_proxy/tailwind.config.js b/kurl_proxy/tailwind.config.js
new file mode 100644
index 0000000000..914424e2a8
--- /dev/null
+++ b/kurl_proxy/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./assets/**/*.{html,js}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};