diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml index 404769a..392018f 100644 --- a/.github/workflows/pages.yml +++ b/.github/workflows/pages.yml @@ -12,7 +12,7 @@ permissions: id-token: write concurrency: - group: 'pages' + group: pages cancel-in-progress: false jobs: @@ -23,7 +23,7 @@ jobs: - uses: actions/setup-node@v4 with: node-version: '20' - - name: Install PNPM + - name: Install PNPM run: npm i -g pnpm - id: configurepages uses: actions/configure-pages@v5 diff --git a/README.md b/README.md index 737c602..42d304c 100644 --- a/README.md +++ b/README.md @@ -1,2 +1 @@ ## Blogi - diff --git a/app/Main.tsx b/app/Main.tsx index f228cdd..3a7a435 100644 --- a/app/Main.tsx +++ b/app/Main.tsx @@ -1,8 +1,8 @@ import Link from '@/components/Link' import Tag from '@/components/Tag' import siteMetadata from '@/data/siteMetadata' -import { formatDate } from 'pliny/utils/formatDate' import NewsletterForm from 'pliny/ui/NewsletterForm' +import { formatDate } from 'pliny/utils/formatDate' const MAX_DISPLAY = 5 @@ -44,7 +44,7 @@ export default function Home({ posts }) {
- {tags.map((tag) => ( + {tags.map(tag => ( ))}
diff --git a/app/about/page.tsx b/app/about/page.tsx index 63aa32d..14a2486 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -1,20 +1,20 @@ -import { Authors, allAuthors } from 'contentlayer/generated' -import { MDXLayoutRenderer } from 'pliny/mdx-components' +import type { Authors } from 'contentlayer/generated' import AuthorLayout from '@/layouts/AuthorLayout' -import { coreContent } from 'pliny/utils/contentlayer' import { genPageMetadata } from 'app/seo' +import { allAuthors } from 'contentlayer/generated' +import { MDXLayoutRenderer } from 'pliny/mdx-components' +import { coreContent } from 'pliny/utils/contentlayer' export const metadata = genPageMetadata({ title: 'About' }) export default function Page() { - const author = allAuthors.find((p) => p.slug === 'default') as Authors + const author = allAuthors.find(p => p.slug === 'default') as Authors const mainContent = coreContent(author) return ( - <> - - - - + + + + ) } diff --git a/app/api/newsletter/route.ts b/app/api/newsletter/route.ts index 41e205d..ba7e66f 100644 --- a/app/api/newsletter/route.ts +++ b/app/api/newsletter/route.ts @@ -1,9 +1,8 @@ -import { NewsletterAPI } from 'pliny/newsletter' import siteMetadata from '@/data/siteMetadata' +import { NewsletterAPI } from 'pliny/newsletter' const handler = NewsletterAPI({ - // @ts-ignore - provider: siteMetadata.newsletter.provider, + provider: siteMetadata.newsletter!.provider, }) export { handler as GET, handler as POST } diff --git a/app/blog/[...slug]/page.tsx b/app/blog/[...slug]/page.tsx index 8e1bc13..a22ab42 100644 --- a/app/blog/[...slug]/page.tsx +++ b/app/blog/[...slug]/page.tsx @@ -1,18 +1,17 @@ -import 'css/prism.css' -import 'katex/dist/katex.css' +import type { Authors, Blog } from 'contentlayer/generated' +import type { Metadata } from 'next' -import PageTitle from '@/components/PageTitle' import { components } from '@/components/MDXComponents' -import { MDXLayoutRenderer } from 'pliny/mdx-components' -import { sortPosts, coreContent, allCoreContent } from 'pliny/utils/contentlayer' -import { allBlogs, allAuthors } from 'contentlayer/generated' -import type { Authors, Blog } from 'contentlayer/generated' -import PostSimple from '@/layouts/PostSimple' -import PostLayout from '@/layouts/PostLayout' -import PostBanner from '@/layouts/PostBanner' -import { Metadata } from 'next' import siteMetadata from '@/data/siteMetadata' +import PostBanner from '@/layouts/PostBanner' +import PostLayout from '@/layouts/PostLayout' +import PostSimple from '@/layouts/PostSimple' +import { allAuthors, allBlogs } from 'contentlayer/generated' import { notFound } from 'next/navigation' +import { MDXLayoutRenderer } from 'pliny/mdx-components' +import { allCoreContent, coreContent, sortPosts } from 'pliny/utils/contentlayer' +import 'css/prism.css' +import 'katex/dist/katex.css' const defaultLayout = 'PostLayout' const layouts = { @@ -27,10 +26,10 @@ export async function generateMetadata({ params: { slug: string[] } }): Promise { const slug = decodeURI(params.slug.join('/')) - const post = allBlogs.find((p) => p.slug === slug) + const post = allBlogs.find(p => p.slug === slug) const authorList = post?.authors || ['default'] const authorDetails = authorList.map((author) => { - const authorResults = allAuthors.find((p) => p.slug === author) + const authorResults = allAuthors.find(p => p.slug === author) return coreContent(authorResults as Authors) }) if (!post) { @@ -39,7 +38,7 @@ export async function generateMetadata({ const publishedAt = new Date(post.date).toISOString() const modifiedAt = new Date(post.lastmod || post.date).toISOString() - const authors = authorDetails.map((author) => author.name) + const authors = authorDetails.map(author => author.name) let imageList = [siteMetadata.socialBanner] if (post.images) { imageList = typeof post.images === 'string' ? [post.images] : post.images @@ -74,33 +73,33 @@ export async function generateMetadata({ } } -export const generateStaticParams = async () => { - return allBlogs.map((p) => ({ slug: p.slug.split('/').map((name) => decodeURI(name)) })) +export async function generateStaticParams() { + return allBlogs.map(p => ({ slug: p.slug.split('/').map(name => decodeURI(name)) })) } export default async function Page({ params }: { params: { slug: string[] } }) { const slug = decodeURI(params.slug.join('/')) // Filter out drafts in production const sortedCoreContents = allCoreContent(sortPosts(allBlogs)) - const postIndex = sortedCoreContents.findIndex((p) => p.slug === slug) + const postIndex = sortedCoreContents.findIndex(p => p.slug === slug) if (postIndex === -1) { return notFound() } const prev = sortedCoreContents[postIndex + 1] const next = sortedCoreContents[postIndex - 1] - const post = allBlogs.find((p) => p.slug === slug) as Blog + const post = allBlogs.find(p => p.slug === slug) as Blog const authorList = post?.authors || ['default'] const authorDetails = authorList.map((author) => { - const authorResults = allAuthors.find((p) => p.slug === author) + const authorResults = allAuthors.find(p => p.slug === author) return coreContent(authorResults as Authors) }) const mainContent = coreContent(post) const jsonLd = post.structuredData - jsonLd['author'] = authorDetails.map((author) => { + jsonLd.author = authorDetails.map((author) => { return { '@type': 'Person', - name: author.name, + 'name': author.name, } }) diff --git a/app/blog/page.tsx b/app/blog/page.tsx index 4dcbddc..8132d99 100644 --- a/app/blog/page.tsx +++ b/app/blog/page.tsx @@ -1,7 +1,7 @@ import ListLayout from '@/layouts/ListLayoutWithTags' -import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer' -import { allBlogs } from 'contentlayer/generated' import { genPageMetadata } from 'app/seo' +import { allBlogs } from 'contentlayer/generated' +import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer' const POSTS_PER_PAGE = 5 @@ -12,7 +12,7 @@ export default function BlogPage() { const pageNumber = 1 const initialDisplayPosts = posts.slice( POSTS_PER_PAGE * (pageNumber - 1), - POSTS_PER_PAGE * pageNumber + POSTS_PER_PAGE * pageNumber, ) const pagination = { currentPage: pageNumber, diff --git a/app/blog/page/[page]/page.tsx b/app/blog/page/[page]/page.tsx index a0a8b48..9d23cb4 100644 --- a/app/blog/page/[page]/page.tsx +++ b/app/blog/page/[page]/page.tsx @@ -1,10 +1,10 @@ import ListLayout from '@/layouts/ListLayoutWithTags' -import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer' import { allBlogs } from 'contentlayer/generated' +import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer' const POSTS_PER_PAGE = 5 -export const generateStaticParams = async () => { +export async function generateStaticParams() { const totalPages = Math.ceil(allBlogs.length / POSTS_PER_PAGE) const paths = Array.from({ length: totalPages }, (_, i) => ({ page: (i + 1).toString() })) @@ -13,10 +13,10 @@ export const generateStaticParams = async () => { export default function Page({ params }: { params: { page: string } }) { const posts = allCoreContent(sortPosts(allBlogs)) - const pageNumber = parseInt(params.page as string) + const pageNumber = Number.parseInt(params.page as string) const initialDisplayPosts = posts.slice( POSTS_PER_PAGE * (pageNumber - 1), - POSTS_PER_PAGE * pageNumber + POSTS_PER_PAGE * pageNumber, ) const pagination = { currentPage: pageNumber, diff --git a/app/layout.tsx b/app/layout.tsx index e6c25b5..781af15 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,16 +1,20 @@ -import 'css/tailwind.css' -import 'pliny/search/algolia.css' -import 'remark-github-blockquote-alert/alert.css' +import type { Metadata } from 'next' +import type { AnalyticsConfig } from 'pliny/analytics' +import type { SearchConfig } from 'pliny/search' -import { Space_Grotesk } from 'next/font/google' -import { Analytics, AnalyticsConfig } from 'pliny/analytics' -import { SearchProvider, SearchConfig } from 'pliny/search' +// import process from 'node:process' +import Footer from '@/components/Footer' import Header from '@/components/Header' import SectionContainer from '@/components/SectionContainer' -import Footer from '@/components/Footer' import siteMetadata from '@/data/siteMetadata' +import { Space_Grotesk } from 'next/font/google' +import { Analytics } from 'pliny/analytics' +import { SearchProvider } from 'pliny/search' import { ThemeProviders } from './theme-providers' -import { Metadata } from 'next' +import 'css/tailwind.css' +import 'pliny/search/algolia.css' + +import 'remark-github-blockquote-alert/alert.css' const space_grotesk = Space_Grotesk({ subsets: ['latin'], @@ -44,8 +48,8 @@ export const metadata: Metadata = { index: true, follow: true, googleBot: { - index: true, - follow: true, + 'index': true, + 'follow': true, 'max-video-preview': -1, 'max-image-preview': 'large', 'max-snippet': -1, diff --git a/app/not-found.tsx b/app/not-found.tsx index 6eb0c5b..066ccd7 100644 --- a/app/not-found.tsx +++ b/app/not-found.tsx @@ -15,7 +15,7 @@ export default function NotFound() {

But dont worry, you can find plenty of other things on our homepage.

Back to homepage diff --git a/app/page.tsx b/app/page.tsx index 1498297..93f52b1 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,5 +1,5 @@ -import { sortPosts, allCoreContent } from 'pliny/utils/contentlayer' import { allBlogs } from 'contentlayer/generated' +import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer' import Main from './Main' export default async function Page() { diff --git a/app/projects/page.tsx b/app/projects/page.tsx index d108fe3..da8fb40 100644 --- a/app/projects/page.tsx +++ b/app/projects/page.tsx @@ -1,35 +1,35 @@ -import projectsData from '@/data/projectsData' import Card from '@/components/Card' +import projectsData from '@/data/projectsData' import { genPageMetadata } from 'app/seo' export const metadata = genPageMetadata({ title: 'Projects' }) export default function Projects() { return ( - <> -
-
-

- Projects -

-

- Showcase your projects with a hero image (16 x 9) -

-
-
-
- {projectsData.map((d) => ( - - ))} -
+ +
+
+

+ Projects +

+

+ Showcase your projects with a hero image (16 x 9) +

+
+
+
+ {projectsData.map(d => ( + + ))}
- +
+ ) } diff --git a/app/robots.ts b/app/robots.ts index abb35c4..b16f1c6 100644 --- a/app/robots.ts +++ b/app/robots.ts @@ -1,4 +1,4 @@ -import { MetadataRoute } from 'next' +import type { MetadataRoute } from 'next' import siteMetadata from '@/data/siteMetadata' export default function robots(): MetadataRoute.Robots { diff --git a/app/seo.tsx b/app/seo.tsx index 0751907..3e5734d 100644 --- a/app/seo.tsx +++ b/app/seo.tsx @@ -1,11 +1,10 @@ -import { Metadata } from 'next' +import type { Metadata } from 'next' import siteMetadata from '@/data/siteMetadata' interface PageSEOProps { title: string description?: string image?: string - // eslint-disable-next-line @typescript-eslint/no-explicit-any [key: string]: any } diff --git a/app/sitemap.ts b/app/sitemap.ts index 8d7a66b..1711175 100644 --- a/app/sitemap.ts +++ b/app/sitemap.ts @@ -1,18 +1,18 @@ -import { MetadataRoute } from 'next' -import { allBlogs } from 'contentlayer/generated' +import type { MetadataRoute } from 'next' import siteMetadata from '@/data/siteMetadata' +import { allBlogs } from 'contentlayer/generated' export default function sitemap(): MetadataRoute.Sitemap { const siteUrl = siteMetadata.siteUrl const blogRoutes = allBlogs - .filter((post) => !post.draft) - .map((post) => ({ + .filter(post => !post.draft) + .map(post => ({ url: `${siteUrl}/${post.path}`, lastModified: post.lastmod || post.date, })) - const routes = ['', 'blog', 'projects', 'tags'].map((route) => ({ + const routes = ['', 'blog', 'projects', 'tags'].map(route => ({ url: `${siteUrl}/${route}`, lastModified: new Date().toISOString().split('T')[0], })) diff --git a/app/tags/[tag]/page.tsx b/app/tags/[tag]/page.tsx index 94a3dd2..ecf642b 100644 --- a/app/tags/[tag]/page.tsx +++ b/app/tags/[tag]/page.tsx @@ -1,12 +1,12 @@ -import { slug } from 'github-slugger' -import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer' +import type { Metadata } from 'next' import siteMetadata from '@/data/siteMetadata' import ListLayout from '@/layouts/ListLayoutWithTags' -import { allBlogs } from 'contentlayer/generated' -import tagData from 'app/tag-data.json' import { genPageMetadata } from 'app/seo' -import { Metadata } from 'next' +import tagData from 'app/tag-data.json' +import { allBlogs } from 'contentlayer/generated' +import { slug } from 'github-slugger' import { notFound } from 'next/navigation' +import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer' export async function generateMetadata({ params }: { params: { tag: string } }): Promise { const tag = decodeURI(params.tag) @@ -22,10 +22,10 @@ export async function generateMetadata({ params }: { params: { tag: string } }): }) } -export const generateStaticParams = async () => { +export async function generateStaticParams() { const tagCounts = tagData as Record const tagKeys = Object.keys(tagCounts) - const paths = tagKeys.map((tag) => ({ + const paths = tagKeys.map(tag => ({ tag: encodeURI(tag), })) return paths @@ -36,7 +36,7 @@ export default function TagPage({ params }: { params: { tag: string } }) { // Capitalize first letter and convert space to dash const title = tag[0].toUpperCase() + tag.split(' ').join('-').slice(1) const filteredPosts = allCoreContent( - sortPosts(allBlogs.filter((post) => post.tags && post.tags.map((t) => slug(t)).includes(tag))) + sortPosts(allBlogs.filter(post => post.tags && post.tags.map(t => slug(t)).includes(tag))), ) if (filteredPosts.length === 0) { return notFound() diff --git a/app/tags/page.tsx b/app/tags/page.tsx index 5b7a83c..8f951ce 100644 --- a/app/tags/page.tsx +++ b/app/tags/page.tsx @@ -1,8 +1,8 @@ import Link from '@/components/Link' import Tag from '@/components/Tag' -import { slug } from 'github-slugger' -import tagData from 'app/tag-data.json' import { genPageMetadata } from 'app/seo' +import tagData from 'app/tag-data.json' +import { slug } from 'github-slugger' export const metadata = genPageMetadata({ title: 'Tags', description: 'Things I blog about' }) @@ -11,31 +11,31 @@ export default async function Page() { const tagKeys = Object.keys(tagCounts) const sortedTags = tagKeys.sort((a, b) => tagCounts[b] - tagCounts[a]) return ( - <> -
-
-

- Tags -

-
-
- {tagKeys.length === 0 && 'No tags found.'} - {sortedTags.map((t) => { - return ( -
- - - {` (${tagCounts[t]})`} - -
- ) - })} -
+ +
+
+

+ Tags +

+
+
+ {tagKeys.length === 0 && 'No tags found.'} + {sortedTags.map((t) => { + return ( +
+ + + {` (${tagCounts[t]})`} + +
+ ) + })}
- +
+ ) } diff --git a/app/theme-providers.tsx b/app/theme-providers.tsx index 79d31dd..4e33008 100644 --- a/app/theme-providers.tsx +++ b/app/theme-providers.tsx @@ -1,7 +1,7 @@ 'use client' -import { ThemeProvider } from 'next-themes' import siteMetadata from '@/data/siteMetadata' +import { ThemeProvider } from 'next-themes' export function ThemeProviders({ children }: { children: React.ReactNode }) { return ( diff --git a/components/Card.tsx b/components/Card.tsx index 900c714..5ef94b7 100644 --- a/components/Card.tsx +++ b/components/Card.tsx @@ -1,56 +1,62 @@ import Image from './Image' import Link from './Link' -const Card = ({ title, description, imgSrc, href }) => ( -
-
- {imgSrc && - (href ? ( - - {title} - - ) : ( - {title} - ))} -
-

- {href ? ( - - {title} +function Card({ title, description, imgSrc, href }) { + return ( +
+
+ {imgSrc + && (href + ? ( + + {title} + + ) + : ( + {title} + ))} +
+

+ {href + ? ( + + {title} + + ) + : ( + title + )} +

+

{description}

+ {href && ( + + Learn more → - ) : ( - title )} -

-

{description}

- {href && ( - - Learn more → - - )} +
-
-) + ) +} export default Card diff --git a/components/Comments.tsx b/components/Comments.tsx index 6ac8a31..1872d9c 100644 --- a/components/Comments.tsx +++ b/components/Comments.tsx @@ -1,8 +1,8 @@ 'use client' +import siteMetadata from '@/data/siteMetadata' import { Comments as CommentsComponent } from 'pliny/comments' import { useState } from 'react' -import siteMetadata from '@/data/siteMetadata' export default function Comments({ slug }: { slug: string }) { const [loadComments, setLoadComments] = useState(false) @@ -12,11 +12,13 @@ export default function Comments({ slug }: { slug: string }) { } return ( <> - {loadComments ? ( - - ) : ( - - )} + {loadComments + ? ( + + ) + : ( + + )} ) } diff --git a/components/Footer.tsx b/components/Footer.tsx index b3e04a7..b3af5de 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -1,6 +1,6 @@ -import Link from './Link' -import siteMetadata from '@/data/siteMetadata' import SocialIcon from '@/components/social-icons' +import siteMetadata from '@/data/siteMetadata' +import Link from './Link' export default function Footer() { return ( diff --git a/components/Header.tsx b/components/Header.tsx index e4f27fc..759283c 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -1,12 +1,12 @@ -import siteMetadata from '@/data/siteMetadata' import headerNavLinks from '@/data/headerNavLinks' import Logo from '@/data/logo.svg' +import siteMetadata from '@/data/siteMetadata' import Link from './Link' import MobileNav from './MobileNav' -import ThemeSwitch from './ThemeSwitch' import SearchButton from './SearchButton' +import ThemeSwitch from './ThemeSwitch' -const Header = () => { +function Header() { let headerClass = 'flex items-center w-full bg-white dark:bg-gray-950 justify-between py-10' if (siteMetadata.stickyNav) { headerClass += ' sticky top-0 z-50' @@ -19,20 +19,22 @@ const Header = () => {
- {typeof siteMetadata.headerTitle === 'string' ? ( -
- {siteMetadata.headerTitle} -
- ) : ( - siteMetadata.headerTitle - )} + {typeof siteMetadata.headerTitle === 'string' + ? ( +
+ {siteMetadata.headerTitle} +
+ ) + : ( + siteMetadata.headerTitle + )}
{headerNavLinks - .filter((link) => link.href !== '/') - .map((link) => ( + .filter(link => link.href !== '/') + .map(link => ( ( - -) +function Image({ src, ...rest }: ImageProps) { + return +} export default Image diff --git a/components/LayoutWrapper.tsx b/components/LayoutWrapper.tsx index d407766..46a4490 100644 --- a/components/LayoutWrapper.tsx +++ b/components/LayoutWrapper.tsx @@ -1,8 +1,8 @@ +import type { ReactNode } from 'react' import { Inter } from 'next/font/google' -import SectionContainer from './SectionContainer' import Footer from './Footer' -import { ReactNode } from 'react' import Header from './Header' +import SectionContainer from './SectionContainer' interface Props { children: ReactNode @@ -12,7 +12,7 @@ const inter = Inter({ subsets: ['latin'], }) -const LayoutWrapper = ({ children }: Props) => { +function LayoutWrapper({ children }: Props) { return (
diff --git a/components/Link.tsx b/components/Link.tsx index ee56fed..d6149dc 100644 --- a/components/Link.tsx +++ b/components/Link.tsx @@ -1,9 +1,8 @@ -/* eslint-disable jsx-a11y/anchor-has-content */ -import Link from 'next/link' import type { LinkProps } from 'next/link' -import { AnchorHTMLAttributes } from 'react' +import type { AnchorHTMLAttributes } from 'react' +import Link from 'next/link' -const CustomLink = ({ href, ...rest }: LinkProps & AnchorHTMLAttributes) => { +function CustomLink({ href, ...rest }: LinkProps & AnchorHTMLAttributes) { const isInternalLink = href && href.startsWith('/') const isAnchorLink = href && href.startsWith('#') diff --git a/components/MDXComponents.tsx b/components/MDXComponents.tsx index 4b3e271..427cf9f 100644 --- a/components/MDXComponents.tsx +++ b/components/MDXComponents.tsx @@ -1,7 +1,7 @@ -import TOCInline from 'pliny/ui/TOCInline' -import Pre from 'pliny/ui/Pre' -import BlogNewsletterForm from 'pliny/ui/BlogNewsletterForm' import type { MDXComponents } from 'mdx/types' +import BlogNewsletterForm from 'pliny/ui/BlogNewsletterForm' +import Pre from 'pliny/ui/Pre' +import TOCInline from 'pliny/ui/TOCInline' import Image from './Image' import CustomLink from './Link' import TableWrapper from './TableWrapper' diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx index a7770a5..96717b0 100644 --- a/components/MobileNav.tsx +++ b/components/MobileNav.tsx @@ -1,12 +1,12 @@ 'use client' +import headerNavLinks from '@/data/headerNavLinks' import { Dialog, Transition } from '@headlessui/react' -import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock' -import { Fragment, useState, useEffect, useRef } from 'react' +import { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from 'body-scroll-lock' +import { Fragment, useEffect, useRef, useState } from 'react' import Link from './Link' -import headerNavLinks from '@/data/headerNavLinks' -const MobileNav = () => { +function MobileNav() { const [navShow, setNavShow] = useState(false) const navRef = useRef(null) @@ -14,7 +14,8 @@ const MobileNav = () => { setNavShow((status) => { if (status) { enableBodyScroll(navRef.current) - } else { + } + else { // Prevent scrolling disableBodyScroll(navRef.current) } @@ -28,12 +29,12 @@ const MobileNav = () => { return ( <> - )} @@ -43,10 +43,13 @@ function Pagination({ totalPages, currentPage }: PaginationProps) { )} - {currentPage} of {totalPages} + {currentPage} + {' '} + of + {totalPages} {!nextPage && ( - )} @@ -60,10 +63,12 @@ function Pagination({ totalPages, currentPage }: PaginationProps) { ) } +const emptyInitialDisplayPosts: ListLayoutProps['posts'] = [] + export default function ListLayout({ posts, title, - initialDisplayPosts = [], + initialDisplayPosts = emptyInitialDisplayPosts, pagination, }: ListLayoutProps) { const [searchValue, setSearchValue] = useState('') @@ -73,8 +78,8 @@ export default function ListLayout({ }) // If initialDisplayPosts exist, display it if no searchValue is specified - const displayPosts = - initialDisplayPosts.length > 0 && !searchValue ? initialDisplayPosts : filteredBlogPosts + const displayPosts + = initialDisplayPosts.length > 0 && !searchValue ? initialDisplayPosts : filteredBlogPosts return ( <> @@ -89,13 +94,13 @@ export default function ListLayout({ setSearchValue(e.target.value)} + onChange={e => setSearchValue(e.target.value)} placeholder="Search articles" className="block w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-100" />
- {tags?.map((tag) => )} + {tags?.map(tag => )}
diff --git a/layouts/ListLayoutWithTags.tsx b/layouts/ListLayoutWithTags.tsx index 4d32e46..ef079d8 100644 --- a/layouts/ListLayoutWithTags.tsx +++ b/layouts/ListLayoutWithTags.tsx @@ -1,15 +1,14 @@ -/* eslint-disable jsx-a11y/anchor-is-valid */ 'use client' -import { usePathname } from 'next/navigation' -import { slug } from 'github-slugger' -import { formatDate } from 'pliny/utils/formatDate' -import { CoreContent } from 'pliny/utils/contentlayer' import type { Blog } from 'contentlayer/generated' +import type { CoreContent } from 'pliny/utils/contentlayer' import Link from '@/components/Link' import Tag from '@/components/Tag' import siteMetadata from '@/data/siteMetadata' import tagData from 'app/tag-data.json' +import { slug } from 'github-slugger' +import { usePathname } from 'next/navigation' +import { formatDate } from 'pliny/utils/formatDate' interface PaginationProps { totalPages: number @@ -32,7 +31,7 @@ function Pagination({ totalPages, currentPage }: PaginationProps) {