feat(blog): upgrade UI for archives and tags #542
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Reviewer's Guide by SourceryThis PR upgrades the UI for the blog's archives and tags pages, implementing a new alphabetical grouping system for tags and improving the overall layout and presentation of archived posts. The changes also include cleanup of tag metadata across blog posts and various component refinements. No diagrams generated as the changes look simple and do not need a visual representation. File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
2 Skipped Deployments
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey @duyet - I've reviewed your changes and they look great!
Here's what I looked at during the review
- 🟢 General issues: all looks good
- 🟢 Security: all looks good
- 🟢 Testing: all looks good
- 🟡 Complexity: 1 issue found
- 🟡 Documentation: 1 issue found
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| @@ -16,25 +16,30 @@ If you are completely new to git, I suggest reading [Git Cheat Sheet](http://www | |||
|
|
|||
| **Table of Contexts:** | |||
There was a problem hiding this comment.
issue (documentation): Fix typo in heading: 'Contexts' should be 'Contents'
| @@ -6,35 +6,60 @@ import Link from 'next/link' | |||
| export default function Tags() { | |||
| const tags: TagCount = getAllTags() | |||
|
|
|||
| // Sort and keep tags with > 1 post | |||
| const sortedTags = Object.fromEntries( | |||
There was a problem hiding this comment.
issue (complexity): Consider simplifying the tag grouping logic by using a single sort operation with a composite comparator
The code can be simplified while maintaining the alphabetical grouping feature. Here's a more direct approach:
export default function Tags() {
const tags: TagCount = getAllTags()
// Sort by first letter then by count
const sortedEntries = Object.entries(tags)
.sort(([tagA, countA], [tagB, countB]) => {
const letterA = tagA[0].toUpperCase()
const letterB = tagB[0].toUpperCase()
return letterA === letterB ? countB - countA : letterA.localeCompare(letterB)
})
// Group visually by first letter
const currentLetter = { value: '' }
return (
<div>
<div className="lg:mb-15 mb-10">
<h1 className="mb-5 text-4xl font-bold md:text-6xl lg:text-8xl">
Topics
</h1>
<p className="lg:mb-15 mb-10">
This page lists my {sortedEntries.length} blogging topics in
alphabetical order.
</p>
</div>
<div className="flex flex-col gap-5">
{sortedEntries.map(([tag, count]) => {
const letter = tag[0].toUpperCase()
const letterHeader = letter !== currentLetter.value && (
<h1 className="mb-5 text-5xl font-bold">{letter}</h1>
)
currentLetter.value = letter
return (
<div key={tag}>
{letterHeader}
<Link
as={`/tag/${getSlug(tag)}`}
className="inline-flex gap-1"
href="/tag/[tag]"
>
<h3>{tag}</h3>
<span className="text-muted hover:no-underline">({count})</span>
</Link>
</div>
)
})}
</div>
</div>
)
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by Sourcery
Upgrade the blog UI by introducing alphabetical grouping of tags and enhancing the layout of the archives and tags pages. Refactor components to improve flexibility and readability, and update documentation for better clarity.
New Features:
Enhancements:
Documentation: