1use dioxus::prelude::*;
2use dioxus_retrouter::Link;
3use karaty_blueprint::{TemplateDataType, TemplateProps, Templates};
4use web_sys::{wasm_bindgen::JsValue, Blob};
5
6#[allow(non_snake_case)]
7pub fn HomePage(cx: Scope<TemplateProps>) -> Element {
8 let Navbar = cx.props.utility.navbar;
9 let Footer = cx.props.utility.footer;
10
11 cx.render(rsx! {
12 Navbar {}
13
14 main {
15 class: "flex flex-1 w-full flex-col items-center justify-center text-center px-4 sm:mt-14 mt-12 sm:mb-12 mb-8",
16 a {
17 class: "border rounded-2xl py-1 px-4 text-slate-500 dark:text-slate-300 text-sm mb-5 hover:scale-105 \
18 transition duration-300 ease-in-out",
19 href: "https://github.com/mrxiaozhuox/karaty",
20 rel: "noreferrer",
21 target: "_blank",
22 "If you enjoy this project please give us a star ⭐"
23 }
24 h1 {
25 class: "mx-auto max-w-4xl font-display text-5xl font-bold tracking-normal \
26 text-slate-900 dark:text-slate-200 sm:text-7xl",
27 span {
28 class: "relative whitespace-nowrap text-blue-600 dark:text-blue-400",
29 svg {
30 class: "absolute top-2/3 left-0 h-[0.58em] w-full fill-blue-300/70 dark:fill-blue-800/90",
31 "aria-hidden": "true",
32 "viewBox": "0 0 418 42",
33 "preserveAspectRatio": "none",
34 path {
35 d: "M203.371.916c-26.013-2.078-76.686 1.963-124.73 \
36 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 \
37 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 \
38 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 \
39 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 \
40 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 \
41 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 \
42 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 \
43 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5\
44 .556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11\
45 .629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 \
46 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z"
47 }
48 }
49 span {
50 class: "relative",
51 "Karaty.rs"
52 }
53 }
54 }
55 p {
56 class: "mx-auto mt-12 max-w-xl text-lg text-slate-700 dark:text-slate-200 leading-7",
57 "Karaty is a open-source static website generator. \
58 With its amazing flexibility, and support embedded Dioxus components."
59 }
60 div {
61 class: "sm:mt-10 mt-8",
62 a {
63 class: "bg-blue-600 dark:bg-blue-600 rounded-xl text-white dark:text-white font-medium px-4 py-3 \
64 hover:bg-blue-600/80 dark:hover:bg-blue-600/90",
65 href: "https://github.com/mrxiaozhuox/karaty/releases",
66 "Download"
67 }
68 Link {
69 class: "bg-black dark:bg-white rounded-xl text-white dark:text-black font-medium ml-2 px-4 py-3 \
70 hover:bg-black/80 dark:hover:bg-white/90",
71 to: "docs",
72 "Quick Start →"
73 }
74 }
75 }
76
77 div {
78 class: "container mx-auto",
79 hr {
80 class: "w-1/2 h-1 mx-auto my-4 bg-gray-100 border-0 rounded md:my-6 dark:bg-gray-700"
81 }
82 div {
83 class: "flex justify-center mb-2 md:mb-4 space-x-2",
84 img {
85 class: "w-24 md:w-36 h-auto",
86 src: "https://img.shields.io/github/v/release/mrxiaozhuox/karaty?style=for-the-badge&label=Latest%20Version"
87 }
88 img {
89 class: "w-24 md:w-36 h-auto",
90 src: "https://img.shields.io/github/actions/workflow/status/mrxiaozhuox/karaty/main.yml?style=for-the-badge&label=Workflow"
91 }
92 img {
93 class: "w-24 md:w-36 h-auto",
94 src: "https://img.shields.io/github/commit-activity/y/mrxiaozhuox/karaty?style=for-the-badge"
95 }
96 }
97
98 div {
99 class: "flex flex-wrap p-8",
100 div {
101 class: "w-full px-4 md:w-1/2 lg:w-1/3",
102 div {
103 class: "mb-5 rounded-xl h-52 py-8 px-7 dark:bg-gray-800 shadow-md \
104 transition-all hover:shadow-lg sm:p-9 lg:px-6 xl:px-9",
105 div {
106 class: "dark:text-white",
107 h3 {
108 class: "mb-4 text-xl font-bold sm:text-2xl lg:text-xl xl:text-2xl",
109 "Multi-File Support"
110 }
111 p {
112 class: "text-base font-medium text-body-color",
113 "You can use different templates to support different file types of rendering\
114 , such as Markdown, JSON or HTML."
115 }
116 }
117 }
118 }
119 div {
120 class: "w-full px-4 md:w-1/2 lg:w-1/3",
121 div {
122 class: "mb-5 rounded-xl h-52 py-8 px-7 dark:bg-gray-800 shadow-md \
123 transition-all hover:shadow-lg sm:p-9 lg:px-6 xl:px-9",
124 div {
125 class: "dark:text-white",
126 h3 {
127 class: "mb-4 text-xl font-bold sm:text-2xl lg:text-xl xl:text-2xl",
128 "Dioxus Components"
129 }
130 p {
131 class: "text-base font-medium text-body-color",
132 "Karaty allows you use Dioxus build your personal template, \
133 and you can import it into your website. (before build wasm file)"
134 }
135 }
136 }
137 }
138 div {
139 class: "w-full px-4 md:w-1/2 lg:w-1/3",
140 div {
141 class: "mb-5 rounded-xl h-52 py-8 px-7 dark:bg-gray-800 shadow-md
142 \transition-all hover:shadow-lg sm:p-9 lg:px-6 xl:px-9",
143 div {
144 class: "dark:text-white",
145 h3 {
146 class: "mb-4 text-xl font-bold sm:text-2xl lg:text-xl xl:text-2xl",
147 "Based on GitHub"
148 }
149 p {
150 class: "text-base font-medium text-body-color",
151 "With the deployment of GitHub Pages, Karaty will be able to give \
152 full play to all the performance."
153 }
154 }
155 }
156 }
157 }
158
159 }
160
161 Footer {}
162 })
163}
164
165#[allow(non_snake_case)]
166pub fn IconsPage(cx: Scope<TemplateProps>) -> Element {
167 let Navbar = cx.props.utility.navbar;
168 let Footer = cx.props.utility.footer;
169 let Markdown = cx.props.utility.renderers.get("markdown").unwrap().clone();
170
171 let solid = [
172 "house",
173 "user",
174 "music",
175 "heart",
176 "cloud",
177 "bell",
178 "globe",
179 "bug",
180 "sun",
181 "moon",
182 "shop",
183 "car",
184 "wallet",
185 "book",
186 "language",
187 "tag",
188 "tags",
189 "play",
190 "pause",
191 "gear",
192 "gears",
193 "code",
194 "comment",
195 "comments",
196 "spin",
197 "info",
198 "upload",
199 "square",
200 "table",
201 "flag",
202 "shield",
203 "server"
204 ];
205
206 let brand = [
207 "github",
208 "gitlab",
209 "linux",
210 "apple",
211 "android",
212 "google",
213 "paypal",
214 "twitter",
215 "instagram",
216 "facebook",
217 "linkedin",
218 "twitch",
219 "discord",
220 "telegram",
221 "tiktok",
222 "steam",
223 "amazon",
224 "vimeo",
225 "ebay",
226 "apple-pay",
227 "google-pay",
228 "zhihu",
229 "bilibili",
230 "qq",
231 ];
232
233 let programming = [
234 "rust",
235 "python",
236 "java",
237 "golang",
238 "php",
239 "swift",
240 "node-js",
241 "css",
242 "bootstrap",
243 "docker",
244 "react",
245 "vue",
246 "angular",
247 "html",
248 "javascript",
249 "npm",
250 ];
251
252 let solid_rendered = solid.iter().map(|name| {
253 let icon = format!(":{name}:");
254 let icon_name = name.to_string();
255 rsx! {
256 a {
257 class: "h-8 px-3 w-max flex gap-2 items-center \
258 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300 hover:bg-opacity-75 focus:bg-gray-300 \
259 focus:text-blue-900 active:text-primary active:bg-blue-100 disabled:bg-gray-100 disabled:text-gray-400 \
260 dark:bg-gray-700 dark:text-gray-300 dark:active:text-primary text-xs",
261 title: "{name}",
262 onclick: move |_| {
263 let nav = web_sys::window().unwrap().navigator();
264 let cp = nav.clipboard();
265 let _r = cp.write_text(&format!(":{}:", icon_name));
266 },
267 Markdown { content: icon, config: Default::default() }
268 }
269
270 }
271 });
272
273 let brand_rendered = brand.iter().map(|name| {
274 let icon = format!(":brand.{name}:");
275 let icon_name = name.to_string();
276 rsx! {
277 a {
278 class: "h-8 px-3 w-max flex gap-2 items-center \
279 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300 hover:bg-opacity-75 focus:bg-gray-300 \
280 focus:text-blue-900 active:text-primary active:bg-blue-100 disabled:bg-gray-100 disabled:text-gray-400 \
281 dark:bg-gray-700 dark:text-gray-300 dark:active:text-primary text-xs",
282 title: "{name}",
283 onclick: move |_| {
284 let nav = web_sys::window().unwrap().navigator();
285 let cp = nav.clipboard();
286 let _r = cp.write_text(&format!(":brand.{}:", icon_name));
287 },
288 Markdown { content: icon, config: Default::default() }
289 }
290
291 }
292 });
293
294
295 let programming_rendered = programming.iter().map(|name| {
296 let icon = format!(":programming.{name}:");
297 let icon_name = name.to_string();
298 rsx! {
299 a {
300 class: "h-8 px-3 w-max flex gap-2 items-center \
301 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300 hover:bg-opacity-75 focus:bg-gray-300 \
302 focus:text-blue-900 active:text-primary active:bg-blue-100 disabled:bg-gray-100 disabled:text-gray-400 \
303 dark:bg-gray-700 dark:text-gray-300 dark:active:text-primary text-xs",
304 title: "{name}",
305 onclick: move |_| {
306 let nav = web_sys::window().unwrap().navigator();
307 let cp = nav.clipboard();
308 let _r = cp.write_text(&format!(":programming.{}:", icon_name));
309 },
310 Markdown { content: icon, config: Default::default() }
311 }
312
313 }
314 });
315
316 cx.render(rsx! {
317 Navbar {}
318
319 div {
320 class: "container mx-auto",
321 div {
322 class: "my-4",
323 h2 {
324 class: "text-2xl font-mono font-bold dark:text-gray-200",
325 "Solid Icon"
326 }
327 hr { class: "h-px bg-gray-200 border-0 dark:bg-gray-700" }
328 }
329 div {
330 class: "grid grid-cols-[repeat(auto-fit,minmax(100px,1fr))] gap-4",
331 solid_rendered
332 }
333 div {
334 class: "mt-8 mb-4",
335 h2 {
336 class: "text-2xl font-mono font-bold dark:text-gray-200",
337 "Brand Icon"
338 }
339 hr { class: "h-px bg-gray-200 border-0 dark:bg-gray-700" }
340 }
341 div {
342 class: "grid grid-cols-[repeat(auto-fit,minmax(100px,1fr))] gap-4",
343 brand_rendered
344 }
345 div {
346 class: "mt-8 mb-4",
347 h2 {
348 class: "text-2xl font-mono font-bold dark:text-gray-200",
349 "Programming Icon"
350 }
351 hr { class: "h-px bg-gray-200 border-0 dark:bg-gray-700" }
352 }
353 div {
354 class: "grid grid-cols-[repeat(auto-fit,minmax(100px,1fr))] gap-4",
355 programming_rendered
356 }
357 }
358
359 Footer {}
360 })
361}
362
363pub fn export() -> Templates {
364 let mut list = Templates::new();
365
366 list.template("home", vec![TemplateDataType::Any], HomePage);
367 list.template("icons", vec![TemplateDataType::Any], IconsPage);
368
369 list
370}