Fix posts urls on tags page & remove warnings

- Edit constant value of posts url
- Remove console warnings:
  * Each child in a list should have a unique key prop
  * Extra attributes from the server: aria-hidden

- Also next version is updated

Signed-off-by: Randy <randymoralesg@gmail.com>

components/Intro.js

@@ -30,7 +30,7 @@ export default function Intro() {
               target='_blank'
               rel='noopener'
             >
-              <i className='fab fa-twitter big-icon'></i>
+              <i aria-hidden className='fab fa-twitter big-icon'></i>
             </a>
           </li>
 
@@ -40,7 +40,7 @@ export default function Intro() {
               target='_blank'
               rel='noopener'
             >
-              <i className='fab fa-linkedin big-icon'></i>
+              <i aria-hidden className='fab fa-linkedin big-icon'></i>
             </a>
           </li>
 
@@ -50,7 +50,7 @@ export default function Intro() {
               target='_blank'
               rel='noopener'
             >
-              <i className='fab fa-github big-icon'></i>
+              <i aria-hidden className='fab fa-github big-icon'></i>
             </a>
           </li>
         </ul>

components/PostCard.js

@@ -25,7 +25,7 @@ export default function PostCard({
         <div className={blogStyles.cardMetadata}>
           <div>
             {tagsList.map(tag => (
-              <Link href={`/tags/${tag}/`}>
+              <Link href={`/tags/${tag}/`} key={tag}>
                 <a className={[blogStyles.cardTag, tag].join(' ')}>{tag}</a>
               </Link>
             ))}

lib/constants.js

@@ -12,7 +12,7 @@ const LightTheme = 'light'
 
 const Name = 'Randy'
 
-const PostsDirectory = 'blog/'
+const PostsDirectory = '/blog/'
 
 const SiteBaseURL = `https://${Domain}`
 

package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "date-fns": "^2.16.1",
     "gray-matter": "^4.0.2",
-    "next": "^10",
+    "next": "^10.0.7",
     "react": "^17",
     "react-dom": "^17",
     "react-transition-group": "^4.4.1",

pages/blog/index.js

@@ -16,6 +16,7 @@ export default function BlogIndex({ allLocalePostsData }) {
         {allLocalePostsData.map(
           ({ id, title, description, date, tags, image }) => (
             <PostCard
+              key={id}
               url={`${PostsDirectory}${id}`}
               title={title}
               description={description}

pages/index.js

@@ -26,6 +26,7 @@ export default function Home({ allLocalePostsData }) {
         {lastBlogEntries.map(
           ({ id, title, description, date, tags, image }) => (
             <PostCard
+              key={id}
               url={`${PostsDirectory}${id}`}
               title={title}
               description={description}

pages/tags/[tag].js

@@ -19,14 +19,15 @@ export default function TagIndex({ posts, tag }) {
         {t('posts-found')}: {posts.length}
       </h4>
 
-      <div class='page-separator'>
+      <div className='page-separator'>
         <hr />
       </div>
 
       <section className={blogStyles.cardsContainer}>
         {/* List blog posts */}
         {posts.map(({ id, title, description, date, tags, image }) => (
           <PostCard
+            key={id}
             url={`${PostsDirectory}${id}`}
             title={title}
             description={description}