♻️ Interactive v2 #1

Merged
LittleSheep merged 30 commits from refactor/v2 into master 2024-03-16 08:22:25 +00:00
2 changed files with 12 additions and 28 deletions
Showing only changes of commit 73aaa6af56 - Show all commits

View File

@ -1,31 +1,23 @@
<template> <template>
<div> <component
:is="props.brief ? RouterLink : 'div'"
:to="{ name: 'posts.details.articles', params: { alias: props.item?.alias } }"
>
<section v-if="!props.contentOnly" class="mb-2"> <section v-if="!props.contentOnly" class="mb-2">
<h1 class="text-lg font-bold">{{ props.item?.title }}</h1> <h1 class="text-lg font-bold">{{ props.item?.title }}</h1>
<div class="text-sm">{{ props.item?.description }}</div> <div class="text-sm">{{ props.item?.description }}</div>
</section> </section>
<div v-if="props.brief" class="mt-2">
<v-btn
append-icon="mdi-arrow-right"
variant="tonal"
size="small"
rounded="sm"
:to="{ name: 'posts.details.articles', params: { alias: props.item?.alias ?? 'not-found' } }"
>
Read more
</v-btn>
</div>
<div v-else> <div v-else>
<article class="prose max-w-none" v-html="parseContent(props.item?.content ?? '')" /> <article class="prose max-w-none" v-html="parseContent(props.item?.content ?? '')" />
</div> </div>
</div> </component>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import dompurify from "dompurify" import dompurify from "dompurify"
import { parse } from "marked" import { parse } from "marked"
import { RouterLink } from "vue-router"
const props = defineProps<{ item: any; brief?: boolean; contentOnly?: boolean }>() const props = defineProps<{ item: any; brief?: boolean; contentOnly?: boolean }>()

View File

@ -1,24 +1,16 @@
<template> <template>
<div> <component
<article class="prose prose-moment" v-html="parseContent(props.item?.content ?? '')" /> :is="props.brief ? RouterLink : 'div'"
:to="{ name: 'posts.details.moments', params: { alias: props.item?.alias } }"
<div v-if="props.brief" class="my-1">
<v-btn
append-icon="mdi-arrow-right"
variant="tonal"
size="x-small"
rounded="sm"
:to="{ name: 'posts.details.moments', params: { alias: props.item?.alias ?? 'not-found' } }"
> >
More <article class="prose prose-moment" v-html="parseContent(props.item?.content ?? '')" />
</v-btn> </component>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import dompurify from "dompurify" import dompurify from "dompurify"
import { parse } from "marked" import { parse } from "marked"
import { RouterLink } from "vue-router"
const props = defineProps<{ item: any; brief?: boolean }>() const props = defineProps<{ item: any; brief?: boolean }>()