react: fix incorrect use of keys

Signed-off-by: Paul W. <lambdapaul@protonmail.com>

components/quick-links.tsx

@@ -5,11 +5,11 @@ function QuickLinks() {
 	return (
 		<div className='block'>
 			{
-                Object.entries(Pages).map(([title, link], i) => {
+				Object.entries(Pages).map(([title, link]) => {
 					const extern = link.match(/^http/) && `blue extern` || '';
 					return (
 						<Link
-                            key={i}
+							key={link}
 							href={link}
 							className={`${extern} link button`}>
 							{title}

components/recent-notes.tsx

@@ -22,7 +22,7 @@ function RecentNotes() {
             {notes?.slice(0, 5)
                 .map(({slug, title, mtime}) => {
                     return (
-                        <li key={mtime.getTime()} >
+                        <li key={slug} >
                             <Link href={`/notes/${slug}`}>{title}</Link>
                         </li>
                     );

components/recent-posts.tsx

@@ -30,7 +30,7 @@ function RecentPosts() {
 					.map(([slug, post]: any, i: number) => {
 						return (
 							<PostBlock
-                                key={i}
+								key={slug}
 								slug={slug}
 								title={post.title}
 								otime={post.otime} />

components/title.tsx

@@ -12,7 +12,7 @@ function createPathElements(ancestors: Array<{ name: string, path: string }>) {
         currentPath += `/${ancestor.path}`
         return (
             <>
-                <Link key={id + 1} href={currentPath}>{ancestor.name}</Link>
+                <Link key={currentPath} href={currentPath}>{ancestor.name}</Link>
                 <> / </>
             </>
         );

pages/index.tsx

@@ -12,8 +12,8 @@ function Nav() {
 		<div className='block'>
 			<h2>Navigation</h2>
 			{
-                nav.map(([slug, info], i) => {
+				nav.map(([slug, info]) => {
-                    return <Link key={i} href={slug} className='button green'>{info.title}</Link>
+					return <Link key={slug} href={slug} className='button green'>{info.title}</Link>
 				})
 			}
 		</div>

pages/notes/index.tsx

@@ -43,8 +43,8 @@ function NotesPage() {
                 || <table>
                     <tbody>
                         {notes.map(
-                            (note: any, i: number) => {
+                            (note: any) => {
-                                return (<NoteEntry note={note} key={i} />);
+                                return (<NoteEntry note={note} key={note.slug} />);
                             }
                         )}
                     </tbody>

pages/posts/index.tsx

@@ -26,8 +26,8 @@ function Posts() {
             <table>
                 <tbody>
                     {
-                        posts.map(([slug, post]: any, i: number) => {
+                        posts.map(([slug, post]: [string, any]) => {
-                            return <tr key={i} style={{ alignItems: 'center' }}>
+                            return <tr key={slug} style={{ alignItems: 'center' }}>
                                 <td style={{ display: 'inline-block', textAlign: 'right', fontSize: '0.9rem' }}>
                                     <div style={{ fontStyle: 'italics', fontSize: '.8rem' }}>{
                                         post.mtime && (post.mtime != post.otime) && `Updated ${date.toRelativeDate(new Date(post.mtime))}`