style: apply prettier formatting to all files
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { getArticles } from "$lib/services";
|
||||
export async function load({ fetch }) {
|
||||
return {
|
||||
articles: await getArticles(fetch),
|
||||
};
|
||||
return {
|
||||
articles: await getArticles(fetch),
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,63 +1,51 @@
|
||||
<script lang="ts">
|
||||
import { _ } from "svelte-i18n";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Card, CardContent } from "$lib/components/ui/card";
|
||||
import { Input } from "$lib/components/ui/input";
|
||||
import { _ } from "svelte-i18n";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Card, CardContent } from "$lib/components/ui/card";
|
||||
import { Input } from "$lib/components/ui/input";
|
||||
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
} from "$lib/components/ui/select";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
|
||||
|
||||
import TimeAgo from "javascript-time-ago";
|
||||
import type { Article } from "$lib/types";
|
||||
import { getAssetUrl } from "$lib/directus";
|
||||
import { calcReadingTime } from "$lib/utils.js";
|
||||
import Meta from "$lib/components/meta/meta.svelte";
|
||||
import TimeAgo from "javascript-time-ago";
|
||||
import type { Article } from "$lib/types";
|
||||
import { getAssetUrl } from "$lib/directus";
|
||||
import { calcReadingTime } from "$lib/utils.js";
|
||||
import Meta from "$lib/components/meta/meta.svelte";
|
||||
|
||||
let searchQuery = $state("");
|
||||
let categoryFilter = $state("all");
|
||||
let sortBy = $state("recent");
|
||||
let searchQuery = $state("");
|
||||
let categoryFilter = $state("all");
|
||||
let sortBy = $state("recent");
|
||||
|
||||
const timeAgo = new TimeAgo("en");
|
||||
const { data }: { data: { articles: Article[] } } = $props();
|
||||
const timeAgo = new TimeAgo("en");
|
||||
const { data }: { data: { articles: Article[] } } = $props();
|
||||
|
||||
const featuredArticle = data.articles.find((article) => article.featured);
|
||||
const featuredArticle = data.articles.find((article) => article.featured);
|
||||
|
||||
const filteredArticles = $derived(() => {
|
||||
return data.articles
|
||||
.filter((article) => {
|
||||
const matchesSearch =
|
||||
article.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
article.excerpt.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
article.author.first_name
|
||||
.toLowerCase()
|
||||
.includes(searchQuery.toLowerCase());
|
||||
const matchesCategory =
|
||||
categoryFilter === "all" || article.category === categoryFilter;
|
||||
return matchesSearch && matchesCategory;
|
||||
})
|
||||
.sort((a, b) => {
|
||||
if (sortBy === "recent")
|
||||
return (
|
||||
new Date(b.publish_date).getTime() -
|
||||
new Date(a.publish_date).getTime()
|
||||
);
|
||||
// if (sortBy === "popular")
|
||||
// return (
|
||||
// parseInt(b.views.replace(/[^\d]/g, "")) -
|
||||
// parseInt(a.views.replace(/[^\d]/g, ""))
|
||||
// );
|
||||
if (sortBy === "featured")
|
||||
return (b.featured ? 1 : 0) - (a.featured ? 1 : 0);
|
||||
return a.title.localeCompare(b.title);
|
||||
});
|
||||
});
|
||||
const filteredArticles = $derived(() => {
|
||||
return data.articles
|
||||
.filter((article) => {
|
||||
const matchesSearch =
|
||||
article.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
article.excerpt.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
article.author.first_name.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
const matchesCategory = categoryFilter === "all" || article.category === categoryFilter;
|
||||
return matchesSearch && matchesCategory;
|
||||
})
|
||||
.sort((a, b) => {
|
||||
if (sortBy === "recent")
|
||||
return new Date(b.publish_date).getTime() - new Date(a.publish_date).getTime();
|
||||
// if (sortBy === "popular")
|
||||
// return (
|
||||
// parseInt(b.views.replace(/[^\d]/g, "")) -
|
||||
// parseInt(a.views.replace(/[^\d]/g, ""))
|
||||
// );
|
||||
if (sortBy === "featured") return (b.featured ? 1 : 0) - (a.featured ? 1 : 0);
|
||||
return a.title.localeCompare(b.title);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<Meta title={$_('magazine.title')} description={$_('magazine.description')} />
|
||||
<Meta title={$_("magazine.title")} description={$_("magazine.description")} />
|
||||
|
||||
<div
|
||||
class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
|
||||
@@ -84,12 +72,12 @@ const filteredArticles = $derived(() => {
|
||||
<h1
|
||||
class="text-5xl md:text-7xl font-bold mb-8 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
|
||||
>
|
||||
{$_('magazine.title')}
|
||||
{$_("magazine.title")}
|
||||
</h1>
|
||||
<p
|
||||
class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto"
|
||||
>
|
||||
{$_('magazine.description')}
|
||||
{$_("magazine.description")}
|
||||
</p>
|
||||
<!-- Filters -->
|
||||
<div class="flex flex-col md:flex-row gap-4 max-w-4xl mx-auto">
|
||||
@@ -99,7 +87,7 @@ const filteredArticles = $derived(() => {
|
||||
class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
|
||||
></span>
|
||||
<Input
|
||||
placeholder={$_('magazine.search_placeholder')}
|
||||
placeholder={$_("magazine.search_placeholder")}
|
||||
bind:value={searchQuery}
|
||||
class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
|
||||
/>
|
||||
@@ -111,42 +99,28 @@ const filteredArticles = $derived(() => {
|
||||
class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
|
||||
>
|
||||
<span class="icon-[ri--filter-line] w-4 h-4 mr-2"></span>
|
||||
{categoryFilter === 'all'
|
||||
? $_('magazine.categories.all')
|
||||
: categoryFilter === 'photography'
|
||||
? $_('magazine.categories.photography')
|
||||
: categoryFilter === 'production'
|
||||
? $_('magazine.categories.production')
|
||||
: categoryFilter === 'interview'
|
||||
? $_('magazine.categories.interview')
|
||||
: categoryFilter === 'psychology'
|
||||
? $_('magazine.categories.psychology')
|
||||
: categoryFilter === 'trends'
|
||||
? $_('magazine.categories.trends')
|
||||
: $_('magazine.categories.spotlight')}
|
||||
{categoryFilter === "all"
|
||||
? $_("magazine.categories.all")
|
||||
: categoryFilter === "photography"
|
||||
? $_("magazine.categories.photography")
|
||||
: categoryFilter === "production"
|
||||
? $_("magazine.categories.production")
|
||||
: categoryFilter === "interview"
|
||||
? $_("magazine.categories.interview")
|
||||
: categoryFilter === "psychology"
|
||||
? $_("magazine.categories.psychology")
|
||||
: categoryFilter === "trends"
|
||||
? $_("magazine.categories.trends")
|
||||
: $_("magazine.categories.spotlight")}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all"
|
||||
>{$_('magazine.categories.all')}</SelectItem
|
||||
>
|
||||
<SelectItem value="photography"
|
||||
>{$_('magazine.categories.photography')}</SelectItem
|
||||
>
|
||||
<SelectItem value="production"
|
||||
>{$_('magazine.categories.production')}</SelectItem
|
||||
>
|
||||
<SelectItem value="interview"
|
||||
>{$_('magazine.categories.interview')}</SelectItem
|
||||
>
|
||||
<SelectItem value="psychology"
|
||||
>{$_('magazine.categories.psychology')}</SelectItem
|
||||
>
|
||||
<SelectItem value="trends"
|
||||
>{$_('magazine.categories.trends')}</SelectItem
|
||||
>
|
||||
<SelectItem value="spotlight"
|
||||
>{$_('magazine.categories.spotlight')}</SelectItem
|
||||
>
|
||||
<SelectItem value="all">{$_("magazine.categories.all")}</SelectItem>
|
||||
<SelectItem value="photography">{$_("magazine.categories.photography")}</SelectItem>
|
||||
<SelectItem value="production">{$_("magazine.categories.production")}</SelectItem>
|
||||
<SelectItem value="interview">{$_("magazine.categories.interview")}</SelectItem>
|
||||
<SelectItem value="psychology">{$_("magazine.categories.psychology")}</SelectItem>
|
||||
<SelectItem value="trends">{$_("magazine.categories.trends")}</SelectItem>
|
||||
<SelectItem value="spotlight">{$_("magazine.categories.spotlight")}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
@@ -155,25 +129,21 @@ const filteredArticles = $derived(() => {
|
||||
<SelectTrigger
|
||||
class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
|
||||
>
|
||||
{sortBy === 'recent'
|
||||
? $_('magazine.sort.recent')
|
||||
: sortBy === 'popular'
|
||||
? $_('magazine.sort.popular')
|
||||
: sortBy === 'featured'
|
||||
? $_('magazine.sort.featured')
|
||||
: $_('magazine.sort.name')}
|
||||
{sortBy === "recent"
|
||||
? $_("magazine.sort.recent")
|
||||
: sortBy === "popular"
|
||||
? $_("magazine.sort.popular")
|
||||
: sortBy === "featured"
|
||||
? $_("magazine.sort.featured")
|
||||
: $_("magazine.sort.name")}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="recent"
|
||||
>{$_('magazine.sort.recent')}</SelectItem
|
||||
>
|
||||
<SelectItem value="recent">{$_("magazine.sort.recent")}</SelectItem>
|
||||
<!-- <SelectItem value="popular"
|
||||
>{$_("magazine.sort.popular")}</SelectItem
|
||||
> -->
|
||||
<SelectItem value="featured"
|
||||
>{$_('magazine.sort.featured')}</SelectItem
|
||||
>
|
||||
<SelectItem value="name">{$_('magazine.sort.name')}</SelectItem>
|
||||
<SelectItem value="featured">{$_("magazine.sort.featured")}</SelectItem>
|
||||
<SelectItem value="name">{$_("magazine.sort.name")}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@@ -183,21 +153,21 @@ const filteredArticles = $derived(() => {
|
||||
|
||||
<div class="container mx-auto px-4 py-12">
|
||||
<!-- Featured Article -->
|
||||
{#if featuredArticle && categoryFilter === 'all' && !searchQuery}
|
||||
{#if featuredArticle && categoryFilter === "all" && !searchQuery}
|
||||
<Card
|
||||
class="py-0 mb-12 overflow-hidden bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-2xl shadow-primary/20"
|
||||
>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2">
|
||||
<div class="relative">
|
||||
<img
|
||||
src={getAssetUrl(featuredArticle.image, 'medium')}
|
||||
src={getAssetUrl(featuredArticle.image, "medium")}
|
||||
alt={featuredArticle.title}
|
||||
class="w-full h-96 object-cover"
|
||||
/>
|
||||
<div
|
||||
class="absolute top-4 left-4 bg-gradient-to-r from-primary to-accent text-white px-3 py-1 rounded-full text-sm font-medium"
|
||||
>
|
||||
{$_('magazine.featured')}
|
||||
{$_("magazine.featured")}
|
||||
</div>
|
||||
</div>
|
||||
<CardContent class="p-8 flex flex-col justify-center">
|
||||
@@ -208,13 +178,9 @@ const filteredArticles = $derived(() => {
|
||||
{featuredArticle.category}
|
||||
</span>
|
||||
</div>
|
||||
<h2
|
||||
class="text-2xl md:text-3xl font-bold mb-4 hover:text-primary transition-colors"
|
||||
>
|
||||
<h2 class="text-2xl md:text-3xl font-bold mb-4 hover:text-primary transition-colors">
|
||||
<button class="text-left">
|
||||
<a href="/article/{featuredArticle.slug}"
|
||||
>{featuredArticle.title}</a
|
||||
>
|
||||
<a href="/article/{featuredArticle.slug}">{featuredArticle.title}</a>
|
||||
</button>
|
||||
</h2>
|
||||
<p class="text-muted-foreground mb-6 text-lg leading-relaxed">
|
||||
@@ -223,26 +189,20 @@ const filteredArticles = $derived(() => {
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<img
|
||||
src={getAssetUrl(featuredArticle.author.avatar, 'mini')}
|
||||
src={getAssetUrl(featuredArticle.author.avatar, "mini")}
|
||||
alt={featuredArticle.author.first_name}
|
||||
class="w-10 h-10 rounded-full object-cover"
|
||||
/>
|
||||
<div>
|
||||
<p class="font-medium">{featuredArticle.author.first_name}</p>
|
||||
<div
|
||||
class="flex items-center gap-3 text-sm text-muted-foreground"
|
||||
>
|
||||
<span
|
||||
>{timeAgo.format(
|
||||
new Date(featuredArticle.publish_date)
|
||||
)}</span
|
||||
>
|
||||
<div class="flex items-center gap-3 text-sm text-muted-foreground">
|
||||
<span>{timeAgo.format(new Date(featuredArticle.publish_date))}</span>
|
||||
<span>•</span>
|
||||
<span
|
||||
>{$_('magazine.read_time', {
|
||||
>{$_("magazine.read_time", {
|
||||
values: {
|
||||
time: calcReadingTime(featuredArticle.content)
|
||||
}
|
||||
time: calcReadingTime(featuredArticle.content),
|
||||
},
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
@@ -250,8 +210,7 @@ const filteredArticles = $derived(() => {
|
||||
</div>
|
||||
<Button
|
||||
class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
|
||||
href="/magazine/{featuredArticle.slug}"
|
||||
>{$_('magazine.read_article')}</Button
|
||||
href="/magazine/{featuredArticle.slug}">{$_("magazine.read_article")}</Button
|
||||
>
|
||||
</div>
|
||||
</CardContent>
|
||||
@@ -267,7 +226,7 @@ const filteredArticles = $derived(() => {
|
||||
>
|
||||
<div class="relative">
|
||||
<img
|
||||
src={getAssetUrl(article.image, 'preview')}
|
||||
src={getAssetUrl(article.image, "preview")}
|
||||
alt={article.title}
|
||||
class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
@@ -287,7 +246,7 @@ const filteredArticles = $derived(() => {
|
||||
<div
|
||||
class="absolute top-3 right-3 bg-gradient-to-r from-primary to-accent text-white text-xs px-2 py-1 rounded-full"
|
||||
>
|
||||
{$_('magazine.featured')}
|
||||
{$_("magazine.featured")}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -307,9 +266,7 @@ const filteredArticles = $derived(() => {
|
||||
>
|
||||
<a href="/magazine/{article.slug}">{article.title}</a>
|
||||
</h3>
|
||||
<p
|
||||
class="text-muted-foreground text-sm line-clamp-3 leading-relaxed"
|
||||
>
|
||||
<p class="text-muted-foreground text-sm line-clamp-3 leading-relaxed">
|
||||
{article.excerpt}
|
||||
</p>
|
||||
</div>
|
||||
@@ -330,23 +287,21 @@ const filteredArticles = $derived(() => {
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<img
|
||||
src={getAssetUrl(article.author.avatar, 'mini')}
|
||||
src={getAssetUrl(article.author.avatar, "mini")}
|
||||
alt={article.author.first_name}
|
||||
class="w-8 h-8 rounded-full object-cover"
|
||||
/>
|
||||
<div>
|
||||
<p class="text-sm font-medium">{article.author.first_name}</p>
|
||||
<div
|
||||
class="flex items-center gap-2 text-xs text-muted-foreground"
|
||||
>
|
||||
<div class="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span class="icon-[ri--calendar-line] w-4 h-4"></span>
|
||||
{timeAgo.format(new Date(article.publish_date))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-muted-foreground">
|
||||
{$_('magazine.read_time', {
|
||||
values: { time: calcReadingTime(article.content) }
|
||||
{$_("magazine.read_time", {
|
||||
values: { time: calcReadingTime(article.content) },
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
@@ -356,8 +311,7 @@ const filteredArticles = $derived(() => {
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="w-full mt-4 border-primary/20 hover:bg-primary/10"
|
||||
href="/magazine/{article.slug}"
|
||||
>{$_('magazine.read_article')}</Button
|
||||
href="/magazine/{article.slug}">{$_("magazine.read_article")}</Button
|
||||
>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -367,17 +321,17 @@ const filteredArticles = $derived(() => {
|
||||
{#if filteredArticles().length === 0}
|
||||
<div class="text-center py-12">
|
||||
<p class="text-muted-foreground text-lg mb-4">
|
||||
{$_('magazine.no_results')}
|
||||
{$_("magazine.no_results")}
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
onclick={() => {
|
||||
searchQuery = '';
|
||||
categoryFilter = 'all';
|
||||
searchQuery = "";
|
||||
categoryFilter = "all";
|
||||
}}
|
||||
class="border-primary/20 hover:bg-primary/10"
|
||||
>
|
||||
{$_('magazine.clear_filters')}
|
||||
{$_("magazine.clear_filters")}
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { error } from "@sveltejs/kit";
|
||||
import { getArticleBySlug } from "$lib/services.js";
|
||||
export async function load({ fetch, params, locals }) {
|
||||
try {
|
||||
return {
|
||||
article: await getArticleBySlug(params.slug, fetch),
|
||||
authStatus: locals.authStatus,
|
||||
};
|
||||
} catch {
|
||||
error(404, "Article not found");
|
||||
}
|
||||
try {
|
||||
return {
|
||||
article: await getArticleBySlug(params.slug, fetch),
|
||||
authStatus: locals.authStatus,
|
||||
};
|
||||
} catch {
|
||||
error(404, "Article not found");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,86 +1,84 @@
|
||||
<script lang="ts">
|
||||
import { _ } from "svelte-i18n";
|
||||
import { page } from "$app/state";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Card, CardContent } from "$lib/components/ui/card";
|
||||
import { calcReadingTime } from "$lib/utils";
|
||||
import TimeAgo from "javascript-time-ago";
|
||||
import { getAssetUrl } from "$lib/directus";
|
||||
import Meta from "$lib/components/meta/meta.svelte";
|
||||
import PeonyBackground from "$lib/components/background/peony-background.svelte";
|
||||
import SharingPopupButton from "$lib/components/sharing-popup/sharing-popup-button.svelte";
|
||||
import { _ } from "svelte-i18n";
|
||||
import { page } from "$app/state";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Card, CardContent } from "$lib/components/ui/card";
|
||||
import { calcReadingTime } from "$lib/utils";
|
||||
import TimeAgo from "javascript-time-ago";
|
||||
import { getAssetUrl } from "$lib/directus";
|
||||
import Meta from "$lib/components/meta/meta.svelte";
|
||||
import PeonyBackground from "$lib/components/background/peony-background.svelte";
|
||||
import SharingPopupButton from "$lib/components/sharing-popup/sharing-popup-button.svelte";
|
||||
|
||||
const { data } = $props();
|
||||
const { data } = $props();
|
||||
|
||||
const timeAgo = new TimeAgo("en");
|
||||
const timeAgo = new TimeAgo("en");
|
||||
</script>
|
||||
|
||||
<Meta
|
||||
title={data.article.title}
|
||||
description={data.article.excerpt}
|
||||
image={getAssetUrl(data.article.image, "medium")!}
|
||||
title={data.article.title}
|
||||
description={data.article.excerpt}
|
||||
image={getAssetUrl(data.article.image, "medium")!}
|
||||
/>
|
||||
|
||||
<div
|
||||
class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
|
||||
class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
|
||||
>
|
||||
<PeonyBackground />
|
||||
<PeonyBackground />
|
||||
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Main Article -->
|
||||
<article class="lg:col-span-2">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<Button variant="ghost" href="/magazine" class="mb-6 hover:bg-primary/10"
|
||||
><span class="icon-[ri--arrow-left-long-line] w-4 h-4 mr-1"></span>{$_(
|
||||
"magazine.back",
|
||||
)}</Button
|
||||
>
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Main Article -->
|
||||
<article class="lg:col-span-2">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<Button variant="ghost" href="/magazine" class="mb-6 hover:bg-primary/10"
|
||||
><span class="icon-[ri--arrow-left-long-line] w-4 h-4 mr-1"></span>{$_(
|
||||
"magazine.back",
|
||||
)}</Button
|
||||
>
|
||||
|
||||
<!-- Category Badge -->
|
||||
<div class="mb-4">
|
||||
<span
|
||||
class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium capitalize"
|
||||
>
|
||||
{data.article.category}
|
||||
</span>
|
||||
</div>
|
||||
<!-- Category Badge -->
|
||||
<div class="mb-4">
|
||||
<span
|
||||
class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium capitalize"
|
||||
>
|
||||
{data.article.category}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 leading-tight">
|
||||
{data.article.title}
|
||||
</h1>
|
||||
<!-- Title -->
|
||||
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 leading-tight">
|
||||
{data.article.title}
|
||||
</h1>
|
||||
|
||||
<!-- Subtitle -->
|
||||
<p class="text-xl text-muted-foreground mb-6 leading-relaxed">
|
||||
{data.article.excerpt}
|
||||
</p>
|
||||
<!-- Subtitle -->
|
||||
<p class="text-xl text-muted-foreground mb-6 leading-relaxed">
|
||||
{data.article.excerpt}
|
||||
</p>
|
||||
|
||||
<!-- Meta Information -->
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-6 text-sm text-muted-foreground mb-6"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="icon-[ri--calendar-line] w-4 h-4"></span>
|
||||
{timeAgo.format(new Date(data.article.publish_date))}
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="icon-[ri--timer-2-line] w-4 h-4"></span>
|
||||
{$_("magazine.read_time", {
|
||||
values: {
|
||||
time: calcReadingTime(data.article.content),
|
||||
},
|
||||
})}
|
||||
</div>
|
||||
<!-- <div class="flex items-center gap-2">
|
||||
<!-- Meta Information -->
|
||||
<div class="flex flex-wrap items-center gap-6 text-sm text-muted-foreground mb-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="icon-[ri--calendar-line] w-4 h-4"></span>
|
||||
{timeAgo.format(new Date(data.article.publish_date))}
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="icon-[ri--timer-2-line] w-4 h-4"></span>
|
||||
{$_("magazine.read_time", {
|
||||
values: {
|
||||
time: calcReadingTime(data.article.content),
|
||||
},
|
||||
})}
|
||||
</div>
|
||||
<!-- <div class="flex items-center gap-2">
|
||||
<UserIcon class="w-4 h-4" />
|
||||
{data.article.views} views
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<!-- <div class="flex flex-wrap gap-3 mb-8">
|
||||
<!-- Action Buttons -->
|
||||
<!-- <div class="flex flex-wrap gap-3 mb-8">
|
||||
<Button
|
||||
variant={isLiked ? "default" : "outline"}
|
||||
size="sm"
|
||||
@@ -92,91 +90,95 @@ const timeAgo = new TimeAgo("en");
|
||||
<HeartIcon class="w-4 h-4 {isLiked ? 'fill-current' : ''}" />
|
||||
{data.article.likes}
|
||||
</Button> -->
|
||||
<SharingPopupButton content={{
|
||||
title: data.article.title,
|
||||
description: data.article.excerpt,
|
||||
url: page.url.href,
|
||||
type: "article" as const,
|
||||
}} />
|
||||
|
||||
</div>
|
||||
<SharingPopupButton
|
||||
content={{
|
||||
title: data.article.title,
|
||||
description: data.article.excerpt,
|
||||
url: page.url.href,
|
||||
type: "article" as const,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Featured Image -->
|
||||
<div class="mb-8">
|
||||
<img
|
||||
src={getAssetUrl(data.article.image, "medium")}
|
||||
alt={data.article.title}
|
||||
class="w-full h-64 md:h-96 object-cover rounded-2xl shadow-2xl"
|
||||
/>
|
||||
</div>
|
||||
<!-- Featured Image -->
|
||||
<div class="mb-8">
|
||||
<img
|
||||
src={getAssetUrl(data.article.image, "medium")}
|
||||
alt={data.article.title}
|
||||
class="w-full h-64 md:h-96 object-cover rounded-2xl shadow-2xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Article Content -->
|
||||
<Card class="p-0 mb-8 bg-card/50">
|
||||
<CardContent class="p-8">
|
||||
<div
|
||||
class="prose prose-lg max-w-none prose-headings:text-foreground prose-p:text-muted-foreground prose-strong:text-foreground prose-ul:text-muted-foreground"
|
||||
>
|
||||
{@html data.article.content}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<!-- Article Content -->
|
||||
<Card class="p-0 mb-8 bg-card/50">
|
||||
<CardContent class="p-8">
|
||||
<div
|
||||
class="prose prose-lg max-w-none prose-headings:text-foreground prose-p:text-muted-foreground prose-strong:text-foreground prose-ul:text-muted-foreground"
|
||||
>
|
||||
{@html data.article.content}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Tags -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<span class="icon-[ri--price-tag-3-line] w-5 h-5 text-primary"></span>
|
||||
<span class="font-semibold">Tags</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{#each data.article.tags as tag (tag)}
|
||||
<a class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm" href="/tags/{tag}">
|
||||
#{tag}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tags -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<span class="icon-[ri--price-tag-3-line] w-5 h-5 text-primary"></span>
|
||||
<span class="font-semibold">Tags</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{#each data.article.tags as tag (tag)}
|
||||
<a
|
||||
class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm"
|
||||
href="/tags/{tag}"
|
||||
>
|
||||
#{tag}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Author Bio -->
|
||||
<Card class="p-0 bg-gradient-to-r from-card/50 to-card">
|
||||
<CardContent class="p-6">
|
||||
<div class="flex items-start gap-4">
|
||||
<img
|
||||
src={getAssetUrl(data.article.author.avatar, "mini")}
|
||||
alt={data.article.author.first_name}
|
||||
class="w-16 h-16 rounded-full object-cover ring-2 ring-primary/20"
|
||||
/>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg mb-2">
|
||||
About {data.article.author.first_name}
|
||||
</h3>
|
||||
{#if data.article.author.description}
|
||||
<p class="text-muted-foreground mb-4">
|
||||
{data.article.author.description}
|
||||
</p>
|
||||
{/if}
|
||||
{#if data.article.author.website}
|
||||
<div class="flex gap-4 text-sm">
|
||||
<a
|
||||
href={"https://" + data.article.author.website}
|
||||
class="text-primary hover:underline"
|
||||
>
|
||||
{data.article.author.website}
|
||||
</a>
|
||||
<!-- <a href="https://{data.article.author.social.website}" class="text-primary hover:underline">
|
||||
<!-- Author Bio -->
|
||||
<Card class="p-0 bg-gradient-to-r from-card/50 to-card">
|
||||
<CardContent class="p-6">
|
||||
<div class="flex items-start gap-4">
|
||||
<img
|
||||
src={getAssetUrl(data.article.author.avatar, "mini")}
|
||||
alt={data.article.author.first_name}
|
||||
class="w-16 h-16 rounded-full object-cover ring-2 ring-primary/20"
|
||||
/>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg mb-2">
|
||||
About {data.article.author.first_name}
|
||||
</h3>
|
||||
{#if data.article.author.description}
|
||||
<p class="text-muted-foreground mb-4">
|
||||
{data.article.author.description}
|
||||
</p>
|
||||
{/if}
|
||||
{#if data.article.author.website}
|
||||
<div class="flex gap-4 text-sm">
|
||||
<a
|
||||
href={"https://" + data.article.author.website}
|
||||
class="text-primary hover:underline"
|
||||
>
|
||||
{data.article.author.website}
|
||||
</a>
|
||||
<!-- <a href="https://{data.article.author.social.website}" class="text-primary hover:underline">
|
||||
{data.article.author.social.website}
|
||||
</a> -->
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</article>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</article>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="space-y-6">
|
||||
<!-- Related Articles -->
|
||||
<!--
|
||||
<!-- Sidebar -->
|
||||
<aside class="space-y-6">
|
||||
<!-- Related Articles -->
|
||||
<!--
|
||||
<Card class="bg-card/50">
|
||||
<CardContent class="p-6">
|
||||
<h3 class="font-semibold mb-4 flex items-center gap-2">
|
||||
@@ -213,16 +215,16 @@ const timeAgo = new TimeAgo("en");
|
||||
</Card>
|
||||
-->
|
||||
|
||||
<!-- Back to Magazine -->
|
||||
<Button
|
||||
variant="outline"
|
||||
class="w-full border-primary/20 hover:bg-primary/10"
|
||||
href="/magazine"
|
||||
><span class="icon-[ri--arrow-left-long-line] w-4 h-4 mr-1"></span>{$_(
|
||||
"magazine.back",
|
||||
)}</Button
|
||||
>
|
||||
</aside>
|
||||
</div>
|
||||
<!-- Back to Magazine -->
|
||||
<Button
|
||||
variant="outline"
|
||||
class="w-full border-primary/20 hover:bg-primary/10"
|
||||
href="/magazine"
|
||||
><span class="icon-[ri--arrow-left-long-line] w-4 h-4 mr-1"></span>{$_(
|
||||
"magazine.back",
|
||||
)}</Button
|
||||
>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user