DOC-3313: Improve Developer Onboarding and fix broken partials for bundling pages.

modules/ROOT/examples/live-demos/default/index.html

@@ -1 +1,4 @@
-<textarea id="default">Hello, World!</textarea>
+<textarea id="default">
+  <h1>Welcome to TinyMCE!</h1>
+  <p>⭐️ Let's <em>explore</em> some features 🗺️ like <span style="background-color: #bfedd2;">footnotes</span>, <span style="background-color: #c2e0f4;">spellchecking</span> and <span style="background-color: #fbeeb8;">export to PDF</span>...</p>
+</textarea>

modules/ROOT/examples/live-demos/default/index.js

@@ -1,3 +1,12 @@
 tinymce.init({
-  selector: 'textarea#default'
+  selector: 'textarea#default',
+  plugins: [
+    "advlist", "autolink", "charmap", "codesample", "emoticons", "help",
+    "image", "link", "lists", "searchreplace", "table", "wordcount",
+    // Premium features
+    "advcode", "autocorrect", "footnotes", "mediaembed", 
+    "powerpaste", "tinymcespellchecker", "casechange", "checklist", 
+    "formatpainter", "permanentpen", "advtable", "tableofcontents", "exportpdf"
+  ],
+  toolbar: "exportpdf | spellcheckdialog | styles | bold italic underline strikethrough | align bullist numlist | link image emoticons footnotes checklist formatpainter permanentpen tableofcontents",
 });

modules/ROOT/nav.adoc

@@ -1,7 +1,7 @@
 * xref:getting-started.adoc[Getting started]
 ** xref:introduction-to-tinymce.adoc[Introduction to {productname}]
 ** xref:installation.adoc[Installation]
-*** Cloud
+*** xref:installation-cloud.adoc[Cloud]
 **** xref:cloud-quick-start.adoc[Quick start]
 **** xref:react-cloud.adoc[React]
 **** xref:angular-cloud.adoc[Angular]
@@ -14,44 +14,51 @@
 **** xref:django-cloud.adoc[Django]
 **** xref:laravel-tiny-cloud.adoc[Laravel]
 **** xref:rails-cloud.adoc[Ruby on Rails]
-*** Self-hosted
+*** xref:installation-self-hosted.adoc[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:installation-zip.adoc[ZIP]
+**** 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:bootstrap-zip.adoc[Bootstrap]
+**** xref:django-zip.adoc[Django]
+**** xref:laravel-zip-install.adoc[Laravel]
+**** xref:rails-zip.adoc[Ruby on Rails]
+**** xref:swing.adoc[Java Swing]
 **** xref:zip-install.adoc[{productname} .zip deployments]
 ** xref:upgrading.adoc[Upgrading {productname}]
 * xref:how-to-guides.adoc[How-to guides]

modules/ROOT/pages/installation-cloud.adoc

@@ -0,0 +1,135 @@
+= Installing {productname} using the {cloudname}
+:navtitle: Cloud
+:description: Get started with TinyMCE using the Tiny Cloud CDN - the fastest way to get {productname} up and running.
+:keywords: tinymce cloud, cdn, cloud hosting
+
+== Quick start
+
+The easiest way to get started with {productname} is using the {cloudname}. Simply include the TinyMCE script in your HTML:
+
+[source,html]
+----
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="{cdnurl}"></script>
+  </head>
+  <body>
+    <textarea id="mytextarea"></textarea>
+    <script>
+      tinymce.init({
+        selector: '#mytextarea'
+      });
+    </script>
+  </body>
+</html>
+----
+
+== Framework integrations
+
+Get started with {productname} in your preferred framework:
+
+++++
+include::partial$css/installation-cards.css[]
+<div class="tiny-installation-cards">
+<div class="framework-cards">
+  <div class="framework-grid">
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/cloud-quick-start/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon">⚡</div>
+        <h3 class="framework-name">Quick start</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/react-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/react-color.svg" alt="React"></div>
+        <h3 class="framework-name">React</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/angular-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/angular-color.svg" alt="Angular"></div>
+        <h3 class="framework-name">Angular</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/vue-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/vue-color.svg" alt="Vue"></div>
+        <h3 class="framework-name">Vue.js</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/blazor-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/blazor-color.svg" alt="Blazor"></div>
+        <h3 class="framework-name">Blazor</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/svelte-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/svelte-color.svg" alt="Svelte"></div>
+        <h3 class="framework-name">Svelte</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/webcomponent-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/web-components-color.svg" alt="Web Components"></div>
+        <h3 class="framework-name">Web Component</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/jquery-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/jquery-color.svg" alt="jQuery"></div>
+        <h3 class="framework-name">jQuery</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/bootstrap-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/bootstrap-color.svg" alt="Bootstrap"></div>
+        <h3 class="framework-name">Bootstrap</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/django-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/django-color.svg" alt="Django"></div>
+        <h3 class="framework-name">Django</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/laravel-tiny-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/laravel-color.svg" alt="Laravel"></div>
+        <h3 class="framework-name">Laravel</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/rails-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/rails-color.svg" alt="Rails"></div>
+        <h3 class="framework-name">Ruby on Rails</h3>
+      </div>
+    </a>
+  </div>
+</div>
+</div>
+++++
+
+== Benefits of the {cloudname}
+
+Using the {cloudname} provides several advantages:
+
+* **Zero configuration** - No server setup required
+* **Always up-to-date** - Access to the latest {productname} features automatically
+* **Global CDN** - Fast loading times worldwide
+* **Optimized assets** - Automatically minified and optimized for production
+* **Premium features** - Access to premium plugins with cloud API key
+
+include::partial$misc/admon-account-creation-and-social-option.adoc[]