63 lines
2.4 KiB
Svelte
63 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { notes } from '$lib';
|
|
import { stripMarkdown } from '$lib/markdown';
|
|
import { onMount } from 'svelte';
|
|
import Navigation from '$lib/components/Navigation.svelte';
|
|
|
|
onMount(() => {
|
|
notes.load();
|
|
return () => notes.add();
|
|
});
|
|
</script>
|
|
|
|
<Navigation />
|
|
|
|
<div class="container">
|
|
<section class="section">
|
|
<h1 class="title">My Notes</h1>
|
|
|
|
<div class="buttons">
|
|
<a href="/notes/new" class="button is-primary">
|
|
New Note
|
|
</a>
|
|
</div>
|
|
|
|
{#if $notes.length === 0}
|
|
<div class="notification is-info">
|
|
No notes yet. Create your first note!
|
|
</div>
|
|
{:else}
|
|
<div class="columns is-multiline">
|
|
{#each $notes as note}
|
|
<div class="column is-one-third">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<p class="title is-4">{note.title}</p>
|
|
<p class="subtitle is-6">
|
|
Last updated: {note.updatedAt.toLocaleDateString()}
|
|
</p>
|
|
<div class="content">
|
|
{#if note.content.length > 100}
|
|
{stripMarkdown(note.content.slice(0, 100))}...
|
|
{:else}
|
|
{stripMarkdown(note.content)}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<footer class="card-footer">
|
|
<a href="/notes/{note.id}" class="card-footer-item">View</a>
|
|
<a href="/notes/{note.id}?edit=true" class="card-footer-item">Edit</a>
|
|
<button
|
|
class="card-footer-item button is-ghost has-text-danger"
|
|
on:click={() => notes.delete(note.id)}
|
|
>
|
|
Delete
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</section>
|
|
</div>
|