Inconsistent reference to reserved file names

[sacrosanctic]

Issue

In the docs, a feature or API often applies to more than 1 reserved file. But they're displayed inconsistently.

Example 1

https://github.com/sveltejs/svelte.dev/blob/2e91d807ec5a58493150740c088c766d40652945/apps/svelte.dev/content/docs/kit/98-reference/10-%40sveltejs-kit.md?plain=1#L2000-L2001

+page/layout.server.js

It is unclear where the forward slash begins and ends on the split. Does layout start with a plus? does +page also have a .server? Can also be confused with paths.

Example 2

https://github.com/sveltejs/svelte.dev/blob/2e91d807ec5a58493150740c088c766d40652945/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md?plain=1#L396

Here it is listed separately, but always shows .js even though you toggle it to TS

Example 3

https://github.com/sveltejs/svelte.dev/blob/2e91d807ec5a58493150740c088c766d40652945/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md?plain=1#L15-L20

It doesn't list all the options; the rest is listed in the description. It is also very tight, it lists it out separately but uses a forward slash with no spacing.

Suggested Fixes

Dedicated UI

I suggest the docs site create a UI similar to <select /> that can handle this kind of permutation.

Prior Art:

• I can't find any :/

Formatted Text

[+page.server.js | +layout.server.ts]
This gives it a distinctive look so readers can quickly skip over it.

Plain Text

+page.server.js, +layout.server.js
This is just formatted like English.

Additional Details

Currently, there are many reserved name combinations for which we cannot simply say *.server.js or +layout.*; it just starts to become cryptic.

Here is a list of all current file names with special meaning:

• +page.svelte
• +page.js
• +page.server.js
• +layout.svelte
• +layout.js
• +layout.server.js
• +server.js
• +error.svelte
• *.svelte.js

Plus 7 more .ts files

[sacrosanctic]

@eltigerchino