Organization: auto populate slug on creation

[humitos]

Show the slug field when creating the organization and auto-populate it based
on the name of the organization.

Peek.2025-07-03.17-43.webm

Requires readthedocs/readthedocs.org#12297
Closes #25

[agjohnson]

On the UX side of things, I think the user needs to see a live update field with something like:

"Example project default URL: https://org-slug-example-project.readthedocs-hosted.com"

Users won't understand from this that the organization slug is going to affect project URLs. Largely, they won't know what the organization slug does at all, really.

So on the implementation side, exposing the slug field as a visible input is maybe not what we want. We probably want a separate UI with a bit more explanation of the slug. This might also make my suggestion on using a web component more applicable -- instead of altering a form field the web component would render a segment with a verbose explanation of project URLs/etc.

[humitos]

OK. I re-wrote this JS using knockout and I added a UI element (grabbed from redirects page) that shows a live example of a project URL:

Peek.2025-07-07.11-19.webm

[agjohnson]

You might have missed push up the code here, I don't see any new changes.

[humitos]

Ha, indeed, you are correct. I just pushed them 😄

[agjohnson]

Hiding the block when it's empty works, but makes the UI jump around. I think defaulting to a placeholder when the slug is empty is probably better and would always show this block with something useful.