Creating an index page for all posts

I’d like to have the blog/ page broken up to where I have

• https://my-site.com/blog/ is containing all of the created posts

• https://my-site.com/blog/this-is-a-post is a specific post.

I know I can pass a different template to blog/route.js…

module.exports = {
  template: 'BlogPost.svelte',
  permalink: ({ request }) => `blog/${request.slug}/`,
  all: () => [],
  data: {},
};

…but how do I create a singular index page? Simply have a Blog.svelte file for the default route?

[nickreese]

I think I follow the issue. Here is how you would specify different templates in the route.js and you can do something similar based on some field in frontmatter of the individual post from within BlogPost.svelte.

Route.js:

module.exports = {
  template: 'Blog.svelte',
  permalink: ({ request, settings }) => `/${request.blog.slug}/${request.slug}/`,
  all: async () => {
    return [{ blog: { slug: 'blog' }, template: 'BlogIndex' }];
  },

  data: ({ data }) => {
    return data;
  },
};

Blog.svelte

<script>
  import BlogIndex from './BlogIndex.svelte';
  import BlogPost from './BlogPost.svelte';

  export let settings, data, helpers, request;

  let component = BlogPost;

  if (request.template === 'BlogIndex') {
    component = BlogIndex;
  } 
</script>

<svelte:component this={component} {settings} {data} {helpers} {request} />

[ViorelMocanu]

I have the exact same issue and I’ve tried the latter method to no avail. The blog posts load correctly after having been passed through the Blog.svelte equivalent, but the index just throws a Not Found on me incessantly.

My blog folder is informatii-utile (which has all the .md files inside), my routing proxy is InformatiiUtile.svelte and the two templates are BlogIndex.svelte and BlogPosts.svelte. Exact structure is shown here.

I will be reproducing the relevant files here in hopes that someone might help:

route.js

module.exports = {
  template: 'InformatiiUtile.svelte',
  data: ({ data }) => {
    return data;
  },
  all: async () => {
    return [
      {
        'informatii-utile': { slug: 'informatii-utile', template: 'BlogIndex' },
        template: 'BlogIndex',
      },
    ];
  },
  permalink: '/informatii-utile/:slug/',
};

InformatiiUtile.svelte

<script>
  import BlogIndex from './BlogIndex.svelte';
  import BlogPost from './BlogPost.svelte';
  export let data, helpers, request, settings;
  const { html, frontmatter } = data;

  let component = BlogPost;
  if (request.template === 'BlogIndex') {
    component = BlogIndex;
  }
</script>

<svelte:component this={component} {settings} {data} {helpers} {request} />

Thank you in advance!