From 340fcc43dbab209f55f0272a896448f55f118b38 Mon Sep 17 00:00:00 2001 From: YuKun Liu Date: Sat, 7 Sep 2024 00:07:04 -0700 Subject: [PATCH] feat: add more icons --- docsite/Cargo.toml | 1 + docsite/src/lib.rs | 200 +++++++++++++++++++++++++ karaty/config/routing.toml | 4 + karaty/data/posts/docs/icons.md | 86 +---------- karaty/karaty.toml | 1 + karaty/public/config/routing.toml | 4 + karaty/public/data/posts/docs/icons.md | 86 +---------- karaty/public/karaty.toml | 1 + karaty/src/components/icon.rs | 18 +++ karaty/src/utils/template_loader.rs | 2 +- version.py | 3 +- 11 files changed, 234 insertions(+), 172 deletions(-) diff --git a/docsite/Cargo.toml b/docsite/Cargo.toml index b11dcfa..1d87569 100644 --- 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 index 7de8725..258e114 100644 --- 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) -> Element { @@ -161,10 +162,209 @@ pub fn HomePage(cx: Scope) -> Element { }) } +#[allow(non_snake_case)] +pub fn IconsPage(cx: Scope) -> 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 index d0cc5e4..d3057e6 100644 --- 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 index 42128eb..f604e30 100644 --- 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 index 3ff7b3b..e711fd1 100644 --- 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 index d0cc5e4..d3057e6 100644 --- 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" diff --git a/karaty/public/data/posts/docs/icons.md b/karaty/public/data/posts/docs/icons.md index 42128eb..f604e30 100644 --- a/karaty/public/data/posts/docs/icons.md +++ b/karaty/public/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/public/karaty.toml b/karaty/public/karaty.toml index 3ff7b3b..e711fd1 100644 --- a/karaty/public/karaty.toml +++ b/karaty/public/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/src/components/icon.rs b/karaty/src/components/icon.rs index 05d6731..ff222f2 100644 --- a/karaty/src/components/icon.rs +++ b/karaty/src/components/icon.rs @@ -32,6 +32,9 @@ pub fn Icon(cx: Scope) -> Element { "gitlab" => { rsx! { FIcon { class: "{class}", icon: fa_brands_icons::FaGitlab } } } + "linux" => { + rsx! { FIcon { class: "{class}", icon: fa_brands_icons::FaLinux } } + } "apple" => { rsx! { FIcon { class: "{class}", icon: fa_brands_icons::FaApple } } } @@ -71,6 +74,9 @@ pub fn Icon(cx: Scope) -> Element { "steam" => { rsx! { FIcon { class: "{class}", icon: fa_brands_icons::FaSteam } } } + "quora" => { + rsx! { FIcon { class: "{class}", icon: fa_brands_icons::FaQuora } } + } "vimeo" => { rsx! { FIcon { class: "{class}", icon: fa_brands_icons::FaVimeo } } } @@ -83,12 +89,18 @@ pub fn Icon(cx: Scope) -> Element { "amazon" => { rsx! { FIcon { class: "{class}", icon: fa_brands_icons::FaAmazon } } } + "ebay" => { + rsx! { FIcon { class: "{class}", icon: fa_brands_icons::FaEbay } } + } "zhihu" => { rsx! { FIcon { class: "{class}", icon: fa_brands_icons::FaZhihu } } } "bilibili" => { rsx! { FIcon { class: "{class}", icon: fa_brands_icons::FaBilibili } } } + "qq" => { + rsx! { FIcon { class: "{class}", icon: fa_brands_icons::FaQq } } + } _ => { rsx! { FIcon { class: "{class}", icon: fa_solid_icons::FaX } } } @@ -139,6 +151,9 @@ pub fn Icon(cx: Scope) -> Element { "javascript" => { rsx! { FIcon { class: "{class}", icon: fa_brands_icons::FaJs } } } + "npm" => { + rsx! { FIcon { class: "{class}", icon: fa_brands_icons::FaNpm } } + } _ => { rsx! { FIcon { class: "{class}", icon: fa_solid_icons::FaX } } } @@ -237,6 +252,9 @@ pub fn Icon(cx: Scope) -> Element { "shield" => { rsx! { FIcon { class: "{class}", icon: fa_solid_icons::FaShield } } } + "server" => { + rsx! { FIcon { class: "{class}", icon: fa_solid_icons::FaServer } } + } _ => { rsx! { FIcon { class: "{class}", icon: fa_solid_icons::FaX } } } diff --git a/karaty/src/utils/template_loader.rs b/karaty/src/utils/template_loader.rs index 187a841..8ed8600 100644 --- a/karaty/src/utils/template_loader.rs +++ b/karaty/src/utils/template_loader.rs @@ -1,7 +1,7 @@ use std::collections::HashMap; pub fn loader() -> HashMap { let mut templates: HashMap = HashMap::new(); - templates.insert("karaty_docsite".to_string(), karaty_docsite::export()); templates.insert("karaty_template".to_string(), karaty_template::export()); + templates.insert("karaty_docsite".to_string(), karaty_docsite::export()); templates } diff --git a/version.py b/version.py index 466282b..5f49e81 100644 --- a/version.py +++ b/version.py @@ -1,6 +1,7 @@ # -------------------------------- # this script for change all workshop's version info -# include: Cargo.toml and dependency +# include: Cargo.toml dependency +# usage: python3 version.py [version | null] # -------------------------------- import sys