From e9ff5374462774d0673b5f5c81c3961b53772e85 Mon Sep 17 00:00:00 2001 From: "Cheng-Hsuan \"Danny\" Han" Date: Wed, 2 Oct 2024 13:28:52 +0800 Subject: [PATCH 1/3] feat: Add missing types in blog example --- solutions/blog/app/blog/[slug]/page.tsx | 12 +++++-- solutions/blog/app/blog/utils.ts | 8 ++--- solutions/blog/app/components/mdx.tsx | 45 ++++++++++++++----------- solutions/blog/app/layout.tsx | 4 ++- 4 files changed, 41 insertions(+), 28 deletions(-) diff --git a/solutions/blog/app/blog/[slug]/page.tsx b/solutions/blog/app/blog/[slug]/page.tsx index 4fcc86c3cf..23688128f1 100644 --- a/solutions/blog/app/blog/[slug]/page.tsx +++ b/solutions/blog/app/blog/[slug]/page.tsx @@ -11,10 +11,16 @@ export async function generateStaticParams() { })) } -export function generateMetadata({ params }) { +type Props = { + params: { + slug: string + } +} + +export function generateMetadata({ params }: Props) { let post = getBlogPosts().find((post) => post.slug === params.slug) if (!post) { - return + return {} } let { @@ -51,7 +57,7 @@ export function generateMetadata({ params }) { } } -export default function Blog({ params }) { +export default function Blog({ params }: Props) { let post = getBlogPosts().find((post) => post.slug === params.slug) if (!post) { diff --git a/solutions/blog/app/blog/utils.ts b/solutions/blog/app/blog/utils.ts index 0156eeb2b5..5d2213d29c 100644 --- a/solutions/blog/app/blog/utils.ts +++ b/solutions/blog/app/blog/utils.ts @@ -26,19 +26,19 @@ function parseFrontmatter(fileContent: string) { return { metadata: metadata as Metadata, content } } -function getMDXFiles(dir) { +function getMDXFiles(dir: fs.PathLike) { return fs.readdirSync(dir).filter((file) => path.extname(file) === '.mdx') } -function readMDXFile(filePath) { +function readMDXFile(filePath: fs.PathOrFileDescriptor) { let rawContent = fs.readFileSync(filePath, 'utf-8') return parseFrontmatter(rawContent) } -function getMDXData(dir) { +function getMDXData(dir: fs.PathLike) { let mdxFiles = getMDXFiles(dir) return mdxFiles.map((file) => { - let { metadata, content } = readMDXFile(path.join(dir, file)) + let { metadata, content } = readMDXFile(path.join(dir.toString(), file)) let slug = path.basename(file, path.extname(file)) return { diff --git a/solutions/blog/app/components/mdx.tsx b/solutions/blog/app/components/mdx.tsx index 7849731b46..e4729275b3 100644 --- a/solutions/blog/app/components/mdx.tsx +++ b/solutions/blog/app/components/mdx.tsx @@ -1,10 +1,17 @@ import Link from 'next/link' -import Image from 'next/image' -import { MDXRemote } from 'next-mdx-remote/rsc' +import Image, { type ImageProps } from 'next/image' +import { MDXRemote, type MDXRemoteProps } from 'next-mdx-remote/rsc' import { highlight } from 'sugar-high' import React from 'react' -function Table({ data }) { +type TableProps = { + data: { + headers: React.ReactNode[], + rows: React.ReactNode[][], + }, +}; + +function Table({ data }: TableProps) { let headers = data.headers.map((header, index) => ( {header} )) @@ -26,34 +33,32 @@ function Table({ data }) { ) } -function CustomLink(props) { +type CustomLinkProps = React.AnchorHTMLAttributes; + +function CustomLink(props: CustomLinkProps) { let href = props.href - if (href.startsWith('/')) { - return ( - - {props.children} - - ) + if (href?.startsWith('/')) { + return } - if (href.startsWith('#')) { + if (href?.startsWith('#')) { return } return } -function RoundedImage(props) { - return {props.alt} +function RoundedImage(props: ImageProps) { + return } -function Code({ children, ...props }) { - let codeHTML = highlight(children) +function Code({ children, ...props }: React.PropsWithChildren) { + let codeHTML = highlight(children?.toString() ?? '') return } -function slugify(str) { +export function slugify(str: string) { return str .toString() .toLowerCase() @@ -64,9 +69,9 @@ function slugify(str) { .replace(/\-\-+/g, '-') // Replace multiple - with single - } -function createHeading(level) { - const Heading = ({ children }) => { - let slug = slugify(children) +function createHeading(level: number) { + const Heading = ({ children }: React.PropsWithChildren) => { + let slug = slugify(children?.toString() ?? '') return React.createElement( `h${level}`, { id: slug }, @@ -99,7 +104,7 @@ let components = { Table, } -export function CustomMDX(props) { +export function CustomMDX(props: MDXRemoteProps) { return ( classes.filter(Boolean).join(' ') +type ClassName = Array['className']>; + +const cx = (...classes: ClassName) => classes.filter(Boolean).join(' ') export default function RootLayout({ children, From 5d4bb04e632d08509689aef02ce1c4ffb293725b Mon Sep 17 00:00:00 2001 From: "Cheng-Hsuan \"Danny\" Han" Date: Wed, 2 Oct 2024 13:29:27 +0800 Subject: [PATCH 2/3] feat: Set blog example tsconfig.strict as true --- solutions/blog/tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/solutions/blog/tsconfig.json b/solutions/blog/tsconfig.json index b3226b3300..ec4d7c14f5 100644 --- a/solutions/blog/tsconfig.json +++ b/solutions/blog/tsconfig.json @@ -4,7 +4,7 @@ "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, - "strict": false, + "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, From d71f56399abe564c246bce64f859cff85e02e846 Mon Sep 17 00:00:00 2001 From: "Cheng-Hsuan \"Danny\" Han" Date: Wed, 2 Oct 2024 18:19:23 +0800 Subject: [PATCH 3/3] fix: Correct inconsistent format in changes --- solutions/blog/app/components/mdx.tsx | 10 +++++----- solutions/blog/app/layout.tsx | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/solutions/blog/app/components/mdx.tsx b/solutions/blog/app/components/mdx.tsx index e4729275b3..049918868d 100644 --- a/solutions/blog/app/components/mdx.tsx +++ b/solutions/blog/app/components/mdx.tsx @@ -6,10 +6,10 @@ import React from 'react' type TableProps = { data: { - headers: React.ReactNode[], - rows: React.ReactNode[][], - }, -}; + headers: React.ReactNode[] + rows: React.ReactNode[][] + } +} function Table({ data }: TableProps) { let headers = data.headers.map((header, index) => ( @@ -33,7 +33,7 @@ function Table({ data }: TableProps) { ) } -type CustomLinkProps = React.AnchorHTMLAttributes; +type CustomLinkProps = React.AnchorHTMLAttributes function CustomLink(props: CustomLinkProps) { let href = props.href diff --git a/solutions/blog/app/layout.tsx b/solutions/blog/app/layout.tsx index 29c8f4b7c8..82a7367db0 100644 --- a/solutions/blog/app/layout.tsx +++ b/solutions/blog/app/layout.tsx @@ -36,7 +36,7 @@ export const metadata: Metadata = { }, } -type ClassName = Array['className']>; +type ClassName = Array['className']> const cx = (...classes: ClassName) => classes.filter(Boolean).join(' ')