components/Footer.js

@@ -4,7 +4,8 @@ import SocialIcon from '@/components/social-icons'
 
 export default function Footer() {
   return (
-    <footer className="flex flex-col items-center mt-16">
+    <footer>
+      <div className="flex flex-col items-center mt-16">
         <div className="flex mb-3 space-x-4">
           <SocialIcon kind="mail" href={`mailto:${siteMetadata.email}`} size="6" />
           <SocialIcon kind="github" href={siteMetadata.github} size="6" />
@@ -25,6 +26,7 @@ export default function Footer() {
             Tailwind Nextjs Theme
           </Link>
         </div>
+      </div>
     </footer>
   )
 }

layouts/ListLayout.js

@@ -7,9 +7,10 @@ const postDateTemplate = tinytime('{MMMM} {DD}, {YYYY}')
 
 export default function ListLayout({ posts, title }) {
   const [searchValue, setSearchValue] = useState('')
-  const filteredBlogPosts = posts.filter((frontMatter) =>
-    frontMatter.title.toLowerCase().includes(searchValue.toLowerCase())
-  )
+  const filteredBlogPosts = posts.filter((frontMatter) => {
+    const searchContent = frontMatter.title + frontMatter.summary + frontMatter.tags.join(' ')
+    return searchContent.toLowerCase().includes(searchValue.toLowerCase())
+  })
 
   return (
     <>

layouts/PostLayout.js

@@ -19,7 +19,8 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
   return (
     <SectionContainer>
       <BlogSeo url={`${siteMetdata.siteUrl}/blog/${frontMatter.slug}`} {...frontMatter} />
-      <article className="xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700">
+      <article>
+        <div className="xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700">
           <header className="pt-6 xl:pb-6">
             <div className="space-y-1 text-center">
               <dl className="space-y-10">
@@ -72,7 +73,8 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
                 <Link href={editUrl(fileName)}>{'View on GitHub'}</Link>
               </div>
             </div>
-          <footer className="text-sm font-medium leading-5 divide-gray-200 xl:divide-y dark:divide-gray-700 xl:col-start-1 xl:row-start-2">
+            <footer>
+              <div className="text-sm font-medium leading-5 divide-gray-200 xl:divide-y dark:divide-gray-700 xl:col-start-1 xl:row-start-2">
                 {tags && (
                   <div className="py-4 xl:py-8">
                     <h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
@@ -109,6 +111,7 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
                     )}
                   </div>
                 )}
+              </div>
               <div className="pt-4 xl:pt-8">
                 <Link
                   href="/blog"
@@ -119,6 +122,7 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
               </div>
             </footer>
           </div>
+        </div>
       </article>
     </SectionContainer>
   )

pages/index.js

@@ -37,7 +37,8 @@ export default function Home({ posts }) {
             const { slug, date, title, summary, tags } = frontMatter
             return (
               <li key={slug} className="py-12">
-                <article className="space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline">
+                <article>
+                  <div className="space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline">
                     <dl>
                       <dt className="sr-only">Published on</dt>
                       <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
@@ -48,7 +49,10 @@ export default function Home({ posts }) {
                       <div className="space-y-6">
                         <div>
                           <h2 className="text-2xl font-bold leading-8 tracking-tight">
-                          <Link href={`/blog/${slug}`} className="text-gray-900 dark:text-gray-100">
+                            <Link
+                              href={`/blog/${slug}`}
+                              className="text-gray-900 dark:text-gray-100"
+                            >
                               {title}
                             </Link>
                           </h2>
@@ -72,6 +76,7 @@ export default function Home({ posts }) {
                         </Link>
                       </div>
                     </div>
+                  </div>
                 </article>
               </li>
             )