moved open logic to the commit component
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 1m40s

This commit is contained in:
christian 2024-05-19 16:35:59 +02:00
parent efedf27e70
commit 06e2860c51
6 changed files with 20 additions and 17 deletions

View File

@ -3,8 +3,8 @@
@tailwind utilities; @tailwind utilities;
body { body {
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; transition:
background-color 0.2s ease-in-out,
color 0.2s ease-in-out;
@apply bg-stone-100 dark:bg-gray-950 text-black dark:text-stone-100 text-center; @apply bg-stone-100 dark:bg-gray-950 text-black dark:text-stone-100 text-center;
} }

View File

@ -1,20 +1,25 @@
<script> <script>
import { AccordionItem } from 'flowbite-svelte'; import { AccordionItem } from 'flowbite-svelte';
import { Heading, Secondary } from 'flowbite-svelte';
import moment from 'moment'; import moment from 'moment';
export let isOpen = false; export let index;
export let link; export let link;
export let title; export let title;
export let description; export let description;
export let published; export let published;
const pubAgo = moment(published).fromNow(); const pubAgo = moment(published).fromNow();
const open = index === 0;
</script> </script>
<AccordionItem {...isOpen ? { open: true } : {}}> <AccordionItem {...open ? { open: true } : {}}>
<span slot="header">{@html title} - {pubAgo}</span> <span slot="header" class="flex justify-between items-center w-full">
<span>{@html title}</span>
<p class="text-xs mr-2">{pubAgo}</p>
</span>
<div class="flex flex-col"> <div class="flex flex-col">
{#if description} {#if description}
<p>with the message:</p> <p>with the message:</p>
<code>{@html description}</code> <code class="overflow-x-clip">{@html description}</code>
{/if} {/if}
<a class="hover:text-slate-100" href={link}>view commit for more details</a> <a class="hover:text-slate-100" href={link}>view commit for more details</a>
</div> </div>

View File

@ -62,13 +62,9 @@
<Spinner /> <Spinner />
{:else} {:else}
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<Accordion> <Accordion flush>
{#each feed.slice(0, 5) as commit, i} {#each feed.slice(0, 5) as commit, i}
{#if i === 0} <Commit {...commit} index={i} />
<Commit {...commit} isOpen={true} />
{:else}
<Commit {...commit} open={false} />
{/if}
{/each} {/each}
</Accordion> </Accordion>
</div> </div>

View File

@ -4,6 +4,7 @@
import ThemeSwitch from '$lib/ThemeSwitch.svelte'; import ThemeSwitch from '$lib/ThemeSwitch.svelte';
import '../app.css'; import '../app.css';
import CloudflareAnalytics from '../lib/CloudflareAnalytics.svelte'; import CloudflareAnalytics from '../lib/CloudflareAnalytics.svelte';
import { DarkMode } from 'flowbite-svelte';
// Navigation links are generated based on this object // Navigation links are generated based on this object
const nav = [ const nav = [
@ -73,7 +74,7 @@
{/each} {/each}
</ul> </ul>
{/key} {/key}
<ThemeSwitch /> <DarkMode />
</nav> </nav>
<div class="mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center"> <div class="mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
<slot /> <slot />

View File

@ -7,7 +7,8 @@
<div in:fade> <div in:fade>
<h1 class="text-2xl">Svelte Portfolio Page</h1> <h1 class="text-2xl">Svelte Portfolio Page</h1>
<p class="text-left">For this product i've used the following:</p> <p class="text-left">For this project i've used the following:</p>
<p class="text-left"> <p class="text-left">
<a <a
class="underline font-normal hover:text-slate-400" class="underline font-normal hover:text-slate-400"

View File

@ -2,7 +2,7 @@
export default { export default {
content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'], content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
plugins: [require('flowbite/plugin')], plugins: [require('flowbite/plugin')],
darkMode: 'selector', darkMode: 'class',
theme: { theme: {
extend: { extend: {
colors: { colors: {