Merge branch 'fix/header-title' into 'master'

Fix how the user name is displayed

See merge request idotj/mastodon-embed-timeline!31

CHANGELOG

@@ -1,3 +1,7 @@
+v4.3.2 - 01/03/2024
+- Render emojos in user name
+- Use fallback for user account without user name
+
 v4.3.1 - 01/03/2024
 - Show pinned posts
 - Add icon to pinned posts

CONTRIBUTING.md

@@ -2,13 +2,13 @@
 
 Thanks for your interest in contributing. Any feature and improvement from the community to make this project better is always welcome.
 
-## How to Contribute
+## 🤝 How to contribute
 
-### Reporting Issues
+### Reporting issues
 
 If you find any bugs, issues, or have suggestions, please [create a new issue](https://gitlab.com/idotj/mastodon-embed-timeline/-/issues/new) and provide detailed information about the problem or feature.
 
-### Code Contributions
+### Code contributions
 
 1. Fork the repository on GitLab.
 2. Create a new branch from the `main` branch for your changes.
@@ -16,7 +16,7 @@ If you find any bugs, issues, or have suggestions, please [create a new issue](h
 4. Compile and test your changes thoroughly.
 5. Submit a pull request to the `main` branch with a clear title and description.
 
-## Getting Started
+## 🛠️ Getting started
 
 ### Setup your environment
 
@@ -75,10 +75,10 @@ If you need to emulate a server for your local development/testing, here are som
   Now open your browser and entering the following url you will land in the Local timeline page:  
   [http://localhost:8080/examples/local-timeline.html](http://localhost:8080/examples/local-timeline.html)
 
-## Code Review Process
+## 🔍 Code review process
 
 All contributions will go through a code review process. Be prepared to address feedback and make necessary changes to your code.
 
-## License
+## ⚖️ License
 
 By contributing to this project, you agree that your contributions will be licensed under the GNU Affero General Public License v3.0.

README.md

@@ -65,11 +65,11 @@ This option allows you to start without the need to upload any files on your ser
 Copy the following CSS and JS links to include them in your project:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.3.1/dist/mastodon-timeline.min.css" integrity="sha256-awtLfihH0TSWaxlL9oNSIOylj5rzvQHXhU/vuzbKp74=" crossorigin="anonymous">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.3.2/dist/mastodon-timeline.min.css" integrity="sha256-awtLfihH0TSWaxlL9oNSIOylj5rzvQHXhU/vuzbKp74=" crossorigin="anonymous">
 ```
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.3.1/dist/mastodon-timeline.umd.js" integrity="sha256-806+yvdplV6yVaOzvWdCvNw7x/D8JqHx4kZy+hjhId4=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.3.2/dist/mastodon-timeline.umd.js" integrity="sha256-806+yvdplV6yVaOzvWdCvNw7x/D8JqHx4kZy+hjhId4=" crossorigin="anonymous"></script>
 ```
 
 ### Package manager

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@idotj/mastodon-embed-timeline",
-  "version": "4.3.1",
+  "version": "4.3.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@idotj/mastodon-embed-timeline",
-      "version": "4.3.1",
+      "version": "4.3.2",
       "license": "GNU",
       "devDependencies": {
         "@rollup/plugin-terser": "^0.4.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idotj/mastodon-embed-timeline",
-  "version": "4.3.1",
+  "version": "4.3.2",
   "description": "Displays Mastodon timeline with posts embed in your website. Very easy to setup, no dependencies, no trackers, cross-browser, WCAG compliant and fully responsive.",
   "license": "GNU",
   "author": {

src/mastodon-timeline.css

@@ -1,4 +1,4 @@
-/* Mastodon embed timeline v4.3.1 */
+/* Mastodon embed timeline v4.3.2 */
 /* More info at: */
 /* https://gitlab.com/idotj/mastodon-embed-timeline */
 
@@ -154,6 +154,11 @@
   overflow: hidden;
   padding-right: 0.75rem;
 }
+.mt-post-header-user .mt-custom-emoji {
+  height: 1rem;
+  min-width: 1rem;
+  width: auto;
+}
 .mt-post-header-user > a {
   color: var(--mt-color-content-txt) !important;
   overflow-wrap: anywhere;
@@ -212,7 +217,6 @@
   margin-left: 0;
   padding-left: 0.5rem;
 }
-.mt-post-header-user .mt-custom-emoji,
 .mt-post-txt .mt-custom-emoji {
   height: 1.5rem;
   min-width: 1.5rem;

src/mastodon-timeline.js

@@ -1,7 +1,7 @@
 /**
  * Mastodon embed timeline
  * @author idotj
- * @version 4.3.1
+ * @version 4.3.2
  * @url https://gitlab.com/idotj/mastodon-embed-timeline
  * @license GNU AGPLv3
  */
@@ -394,12 +394,12 @@ export class Init {
 
       // User name and url
       if (!this.mtSettings.hideEmojos && c.reblog.account.display_name) {
-        userName = this.#createEmoji(
+        userName = this.#shortcode2Emojos(
           c.reblog.account.display_name,
-          this.fetchedData.emojos
+          c.reblog.account.emojis
         );
       } else {
-        userName = c.reblog.account.display_name;
+        userName = c.reblog.account.display_name ? c.reblog.account.display_name : c.reblog.account.username;
       }
 
       if (!this.mtSettings.hideUserAccount) {
@@ -454,12 +454,12 @@ export class Init {
 
       // User name and url
       if (!this.mtSettings.hideEmojos && c.account.display_name) {
-        userName = this.#createEmoji(
+        userName = this.#shortcode2Emojos(
           c.account.display_name,
-          this.fetchedData.emojos
+          c.account.emojis
         );
       } else {
-        userName = c.account.display_name;
+        userName = c.account.display_name ? c.account.display_name : c.account.username;
       }
 
       if (!this.mtSettings.hideUserAccount) {
@@ -677,7 +677,7 @@ export class Init {
 
     // Convert emojos shortcode into images
     if (!this.mtSettings.hideEmojos) {
-      content = this.#createEmoji(content, this.fetchedData.emojos);
+      content = this.#shortcode2Emojos(content, this.fetchedData.emojos);
     }
 
     // Convert markdown styles into HTML
@@ -758,7 +758,7 @@ export class Init {
    * @param {array} e List with all custom emojis
    * @returns {string} Text content modified
    */
-  #createEmoji(c, e) {
+  #shortcode2Emojos(c, e) {
     if (c.includes(":")) {
       for (const emojo of e) {
         const regex = new RegExp(`\\:${emojo.shortcode}\\:`, "g");