feat: title max length 100 for published docs (#1441)

Signed-off-by: peterpeterparker <[email protected]>

Author: peterpeterparker

studio/src/app/components/editor/deck/publish/app-publish-edit/app-publish-edit.tsx

@@ -223,19 +223,23 @@ export class AppPublishEdit {
     let title: string = ($event.target as InputTargetEvent).value;
     if (title && title !== undefined && title !== '') {
       if (!this.validCaption(title)) {
-        title = title.substr(0, Constants.DECK.TITLE_MAX_LENGTH);
+        title = title.slice(0, this.titleMaxLength());
       }
     }
 
     this.caption = title;
   }
 
+  private titleMaxLength(): number {
+    return this.mode === 'doc' ? Constants.DOC.TITLE_MAX_LENGTH : Constants.DECK.TITLE_MAX_LENGTH;
+  }
+
   private validateCaptionInput() {
     this.validTitle = this.validCaption(this.caption);
   }
 
   private validCaption(title: string): boolean {
-    if (!title || title === undefined || title == '' || title.length > Constants.DECK.TITLE_MAX_LENGTH) {
+    if (!title || title === undefined || title == '' || title.length > this.titleMaxLength()) {
       return false;
     }
 
@@ -366,14 +370,19 @@ export class AppPublishEdit {
                 debounce={500}
                 minlength={3}
                 disabled={disable}
-                maxlength={Constants.DECK.TITLE_MAX_LENGTH}
+                maxlength={this.titleMaxLength()}
                 required={true}
                 input-mode="text"
                 onIonInput={($event: CustomEvent<KeyboardEvent>) => this.onCaptionInput($event)}
                 onIonChange={() => this.validateCaptionInput()}></ion-input>
             </ion-item>
 
-            <p class={`small ${this.validTitle ? undefined : 'error'}`}>{i18n.state.publish_edit.title_max_chars}</p>
+            <p class={`small ${this.validTitle ? undefined : 'error'}`}>
+              {renderI18n(i18n.state.publish_edit.title_max_chars, {
+                placeholder: '{0}',
+                value: `${this.titleMaxLength()}`
+              })}
+            </p>
 
             <ion-item class="item-title">
               <ion-label>{i18n.state.publish_edit.description}</ion-label>

studio/src/app/types/core/constants.ts

@@ -4,6 +4,9 @@ export const Constants = {
     DESCRIPTION_MAX_LENGTH: 500,
     MIN_SLIDES: 3
   },
+  DOC: {
+    TITLE_MAX_LENGTH: 100
+  },
   STORAGE: {
     MAX_QUERY_RESULTS: 100
   }

studio/src/assets/i18n/de.json

@@ -432,7 +432,7 @@
     "modern_app": "DeckDeckGo wird sie online als moderene App zugänglich machen.",
     "meta": "Meta",
     "title_edit": "Erstelle einen Titel und eine Zusammenfassung deiner Präsentation und füge bis zu 5 Tags hinzu, um die Vorschau deiner Präsentation ansprechend zu gestalten.",
-    "title_max_chars": "Der Titel darf Buchstaben, Zahlen, Leerzeichen und Bindestriche beinhalten und darf nicht länger als 45 Zeichen sein.",
+    "title_max_chars": "Der Titel darf Buchstaben, Zahlen, Leerzeichen und Bindestriche beinhalten und darf nicht länger als {0} Zeichen sein.",
     "description": "Beschreibung",
     "tags": "Tags",
     "social_card": "DeckDeckGo generiert die Vorschau deiner Präsentation basierend auf deiner ersten Folie, wenn du sie in den sozialen Medien teilst.",

studio/src/assets/i18n/en.json

@@ -432,7 +432,7 @@
     "modern_app": "DeckDeckGo will distribute it online as a modern app.",
     "meta": "Meta",
     "title_edit": "Edit or review your presentation's title, summary and add or change tags (up to 5) to make your presentation more inviting to readers.",
-    "title_max_chars": "The title should be provided with latin characters, arabic numerals, spaces and dash. It must not be longer than 45 characters.",
+    "title_max_chars": "The title should be provided with latin characters, arabic numerals, spaces and dash. It must not be longer than {0} characters.",
     "description": "Description",
     "tags": "Tags",
     "social_card": "DeckDeckGo will automatically generate the social card for your presentation based on the first slide of your deck.",

studio/src/assets/i18n/es.json

@@ -432,7 +432,7 @@
     "modern_app": "DeckDeckGo lo distribuirá en línea como una aplicación moderna.",
     "meta": "Meta",
     "title_edit": "Edita o revisa el título de tu presentación, el resumen y añade o cambia las etiquetas (hasta 5) para que tu presentación sea más atractiva para los lectores.",
-    "title_max_chars": "El título debe estar provisto de caracteres latinos, números arábigos, espacios y guiones. No debe tener más de 45 caracteres.",
+    "title_max_chars": "El título debe estar provisto de caracteres latinos, números arábigos, espacios y guiones. No debe tener más de {0} caracteres.",
     "description": "Descripción",
     "tags": "Etiquetas",
     "social_card": "DeckDeckGo generará automáticamente la tarjeta social de tu presentación basándose en la primera diapositiva de tu paquete.",

studio/src/assets/i18n/nl.json

@@ -432,7 +432,7 @@
     "modern_app": "DeckDeckGo zal het online verspreiden als een moderne app.",
     "meta": "Meta",
     "title_edit": "Bewerk of bekijk de titel en samenvatting van uw presentatie en voeg tags toe of wijzig deze (maximaal 5) om uw presentatie aantrekkelijker te maken voor lezers.",
-    "title_max_chars": "De titel kan bestaan uit Latijnse karakters, Arabische cijfers, spaties en streepjes. Het mag niet langer zijn dan 45 tekens.",
+    "title_max_chars": "De titel kan bestaan uit Latijnse karakters, Arabische cijfers, spaties en streepjes. Het mag niet langer zijn dan {0} tekens.",
     "description": "Omschrijving",
     "tags": "Tags",
     "social_card": "DeckDeckGo genereert automatisch de sociale card voor uw presentatie op basis van de eerste slide van uw deck.",