Make favicon and loading style customisable (#1260)

Author: ia3andy

base/src/main/resources/application.properties

@@ -20,6 +20,7 @@ quarkus.web-bundler.bundle.community-app.key=main
 %dev.quarkus.web-bundler.bundle.community-app=true
 %playwright.quarkus.web-bundler.bundle.lib=true
 %playwright.quarkus.web-bundler.bundle.community-app=true
+%dev.quarkus.http.static-resources.caching-enabled=false
 
 # http
 quarkus.http.enable-compression=true

base/src/main/resources/web/community-app/theme.scss

@@ -10,6 +10,8 @@
   --background2: black;
   --background3: #282A39;
 
+  --textColor: white;
+
   --primary: #71aeef;
   --secondary: #4695eb;
   --tertiary: #be9100;
@@ -27,7 +29,7 @@
   --buttonBorderColor: var(--primary);
 
   // Top container
-  --topContainerTextColor: white;
+  --topContainerTextColor: var(--textColor);
   --topContainerBg: var(--background);
   --topContainerBgImage: url("./media/bg-form-1920.jpeg");
   --topContainerBgImageWide: url("./media/bg-form-3000.jpeg");
@@ -37,10 +39,10 @@
   --fieldTextColor: var(--topContainerTextColor);
   --selectOptionsTextColor: black;
 
-  --extensionsCartButtonTextColor: white;
+  --extensionsCartButtonTextColor: var(--textColor);;
   --extensionsCartButtonBgColor: var(--background);
 
-  --generateButtonTextColor: white;
+  --generateButtonTextColor: var(--textColor);;
   --generateButtonBgColor: var(--secondary);
   --generateButtonBorderColorOnHover: white;
   --generateButtonDisabledBgAndBorderColor: rgba(90, 149, 235, 0.342);
@@ -51,12 +53,12 @@
   --resetToDefaultButtonColor: var(--warningColor);
 
   // Main container
-  --mainContainerTextColor: white;
+  --mainContainerTextColor: var(--textColor);;
   --mainContainerBg: var(--background);
 
   // Next steps Modal
   --modalBg: var(--background);
-  --modalTextColor: white;
+  --modalTextColor: var(--textColor);;
   --modalBorderColor: var(--secondary);
   --modalTitleColor: var(--secondary);
   --modalLinkColor: var(--linkTextColor);
@@ -65,14 +67,14 @@
   --modalCloseButtonBgHover: rgba(70, 149, 235, 0.548);
 
   --nextStepsModalDownloadButtonBg: var(--secondary);
-  --nextStepsModalDownloadButtonTextColor: white;
+  --nextStepsModalDownloadButtonTextColor: var(--textColor);;
   --nextStepsModalDownloadButtonBorderColorOnHover: white;
 
   --modalFooterButtonBg: black;
   --modalFooterButtonTextColor: var(--secondary);
 
   --codeBg: black;
-  --codeTextColor: white;
+  --codeTextColor: var(--textColor);;
 
   // Extensions picker
   --switchOriginSelectedTextColor: var(--mainContainerTextColor);
@@ -91,7 +93,7 @@
   --extensionsPickerDescriptionTextColorOnTablet: #ccc;
 
   --dropdownMenuBg: #363a50;
-  --dropdownMenuTextColor: white;
+  --dropdownMenuTextColor: var(--textColor);;
 
   --extensionsPickerCategoryTextColor: var(--mainContainerTextColor);
   --extensionsPickerCategoryUnderlineColor: var(--secondary);
@@ -111,23 +113,23 @@
   --headerBackgroundColor: var(--background);
   --headerBackgroundImage: url("./media/bg-header-1920.jpeg");
   --headerBackgroundImageWide: url("./media/bg-header-3000.jpeg");
-  --headerTextColor: white;
+  --headerTextColor: var(--textColor);;
 
-  --headerMenuLinkTextColor: white;
+  --headerMenuLinkTextColor: var(--textColor);;
 
-  --headerMenuStartCodingButtonTextColor: white;
+  --headerMenuStartCodingButtonTextColor: var(--textColor);;
   --headerMenuStartCodingButtonBorderColor: var(--secondary);
   --headerMenuStartCodingButtonBg: var(--secondary);
 
-  --headerSupportButtonTextColor: white;
+  --headerSupportButtonTextColor: var(--textColor);;
   --headerSupportButtonBorderColor: white;
   --headerSupportButtonBackgroundColor: transparent;
 
   --headerSupportPanelBackgroundColor: var(--background3);
-  --headerSupportPanelTextColor: white;
+  --headerSupportPanelTextColor: var(--textColor);;
 
   // StreamPicker
-  --streamPickerStreamIdTextColor: white;
+  --streamPickerStreamIdTextColor: var(--textColor);;
   --streamPickerPlatformKeyTextColor: var(--primary);
   --streamPickerBorderColor: var(--streamPickerPlatformKeyTextColor);
   --streamPickerDropdownStreamIdTextColor: var(--streamPickerStreamIdTextColor);
@@ -137,7 +139,7 @@
 
   // Blurb
   --blurbBg: #193E62;
-  --blurbTextColor: white;
+  --blurbTextColor: var(--textColor);;
   --blurbLinkTextColor: var(--linkTextColor);
   --blurbInfoIconColor: var(--primary);
 }

base/src/main/resources/web/index.html

@@ -7,53 +7,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
     <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" name="viewport">
-    <link rel="shortcut icon" type="image/png" href="https://quarkus.io/favicon.ico">
+    <link rel="shortcut icon" type="image/png" href="{config:property('io.quarkus.code.favicon') ?: 'https://quarkus.io/favicon.ico'}">
     <title>Quarkus - Start coding with {config:property("io.quarkus.code.name")}</title>
-
-    <style>
-        body {
-            background: black;
-        }
-
-        #loading {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            margin-top: -87.5px;
-            margin-left: -120px;
-            width: 240px;
-            height: 175px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            font-family: monospace;
-            text-align: center;
-            justify-content: center;
-            padding: 20px;
-            color: #fff;
-            font-size: 1.5rem;
-            line-height: 20px;
-            box-sizing: border-box;
-        }
-
-        #loading span:nth-child(3) {
-            color: #71aeef;
-        }
-
-        #loading img {
-            height: 75px;
-            display: block;
-            margin: 20px auto;
-        }
-    </style>
-
+    {#bundle tag="style" /}
     <!-- Segment Analytics -->
     <script>
        window.PUBLIC_URL='{publicUrl}';
        !function(){ var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{ analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){ return function(){ var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){ var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){ var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="YOUR_WRITE_KEY";analytics.SNIPPET_VERSION="4.15.2";}}();
     </script>
     <!-- End Segment Analytics -->
-    {#bundle /}
+
+    {#bundle tag="script" /}
 </head>
 
 <body>

base/src/main/resources/web/lib/index.ts

@@ -1,4 +1,6 @@
+import './loading.scss';
 export * from './core/types';
 export * from './core/analytics';
 export * from './core/components';
 export * from './components';
+

base/src/main/resources/web/lib/loading.scss

@@ -0,0 +1,34 @@
+body {
+  background: var(--background);
+}
+
+#loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -87.5px;
+  margin-left: -120px;
+  width: 240px;
+  height: 175px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: monospace;
+  text-align: center;
+  justify-content: center;
+  padding: 20px;
+  color: var(--textColor);
+  font-size: 1.5rem;
+  line-height: 20px;
+  box-sizing: border-box;
+}
+
+#loading span:nth-child(3) {
+  color: var(--primary);
+}
+
+#loading img {
+  height: 75px;
+  display: block;
+  margin: 20px auto;
+}

deploy/openshift/code-quarkus.yaml

@@ -69,8 +69,6 @@ objects:
                   value: ${IO_QUARKUS_CODE_LOG_LEVEL}
                 - name: IO_QUARKUS_CODE_HOSTNAME
                   value: ${IO_QUARKUS_CODE_HOSTNAME}
-                - name: IO_QUARKUS_CODE_FEATURES
-                  value: ${IO_QUARKUS_CODE_FEATURES}
                 - name: IO_QUARKUS_CODE_QUARKUS_PLATFORMS_RELOAD_CRON_EXPR
                   value: ${IO_QUARKUS_CODE_QUARKUS_PLATFORMS_RELOAD_CRON_EXPR}
                 - name: IO_QUARKUS_CODE_SENTRY_FRONTEND_DSN
@@ -130,7 +128,6 @@ objects:
       type: ClusterIP
 parameters:
   - name: IO_QUARKUS_CODE_ENVIRONMENT
-  - name: IO_QUARKUS_CODE_FEATURES
   - name: IO_QUARKUS_CODE_HOSTNAME
   - name: IO_QUARKUS_CODE_SEGMENT_FLUSH_QUEUE_SIZE
   - name: IO_QUARKUS_CODE_SEGMENT_FLUSH_INTERVAL_SECONDS