Home view structure

Now that our article model is done, let's start building out the skeleton for the UI. Basically, we will build the structure that all the pages will use. We'll begin by building the home view, only focus on the HTML, the temple markup, and interacting with data. Styling will be done in a separate module, as this is going to be a bit more evolved.

We're going to start by extracting a base layout component from the home view component. So we can reuse it on all of the pages. So let's jump into views and let's create a new component here called base layout. Timble. And this is in package views. And here we're going to say Timble base layout and we're not going to export it. We're only going to be using this for our

for our other pages that we are actually going to expose through the package. We're going to accept a title of type string. And this let us do something where we can modify the title that you see in the little bar in the browser whenever we change a page. Now, I'm going to copy paste some code here. There we go. Give that a save.

And so you can see here, we simply have the standard HTML markup that we had from the other pages as well. We only inject the little variable here, the title and then the title of the name of the block. And then we use this little children.

special variable here where we can simply wrap this in, we can wrap other pages out of views in this layout and it will simply be injected in the middle here and this makes it reusable throughout all of the pages that we have. And this is gonna become very handy when we start to have something like style sheets and assets and all of these things that we will be touching on very soon that need to exist on all

pages. Great. However, we also need on all pages our navigation bar and our footer. So to add that, we can go in here and say nav and close it. And inside the nav, we are going to have an on-order list. And in here, we're going to have a list item.

And for now, we're only going to be having one route. And this might seem a little bit redundant, but we're going to be adding to this navigation bar as we build out the block when we get to authentication. We're going to make this dynamic. So if you're logged in, there's going to be a log out button that should only show for admin users, right? So let's just create an anchor tag here that we're going to go to home.

Now we give that a save. So this is going to be our maybe unpolished nav bar for now. And then we also need a footer where we are going to be just going to be having the name of the block bleeding edge. And then we're going to create a spam where we will say, oh, I could delete it too much. We're going to say, where is it?

copy. So we have the copyright symbol. And now we can rely on go again here to say string convert and integer to and string and say time dot now dot year. Go. And we also need to get some imports that is sometimes not working that well with the LSP that we go and also time.

And let me just format this correctly. So we're going to have like this. And now, whenever the year chains, we will not have what looks like an outdated footer anymore. So we can simply use standard Go types and packages from the standard library here. So now our footer was a copyright and then the current year that we are in. Next, let's create our

whom your component will consist of a hero section, some social links like Twitter, LinkedIn, GitHub, a list of all of our latest articles and just wrap it all in our main element for now. So we can get rid of all of this and say base layout and say the title is going to be home. Get rid of this and

This and now our home view component is inheriting everything from the base layout. Now, we have some errors here. We're going to fix that in a second. I'm just going to get rid of it for now, so we can actually focus on the hero section. And this is just going to be a section that should tell visitors very quickly about the block, what they can expect, and hopefully get them to stick around. So I'm going to create a section tag here, or a section element.

And we have not touched upon styling and CSS and all of that yet. So I'm just going to create our inline style here to be able to visually identify the different elements. So we're just going to say solid, one pixel solid, and then black. And in here, we're going to have an H1. That is just going to be the title of the block, so bleeding edge.

Oh, I have too many. There we go. And then we're going to create a paragraph tag, saying a block about the latest advancement in tech. Close the tag. Get rid of all of this. And I'm also just going to add some bricks. Again, we will handle all of this with styling in just a minute so we can actually differentiate

the sections probably, but for now, we're just going to add a little bit of error and a border so we can see the elements we are building out. Next, I'm going to add the social links to Twitter, to LinkedIn, to GitHub. So when this block inevitably blows up, people can actually follow us on social media. And you can actually grab what we have here. And then we're going to create an on-on list again.

and a list item. And in here, we're gonna have an anchor tags, anchor tag, that's gonna go out to Twitter or whatever you wanna call it. Gonna copy this two more times. And I'm gonna say linked in. Oh, it linked in, I can't spell.

And finally, git hub. And of course, we also need to fill in the anchor tags here. Feel free to fill them out with your Twitter, your LinkedIn, and your GitHub profile. One final thing. We need a section where we can list out all of the articles or all of the latest articles on the home page. This is where we will loop through the data that gets passed in from the controller. All right, we're gonna grab this section here.

close it off, then we're gonna say H2, latest articles, close it, and then we create a loop, like any other loop we will create and go, this for loop here, we're gonna say article, range articles, great, what do we want? We want a diff, so we can style it later, and inside the diff we're gonna say H3,

title to be very explicit here, article title, close the h3 tag, then we're going to create a paragraph tag where we're going to pass in the article excerpt. There we go. I also want to add a little bit of air between the elements. So we're just going to use this break break elements here. And then finally, we're going to create an anchor tag.

That's gonna say, read me, close it. And inside this H with, again, since we are just writing Go, we can use the standard library. And what we wanna do here is we wanna take the articles page route, replace the param with the ID of the article. So we're gonna say strings, import it, replace. And inside here, we're gonna pass the routes article page.

We're going to replace the ID param with the article ID string here. And we're going to replace the first instance. So give that a save. And what is happening here is we are just looping all the articles passed in from the controller. And then for each article, we render a diff with the title, with the excerpt, and then are linked to the actual article.

And since we are now using a UID instead of an integer, we are passing the ID on the article and the UID type has this dot string method that simply just converted to a string. So this is basically what we need here for now. We can now see the articles and we can go to the article page and see a specific instance of an article.