uqbar-dao/nectar
1
1
Fork 0
mirror of https://github.com/uqbar-dao/nectar.git synced 2024-12-02 08:02:23 +03:00
Code Issues Packages Projects Releases Wiki Activity

widget styling

Browse Source
This commit is contained in:
Tobias Merkle 2024-05-30 16:48:37 -04:00
parent 68c6033001
commit eee375d794
2 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
kinode/packages/app_store/app_store/src/lib.rs
View File

@ -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 ? `<div
a.innerHTML = `<div
class="app-image rounded mr-2 grow"
style="background-image: url('${app.metadata.image}');"
></div>` : ''}
style="
background-image: url('${app.metadata.image || `/icons/${Math.floor(Math.random() * 10)}`}');
height: 92px;
width: 92px;
max-width: 33%;
"
></div>
<div class="app-info flex flex-col grow">
<h2 class="font-bold">${app.metadata.name}</h2>
<p>${app.metadata.description}</p>

26
kinode/packages/kino_updates/widget/src/lib.rs
View File

@ -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<KinodeBlogPost>) -> String {
scrollbar-width: none;
"
>
<p class="m-0 self-stretch text-center">Recent Posts</p>
{}
</div>
</body>
@ -96,7 +95,7 @@ fn create_widget(posts: Vec<KinodeBlogPost>) -> String {
);
}
fn fetch_three_most_recent_blog_posts() -> Vec<KinodeBlogPost> {
fn fetch_most_recent_blog_posts(n: usize) -> Vec<KinodeBlogPost> {
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<KinodeBlogPost> {
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#"<div class="post p-2 grow self-stretch flex items-stretch rounded-lg shadow bg-white/10 font-sans w-full">
r#"<a
class="post p-2 grow self-stretch flex items-stretch rounded-lg shadow bg-white/10 font-sans w-full"
href="https://kinode.org/blog/post/{}"
target="_blank"
rel="noopener noreferrer"
>
<div
class="post-image rounded mr-2 grow"
class="post-image rounded mr-2 grow self-stretch h-full"
style="background-image: url('https://kinode.org{}');"
></div>
<div class="post-info flex flex-col grow">
<h2 class="font-bold">{}</h2>
<p>{}</p>
<a href="https://kinode.org/blog/post/{}" class="text-blue-500" target="_blank" rel="noopener noreferrer">Read more</a>
</div>
</div>"#,
</a>"#,
post.slug,
post.thumbnail_image,
post.title,
trim_content(&post.content),
post.slug,
)
}