DOC-3313_v2: Improve Developer Onboarding and fix broken partials for bundling pages and key architectural changes. (#3915)

* DOC-3313_v2: Improve Developer Onboarding and fix broken partials for bundling pages and key architectural changes.

* DOC-3313_V2: Fix list syntax errors.

* DOC-3313_v2: Remove Bower documentation due to deprication 2017 notice.

* DOC-3313_v2: update wording from supported to supported integrations.

* DOC-3313_v2: update working from framework to integration.

* DOC-3313_V2: updating naming conventions.

* DOC-3313_v2: add todo for missing bootstrap CDN link/script.

Author: kemister85

modules/ROOT/nav.adoc

@@ -1,58 +1,74 @@
 * xref:getting-started.adoc[Getting started]
 ** xref:introduction-to-tinymce.adoc[Introduction to {productname}]
 ** xref:installation.adoc[Installation]
-*** Cloud
-**** xref:cloud-quick-start.adoc[Quick start]
-**** xref:react-cloud.adoc[React]
-**** xref:angular-cloud.adoc[Angular]
-**** xref:vue-cloud.adoc[Vue.js]
-**** xref:blazor-cloud.adoc[Blazor]
-**** xref:svelte-cloud.adoc[Svelte]
-**** xref:webcomponent-cloud.adoc[Web Component]
-**** xref:jquery-cloud.adoc[jQuery]
-**** xref:bootstrap-cloud.adoc[Bootstrap]
-**** xref:django-cloud.adoc[Django]
-**** xref:laravel-tiny-cloud.adoc[Laravel]
-**** xref:rails-cloud.adoc[Ruby on Rails]
-*** Self-hosted
-**** React
-***** xref:react-pm-host.adoc[Using a package manager with hosting]
-***** xref:react-pm-bundle.adoc[Using a package manager with bundling]
-***** xref:react-zip-host.adoc[Using a .zip package with hosting]
-***** xref:react-zip-bundle.adoc[Using a .zip package with bundling]
-**** Angular
-***** xref:angular-pm.adoc[Using a package manager]
-***** xref:angular-zip.adoc[Using a .zip package]
-**** Vue.js
-***** xref:vue-pm.adoc[Using a package manager]
-***** xref:vue-zip.adoc[Using a .zip package]
-**** Blazor
-***** xref:blazor-pm.adoc[Using a package manager]
-***** xref:blazor-zip.adoc[Using a .zip package]
-**** Svelte
-***** xref:svelte-pm.adoc[Using a package manager]
-***** xref:svelte-zip.adoc[Using a .zip package]
-**** Web Component
-***** xref:webcomponent-pm.adoc[Using a package manager]
-***** xref:webcomponent-zip.adoc[Using a .zip package]
-**** xref:swing.adoc[Java Swing]
-**** xref:shadow-dom.adoc[Shadow DOM]
-**** xref:jquery-pm.adoc[jQuery]
-**** xref:bootstrap-zip.adoc[Bootstrap]
-**** xref:django-zip.adoc[Django]
-**** xref:expressjs-pm.adoc[Node.js + Express]
-**** Laravel
-***** xref:laravel-composer-install.adoc[Using the Composer package]
-***** xref:laravel-zip-install.adoc[Using a .zip package]
-**** Ruby on Rails
-***** xref:rails-third-party.adoc[Using a package manager]
-***** xref:rails-zip.adoc[Using a .zip package]
-**** xref:wordpress.adoc[WordPress]
-**** xref:npm-projects.adoc[NPM projects]
-**** xref:php-projects.adoc[PHP projects]
-**** xref:dotnet-projects.adoc[.NET projects]
-**** xref:bower-projects.adoc[Bower projects]
-**** xref:zip-install.adoc[{productname} .zip deployments]
+*** xref:installation-cloud.adoc[Cloud]
+**** xref:cloud-quick-start.adoc[Quick start guide]
+**** Supported Integrations
+***** xref:react-cloud.adoc[React]
+***** xref:angular-cloud.adoc[Angular]
+***** xref:vue-cloud.adoc[Vue.js]
+***** xref:blazor-cloud.adoc[Blazor]
+***** xref:svelte-cloud.adoc[Svelte]
+***** xref:webcomponent-cloud.adoc[Web Component]
+***** xref:jquery-cloud.adoc[jQuery]
+**** Backend Integrations
+***** xref:django-cloud.adoc[Django]
+***** xref:laravel-tiny-cloud.adoc[Laravel]
+***** xref:rails-cloud.adoc[Ruby on Rails]
+**** Other Integrations
+***** xref:bootstrap-cloud.adoc[Bootstrap]
+*** xref:installation-self-hosted.adoc[Self-hosted]
+**** xref:npm-projects.adoc[Quick start guide]
+**** Supported Integrations
+***** React
+****** xref:react-pm-host.adoc[Using a package manager with hosting]
+****** xref:react-pm-bundle.adoc[Using a package manager with bundling]
+***** Angular
+****** xref:angular-pm.adoc[Using a package manager]
+***** Vue.js
+****** xref:vue-pm.adoc[Using a package manager]
+***** Blazor
+****** xref:blazor-pm.adoc[Using a package manager]
+***** Svelte
+****** xref:svelte-pm.adoc[Using a package manager]
+***** Web Component
+****** xref:webcomponent-pm.adoc[Using a package manager]
+***** xref:jquery-pm.adoc[jQuery]
+***** xref:swing.adoc[Java Swing]
+**** Backend Integrations
+***** Laravel
+****** xref:laravel-composer-install.adoc[Using the Composer package]
+***** Ruby on Rails
+****** xref:rails-third-party.adoc[Using a package manager]
+***** xref:expressjs-pm.adoc[Node.js + Express]
+**** Other Integrations
+***** xref:shadow-dom.adoc[Shadow DOM]
+***** xref:php-projects.adoc[PHP projects]
+***** xref:dotnet-projects.adoc[.NET projects]
+***** xref:wordpress.adoc[WordPress]
+*** xref:installation-zip.adoc[ZIP]
+**** xref:zip-install.adoc[Quick start guide]
+**** Supported Integrations
+***** React
+****** xref:react-zip-host.adoc[Using a .zip package with hosting]
+****** xref:react-zip-bundle.adoc[Using a .zip package with bundling]
+***** Angular
+****** xref:angular-zip.adoc[Using a .zip package]
+***** Vue.js
+****** xref:vue-zip.adoc[Using a .zip package]
+***** Blazor
+****** xref:blazor-zip.adoc[Using a .zip package]
+***** Svelte
+****** xref:svelte-zip.adoc[Using a .zip package]
+***** Web Component
+****** xref:webcomponent-zip.adoc[Using a .zip package]
+***** xref:swing.adoc[Java Swing]
+**** Backend Integrations
+***** xref:django-zip.adoc[Django]
+***** xref:laravel-zip-install.adoc[Laravel]
+***** xref:rails-zip.adoc[Ruby on Rails]
+**** Other Integrations
+***** xref:bootstrap-zip.adoc[Bootstrap]
 ** xref:upgrading.adoc[Upgrading {productname}]
 * xref:how-to-guides.adoc[How-to guides]
 ** Learn the basics
@@ -63,64 +79,6 @@
 *** xref:spell-checking.adoc[Spell checking]
 *** xref:editor-content-css.adoc[CSS for rendering content]
 *** xref:userlookup.adoc[Using the UserLookup API]
-** Environment setup guides
-*** React framework
-**** xref:react-cloud.adoc[Using the Tiny Cloud]
-**** xref:react-pm-host.adoc[Using a package manager with hosting]
-**** xref:react-pm-bundle.adoc[Using a package manager with bundling]
-**** xref:react-zip-host.adoc[Using a .zip package with hosting]
-**** xref:react-zip-bundle.adoc[Using a .zip package with bundling]
-**** xref:react-ref.adoc[Technical reference]
-*** Angular framework
-**** xref:angular-cloud.adoc[Using the Tiny Cloud]
-**** xref:angular-pm.adoc[Using a package manager]
-**** xref:angular-zip.adoc[Using a .zip package]
-**** xref:angular-ref.adoc[Technical reference]
-*** Vue.js framework
-**** xref:vue-cloud.adoc[Using the Tiny Cloud]
-**** xref:vue-pm.adoc[Using a package manager]
-**** xref:vue-zip.adoc[Using a .zip package]
-**** xref:vue-ref.adoc[Technical reference]
-*** Blazor framework
-**** xref:blazor-cloud.adoc[Using the Tiny Cloud]
-**** xref:blazor-pm.adoc[Using a package manager]
-**** xref:blazor-zip.adoc[Using a .zip package]
-**** xref:blazor-ref.adoc[Technical reference]
-*** Svelte framework
-**** xref:svelte-cloud.adoc[Using the Tiny Cloud]
-**** xref:svelte-pm.adoc[Using a package manager]
-**** xref:svelte-zip.adoc[Using a .zip package]
-**** xref:svelte-ref.adoc[Technical reference]
-*** Web Component
-**** xref:webcomponent-cloud.adoc[Using the Tiny Cloud]
-**** xref:webcomponent-pm.adoc[Using a package manager]
-**** xref:webcomponent-zip.adoc[Using a .zip package]
-**** xref:webcomponent-ref.adoc[Technical reference]
-*** xref:swing.adoc[Java Swing]
-*** jQuery
-**** xref:jquery-cloud.adoc[Using the Tiny Cloud]
-**** xref:jquery-pm.adoc[Using a package manager]
-*** Bootstrap framework
-**** xref:bootstrap-cloud.adoc[Using the Tiny Cloud]
-**** xref:bootstrap-zip.adoc[Using a .zip package]
-*** Django framework
-**** xref:django-cloud.adoc[Using the Tiny Cloud]
-**** xref:django-zip.adoc[Using a .zip package]
-*** xref:expressjs-pm.adoc[Node.js + Express]
-*** Laravel framework
-**** xref:laravel-tiny-cloud.adoc[Using the Tiny Cloud]
-**** xref:laravel-composer-install.adoc[Using the Composer package]
-**** xref:laravel-zip-install.adoc[Using a .zip package]
-*** Ruby on Rails framework
-**** xref:rails-cloud.adoc[Using the Tiny Cloud]
-**** xref:rails-third-party.adoc[Using a package manager]
-**** xref:rails-zip.adoc[Using a .zip package]
-*** xref:wordpress.adoc[WordPress]
-*** xref:npm-projects.adoc[NPM projects]
-*** xref:php-projects.adoc[PHP projects]
-*** xref:dotnet-projects.adoc[.NET projects]
-*** xref:bower-projects.adoc[Bower projects]
-*** xref:zip-install.adoc[{productname} .zip deployments]
 ** xref:cloud-deployment-guide.adoc[Cloud deployment guide]
 *** xref:editor-and-features.adoc[Cloud deployment of editor & plugins]
 *** xref:features-only.adoc[Cloud deployment of plugins Only]
@@ -328,13 +286,13 @@
 ***** xref:import-from-word-with-jwt-authentication-nodejs.adoc[Node.js]
 ***** xref:import-from-word-with-jwt-authentication-php.adoc[PHP]
 *** xref:editimage.adoc[Image Editing]
+*** xref:uploadcare.adoc[Media Optimizer]
+**** xref:uploadcare-image.adoc[Image]
+**** xref:uploadcare-video.adoc[Video]
 *** xref:inline-css.adoc[Inline CSS]
 *** xref:linkchecker.adoc[Link Checker]
 *** xref:math.adoc[Math]
 *** xref:markdown.adoc[Markdown]
-*** xref:uploadcare.adoc[Media Optimizer]
-**** xref:uploadcare-image.adoc[Image]
-**** xref:uploadcare-video.adoc[Video]
 *** xref:mentions.adoc[Mentions]
 *** xref:mergetags.adoc[Merge Tags]
 *** xref:moxiemanager.adoc[MoxieManager]

modules/ROOT/pages/bower-projects.adoc

@@ -1,7 +1,7 @@
-= Bundling an npm version of {productname} with CommonJS and Browserify
+= Bundling an NPM version of {productname} with CommonJS and Browserify
 :navtitle: CommonJS and npm
-:description_short: Bundling an npm version of TinyMCE in a project using CommonJS and Browserify
-:description: Bundling an npm version of TinyMCE in a project using CommonJS and Browserify
+:description_short: Bundling an NPM version of TinyMCE in a project using CommonJS and Browserify
+:description: Bundling an NPM version of TinyMCE in a project using CommonJS and Browserify
 :keywords: browserify, commonjs, cjs, npm, modules, tinymce
 :installtype: an npm
 :bundler: https://browserify.org/[Browserify]

modules/ROOT/pages/browserify-cjs-npm.adoc

@@ -1,10 +1,46 @@
-= Quick start
-:navtitle: Quick start
+= Quick start: {productname} with {cloudname}
+:navtitle: Quick start: Cloud
 :description_short: Setup a basic {productname} {productmajorversion} editor using the {cloudname}.
 :description: Get an instance of {productname} {productmajorversion} up and running using the {cloudname}.
 :keywords: tinymce, script, textarea
 :productSource: cloud
 
-include::partial$install/basic-quickstart-base.adoc[]
+== Install {productname} using the {cloudname}
 
-include::partial$misc/admon-account-creation-and-social-option.adoc[]
+{productname} {productmajorversion} is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a {productname} editor to a web page using the {cloudname}.
+
+include::partial$misc/admon-account-creation-and-social-option.adoc[]
+
+== Include the {productname} script
+
+Include the following line of code in the `+<head>+` of an HTML page:
+
+[source,html,subs="attributes+"]
+----
+<script src="{cdnurl}" referrerpolicy="origin" crossorigin="anonymous"></script>
+----
+
+== Initialize {productname} as part of a web form
+
+include::partial$install/initialize-editor-cloud.adoc[]
+
+Adding this content to an HTML file and opening it in a web browser will load a {productname} editor, such as:
+
+liveDemo::default[]
+
+== Update the "no-api-key" placeholder with your API key
+
+To remove the notice:
+
+[WARNING]
+====
+**This domain is not registered with {cloudname}. Please see the quick start guide or create an account.**
+====
+
+Update the `+no-api-key+` placeholder in the source script (`+<script src=...+`) with your {cloudname} API key, which is created when signing up to the link:{accountsignup}/[{cloudname}].
+
+Signing up for a {cloudname} API key will also provide a trial of the xref:plugins.adoc#premium-plugins[Premium Plugins].
+
+include::partial$install/save-content.adoc[]
+
+include::partial$misc/quickstart-next-steps.adoc[]

modules/ROOT/pages/cloud-quick-start.adoc

@@ -2,6 +2,49 @@
 :navtitle: .NET projects
 :description: Learn how to install {productname} from NuGet.
 :keywords: nuget .net install
-:productSource: nuget
 
-include::partial$install/basic-quickstart-base.adoc[]
+== Install {productname} using NuGet
+
+{productname} {productmajorversion} is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a {productname} editor to a web page using NuGet.
+
+To add {productname} to a .NET project, run the following on a command line:
+
+* Using the NuGet package manager console, run the following:
++
+[source,sh]
+----
+Install-Package {productname}
+----
+
+* Using the `+dotnet+` CLI, run the following:
++
+[source,sh]
+----
+dotnet add package {productname}
+----
+
+Ensure the `+tinymce+` directory containing the `+tinymce.min.js+` file is accessible for the target page or application by either:
+
+* Using a webserver route, or
+* Copying the `+tinymce+` directory to a public folder using a build tool.
+
+== Include the {productname} script
+
+Include the following line of code in the `+<head>+` of an HTML page:
+
+[source,html,subs="attributes+"]
+----
+<script src="/path/or/uri/to/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
+----
+
+== Initialize {productname} as part of a web form
+
+include::partial$install/initialize-editor-self-hosted.adoc[]
+
+Adding this content to an HTML file and opening it in a web browser will load a {productname} editor, such as:
+
+liveDemo::default[]
+
+include::partial$install/save-content.adoc[]
+
+include::partial$misc/quickstart-next-steps.adoc[]