Merge pull request #4 from timlrx/fix/safari

Fix/safari

components/Footer.js

@@ -4,26 +4,28 @@ import SocialIcon from '@/components/social-icons'
 
 export default function Footer() {
   return (
-    <footer 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" />
-        <SocialIcon kind="facebook" href={siteMetadata.facebook} size="6" />
-        <SocialIcon kind="youtube" href={siteMetadata.youtube} size="6" />
-        <SocialIcon kind="linkedin" href={siteMetadata.linkedin} size="6" />
-        <SocialIcon kind="twitter" href={siteMetadata.twitter} size="6" />
-      </div>
-      <div className="flex mb-2 space-x-2 text-sm text-gray-500 dark:text-gray-400">
-        <div>{siteMetadata.author}</div>
-        <div>{` • `}</div>
-        <div>{`© ${new Date().getFullYear()}`}</div>
-        <div>{` • `}</div>
-        <Link href="/">{siteMetadata.title}</Link>
-      </div>
-      <div className="mb-8 text-sm text-gray-500 dark:text-gray-400">
-        <Link href="https://github.com/timlrx/tailwind-nextjs-starter-blog">
-          Tailwind Nextjs Theme
-        </Link>
+    <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" />
+          <SocialIcon kind="facebook" href={siteMetadata.facebook} size="6" />
+          <SocialIcon kind="youtube" href={siteMetadata.youtube} size="6" />
+          <SocialIcon kind="linkedin" href={siteMetadata.linkedin} size="6" />
+          <SocialIcon kind="twitter" href={siteMetadata.twitter} size="6" />
+        </div>
+        <div className="flex mb-2 space-x-2 text-sm text-gray-500 dark:text-gray-400">
+          <div>{siteMetadata.author}</div>
+          <div>{` • `}</div>
+          <div>{`© ${new Date().getFullYear()}`}</div>
+          <div>{` • `}</div>
+          <Link href="/">{siteMetadata.title}</Link>
+        </div>
+        <div className="mb-8 text-sm text-gray-500 dark:text-gray-400">
+          <Link href="https://github.com/timlrx/tailwind-nextjs-starter-blog">
+            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,105 +19,109 @@ 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">
-        <header className="pt-6 xl:pb-6">
-          <div className="space-y-1 text-center">
-            <dl className="space-y-10">
-              <div>
-                <dt className="sr-only">Published on</dt>
-                <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
-                  <time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
-                </dd>
-              </div>
-            </dl>
-            <div>
-              <PageTitle>{title}</PageTitle>
-            </div>
-          </div>
-        </header>
-        <div
-          className="pb-8 divide-y divide-gray-200 xl:divide-y-0 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6"
-          style={{ gridTemplateRows: 'auto 1fr' }}
-        >
-          <dl className="pt-6 pb-10 xl:pt-11 xl:border-b xl:border-gray-200 xl:dark:border-gray-700">
-            <dt className="sr-only">Authors</dt>
-            <dd>
-              <ul className="flex justify-center space-x-8 xl:block sm:space-x-12 xl:space-x-0 xl:space-y-8">
-                <li className="flex items-center space-x-2">
-                  <img src={siteMetdata.image} alt="avatar" className="w-10 h-10 rounded-full" />
-                  <dl className="text-sm font-medium leading-5 whitespace-nowrap">
-                    <dt className="sr-only">Name</dt>
-                    <dd className="text-gray-900 dark:text-gray-100">{siteMetdata.author}</dd>
-                    <dt className="sr-only">Twitter</dt>
-                    <dd>
-                      <Link
-                        href={siteMetdata.twitter}
-                        className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
-                      >
-                        {siteMetdata.twitter.replace('https://twitter.com/', '@')}
-                      </Link>
-                    </dd>
-                  </dl>
-                </li>
-              </ul>
-            </dd>
-          </dl>
-          <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:pb-0 xl:col-span-3 xl:row-span-2">
-            <div className="pt-10 pb-8 prose dark:prose-dark max-w-none">{children}</div>
-            <div className="pt-6 pb-6 text-sm text-gray-700 dark:text-gray-300">
-              <Link href={discussUrl(slug)} rel="nofollow">
-                {'Discuss on Twitter'}
-              </Link>
-              {` • `}
-              <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">
-            {tags && (
-              <div className="py-4 xl:py-8">
-                <h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
-                  Tags
-                </h2>
-                <div className="space-x-3 xl:flex xl:flex-col xl:space-x-0">
-                  {tags.map((tag) => (
-                    <Tag key={tag} text={tag} />
-                  ))}
+      <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">
+                <div>
+                  <dt className="sr-only">Published on</dt>
+                  <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
+                    <time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
+                  </dd>
                 </div>
+              </dl>
+              <div>
+                <PageTitle>{title}</PageTitle>
               </div>
-            )}
-            {(next || prev) && (
-              <div className="flex justify-between py-4 xl:block xl:space-y-8 xl:py-8">
-                {prev && (
-                  <div>
-                    <h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
-                      Previous Article
-                    </h2>
-                    <div className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">
-                      <Link href={`/blog/${prev.slug}`}>{prev.title}</Link>
-                    </div>
-                  </div>
-                )}
-                {next && (
-                  <div>
-                    <h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
-                      Next Article
-                    </h2>
-                    <div className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">
-                      <Link href={`/blog/${next.slug}`}>{next.title}</Link>
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-            <div className="pt-4 xl:pt-8">
-              <Link
-                href="/blog"
-                className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
-              >
-                &larr; Back to the blog
-              </Link>
             </div>
-          </footer>
+          </header>
+          <div
+            className="pb-8 divide-y divide-gray-200 xl:divide-y-0 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6"
+            style={{ gridTemplateRows: 'auto 1fr' }}
+          >
+            <dl className="pt-6 pb-10 xl:pt-11 xl:border-b xl:border-gray-200 xl:dark:border-gray-700">
+              <dt className="sr-only">Authors</dt>
+              <dd>
+                <ul className="flex justify-center space-x-8 xl:block sm:space-x-12 xl:space-x-0 xl:space-y-8">
+                  <li className="flex items-center space-x-2">
+                    <img src={siteMetdata.image} alt="avatar" className="w-10 h-10 rounded-full" />
+                    <dl className="text-sm font-medium leading-5 whitespace-nowrap">
+                      <dt className="sr-only">Name</dt>
+                      <dd className="text-gray-900 dark:text-gray-100">{siteMetdata.author}</dd>
+                      <dt className="sr-only">Twitter</dt>
+                      <dd>
+                        <Link
+                          href={siteMetdata.twitter}
+                          className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
+                        >
+                          {siteMetdata.twitter.replace('https://twitter.com/', '@')}
+                        </Link>
+                      </dd>
+                    </dl>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+            <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:pb-0 xl:col-span-3 xl:row-span-2">
+              <div className="pt-10 pb-8 prose dark:prose-dark max-w-none">{children}</div>
+              <div className="pt-6 pb-6 text-sm text-gray-700 dark:text-gray-300">
+                <Link href={discussUrl(slug)} rel="nofollow">
+                  {'Discuss on Twitter'}
+                </Link>
+                {` • `}
+                <Link href={editUrl(fileName)}>{'View on GitHub'}</Link>
+              </div>
+            </div>
+            <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">
+                      Tags
+                    </h2>
+                    <div className="space-x-3 xl:flex xl:flex-col xl:space-x-0">
+                      {tags.map((tag) => (
+                        <Tag key={tag} text={tag} />
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {(next || prev) && (
+                  <div className="flex justify-between py-4 xl:block xl:space-y-8 xl:py-8">
+                    {prev && (
+                      <div>
+                        <h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
+                          Previous Article
+                        </h2>
+                        <div className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">
+                          <Link href={`/blog/${prev.slug}`}>{prev.title}</Link>
+                        </div>
+                      </div>
+                    )}
+                    {next && (
+                      <div>
+                        <h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
+                          Next Article
+                        </h2>
+                        <div className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">
+                          <Link href={`/blog/${next.slug}`}>{next.title}</Link>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+              <div className="pt-4 xl:pt-8">
+                <Link
+                  href="/blog"
+                  className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
+                >
+                  &larr; Back to the blog
+                </Link>
+              </div>
+            </footer>
+          </div>
         </div>
       </article>
     </SectionContainer>

pages/index.js

@@ -37,40 +37,45 @@ 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">
-                  <dl>
-                    <dt className="sr-only">Published on</dt>
-                    <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
-                      <time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
-                    </dd>
-                  </dl>
-                  <div className="space-y-5 xl:col-span-3">
-                    <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">
-                            {title}
-                          </Link>
-                        </h2>
-                        <div className="space-x-3">
-                          {tags.map((tag) => (
-                            <Tag key={tag} text={tag} />
-                          ))}
+                <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">
+                        <time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
+                      </dd>
+                    </dl>
+                    <div className="space-y-5 xl:col-span-3">
+                      <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"
+                            >
+                              {title}
+                            </Link>
+                          </h2>
+                          <div className="space-x-3">
+                            {tags.map((tag) => (
+                              <Tag key={tag} text={tag} />
+                            ))}
+                          </div>
+                        </div>
+                        <div className="prose text-gray-500 max-w-none dark:text-gray-400">
+                          {summary}
                         </div>
                       </div>
-                      <div className="prose text-gray-500 max-w-none dark:text-gray-400">
-                        {summary}
+                      <div className="text-base font-medium leading-6">
+                        <Link
+                          href={`/blog/${slug}`}
+                          className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
+                          aria-label={`Read "${title}"`}
+                        >
+                          Read more &rarr;
+                        </Link>
                       </div>
                     </div>
-                    <div className="text-base font-medium leading-6">
-                      <Link
-                        href={`/blog/${slug}`}
-                        className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
-                        aria-label={`Read "${title}"`}
-                      >
-                        Read more &rarr;
-                      </Link>
-                    </div>
                   </div>
                 </article>
               </li>