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

Merge pull request #408 from kinode-dao/tm/remove-tailwind-from-appstore-widget

Browse Source 
remove tailwind from appstore and kinoupdates widgets
This commit is contained in:
doria 2024-06-18 12:04:47 +09:00 committed by GitHub
commit b7b1ac4c38
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 142 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
kinode/packages/app_store/app_store/src/http_api.rs
View File

@ -60,20 +60,78 @@ pub fn init_frontend(our: &Address) {
fn make_widget() -> String {
return r#"<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
body {
color: white;
overflow: hidden;
}
#latest-apps {
display: flex;
flex-wrap: wrap;
padding: 0.5rem;
gap: 0.5rem;
align-items: center;
backdrop-filter: saturate(1.25);
border-radius: 0.75rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
height: 100vh;
width: 100vw;
overflow-y: auto;
scrollbar-color: transparent transparent;
scrollbar-width: none;
}
.app {
padding: 0.5rem;
display: flex;
flex-grow: 1;
align-items: stretch;
border-radius: 0.75rem;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
background-color: rgba(255, 255, 255, 0.1);
cursor: pointer;
font-family: sans-serif;
width: 100%;
}
.app:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.app-image {
background-size: cover;
border-radius: 0.75rem;
margin-right: 0.5rem;
flex-grow: 1;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 92px;
width: 92px;
max-width: 33%;
}
.app-info {
max-width: 67%
display: flex;
flex-direction: column;
flex-grow: 1;
max-width: 67%;
}
.app-info h2 {
font-weight: bold;
font-size: medium;
}
@media screen and (min-width: 500px) {
@ -84,15 +142,7 @@ fn make_widget() -> String {
</style>
</head>
<body class="text-white overflow-hidden">
<div
id="latest-apps"
class="flex flex-wrap p-2 gap-2 items-center backdrop-brightness-125 rounded-xl shadow-lg h-screen w-screen overflow-y-auto"
style="
scrollbar-color: transparent transparent;
scrollbar-width: none;
"
>
</div>
<div id="latest-apps"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
fetch('/main:app_store:sys/apps/listed', { credentials: 'include' })
@ -102,22 +152,19 @@ fn make_widget() -> String {
data.forEach(app => {
if (app.metadata) {
const a = document.createElement('a');
a.className = 'app p-2 grow flex items-stretch rounded-lg shadow bg-white/10 hover:bg-white/20 font-sans cursor-pointer';
a.className = 'app';
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 = `<div
class="app-image rounded mr-2 grow"
class="app-image"
style="
background-image: url('${app.metadata.image || `/icons/${iconLetter}`}');
height: 92px;
width: 92px;
max-width: 33%;
"
></div>
<div class="app-info flex flex-col grow">
<h2 class="font-bold">${app.metadata.name}</h2>
<div class="app-info">
<h2>${app.metadata.name}</h2>
<p>${app.metadata.description}</p>
</div>`;
container.appendChild(a);

107
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_most_recent_blog_posts(6)),
"widget": create_widget(fetch_most_recent_blog_posts(12)),
}
})
.to_string(),
@ -49,41 +49,86 @@ fn create_widget(posts: Vec<KinodeBlogPost>) -> String {
return format!(
r#"<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
<style>
* {{
box-sizing: border-box;
margin: 0;
padding: 0;
}}
a {{
text-decoration: none;
color: inherit;
}}
h2 {{
font-size: medium;
}}
body {{
color: white;
overflow: hidden;
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
gap: 0.5rem;
font-family: sans-serif;
}}
#latest-blog-posts {{
display: flex;
flex-direction: column;
padding: 0.5rem;
gap: 0.5rem;
backdrop-filter: brightness(1.25);
border-radius: 0.75rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
height: 100vh;
width: 100vw;
overflow-y: auto;
scrollbar-color: transparent transparent;
scrollbar-width: none;
align-self: stretch;
}}
.post {{
width: 100%;
display: flex;
gap: 8px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 0.5em;
padding: 0.5em;
}}
.post-image {{
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100px;
height: 100px;
border-radius: 4px;
}}
.post-info {{
max-width: 67%;
overflow: hidden;
}}
@media screen and (min-width: 500px) {{
.post {{
width: 100%;
}}
.post-image {{
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100px;
height: 100px;
border-radius: 16px;
}}
.post-info {{
max-width: 67%
}}
@media screen and (min-width: 500px) {{
.post {{
width: 49%;
}}
width: 49%;
}}
}}
</style>
</head>
<body class="text-white overflow-hidden h-screen w-screen flex flex-col gap-2">
<body class="text-white overflow-hidden">
<div
id="latest-blog-posts"
class="flex flex-col p-2 gap-2 backdrop-brightness-125 rounded-xl shadow-lg h-screen w-screen overflow-y-auto self-stretch"
style="
scrollbar-color: transparent transparent;
scrollbar-width: none;
"
>
">
{}
</div>
</body>
@ -123,17 +168,17 @@ fn trim_content(content: &str) -> String {
fn post_to_html_string(post: KinodeBlogPost) -> String {
format!(
r#"<a
class="post p-2 grow self-stretch flex items-stretch rounded-lg shadow bg-white/10 hover:bg-white/20 font-sans w-full"
r#"<a
class="post"
href="https://kinode.org/blog/post/{}"
target="_blank"
target="_blank"
rel="noopener noreferrer"
>
<div
class="post-image rounded mr-2 grow self-stretch h-full"
class="post-image"
style="background-image: url('https://kinode.org{}');"
></div>
<div class="post-info flex flex-col grow">
<div class="post-info">
<h2 class="font-bold">{}</h2>
<p>{}</p>
</div>