Flowbite and commit feed #2

Merged
christian merged 3 commits from flowbite-svelte into main 2024-05-19 11:08:54 +00:00
3 changed files with 50 additions and 28 deletions
Showing only changes of commit f7e8a04e92 - Show all commits

View File

@ -1,24 +1,21 @@
<script>
import { AccordionItem } from 'flowbite-svelte';
import moment from 'moment';
export let isOpen = false;
export let link;
export let title;
export let description;
export let published;
export let author;
export let guid;
const pubAgo = moment(published).fromNow();
</script>
<div
class="block p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
>
<div class="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">
{@html title}
<AccordionItem {...isOpen ? { open: true } : {}}>
<span slot="header">{@html title} - {pubAgo}</span>
<div class="flex flex-col">
{#if description}
<p>with the message:</p>
<code>{description}</code>
{/if}
<a class="hover:text-slate-100" href={link}>view commit</a>
</div>
<div class="font-normal hover:text-slate-400">
{@html description}
</div>
<div>commited {pubAgo} by {@html author}</div>
<a class="hover:text-slate-400 underline" href={link}>view commit</a>
<div class="text-xs text-slate-400">guid:{guid}</div>
</div>
</AccordionItem>

View File

@ -4,6 +4,6 @@
</script>
<div>
<h2 class="text-xl mt-4 font-normal">Here are the last 5 commits:</h2>
<h2 class="text-xl mt-4 font-normal">Here are the 5 most recent commits</h2>
<RssFeed {url} />
</div>

View File

@ -2,13 +2,14 @@
import { onMount } from 'svelte';
import Spinner from './Spinner.svelte';
import Commit from './Commit.svelte';
import { Accordion } from 'flowbite-svelte';
export let url;
let feed = null;
let error = null;
async function fetchFeed() {
async function fetchFeed(url) {
try {
const response = await fetch(url);
if (!response.ok) {
@ -17,14 +18,32 @@
const text = await response.text();
const parser = new DOMParser();
const xml = parser.parseFromString(text, 'application/xml');
const items = Array.from(xml.querySelectorAll('item')).map((item) => ({
title: item.querySelector('title')?.textContent,
link: item.querySelector('link')?.textContent,
description: item.querySelector('description')?.textContent,
published: item.querySelector('pubDate')?.textContent,
author: item.querySelector('author')?.textContent,
guid: item.querySelector('guid')?.textContent
}));
const items = Array.from(xml.querySelectorAll('item')).map((item) => {
// Parse description
const descriptionElement = item.querySelector('description');
const descriptionContent = descriptionElement ? descriptionElement.textContent : '';
const tempDivDescription = document.createElement('div');
tempDivDescription.innerHTML = descriptionContent;
const firstLinkDescription = tempDivDescription.querySelector('a')
? tempDivDescription.querySelector('a').href
: '';
if (tempDivDescription.querySelector('a')) {
tempDivDescription.querySelector('a').remove();
}
const cleanedDescription = tempDivDescription.innerHTML.trim();
return {
title: item.querySelector('title')?.textContent,
description: cleanedDescription,
commit: firstLinkDescription,
link: item.querySelector('link')?.textContent,
published: item.querySelector('pubDate')?.textContent,
author: item.querySelector('author')?.textContent,
guid: item.querySelector('guid')?.textContent
};
});
feed = items;
} catch (err) {
error = err.message;
@ -32,7 +51,7 @@
}
onMount(() => {
fetchFeed();
fetchFeed(url);
});
</script>
@ -43,9 +62,15 @@
<Spinner />
{:else}
<div class="flex flex-col gap-2">
{#each feed.slice(0, 5) as commit}
<Commit {...commit} />
{/each}
<Accordion>
{#each feed.slice(0, 5) as commit, i}
{#if i === 0}
<Commit {...commit} isOpen={true} />
{:else}
<Commit {...commit} open={false} />
{/if}
{/each}
</Accordion>
</div>
{/if}
</div>