Skip to content

Commit

Permalink
add featured section to home page
Browse files Browse the repository at this point in the history
  • Loading branch information
PxlSyl authored and PxlSyl committed Apr 27, 2024
1 parent ee2a4d0 commit 4bb53fa
Show file tree
Hide file tree
Showing 9 changed files with 140 additions and 40 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ My own website based on this new template :
This repository will sometimes be updated with new features (not present in the original repository)

For now :
- Featured section on home page for posts you want to pin to top : set featured to true (max two posts by default, can be modified in Featured.tsx file, in app folder) The program will pick the latest two posts with "featured : true." If no featured posts are available, this section will simply not be displayed!
- Each tag now has its own pagination! If the number of posts is greater than the one you have defined (by default, set to 5) then a new page is automatically created for subsequent posts including the same tag.
- Waline comment system now supported! It's probably the best open source comment system right now, with even i18n and many other great features! First, follow [the official tutorial](https://waline.js.org/en/guide/get-started/) to set up the comments database and your vercel server. There's many options available, so take the time to read their documentation. Since it's Vue based, it's still compatible with Next.js, and I created a new comment component. You'll find it in "walinecomponents" folder. I also added a new css file, and you can modify the style here if needed. Once you have deployed your application for comments, modify the sitemetadata.js file. Set "iscomments" property to false, set "iswaline"
to true and set the url of your comments server accordingly in "walineServer". If your language is not supported by waline, make a PR to their repository or ask them kindly to add your own translation (provide it yourself first). This is what I did for supporting french, and this how we work in open source world!
Expand Down
94 changes: 94 additions & 0 deletions app/[locale]/Featured.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import Link from '@/components/Link'
import Tag from '@/components/Tag'
import { formatDate } from 'pliny/utils/formatDate'
import { createTranslation } from './i18n/server'
import { LocaleTypes } from './i18n/settings'

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

interface HomeProps {
posts: Post[]
params: { locale: LocaleTypes }
}

const MAX_DISPLAY = 2

export default async function Featured({ posts, params: { locale } }: HomeProps) {
const { t } = await createTranslation(locale, 'home')
return (
<>
<div className="divide-y divide-gray-200 dark:divide-gray-700 border-b border-gray-200 dark:border-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-blue-400 dark:text-blue-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>
<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>
<div className="flex flex-wrap">
{tags.map((tag: string) => (
<Tag key={tag} text={tag} params={{ locale: locale }} />
))}
</div>
</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>
</div>
</>
)
}
4 changes: 1 addition & 3 deletions app/[locale]/i18n/locales/en/home.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,10 @@
"description": "A blog created with Next.js, i18n and Tailwind.css",
"more": "Read more",
"all": "All posts",

"moreaboutme": "More about me",
"featured": "Featured",
"morefeatured": "More featured posts",
"morerecent": "More recent posts",

"search": "Search articles",
"searchposts": "Search posts",
"comment": "Load Comments",
Expand All @@ -26,4 +24,4 @@
"draft": "Under Construction",
"noposts": "No posts found",
"poststagged": "View posts tagged"
}
}
70 changes: 35 additions & 35 deletions app/[locale]/localeid-map.json
Original file line number Diff line number Diff line change
@@ -1,50 +1,50 @@
{
"codesample": {
"en": "posts/code-sample",
"fr": "articles/exemple-code"
},
"derivingols": {
"en": "posts/deriving-ols-estimator",
"fr": "articles/derivation-estimateur-ols"
"introducingstarterblogi18n": {
"fr": "articles/internationalisation-v2",
"en": "posts/internationalization-v2"
},
"mardownguide": {
"en": "posts/github-markdown-guide",
"fr": "articles/guide-github-markdown"
"releasev2": {
"fr": "articles/presentation-starter-blog-tailwind-nextjs-v2.0",
"en": "posts/release-of-tailwind-nextjs-starter-blog-v2.0"
},
"nextjsimagesguide": {
"en": "posts/guide-to-using-images-in-nextjs",
"fr": "articles/guide-utilisation-images-nextjs"
"newfeaturesv1": {
"fr": "articles/nouvelles-fonctionnalites-v1",
"en": "posts/new-features-in-v1"
},
"canadapictures": {
"en": "posts/images-du-canada",
"fr": "articles/pictures-of-canada"
"nestedroutes": {
"fr": "articles/route-imbriquee/presentation-publications-en-plusieurs-parties-routage-imbrique",
"en": "posts/nested-route/introducing-multi-part-posts-with-nested-routing"
},
"introducingstarterblogi18n": {
"en": "posts/internationalization-v2",
"fr": "articles/internationalisation-v2"
"myfancytitle": {
"fr": "articles/mon-titre-fancy",
"en": "posts/my-fancy-title"
},
"introducingstarterblog": {
"en": "posts/introducing-tailwind-nextjs-starter-blog",
"fr": "articles/presentation-blog-starter-tailwind-nextjs"
"fr": "articles/presentation-blog-starter-tailwind-nextjs",
"en": "posts/introducing-tailwind-nextjs-starter-blog"
},
"myfancytitle": {
"en": "posts/my-fancy-title",
"fr": "articles/mon-titre-fancy"
"derivingols": {
"fr": "articles/derivation-estimateur-ols",
"en": "posts/deriving-ols-estimator"
},
"newfeaturesv1": {
"en": "posts/new-features-in-v1",
"fr": "articles/nouvelles-fonctionnalites-v1"
"nextjsimagesguide": {
"fr": "articles/guide-utilisation-images-nextjs",
"en": "posts/guide-to-using-images-in-nextjs"
},
"releasev2": {
"en": "posts/release-of-tailwind-nextjs-starter-blog-v2.0",
"fr": "articles/presentation-starter-blog-tailwind-nextjs-v2.0"
"mardownguide": {
"fr": "articles/guide-github-markdown",
"en": "posts/github-markdown-guide"
},
"thetimemachine": {
"en": "posts/the-time-machine",
"fr": "articles/la-machine-a-remonter-le-temps"
"fr": "articles/la-machine-a-remonter-le-temps",
"en": "posts/the-time-machine"
},
"nestedroutes": {
"en": "posts/nested-route/introducing-multi-part-posts-with-nested-routing",
"fr": "articles/route-imbriquee/presentation-publications-en-plusieurs-parties-routage-imbrique"
"canadapictures": {
"fr": "articles/pictures-of-canada",
"en": "posts/images-du-canada"
},
"codesample": {
"fr": "articles/exemple-code",
"en": "posts/code-sample"
}
}
6 changes: 5 additions & 1 deletion app/[locale]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { sortPosts, allCoreContent } from 'pliny/utils/contentlayer'
import { allBlogs } from 'contentlayer/generated'
import Featured from './Featured'
import Main from './Main'
import { LocaleTypes } from './i18n/settings'

Expand All @@ -10,5 +11,8 @@ type HomeProps = {
export default async function Page({ params: { locale } }: HomeProps) {
const sortedPosts = sortPosts(allBlogs)
const posts = allCoreContent(sortedPosts)
return <Main posts={posts} params={{ locale: locale }} />
return <>
{posts.some(post => post.featured) && <Featured posts={posts} params={{ locale }} />}
<Main posts={posts} params={{ locale: locale }} />
</>
}
2 changes: 1 addition & 1 deletion app/[locale]/tag-data.json
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"en":{"markdown":1,"code":1,"features":2,"next-js":7,"math":1,"ols":1,"github":1,"guide":6,"holiday":1,"canada":1,"images":1,"tailwind":4,"i18n":1,"hello":1,"feature":2,"writings":1,"book":1,"reflection":1,"multi-author":1},"fr":{"next-js":7,"math":1,"ols":1,"markdown":1,"code":1,"fonctionnalites":4,"github":1,"guide":6,"tailwind":4,"i18n":1,"ecriture":1,"livre":1,"reflexion":1,"salut":1,"vacance":1,"canada":1,"images":1,"multi-auteurs":1}}
{"en":{"next-js":7,"tailwind":4,"guide":6,"features":2,"i18n":1,"feature":2,"multi-author":1,"hello":1,"math":1,"ols":1,"github":1,"writings":1,"book":1,"reflection":1,"holiday":1,"canada":1,"images":1,"markdown":1,"code":1},"fr":{"next-js":7,"tailwind":4,"guide":6,"fonctionnalites":4,"i18n":1,"multi-auteurs":1,"salut":1,"math":1,"ols":1,"github":1,"ecriture":1,"livre":1,"reflexion":1,"vacance":1,"canada":1,"images":1,"markdown":1,"code":1}}
1 change: 1 addition & 0 deletions contentlayer.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,7 @@ export const Blog = defineDocumentType(() => ({
localeid: { type: 'string', required: true },
tags: { type: 'list', of: { type: 'string' }, default: [] },
lastmod: { type: 'date' },
featured: { type: 'boolean' },
draft: { type: 'boolean' },
summary: { type: 'string' },
images: { type: 'json' },
Expand Down
1 change: 1 addition & 0 deletions data/blog/articles/internationalisation-v2.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ tags: ['next-js', 'tailwind', 'guide', 'fonctionnalites', 'i18n']
authors: ['default']
images: ['/static/images/twitter-card.png']
draft: false
featured: true
summary: Présentation du Starter Blog Tailwind Next-js v2.0, avec ajout et support de multiples langues.
---

Expand Down
1 change: 1 addition & 0 deletions data/blog/posts/internationalization-v2.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ tags: ['next-js', 'tailwind', 'guide', 'features', 'i18n']
authors: ['default']
images: ['/static/images/twitter-card.png']
draft: false
featured: true
summary: Presentation of the Starter Blog Tailwind Next-js v2.0, with addition and support for multiple languages.
---

Expand Down

0 comments on commit 4bb53fa

Please sign in to comment.