Fix UI scaling and update docs

Moved all web assets to static folder, added xitca-web's logging feature and added favicons
Make scrollbar a bit nicer
2025-11-08 13:13:49 -05:00 · 2024-07-12 13:26:40 +03:00 · 2024-07-11 18:21:31 +03:00 · 2024-07-11 17:32:59 +03:00 · 2024-07-11 13:32:43 +03:00
12 changed files with 217 additions and 21 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -79,6 +79,8 @@ jobs:
          platforms: linux/amd64, linux/arm64
          push: true
          tags: ghcr.io/sergi0g/cup:${{ needs.get-tag.outputs.tag }},ghcr.io/sergi0g/cup:latest
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

  release:
    runs-on: ubuntu-latest
--- a/.github/workflows/nightly.yml
+++ b/.github/workflows/nightly.yml
@@ -91,6 +91,8 @@ jobs:
          platforms: linux/amd64, linux/arm64
          push: true
          tags: ghcr.io/sergi0g/cup:${{ needs.create-tag.outputs.tagname }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

  nightly-release:
    runs-on: ubuntu-latest
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -350,7 +350,7 @@ dependencies = [

 [[package]]
 name = "cup"
-version = "1.1.1"
+version = "1.1.2"
 dependencies = [
 "bollard",
 "clap",
@@ -918,6 +918,16 @@ dependencies = [
 "windows-sys 0.48.0",
 ]

+[[package]]
+name = "nu-ansi-term"
+version = "0.46.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "77a8165726e8236064dbb45459242600304b42a5ea24ee2948e18e023bf7ba84"
+dependencies = [
+ "overload",
+ "winapi",
+]
+
 [[package]]
 name = "num-conv"
 version = "0.1.0"
@@ -964,6 +974,12 @@ version = "1.19.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3fdb12b2476b595f9358c5161aa467c2438859caa136dec86c26fdd2efe17b92"

+[[package]]
+name = "overload"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b15813163c1d831bf4a13c3610c05c0d03b39feb07f7e09fa234dac9b15aaf39"
+
 [[package]]
 name = "percent-encoding"
 version = "2.3.1"
@@ -1303,6 +1319,15 @@ dependencies = [
 "digest",
 ]

+[[package]]
+name = "sharded-slab"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f40ca3c46823713e0d4209592e8d6e826aa57e928f09752619fc696c499637f6"
+dependencies = [
+ "lazy_static",
+]
+
 [[package]]
 name = "signal-hook-registry"
 version = "1.4.2"
@@ -1403,6 +1428,16 @@ dependencies = [
 "syn",
 ]

+[[package]]
+name = "thread_local"
+version = "1.1.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8b9ef9bad013ada3808854ceac7b46812a6465ba368859a37e2100283d2d719c"
+dependencies = [
+ "cfg-if",
+ "once_cell",
+]
+
 [[package]]
 name = "time"
 version = "0.3.36"
@@ -1525,9 +1560,21 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c3523ab5a71916ccf420eebdf5521fcef02141234bbc0b8a49f2fdc4544364ef"
 dependencies = [
 "pin-project-lite",
+ "tracing-attributes",
 "tracing-core",
 ]

+[[package]]
+name = "tracing-attributes"
+version = "0.1.27"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "34704c8d6ebcbc939824180af020566b01a7c01f80641264eba0999f6c2b6be7"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
 [[package]]
 name = "tracing-core"
 version = "0.1.32"
@@ -1535,6 +1582,32 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c06d3da6113f116aaee68e4d601191614c9053067f9ab7f6edbcb161237daa54"
 dependencies = [
 "once_cell",
+ "valuable",
+]
+
+[[package]]
+name = "tracing-log"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ee855f1f400bd0e5c02d150ae5de3840039a3f54b025156404e34c23c03f47c3"
+dependencies = [
+ "log",
+ "once_cell",
+ "tracing-core",
+]
+
+[[package]]
+name = "tracing-subscriber"
+version = "0.3.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ad0f048c97dbd9faa9b7df56362b8ebcaa52adb06b498c050d2f4e32f90a7a8b"
+dependencies = [
+ "nu-ansi-term",
+ "sharded-slab",
+ "smallvec",
+ "thread_local",
+ "tracing-core",
+ "tracing-log",
 ]

 [[package]]
@@ -1627,6 +1700,12 @@ version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "06abde3611657adf66d383f00b093d7faecc7fa57071cce2578660c9f1010821"

+[[package]]
+name = "valuable"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "830b7e5d4d90034032940e4ace0d9a9a057e7a45cd94e6c007832e39edb82f6d"
+
 [[package]]
 name = "version_check"
 version = "0.9.4"
@@ -1960,6 +2039,8 @@ dependencies = [
 "futures-core",
 "pin-project-lite",
 "tokio",
+ "tracing",
+ "tracing-subscriber",
 "xitca-http",
 "xitca-server",
 "xitca-service",
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "cup"
-version = "1.1.1"
+version = "1.1.2"
 edition = "2021"

 [dependencies]
@@ -10,7 +10,7 @@ tokio = {version = "1.38.0", features = ["rt", "rt-multi-thread", "macros"]}
 ureq = { version = "2.9.7", features = ["tls"] }
 json = "0.12.4"
 rayon = "1.10.0"
-xitca-web = { version = "0.5.0", optional = true }
+xitca-web = { version = "0.5.0", optional = true, features = ["logger"] }
 liquid = { version = "0.26.6", optional = true }
 bollard = "0.16.1"
 once_cell = "1.19.0"
--- a/README.md
+++ b/README.md
@@ -160,7 +160,7 @@ Here are some ideas to get you started:

 To contribute, fork the repository, make your changes and the submit a pull request.

-Note: If you update the UI, please make sure to recompile the CSS with `tailwindcss -mo src/index.css`. You need to have the Tailwind CSS CLI installed ([instructions here](https://tailwindcss.com/docs/installation))
+Note: If you update the UI, please make sure to recompile the CSS with `tailwindcss -mo src/static/index.css`. You need to have the Tailwind CSS CLI installed ([instructions here](https://tailwindcss.com/docs/installation))

 ## Support

--- a/src/server.rs
+++ b/src/server.rs
@@ -4,21 +4,28 @@ use liquid::{object, Object};
 use rayon::iter::{IntoParallelRefIterator, ParallelIterator};
 use xitca_web::{
    body::ResponseBody,
-    handler::{handler_service, path::PathOwn, state::StateOwn},
-    http::{Method, WebResponse},
+    handler::{handler_service, state::StateOwn},
+    http::WebResponse,
    route::get,
    App,
+    middleware::Logger
 };

-const RAW_TEMPLATE: &str = include_str!("template.liquid");
-const STYLE: &str = include_str!("index.css");
+const RAW_TEMPLATE: &str = include_str!("static/template.liquid");
+const STYLE: &str = include_str!("static/index.css");
+const FAVICON_ICO: &[u8] = include_bytes!("static/favicon.ico");
+const FAVICON_SVG: &[u8] = include_bytes!("static/favicon.svg");
+const APPLE_TOUCH_ICON: &[u8] = include_bytes!("static/apple-touch-icon.png");

 pub async fn serve(port: &u16, updates: &[(String, Option<bool>)]) -> std::io::Result<()> {
-    println!("Serving on http://0.0.0.0:{}", port);
    App::new()
        .with_state(updates.to_owned())
        .at("/", get(handler_service(home)))
        .at("/json", get(handler_service(json)))
+        .at("/favicon.ico", handler_service(favicon_ico)) // These aren't pretty but this is xitca-web...
+        .at("/favicon.svg", handler_service(favicon_svg))
+        .at("/apple-touch-icon.png", handler_service(apple_touch_icon))
+        .enclosed(Logger::new())
        .serve()
        .bind(format!("0.0.0.0:{}", port))?
        .run()
@@ -27,8 +34,6 @@ pub async fn serve(port: &u16, updates: &[(String, Option<bool>)]) -> std::io::R

 async fn home(
    updates: StateOwn<Vec<(String, Option<bool>)>>,
-    method: Method,
-    path: PathOwn,
 ) -> WebResponse {
    let template = liquid::ParserBuilder::with_stdlib()
        .build()
@@ -70,14 +75,11 @@ async fn home(
        "style": STYLE
    });
    let result = template.render(&globals).unwrap();
-    println!("Received {} request on {}", method, path.0);
    WebResponse::new(ResponseBody::from(result))
 }

 async fn json(
-    updates: StateOwn<Vec<(String, Option<bool>)>>,
-    method: Method,
-    path: PathOwn,
+    updates: StateOwn<Vec<(String, Option<bool>)>>
 ) -> WebResponse {
    let result_mutex: Mutex<json::object::Object> = Mutex::new(json::object::Object::new());
    updates.par_iter().for_each(|image| match image.1 {
@@ -85,6 +87,17 @@ async fn json(
        None => result_mutex.lock().unwrap().insert(&image.0, json::Null),
    });
    let result = json::stringify(result_mutex.lock().unwrap().clone());
-    println!("Received {} request on {}", method, path.0);
    WebResponse::new(ResponseBody::from(result))
 }
+
+async fn favicon_ico() -> WebResponse {
+    WebResponse::new(ResponseBody::from(FAVICON_ICO))
+}
+
+async fn favicon_svg() -> WebResponse {
+    WebResponse::new(ResponseBody::from(FAVICON_SVG))
+}
+
+async fn apple_touch_icon() -> WebResponse {
+    WebResponse::new(ResponseBody::from(APPLE_TOUCH_ICON))
+}
--- a/src/static/apple-touch-icon.png
+++ b/src/static/apple-touch-icon.png
--- a/src/static/favicon.ico
+++ b/src/static/favicon.ico
--- a/src/static/favicon.svg
+++ b/src/static/favicon.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
+<path style="fill:#A6CFD6;" d="M65.12,17.55c-17.6-0.53-34.75,5.6-34.83,14.36c-0.04,5.2,1.37,18.6,3.62,48.68s2.25,33.58,3.5,34.95
+	c1.25,1.37,10.02,8.8,25.75,8.8s25.93-6.43,26.93-8.05c0.48-0.78,1.83-17.89,3.5-37.07c1.81-20.84,3.91-43.9,3.99-45.06
+	C97.82,30.66,94.2,18.43,65.12,17.55z"/>
+<path style="fill:#DCEDF6;" d="M41.4,45.29c-0.12,0.62,1.23,24.16,2.32,27.94c1.99,6.92,9.29,7.38,10.23,4.16
+	c0.9-3.07-0.38-29.29-0.38-29.29s-3.66-0.3-6.43-0.84C44,46.63,41.4,45.29,41.4,45.29z"/>
+<path style="fill:#6CA4AE;" d="M33.74,32.61c-0.26,8.83,20.02,12.28,30.19,12.22c13.56-0.09,29.48-4.29,29.8-11.7
+	S79.53,21.1,63.35,21.1C49.6,21.1,33.96,25.19,33.74,32.61z"/>
+<path style="fill:#DC0D27;" d="M84.85,13.1c-0.58,0.64-9.67,30.75-9.67,30.75s2.01-0.33,4-0.79c2.63-0.61,3.76-1.06,3.76-1.06
+	s7.19-22.19,7.64-23.09c0.45-0.9,21.61-7.61,22.31-7.93c0.7-0.32,1.39-0.4,1.46-0.78c0.06-0.38-2.34-6.73-3.11-6.73
+	C110.47,3.47,86.08,11.74,84.85,13.1z"/>
+<path style="fill:#8A1F0F;" d="M110.55,7.79c1.04,2.73,2.8,3.09,3.55,2.77c0.45-0.19,1.25-1.84,0.01-4.47
+	c-0.99-2.09-2.17-2.74-2.93-2.61C110.42,3.6,109.69,5.53,110.55,7.79z"/>
+<g>
+	<path style="fill:#8A1F0F;" d="M91.94,18.34c-0.22,0-0.44-0.11-0.58-0.3l-3.99-5.77c-0.22-0.32-0.14-0.75,0.18-0.97
+		c0.32-0.22,0.76-0.14,0.97,0.18l3.99,5.77c0.22,0.32,0.14,0.75-0.18,0.97C92.21,18.3,92.07,18.34,91.94,18.34z"/>
+</g>
+<g>
+	<path style="fill:#8A1F0F;" d="M90.28,19.43c-0.18,0-0.35-0.07-0.49-0.2l-5.26-5.12c-0.28-0.27-0.28-0.71-0.01-0.99
+		c0.27-0.28,0.71-0.28,0.99-0.01l5.26,5.12c0.28,0.27,0.28,0.71,0.01,0.99C90.64,19.36,90.46,19.43,90.28,19.43z"/>
+</g>
+<g>
+	<path style="fill:#8A1F0F;" d="M89.35,21.22c-0.12,0-0.25-0.03-0.36-0.1l-5.6-3.39c-0.33-0.2-0.44-0.63-0.24-0.96
+		c0.2-0.33,0.63-0.44,0.96-0.24l5.6,3.39c0.33,0.2,0.44,0.63,0.24,0.96C89.82,21.1,89.59,21.22,89.35,21.22z"/>
+</g>
+</svg>
--- a/src/static/index.css
+++ b/src/static/index.css
--- a/src/static/template.liquid
+++ b/src/static/template.liquid
@@ -2,6 +2,10 @@
 <html>
  <head>
    <meta charset="utf8">
+    <meta name="theme-color" content="#ffffff">
+    <link rel="icon" href="favicon.svg">
+    <link rel="apple-touch-icon" href="apple-touch-icon.png">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0"  />
    <style>
      {{ style }}
    </style>
@@ -21,8 +25,9 @@
      }

      @media (prefers-color-scheme: dark) {
-        .gi::before, .gi::after {
-            background-color: #1f2937;
+        .gi::before,
+        .gi::after {
+          background-color: #1f2937;
        }
      }

@@ -38,13 +43,77 @@
        inset-inline-start: 0;
        inset-block-start: -0.12rem;
      }
+
+      @supports (scrollbar-color: auto) {
+        html {
+          scrollbar-color: #707070 #343840;
+        }
+      }
+
+      @supports selector(::-webkit-scrollbar) {
+        html::-webkit-scrollbar {
+          width: 10px;
+        }
+
+        html::-webkit-scrollbar-track {
+          background: #343840;
+        }
+
+        html::-webkit-scrollbar-thumb {
+          background: #707070;
+          border-radius: 0.375rem;
+        }
+
+        html::-webkit-scrollbar-thumb:hover {
+          background: #b5b5b5;
+        }
+      }
    </style>
  </head>
  <body>
    <div class="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950">
      <div class="lg:px-8 sm:px-6 px-4 max-w-[80rem] mx-auto h-full w-full">
        <div class="max-w-[48rem] mx-auto h-full my-8">
-          <h1 class="text-6xl font-bold dark:text-white">Cup🥤</h1>
+          <div class="flex items-center gap-1">
+            <h1 class="text-6xl font-bold dark:text-white">Cup</h1>
+            <svg
+              version="1.1"
+              id="Layer_2"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              x="0px"
+              y="0px"
+              viewBox="0 0 128 128"
+              style="enable-background:new 0 0 128 128;"
+              xml:space="preserve"
+              class="size-16"
+            >
+              <path style="fill:#A6CFD6;" d="M65.12,17.55c-17.6-0.53-34.75,5.6-34.83,14.36c-0.04,5.2,1.37,18.6,3.62,48.68s2.25,33.58,3.5,34.95
+                c1.25,1.37,10.02,8.8,25.75,8.8s25.93-6.43,26.93-8.05c0.48-0.78,1.83-17.89,3.5-37.07c1.81-20.84,3.91-43.9,3.99-45.06
+                C97.82,30.66,94.2,18.43,65.12,17.55z"/>
+              <path style="fill:#DCEDF6;" d="M41.4,45.29c-0.12,0.62,1.23,24.16,2.32,27.94c1.99,6.92,9.29,7.38,10.23,4.16
+                c0.9-3.07-0.38-29.29-0.38-29.29s-3.66-0.3-6.43-0.84C44,46.63,41.4,45.29,41.4,45.29z"/>
+              <path style="fill:#6CA4AE;" d="M33.74,32.61c-0.26,8.83,20.02,12.28,30.19,12.22c13.56-0.09,29.48-4.29,29.8-11.7
+                S79.53,21.1,63.35,21.1C49.6,21.1,33.96,25.19,33.74,32.61z"/>
+              <path style="fill:#DC0D27;" d="M84.85,13.1c-0.58,0.64-9.67,30.75-9.67,30.75s2.01-0.33,4-0.79c2.63-0.61,3.76-1.06,3.76-1.06
+                s7.19-22.19,7.64-23.09c0.45-0.9,21.61-7.61,22.31-7.93c0.7-0.32,1.39-0.4,1.46-0.78c0.06-0.38-2.34-6.73-3.11-6.73
+                C110.47,3.47,86.08,11.74,84.85,13.1z"/>
+              <path style="fill:#8A1F0F;" d="M110.55,7.79c1.04,2.73,2.8,3.09,3.55,2.77c0.45-0.19,1.25-1.84,0.01-4.47
+                c-0.99-2.09-2.17-2.74-2.93-2.61C110.42,3.6,109.69,5.53,110.55,7.79z"/>
+              <g>
+                <path style="fill:#8A1F0F;" d="M91.94,18.34c-0.22,0-0.44-0.11-0.58-0.3l-3.99-5.77c-0.22-0.32-0.14-0.75,0.18-0.97
+                  c0.32-0.22,0.76-0.14,0.97,0.18l3.99,5.77c0.22,0.32,0.14,0.75-0.18,0.97C92.21,18.3,92.07,18.34,91.94,18.34z"/>
+              </g>
+              <g>
+                <path style="fill:#8A1F0F;" d="M90.28,19.43c-0.18,0-0.35-0.07-0.49-0.2l-5.26-5.12c-0.28-0.27-0.28-0.71-0.01-0.99
+                  c0.27-0.28,0.71-0.28,0.99-0.01l5.26,5.12c0.28,0.27,0.28,0.71,0.01,0.99C90.64,19.36,90.46,19.43,90.28,19.43z"/>
+              </g>
+              <g>
+                <path style="fill:#8A1F0F;" d="M89.35,21.22c-0.12,0-0.25-0.03-0.36-0.1l-5.6-3.39c-0.33-0.2-0.44-0.63-0.24-0.96
+                  c0.2-0.33,0.63-0.44,0.96-0.24l5.6,3.39c0.33,0.2,0.44,0.63,0.24,0.96C89.82,21.1,89.59,21.22,89.35,21.22z"/>
+              </g>
+            </svg>
+          </div>
          <div class="shadow-sm bg-white dark:bg-gray-900 rounded-md my-8">
            <dl class="lg:grid-cols-4 md:grid-cols-2 gap-1 grid-cols-1 grid overflow-hidden *:relative">
              {% for metric in metrics %}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
  content: [
-    "src/template.liquid"
+    "src/static/template.liquid"
  ],
  theme: {
    extend: {},
Author	SHA1	Message	Date
Sergio	0a01c667da	Fix UI scaling and update docs	2024-07-12 13:26:40 +03:00
Sergio	271e299017	Moved all web assets to static folder, added xitca-web's logging feature and added favicons	2024-07-11 18:21:31 +03:00
Sergio	e0cad9d3ea	Make scrollbar a bit nicer	2024-07-11 17:32:59 +03:00
Sergio	ae0c6ed50f	Add caching	2024-07-11 13:32:43 +03:00