lambda/www
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

react: fix incorrect use of keys

Browse Source 
Signed-off-by: Paul W. <lambdapaul@protonmail.com>
This commit is contained in:
Paul W. 2024-12-06 13:52:40 -05:00
parent 4f25a3bc3d
commit ff03bd50ff
Signed by: lambda
GPG Key ID: 0D207B4EBC14B1BD
7 changed files with 80 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/quick-links.tsx
View File

@ -2,23 +2,23 @@ import Link from 'next/link';
import Pages from '../public/external.json';
function QuickLinks() {
return (
<div className='block'>
{
Object.entries(Pages).map(([title, link], i) => {
const extern = link.match(/^http/) && `blue extern` || '';
return (
<Link
key={i}
href={link}
className={`${extern} link button`}>
{title}
</Link>
);
})
}
</div>
);
return (
<div className='block'>
{
Object.entries(Pages).map(([title, link]) => {
const extern = link.match(/^http/) && `blue extern` || '';
return (
<Link
key={link}
href={link}
className={`${extern} link button`}>
{title}
</Link>
);
})
}
</div>
);
}
export default QuickLinks;

2
components/recent-notes.tsx
View File

@ -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>
);

76
components/recent-posts.tsx
View File

@ -4,47 +4,47 @@ import style from '../styles/recent-posts.module.css';
import PostsInfo from '../public/posts.json';
function PostBlock({ slug, otime, title }: { slug: string, otime: string, title: string }) {
return (
<div className={style.block}>
<span className={style.postDate}>
{toRelativeDate(new Date(otime))}
</span>
<div className={style.postTitle}>
<Link href={`/posts/${slug}`}>
{title}
</Link>
</div>
</div>
);
return (
<div className={style.block}>
<span className={style.postDate}>
{toRelativeDate(new Date(otime))}
</span>
<div className={style.postTitle}>
<Link href={`/posts/${slug}`}>
{title}
</Link>
</div>
</div>
);
}
function RecentPosts() {
const posts = Object.entries(PostsInfo).reverse();
if (!posts.length)
return <></>;
return (
<div className='block'>
<h2>Recent Posts</h2>
<div className={style.container}>
{posts?.slice(0, 10)
.map(([slug, post]: any, i: number) => {
return (
<PostBlock
key={i}
slug={slug}
title={post.title}
otime={post.otime} />
);
})}
</div>
{
posts.length > 10 &&
<div className={style.more}>
<Link href='/posts' >More...</Link>
</div>
}
</div>
);
const posts = Object.entries(PostsInfo).reverse();
if (!posts.length)
return <></>;
return (
<div className='block'>
<h2>Recent Posts</h2>
<div className={style.container}>
{posts?.slice(0, 10)
.map(([slug, post]: any, i: number) => {
return (
<PostBlock
key={slug}
slug={slug}
title={post.title}
otime={post.otime} />
);
})}
</div>
{
posts.length > 10 &&
<div className={style.more}>
<Link href='/posts' >More...</Link>
</div>
}
</div>
);
}
export default RecentPosts;

2
components/title.tsx
View File

@ -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>
<> / </>
</>
);

38
pages/index.tsx
View File

@ -7,28 +7,28 @@ import RecentPosts from '../components/recent-posts';
import RootInfo from '../public/home.json';
function Nav() {
const nav = Object.entries(RootInfo);
return (
<div className='block'>
<h2>Navigation</h2>
{
nav.map(([slug, info], i) => {
return <Link key={i} href={slug} className='button green'>{info.title}</Link>
})
}
</div>
)
const nav = Object.entries(RootInfo);
return (
<div className='block'>
<h2>Navigation</h2>
{
nav.map(([slug, info]) => {
return <Link key={slug} href={slug} className='button green'>{info.title}</Link>
})
}
</div>
)
}
function HomePage() {
return (
<Layout>
<QuickLinks />
<RecentPosts />
<RecentNotes />
<Nav />
</Layout>
)
return (
<Layout>
<QuickLinks />
<RecentPosts />
<RecentNotes />
<Nav />
</Layout>
)
}
export default HomePage;

4
pages/notes/index.tsx
View File

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

4
pages/posts/index.tsx
View File

@ -26,8 +26,8 @@ function Posts() {
<table>
<tbody>
{
posts.map(([slug, post]: any, i: number) => {
return <tr key={i} style={{ alignItems: 'center' }}>
posts.map(([slug, post]: [string, any]) => {
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))}`