Use SVG icons instead of emoji

10 files changed, 138 insertions, 7 deletions

diff --git a/Cargo.lock b/Cargo.lock
index 1ef69b7..0f7d4c0 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -294,6 +294,7 @@ dependencies = [
  "fluent-langneg",
  "futures-util",
  "ginger",
+ "hitide_icons",
  "http",
  "hyper",
  "hyper-tls",
@@ -310,6 +311,13 @@ dependencies = [
 ]
 
 [[package]]
+name = "hitide_icons"
+version = "0.1.0"
+dependencies = [
+ "phf",
+]
+
+[[package]]
 name = "html5ever"
 version = "0.25.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -662,7 +670,9 @@ version = "0.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3dfb61232e34fcb633f43d12c58f83c1df82962dcdfa565a4e866ffc17dafe12"
 dependencies = [
+ "phf_macros",
  "phf_shared",
+ "proc-macro-hack",
 ]
 
 [[package]]
@@ -686,6 +696,20 @@ dependencies = [
 ]
 
 [[package]]
+name = "phf_macros"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f6fde18ff429ffc8fe78e2bf7f8b7a5a5a6e2a8b58bc5a9ac69198bbda9189c"
+dependencies = [
+ "phf_generator",
+ "phf_shared",
+ "proc-macro-hack",
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
 name = "phf_shared"
 version = "0.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
diff --git a/Cargo.toml b/Cargo.toml
index e159cfc..dbd0dfe 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,3 +1,6 @@
+[workspace]
+members = ["icons"]
+
 [package]
 name = "hitide"
 version = "0.5.0-pre"
@@ -28,3 +31,4 @@ fluent = "0.12.0"
 lazy_static = "1.4.0"
 unic-langid = { version = "0.9.0", features = ["macros"] }
 futures-util = "0.3.5"
+hitide_icons = { path = "./icons" }
diff --git a/icons/Cargo.toml b/icons/Cargo.toml
new file mode 100644
index 0000000..48bb80b
--- /dev/null
+++ b/icons/Cargo.toml
@@ -0,0 +1,10 @@
+[package]
+name = "hitide_icons"
+version = "0.1.0"
+authors = ["Colin Reeder <colin@vpzom.click>"]
+edition = "2018"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+phf = { version = "0.8.0", features = ["macros"] }
diff --git a/icons/res/notifications-some.svg b/icons/res/notifications-some.svg
new file mode 100644
index 0000000..5eef1fa
--- /dev/null
+++ b/icons/res/notifications-some.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF8F00" stroke="#FF8F00">
+	<path d="M 14 20 q -2 4 -4 0" />
+	<path d="M 14 4 q 2 0 3 2 c 1 1 0 10 5 14 l -20 0 c 5 -4 4 -8 5 -14 q 1 -2 3 -2 c 1 -3 3 -3 4 0 z" stroke-linejoin="round" />
+	<line x1="12" y1="7" x2="12" y2="12" stroke-linecap="round" stroke-width="3" stroke="white" />
+	<circle cx="12" cy="16.5" r="1.5" stroke="none" fill="white" />
+</svg>
diff --git a/icons/res/notifications.svg b/icons/res/notifications.svg
new file mode 100644
index 0000000..45a55d1
--- /dev/null
+++ b/icons/res/notifications.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" stroke="black">
+	<path d="M 14 4 q 2 0 3 2 c 1 1 0 10 5 14 l -20 0 c 5 -4 4 -8 5 -14 q 1 -2 3 -2 c 1 -3 3 -3 4 0 z" stroke-linejoin="round" />
+	<path d="M 14 20 q -2 4 -4 0" />
+</svg>
diff --git a/icons/res/person.svg b/icons/res/person.svg
new file mode 100644
index 0000000..78d7385
--- /dev/null
+++ b/icons/res/person.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<path stroke="black" stroke-linejoin="round" d="M 2 21 q 1 -6 9 -8 c -4 -2 -4 -10 1 -10 c 5 0 5 8 1 10 q 8 2 9 8 z" />
+</svg>
diff --git a/icons/src/lib.rs b/icons/src/lib.rs
new file mode 100644
index 0000000..355e674
--- /dev/null
+++ b/icons/src/lib.rs
@@ -0,0 +1,49 @@
+pub struct Icon {
+    pub path: &'static str,
+    pub content: &'static str,
+}
+
+macro_rules! icons_consts {
+    ($i:ident => $p:expr) => {
+        pub const $i: Icon = Icon {
+            path: $p,
+            content: include_str!(concat!("../res/", $p)),
+        };
+    };
+    ($i1:ident => $p1:expr, $($i2:ident => $p2:expr),+) => {
+        icons_consts! { $i1 => $p1 }
+        icons_consts! { $($i2 => $p2),+ }
+    }
+}
+
+macro_rules! icons_map {
+    ($($i:ident => $p:expr),+) => {
+        pub const ICONS_MAP: phf::Map<&'static str, &'static Icon> = phf::phf_map! {
+            $($p => &icons::$i),+
+        };
+    }
+}
+
+macro_rules! icons {
+    ($($i:ident => $p:expr),+) => {
+        pub mod icons {
+            use super::Icon;
+
+            icons_consts! {
+                $($i => $p),+
+            }
+        }
+
+        icons_map! {
+            $($i => $p),+
+        }
+    }
+}
+
+icons! {
+    NOTIFICATIONS => "notifications.svg",
+    NOTIFICATIONS_SOME => "notifications-some.svg",
+    PERSON => "person.svg"
+}
+
+pub use icons::*;
diff --git a/res/main.css b/res/main.css
index 2ff6a0c..1ce5be8 100644
--- a/res/main.css
+++ b/res/main.css
@@ -53,10 +53,6 @@ body {
 	margin-bottom: 0;
 }
 
-.notification-indicator.unread {
-	color: #FF8F00;
-}
-
 .notification-item.unread {
 	border-left: 5px solid #FDD835;
 	padding-left: 5px;
@@ -75,6 +71,12 @@ body {
 	border: 1px dashed black;
 }
 
+.icon {
+	height: 1.2em;
+	display: inline;
+	vertical-align: text-bottom;
+}
+
 @media (max-width: 768px) {
 	.communitySidebar {
 		display: none; /* TODO still show this somewhere */
diff --git a/src/components/mod.rs b/src/components/mod.rs
index e3cd604..9527972 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -226,11 +226,18 @@ pub fn HTPage<'a, Children: render::Render>(
                                         <>
                                             <a
                                                 href={"/notifications"}
-                                                class={if login.user.has_unread_notifications { "notification-indicator unread" } else { "notification-indicator" }}
                                             >
-                                                {"🔔︎"}
+                                                {
+                                                    if login.user.has_unread_notifications {
+                                                        hitide_icons::NOTIFICATIONS_SOME.img()
+                                                    } else {
+                                                        hitide_icons::NOTIFICATIONS.img()
+                                                    }
+                                                }
+                                            </a>
+                                            <a href={format!("/users/{}", login.user.id)}>
+                                                {hitide_icons::PERSON.img()}
                                             </a>
-                                            <a href={format!("/users/{}", login.user.id)}>{"👤︎"}</a>
                                         </>
                                     })
                                 } else {
@@ -501,3 +508,13 @@ impl<'a> render::Render for NotificationItem<'a> {
         write!(writer, "</li>")
     }
 }
+
+trait IconExt {
+    fn img(&self) -> render::SimpleElement<()>;
+}
+
+impl IconExt for hitide_icons::Icon {
+    fn img(&self) -> render::SimpleElement<()> {
+        render::rsx! { <img src={format!("/static/{}", self.path)} class={"icon"} /> }
+    }
+}
diff --git a/src/routes/static.rs b/src/routes/static.rs
index 60a0084..d319efe 100644
--- a/src/routes/static.rs
+++ b/src/routes/static.rs
@@ -1,3 +1,4 @@
+use hitide_icons::ICONS_MAP;
 use std::sync::Arc;
 
 const FILE_MAIN_CSS: &[u8] = include_bytes!("../../res/main.css");
@@ -20,6 +21,14 @@ async fn handler_static_get(
         );
 
         Ok(resp)
+    } else if let Some(icon) = ICONS_MAP.get(params.0.as_str()) {
+        let mut resp = hyper::Response::new(icon.content.into());
+        resp.headers_mut().insert(
+            hyper::header::CONTENT_TYPE,
+            hyper::header::HeaderValue::from_static("image/svg+xml"),
+        );
+
+        Ok(resp)
     } else {
         Err(crate::Error::RoutingError(trout::RoutingFailure::NotFound))
     }