Module 1 - Introduction
1. Welcome to the course2. Why Go3. Why start and build a blog?4. What about React/Vue/Angular?5. Getting setup and source filesModule 2 - Tech Stack Walkthrough
1. Introduction to Golang Part 12. Introduction to Golang Part 23. Introduction to Golang Part 34. Structuring Golang Applications5. Templating with Templ6. Just enough interactivity with HTMX7. Getting started with postgres8. Servers, routers and endpointsModule 3 - Creating the MVP
1. What are the minimal requirements?2. Doing some initial plumbing3. Embedding static assets4. Creating our first views5. Tailwind & Utility-first CSS6. Styling the Landing Page7. Styling the Article PageModule 4 - Managing Content
1. Choose your own adventure2. Writing in Markdown3. Parsing Markdown to HTML4. Frontmatter and Meta Information5. Making our code examples look nice6. Adding error pagesModule 5 - Adding the Database
1. What is a Migration?2. Our first migration: articles table3. Creating the Database Layer4. Showing the Latest Posts5. Slugs and Human Readable URLsModule 6 - Managing the Blog
1. What are the minimum requirements?2. A new layout approaches3. Creating a rough outline4. Our second migration: Users Table5. Introduction to authentication6. Storing passwords securely7. Authenticating users8. Remember me9. Managing posts using a hypermedia API10. Our third migration: Altering Posts Table11. Only show posts marked readyModule 7 - Adding Subscribers
1. What are the minimum requirements?2. Our fourth migration: Subscribers Table3. Creating the subscription form4. Adding some interactivity with HTMX5. Saving new subscribers in the database6. Verifying subscriber emails7. Our fifth migration: Tokens Table8. Email validation view9. Email validation tokens10. Sending validation emails with SES11. Making it all come togetherCreating the MVP
Styling the Article Page
Summary
In this video, I improve the article page design to match the landing page's aesthetic. I install the Tailwind CSS typography plugin to enhance the readability of raw HTML. I modify the page layout to be responsive, removing the back button on smaller screens and adding it back on larger screens. I adjust the article element's width, padding, and typography classes to ensure good readability across different screen sizes. I update the text color and add a divider and placeholder for other articles. The goal is to create a minimal viable product (MVP) for the blog, with plans to incorporate markdown content and code highlighting in the next module.
Transcript
So in the last episode, we ended up with our landing page looking like this. Now, we didn't do any changes to our article page, which currently looks like this, and this is obviously not really gonna invite anyone to read our articles, right? So, just like with the landing page, where we had a skeleton design, this was our skeleton design from earlier, and I want to move it closer to how the landing page looks, so we have something like this. And it's not really gonna require too many changes. We have most of this in place, we just need to make sure that it's responsive, and it uses this color scheme that we created in the last episode, so everything stays more consistent in our design. Before we begin actually styling the article page, I want to grab this plugin from Tailwind that provides us with a set of prose classes that will make raw vanilla HTML look really, really nice. And this fits perfectly into our workflow, as later down the line, we will be taking markdown and converting into HTML. So, we can simply add these prose classes on an article element, and then we just render the transformed markdown inside of that article tag. So, let's go ahead and grab this npm install line right here, and then go into our resources, run npm install. Go. Next, we just need to extend our Tailwind config under the plugins, and we just say require Tailwind CSS typography. And now we can add the prose class to HTML element, and the children of that element would have some nice defaults that makes them super easy to read. Just as what we did with the homepage, we need to remove this main element, since it's now coming from the base template. And then we need to move the back button inside of the main div element here, and this now becomes relative. Container, going to send all of the contents. We're going to make it a flex container with direction column. I'm going to say item center. Flex one, so take up all of the height, and say bg base 100. If we go in here and check the screen from our mobile size screen, refresh, we can see we have not the right background color, but we still have some overflow. The color for the font is not really right, but we have this button that doesn't really fit into the flow of the screen, and it's simply because we don't have enough screen real estate. So we're going to be removing the back button on smaller screens, and then showing it on larger screens. To do that, just going to grab some code here. I'm going to update this. And the only new thing here really is that we are saying start with being invisible, and then once we get up to a medium-sized screen, become visible, and then everything else basically stay the same. So now, if we refresh the page, we can see that the button is gone, and we have a little bit easier to read color now. And if we go out of this, we can see that we have the back button as we want, right? Now, for our article element, we don't need to make too many changes. We just want to say take up all of the width on small screens, add a bit of padding, and then on larger screen size, remove the padding, and only take up four-fifths of the available width. And then we're going to use the prose classes that we get from the Tailwind plugin, and we're going to say prose on smaller screen sizes, and then when we reach a large screen size, we're going to say prose xl. And this basically just add a bit more spacing between the paragraphs and also bumps up the font size a little bit. If you jump in here and actually update, the text color is still wrong, but we have a little bit of error so the content can breathe a bit more. But let's just go in here and say text-based content so we can read it, and let me just remove the old ones and add one more so it gives a bit more of a feel of what an actual article looks like. So now you can see we can actually read the content that is on the page, right? We still have a little bit of overflow that's going to be fixed in just a second. Now, down here at the bottom, we also have this divider here. I'm going to throw this inside of the article tag. So just down at the bottom, put that in, and you can see it now adds a little bit of space. It's also keeping with the size of the content so everything looks really nice and aligned. Finally, we have the new or other articles that you can read. So let me just remove all of this, and here we are not really doing much. We are just adding the text-based content so the content is readable. We add a little bit of margin, and now you can see we have some content that actually fits onto the screen for our small mobile-sized screen here, right? And you can read it, and it aligns perfectly. So this is looking quite decent for our mobile-sized screens, but if we actually jump in here to a full-size screen, you can see we now have the back button, and we have the content taken up just enough so it's readable, and the font size is a little bit bigger. And down here, we have the other articles that's going to show up once we have more articles to show. But this is essentially what we need for our article page. Of course, we want to change the lorem ipsum text, and in the next module, we're going to be tackling actually having the markdown content ship with our binary. We're going to pass it, and we're going to make it look good and make sure our code examples is also showing up on the page with some nice highlighting and so forth. But for now, the MVP of our blog is basically finished.