text: Title: 🛡️ Documentation - Migrate all documentation to CSP compliant examples
  Body: ### Overview
  
  There are multiple locations, see details below, in our documentation that have examples of adding JavaScript and sometimes styles. As it stands, these are often provided in a way that will not be CSP compliant and not all developers will be easily able to add `nonce` attributes or other approaches.
  
  Instead we should try to help our community by providing examples using external scripts or where suitable our recommended Stimulus approaches.
  
  ### Details
  
  1. [ ] [`docs/extending/admin_views.md`](https://github.com/wagtail/wagtail/blob/main/docs/extending/admin_views.md?plain=1#L86) - `style` tag, to be changed to an external style file.
  2. [ ] [`docs/advanced_topics/documents/title_generation_on_upload.md`](https://github.com/wagtail/wagtail/blob/main/docs/advanced_topics/documents/title_generation_on_upload.md?plain=1) JS inline script usage.
  3. [ ] [`docs/advanced_topics/images/title_generation_on_upload.md`](https://github.com/wagtail/wagtail/blob/main/docs/advanced_topics/images/title_generation_on_upload.md?plain=1) Probably best done with the other title gen doc, they are 90% the same.
  4. [ ] [`docs/reference/hooks.md`](https://github.com/wagtail/wagtail/blob/main/docs/reference/hooks.md?plain=1) JS inline script usage for the fireworks example. This would be a perfect example for a simple Stimulus controller.
  5. [ ] Update [`docs/contributing/documentation_guidelines.md`](https://github.com/wagtail/wagtail/blob/main/docs/contributing/documentation_guidelines.md?plain=1) to add a new section at the bottom called '## Code example considerations'. Add a comment to this issue with what you think should go here, but we probably want to call out something simple about CSP compliance, accessibility compliance.
  
  ### Approach
  
  * For each usage of `<script>` tags with inline script, provide an updated example that provides the JS code in an external file. See https://security.stackexchange.com/questions/135912/what-is-an-inline-script
  * Ensure you fix any escaping, spacing and explain the file location with a comment at the start.
  * We can just use the `mysite.js` as a consistent filename as this is what we prepare in the new Wagtail tutorial.
  * An example of something like this already existing is on the panels page, see how we provide the example for [`static/js/inline-panel.js`](https://docs.wagtail.org/en/stable/reference/pages/panels.html#javascript-dom-events)
  * Reminder, we need to keep the intent of the existing documentation, e.g. the hooks page is to explain how the specific hooks work. It's only the way the JS is added that will change, instead of an inline script it will be an external script. We want examples to be simple, if there's a way to simplify the JS (within reason), that's good also.
  
  
  ### Working on this
  
  * Anyone can contribute to this. View our [contributing guidelines](https://docs.wagtail.org/en/latest/contributing/index.html).
  * This would be a great task for some new contributors, however, please pick up one at a time. Simply add a comment as to which one you will be doing and get your PR up.
  * Please also ensure you reference this issue when you raise a PR, it's very difficult to track otherwise.
  
  ### Additional context
  
  * This is similar to the uplift we did a few years ago to avoid using jQuery in docs examples - https://github.com/wagtail/wagtail/pull/7658
  * Part of our work to support CSP compliance https://github.com/wagtail/wagtail/issues/1288
  * There are some examples of inline `style` that we probably want to leave in, but maybe we should consider adding a warning? e.g. [`images/focal_points.md`](https://github.com/wagtail/wagtail/blob/main/docs/advanced_topics/images/focal_points.md?plain=1#L18)
  
  