Componentizing the Home View
The UI is refactored into smaller components such as Hero, Socials, and Latest Articles to improve readability and structure. This demonstrates how templates make it easy to extract sections into reusable components without changing functionality.
Creating Reusable Social Link Components
Repeated social link markup is extracted into a dedicated SocialLink component. By passing properties like link and name, styling can be centralized and reused consistently across multiple instances.
Article Card Abstraction
The article listing is refactored into an ArticleCard component that accepts an article model as input. This simplifies the latest articles section and promotes modular design.
Reusable Pagination Component
Pagination logic is abstracted into a standalone component with configurable route, previous page, and next page inputs. This prepares the application for reuse on additional pages such as an upcoming admin interface.
Refactoring Layout: Navigation and Footer
The base layout is modularized by creating separate Nav and Footer components. Navigation items are further abstracted to accept link and name parameters, enabling consistent structure and easier future styling.
Componentizing the Article Page
The article page is broken into smaller parts such as ArticleHero and ArticleContent. Content is passed as structured inputs, reinforcing separation of concerns and cleaner templates.
Improved Maintainability Through Modularity
The refactoring demonstrates how component-based design improves readability, reusability, and consistency. Although slightly over-engineered at this stage, the structure supports scalable styling and future feature expansion without altering visual output.
All right, so let's make some components. And let's start in the home view here where we can see we have these different sections that we are not really going to be using in any other place. But one of the nice things about templates is that it makes it super easy to make components and split the UI into more, let's call it readable code. So we can create something like temple hero and grab
this section here, paste it in here, and then we say hero, and everything works the same as before. Then we can have Timbal, let's call it socials, and grab this section right here, and we say socials. Finally, let's grab all of this, and let's say Timbal, latest articles,
latest articles and we need to pass the argument from down here. So I'm just going to copy paste this past it in here, give this a save and add this here latest articles and pass the argument. So now our
home view here looks a bit cleaner and we have a little bit more of a focus. This is not really necessary, but it's just to illustrate how easy we can create components and use them. So we simply just add the add, what is this tag called, this character right here, and then call it as a function. But let's look here. Is there something we can do in hero? No.
doesn't really make a lot of sense. But in socials, we can see we have some repetition here. And when we're going to be styling these elements, it's very nice to be able to just style them one time and have it apply multiple times. So let's grab this and say temple, social, social link, right? Delete this, go in here, social link. And we can see we have two elements in here.
the link, and we have the name. So we can say link, name, string, and then we simply pass it in here. Temple, save URL, and pass in the link. There we go. And then the name. And now we can replace all of these with social link, and then simply
Again, fill this out with your socials. So, Twitter, X. Again, empty, linked, in. Finally, get, get, hop. There we go. Remove this, and now, this is looking a bit cleaner. We only need to style social link. For the article, or latest article section,
two elements we can make into components here. We have the article, let's call article card. So if you grab this and say, Timbal, article, card, we don't want to export this. That simply just takes in an article of models article. And then instead of doing this, we just say, article, card, pass the
article. Now, we might actually need pagination on other pages than just the home page later on in the course. So to prepare for that, we can say, Timble, Pagination. And then let's look at what is repeated here. So we have a previous page, we have a route, and we have a next page. So let's just say, route.
previous or previous page and next page, where we are, of course, passing in our number, are we not? So we actually need this to be a string. And this one, I'm guessing we did, we made it in 32, I believe. So instead of this, we say, previous page and next page.
And instead of passing this, we're gonna say, next page here and previous page here. And it's no longer routes home, you're just gonna passing the routes and routes. So now we can reuse this pagination component on other pages, which we will do when we start to create the admin page to actually create and manage articles directly from the block.
And now we have a component here that one styles we can, we can reuse and have them look consistent across all of our, all of our views. So the final thing we need to do is replace this with our pagination and we say routes home page, a pagination previous and pagination next page. And now.
Everything is starting to look a bit cleaner. It's looking a bit more manageable. We can edit things a little bit more in chunks, right? But it's a little bit overkill, but I think it gets the point across of how easy it is to actually create articles with Temple and how we can start to also to create some reuse components. Like we might use some, reuse some links or some buttons all over the page. And let's repeat this for our
base layout, but we have a navigation and we have a footer. So I'm just gonna create, oh, that's not what I meant to do. I wanna do TimbleNav, that for now is just gonna consist of home. And nav, and we can turn this into our nav elements or nav item. Again,
We accept the link and our name, and then put it in here as nav, nav, element, and home. Now, this is starting to look a little bit similar to what we had with the pagination, but they are gonna be looking a little bit different. We might actually end up reusing them when we start to add buttons, but that will require some styling that we haven't touched upon yet.
For now, this is gonna be very similar to the pagination we had, but that's okay. So, link. And then we're gonna say name. Oh, name, come on. All right, then let's do the footer. And we know this one is gonna be named
This one is going to be named footer. And we need this in the body. Timble footer. There we go. And nothing really changes here. All of this is unexported, so that is fine. Finally, let's just quickly look at the articles page. We can do the same treatment here. We can say something like Timble article hero. Grab all of this.
and pass in an article for models. So, article hero, a hero component like we had on the home page. Should we just do, should we do a symbol? Article content. I am overdoing it here, that is for sure. So we say article content, pass in.
content as a string. And of course, it needs to be up here. And then we just use content. And finally, content. Come on, content. No, article. Of course, it's article content. We're going to pass here. All right.
Componentized everything, split it up, having everything looking a bit more clean. We will do a bit more reusability later on when we start to actually have the styling in place so we can have the consistent buttons and all these things now. But if I go out and I see it just run. Okay, and I switch over to the browser. There we go, give it a refresh. Everything is looking exactly as before.
