feat: add default picture, add meal description, fix meal name wrap

- Add default photo when a photo is not available for a meal plan
- Default photo is the Mealie icon
- Add `defaultPicture` option to change the image
- Add recipe description or meal note, default is hidden
- Add `showDescription` to toggle the description
- Wrap meal name to single line

Closes #2

MMM-MealieMenu.css

@@ -44,7 +44,8 @@
  grid: min-content min-content / auto;
  grid-template-areas:
  "meal-header"
- "meal-name";
+ "meal-name"
+ "meal-description";
  gap: 0 0;
  grid-area: meal-info;
  text-align: left;
@@ -61,6 +62,15 @@
  font-size: var(--font-size-small);
  text-overflow: ellipsis;
  overflow: hidden;
+ white-space: nowrap;
+}
+
+.MMM-MealieMenu .meal-description {
+ grid-area: meal-description;
+ font-size: var(--font-size-xsmall);
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
 }
 
 .MMM-MealieMenu .meal-item.today .meal-header {

MMM-MealieMenu.js

@@ -22,6 +22,8 @@ Module.register("MMM-MealieMenu", {
  fadePriorEntries: true, // Fade previous days in the current week.
  showPictures: true, // Show pictures corresponding to that days meal.
  roundPictureCorners: false, // Round the meal picture corners.
+ defaultPicture: "mealie.png", // Default image to display for missing recipe images or meal notes.
+ showDescription: false, // Show the recipe/meal description.
  dateFormat: "dddd", // Display format for the date; uses moment.js format string
  dateMealSeperator: " - ", // Set the separator between the date and meal type.
  mealSortOrder: ["breakfast", "lunch", "dinner", "side"], // An array determining the order and visibility of the meal type headers.
@@ -50,8 +52,6 @@ Module.register("MMM-MealieMenu", {
  this.dataRefreshTimestamp = null;
  this.dataRefreshDisplayTime = null;
 
- this.sanitzeConfig();
-
  // Validate host.
  if (!this.config.host || !this.isValidURL(this.config.host)) {
  Log.error(this.translate("ERROR_INVALID", {value: "host"}));
@@ -60,9 +60,6 @@ Module.register("MMM-MealieMenu", {
  return;
  }
 
- // Strip trailing slashes.
- this.config.host = this.config.host.replace(/\/$/u, "");
-
  // Validate API key or username/password.
  if (!this.config.apiKey) {
  Log.info(this.translate("ERROR_INVALID", {value: "apiKey"}));
@@ -93,6 +90,8 @@ Module.register("MMM-MealieMenu", {
  return;
  }
 
+ this.sanitzeConfig();
+
  this.sendSocketNotification("MEALIE_INIT", {
  identifier: this.identifier,
  host: this.config.host,
@@ -277,6 +276,7 @@ Module.register("MMM-MealieMenu", {
  for (const meal of meals) {
  formatted.push({
  name: meal.recipe?.name || meal.title,
+ description: meal.recipe?.description || meal.text,
  rawDate: meal.date,
  date: moment(meal.date).format(this.config.dateFormat),
  meal: this.typeToMealDisplay(meal.entryType),
@@ -352,6 +352,17 @@ Module.register("MMM-MealieMenu", {
  * Assert values for configuration.
  */
  sanitzeConfig () {
+ // Strip trailing slashes.
+ this.config.host = this.config.host.replace(/\/$/u, "");
+
+ // Check for an external default image.
+ if (
+ !this.config.defaultPicture.startsWith("http") &&
+ !this.config.defaultPicture.includes("/")
+ ) {
+ this.config.defaultPicture = this.file(this.config.defaultPicture);
+ }
+
  if (this.config.priorDayLimit < 0) {
  this.config.priorDayLimit = 0;
  Log.warn("priorDayLimit should be 0 or greater. Setting to 0.");

MMM-MealieMenu.njk

@@ -9,9 +9,11 @@
  <div class="meal-items">
  {% for meal in menu.meals %}
  <div class="meal-item{% if meal.isToday %} today{% elif meal.shouldFade %} fade{% endif %}">
- {% if config.showPictures and meal.photoUrl %}
+ {% if config.showPictures %}
  <div class="meal-image">
- <img src="{{ meal.photoUrl }}" {% if config.roundPictureCorners %}class="rounded"{% endif %}/>
+ <img src="{{ meal.photoUrl }}" {% if config.roundPictureCorners %}class="rounded"{% endif %}
+ onerror="src='{{ config.defaultPicture }}'"
+ />
  </div>
  {% endif %}
  <div class="meal-info">
@@ -21,6 +23,11 @@
  <div class="meal-name">
  {{ meal.name }}
  </div>
+ {% if config.showDescription %}
+ <div class="meal-description">
+ {{ meal.description }}
+ </div>
+ {% endif %}
  </div>
  </div>
  {% endfor %}

README.md

@@ -75,6 +75,8 @@ These are the possible options:
 | `fadePriorEntries` | <p>Fade previous days in the current week.</p><p>**Type:** `boolean`<br>**Default value:** `true`<br>**Possible values:** `true` and `false`|
 | `showPictures` | <p>Show pictures corresponding to that days meal.</p><p>**Type:** `boolean`<br>**Default value:** `true`<br>**Possible values:** `true` and `false`|
 | `roundPictureCorners` | <p>Round the meal picture corners.</p><p>**Type:** `boolean`<br>**Default value:** `false`<br>**Possible values:** `true` and `false`|
+| `defaultPicture` | <p>Picture to display for missing recipe images or meal notes.</p><p>**Type:** `string`<br>**Example:** `"https://img.icons8.com/nolan/64/meal.png"`<br>**Default value:** `"mealie.png"`</p><p>**Note:** If the image does not have `http` or `/` in the name, the `MMM-MealieMenu` module path will be prepended to the name.</p>|
+| `showDescription` | <p>Show the recipe description or meal note.</p><p>**Type:** `boolean`<br>**Default value:** `false`<br>**Possible values:** `true` and `false`|
 | `dateFormat` | <p>Display format for the date; uses [moment.js format string](https://momentjs.com/docs/#/displaying/format/)</p><p>**Type:** `string`<br>**Example:** `"ddd DD"`<br>**Default value:** `"dddd"`</p>|
 | `dateMealSeperator` | <p>Set the separator between the date and meal type.</p><p>**Type:** `string`<br>**Example:** `" \| "`<br>**Default value:** `" - "`</p><p>**Note:** Above each menu item, the date and meal type are displayed. For example, by default you'll see "Tuesday - Dinner". This setting controls the characters separating `dateFormat` and the meal display.</p>|
 | `mealSortOrder` | <p>An array determining the order of the meal type headers.</p><p>**Type:** `array`<br>**Example:** `[ "lunch", "dinner" ]`<br>**Default value:** `[ "breakfast", "lunch", "dinner", "side" ]`<br>**Possible values:** `[ "breakfast", "lunch", "dinner", "side" ]`</p><p>**Note 1:** You can remove a meal type here by removing the value.</p><p>**Note 2:** The vaules MUST match the possible values above. You can change what is displayed using the `display` options below.</p>|