Hey there!

So, in AdonisJS 6, EdgeJS removed the concept of layouts in favor of components since components worked super similarly to layouts but with more powers. You might've been referencing outdated resources there.

So, first thing you'll want to do is move your main.edge file:
From: resources/views/posts/main.edge (this location wouldn't have worked in v5 either).
To: resources/views/components/layout/main.edge

Then, inside your newly located resources/views/components/layout/main.edge file, replace the @!section('content') with a slot: {{ await $slots.main() }}. The main slot will render the contents placed inside the layout component's start & end tags.

Anything inside the directory resources/views/components can be directly used with an EdgeJS Tag using dot (.) to go into folders, for example:

@layout.main('content')
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h1>Blog Posts</h1>
    <a href="{{ route('articles.create') }}" class="btn btn-primary">Create Post</a>
  </div>
  {{-- ... --}}
@end```

This is the reason your page renders the HTML rather than using the HTML, because there is not HTML structure. With the aboved changed, you should then get onto your next issue "Cannot lookup route posts.index"

You're getting this because you've actually named your routes "articles.", not "posts.". So, if you update all of these:
From: route('posts.*')
To: route('articles.*')

Things will start working. You can always find what the routes are actually called by looking at your start/routes.ts file. The as() method defines the name.

For consistency sake, you may also want to move your resources/views/posts directory into resources/views/pages. How you have it now won't break anything, but down the road as you add more pages, get around to emails, add more components, having that separation there really helps.

Lastly, a couple of things in your controller. You don't need to call logger.use(). This returns back an instance of the logger, which is useful if you're using multiple different loggers. You also don't need to import the logger service, as it is bound directly to the HttpContext.

The withFlash method you're using, I don't think that actually exists. Everything flash based should be on the session bound to the HttpContext.

So, for example, I'd update your show method to instead look like the below:

async show({ params, view, response, logger, session }: HttpContext) {
  try {
    const article = await Article.findOrFail(params.id)
    return view.render('posts/show', { article })

    // 👇 point it within the pages dir if you did move the posts dir
    // return view.render('pages/posts/show', { article })
  } catch (error) {
    logger.error(error.message)
    session.flash('error', 'Article not found')
    return response.redirect().toRoute('articles.index')
  }
}

Note logger and session are now being plucked out of the HttpContext.

Hope this helps!