Add back button to documentation pages

[JackTench]

No description provided.

[StarlitLuna]

I'm not inherently against a general purpose back button, but I'm not sure we need it here.

We could instead link directly to docs on the docs pages and make it more explicit that the user is going to the general docs page.

I'm also thinking that if someone clicks into a docs page from somewhere, like if we link to a specific doc on discord for example? Then the back button wouldn't actually work since there's nothing to go back to in the docs page.

[StarlitLuna]

Just picking this here to comment it once, instead of adding the return to docs button in each individual component, we should fix the router to make the docs pages children of docs.

i.e.

      <Route path="/docs/auto-splitters.md" component={AutoSplitters} />
      <Route path="/docs/auto-splitter-tips.md" component={AutoSplitterTips} />
      <Route path="/docs/settings-keybinds.md" component={SettingsKeybinds} />
      <Route path="/docs/split-files.md" component={SplitFiles} />
      <Route path="/docs/themes.md" component={Themes} />
      <Route path="/docs/troubleshooting.md" component={Troubleshooting} />

becomes

import { DocLayout } from "@/app/docs/layout";
// other imports

      <Route path="/docs" component={DocLayout}>
        <Route path="/auto-splitters.md" component={AutoSplitters} />
        <Route path="/auto-splitter-tips.md" component={AutoSplitterTips} />
        <Route path="/settings-keybinds.md" component={SettingsKeybinds} />
        <Route path="/split-files.md" component={SplitFiles} />
        <Route path="/themes.md" component={Themes} />
        <Route path="/troubleshooting.md" component={Troubleshooting} />
      </Route>

That would make the DocLayout component a wrapper to all the docs components. You would leave the <Route path="/docs" component={Docs}> path above for the main page.

Here's a quick DocLayout I made to test this out:

import { A } from "@solidjs/router";
import { ArrowLeft } from "lucide-solid";
import type { ParentProps } from "solid-js";

import { buttonVariants } from "@/components/ui/button";

export function DocLayout(props: ParentProps) {
  return (
    <div class="w-full min-w-0">
      <nav aria-label="Documentation" class="mb-6">
        <A
          href="/docs"
          class={buttonVariants({
            variant: "ghost",
            size: "sm",
            class: "-ml-2 text-muted-foreground hover:text-foreground",
          })}
        >
          <ArrowLeft aria-hidden="true" />
          <span>Documentation</span>
        </A>
      </nav>

      {props.children}
    </div>
  );
}

Looks like this:

[JackTench]

How does changing the router like that interfere with the menu page for the documentation if it's now existing as a DocsLayout component?

<Route path="/docs" component={Docs} />

My SolidJS isn't fantastic sorry, and I'm not really a web dev.

[StarlitLuna]

No worries.

It's just acting as a parent in the same way as other routing frameworks do. I.e. for the docs page itself, it uses the first route for ./docs. For the child doc pages like say /docs/page it skips the first /docs entry since that's standalone and then finds the second docs entry and then finds itself in the child listings. Then it loads the doclayout component as the component for that page, which itself loads the children which would be the matching route for that page which has the component for that doc page.

You can almost think of it like middleware that applies for the matching paths.