I think that is actually something that should be done after the design has been implemented because it's going to be easier to see exactly what's happening and to position all of the elements properly on the page.

In order to implement this, I'm going to pull in the design elements that were built out during the search engine front-end implementation course for our project. If you did not go through that then you can find that here in this GitHub link, which is included in the show notes.

If you want to go through that one project, then you can find it on Devcamp in the CSS grid course and you can go through and see how I've built out that full front end implementation.

I'm simply going to bring all of those styles and all of those elements in, and I'm also going to give you a link to the Daily Smarty branding page. This is where you're going to be able to get the logo that we're going to be using and is going to be placed at the top of the page on both of the components.

Now that you know what we're doing in this guide we're just going to focus on the home page. Let's come here and I'm going to bring in the styles.

I'm going to start off by just bringing in all the styles so let's click here on RAW. That's going to allow us to just easily copy all of these and then we're going to bring them down into the page

Go into your App.vue and at the very bottom, you can then paste in all of those styles.

Now I am not going to leave it exactly like this, and the reason for that is because some of these styles are specific to the results page some of them are specific to the home page and it'll be a really bad practice just to keep all the styles in the same spot.

That part of the reason why the component architectures become so popular is that it gives you the ability to organize just not just your javascript code and your HTML code, you also can organize your style.

We're going to do that in a little while but for right now I just want to get all of this up and looking good. Let's switch into the Homepage.vue and if you switch to the site you'll notice that it still doesn't really look very good and that's because not only do we need to bring in our styles. We also need to bring in the HTML code.

If you come here to the home page you can see the UI is definitely changed but not exactly for the better.

Let's switch back and I'm going to go now to the index.html in our front-end repo, and I want to grab all of the elements starting at the div in the body tags, and going down all the way to the bottom where the other div is.

Now let's go back to our Homepage.vue and I'm going to come down below our closing div tag in the HTML section, and now let's just paste that in. You're going to get a horrible error message but the only reason that this is here all it's telling you is that we're outside of the wrapper div.

I'm going to get rid of all of our other code, and now all we're going to be left with is that front-end implementation code. Hit save now and go back, and you'll see it's starting to shape up.

So now you can see we're getting closer to what we want that front-end implementation to look like. We're missing the logo here, so let's fix that.

Head to Daily Smarty logos, and right-click on the circle logo click on Save Image and then go into wherever you have this application.

Save it in src/assets and save. Now as you may have noticed that has a really long nasty hash that's just there for performance reasons for the Daily Smarty site, but we don't need that. So I'm going to open it up inside of the code and let's rename it to ds_circle_logo.png

And now we use that cool @ symbol to grab the path. Whenever you're inside of a Vue template you have access to the root of the source directory.

Let's go to the application you'll see that our logo is there and it's looking pretty good.

Everything here is looking good but now it's no longer functional so let's just add that functionality back into it.

Homepage.vue

<div class="search-bar homepage-search-bar">
    <input type="text" placeholder="&#xf002; Search DailySmarty" @keyup.enter="submitQuery">
    <p>Press return to search</p>
</div>

Now, this should give us what we're looking for. If I come here and type rails than everything there is working it takes me to the search results page and you can see each one of these is rails related.

That is working nicely. So now that we have that, let's go down and you may notice each one of these recent posts on our homepage is just hardcoded in, so we need to iterate over these and we need to show this on the screen.

Scroll down inside of the template and you want to get rid of the three of them because those are hardcoded and we're going to use a v-for directive in order to iterate over it.

Homepage.vue

<div class="recent-posts">
    <div v-for="post in recentPosts" :key="post.id" class="recent-post">
        <div class="recent-post-title">
            {{ post.title }}
        </div>

Let's go back and see this.

And this is all working. Now we actually have real titles and they're stored right here. So that's looking really good. Now the next thing to look at is this category. In the Daily Smarty API, this is actually called to a topic. Let's see exactly how we can work with this.

The way that I typically like to do this is I like to use a pre tag which gives us the ability to format our JSON in a way that makes it a little bit easier to see on the screen. Now, I want to take a look at just the raw posts.

Homepage.vue

      <pre>
          {{ post }}
      </pre>
      <div class="recent-post-category">
          JavaScript
      </div>
    </div>
</div>

This is going to look a little messy, but it's going to give us the ability to see what we're looking for. I don't really care about the title or the content right now. What I care about the most is the associated topics list.

The reason why I like using the pre tags is that it gives me really easy access to see exactly what attributes I have access to. That's how I was able to call post.id and get access to the id or say post.title, which gives me access to the title.

Now, I know that there is this array item called associated topics, and I don't want to show all three of them because we may have some post in the future that may have 10 topics and we don't really want to show all of them.

Let's just grab the very first one.

Homepage.vue

      <pre>
          {{ post }}
      </pre>
      <div class="recent-post-category">
          {{ post.associated_topics[0] }}
      </div>
    </div>
</div>

You can see that we now have access to Vue, Vue, and Linux, which are the topics.

We have the title but I don't think it's really very useful unless it's a link, so I'm going to wrap this title up as a link.

Homepage.vue

<div class="recent-posts">
    <div v-for="post in recentPosts" :key="post.id" class="recent-post">
        <div class="recent-post-title">
            <a :href="post.url_for_post" target="_blank">
                {{ post.title }}
            </a>
        </div>
      <div class="recent-post-category">
          {{ post.associated_topics[0] }}
      </div>
    </div>
</div>

Let's see if that works.

Now you may notice our styles are broken but we'll fix that now. Go back to the app and so we can actually find that let's make sure we have the right name, so recent-post-title. Now that we have it, we need to apply the style to the link so just add an A onto it and that's going to fix it.

App.vue

.recent-post-title a {
  color: #535353;
  font-size: 1.4rem;
  text-decoration: none;
}

Now it's working and it looks really good. I like that all of this is coming together really nicely. There's obviously a few things we still need to work on even on this page. We need to bring in the font awesome library so we can have our little search icon.

We're also at the very end going to organize our component styles so anything that is specific only to the home page is going to be inside the Homepage.vue file and then anything specific to search results is going to be there and all of our universal styles can stay in App.vue.

So great job if you went through this. Everything is looking really nice and we're getting closer to the final product.

Resources

• Source Code
• Style Code
• Logo Page