Skip to content

Commit

Permalink
destructure and optimize home layout
Browse files Browse the repository at this point in the history
  • Loading branch information
PxlSyl authored and PxlSyl committed Jul 11, 2024
1 parent 9d8b91b commit 7f41843
Show file tree
Hide file tree
Showing 5 changed files with 123 additions and 136 deletions.
8 changes: 4 additions & 4 deletions app/[locale]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ type HomeProps = {
export default async function Page({ params: { locale } }: HomeProps) {
const sortedPosts = sortPosts(allBlogs)
const posts = allCoreContent(sortedPosts)
const hasFeaturedPosts = posts.some((post) => post.language === locale && post.featured)

return (
<>
{posts.filter((post) => post.language === locale).some((post) => post.featured) && (
<FeaturedLayout posts={posts} params={{ locale }} />
)}
<HomeLayout posts={posts} params={{ locale: locale }} />
{hasFeaturedPosts && <FeaturedLayout posts={posts} params={{ locale }} />}
<HomeLayout posts={posts} params={{ locale }} />
</>
)
}
75 changes: 9 additions & 66 deletions layouts/FeaturedLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import Link from '@/components/mdxcomponents/Link'
import Tag from '@/components/tag'
import { formatDate } from 'pliny/utils/formatDate'
import { createTranslation } from 'app/[locale]/i18n/server'
import { LocaleTypes } from 'app/[locale]/i18n/settings'
import PostList from './home/PostList'
import LayoutHeader from './home/LayoutHeader'

interface Post {
slug: string
Expand All @@ -27,69 +26,13 @@ export default async function FeaturedLayout({ posts, params: { locale } }: Home
return (
<>
<div className="divide-y divide-gray-200 dark:divide-gray-700">
<div className="space-y-2 pb-8 pt-6 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-heading-400 dark:text-heading-400 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
{t('featured')}
</h1>
</div>
<ul className="divide-y divide-gray-200 dark:divide-gray-700">
{!posts.length && t('noposts')}
{posts
.filter((p) => p.language === locale && p.featured === true)
.slice(0, MAX_DISPLAY)
.map((post) => {
const { slug, date, title, summary, tags, language } = post
if (language === locale) {
return (
<li key={slug} className="py-12">
<article>
<div className="space-y-2 xl:grid xl:grid-cols-4 xl:items-baseline xl:space-y-0">
<dl>
<dt className="sr-only">{t('pub')}</dt>
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
<time dateTime={date}>{formatDate(date, locale)}</time>
</dd>
</dl>
<div className="space-y-5 xl:col-span-3">
<div className="space-y-6">
<div>
<div className="text-2xl font-bold leading-8 tracking-tight">
<Link
href={`/${locale}/blog/${slug}`}
className="text-gray-900 dark:text-gray-100"
>
<h2>{title}</h2>
</Link>
</div>
<ul className="flex flex-wrap">
{tags.map((tag: string) => (
<li key={tag}>
<Tag text={tag} />
</li>
))}
</ul>
</div>
<div className="prose max-w-none text-gray-500 dark:text-gray-400">
{summary!.length > 149 ? `${summary!.substring(0, 149)}...` : summary}
</div>
</div>
<div className="text-base font-medium leading-6">
<Link
href={`/${locale}/blog/${slug}`}
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
aria-label={`${t('more')}"${title}"`}
>
{t('more')} &rarr;
</Link>
</div>
</div>
</div>
</article>
</li>
)
}
})}
</ul>
<LayoutHeader title={t('featured')} />
<PostList
posts={posts.filter((post) => post.featured === true)}
locale={locale}
t={t}
maxDisplay={MAX_DISPLAY}
/>
</div>
</>
)
Expand Down
70 changes: 4 additions & 66 deletions layouts/HomeLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import Link from '@/components/mdxcomponents/Link'
import Tag from '@/components/tag'
import siteMetadata from '@/data/siteMetadata'
import { formatDate } from 'pliny/utils/formatDate'
import NewsletterForm from '@/components/newletter/NewsletterForm'
import { createTranslation } from '../app/[locale]/i18n/server'
import { LocaleTypes } from '../app/[locale]/i18n/settings'
import PostList from './home/PostList'
import LayoutHeader from './home/LayoutHeader'

interface Post {
slug: string
Expand All @@ -28,70 +28,8 @@ export default async function HomeLayout({ posts, params: { locale } }: HomeProp
return (
<>
<div className="divide-y divide-gray-200 dark:divide-gray-700">
<div className="space-y-2 pb-8 pt-6 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-heading-400 dark:text-heading-400 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
{t('greeting')}
</h1>
<p className="text-lg leading-7 text-gray-500 dark:text-gray-400">{t('description')}</p>
</div>
<ul className="divide-y divide-gray-200 dark:divide-gray-700">
{!posts.length && t('noposts')}
{posts
.filter((p) => p.language === locale)
.slice(0, MAX_DISPLAY)
.map((post) => {
const { slug, date, title, summary, tags, language } = post
if (language === locale) {
return (
<li key={slug} className="py-12">
<article>
<div className="space-y-2 xl:grid xl:grid-cols-4 xl:items-baseline xl:space-y-0">
<dl>
<dt className="sr-only">{t('pub')}</dt>
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
<time dateTime={date}>{formatDate(date, locale)}</time>
</dd>
</dl>
<div className="space-y-5 xl:col-span-3">
<div className="space-y-6">
<div>
<div className="text-2xl font-bold leading-8 tracking-tight">
<Link
href={`/${locale}/blog/${slug}`}
className="text-gray-900 dark:text-gray-100"
>
<h2>{title}</h2>
</Link>
</div>
<ul className="flex flex-wrap">
{tags.map((tag: string) => (
<li key={tag}>
<Tag text={tag} />
</li>
))}
</ul>
</div>
<div className="prose max-w-none text-gray-500 dark:text-gray-400">
{summary!.length > 149 ? `${summary!.substring(0, 149)}...` : summary}
</div>
</div>
<div className="text-base font-medium leading-6">
<Link
href={`/${locale}/blog/${slug}`}
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
aria-label={`${t('more')}"${title}"`}
>
{t('more')} &rarr;
</Link>
</div>
</div>
</div>
</article>
</li>
)
}
})}
</ul>
<LayoutHeader title={t('greeting')} description={t('description')} />
<PostList posts={posts} locale={locale} t={t} maxDisplay={MAX_DISPLAY} />
</div>
{posts.length > MAX_DISPLAY && (
<div className="flex justify-end text-base font-medium leading-6">
Expand Down
21 changes: 21 additions & 0 deletions layouts/home/LayoutHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import React from 'react'

interface LayoutHeaderProps {
title: string
description?: string
}

const LayoutHeader: React.FC<LayoutHeaderProps> = ({ title, description }) => {
return (
<div className="space-y-2 pb-8 pt-6 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-heading-400 dark:text-heading-400 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
{title}
</h1>
{description && (
<p className="text-lg leading-7 text-gray-500 dark:text-gray-400">{description}</p>
)}
</div>
)
}

export default LayoutHeader
85 changes: 85 additions & 0 deletions layouts/home/PostList.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import React from 'react'
import Link from '@/components/mdxcomponents/Link'
import Tag from '@/components/tag'
import { formatDate } from 'pliny/utils/formatDate'
import { LocaleTypes } from 'app/[locale]/i18n/settings'

interface Post {
slug: string
date: string
title: string
summary?: string | undefined
tags: string[]
language: string
draft?: boolean
}

interface PostListProps {
posts: Post[]
locale: LocaleTypes
t: (key: string) => string
maxDisplay: number
}

const PostList: React.FC<PostListProps> = ({ posts, locale, t, maxDisplay }) => {
return (
<ul className="divide-y divide-gray-200 dark:divide-gray-700">
{!posts.length && <li>{t('noposts')}</li>}
{posts
.filter((p) => p.language === locale)
.slice(0, maxDisplay)
.map((post) => {
const { slug, date, title, summary, tags } = post
return (
<li key={slug} className="py-12">
<article>
<div className="space-y-2 xl:grid xl:grid-cols-4 xl:items-baseline xl:space-y-0">
<dl>
<dt className="sr-only">{t('pub')}</dt>
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
<time dateTime={date}>{formatDate(date, locale)}</time>
</dd>
</dl>
<div className="space-y-5 xl:col-span-3">
<div className="space-y-6">
<div>
<h2 className="text-2xl font-bold leading-8 tracking-tight">
<Link
href={`/${locale}/blog/${slug}`}
className="text-gray-900 dark:text-gray-100"
>
{title}
</Link>
</h2>
<ul className="flex flex-wrap">
{tags.map((tag: string) => (
<li key={tag}>
<Tag text={tag} />
</li>
))}
</ul>
</div>
<div className="prose max-w-none text-gray-500 dark:text-gray-400">
{summary!.length > 149 ? `${summary!.substring(0, 149)}...` : summary}
</div>
</div>
<div className="text-base font-medium leading-6">
<Link
href={`/${locale}/blog/${slug}`}
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
aria-label={`${t('more')}"${title}"`}
>
{t('more')} &rarr;
</Link>
</div>
</div>
</div>
</article>
</li>
)
})}
</ul>
)
}

export default PostList

0 comments on commit 7f41843

Please sign in to comment.