34 |
35 | {"zzhack 的诞生"}
36 | 
45 |
54 |
55 | {"关于我"}
56 |
60 |
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/pages/home/.gitignore:
--------------------------------------------------------------------------------
1 | /target
2 | Cargo.lock
3 |
--------------------------------------------------------------------------------
/pages/home/Cargo.toml:
--------------------------------------------------------------------------------
1 | [package]
2 | name = "home"
3 | version = "0.1.0"
4 | edition = "2021"
5 |
6 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
7 |
8 | [dependencies]
9 | yew = "0.19.3"
10 | ui = {path = "../../ui"}
11 | utils = {path = "../../utils"}
12 | stylist = {version = "0.10", features = ["yew_integration"]}
13 | services = {path = "../../services"}
14 |
--------------------------------------------------------------------------------
/pages/home/src/lib.rs:
--------------------------------------------------------------------------------
1 | use services::post_service::post_service::{FilterTag, POST_SERVICE};
2 | use ui::image::ThemeImage;
3 | use ui::label::Label;
4 | use ui::link::Link;
5 | use ui::post_card::post_card::PostCard;
6 | use utils::use_style;
7 | use yew::prelude::*;
8 |
9 | #[function_component(Home)]
10 | pub fn home() -> Html {
11 | let style = use_style!(
12 | r"
13 | .banner {
14 | width: 100%;
15 | display: flex;
16 | justify-content: center;
17 | margin-top: 40px;
18 | }
19 |
20 | .banner > img {
21 | width: 100%;
22 | }
23 |
24 | .labels {
25 | width: 100%;
26 | display: flex;
27 | flex-wrap: wrap;
28 | margin-top: 33px;
29 | }
30 |
31 | .label {
32 | margin-left: 18px;
33 | }
34 |
35 | .posts {
36 | margin-bottom: 45px;
37 | margin-top: 39px;
38 | display: flex;
39 | flex-wrap: wrap;
40 | margin: 30px -18px 45px -18px;
41 | }
42 |
43 | @media (max-width: 600px) {
44 | .banner {
45 | width: 100%;
46 | margin-top: 32px;
47 | }
48 |
49 | .posts {
50 | display: flex;
51 | flex-direction: column;
52 | align-items: center;
53 | margin: 39px 0 45px 0;
54 | }
55 | }
56 | "
57 | );
58 | let posts = use_state_eq(|| POST_SERVICE.get_posts());
59 | let handle_filter_posts_by_label = {
60 | let posts = posts.clone();
61 |
62 | |tag: FilterTag| {
63 | Callback::from(move |_| {
64 | posts.set(POST_SERVICE.filter_post_by_tag(tag.clone()));
65 | })
66 | }
67 | };
68 | let handle_filter_posts_by_rest_label = handle_filter_posts_by_label.clone();
69 |
70 | html! {
71 |
37 |
44 | 38 | {"嗨！欢迎来到我的应用 zzhack 😎，这是一个兴趣使然的项目，zzhack 被设计为一个注重信息展示的应用，它是序列化和沉淀我思想的地方。"} 39 |
40 |41 | {"如你所见的 zzhack 已是第五个大版本，它已经经过了两次大规模的重构以及 5 次重新设计，最后回归纯真，专注信息展示。"} 42 |
43 |
45 | 46 | {"这么看下来 zzhack 的确没有什么让人惊讶的亮点，没有额外的用户交互，没有炫酷的交互动画，看上去只是一个平静的展示内容的 web 应用，但是它的确适合作为一个单纯的内容输出的站点，而不被逐渐社交化。"} 47 |
48 |49 | {"zzhack 是一个纯静态的应用，并且开源内容到代码的所有，如果你对它的技术实现感兴趣可以在 "} 50 | {"这里"} 51 | {" 找到它。"} 52 |
53 |57 | {"我叫 Mist，一名全栈工程师。"} 58 |
59 |
72 |
75 |
99 | }
100 | }
101 |
--------------------------------------------------------------------------------
/pages/links/Cargo.toml:
--------------------------------------------------------------------------------
1 | [package]
2 | name = "links"
3 | version = "0.1.0"
4 | edition = "2021"
5 |
6 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
7 |
8 | [dependencies]
9 | yew = "0.19.3"
10 | ui = {path = "../../ui"}
11 | utils = {path = "../../utils"}
12 | stylist = {version = "0.10", features = ["yew_integration"]}
13 | services = {path = "../../services"}
14 | router = {path = "../../router"}
15 |
--------------------------------------------------------------------------------
/pages/links/src/lib.rs:
--------------------------------------------------------------------------------
1 | use router::RootRoutes;
2 | use services::links_service::links_service::LINKS_SERVICE;
3 | use stylist::style;
4 | use ui::image::BaseImage;
5 | use ui::link::Link;
6 | use ui::link_card::LinkCard;
7 | use yew::prelude::*;
8 |
9 | #[function_component(Links)]
10 | pub fn links() -> Html {
11 | let style = style!(
12 | r"
13 | .banner {
14 | position: relative;
15 | margin-top: 63px;
16 | }
17 |
18 | .banner > img {
19 | width: 100%;
20 | height: 165.59px;
21 | }
22 |
23 | .banner__links {
24 | position: absolute;
25 | top: 45px;
26 | left: 35px;
27 | }
28 |
29 | .banner__links-title {
30 | color: #fff;
31 | font-size: 18px;
32 | }
33 |
34 | .banner__links-desc {
35 | color: rgba(255, 255, 255, 0.81);
36 | font-size: 14px;
37 | margin-top: 10px;
38 | width: 500px;
39 | line-height: 12px;
40 | }
41 |
42 | .banner__links-desc > a {
43 | color: var(--blue);
44 | font-size: 14px;
45 | }
46 |
47 | .links {
48 | margin: 0 -15px;
49 | display: flex;
50 | flex-wrap: wrap;
51 | margin-top: 50px;
52 | }
53 |
54 | @media (max-width: 600px) {
55 | .banner__links {
56 | top: auto;
57 | left: auto;
58 | bottom: 30px;
59 | width: 100%;
60 | word-break: break-all;
61 | padding: 0 20px;
62 | box-sizing: border-box;
63 | }
64 |
65 | .banner__links-desc {
66 | width: 100%;
67 | line-height: 20px;
68 | }
69 |
70 | .banner > img {
71 | height: 323.69px;
72 | }
73 |
74 | .links {
75 | width: 100%;
76 | margin: auto;
77 | margin-top: 20px;
78 | margin-bottom: 100px;
79 | }
80 |
81 | .links a {
82 | width: 100%;
83 | }
84 | }
85 | "
86 | )
87 | .unwrap();
88 |
89 | html! {
90 |
76 |
77 |
78 |
79 | {POST_SERVICE.get_tags().iter().map(|tag| {
80 | html! {
81 |
89 |
82 |
83 |
84 |
85 |
86 | }
87 | }).collect::()}
88 |
90 | {
91 | posts.iter().map(|post| {
92 | html! {
93 |
98 |
91 |
100 |
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/pages/not_found/.gitignore:
--------------------------------------------------------------------------------
1 | /target
2 | Cargo.lock
3 |
--------------------------------------------------------------------------------
/pages/not_found/Cargo.toml:
--------------------------------------------------------------------------------
1 | [package]
2 | name = "not_found"
3 | version = "0.1.0"
4 | edition = "2021"
5 |
6 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
7 |
8 | [dependencies]
9 | yew = "0.19.3"
10 | stylist = {version = "0.10", features = ["yew_integration"]}
11 |
--------------------------------------------------------------------------------
/pages/not_found/src/lib.rs:
--------------------------------------------------------------------------------
1 | use stylist::style;
2 | use yew::prelude::*;
3 |
4 | #[function_component(NotFound)]
5 | pub fn not_found() -> Html {
6 | let style = style!(
7 | r"
8 | padding-top: 100px;
9 | display: flex;
10 | flex-direction: column;
11 | align-items: center;
12 |
13 | & > img {
14 | width: 400px;
15 | }
16 |
17 | @media (max-width: 600px) {
18 | padding-top: 50px;
19 |
20 | & > img {
21 | width: 100%;
22 | }
23 | }
24 | "
25 | )
26 | .unwrap();
27 |
28 | html! {
29 |
101 | {
102 | LINKS_SERVICE.get_links_data().iter().map(|data| {
103 | html! {
104 |
109 |
30 | 
31 |
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/pages/post/Cargo.toml:
--------------------------------------------------------------------------------
1 | [package]
2 | name = "post"
3 | version = "0.1.0"
4 | edition = "2021"
5 |
6 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
7 |
8 | [dependencies]
9 | yew = "0.19.3"
10 | stylist = {version = "0.10", features = ["yew_integration"]}
11 | ui = {path = "../../ui"}
12 | services = {path = "../../services"}
13 | utils = {path = "../../utils"}
14 | web-sys = { version = "0.3", features = ["HtmlMetaElement", "Document", "Element", "DocumentFragment", "HtmlTemplateElement", "MediaQueryList"] }
15 | gloo-timers = "0.2.4"
16 |
--------------------------------------------------------------------------------
/pages/post/src/lib.rs:
--------------------------------------------------------------------------------
1 | use gloo_timers::callback::Timeout;
2 | use services::markdown_service::markdown_service::MarkdownService;
3 | use services::post_service::post_service::POST_SERVICE;
4 | use stylist::style;
5 | use ui::post_card_header::PostCardHeader;
6 | use yew::prelude::*;
7 |
8 | #[derive(Properties, Clone, PartialEq)]
9 | pub struct PostProps {
10 | pub filename: String,
11 | }
12 |
13 | #[function_component(Post)]
14 | pub fn post(props: &PostProps) -> Html {
15 | let post = POST_SERVICE.find_post_by_filename(&props.filename).unwrap();
16 | let style = style!(
17 | r#"
18 | width: 660px;
19 | height: 100%;
20 | padding: 63px 0;
21 | margin: auto;
22 |
23 | .post-header {
24 | width: 180px;
25 | }
26 |
27 | .modified-at {
28 | color: var(--tip-color);
29 | margin-top: 13px;
30 | font-size: 13px;
31 | }
32 |
33 | .title {
34 | font-size: 25px;
35 | color: var(--text-color);
36 | }
37 |
38 | .cover {
39 | width: 660px;
40 | height: 258px;
41 | background-image: url("${cover}");
42 | background-repeat: no-repeat;
43 | background-size: cover;
44 | background-position: 50% 50%;
45 | border-radius: 5px;
46 | margin: 30px 0;
47 | transition: all 0.2s ease-in;
48 | }
49 |
50 | @media (max-width: 600px) {
51 | width: 100%;
52 |
53 | .cover {
54 | width: 100%;
55 | height: 180px;
56 | }
57 | }
58 | "#,
59 | cover = post.metadata.cover.clone()
60 | )
61 | .unwrap();
62 | let post_body = MarkdownService::new(post.raw_content.clone().to_string());
63 | let post_body = post_body.parse_to_element("base16-ocean.dark");
64 |
65 | use_effect(move || {
66 | let timeout = Timeout::new(500, move || {
67 | position_heading_by_anchor();
68 | });
69 |
70 | || {
71 | timeout.forget();
72 | }
73 | });
74 |
75 | html! {
76 |
31 |
77 |
89 | }
90 | }
91 |
92 | fn position_heading_by_anchor() {
93 | let window = web_sys::window().unwrap();
94 | let document = window.document().unwrap();
95 | let location = document.location().unwrap();
96 | let hash = location.hash().unwrap();
97 |
98 | if hash != "" {
99 | return;
100 | }
101 |
102 | let heading_ele = document.get_element_by_id(&hash[1..]).unwrap();
103 |
104 | heading_ele.scroll_into_view();
105 | }
106 |
--------------------------------------------------------------------------------
/pages/projects/.gitignore:
--------------------------------------------------------------------------------
1 | /target
2 | Cargo.lock
3 |
--------------------------------------------------------------------------------
/pages/projects/Cargo.toml:
--------------------------------------------------------------------------------
1 | [package]
2 | name = "projects"
3 | version = "0.1.0"
4 | edition = "2021"
5 |
6 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
7 |
8 | [dependencies]
9 | yew = "0.19.3"
10 | stylist = {version = "0.10", features = ["yew_integration"]}
11 | ui = {path = "../../ui"}
12 | services = {path = "../../services"}
13 | utils = {path = "../../utils"}
14 |
--------------------------------------------------------------------------------
/pages/projects/src/lib.rs:
--------------------------------------------------------------------------------
1 | use services::projects_service::projects_service::Project;
2 | use services::projects_service::projects_service::PROJECTS_SERVICE;
3 | use stylist::style;
4 | use ui::contact::ContactType;
5 | use ui::image::ThemeImage;
6 | use ui::link::Link;
7 | use ui::ProjectCard;
8 | use utils::theme::is_on_mobile;
9 | use yew::prelude::*;
10 |
11 | #[function_component(Projects)]
12 | pub fn projects() -> Html {
13 | let style = style!(
14 | r"
15 | margin-top: 30px;
16 |
17 | & > a > img {
18 | width: 100%;
19 | }
20 |
21 | .alert{
22 | width: 100%;
23 | background-color: var(--alert-color);
24 | padding: 14px 19px;
25 | box-sizing: border-box;
26 | border-radius: 10px;
27 | margin: 15px 0;
28 | }
29 |
30 | .alert > p {
31 | color: var(--text-color);
32 | line-height: 20px;
33 | font-size: 13px;
34 | }
35 |
36 | .alert > p > a {
37 | line-height: 20px;
38 | font-size: 13px;
39 | color: var(--blue);
40 | }
41 |
42 | .cards {
43 | display: flex;
44 | justify-content: space-between;
45 | margin-top: 40px;
46 | margin-bottom: 45px;
47 | }
48 |
49 | @media (max-width: 600px) {
50 | .cards {
51 | flex-direction: column;
52 | }
53 | }
54 | "
55 | )
56 | .unwrap();
57 | let render_project_card = |projects: Vec
78 |
80 | {&post.modified_time}
81 |
82 | 83 | {&post.metadata.title} 84 |
85 |
86 | {Html::VRef(post_body.clone().into())}
87 |
88 |
73 | {render_project_card(odd)}
74 |
75 |
76 | {render_project_card(even)}
77 |
78 |
79 | }
80 | };
81 | let render_linear_flow = || -> Html {
82 | let projects = PROJECTS_SERVICE.get_projects();
83 |
84 | render_project_card(projects)
85 | };
86 |
87 | let render_target_vnode = if is_on_mobile() {
88 | render_linear_flow()
89 | } else {
90 | render_waterfall_flow()
91 | };
92 |
93 | html! {
94 |
95 |
96 |
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/posts/add_links.md:
--------------------------------------------------------------------------------
1 | ```metadata
2 | {
3 | "cover": "../app/assets/sources/links_cover.svg",
4 | "tag": "Help",
5 | "title": "如何申请友情链接"
6 | }
7 | ```
8 |
9 | Hii，欢迎来到我的站点，我很乐意跟你连接，你可以向我发起一个 PR 来进行友情链接的添加，你的网站将会被陈列在 [这里](/links)。
10 |
11 | 跟随以下几个步骤来将你的网站添加到 [友情链接](/links) 吧！
12 |
13 | #### 1. Fork & Update links
14 |
15 | Fork [zzhack](https://github.com/zzhack-stack/zzhack) 到你的 GitHub，修改 `/services/links_service/links.json` 添加你的网站信息。
16 |
17 | ```json
18 | {
19 | "links": [
20 | {
21 | "name": "Busyops博客",
22 | "addr": "https://busyops.com/",
23 | "desc": "Hello Moon",
24 | "logo": "https://busyops.com/images/avatar.jpg"
25 | },
26 | {
27 | "name": "Clay 的技术博客",
28 | "addr": "https://www.techgrow.cn",
29 | "desc": "用进废退 | 艺不压身",
30 | "logo": "https://www.techgrow.cn/img/head.jpg"
31 | },
32 | {
33 | "name": "Christine的博客",
34 | "desc": "虽然我不够优秀，但我从未放弃过努力。",
35 | "logo": "https://christine-only.github.io/blog/logo.png",
36 | "addr": "https://christine-only.github.io/blog/"
37 | },
38 | {
39 | "name": "Forever丿顾北博客",
40 | "addr": "https://forevergubei.gitee.io/myblod/",
41 | "desc": "一个追寻大佬脚步的小白",
42 | "logo": "https://forevergubei.gitee.io/myblod/logo.png"
43 | }
44 | // {
45 | // "name": "站点名称",
46 | // "addr": "站点链接",
47 | // "desc": "站点描述",
48 | // "logo": "站点 logo"
49 | // }，
50 | // <- 加到这里 :D
51 | ]
52 | }
53 | ```
54 |
55 | #### 2. 提交修改
56 |
57 | 通过 GitHub 创建一个 PR 合并到 `main`，等待 merge 后就能在 [友情链接](/links) 看到你的站点了。
58 |
59 | #### Final
60 |
61 | 如果你嫌上述步骤太麻烦也不要紧，将你的网站信息通过 [Email](mailto:mist.zzh@gmail.com) 发给我，我会在空闲的时候处理 :D。
62 |
--------------------------------------------------------------------------------
/posts/build_blog.md:
--------------------------------------------------------------------------------
1 | ```metadata
2 | {
3 | "cover": "../app/assets/sources/blog_cover.svg",
4 | "tag": "Genesis",
5 | "title": "构建静态纯粹的博客站点",
6 | "pined": true,
7 | "size": "large"
8 | }
9 | ```
10 |
11 | Hello World!
12 |
13 | 重构了好久的 zzhack 终于又又又上线了，这么久的从 UI 到整个架构的重构属实太长了，上线的第一篇创世文章想写清楚 zzhack 的构建和设计思路，有关该站点的建设动机可以移步到 [这里](/about)。
14 |
15 | 正如你看到的 zzhack 是一个纯正的 wasm 应用，它由 [Rust](https://www.rust-lang.org/) & [Yew](https://yew.rs/) 来作为技术栈进行搭建。
16 |
17 | [Rust](https://www.rust-lang.org/) 一个看似跟前端半毛钱不搭边的语言，为什么会渗透到前端的技术栈来，一切都要得益于 [Web Assembly](https://webassembly.org/)（后称 wasm），那什么是 wasm？在 wasm 官网上有这么一段简要的概括：
18 |
19 | > WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.
20 |
21 | 由此可见，wasm 被设计的初衷就是一个编译目标语言（Wasm is designed as a portable compilation target for programming languages），在此之前，很多语言也有尝试过把 JS 本身就当作一个编译目标，让自家的语言也能渗透进前端的技术栈，做到 full-stack language，比如 [Dart](https://dart.dev/) 的 [dart2js](https://dart.dev/tools/dart2js) 编译器，但 dart 的 webtool 做的并不是很理想，其根本原因在于从开发体验到执行性能来看并没有本质上的提升，这就导致大部分开发者还是倾向于用 JS 来进行开发，不仅性能跟 dart2js 编译出的 bundle 相差无几，在开发效率上得益于动态语言的天然优势，也把静态语言远远甩在身后。但 Dart 自家的 Angular 也天然支持 Dart 进行开发，那是另一回事了（作者觉得体验并不如用 TS 来搭配 Angular）。
22 |
23 | Wasm 出现的一个根本原因在于前端正在从 “脚本化” 踏入 “工程化”，日益复杂的前端项目不仅需要大部分的维护成本，在一些领域现有的性能已经满足不了，出现了动态语言的瓶颈。动态语言让编译过程无法去猜测变量的类型而去进行热优化，每一个类型的动态变更都会导致编译过程需要做一次去优化。当然期间也出现了诸如 [asm.js](http://asmjs.org/) 这样的编译目标，这里就不过多的进行介绍了。
24 |
25 | Wasm 让在浏览器里能跑的语言多了一种新的可能性并且带来了极高的性能，在一些需要高强度计算的场景可谓是及时雨，下图为fib 递归运算 js 和 wasm 的运行时间对比。
26 |
27 | ```
28 | fib(n) = fib(n - 1) + fib(n - 2)
29 | ```
30 |
31 | 
32 |
33 | 单个 fib 的例子可以看出计算性能几乎高了一倍。
34 |
35 | 当然这也给前端技术栈带来了更多的可能性，现在的浏览器不光能跑 JS 也能跑 wasm，这样只要有语言能提供编译到 wasm 目标的编译器，那这个语言就可以渗透进前端技术栈了！是不是光听着就兴奋无比！但事实却不尽人意，虽然 wasm 提供了比 js 更强的运算能力，但它的设计初衷并不是为了替代 js，而是作为一种新型的突破浏览器应用运算瓶颈的解决方案，这样一来，wasm 只能负责与计算有关的操作，换言之 wasm 并不能操作 dom，因此我们需要一个更聪明的打包工具链，将 dom 操作和计算运算逻辑分散开来，将有关 dom 的操作全部交给 js，执行运算的逻辑都交付给 wasm，再由 js 来负责调用 wasm 模块。
36 |
37 | 与此同时，现代前端开发体验除了良好的编码体验外，本地服务器 + 热更新是并不可少的，能提供这样接近于 js 的工具链的语言的生态少之又少，目前 Rust 的生态是最成熟的，出现了诸如 [Trunk](https://github.com/thedodd/trunk) 这类优秀的打包工具（该站点就是基于 [Trunk](https://github.com/thedodd/trunk) 打包的）。
38 |
39 | ## ViewModel?
40 | 介绍完了工具链，但还需要一个模板。
41 |
42 | 现代前端开发大多是 SPA 居多，后续的 SSR，SSG 等概念其实已经跟传统（直接利用模板引擎在服务端全部渲染完毕）的 SSR 等概念大不相同了。在交互居多的 web2.0 时代，前端要解决的首要难题是模型到视图的映射关系，希望模型的更新能尽快的更新到视图，完成一次视图的响应。现在很多所谓数据驱动的框架都帮我们做了这些事情，那在 Wasm 生态中，有没有诸如此类的框架呢？答案是有的！这就是 [Yew](https://yew.rs/)。
43 |
44 | 
45 |
46 | [Yew](https://yew.rs/) 是 Rust wasm 生态中的一环，利用 rust 强大的 macro，提供类似 jsx 的模板来表示 UI，提供媲美 React 的 jsx 的模板体验，虽然现在是 `0.19` 版本离稳定还有一段距离，但整个社区强大活力让我感到这个框架强大的生命力。
47 |
48 | 在 Yew 0.19 版本中支持了 function component，对比 0.18 的 component 写法更加简洁，一个 yew fc 大概是这样的：
49 |
50 | [ui/gradient_title.rs](https://github.com/zzhack-stack/zzhack)
51 |
52 | ```rust
53 | use stylist::style;
54 | use yew::prelude::*;
55 |
56 | #[derive(Properties, Clone, PartialEq)]
57 | pub struct GradientTitleProps {
58 | pub children: Children,
59 | }
60 |
61 | #[function_component(GradientTitle)]
62 | pub fn gradient_title(props: &GradientTitleProps) -> Html {
63 | let style = style!(
64 | r"
65 | display: flex;
66 | margin-bottom: 21px;
67 |
68 | .gradient-title__content {
69 | font-size: 29px;
70 | position: relative;
71 | }
72 |
73 | .gradient-title__content::before {
74 | content: '';
75 | width: 120%;
76 | display: block;
77 | height: 21px;
78 | border-radius: 100px;
79 | background: linear-gradient(90deg, #FF4AA8 0%, #F95D66 22%, #FE9C76 100%);
80 | position: absolute;
81 | z-index: -1;
82 | bottom: 0px;
83 | left: -5%;
84 | }
85 | "
86 | )
87 | .unwrap();
88 |
89 | html! {
90 |
99 |
106 | {"我会用业余时间维护一些开源项目，包括不限于奇思妙想的产品，提升开发者体验的工具，库，框架。我目前在思考于 UI Design 和想要用 ❤️ 做好一个产品。"}
100 |101 | {"如果你有任何相关的建议或者有趣问题的讨论，欢迎直接通过 "} 102 | {"邮件"} 103 | {" 联系我。"} 104 |
105 |
107 | {render_target_vnode}
108 |
109 |
91 |
95 | }
96 | }
97 | ```
98 |
99 | 需要注意的是这并不是另一个 React 的轮子，它更像一个具有 jsx 模板的 Rust 框架而已。
100 |
101 | ## 说说博客吧！
102 |
103 | 聊了那么多技术栈的东西，接下来转身来聊聊博客。
104 |
105 | 想要比较快速的搭建一个 blog，可能会想到 hexo 之类的工具，这些不在本文讨论的范畴内。但如果你想更高强度的 DIY 来搭建你的 blog site，可以接着看下去。
106 |
107 | 博客首先是一个内容展示平台，意味着应该会有不断更新的数据源，而搭建一个博客站点最首要的工作也应该是思考如何处理发布这些数据源的问题，是动态发布，还是静态发布。
108 |
109 | ### 动态发布
110 | 之前 zzhack V1.0 的数据源就是动态发布，这样做的好处是你可以将数据源和站点天然的隔离开来，不仅拥有更新数据源不用重新编译部署的能力，甚至在做跨端（这里指有多个客户端，比如 Web App，Native App 小程序等）的时候也能很方便的拿到数据源。
111 |
112 | 
113 |
114 | 在 zzhack v1.0 中，文章数据是由 GitHub issue 进行管理发布的，Issues 是一个天然的 Markdown 编辑器，并且 Issues 的 Labels 也能很好的帮助管理文章，进行分类归档。同时，GitHub API 提供了一套完整的关于 Issue 的 restful API 这样一来，客户端只需要通过 GitHub API 来获取对应的文章数据源进行渲染即可。
115 |
116 | 
117 |
118 | 这样看起来是很完美，发布渲染一气呵成，但鉴于国内的网络情况，访问 GitHub 实在太慢，经常超时，所以如果大陆的用户来访问 zzhack v1 会经常卡在一个 loading 状态（新文章）...
119 |
120 | 在 v3 的时候将这部分进行了改进，弃掉 GitHub Issues 来管理文章转而直接用一个 Git 仓库来管理，当 git 版本变更时触发 CI hook，将文章和文章里包含的静态资源统统上传到国内的 CDN，然后客户端再直接通过 CDN 获取文章数据，这样一来速度就会快很多了。
121 |
122 | 为此我专门用 py 写了个小 [CLI](https://github.com/zzhack-stack/zzhack-provider) 来进行发布动作(Archive)。
123 |
124 | 
125 |
126 |
127 | ### 静态发布
128 | 静态发布的优势也显而易见，就是简单方便速度快，不需要从远端拿额外的资源，文章和代码一起打包发布。传统的 JS 生态会很容易做这件事，丰富的打包生态只需要一个插件来帮助解析 md 模块，就能在依赖图里见到它们了 :D。
129 |
130 | 但是如果是 Rust 的 wasm 生态，Trunk 要做这样的事儿并不容易，其根本是因为 Trunk 并没有提供类似 Webpack 插件的机制，直接导致无法介入 Trunk 的编译过程，这部分就必须手动来搞了，于是我又写了个 [CLI](https://github.com/zzhack-stack/reducer)...
131 |
132 | 其思路是先在本地写文章，然后把所有文章都聚合起来当作一个 rs 文件载入源码，再在 trunk 热更新的时候触发一下载入的动作，应用可以通过 service 来读取这部分的内容，就可以做到愉快的静态发布文章了。
133 |
134 | 
135 |
136 | 一个自动生成的 `posts.rs` 看起来像:
137 |
138 | ```rust
139 | use std::*;
140 |
141 | #[derive(Clone)]
142 | pub struct PostFile {
143 | pub content: &'static str,
144 | pub modified_time: u128
145 | }
146 |
147 | pub static POSTS: [PostFile; 1] = [
148 | PostFile {
149 | content: include_str!("../../posts/build_blog.md"),
150 | modified_time: 1654596087967
151 | },
152 |
153 | ];
154 | ```
155 |
156 | ## 聊聊 Rust 的开发体验
157 | 最后最后，聊聊 Rust 开发 Web 的体验，虽然在性能上已经碾压 JS，内存控制更是没话说，但是开发体验并不如直接用 JS Stack 来写 WEB，这需要你通过 Rust 的思维来写 UI 的逻辑。
158 |
159 | 但是 Rust 太精致（安全）了，但是 WEB 通常不需要那么精致。
160 |
--------------------------------------------------------------------------------
/posts/mlog_2022-10-26.md:
--------------------------------------------------------------------------------
1 | ```metadata
2 | {
3 | "cover": "../app/assets/sources/mlog_cover.png",
4 | "tag": "碎碎念",
5 | "title": "飞贼"
6 | }
7 | ```
8 |
9 | 早上匆匆茫茫去买肠粉，走的时候跑的飞快忘记给钱了😅，估计老板都懵了，拿了肠粉就跑...
10 |
--------------------------------------------------------------------------------
/router/Cargo.toml:
--------------------------------------------------------------------------------
1 | [package]
2 | name = "router"
3 | version = "0.1.0"
4 | edition = "2021"
5 |
6 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
7 |
8 | [dependencies]
9 | yew-router = "0.16.0"
10 |
--------------------------------------------------------------------------------
/router/src/lib.rs:
--------------------------------------------------------------------------------
1 | use yew_router::prelude::*;
2 |
3 | #[derive(Clone, Routable, PartialEq, Debug)]
4 | pub enum RootRoutes {
5 | #[at("/home")]
6 | Home,
7 | #[at("/posts/:filename")]
8 | Post { filename: String },
9 | #[at("/")]
10 | Root,
11 | #[at("/projects")]
12 | Projects,
13 | #[at("/links")]
14 | Links,
15 | #[at("/about")]
16 | About,
17 | // Compatible with https://github.com/jetli/awesome-yew
18 | #[at("/technology")]
19 | Technology,
20 | #[not_found]
21 | #[at("/404")]
22 | NotFound,
23 | }
24 |
--------------------------------------------------------------------------------
/services/.gitignore:
--------------------------------------------------------------------------------
1 | /target
2 | Cargo.lock
3 |
--------------------------------------------------------------------------------
/services/Cargo.toml:
--------------------------------------------------------------------------------
1 | [package]
2 | name = "services"
3 | version = "0.1.0"
4 | edition = "2021"
5 |
6 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
7 |
8 | [dependencies]
9 | pulldown-cmark = "0.8.0"
10 | regex = "1.5.5"
11 | serde = "1.0.137"
12 | web-sys = { version = "0.3", features = ["HtmlMetaElement", "Document", "Element", "DocumentFragment", "HtmlTemplateElement", "MediaQueryList"] }
13 | serde_json = "1.0.64"
14 | once_cell = "1.10.0"
15 | yew = "0.19.3"
16 | material-yew = { git = "https://github.com/hamza1311/material-yew", features = ["full"] }
17 | lazy_static = "1.4.0"
18 | chrono = "0.4"
19 | urlencoding = "2.1.0"
20 | wasm-logger = "0.2.0"
21 | log = "0.4.17"
22 |
23 | [dependencies.syntect]
24 | version = "4.5"
25 | default-features = false
26 | features = [
27 | "html",
28 | "dump-load",
29 | "regex-fancy"
30 | ]
31 |
32 | [build-dependencies]
33 | syntect = { version = "4.5", default-features = false, features = ["default-fancy"] }
34 |
--------------------------------------------------------------------------------
/services/src/lib.rs:
--------------------------------------------------------------------------------
1 | pub mod links_service;
2 | pub mod markdown_service;
3 | pub mod post_service;
4 | pub mod posts;
5 | pub mod projects_service;
6 | pub mod theme_service;
7 | extern crate lazy_static;
8 |
--------------------------------------------------------------------------------
/services/src/links_service/links.json:
--------------------------------------------------------------------------------
1 | {
2 | "links": [
3 | {
4 | "name": "Clay 的技术博客",
5 | "addr": "https://www.techgrow.cn",
6 | "desc": "用进废退 | 艺不压身",
7 | "logo": "https://www.techgrow.cn/img/head.jpg"
8 | },
9 | {
10 | "name": "Christine的博客",
11 | "desc": "虽然我不够优秀，但我从未放弃过努力。",
12 | "logo": "https://christine-only.github.io/blog/logo.png",
13 | "addr": "https://christine-only.github.io/blog/"
14 | },
15 | {
16 | "name": "Forever丿顾北博客",
17 | "addr": "https://forevergubei.gitee.io/myblod/",
18 | "desc": "一个追寻大佬脚步的小白",
19 | "logo": "https://forevergubei.gitee.io/myblod/logo.png"
20 | },
21 | {
22 | "name": "MrDJun's Blog",
23 | "addr": "https://mrdjun.gitee.io/",
24 | "desc": "Just an ordinary JAVA programmer",
25 | "logo": "https://mrdjun.gitee.io/images/avatar.png"
26 | },
27 | {
28 | "name": "Fatpandac’s Blog",
29 | "addr": "https://www.fatpandac.com/",
30 | "desc": "不知道写啥的个人博客",
31 | "logo": "https://avatars.githubusercontent.com/u/30423976?v=4"
32 | },
33 | {
34 | "name": "低调小熊猫",
35 | "addr": "https://ilovey.live",
36 | "desc": "读万卷书，行万里路，赚很多钱",
37 | "logo": "https://uss.ilovey.live/img/avatar.jpg"
38 | },
39 | {
40 | "name": "风吹鼍鼓旌旗动",
41 | "addr": "http://idinr.com/",
42 | "desc": "有技术，有科学",
43 | "logo": "https://s2.loli.net/2022/06/15/d6MYUaVWf74sKIi.jpg"
44 | },
45 | {
46 | "name": "Levi's Blog",
47 | "addr": "https://www.jianshu.com/u/1fc674525eeb",
48 | "desc": "学的越多，懂的越少",
49 | "logo": "https://upload.jianshu.io/users/upload_avatars/10826765/5e06dfca-ff26-488c-a60c-79ca6504917a?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240"
50 | },
51 | {
52 | "name": "高耳机",
53 | "addr": "http://www.ragnaroks.site/",
54 | "desc": "青春有爱 年少有梦",
55 | "logo": "https://avatars.githubusercontent.com/u/7598199?v=4"
56 | },
57 | {
58 | "name": "Pseudoyu",
59 | "addr": "https://www.pseudoyu.com/",
60 | "desc": "Blockchain | Programming | Photography | Misty",
61 | "logo": "https://www.pseudoyu.com/images/author.webp"
62 | },
63 | {
64 | "name": "circlehotarux's blog",
65 | "addr": "https://www.circlehotarux.me/",
66 | "desc": "心诚则灵",
67 | "logo": "https://avatars.githubusercontent.com/u/48060080?v=4"
68 | },
69 | {
70 | "name": "小博's blog",
71 | "addr": "https://zhongbohuang.github.io/hzb-blog.github.io/",
72 | "desc": "记录知识，记录生活",
73 | "logo": "https://zhongbohuang.github.io/hzb-blog.github.io/img/avatar.png"
74 | },
75 | {
76 | "name": "绝对值の垃圾站",
77 | "addr": "https://absolutevalue.cc",
78 | "desc": "一个垃圾站，写点垃圾话",
79 | "logo": "https://bu.dusays.com/2022/10/11/63456cf24d191.png"
80 | },
81 | {
82 | "name": "SeerSu",
83 | "addr": "https://seersu.me",
84 | "desc": "留给自己一片大陆，把无垠的大海留给飞鸟和大鱼",
85 | "logo": "https://seersu.me/favicon/avatar.jpg"
86 | },
87 | {
88 | "name": "Scorpio's Blog",
89 | "addr": "http://0925.wang",
90 | "desc": "改掉拖延症~",
91 | "logo": "https://q.qlogo.cn/headimg_dl?bs=qq&dst_uin=1849748550@qq.com&src_uin=qq.feixue.me&fid=blog&spec=100&id=1000"
92 | },
93 | {
94 | "name": "一物一世界的 blog",
95 | "addr": "https://www.flyfrag.cn/",
96 | "desc": "太阳强烈，水波温柔",
97 | "logo": "https://avatars.githubusercontent.com/u/53332638?v=4"
98 | },
99 | {
100 | "name": "Airing's blog",
101 | "addr": "https://blog.ursb.me/",
102 | "desc": "我是一只小小小小熊",
103 | "logo": "https://airing.ursb.me/image/airing-face.png"
104 | }
105 | ]
106 | }
107 |
--------------------------------------------------------------------------------
/services/src/links_service/links_service.rs:
--------------------------------------------------------------------------------
1 | use once_cell::sync::Lazy;
2 | use serde::Deserialize;
3 | use serde_json;
4 | #[derive(Deserialize, Clone, PartialEq)]
5 | pub struct RawLinkData {
6 | pub links: Vec
92 | { props.children.clone() }
93 |
94 |
21 |
26 | {}
27 |
",
28 | code_block
29 | )
30 | }
31 |
32 | pub fn render_image(url: String, alt: String) -> String {
33 | format!(
34 | "
35 | 
36 | {}
37 |
",
38 | url, alt, url, alt
39 | )
40 | }
41 |
42 | pub fn render_github_render_block(github_render_block: GitHubRenderBlock) -> String {
43 | format!(
44 | "",
58 | github_render_block.url, github_render_block.repo, github_render_block.description
59 | )
60 | }
61 |
62 | pub fn render_spotlight(text: &str) -> String {
63 | format!(
64 | "
48 | 
54 |
65 |
",
67 | text
68 | )
69 | }
70 |
71 | pub fn render_code(code: String) -> String {
72 | format!("{}", code)
73 | }
74 |
--------------------------------------------------------------------------------
/services/src/markdown_service/mod.rs:
--------------------------------------------------------------------------------
1 | mod elements;
2 | pub mod markdown_service;
3 |
--------------------------------------------------------------------------------
/services/src/post_service/mod.rs:
--------------------------------------------------------------------------------
1 | pub mod post_card_size;
2 | pub mod post_service;
3 |
--------------------------------------------------------------------------------
/services/src/post_service/post_card_size.rs:
--------------------------------------------------------------------------------
1 | #[derive(PartialEq, Clone, Debug)]
2 | pub enum PostCardSize {
3 | Small,
4 | Large,
5 | }
6 |
7 | impl From{}
66 |
84 | {render_contacts}
85 |
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/ui/src/common/container.rs:
--------------------------------------------------------------------------------
1 | use crate::use_style;
2 | use yew::prelude::*;
3 |
4 | #[derive(Properties, Clone, Debug, PartialEq)]
5 | pub struct ContainerProps {
6 | pub children: Children,
7 | }
8 |
9 | #[function_component(Container)]
10 | pub fn container(props: &ContainerProps) -> Html {
11 | let style = use_style!(
12 | r"
13 | width: 100%;
14 | display: flex;
15 | justify-content: center;
16 |
17 | .container-box {
18 | width: 816px;
19 | box-sizing: border-box;
20 | }
21 |
22 | @media (max-width: 600px) {
23 | .container-box {
24 | min-width: 100%;
25 | width: 100%;
26 | padding: 0 22px;
27 | }
28 | }
29 | "
30 | );
31 |
32 | html! {
33 |
34 |
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/ui/src/common/footer.rs:
--------------------------------------------------------------------------------
1 | use crate::contact::{ContactType, Contacts};
2 | use crate::container::Container;
3 | use utils::use_style;
4 | use yew::prelude::*;
5 |
6 | #[function_component(Footer)]
7 | pub fn footer() -> Html {
8 | let style = use_style!(
9 | r"
10 | width: 100%;
11 | background: var(--base-color);
12 | padding-bottom: 18px;
13 |
14 | .contacts {
15 | margin-top: 31px;
16 | display: flex;
17 | align-items: center;
18 | justify-content: space-between;
19 | }
20 |
21 | .copyright {
22 | display: flex;
23 | justify-content: center;
24 | }
25 |
26 | .text {
27 | font-size: 14px;
28 | }
29 |
30 | @media (max-width: 600px) {
31 | .contacts {
32 | flex-direction: column;
33 | height: auto;
34 | padding-bottom: 30px;
35 | }
36 | }
37 | "
38 | );
39 |
40 | html! {
41 |
35 | {props.children.clone()}
36 |
37 |
42 |
43 |
56 |
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/ui/src/common/gradient_title.rs:
--------------------------------------------------------------------------------
1 | use stylist::style;
2 | use yew::prelude::*;
3 |
4 | #[derive(Properties, Clone, PartialEq)]
5 | pub struct GradientTitleProps {
6 | pub children: Children,
7 | }
8 |
9 | #[function_component(GradientTitle)]
10 | pub fn gradient_title(props: &GradientTitleProps) -> Html {
11 | let style = style!(
12 | r"
13 | display: flex;
14 | margin-bottom: 21px;
15 |
16 | .gradient-title__content {
17 | font-size: 29px;
18 | position: relative;
19 | }
20 |
21 | .gradient-title__content::before {
22 | content: '';
23 | width: 120%;
24 | display: block;
25 | height: 21px;
26 | border-radius: 100px;
27 | background: linear-gradient(90deg, #FF4AA8 0%, #F95D66 22%, #FE9C76 100%);
28 | position: absolute;
29 | z-index: -1;
30 | bottom: 0px;
31 | left: -5%;
32 | }
33 | "
34 | )
35 | .unwrap();
36 |
37 | html! {
38 |
44 |
55 |
45 |
53 |
46 |
49 | {"Powered by Rust & Yew"}
47 | {"Illustration by Icons 8 from Ouch!"}
48 |
50 |
52 | {"Copyright © 2021 Mist"}
54 |
39 |
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/ui/src/common/header/drawer.rs:
--------------------------------------------------------------------------------
1 | use crate::header::drawer_item::DrawerItem;
2 | use stylist::{css, yew::styled_component};
3 | use utils::html::render_with_insert_node;
4 | use yew::prelude::*;
5 |
6 | #[derive(Properties, Clone, PartialEq)]
7 | pub struct DrawerProps {
8 | pub is_open: UseStateHandle
40 | { props.children.clone() }
41 |
42 |
67 |
73 |
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/ui/src/common/header/drawer_item.rs:
--------------------------------------------------------------------------------
1 | use crate::link::Link;
2 | use router::RootRoutes;
3 | use utils::use_style;
4 | use yew::prelude::*;
5 |
6 | #[derive(Properties, Clone, PartialEq)]
7 | pub struct DrawerProps {
8 | pub lnk: RootRoutes,
9 | pub children: Children,
10 | }
11 |
12 | #[function_component(DrawerItem)]
13 | pub fn drawer_item(props: &DrawerProps) -> Html {
14 | let style = use_style!(
15 | r"
16 | padding: 12px 0;
17 | "
18 | );
19 |
20 | html! {
21 |
68 | {render_with_insert_node(&render_nodes, &html! {
69 |
70 | })}
71 |
72 |
22 | {props.children.clone()}
23 |
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/ui/src/common/header/header.rs:
--------------------------------------------------------------------------------
1 | use crate::contact::ContactType;
2 | use crate::container::Container;
3 | use crate::header::drawer::Drawer;
4 | use crate::header::drawer_item::DrawerItem;
5 | use crate::image::{Icon, ThemeImage};
6 | use crate::link::Link;
7 | use crate::modal::{modal::Modal, modal_content::ModalContent};
8 | use crate::theme_selector::ThemeSelector;
9 | use router::RootRoutes;
10 | use utils::resource::with_assets;
11 | use utils::theme::only_render_on_mobile;
12 | use utils::use_style;
13 | use yew::prelude::*;
14 |
15 | #[function_component(Header)]
16 | pub fn header() -> Html {
17 | let style = use_style!(
18 | r"
19 | width: 100%;
20 |
21 | .wrapper {
22 | height: 56px;
23 | justify-content: space-between;
24 | }
25 |
26 | .wrapper, .tabs, .left, .right, .setting-icon {
27 | display: flex;
28 | align-items: center;
29 | }
30 |
31 | .left img {
32 | height: 23px;
33 | display: flex;
34 | }
35 |
36 | .tabs {
37 | margin-left: 88px;
38 | }
39 |
40 | .tabs a {
41 | font-size: 14px;
42 | margin: 0 15px;
43 | }
44 |
45 | .setting-icon {
46 | margin-right: 19px;
47 | }
48 |
49 | .header {
50 | height:56px;
51 | width: 100%;
52 | background: var(--base-color);
53 | position: relative;
54 | z-index: 6;
55 | }
56 |
57 | @media (max-width: 600px) {
58 | .tabs {
59 | display: none;
60 | }
61 | }
62 | "
63 | );
64 | let control_theme_style = use_style!(
65 | r"
66 | display: flex;
67 | flex-direction: column;
68 | align-items: center;
69 |
70 | .control-theme__text {
71 | width: 100%;
72 | text-align: left;
73 | font-size: 14px;
74 | color: var(--sub-text-color);
75 | }
76 |
77 | .control-theme__img {
78 | width: 126px;
79 | }
80 |
81 | @media (max-width: 600px) {
82 | .control-theme__text {
83 | font-size: 12px;
84 | }
85 | }
86 | "
87 | );
88 | let is_open_drawer_handle = use_state_eq(|| false);
89 | let is_open_theme_modal = use_state_eq(|| false);
90 | let handle_drawer_click = {
91 | let is_open_drawer_handle = is_open_drawer_handle.clone();
92 |
93 | Callback::from(move |_| is_open_drawer_handle.set(!*is_open_drawer_handle))
94 | };
95 | let handle_setting_click = {
96 | let is_open_theme_modal = is_open_theme_modal.clone();
97 |
98 | Callback::from(move |_| is_open_theme_modal.set(!*is_open_theme_modal))
99 | };
100 |
101 | html! {
102 |
103 |
104 | {"Posts"}
105 | {"Projects"}
106 | {"About"}
107 | {"Links"}
108 |
109 |
136 |
137 |
143 |
144 |
145 | }
146 | }
147 |
--------------------------------------------------------------------------------
/ui/src/common/header/mod.rs:
--------------------------------------------------------------------------------
1 | pub mod drawer;
2 | pub mod drawer_item;
3 | pub mod header;
4 | pub use header::Header;
5 |
--------------------------------------------------------------------------------
/ui/src/common/image.rs:
--------------------------------------------------------------------------------
1 | use global::theme_context::ThemeContext;
2 | use material_yew::MatIconButton;
3 | use stylist::{style, yew::styled_component};
4 | use utils::resource::{with_assets, with_assets_by_theme};
5 | use utils::theme::with_reactive_source;
6 | use yew::prelude::*;
7 |
8 | #[derive(Properties, Clone, PartialEq)]
9 | pub struct ImageProps {
10 | pub source: &'static str,
11 | }
12 |
13 | #[derive(Properties, Clone, PartialEq)]
14 | pub struct ThemeImageProps {
15 | #[prop_or(false)]
16 | pub is_reactive: bool,
17 | pub source: &'static str,
18 | #[prop_or(String::from(""))]
19 | pub style: String,
20 | }
21 |
22 | #[derive(Properties, Clone, PartialEq)]
23 | pub struct IconProps {
24 | pub source: &'static str,
25 | #[prop_or(true)]
26 | pub has_theme: bool,
27 | pub size: i32,
28 | #[prop_or(String::from(""))]
29 | pub style: String,
30 | #[prop_or_default]
31 | pub onclick: Option
110 |
111 |
134 |
135 |
112 |
133 |
113 |
114 |
123 |
117 | {"Posts"}
118 | {"Projects"}
119 | {"About"}
120 | {"Links"}
121 |
122 |
124 |
132 |
139 | ![]({with_assets("switch_theme_guide.png")})
141 |
142 | {"你可以在任何地方通过开关随时修改你的主题"}
140 |
141 |
103 |
104 |
106 |
107 | }
108 | }
109 |
--------------------------------------------------------------------------------
/ui/src/common/layout.rs:
--------------------------------------------------------------------------------
1 | use super::{footer::Footer, header::Header};
2 | use crate::common::switch::ThemeSwitchBar;
3 | use crate::container::Container;
4 | use utils::use_style;
5 | use yew::prelude::*;
6 |
7 | #[derive(Properties, PartialEq)]
8 | pub struct BaseLayoutProps {
9 | pub children: Children,
10 | }
11 |
12 | #[function_component(BaseLayout)]
13 | pub fn base_layout(props: &BaseLayoutProps) -> Html {
14 | let style = use_style!(
15 | r"
16 | width: 100%;
17 | height: 100%;
18 | position: relative;
19 |
20 | .theme-switch-bar {
21 | position: absolute;
22 | right: -118px;
23 | top: 63px;
24 | }
25 |
26 | .page-outlet {
27 | min-height: calc(100vh - 100px);
28 | }
29 |
30 | @media (max-width: 600px) {
31 | .theme-switch-bar {
32 | position: static;
33 | }
34 | }
35 | "
36 | );
37 |
38 | html! {
39 | <>
40 |
43 |
46 |
50 |
47 | { props.children.clone() }
48 |
49 |
176 | {subtitle}
177 |
178 | },
179 | None => html! {},
180 | };
181 |
182 | let render_component = html! {
183 |
184 |
185 |
201 | };
202 |
203 | create_portal(
204 | html! {
205 | {render_component}
206 | },
207 | modal_host.into(),
208 | )
209 | }
210 |
211 | fn get_single_ele_from_vec_by_default(
212 | map: &HashMap<&'static str, Vec>,
213 | key: &'static str,
214 | ) -> Html {
215 | let vec = map.get(key).unwrap();
216 |
217 | match vec.get(0) {
218 | Some(vnode) => vnode.clone(),
219 | None => html! {},
220 | }
221 | }
222 |
223 | fn extract_nodes<'a>(
224 | children: &ChildrenRenderer
186 |
200 |
187 |
189 | 190 | {props.title} 191 | {render_subtitle} 192 |
193 | 196 |
197 | { nodes.get("action").unwrap().into_iter().map(|vnode| vnode.clone()).collect::() }
198 |
199 |
20 |
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/ui/src/common/modal/modal_content.rs:
--------------------------------------------------------------------------------
1 | use yew::prelude::*;
2 |
3 | #[derive(Properties, PartialEq, Clone)]
4 | pub struct ModalContentProps {
5 | pub children: Children,
6 | }
7 |
8 | #[function_component(ModalContent)]
9 | pub fn modal_content(props: &ModalContentProps) -> Html {
10 | html! {
11 | <>
12 | {props.children.clone()}
13 |
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/ui/src/common/switch.rs:
--------------------------------------------------------------------------------
1 | use global::theme_context::ThemeAction;
2 | use global::theme_context::ThemeContext;
3 | use services::theme_service::Theme;
4 | use stylist::yew::styled_component;
5 | use yew::prelude::*;
6 |
7 | #[styled_component(ThemeSwitchBar)]
8 | pub fn theme_switch_bar() -> Html {
9 | let theme_ctx = use_context::
90 |
98 | }
99 | }
100 |
--------------------------------------------------------------------------------
/ui/src/lib.rs:
--------------------------------------------------------------------------------
1 | pub mod common;
2 | pub mod link_card;
3 | pub mod post_card;
4 | pub mod project_card;
5 | pub mod theme;
6 |
7 | pub use common::*;
8 | pub use post_card::*;
9 | pub use project_card::*;
10 | pub use theme::*;
11 | use utils::use_style;
12 |
--------------------------------------------------------------------------------
/ui/src/link_card.rs:
--------------------------------------------------------------------------------
1 | use crate::link::Link;
2 | use services::links_service::links_service::LinkData;
3 | use stylist::style;
4 | use yew::prelude::*;
5 |
6 | #[derive(Properties, Clone, PartialEq)]
7 | pub struct LinkCardProps {
8 | pub link: LinkData,
9 | }
10 |
11 | #[function_component(LinkCard)]
12 | pub fn link_card(props: &LinkCardProps) -> Html {
13 | let style = style!(
14 | r"
15 | width: 250px;
16 | height: 98px;
17 | box-shadow: 0px 8px 50px 0px var(--card-shadow-color);
18 | background: var(--base-color);
19 | border-radius: 20px;
20 | margin: 0 15px;
21 | display: flex;
22 | align-items: center;
23 | padding: 10px 25px;
24 | box-sizing: border-box;
25 | margin-bottom: 25px;
26 |
27 |
28 | .logo {
29 | width: 55px;
30 | height: 55px;
31 | border-radius: 10px;
32 | }
33 |
34 | .link-info {
35 | margin-left: 12px;
36 | height: 60px;
37 | }
38 |
39 | .link-desc {
40 | font-size: 13px;
41 | color: var(--sub-text-color);
42 | line-height: 18px;
43 | -webkit-line-clamp: 2;
44 | -webkit-box-orient: vertical;
45 | overflow: hidden;
46 | height: 36px;
47 | text-overflow: ellipsis;
48 | display: -webkit-box;
49 | width: 150px;
50 | }
51 |
52 | .link-name {
53 | width: 150px;
54 | text-overflow: ellipsis;
55 | overflow: hidden;
56 | white-space: pre;
57 | }
58 |
59 | @media (max-width: 600px) {
60 | width: 100%;
61 | margin: auto;
62 | margin-bottom: 20px;
63 |
64 | .link-desc {
65 | width: 100%;
66 | }
67 |
68 | .link-name {
69 | width: 100%;
70 | }
71 | }
72 | "
73 | )
74 | .unwrap();
75 |
76 | html! {
77 |
78 |
91 | 
92 |
93 |
92 |
94 | 
95 |
96 |
97 |
95 |
79 | })
80 |
85 |
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/ui/src/post_card/label.rs:
--------------------------------------------------------------------------------
1 | use utils::use_style;
2 | use yew::prelude::*;
3 |
4 | #[derive(Properties, Clone, PartialEq)]
5 | pub struct LabelProps {
6 | pub text: String,
7 | }
8 |
9 | #[function_component(Label)]
10 | pub fn label(props: &LabelProps) -> Html {
11 | let style = use_style!(
12 | r"
13 | padding: 7px 10px;
14 | background: var(--label-color);
15 | height: 31px;
16 | border-radius: 8px;
17 | box-sizing: border-box;
18 | display: flex;
19 | align-items: center;
20 | margin-bottom: 10px;
21 |
22 | .label-icon {
23 | width: 13.9px;
24 | height: 13.9px;
25 | margin-right: 9px;
26 | }
27 |
28 | .label-text {
29 | font-size: 12.48px;
30 | color: var(--text-color);
31 | }
32 | "
33 | );
34 |
35 | html! {
36 |
81 |
84 | {&props.link.name}
82 | {&props.link.desc}
83 |
37 | 
38 |
39 | {&props.text}
40 |
41 |
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/ui/src/post_card/mod.rs:
--------------------------------------------------------------------------------
1 | pub mod label;
2 | pub mod post_card;
3 | pub mod post_card_header;
4 | pub mod post_card_large;
5 | pub mod post_card_small;
6 |
--------------------------------------------------------------------------------
/ui/src/post_card/post_card.rs:
--------------------------------------------------------------------------------
1 | use crate::post_card_large::PostCardLarge;
2 | use crate::post_card_small::PostCardSmall;
3 | use services::post_service::post_card_size::PostCardSize;
4 | use services::post_service::post_service::Post;
5 | use utils::theme::is_on_mobile;
6 | use yew::prelude::*;
7 |
8 | #[derive(PartialEq, Clone, Properties)]
9 | pub struct PostCardProps {
10 | pub post: Post,
11 | #[prop_or(PostCardSize::Large)]
12 | pub size: PostCardSize,
13 | }
14 |
15 | #[function_component(PostCard)]
16 | pub fn post_card(props: &PostCardProps) -> Html {
17 | if is_on_mobile() {
18 | return html! {
19 |
38 |
39 | {&props.text}
40 |
41 |
41 |
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/ui/src/post_card/post_card_large.rs:
--------------------------------------------------------------------------------
1 | use crate::link::Link;
2 | use crate::post_card_header::PostCardHeader;
3 | use router::RootRoutes;
4 | use services::post_service::post_service::Post;
5 | use stylist::style;
6 | use yew::prelude::*;
7 |
8 | #[derive(PartialEq, Clone, Properties)]
9 | pub struct PostCardLargeProps {
10 | pub post: Post,
11 | }
12 |
13 | #[function_component(PostCardLarge)]
14 | pub fn post_card_large(props: &PostCardLargeProps) -> Html {
15 | let style = style!(
16 | r#"
17 | height: 330px;
18 | display: flex;
19 | border-radius: 17px;
20 | background: var(--base-color);
21 | overflow: hidden;
22 | box-shadow: 0px 7px 43px 0px var(--card-shadow-color);
23 | margin: 0 18px;
24 | margin-bottom: 35px;
25 |
26 | .cover {
27 | flex-shrink: 0;
28 | width: 446.51px;
29 | height: 330px;
30 | background-image: url("${cover}");
31 | background-repeat: no-repeat;
32 | background-size: cover;
33 | background-position: 50% 50%;
34 | }
35 |
36 | .post-preview {
37 | margin-left: 40px;
38 | display: flex;
39 | flex-direction: column;
40 | justify-content: space-between;
41 | padding: 23px 25px 10px 0;
42 | }
43 |
44 | .post-preview__body {
45 | width: 100%;
46 | word-break: break-all;
47 | font-size: 14.48px;
48 | color: var(--sub-text-color);
49 | line-height: 25px;
50 | -webkit-line-clamp: 6;
51 | -webkit-box-orient: vertical;
52 | overflow: hidden;
53 | height: 156px;
54 | text-overflow: ellipsis;
55 | display: -webkit-box;
56 | }
57 |
58 | .post-preview__title {
59 | font-size: 23px;
60 | font-weight: 600;
61 | color: var(--text-color);
62 | line-height: 33px;
63 | margin-top: 25px;
64 | margin-bottom: 10px;
65 | }
66 |
67 | .modified-at {
68 | display: flex;
69 | width: 100%;
70 | justify-content: flex-end;
71 | color: var(--tip-color);
72 | font-size: 10px;
73 | line-height: 15px;
74 | margin-top: 10px;
75 | }
76 | "#,
77 | cover = props.post.metadata.cover.clone()
78 | )
79 | .unwrap();
80 |
81 | html! {
82 |
83 |
42 | 
43 |
44 |
45 |
46 |
43 |
44 |
84 |
85 |
94 |
95 | }
96 | }
97 |
--------------------------------------------------------------------------------
/ui/src/post_card/post_card_small.rs:
--------------------------------------------------------------------------------
1 | use crate::link::Link;
2 | use crate::post_card_header::PostCardHeader;
3 | use router::RootRoutes;
4 | use services::post_service::post_service::Post;
5 | use stylist::style;
6 | use yew::prelude::*;
7 |
8 | #[derive(Properties, Clone, PartialEq)]
9 | pub struct PostCardProps {
10 | pub post: Post,
11 | }
12 |
13 | #[function_component(PostCardSmall)]
14 | pub fn post_card_small(props: &PostCardProps) -> Html {
15 | let style = style!(
16 | r#"
17 | width: 250px;
18 | height: 350px;
19 | background: var(--base-color);
20 | box-shadow: 0px 7px 43px 0px var(--card-shadow-color);
21 | border-radius: 17.33px;
22 | box-sizing: border-box;
23 | padding: 18px;
24 | cursor: pointer;
25 | margin: 0 17px;
26 | margin-bottom: 35px;
27 |
28 | .cover {
29 | width: 236px;
30 | height: 134px;
31 | border-radius: 10px;
32 | margin: 13px -11px;
33 | margin-bottom: 0;
34 | background-image: url("${cover}");
35 | background-repeat: no-repeat;
36 | background-size: cover;
37 | background-position: 50% 50%;
38 | }
39 |
40 | .post-preview__title {
41 | font-size: 15.25px;
42 | font-weight: bold;
43 | color: var(--text-color);
44 | line-height: 26px;
45 | margin-top: 17px;
46 | }
47 |
48 | .post-preview__body {
49 | width: 100%;
50 | word-break: break-all;
51 | text-overflow: ellipsis;
52 | line-height: 22px;
53 | display: -webkit-box;
54 | -webkit-line-clamp: 3;
55 | -webkit-box-orient: vertical;
56 | overflow: hidden;
57 | margin-top: 4px;
58 | font-size: 14.48px;
59 | color: var(--sub-text-color);
60 | }
61 |
62 | .modified-at {
63 | color: var(--tip-color);
64 | font-size: 10px;
65 | line-height: 15px;
66 | margin-top: 10px;
67 | }
68 |
69 | @media (max-width: 600px) {
70 | width: 100%;
71 | margin: 0;
72 | margin-bottom: 33px;
73 |
74 | .cover {
75 | width: 100%;
76 | margin: 13px 0;
77 | }
78 | }
79 | "#,
80 | cover = props.post.metadata.cover.clone()
81 | )
82 | .unwrap();
83 |
84 | html! {
85 |
86 |
93 |
87 |
91 | {&props.post.metadata.title}
89 | {&props.post.desc}
90 | {&props.post.modified_time}
92 |
86 |
87 |
102 | }
103 | }
104 |
--------------------------------------------------------------------------------
/ui/src/project_card.rs:
--------------------------------------------------------------------------------
1 | use crate::link::Link;
2 | use router::RootRoutes;
3 | use services::projects_service::projects_service::Project;
4 | use stylist::style;
5 | use yew::prelude::*;
6 |
7 | #[derive(Properties, Clone, PartialEq)]
8 | pub struct ProjectCardProps {
9 | pub project: Project,
10 | }
11 |
12 | #[function_component(ProjectCard)]
13 | pub fn project_card(props: &ProjectCardProps) -> Html {
14 | let style = style!(
15 | r#"
16 | width: 384px;
17 | box-shadow: 0px 8px 50px 0px var(--card-shadow-color);
18 | border-radius: 8px;
19 | padding: 15px 20px;
20 | background-color: var(--base-color);
21 | box-sizing: border-box;
22 | margin-bottom: 30px;
23 |
24 | .name {
25 | font-size: 20px;
26 | color: var(text-color);
27 | }
28 |
29 | .desc {
30 | font-size: 13px;
31 | color: var(--sub-text-color);
32 | }
33 |
34 | .summary {
35 | word-break: break-all;
36 | -webkit-line-clamp: 9;
37 | -webkit-box-orient: vertical;
38 | overflow: hidden;
39 | text-overflow: ellipsis;
40 | display: -webkit-box;
41 | overflow: hidden;
42 | line-height: 25px;
43 | font-size: 14px;
44 | }
45 |
46 | .footer {
47 | text-align: right;
48 | font-size: 13px;
49 | margin-top: 10px;
50 | }
51 |
52 | .post-block {
53 | margin-top: 10px;
54 | }
55 |
56 | @media (max-width: 600px) {
57 | width: 100%;
58 | }
59 | "#
60 | )
61 | .unwrap();
62 |
63 | html! {
64 |
88 |
100 |
101 |
91 |
98 |
92 | {&props.post.metadata.title}
93 |
94 |
95 | {&props.post.desc}
96 |
97 | {&props.post.modified_time}
99 |
65 |
66 |
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/ui/src/theme/mod.rs:
--------------------------------------------------------------------------------
1 | pub mod theme_item;pub mod theme_selector;
2 |
--------------------------------------------------------------------------------
/ui/src/theme/theme_item.rs:
--------------------------------------------------------------------------------
1 | use services::theme_service::Theme;
2 | use stylist::style;
3 | use yew::prelude::*;
4 |
5 | #[derive(Properties, Clone, PartialEq)]
6 | pub struct ThemeItemProps {
7 | pub source: &'static str,
8 | pub text: &'static str,
9 | pub theme: Theme,
10 | pub is_pick: bool,
11 | pub onclick: Callback
67 | {&props.project.name}
68 |
69 |
70 | {&props.project.desc}
71 |
72 |
73 | {
74 | match &props.project.post {
75 | Some(post) => {
76 | html! {
77 |
78 |
79 |
86 |
87 | }
88 | },
89 | None => html! {},
90 | }
91 | }
92 |
80 | {&post.desc}
81 |
82 |
85 |
69 | 
70 | {props.text}
71 |
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/ui/src/theme/theme_selector.rs:
--------------------------------------------------------------------------------
1 | use crate::theme::theme_item::ThemeItem;
2 | use global::theme_context::ThemeAction;
3 | use global::theme_context::ThemeContext;
4 | use services::theme_service::Theme;
5 | use services::theme_service::ThemeService;
6 | use stylist::style;
7 | use yew::prelude::*;
8 |
9 | struct ThemeItemData {
10 | source: &'static str,
11 | text: &'static str,
12 | theme: Theme,
13 | }
14 |
15 | static THEME_ITEMS: &[ThemeItemData; 3] = &[
16 | ThemeItemData {
17 | source: "/images/light_mode_skeleton.png",
18 | text: "Light",
19 | theme: Theme::Light,
20 | },
21 | ThemeItemData {
22 | source: "/images/dark_mode_skeleton.png",
23 | text: "Dark",
24 | theme: Theme::Dark,
25 | },
26 | ThemeItemData {
27 | source: "/images/auto_mode_skeleton.png",
28 | text: "Follow OS",
29 | theme: Theme::Auto,
30 | },
31 | ];
32 |
33 | #[function_component(ThemeSelector)]
34 | pub fn theme_selector() -> Html {
35 | let current_theme = use_state_eq(|| ThemeService::get_theme_from_storage());
36 | let theme_ctx = use_context::
84 |
92 | }
93 | }
94 |
--------------------------------------------------------------------------------
/utils/.gitignore:
--------------------------------------------------------------------------------
1 | /target
2 | Cargo.lock
3 |
--------------------------------------------------------------------------------
/utils/Cargo.toml:
--------------------------------------------------------------------------------
1 | [package]
2 | name = "utils"
3 | version = "0.1.0"
4 | edition = "2021"
5 |
6 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
7 |
8 | [dependencies]
9 | web-sys = { version = "0.3", features = ["HtmlMetaElement", "Document", "Element", "DocumentFragment", "HtmlTemplateElement", "MediaQueryList"] }
10 | js-sys = "0.3.55"
11 | global = {path = "../global"}
12 | services = {path = "../services"}
13 | yew = "0.19.3"
14 | chrono = "0.4.19"
15 | wasm-bindgen = "0.2.80"
16 |
--------------------------------------------------------------------------------
/utils/src/error.rs:
--------------------------------------------------------------------------------
1 | use crate::console_log;
2 | use std::fmt::Display;
3 |
4 | pub trait ErrorDebug
85 | {THEME_ITEMS.into_iter().map(|data| {
86 | html! {
87 |
91 |