Add an About modal

Add modals container in which the About modal renders by default (for SEO purposes).

src/plugins/chatview/tests/retractions.js

@@ -23,7 +23,7 @@ describe('A sent chat message', function () {
                 view.querySelector('.chat-msg__content .chat-msg__action-retract')
             );
             retract_button.click();
-            await u.waitUntil(() => u.isVisible(document.querySelector('#converse-modals .modal')));
+            await u.waitUntil(() => u.isVisible(document.querySelector('#converse-modals converse-confirm-modal')));
             const submit_button = document.querySelector('#converse-modals .modal button[type="submit"]');
             submit_button.click();
 

src/plugins/controlbox/modals/about.js

@@ -0,0 +1,62 @@
+import { html } from 'lit';
+import { api } from '@converse/headless';
+import { __ } from 'i18n';
+import BaseModal from 'plugins/modal/modal.js';
+
+class AboutModal extends BaseModal {
+    getModalTitle() {
+        return __('About Converse');
+    }
+
+    renderModal() {
+        return html`
+            <p>
+                Converse is an open-source <a href="https://xmpp.org" target="_blank" rel="noopener">XMPP</a> chat app
+                written in JavaScript.
+            </p>
+            <p>Just like the XMPP protocol, Converse is built with extensibility in mind.</p>
+            <p>
+                Because it is open source, integrators and developers can use it to add chat functionality to their
+                websites.
+            </p>
+            <p>
+                Converse is also
+                <a href="https://conversejs.org/docs/html/configuration.html" target="_blank" rel="noopener"
+                    >configurable</a
+                >, built with modern web technologies and
+                <a href="https://conversejs.org/docs/html/plugin_development.html" target="_blank" rel="noopener"
+                    >extensible with plugins</a
+                >. It has different modes, which means it can be a full page app, an embedded chat widget, or an overlayed chat
+                box. For a list of supported features and XMPP extensions, please see the
+                <a
+                    href="https://github.com/conversejs/converse.js?tab=readme-ov-file#features"
+                    target="_blank"
+                    rel="noopener"
+                    >README</a
+                >.
+            </p>
+            <p>
+                Converse is translated into over 30 languages. You can
+                <a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages"
+                    >translate</a
+                >
+                it into your own language.
+            </p>
+            <p>
+                Converse was created by <a target="_blank" rel="nofollow" href="https://opkode.com">JC Brand</a>. You
+                can <a target="_blank" rel="nofollow" href="https://opkode.com/contact.html">hire me</a>
+                for customizations, support or to build your next project.
+            </p>
+            <p>
+                If you're interested in sponsoring Converse, please visit:
+                <a href="https://github.com/sponsors/jcbrand" target="_blank" rel="noopener">Github</a>,
+                <a href="https://www.patreon.com/jcbrand" target="_blank" rel="noopener">Patreon</a>,
+                <a href="https://liberapay.com/jcbrand" target="_blank" rel="noopener">Liberapay</a>
+                or
+                <a href="https://opkode.com/contact.html" target="_blank" rel="noopener">contact us</a>.
+            </p>
+        `;
+    }
+}
+
+api.elements.define('converse-about-modal', AboutModal);

src/plugins/modal/index.js

@@ -2,10 +2,11 @@
  * @copyright The Converse.js contributors
  * @license Mozilla Public License (MPLv2)
  */
+import { _converse, api, converse } from "@converse/headless";
+import modal_api from "./api.js";
 import BaseModal from "./modal.js";
 import Popover from "./popover.js";
-import modal_api from "./api.js";
-import { _converse, api, converse } from "@converse/headless";
+import './modals.js';
 
 converse.plugins.add("converse-modal", {
     initialize() {

src/plugins/modal/modals.js

@@ -0,0 +1,13 @@
+import { html } from 'lit';
+import { api } from '@converse/headless';
+import { CustomElement } from 'shared/components/element.js';
+
+export class ModalsContainer extends CustomElement {
+    render() {
+        return html` <converse-about-modal></converse-about-modal> `;
+    }
+}
+
+api.elements.define('converse-modals', ModalsContainer);
+
+export default ModalsContainer;

src/plugins/modal/styles/_modal.scss

@@ -71,6 +71,7 @@ $prefix: 'converse-';
                 margin-bottom: 2em;
                 p {
                     padding: 0.25rem 0;
+                    line-height: 1.5em;
                     &.form-help {
                         padding: 0;
                         margin-bottom: 0.5em;

src/plugins/rootview/templates/root.js

@@ -1,6 +1,6 @@
-import 'shared/components/font-awesome.js';
-import { api } from '@converse/headless';
 import { html } from 'lit';
+import { api } from '@converse/headless';
+import 'shared/components/font-awesome.js';
 
 export default () => {
     const extra_classes = api.settings.get('singleton') ? ['converse-singleton'] : [];
@@ -8,7 +8,7 @@ export default () => {
     return html`
         ${api.settings.get('show_background') ? html`<converse-bg></converse-bg>` : ''}
         <converse-chats class="converse-chatboxes row justify-content-start g-0 ${extra_classes.join(' ')}"></converse-chats>
-        <div id="converse-modals" class="modals"></div>
+        <converse-modals id="converse-modals" class="modals"></converse-modals>
         <converse-fontawesome></converse-fontawesome>
     `;
 };