zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add(public): new funnel article

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2025-03-31 23:09:51 +02:00
parent e58e898683
commit 58c4a6a741
13 changed files with 203 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
apps/public/app/(content)/articles/[articleSlug]/page.tsx
View File

@@ -1,5 +1,6 @@
import { url, getAuthor } from '@/app/layout.config';
import { SingleSwirl } from '@/components/Swirls';
import { ArticleCard } from '@/components/article-card';
import { Logo } from '@/components/logo';
import { SectionHeader } from '@/components/section';
import { Toc } from '@/components/toc';
@@ -63,6 +64,13 @@ export default async function Page({
const author = getAuthor(article?.data.team);
const goBackUrl = '/articles';
const relatedArticles = (await articleSource.getPages())
.filter(
(item) =>
item.data.tag === article?.data.tag && item.url !== article?.url,
)
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
if (!Body) {
return notFound();
}
@@ -160,6 +168,26 @@ export default async function Page({
<Body />
</div>
</div>
{relatedArticles.length > 0 && (
<div className="my-16">
<h3 className="text-2xl font-bold mb-8">Related articles</h3>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{relatedArticles.map((item) => (
<ArticleCard
key={item.url}
url={item.url}
title={item.data.title}
tag={item.data.tag}
cover={item.data.cover}
team={item.data.team}
date={item.data.date}
/>
))}
</div>
</div>
)}
<div className="absolute top-0 -right-[300px] w-[300px] pl-12 h-full article:block hidden">
<div className="sticky top-32 col gap-8">
<Toc toc={article?.data.toc} />

36
apps/public/app/(content)/articles/page.tsx
View File

@@ -1,4 +1,5 @@
import { url } from '@/app/layout.config';
import { ArticleCard } from '@/components/article-card';
import { articleSource } from '@/lib/source';
import type { Metadata } from 'next';
import Image from 'next/image';
@@ -37,34 +38,15 @@ export default async function Page() {
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
{articles.map((item) => (
<Link
href={item.url}
<ArticleCard
key={item.url}
className="border rounded-lg overflow-hidden bg-background-light col hover:scale-105 transition-all duration-300 hover:shadow-lg hover:shadow-background-dark"
>
<Image
src={item.data.cover}
alt={item.data.title}
width={323}
height={181}
className="w-full"
/>
<span className="p-4 col flex-1">
{item.data.tag && (
<span className="font-mono text-xs mb-2">
{item.data.tag}
</span>
)}
<span className="flex-1 mb-6">
<h2 className="text-xl font-semibold">{item.data.title}</h2>
</span>
<p className="text-sm text-muted-foreground">
{[item.data.team, item.data.date.toLocaleDateString()]
.filter(Boolean)
.join(' · ')}
</p>
</span>
</Link>
url={item.url}
title={item.data.title}
tag={item.data.tag}
cover={item.data.cover}
team={item.data.team}
date={item.data.date}
/>
))}
</div>
</div>