refactor(components): improve Markdown rendering and enhance post metadata

- Updated Li component to handle checked prop more robustly
- Enhanced Img component to return null if src is not provided
- Modified post metadata to dynamically use the author's name
- Adjusted label handling in fetchPostsByTag for better array management

Author: z0ffy

components/markdown.tsx

@@ -116,11 +116,11 @@ const Code: CodeComponent = ({
 }
 
 const Li: LiComponent = ({
-  checked = '',
+  checked,
   children = ''
-}) => {
-  // ordered represents the order of the list item
-  if (checked !== null) {
+}: { checked?: boolean | null; children?: React.ReactNode }) => {
+  // task list item (has checked prop); render without list marker
+  if (checked !== undefined && checked !== null) {
     return (
       <li className="list-none my-1">
         {children}
@@ -206,12 +206,15 @@ const Img: React.FC<Pick<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>,
   src,
   title,
   alt
-}) => (
-  // eslint-disable-next-line @next/next/no-img-element
-  <img src={src!} className="w-11/12 lg:w-2/3 mx-auto my-3 rounded-lg" loading="lazy" alt={alt}
-    title={title}
-  />
-)
+}) => {
+  if (!src) return null
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img src={src} className="w-11/12 lg:w-2/3 mx-auto my-3 rounded-lg" loading="lazy" alt={alt ?? ''}
+      title={title ?? undefined}
+    />
+  )
+}
 
 const Table: React.FC<Pick<DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, 'key' | keyof TableHTMLAttributes<HTMLTableElement>> & ReactMarkdownProps> = ({
   children,

lib/post.ts

@@ -92,7 +92,7 @@ export const fetchPostsByTag = async (tag: string) => {
   const {data} = await cli.rest.issues.listForRepo({
     owner: process.env.OWNER!,
     repo: process.env.REPO!,
-    labels: [process.env.LABELS!.split(','), tag].join(','),
+    labels: [...process.env.LABELS!.split(','), tag].join(','),
     per_page: 100,
     state: 'all'
   })

pages/_app.tsx

@@ -21,11 +21,13 @@ const Gossip = ({ Component, pageProps }: AppPropertiesWithLayout) => {
         <title>{title}</title>
       </Head>
 
-      <ThemeProvider>
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
         {getLayout(<Component {...pageProps} />)}
       </ThemeProvider>
 
-      <GoogleAnalytics gaId={process.env.GOOGLE_ANALYTICS_ID!}/>
+      {process.env.GOOGLE_ANALYTICS_ID && (
+        <GoogleAnalytics gaId={process.env.GOOGLE_ANALYTICS_ID} />
+      )}
     </>
   );
 };

pages/_document.tsx

@@ -2,9 +2,7 @@ import { isGithubChannel, isSpecialRepo } from '../lib';
 
 import { Head, Html, Main, NextScript } from 'next/document';
 
-import type { NextPage } from 'next';
-
-const Document: NextPage = () => {
+const Document = () => {
   let href = '/favicon.ico';
   if (isGithubChannel() && !isSpecialRepo()) href = './favicon.ico';
 

pages/post/[id].tsx

@@ -15,7 +15,7 @@ const PostDetail: NextPageWithLayout<{ post: Post }> = ({ post }) => (
       <title>{post.title}</title>
       <meta name="description" content={post.content.slice(0, 150)} />
       <meta name="keywords" content={post.title} />
-      <meta name="author" content="zoffy" />
+      <meta name="author" content={post.author} />
       <meta property="og:title" content={post.title} />
       <meta property="og:description" content={post.content.slice(0, 150)} />
       <meta property="og:type" content="article" />
@@ -73,14 +73,9 @@ export const getStaticPaths = async () => ({
 
 export const getStaticProps = async ({ params }: { params: { id: string } }) => {
   const { id } = params;
-
   const post = await fetchPost(id);
-
-  return {
-    props: {
-      post,
-    },
-  };
+  if (!post) return { notFound: true };
+  return { props: { post } };
 };
 
 export default PostDetail;