news panel component

packages/gui/src/components/News/News.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import '$appcss';
+	import { getAllPosts } from '$libs/api/mock';
+	import type { AirtablePost } from '@tea/ui/types';
+	import { onMount } from 'svelte';
+
+	let news: AirtablePost[] = [];
+
+	onMount(async () => {
+		news = await getAllPosts();
+	});
+</script>
+
+<header class="flex items-center justify-between border border-gray bg-black p-4 text-primary">
+	<span>OPEN-SOURCE NEWS</span>
+	<a href="/" class="font-sono text-sm underline">Read more articles ></a>
+</header>
+
+<ul class="flex flex-col bg-black">
+	{#each news 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="p-4 font-sono">
+					<h1 class="text-xl text-primary">{article.title}</h1>
+					<p class="my-4 text-sm">{article.short_description}</p>
+					<a href={article.link} class="text-sm text-primary underline">Read more ...</a>
+				</section>
+			</article>
+		</li>
+	{/each}
+</ul>

packages/gui/src/libs/api/mock.ts

@@ -5,7 +5,7 @@
  * TODO:
  *  * make cors work with api.tea.xyz/v1
  */
-import type { Package, Review } from '@tea/ui/types';
+import type { Package, Review, AirtablePost } from '@tea/ui/types';
 import type { GUIPackage, Course } from '../types';
 import { PackageStates } from '../types';
 import { loremIpsum } from 'lorem-ipsum';
@@ -251,3 +251,49 @@ export async function getTopPackages(): Promise<GUIPackage[]> {
 		};
 	});
 }
+
+export async function getAllPosts(): Promise<AirtablePost[]> {
+	const posts: AirtablePost[] = [
+		{
+			airtable_record_id: 'a',
+			link: 'https://google.com',
+			title: 'Tea Inc releases game changing api!',
+			sub_title: 'lorem ipsum dolor sit amet',
+			short_description: 'lorem ipsum dolor sit amet',
+			thumb_image_url: '/images/bored-ape.png',
+			thumb_image_name: 'borred-api.png',
+			created_at: new Date(),
+			updated_at: new Date(),
+			published_at: new Date(),
+			tags: ['news']
+		},
+		{
+			airtable_record_id: 'b',
+			link: 'https://google.com',
+			title: 'Bored Ape not bored anymore',
+			sub_title: 'lorem ipsum dolor sit amet',
+			short_description: 'lorem ipsum dolor sit amet',
+			thumb_image_url: '/images/bored-ape.png',
+			thumb_image_name: 'borred-api.png',
+			created_at: new Date(),
+			updated_at: new Date(),
+			published_at: new Date(),
+			tags: ['news']
+		},
+		{
+			airtable_record_id: 'c',
+			link: 'https://google.com',
+			title: 'Markdown can be executed! hoohah!',
+			sub_title: 'lorem ipsum dolor sit amet',
+			short_description: 'lorem ipsum dolor sit amet',
+			thumb_image_url: '/images/bored-ape.png',
+			thumb_image_name: 'borred-api.png',
+			created_at: new Date(),
+			updated_at: new Date(),
+			published_at: new Date(),
+			tags: ['news']
+		}
+	];
+
+	return posts;
+}

packages/gui/src/libs/api/tauri.ts

@@ -19,6 +19,7 @@ import type { Package, Review } from '@tea/ui/types';
 import type { GUIPackage, Course } from '../types';
 import * as mock from './mock';
 import { PackageStates } from '../types';
+import { AirtablePost } from '../../../../ui/src/types';
 
 const username = 'user';
 const password = 'password';
@@ -147,3 +148,9 @@ export async function getTopPackages(): Promise<GUIPackage[]> {
 	const packages = await mock.getTopPackages();
 	return packages;
 }
+
+export async function getAllPosts(): Promise<AirtablePost[]> {
+	// add filter here someday: type = news | course
+	const posts = await mock.getAllPosts();
+	return posts;
+}

packages/gui/src/routes/+page.svelte

@@ -6,6 +6,7 @@
 	import FeaturedPackages from '$components/FeaturedPackages/FeaturedPackages.svelte';
 	import GettingStarted from '$components/GettingStarted/GettingStarted.svelte';
 	import TopPackages from '$components/TopPackages/TopPackages.svelte';
+	import News from '$components/News/News.svelte';
 	backLink.set('');
 </script>
 
@@ -20,6 +21,9 @@
 	<section class="mt-8">
 		<TopPackages />
 	</section>
+	<section class="mt-8">
+		<News />
+	</section>
 </div>
 
 <style>

packages/ui/src/types.ts

@@ -19,3 +19,17 @@ export interface Package {
 	installs: number;
 	reviews?: Review[];
 }
+
+export type AirtablePost = {
+	airtable_record_id: string;
+	title: string;
+	link: string;
+	sub_title: string;
+	short_description: string;
+	thumb_image_url: string;
+	thumb_image_name: string;
+	created_at: Date;
+	updated_at: Date;
+	published_at: Date;
+	tags: string[];
+};