Options for Path-Based Trailing Slash

[XIYO]

Describe the problem

• /posts seems to represent a top-level directory for viewing all posts.
  • /posts/ would be more appropriate.
• /posts/category-a also represents a directory concept.
  • /posts/category-a/ would be more fitting.
• /posts/category-a/hello-world is a document.
  • /posts/category-a/hello-world is appropriate.

Now, let's discuss navigation formats.

• posts

  • When there is no trailing slash, use "/posts"

  • Upward Navigation

    • Absolute path: <a href="/">
    • Relative path: <a href="./"> (Is using ./ for upward navigation a bit strange?)

  • Downward Navigation

    • Absolute path: <a href="/posts/category-a">
    • Relative path: <a href="./posts/category-a"> (Does this seem a bit unusual?)

  • When using a trailing slash, use "/posts/"

  • Upward Navigation

    • Absolute path: <a href="/posts">
    • Relative path: <a href="../"> (This is the correct upward navigation concept.)

  • Downward Navigation

    • Absolute path: <a href="/posts/category-a/">
    • Relative path: <a href="./category-a/">

Going a bit deeper:

• posts/category-a
  • When there is no trailing slash, use "/posts/category-a"
  • Upward Navigation
    • Absolute path: <a href="/posts">
    • Relative path: <a href="./">
  • Downward Navigation
    • Absolute path: <a href="/posts/category-a/hello-world">
    • Relative path: <a href="./category-a/hello-world"/>
  • When using a trailing slash, use "/posts/category-a/"
  • Upward Navigation
    • Absolute path: <a href="/posts/">
    • Relative path: <a href="../">
  • Downward Navigation
    • Absolute path: <a href="/posts/category-a/hello-world">
    • Relative path: <a href="./hello-world">

When you want to control screen tree access with relative paths, routes composed of slugs might not allow for precise trailing slashes and may require using ignore (which could potentially cause issues in the future).

Describe the proposed solution

export function trailingSlash({ page }) {
  const isDirectory = isDirectory(page.url);
  // or
  // const isCategoryPage ~~

  return isDirectory ? 'always' : 'never';
}

Importance

would make my life easier

[Conduitry]

https://kit.svelte.dev/docs/page-options#trailingslash You can put export const trailingSlash = whatever to have a custom value in each layout and on each page. Does this get you what you're asking for?

[XIYO]

I’m referring to the expansion of this feature.

Given a route structure like /src/route/[...slug], where the following paths are all routed by this setup:

• /posts/
• /posts/category-a/
• /posts/category-a/hello-world

I’m requesting more granular control over trailing slashes for each URL.

Currently, trailing slashes cannot be customized for individual URLs when using dynamic routes like [slug] or [...slug].

[dominikg]

it should be consistent by route I think. If some dynamic values have a need for different trailing, can you use param matchers to discriminate? [slug=slugNoTrailing]
[slug=slugWithTrailing]

[XIYO]

My initial example had a conceptual flaw.

Before proposing any code, I believe it’s important to first assess whether my suggestion addresses a valid requirement and, if deemed valuable, then proceed to propose a code solution. As a result, my initial code proposal was inadequate.

Initial Proposal with Conceptual Flaw:

export function trailingSlash({ page }) {
  const isDirectory = isDirectory(page.url); // Adding a trailing slash to an already determined URL seems like a poor requirement.
  // or
  // const isCategoryPage ~~

  return isDirectory ? 'always' : 'never';
}

What I intended to convey was the idea that URLs should be treated similarly to file system paths, but my initial code failed to express this concept correctly.

Here is a more refined version:

---

Typical Web File Serving

When serving with the html file extension included: /posts/category-a/my-cat.html is exposed. From this, it's immediately clear that it's a file.

When serving without the html extension: The URL could be hosted as /posts/category-a/my-cat or /posts/category-a/my-cat/.

This creates ambiguity in interpreting the path. Does "my-cat" refer to a category or a specific post?

My route structure is as follows:

- root
  - src
    - route
      - posts
        - [...slug]

In this structure, it’s not possible to dynamically change the trailing slash. While this might be irrelevant to users, it provides value to developers by making relative paths in anchors more meaningful.

Here’s an improved approach:

+page.js, +page.server.js:

export const trailingslash = ({ data }) => { // Needs more specific information regarding the passed data
  const isDirectory = data.type === 'D' ? true : false;

  return isDirectory ? 'always' : 'never';
}

+page.svelte:

<script>
  import { page } from 'app/store';
  // or
  // const { data } = $props();
</script>

<a href={$page.data.type === 'D' ? './' : '../'}>
Go up
</a>

// or

{#if $page.data.type !== 'D'} // current page is a post
  <a href='./'>Go to categories</a>
{/if}