About this article
In this blog post, I'll share the features I have implemented on this site and my plans for the future. Let's explore them together!
Blog article features
A lot of thought was put into the design of the blog feature. From the reader's perspective, posts should be easy to read and navigate, with a consistent layout that helps readers focus on the content. From the author's perspective, it should be easy to write new articles, add images and links.
Blog post card
As a consumer of blog articles from other authors, I really don't like having to open each article just to understand what it's about. To make it easier for readers, I have implemented these features:
- Tags
- Created date
- Excerpt
I understand that these features aren't very impressive, but they can save you time when you're looking for a specific topic. Also, I find the article creation date essential information. I've had many experiences reading an article and wondering if the information is still relevant. This is especially important for technical articles, where technology changes rapidly. I hope you'll find it useful too.
Blog post details
When you click on a blog post card, you'll be taken to the blog post details page. The "Tags" and "Created date" features are still there, but the "Excerpt" was removed to keep the top section of the article concise.
Recomended posts
When you find an interesting blog post, you might want to read more articles on the same topic. To make this easier, I have implemented a "Recommended posts" section (no.1 on the screen below). This section appears on the right side of the post in desktop view and at the bottom in mobile view. It shows other articles that share the same tags as the current one, so you can easily find related content.
Right below the recommended posts, there's a button to navigate to the all posts page (no.2 on the screen below). I experimented with "Next" and "Previous" buttons, but I found them not very useful because I write articles on different topics. If you find this inconvenient, please let me know in the comments below.
Link to headings
I was inspired by GitHub to add this feature. When you hover over a heading, a 🔗 icon appears. When you click the heading, it copies the link to your clipboard and a small notification appears in the bottom right corner (for desktop) or at the top of the screen (for mobile). You can then share it with your friends or use it in your notes. It's a small feature, but I find it very useful when I want to refer to a specific part of an article.
Comments
This is the feature I'm most excited about! I have implemented a comments section at the bottom of each blog post. It allows you to leave your thoughts, feedback, or questions about the article. You can also reply to other comments (it's a 3-level comment system), so we can have discussions about the topic. I hope this will create a community around the blog where we can learn from each other.
Now for a fun fact: I built the entire comments section in… 2 hours! How is this even possible?
I use GitHub Copilot to write a lot of code and I'm testing many approaches to get the best results. I'll write a dedicated article about the pros and cons of using AI in software development.
Still, I was surprised by how quickly I was able to implement the comments section. To achieve this, I created a dedicated document with my requirements, technical details (e.g., what database I use), and best practices (e.g., use shadcn/ui components). I instructed Copilot to save the current implementation status in the docs and asked it to ask me additional questions to better understand my vision. Finally, I told it to always return to the document if it got lost.
It was a surprise - Copilot did everything I asked for without any issues. Believe me, this is not common. Usually, I have to correct at least a few things. Not this time! Copilot even waited for me to manually run the SQL query on the database (as I had instructed) to create the comments table.
Additionally, the AI asked me some valid questions about the vision - this way, comments can be added by guests, and at the same time, my table schema is ready for logged-in users (I'm planning to add this feature soon).
I think this is the feature I'm most proud of 😁
Markdown features
It took me some time to decide how I wanted to implement the blog feature. I concluded that I want to use a database to store some information about articles, but the main content will be a Markdown file. This way, to add a new article, I just need to create a new Markdown file in a dedicated folder, add an entry to the database, and rebuild the app. That's it! The new article is available as a static page, has its own URL, and is formatted consistently. I still haven't figured out how to make it SEO-friendly, but I'll work on that soon.
I feel that the way I implemented the blog posts is very flexible. It allows me to write articles in a way that's easy to read and maintain. I can also use Markdown features to format text, add images, links, code snippets, and tables.
But wait - how? Markdown is just a text file, so how can I add images, links, and code snippets? Well, I have implemented a custom Markdown parser that supports additional features. It's based on the remark library, which allows me to extend the Markdown syntax with custom plugins and even whole React Components!
Code blocks
I expect that some articles will contain code snippets. To make it easier to read and copy code, I have implemented a code block feature. It supports syntax highlighting for multiple languages. You can also copy the code to your clipboard by clicking the "Copy" button in the top right corner of the code block. Try it yourself!
Tables
I really like markdown tables. So much so that I added support for them in blog posts. Here's an example:
| Name | Age | City |
|---|---|---|
| Alice | 30 | New York |
| Bob | 25 | San Francisco |
Gif support
I wanted to add support for animated GIFs to make blog posts more engaging. It's all for…
I also have in mind a feature to support GIFs that loop a specific number of times. I already tried to implement it once, but it turned out to be more difficult than expected. I'll try to implement it in the future, but for now, you can see GIFs as they are.
Future plans
I feel there's still a lot to do to make the blog feature even better. Here are some ideas I have in mind:
- Search functionality in the blog posts list (✅ Done)
- Pagination in the blog posts list
- Read indicator on blog posts for logged-in users
- Like indicator on blog posts for logged-in users
- Enhanced comments for logged-in users with the ability to edit and delete their own comments and a simplified form to add new comments
I'm pretty sure I'll come up with more ideas as I continue implementing new features. If you have any suggestions for features that would make reading blog posts easier or more appealing, the comments section below is for you! I'd love to hear your thoughts and ideas. And as always…
Keep building your feature 🏗