How to list the latest blogs on the homepage?

[Justine Kizhakkinedath]

Hey, I'm using your template to build a blog. Hope it's fine by you?

The index page for the "blog" lists all the blogs. How can I list the latest 3 blogs on the homepage itself?
Something like "Read my latest blog" and display the latest blogs on the homepage itself.

I saw in blog/index.svelte that it fetches a blog.json and renders it for the blog index, but the same code doesn't seem to work when I do it in the main index.svelte.

[Maxi Ferreira]

Hey @justinekizhak. That same code should work in index.svelte, if you get a "cannot find property length of undefined" error message, try restarting the dev server and you should see the list of blog posts in the index.

[Justine Kizhakkinedath]

Hey, @Charca restarting the server got it working inside index.svelte, but for maintenance, I had refactored all the HTML and its CSS into a separate component at src/components/content.svelte and that is what right now is imported into index.svelte and it's not working.

I tried "console logging" the module

<script context="module">
 console.log("content.svelte");
 export function preload({ params, query }) {
    console.log("1");
    return this.fetch('blog.json').then(r => r.json()).then(blogs => {
        console.log("2");
	return { blogs };
    });
 }
</script>

but I'm only getting "content.svelte" output.
I tried changing the path of blog.json, I tried ../routes/blog.json.

And I got the error <content> was created without expected prop 'blogs'.

[Matt Heslington]

Hello,

Is there a way to refer to an image in the front-matter of a post, and then reference it for either the post header or as thumbnail etc in the list of articles?

Cheers,
Matt

[Maxi Ferreira]

@MattHeslington to make a front-matter attribute available in your list of articles, you need to add the attribute to the contents object returned in index.json.js: https://github.com/Charca/sapper-blog-template/blob/master/src/routes/blog/index.json.js#L4-L9

And you'd also need to return that same attribute from the object in _posts.js: https://github.com/Charca/sapper-blog-template/blob/master/src/routes/blog/_posts.js#L61-L68

[Matt Heslington]

Hey @Charca, thanks for getting back to me! How should the image be defined in _posts.js, please?

[Maxi Ferreira]

Hey @MattHeslington, the changes you should make to support this are:

1. Add the image attribute in the front-matter section of your markdown blog post. For example:

---
title: Hello World 👋
date: "2019-06-11T08:38:00.000Z"
image_url: /path/to/image.png
---

2. In _posts.js, grab the image_url attribute from the data object on line 45:

const { title, date, image_url } = data

... and add it to the returned object on line 61:

return {
    title: title || slug,
    slug,
    image_url,
    ...

3. In index.json.js add image_url to the returned object on line 4:

return {
    title: post.title,
    slug: post.slug,
    image_url: post.image_url,
    ...

4. In your index.svelte component you should be able to use the image_url of each post, like:

<img src={post.image_url} alt={post.title} />

[Matt Heslington]

Hello @Charca that works brilliantly, thank you for your help!

[Justine Kizhakkinedath]

Thanks, @Charca.