feat: add more icons

mrxiaozhuox · Sep 7, 2024 · 340fcc4 · 340fcc4
1 parent 36fafa7
commit 340fcc4
Show file tree

Hide file tree

Showing 11 changed files with 234 additions and 172 deletions.
diff --git a/docsite/Cargo.toml b/docsite/Cargo.toml
@@ -23,5 +23,6 @@ markdown-meta-parser = "0.1.3"
 reqwasm = "0.5"
 log = "0.4"
 chrono = "0.4"
+web-sys = { version = "0.3.70", features = ["Navigator", "Window", "Clipboard", "TextEncoder", "TextDecoder"] }
 
 dioxus-free-icons = { version = "0.7.0", features = ["hero-icons-solid"] }
diff --git a/docsite/src/lib.rs b/docsite/src/lib.rs
@@ -1,6 +1,7 @@
 use dioxus::prelude::*;
 use dioxus_retrouter::Link;
 use karaty_blueprint::{TemplateDataType, TemplateProps, Templates};
+use web_sys::{wasm_bindgen::JsValue, Blob};
 
 #[allow(non_snake_case)]
 pub fn HomePage(cx: Scope<TemplateProps>) -> Element {
@@ -161,10 +162,209 @@ pub fn HomePage(cx: Scope<TemplateProps>) -> Element {
     })
 }
 
+#[allow(non_snake_case)]
+pub fn IconsPage(cx: Scope<TemplateProps>) -> Element {
+    let Navbar = cx.props.utility.navbar;
+    let Footer = cx.props.utility.footer;
+    let Markdown = cx.props.utility.renderers.get("markdown").unwrap().clone();
+
+    let solid = [
+        "house",
+        "user",
+        "music",
+        "heart",
+        "cloud",
+        "bell",
+        "globe",
+        "bug",
+        "sun",
+        "moon",
+        "shop",
+        "car",
+        "wallet",
+        "book",
+        "language",
+        "tag",
+        "tags",
+        "play",
+        "pause",
+        "gear",
+        "gears",
+        "code",
+        "comment",
+        "comments",
+        "spin",
+        "info",
+        "upload",
+        "square",
+        "table",
+        "flag",
+        "shield",
+        "server"
+    ];
+
+    let brand = [
+        "github",
+        "gitlab",
+        "linux",
+        "apple",
+        "android",
+        "google",
+        "paypal",
+        "twitter",
+        "instagram",
+        "facebook",
+        "linkedin",
+        "twitch",
+        "discord",
+        "telegram",
+        "tiktok",
+        "steam",
+        "amazon",
+        "vimeo",
+        "ebay",
+        "apple-pay",
+        "google-pay",
+        "zhihu",
+        "bilibili",
+        "qq",
+    ];
+
+    let programming = [
+        "rust",
+        "python",
+        "java",
+        "golang",
+        "php",
+        "swift",
+        "node-js",
+        "css",
+        "bootstrap",
+        "docker",
+        "react",
+        "vue",
+        "angular",
+        "html",
+        "javascript",
+        "npm",
+    ];
+
+    let solid_rendered = solid.iter().map(|name| {
+        let icon = format!(":{name}:");
+        let icon_name = name.to_string();
+        rsx! {
+            a {
+                class: "h-8 px-3 w-max flex gap-2 items-center \
+                        rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300 hover:bg-opacity-75 focus:bg-gray-300 \
+                        focus:text-blue-900 active:text-primary active:bg-blue-100 disabled:bg-gray-100 disabled:text-gray-400 \
+                        dark:bg-gray-700 dark:text-gray-300 dark:active:text-primary text-xs",
+                title: "{name}",
+                onclick: move |_| {
+                        let nav = web_sys::window().unwrap().navigator();
+                        let cp = nav.clipboard();
+                        let _r = cp.write_text(&format!(":{}:", icon_name));
+                },
+                Markdown { content: icon, config: Default::default() }
+            }
+
+        }
+    });
+
+    let brand_rendered = brand.iter().map(|name| {
+        let icon = format!(":brand.{name}:");
+        let icon_name = name.to_string();
+        rsx! {
+            a {
+                class: "h-8 px-3 w-max flex gap-2 items-center \
+                        rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300 hover:bg-opacity-75 focus:bg-gray-300 \
+                        focus:text-blue-900 active:text-primary active:bg-blue-100 disabled:bg-gray-100 disabled:text-gray-400 \
+                        dark:bg-gray-700 dark:text-gray-300 dark:active:text-primary text-xs",
+                title: "{name}",
+                onclick: move |_| {
+                        let nav = web_sys::window().unwrap().navigator();
+                        let cp = nav.clipboard();
+                        let _r = cp.write_text(&format!(":brand.{}:", icon_name));
+                },
+                Markdown { content: icon, config: Default::default() }
+            }
+
+        }
+    });
+
+
+    let programming_rendered = programming.iter().map(|name| {
+        let icon = format!(":programming.{name}:");
+        let icon_name = name.to_string();
+        rsx! {
+            a {
+                class: "h-8 px-3 w-max flex gap-2 items-center \
+                        rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300 hover:bg-opacity-75 focus:bg-gray-300 \
+                        focus:text-blue-900 active:text-primary active:bg-blue-100 disabled:bg-gray-100 disabled:text-gray-400 \
+                        dark:bg-gray-700 dark:text-gray-300 dark:active:text-primary text-xs",
+                title: "{name}",
+                onclick: move |_| {
+                        let nav = web_sys::window().unwrap().navigator();
+                        let cp = nav.clipboard();
+                        let _r = cp.write_text(&format!(":programming.{}:", icon_name));
+                },
+                Markdown { content: icon, config: Default::default() }
+            }
+
+        }
+    });
+
+    cx.render(rsx! {
+        Navbar {}
+
+        div {
+            class: "container mx-auto",
+            div {
+                class: "my-4",
+                h2 {
+                    class: "text-2xl font-mono font-bold dark:text-gray-200",
+                    "Solid Icon"
+                }
+                hr { class: "h-px bg-gray-200 border-0 dark:bg-gray-700" }
+            }
+            div {
+                class: "grid grid-cols-[repeat(auto-fit,minmax(100px,1fr))] gap-4",
+                solid_rendered
+            }
+            div {
+                class: "mt-8 mb-4",
+                h2 {
+                    class: "text-2xl font-mono font-bold dark:text-gray-200",
+                    "Brand Icon"
+                }
+                hr { class: "h-px bg-gray-200 border-0 dark:bg-gray-700" }
+            }
+            div {
+                class: "grid grid-cols-[repeat(auto-fit,minmax(100px,1fr))] gap-4",
+                brand_rendered
+            }
+            div {
+                class: "mt-8 mb-4",
+                h2 {
+                    class: "text-2xl font-mono font-bold dark:text-gray-200",
+                    "Programming Icon"
+                }
+                hr { class: "h-px bg-gray-200 border-0 dark:bg-gray-700" }
+            }
+            div {
+                class: "grid grid-cols-[repeat(auto-fit,minmax(100px,1fr))] gap-4",
+                programming_rendered
+            }
+        }
+
+        Footer {}
+    })
+}
+
 pub fn export() -> Templates {
     let mut list = Templates::new();
 
     list.template("home", vec![TemplateDataType::Any], HomePage);
+    list.template("icons", vec![TemplateDataType::Any], IconsPage);
 
     list
 }
diff --git a/karaty/config/routing.toml b/karaty/config/routing.toml
@@ -20,6 +20,10 @@ template = "blog::content"
 path = "/docs"
 redirect = "/docs/summary"
 
+[[routing]]
+path = "/icons"
+template = "karaty_docsite::icons"
+
 [[routing]]
 path = "/docs/:path"
 file = "posts/docs"

diff --git a/karaty/data/posts/docs/icons.md b/karaty/data/posts/docs/icons.md
@@ -16,88 +16,4 @@ you can use `:` sign wrap a icon name:
 there is some :bug: in **Karaty**.
 ```
 
-## Solid Icon
-
-|  **Name**  |   **Display**   |
-| ---------- | --------------- |
-| house      | :house:         |
-| user       | :user:          |
-| music      | :music:         |
-| heart      | :heart:         |
-| cloud      | :cloud:         |
-| bell       | :bell:          |
-| globe      | :globe:         |
-| bug        | :bug:           |
-| sun        | :sun:           |
-| moon       | :moon:          |
-| shop       | :shop:          |
-| car        | :car:           |
-| wallet     | :wallet:        |
-| book       | :book:          |
-| language   | :language:      |
-| tag        | :tag:           |
-| tags       | :tags:          |
-| play       | :play:          |
-| pause      | :pause:         |
-| gear       | :gear:          |
-| gears      | :gears:         |
-| code       | :code:          |
-| comment    | :comment:       |
-| comments   | :comments:      |
-| spin       | :spin:          |
-| info       | :info:          |
-| upload     | :upload:        |
-| square     | :square:        |
-| table      | :table:         |
-| flag       | :flag:          |
-| shield     | :shield:        |
-
-## Brand Icon
-
-use brand icon: `brand.{icon_name}`
-
-|   **Name**   |      **Display**      |
-| ------------ | --------------------- |
-| github       | :brand.github:        |
-| gitlab       | :brand.gitlab:        |
-| apple        | :brand.apple:         |
-| android      | :brand.android:       |
-| google       | :brand.google:        |
-| paypal       | :brand.paypal:        |
-| twitter      | :brand.twitter:       |
-| instagram    | :brand.instagram:     |
-| facebook     | :brand.facebook:      |
-| linkedin     | :brand.linkedin:      |
-| twitch       | :brand.twitch:        |
-| discord      | :brand.discord:       |
-| telegram     | :brand.telegram:      |
-| tiktok       | :brand.tiktok:        |
-| steam        | :brand.steam:         |
-| amazon       | :brand.amazon:        |
-| vimeo        | :brand.vimeo:         |
-| apple-pay    | :brand.apple-pay:     |
-| google-pay   | :brand.google-pay:    |
-| zhihu        | :brand.zhihu:         |
-| bilibili     | :brand.bilibili:      |
-
-## Programming Icon
-
-use programming icon: `programming.{icon_name}`
-
-|   **Name**   |        **Display**        |
-| ------------ | ------------------------- |
-| rust         | :programming.rust:        |
-| python       | :programming.python:      |
-| java         | :programming.java:        |
-| golang       | :programming.golang:      |
-| php          | :programming.php:         |
-| swift        | :programming.swift:       |
-| node-js      | :programming.node-js:     |
-| css          | :programming.css:         |
-| bootstrap    | :programming.bootstrap:   |
-| docker       | :programming.docker:      |
-| react        | :programming.react:       |
-| vue          | :programming.vue:         |
-| angular      | :programming.angular:     |
-| html         | :programming.html:        |
-| javascript   | :programming.javascript:  |
+[All Supported Icons](/icons) - click icon to copy markdown content.
diff --git a/karaty/karaty.toml b/karaty/karaty.toml
@@ -22,6 +22,7 @@ content = [
     { text = "Home", page = "/" },
     { text = "Blog", page = "/blog" },
     { text = "Docs", page = "/docs" },
+    { text = "Icons", page = "/icons" },
     { text = "Roadmap", page = "/blog/roadmap" },
     { text = "About", list = [
         { text = "Author", page = "/author" },

diff --git a/karaty/public/config/routing.toml b/karaty/public/config/routing.toml
@@ -20,6 +20,10 @@ template = "blog::content"
 path = "/docs"
 redirect = "/docs/summary"
 
+[[routing]]
+path = "/icons"
+template = "karaty_docsite::icons"
+
 [[routing]]
 path = "/docs/:path"
 file = "posts/docs"