Something went wrong. Try again.
A simple to-do app focused on tasks that can be completed within a specific time span. taskline.tobinio.dev
Something went wrong. Try again.
2.1 kB · 96 lines
Vue
at rust-backend
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697<script setup lang="ts"> import { marked } from "marked";
const { t } = useI18n(); const note = defineModel<string>("note");
const isEditing = ref(note.value === ""); const render = useTemplateRef("render");
watch(isEditing, async () => { if (!isEditing.value) { render.value!.innerHTML = await marked.parse(note.value ?? ""); } });
onMounted(async () => { render.value!.innerHTML = await marked.parse(note.value ?? ""); });</script>
<template> <button class="top 0 hover:bg-secondary-hover bg-secondary absolute right-0 h-7 w-7 cursor-pointer rounded" type="button" @click.prevent="() => isEditing = !isEditing" > <div class="flex h-full items-center justify-center"> <Icon v-if="isEditing" name="material-symbols:visibility" /> <Icon v-else name="material-symbols:edit" /> </div> </button> <div class="w-full h-full"> <textarea v-if="isEditing" v-model="note" data-testid="note-input" class="border-secondary h-full w-full resize-none rounded border pl-1" :placeholder="t('note')" /> <div ref="render" class="markdown" :hidden="isEditing"></div> </div></template>
<style> @reference "~/assets/css/main.css";
.markdown { h1 { @apply mt-6 mb-4 text-3xl leading-tight font-bold; } h2 { @apply mt-6 mb-3 text-2xl leading-snug font-semibold; } h3 { @apply mt-5 mb-2 text-xl leading-snug font-semibold; } h4 { @apply mt-4 mb-2 text-lg font-medium; } p { @apply mb-4 text-base leading-relaxed; } a { @apply text-primary hover:underline; } ul { @apply mb-4 list-inside list-disc space-y-1;
ul { @apply pl-6; } } ol { @apply mb-4 list-inside list-decimal space-y-1;
ol { @apply pl-6; } } blockquote { @apply text-background border-secondary my-4 border-l-4 pl-4 italic; } code { @apply inline font-mono text-sm bg-secondary px-1 rounded; } pre { @apply bg-secondary overflow-x-auto rounded p-2 text-sm; } img { @apply my-4 rounded-lg; } hr { @apply border-secondary my-6 border-t; } }</style>