From eee375d794c94eb2d107151f6a92ee5e78b92524 Mon Sep 17 00:00:00 2001 From: Tobias Merkle Date: Thu, 30 May 2024 16:48:37 -0400 Subject: [PATCH 1/2] widget styling --- .../packages/app_store/app_store/src/lib.rs | 13 +++++++--- .../packages/kino_updates/widget/src/lib.rs | 26 +++++++++++-------- 2 files changed, 24 insertions(+), 15 deletions(-) diff --git a/kinode/packages/app_store/app_store/src/lib.rs b/kinode/packages/app_store/app_store/src/lib.rs index 1aafbfe0b..fe797c4e5 100644 --- a/kinode/packages/app_store/app_store/src/lib.rs +++ b/kinode/packages/app_store/app_store/src/lib.rs @@ -153,14 +153,19 @@ fn get_widget() -> String { const container = document.getElementById('latest-apps'); data.forEach(app => { const a = document.createElement('a'); - a.className = 'app p-2 grow self-stretch flex items-stretch rounded-lg shadow bg-white/10 hover:bg-white/20 font-sans cursor-pointer'; + a.className = 'app p-2 grow flex items-stretch rounded-lg shadow bg-white/10 hover:bg-white/20 font-sans cursor-pointer'; a.href = `/main:app_store:sys/app-details/${app.package}:${app.publisher}` a.target = '_blank'; a.rel = 'noopener noreferrer'; - a.innerHTML = `${app.metadata.image ? `
` : ''} + style=" + background-image: url('${app.metadata.image || `/icons/${Math.floor(Math.random() * 10)}`}'); + height: 92px; + width: 92px; + max-width: 33%; + " + >

${app.metadata.name}

${app.metadata.description}

diff --git a/kinode/packages/kino_updates/widget/src/lib.rs b/kinode/packages/kino_updates/widget/src/lib.rs index ddfaa21bb..371f64575 100644 --- a/kinode/packages/kino_updates/widget/src/lib.rs +++ b/kinode/packages/kino_updates/widget/src/lib.rs @@ -33,7 +33,7 @@ fn init(_our: Address) { serde_json::json!({ "Add": { "label": "KinoUpdates", - "widget": create_widget(fetch_three_most_recent_blog_posts()), + "widget": create_widget(fetch_most_recent_blog_posts(6)), } }) .to_string(), @@ -84,7 +84,6 @@ fn create_widget(posts: Vec) -> String { scrollbar-width: none; " > -

Recent Posts

{}
@@ -96,7 +95,7 @@ fn create_widget(posts: Vec) -> String { ); } -fn fetch_three_most_recent_blog_posts() -> Vec { +fn fetch_most_recent_blog_posts(n: usize) -> Vec { let blog_posts = match http::send_request_await_response( http::Method::GET, url::Url::parse("https://kinode.org/api/blog/posts").unwrap(), @@ -109,13 +108,14 @@ fn fetch_three_most_recent_blog_posts() -> Vec { Err(e) => panic!("Failed to fetch blog posts: {:?}", e), }; - blog_posts.into_iter().rev().take(3).collect() + blog_posts.into_iter().rev().take(n as usize).collect() } /// Take first 100 chars of a blog post and append "..." to the end fn trim_content(content: &str) -> String { - if content.len() > 100 { - format!("{}...", &content[..100]) + let len = 75; + if content.len() > len { + format!("{}...", &content[..len]) } else { content.to_string() } @@ -123,20 +123,24 @@ fn trim_content(content: &str) -> String { fn post_to_html_string(post: KinodeBlogPost) -> String { format!( - r#"
+ r#"
-
"#, + "#, + post.slug, post.thumbnail_image, post.title, trim_content(&post.content), - post.slug, ) } From f9e8d0ce9cb50f1348bcdf0a72dca7cfcfd3e544 Mon Sep 17 00:00:00 2001 From: Tobias Merkle Date: Thu, 30 May 2024 17:03:24 -0400 Subject: [PATCH 2/2] more style --- kinode/packages/app_store/app_store/src/lib.rs | 3 ++- kinode/packages/kino_updates/widget/src/lib.rs | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/kinode/packages/app_store/app_store/src/lib.rs b/kinode/packages/app_store/app_store/src/lib.rs index fe797c4e5..b1e23dd91 100644 --- a/kinode/packages/app_store/app_store/src/lib.rs +++ b/kinode/packages/app_store/app_store/src/lib.rs @@ -157,10 +157,11 @@ fn get_widget() -> String { a.href = `/main:app_store:sys/app-details/${app.package}:${app.publisher}` a.target = '_blank'; a.rel = 'noopener noreferrer'; + const iconLetter = app.metadata_hash.replace('0x', '')[0].toUpperCase(); a.innerHTML = `