feat: article editor core
This commit is contained in:
fsylvain committed
1 parent
d493a181e1
commit
a4734b2c91
55 files changed
+4186
-496
No files matched your search
+60
-20
@@ -60,7 +60,11 @@ const statTiles = computed(() => [
|
||||
|
||||
const recentArticles = computed(() =>
|
||||
[...articles.value]
|
||||
.sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
|
||||
.sort(
|
||||
(a, b) =>
|
||||
new Date(b.updated_at).getTime() -
|
||||
new Date(a.updated_at).getTime(),
|
||||
)
|
||||
.slice(0, RECENT_LIST_SIZE),
|
||||
)
|
||||
|
||||
@@ -115,7 +119,10 @@ onMounted(loadArticles)
|
||||
<div class="flex max-w-244 flex-col gap-5 lg:gap-7">
|
||||
<div class="flex flex-wrap items-end gap-4">
|
||||
<div class="flex min-w-50 flex-1 flex-col gap-1">
|
||||
<h1 data-testid="greeting" class="text-2xl font-semibold text-highlighted">
|
||||
<h1
|
||||
data-testid="greeting"
|
||||
class="text-2xl font-semibold text-highlighted"
|
||||
>
|
||||
{{ greeting }}
|
||||
</h1>
|
||||
<p class="text-base/5 text-muted">{{ subtitle }}</p>
|
||||
@@ -129,7 +136,12 @@ onMounted(loadArticles)
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<template v-if="(loadState === 'loading' && showSkeleton) || loadState === 'default'">
|
||||
<template
|
||||
v-if="
|
||||
(loadState === 'loading' && showSkeleton) ||
|
||||
loadState === 'default'
|
||||
"
|
||||
>
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div
|
||||
v-for="tile in statTiles"
|
||||
@@ -138,13 +150,18 @@ onMounted(loadArticles)
|
||||
class="flex flex-col gap-1 border border-default bg-default p-4"
|
||||
>
|
||||
<template v-if="loadState === 'loading'">
|
||||
<USkeleton class="h-7 w-10 rounded-none bg-accented" />
|
||||
<USkeleton class="h-3 w-17.5 rounded-none bg-accented" />
|
||||
<USkeleton
|
||||
class="h-7 w-10 rounded-none bg-accented"
|
||||
/>
|
||||
<USkeleton
|
||||
class="h-3 w-17.5 rounded-none bg-accented"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="text-2xl font-semibold text-highlighted">{{
|
||||
tile.value
|
||||
}}</span>
|
||||
<span
|
||||
class="text-2xl font-semibold text-highlighted"
|
||||
>{{ tile.value }}</span
|
||||
>
|
||||
<span class="text-muted">{{ tile.label }}</span>
|
||||
</template>
|
||||
</div>
|
||||
@@ -152,8 +169,13 @@ onMounted(loadArticles)
|
||||
|
||||
<section class="flex flex-col gap-2.5">
|
||||
<div class="flex items-baseline justify-between">
|
||||
<h2 class="text-lg font-semibold text-highlighted">Recently updated</h2>
|
||||
<RouterLink to="/article" class="text-toned underline underline-offset-3">
|
||||
<h2 class="text-lg font-semibold text-highlighted">
|
||||
Recently updated
|
||||
</h2>
|
||||
<RouterLink
|
||||
to="/article"
|
||||
class="text-toned underline underline-offset-3"
|
||||
>
|
||||
All articles
|
||||
</RouterLink>
|
||||
</div>
|
||||
@@ -167,21 +189,35 @@ onMounted(loadArticles)
|
||||
:key="n"
|
||||
class="flex min-h-13 items-center gap-3 border-t border-muted px-3 py-2 lg:min-h-11"
|
||||
>
|
||||
<USkeleton class="h-3 max-w-[60%] flex-1 rounded-none bg-accented" />
|
||||
<USkeleton class="h-5 w-14 rounded-none bg-accented" />
|
||||
<USkeleton
|
||||
class="h-3 max-w-[60%] flex-1 rounded-none bg-accented"
|
||||
/>
|
||||
<USkeleton
|
||||
class="h-5 w-14 rounded-none bg-accented"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ul v-else data-testid="recent-list" class="border border-default bg-default">
|
||||
<ul
|
||||
v-else
|
||||
data-testid="recent-list"
|
||||
class="border border-default bg-default"
|
||||
>
|
||||
<li v-for="article in recentArticles" :key="article.id">
|
||||
<RouterLink
|
||||
:to="`/article/${article.id}/edit`"
|
||||
class="flex min-h-13 items-center gap-3 border-t border-muted px-3 py-2 lg:min-h-11"
|
||||
>
|
||||
<span class="min-w-0 flex-1 truncate font-medium text-highlighted">
|
||||
<span
|
||||
class="min-w-0 flex-1 truncate font-medium text-highlighted"
|
||||
>
|
||||
{{ article.title }}
|
||||
</span>
|
||||
<ArticleStatusBadge :online="article.is_online" />
|
||||
<span class="hidden w-27.5 text-right text-muted lg:inline">
|
||||
<ArticleStatusBadge
|
||||
:online="article.is_online"
|
||||
/>
|
||||
<span
|
||||
class="hidden w-27.5 text-right text-muted lg:inline"
|
||||
>
|
||||
{{ formatRelativeDate(article.updated_at) }}
|
||||
</span>
|
||||
</RouterLink>
|
||||
@@ -242,17 +278,21 @@ onMounted(loadArticles)
|
||||
</template>
|
||||
</UAlert>
|
||||
|
||||
<div class="flex items-start gap-3.5 border border-default bg-default p-4">
|
||||
<div
|
||||
class="flex items-start gap-3.5 border border-default bg-default p-4"
|
||||
>
|
||||
<div
|
||||
class="flex size-9 shrink-0 items-center justify-center bg-secondary-200 text-primary-900 dark:bg-secondary-300"
|
||||
>
|
||||
<UIcon name="i-lucide-plug" class="size-4.5" />
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col gap-1">
|
||||
<h2 class="text-base/5 font-semibold text-highlighted">Connect your website</h2>
|
||||
<h2 class="text-base/5 font-semibold text-highlighted">
|
||||
Connect your website
|
||||
</h2>
|
||||
<p class="text-pretty text-muted">
|
||||
Your site reads published articles from RenewCMS. Share this guide with
|
||||
whoever builds it.
|
||||
Your site reads published articles from RenewCMS. Share
|
||||
this guide with whoever builds it.
|
||||
</p>
|
||||
<RouterLink
|
||||
to="/integration"
|
||||
|
||||
Reference in new issue
Block a user