mirror of
https://github.com/ivabus/gui
synced 2025-04-23 14:07:14 +03:00
merge Workshop and News into Resources (#280)
* #270 move workshop and news into resources --------- Co-authored-by: neil <neil@neils-MacBook-Pro.local>
This commit is contained in:
Neil
GitHub
parent
1154aa0dc5
commit
da1816660b
5 changed files with 103 additions and 27 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@tea/desktop",
|
||||
"version": "0.0.5",
|
||||
"version": "0.0.6",
|
||||
"private": true,
|
||||
"description": "tea gui app",
|
||||
"author": "tea.xyz",
|
||||
|
|
|
|||
58
modules/desktop/src/components/resources/resources.svelte
Normal file
58
modules/desktop/src/components/resources/resources.svelte
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<script lang="ts">
|
||||
import '$appcss';
|
||||
import { t } from '$libs/translations';
|
||||
import { postsStore } from '$libs/stores';
|
||||
import type { AirtablePost } from '@tea/ui/types';
|
||||
import Posts from '@tea/ui/posts/posts.svelte';
|
||||
import Preloader from '@tea/ui/Preloader/Preloader.svelte';
|
||||
|
||||
let posts: AirtablePost[] = [];
|
||||
|
||||
let tab: "ALL" | "ARTICLE" | "WORKSHOP" = "ALL";
|
||||
|
||||
const setPosts = (newPosts: AirtablePost[]) => {
|
||||
posts = tab === "ALL" ? newPosts : newPosts.filter((p) => p.tags.includes(tab));
|
||||
}
|
||||
|
||||
const switchTab = (nextTab: "ALL" | "ARTICLE" | "WORKSHOP") => {
|
||||
tab = nextTab;
|
||||
setPosts($postsStore);
|
||||
}
|
||||
|
||||
postsStore.subscribe(setPosts);
|
||||
</script>
|
||||
|
||||
<header class="flex items-center justify-between border border-gray bg-black p-4 text-primary">
|
||||
<div>{$t("home.resources")}</div>
|
||||
|
||||
<section class="border border-gray mr-2 rounded-sm h-10 text-gray font-thin flex">
|
||||
<button on:click={() => switchTab("ALL")} class={`px-2 ${tab === "ALL" && "active"}`}>{$t("common.all")}</button>
|
||||
<button on:click={() => switchTab("ARTICLE")} class={`px-2 ${tab === "ARTICLE" && "active"}`}>{$t("common.articles")}</button>
|
||||
<button on:click={() => switchTab("WORKSHOP")} class={`px-2 ${tab === "WORKSHOP" && "active"}`}>{$t("common.workshops")}</button>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
{#if posts.length}
|
||||
<Posts {posts} linkTarget="_blank" />
|
||||
{:else}
|
||||
<section class="border-gray h-64 border bg-black p-4">
|
||||
<Preloader />
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
|
||||
<style>
|
||||
button {
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
min-width: 120px;
|
||||
transition: 0.1s linear;
|
||||
}
|
||||
|
||||
button:hover, button.active {
|
||||
color: white;
|
||||
background-color: #8000ff;
|
||||
box-shadow: inset 0vw 0vw 0vw 0.223vw #1a1a1a !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,7 +12,8 @@
|
|||
"discover-title": "DISCOVER",
|
||||
"asset-title": "ASSET TYPE",
|
||||
"tutorials-title": "TUTORIALS",
|
||||
"os-news-title": "OPEN-SOURCE NEWS"
|
||||
"os-news-title": "OPEN-SOURCE NEWS",
|
||||
"resources": "Resources"
|
||||
},
|
||||
"package": {
|
||||
"top-list-title": "Top packages this week",
|
||||
|
|
@ -65,6 +66,11 @@
|
|||
"label": "Filters",
|
||||
"popularity": "Most popular",
|
||||
"most-recent": "Most recent"
|
||||
},
|
||||
"common": {
|
||||
"all": "All",
|
||||
"articles": "Articles",
|
||||
"workshops": "Workshops"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,22 +2,17 @@
|
|||
<script lang="ts">
|
||||
import '$appcss';
|
||||
import { t } from '$libs/translations';
|
||||
import PageHeader from '$components/page-header/page-header.svelte';
|
||||
import EssentialWorkshops from '$components/essential-workshops/essential-workshops.svelte';
|
||||
import Packages from '$components/packages/packages.svelte';
|
||||
import News from '$components/news/news.svelte';
|
||||
import Resources from '$components/resources/resources.svelte';
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<section class="mt-8 mb-8">
|
||||
<Packages title={$t("home.discover-title")}/>
|
||||
</section>
|
||||
<PageHeader coverUrl="/images/headers/header_bg_1.png">{$t("home.tutorials-title")}</PageHeader>
|
||||
<section class="mt-8 mb-8">
|
||||
<EssentialWorkshops title={$t("post.workshops-title")} ctaLabel={`${$t('post.article-more-cta')} >`} />
|
||||
</section>
|
||||
<PageHeader coverUrl="/images/headers/header_bg_1.png">{$t("home.os-news-title")}</PageHeader>
|
||||
<section class="mt-8">
|
||||
<News />
|
||||
<Resources/>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,44 @@
|
|||
<script lang="ts">
|
||||
import "../app.css";
|
||||
import type { AirtablePost } from "../types";
|
||||
import ImgLoader from "../img-loader/img-loader.svelte";
|
||||
|
||||
export let linkTarget = "";
|
||||
export let readMoreCta = "read more";
|
||||
export let posts: AirtablePost[] = [];
|
||||
export let linkTarget = "_blank";
|
||||
|
||||
const tagColorDict: { [key: string]: string } = {
|
||||
ARTICLE: "#FF00FF",
|
||||
WORKSHOP: "#2675F5"
|
||||
};
|
||||
</script>
|
||||
|
||||
<ul class="flex flex-col bg-black">
|
||||
{#each posts as article}
|
||||
<li class="border border-t-0 border-gray p-4">
|
||||
<article class="flex border border-gray">
|
||||
<figure class="w-1/3">
|
||||
<img src={article.thumb_image_url} alt={article.title} />
|
||||
</figure>
|
||||
<section class="w-2/3 p-4 font-sono">
|
||||
<h1 class="text-xl text-primary">{article.title}</h1>
|
||||
<p class="my-4 text-sm line-clamp-4">{article.short_description}</p>
|
||||
<a href={article.link} target={linkTarget} class="text-sm text-primary underline"
|
||||
>{readMoreCta} ...</a
|
||||
>
|
||||
</section>
|
||||
</article>
|
||||
</li>
|
||||
<a href={article.link} target={linkTarget}>
|
||||
<li class="border border-t-0 border-gray p-4 ">
|
||||
<article class="flex border border-gray transition-all hover:bg-gray">
|
||||
<ImgLoader
|
||||
style="height: 232px; width: 194px"
|
||||
class="pkg-image p-2"
|
||||
src={article.thumb_image_url}
|
||||
alt={article.title}
|
||||
/>
|
||||
<section class="flex-grow p-4 font-sono">
|
||||
<ul class="mb-4 flex">
|
||||
{#each article.tags as tag}
|
||||
<li
|
||||
class="rounded-sm px-2 text-xs"
|
||||
style={`background-color: ${tagColorDict[tag]}`}
|
||||
>
|
||||
{tag.toLowerCase()}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<h1 class="text-2xl text-primary">{article.title}</h1>
|
||||
<p class="my-4 text-sm line-clamp-4">{article.short_description}</p>
|
||||
</section>
|
||||
</article>
|
||||
</li>
|
||||
</a>
|
||||
{/each}
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Reference in a new issue