diff --git a/app/blog/[...slug]/page.tsx b/app/blog/[...slug]/page.tsx index af96a2b59..6e62036a5 100644 --- a/app/blog/[...slug]/page.tsx +++ b/app/blog/[...slug]/page.tsx @@ -10,6 +10,7 @@ import type { Authors, Blog } from 'contentlayer/generated' import PostSimple from '@/layouts/PostSimple' import PostLayout from '@/layouts/PostLayout' import PostBanner from '@/layouts/PostBanner' +import PostwithTocLayout from '@/layouts/PostwithTocLayout' import { Metadata } from 'next' import siteMetadata from '@/data/siteMetadata' import { notFound } from 'next/navigation' @@ -19,6 +20,7 @@ const layouts = { PostSimple, PostLayout, PostBanner, + PostwithTocLayout, } export async function generateMetadata(props: { @@ -112,7 +114,13 @@ export default async function Page(props: { params: Promise<{ slug: string[] }> type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} /> - + diff --git a/css/tailwind.css b/css/tailwind.css index 5a8a4c2f1..9af79ef48 100644 --- a/css/tailwind.css +++ b/css/tailwind.css @@ -173,3 +173,7 @@ input:-webkit-autofill:focus { display: inline-block; vertical-align: middle; } + +.toc-container a { + @apply text-primary-500 hover:text-primary-600 dark:hover:text-primary-400; +} diff --git a/data/blog/release-of-tailwind-nextjs-starter-blog-v2.0.mdx b/data/blog/release-of-tailwind-nextjs-starter-blog-v2.0.mdx index 37afcbbf9..3a2037cc9 100644 --- a/data/blog/release-of-tailwind-nextjs-starter-blog-v2.0.mdx +++ b/data/blog/release-of-tailwind-nextjs-starter-blog-v2.0.mdx @@ -6,14 +6,13 @@ tags: ['next-js', 'tailwind', 'guide', 'feature'] draft: false summary: 'Release of Tailwind Nextjs Starter Blog template v2.0, refactored with Nextjs App directory and React Server Components setup.Discover the new features and how to migrate from V1.' images: ['/static/images/twitter-card.png'] +layout: PostwithTocLayout --- ## Introduction Welcome to the release of Tailwind Nextjs Starter Blog template v2.0. This release is a major refactor of the codebase to support Nextjs App directory and React Server Components. Read on to discover the new features and how to migrate from V1. - - ## V1 to V2 ![Github Traffic](/static/images/github-traffic.png) diff --git a/layouts/PostwithTocLayout.tsx b/layouts/PostwithTocLayout.tsx new file mode 100644 index 000000000..827ffc401 --- /dev/null +++ b/layouts/PostwithTocLayout.tsx @@ -0,0 +1,190 @@ +import { ReactNode } from 'react' +import { CoreContent } from 'pliny/utils/contentlayer' +import type { Blog, Authors } from 'contentlayer/generated' +import Comments from '@/components/Comments' +import Link from '@/components/Link' +import PageTitle from '@/components/PageTitle' +import SectionContainer from '@/components/SectionContainer' +import Image from '@/components/Image' +import Tag from '@/components/Tag' +import siteMetadata from '@/data/siteMetadata' +import ScrollTopAndComment from '@/components/ScrollTopAndComment' +import TOCInline from 'pliny/ui/TOCInline' + +const editUrl = (path) => `${siteMetadata.siteRepo}/blob/main/data/${path}` +const discussUrl = (path) => + `https://mobile.twitter.com/search?q=${encodeURIComponent(`${siteMetadata.siteUrl}/${path}`)}` + +const postDateTemplate: Intl.DateTimeFormatOptions = { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric', +} + +interface TOCItem { + value: string + url: string + depth: number +} + +interface LayoutProps { + content: CoreContent + authorDetails: CoreContent[] + next?: { path: string; title: string } + prev?: { path: string; title: string } + children: ReactNode + toc: TOCItem[] +} + +export default function PostwithTocLayout({ + content, + authorDetails, + next, + prev, + children, + toc, +}: LayoutProps) { + const { filePath, path, slug, date, title, tags } = content + const basePath = path.split('/')[0] + return ( + + +
+
+
+
+
+
+
Published on
+
+ +
+
+
+
+ {title} +
+
+
+
+
+
Authors
+
+
    + {authorDetails.map((author) => ( +
  • + {author.avatar && ( + avatar + )} +
    +
    Name
    +
    {author.name}
    +
    Twitter
    +
    + {author.twitter && ( + + {author.twitter + .replace('https://twitter.com/', '@') + .replace('https://x.com/', '@')} + + )} +
    +
    +
    • + ))} +
+
+
+
+
{children}
+
+ + Discuss on Twitter + + {` • `} + View on GitHub +
+ {siteMetadata.comments && ( +
+ +
+ )} +
+ +
+
+
+ + ) +} diff --git a/package.json b/package.json index f67158d37..180143d35 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "scripts": { "start": "next dev", + "format": "prettier --write .", "dev": "cross-env INIT_CWD=$PWD next dev", "build": "cross-env INIT_CWD=$PWD next build && cross-env NODE_OPTIONS='--experimental-json-modules' node ./scripts/postbuild.mjs", "serve": "next start",