Fix how the user name is displayed

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

@@ -1,84 +1,84 @@
-# Contributing to Mastodon embed timeline
+# Contributing to Mastodon embed timeline
-
+
-Thanks for your interest in contributing. Any feature and improvement from the community to make this project better is always welcome.
+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.
+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.
+1. Fork the repository on GitLab.
-2. Create a new branch from the `main` branch for your changes.
+2. Create a new branch from the `main` branch for your changes.
-3. Make your modifications and ensure that your code follows the coding standards.
+3. Make your modifications and ensure that your code follows the coding standards.
-4. Compile and test your changes thoroughly.
+4. Compile and test your changes thoroughly.
-5. Submit a pull request to the `main` branch with a clear title and description.
+5. Submit a pull request to the `main` branch with a clear title and description.
-
+
-## Getting Started
+## 🛠️ Getting started
-
+
-### Setup your environment
+### Setup your environment
-
+
-- Choose your favorite IDE and check that the configuration matches the `.editorconfig` setup to respect the same coding styles.  
+- Choose your favorite IDE and check that the configuration matches the `.editorconfig` setup to respect the same coding styles.  
-  By default, this project is developed using [VScode](https://code.visualstudio.com/) with the plugins [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and [SonarLint](https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode).
+  By default, this project is developed using [VScode](https://code.visualstudio.com/) with the plugins [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and [SonarLint](https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode).
-
+
-- Get [Git](https://git-scm.com/downloads) if you don't have it in your computer and after installation clone the repository by typing:
+- Get [Git](https://git-scm.com/downloads) if you don't have it in your computer and after installation clone the repository by typing:
-  
+  
-  ```terminal
+  ```terminal
-  git clone https://gitlab.com/idotj/mastodon-embed-timeline.git
+  git clone https://gitlab.com/idotj/mastodon-embed-timeline.git
-  ```
+  ```
-
+
-- Install [Node.js](https://nodejs.org/en) if you don't have it and then go into the project folder `mastodon-embed-timeline/` and enter:
+- Install [Node.js](https://nodejs.org/en) if you don't have it and then go into the project folder `mastodon-embed-timeline/` and enter:
-  
+  
-  ```terminal
+  ```terminal
-  npm i
+  npm i
-  ```
+  ```
-
+
-- After all the packages are installed, do a check to see that it compiles as expected typing the following script to run a build:
+- After all the packages are installed, do a check to see that it compiles as expected typing the following script to run a build:
-
+
-  ```terminal
+  ```terminal
-  npm run build
+  npm run build
-  ```
+  ```
-
+
-- All set, time to code!
+- All set, time to code!
-
+
-### Testing
+### Testing
-
+
-Ensure that your changes do not break existing functionality. If applicable, provide tests for new features or bug fixes.  
+Ensure that your changes do not break existing functionality. If applicable, provide tests for new features or bug fixes.  
-
+
-The example pages located in the folder `examples/` can be a good reference to test the changes made.  
+The example pages located in the folder `examples/` can be a good reference to test the changes made.  
-
+
-If you need to emulate a server for your local development/testing, here are some options:
+If you need to emulate a server for your local development/testing, here are some options:
-
+
-- Install a static HTTP server via npm:
+- Install a static HTTP server via npm:
-
+
-  ```terminal
+  ```terminal
-  npm install --global http-server
+  npm install --global http-server
-  ```
+  ```
-
+
-  After installation, run the command:
+  After installation, run the command:
-
+
-  ```terminal
+  ```terminal
-  http-server ./
+  http-server ./
-  ```
+  ```
-
+
-  Now you can open your browser and navigate to any of the HTML examples. For example to open a Local timeline, your default url will be:  
+  Now you can open your browser and navigate to any of the HTML examples. For example to open a Local timeline, your default url will be:  
-  [http://localhost:8080/examples/local-timeline.html](http://localhost:8080/examples/local-timeline.html)
+  [http://localhost:8080/examples/local-timeline.html](http://localhost:8080/examples/local-timeline.html)
-
+
-- Install [Docker compose](https://docs.docker.com/compose/install/) in your computer and run the following command:
+- Install [Docker compose](https://docs.docker.com/compose/install/) in your computer and run the following command:
-  
+  
-  ```terminal
+  ```terminal
-  docker compose up
+  docker compose up
-  ```
+  ```
-
+
-  Now open your browser and entering the following url you will land in the Local timeline page:  
+  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)
+  [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.
+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.
+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");