tinkr 0.0.43

Tinkr is a web framework for quickly building full-stack web applications with Leptos.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

use super::super::utilities::*;
use leptos::prelude::*;

const SIZE: u32 = 80;
const ELEMENTS: usize = 4;

/// Generate sunset colors from name and color palette
fn generate_sunset_colors(name: &str, colors: &[String]) -> Vec<String> {
    let num_from_name = hash_code(name);
    let range = colors.len();

    (0..ELEMENTS)
        .map(|i| get_random_color(num_from_name + (i as u32), colors, range))
        .collect()
}

/// Generate SVG string for sunset avatar
fn generate_sunset_svg(
    sunset_colors: &[String],
    size: u32,
    square: bool,
    name: &str,
    title: bool,
) -> String {
    let mask_id = format!("mask__{}", hash_code(name));
    let mask_rx = if square { 0 } else { SIZE * 2 };

    let title_element = if title {
        format!("<title>{}</title>", name)
    } else {
        String::new()
    };

    // Create unique gradient IDs based on name (remove spaces)
    let name_no_space = name.replace(" ", "");
    let gradient_id_0 = format!("gradient_paint0_linear_{}", name_no_space);
    let gradient_id_1 = format!("gradient_paint1_linear_{}", name_no_space);

    format!(
        "<svg viewBox=\"0 0 {0} {0}\" fill=\"none\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" width=\"{1}\" height=\"{1}\">\
         {2}\
         <mask id=\"{3}\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"{0}\" height=\"{0}\">\
         <rect width=\"{0}\" height=\"{0}\" rx=\"{4}\" fill=\"#FFFFFF\" />\
         </mask>\
         <g mask=\"url(#{3})\">\
         <path fill=\"url(#{5})\" d=\"M0 0h80v40H0z\" />\
         <path fill=\"url(#{6})\" d=\"M0 40h80v40H0z\" />\
         </g>\
         <defs>\
         <linearGradient id=\"{5}\" x1=\"{7}\" y1=\"0\" x2=\"{7}\" y2=\"{8}\">\
         <stop offset=\"0\" stop-color=\"{9}\" />\
         <stop offset=\"1\" stop-color=\"{10}\" />\
         </linearGradient>\
         <linearGradient id=\"{6}\" x1=\"{7}\" y1=\"{8}\" x2=\"{7}\" y2=\"{0}\">\
         <stop offset=\"0\" stop-color=\"{11}\" />\
         <stop offset=\"1\" stop-color=\"{12}\" />\
         </linearGradient>\
         </defs>\
         </svg>",
        SIZE,             // 0
        size,             // 1
        title_element,    // 2
        mask_id,          // 3
        mask_rx,          // 4
        gradient_id_0,    // 5
        gradient_id_1,    // 6
        SIZE / 2,         // 7 - x1, x2 (center)
        SIZE / 2,         // 8 - y2 for first gradient, y1 for second
        sunset_colors[0], // 9
        sunset_colors[1], // 10
        sunset_colors[2], // 11
        sunset_colors[3], // 12
    )
}

#[component]
pub fn BoringAvatarSunset(
    /// Name to generate avatar from
    name: String,
    /// Color palette
    #[prop(default = vec![
        "#92A1C6".to_string(),
        "#146A7C".to_string(),
        "#F0AB3D".to_string(),
        "#C271B4".to_string(),
        "#C20D90".to_string(),
    ])]
    colors: Vec<String>,
    /// Size of the avatar (width and height)
    #[prop(default = 40)]
    size: u32,
    /// Whether to use square corners instead of rounded
    #[prop(default = false)]
    square: bool,
    /// Whether to include a title element
    #[prop(default = false)]
    title: bool,
) -> impl IntoView {
    let sunset_colors = generate_sunset_colors(&name, &colors);
    let svg_string = generate_sunset_svg(&sunset_colors, size, square, &name, title);

    view! { <div inner_html=svg_string /> }
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn test_generate_sunset_colors() {
        let colors = vec![
            "#92A1C6".to_string(),
            "#146A7C".to_string(),
            "#F0AB3D".to_string(),
            "#C271B4".to_string(),
            "#C20D90".to_string(),
        ];

        let sunset_colors = generate_sunset_colors("test", &colors);

        assert_eq!(sunset_colors.len(), ELEMENTS);
        assert!(!sunset_colors[0].is_empty());
    }

    #[test]
    fn test_generate_sunset_svg() {
        let colors = vec![
            "#92A1C6".to_string(),
            "#146A7C".to_string(),
            "#F0AB3D".to_string(),
            "#C271B4".to_string(),
            "#C20D90".to_string(),
        ];

        let sunset_colors = generate_sunset_colors("test", &colors);
        let svg = generate_sunset_svg(&sunset_colors, 80, false, "test", false);

        assert!(svg.contains("<svg"));
        assert!(svg.contains("linearGradient"));
        assert!(svg.contains("stop-color"));
        assert!(svg.contains("</svg>"));
    }
}