Article View Implementation
The module focuses on building the article view and completing the navigation flow between the home and article pages. The base layout is reused, and the article title is passed into the layout for rendering.
Metadata and Content Structure
A metadata section is introduced to display the article title and publication timestamp. The content is wrapped inside a semantic article element, preparing the structure for formatted text and media.
Controller Refactoring
The article handler is reimplemented as a method on the controller struct. The render function is updated to use the Echo context and view renderer, and article retrieval is modified to use a UUID instead of an integer ID.
Routing and UUID Handling
Routes are updated to support UUID-based article lookup using a helper function. After wiring the controller and router together, the article view is verified to function correctly.
Markdown and Content Rendering
The displayed article text is in Markdown format, highlighting the need for later processing into proper HTML. Markdown is introduced as a convenient content storage and formatting approach.
Slug Implementation and UI Refactoring
The next improvement involves replacing UUIDs in URLs with human-readable slugs derived from article titles. Additionally, repetitive UI elements will be refactored into reusable components.
Great, so in the last module we dealt with the home view and in this module we're gonna be dealing with the article view so we actually have our complete flow from the home page to the article page and back again. And we need to use the base layout in the article page and we also need to re-implement the controller and the route. So let's start in the view here and go into the article where we simply need to
We move all this and use the base layout and we're gonna pass the article title. Wrap it all. There we go. And this is basically most of what we have to do. Now, I wanna show, let's call this a metadata of the article. So what we are gonna be doing is have the title in another section here. I'm just gonna say border.
1px solid black and so we show the title and underneath it we can show something like published at and we're going to see article published at string which for now will simply show us the full string we're going to format it in just a second so this gives us a section where we have them
the main information and we can also add like a article text here. We can add like an image. It's just a nice little way of presenting like the article you land on the page. Then we also gonna say article and then we are gonna be not a paragraph tag for an article text. We're gonna wrap the content inside of this article element.
Awesome. This is it for now. Let's go into the controller because we need to re-implement this and make it a method on the controller struct and then change this, change this, change this, and then we also need to use the new render method. So we're going to render. And what do we need? We need the echo context and then the views.
article, past article, find article, of course, now no longer once an integer, it once an UUID. So we are gonna be, let me just see here, because we can use this helper method called UUID pass, which just takes in a string. So we're just gonna replace
We're just going to simply just going to replace this with the UID pass and now pass the database connection and the ID. And finally go back into our router, we implement this, give this all a save and say just run. And I'm just going to get the browser running again here.
And there we go. And now, if I give this a refresh, and we click here, we should hopefully see the article. And we do. So we have the title. We have the published address. It's just a full timestamp. And then we have some weird-looking text here. This is markdown, which we will touch upon what is in just a second. But it's a very convenient way of writing content and saving content that we can then pass into proper HTML.
But now our article view is working again, and we can go back and forth here. So we can go back to home. You can see another article. Great. Next, we are dealing with these IDs here. So when we click, you can see we have this UID in the URL, which is not really the best. So I want to change that to use what is known as a slug, which is our human readable URL.
that will literally take the title and then just lowercase it and add dashes in the spaces. We're also starting to have a lot of repetition in the UI elements, so I wanna turn a lot of them into components. So this is what we're gonna do first. We're gonna deal with the components of the UI package, and then we're gonna deal with adding slugs to all of these articles.
