Fix: Problem when rendering - 04-11 12:52

Yagasaki7K · Nov 4, 2024 · 815f576 · 815f576
1 parent 1fc6403
commit 815f576
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 39 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
@@ -29,7 +29,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
         paths,
         fallback: false,
     };
-}
+};
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
     const slug = params?.slug as string;
@@ -55,9 +55,9 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
             content: renderedContent || "", // Garantindo que `content` seja uma string vazia se for `undefined`
         },
     };
-}
+};
 
-export default function PostPage({ frontmatter, content = "" }: PostProps) { // Definindo um valor padrão para `content`
+export default function PostPage({ frontmatter, content = "" }: PostProps) {
     const [htmlContent, setHtmlContent] = useState<string>(content);
 
     useEffect(() => {
@@ -68,8 +68,10 @@ export default function PostPage({ frontmatter, content = "" }: PostProps) { //
         hljs.highlightAll();
     }, [htmlContent]);
 
-    // Render nada se `frontmatter` ou `htmlContent` estiver ausente
-    if (!frontmatter || !htmlContent) return <p>Conteúdo não disponível</p>;
+    // Verificação detalhada para `frontmatter`
+    if (!frontmatter || !frontmatter.title || !frontmatter.excerpt || !frontmatter.date || !frontmatter.image) {
+        return <p>Conteúdo não disponível</p>;
+    }
 
     return (
         <>
@@ -108,7 +110,7 @@ export default function PostPage({ frontmatter, content = "" }: PostProps) { //
             <ArticleDetails>
                 <div className='card card-page text'>
                     <div className="backToHome">
-                        <Link href={'/'}><i className="uil uil-arrow-left"> Back To Home</i></Link>
+                        <Link href={'/'}><a><i className="uil uil-arrow-left"> Back To Home</i></a></Link>
                     </div>
                     <div className="title">
                         <h1 className='post-title'>{frontmatter.title}</h1>
@@ -129,7 +131,7 @@ export default function PostPage({ frontmatter, content = "" }: PostProps) { //
                         </div>
                     </div>
                     <div className='post-body'>
-                        <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
+                        <div dangerouslySetInnerHTML={{ __html: htmlContent ?? '' }} />
                     </div>
 
                     <div className="touch">

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -36,13 +36,9 @@ export interface PostProps {
 }
 
 export async function getStaticProps() {
-    // Lendo arquivos do diretório de artigos
     const files = fs.readdirSync(path.join('article'));
-
-    // Extraindo slug e frontmatter de cada artigo
     const posts = files.map((filename) => {
         const slug = filename.replace('.mdx', '');
-
         const markdownWithMeta = fs.readFileSync(
             path.join('article', filename),
             'utf-8'
@@ -98,29 +94,6 @@ export default function Home({ posts }: { posts: PostProps[] }) {
             </Head>
 
             <div className="overlay" />
-            {/* <div className="ball"></div>
-            <div
-                className="ball"
-                style={
-                    {
-                        "--delay": "-12s",
-                        "--size": "0.35",
-                        "--speed": "25s",
-                    } as React.CSSProperties
-                }
-            ></div>
-
-            <div
-                className="ball"
-                style={
-                    {
-                        "--delay": "-10s",
-                        "--size": "0.3",
-                        "--speed": "15s",
-                    } as React.CSSProperties
-                }
-            ></div> */}
-
             <HeaderDetails>
                 <div className='leftContent text'>
                     <h1><img src="https://github.com/tairosonloa/tairosonloa/blob/main/assets/wave.gif?raw=true" alt="" />i'm yagasaki!</h1>
@@ -151,17 +124,15 @@ export default function Home({ posts }: { posts: PostProps[] }) {
             </HeaderDetails>
 
             <HomeArticlesDetails>
-                <h2 className="poppins">{posts.length} Articles in Brazilian Portuguese <span title="Why in Portuguese? Because every developer in Brazil faces difficulty learning English in the initial stages."><i className="uil uil-question-circle"></i></span></h2>
-
+                <h2 className="poppins">{posts.length} Articles in Brazilian Portuguese <span title="Why in Portuguese?"><i className="uil uil-question-circle"></i></span></h2>
                 <div className="articles poppins">
                     {posts && posts.slice(0, 10).map((post, index) => (
                         post?.slug && post?.content ? (
                             <Link href={`/article/${post.slug}`} key={index}>
-                                <a><LayoutArticle {...post} /></a> {/* Wrapping with `a` tag for better accessibility */}
+                                <a><LayoutArticle {...post} /></a>
                             </Link>
-                        ) : null // Skip articles that don’t have required data
+                        ) : null
                     ))}
-
                     <button className="poppins" onClick={redirectToSearch}>Veja mais ...</button>
                 </div>
             </HomeArticlesDetails>