Allow an easy way NOT to wrap a file

sveltejs / kit

web development, streamlined

https://kit.svelte.dev

MIT License

17.88k stars 1.8k forks source link

Allow an easy way NOT to wrap a file #12107

Closed tobiasBora closed 1 month ago

tobiasBora commented 1 month ago

Describe the problem

I have a template index.html that I want to include verbatim at url /admin. But if I put its content in +page.svelte, it gets wrapped by the content of app.html and the root +layout file. I tried to move it in /static/admin/index.html, but then the issue is that admin/index.html works, but admin alone gives an error 404.

Describe the proposed solution

Maybe allow the user to define a file like +layout@@.svelte to inherit from nothing, not even app.html or the root layout.

Alternatives considered

No response

Importance

would make my life easier

Additional Information

No response

hyunbinseo commented 1 month ago

Possible solutions are:

Serve the file statically /static/admin/index.html
Serve the file dynamically /src/routes/admin/+server.ts

You can use custom template engines in server endpoints, such as LiquidJS.

If the index.html file is just a template, and Svelte should be rendered inside it, use (groups)

https://kit.svelte.dev/docs/advanced-routing#advanced-layouts

Do not put anything in the root +layout.svelte and the related files.
Create /src/routes/(non-admin) and /src/routes/(admin)/admin directories.
Put existing routes in the former directory.

You can now use separate +layout.svelte for each groups.

tobiasBora commented 1 month ago

Thanks, but I can't find how this adress raised in the issue (I will try the second server.js based solution later today):

/static/admin/index.html will not redirect the /admin page to the /admin/index.html leading to a 404 error. It might be possible to do this in production if we serve the static files from nginx or alike but not sure what is the correct way to do it to get it to work both in prod and while developping with npm run dev
even if the layout is empty, app.html is always used to wrap the layout content, and can't find how to get rid of this

hyunbinseo commented 1 month ago

I've understood why /static/admin/index.html does not work. Thanks for the clarification.

Serving the index.html file or a newly generated HTML using template engines (e.g. LiquidJS, Nunjucks) in the +server.ts endpoint will definitely work. I am actually using it in a project.

If you can overhaul the project structure, I suggest the following:

└── src/
    ├── app.html - Generic as possible. Don't add anything here.
    └── routes/
        ├── (admin)/
        │   ├── admin
        │   └── +layout.svelte - Use the group layout to add `<svelte:head>` etc.
        └── (non-admin)/ - Put existing routes in this group.
            ├── about
            ├── profile
            └── +layout.svelte - Use the group layout to add `<svelte:head>` etc.

Note that even with this approach, you cannot add Svelte page component directly under <body>.

<body data-sveltekit-preload-data="hover">
  <div style="display: contents">%sveltekit.body%</div>
</body>

Conduitry commented 1 month ago

If you want to render a file actually verbatim, then a +server route is how you probably should be doing it.

If you want to render a page without any wrapping layout other than what's present in your app.html, then you need to make sure your top-level layout doesn't introduce any wrapping markup. The way to do this (while preserving shared layouts for other routes) is with layout groups, as mentioned above.