Merge pull request #217 from jparkerweb/develop

v3.4.2

Author: jparkerweb

CHANGELOG.md

@@ -3,6 +3,11 @@
 All notable changes to the Pixel Banner plugin will be documented in this file.
 
 ## 🎉 What's New
+### v3.4.2 - 2025-04-23
+#### 📦 Updated
+- Added an example section to the `3rd Party API Settings` tab for clarity
+- Minor General Setting tab formatting improvements
+
 ### v3.4.1 - 2025-04-22
 #### ✨ Added
 - Added `Banner Fade` slider control to the Targeting & Positioning UI

UPDATE.md

@@ -3,6 +3,11 @@
 </a>
 
 ## 🎉 What's New
+### v3.4.2 - 2025-04-23
+#### 📦 Updated
+- Added an example section to the `3rd Party API Settings` tab for clarity
+- Minor General Setting tab formatting improvements
+
 ### v3.4.1 - 2025-04-22
 #### ✨ Added
 - Added `Banner Fade` slider control to the Targeting & Positioning UI

manifest.json

@@ -1,7 +1,7 @@
 {
     "id": "pexels-banner",
     "name": "Pixel Banner",
-    "version": "3.4.1",
+    "version": "3.4.2",
     "minAppVersion": "1.6.0",
     "description": "Enhance your notes with customizable banner images, including AI-generated designs and a curated store of downloadable banners. Transform your workspace with visually stunning headers that add context, improve aesthetics, and take your note-taking beyond the ordinary.",
     "author": "Justin Parker (eQui\\\\ Labs)",

src/settings/settings.js

@@ -18,7 +18,7 @@ const DEFAULT_SETTINGS = {
     numberOfImages: 10,
     defaultKeywords: 'nature, abstract, landscape, technology, art, cityscape, wildlife, ocean, mountains, forest, space, architecture, food, travel, science, music, sports, fashion, business, education, health, culture, history, weather, transportation, industry, people, animals, plants, patterns',
     xPosition: 50,
-    yPosition: 75,
+    yPosition: 60,
     customBannerField: ['banner'],
     customXPositionField: ['banner-x, x'],
     customYPositionField: ['banner-y, y'],

src/settings/tabs/settingsTabAPISettings.js

@@ -71,7 +71,7 @@ function random20characters() {
 export function createAPISettings(containerEl, plugin) {
     // section callout
     const calloutEl = containerEl.createEl('div', { cls: 'tab-callout' });
-    calloutEl.createEl('div', { text: '🌐 Optionally select which 3rd party API provider to use for fetching images. See the Examples tab for more information on referencing images by URL or local image. You can use any combination of API keyword, URL, or local image between notes.' });
+    calloutEl.createEl('div', { text: '🌐 Optionally select which 3rd party API provider to use for displaying random images.' });
 
     // Add API provider radio buttons
     new Setting(containerEl)
@@ -255,6 +255,47 @@ export function createAPISettings(containerEl, plugin) {
                 new Notice(isValid ? '✅ Unsplash API key is valid!' : '❌ Invalid Unsplash API key');
             }));
 
+
+    // Usage Example
+    const exampleContainer = containerEl.createEl('div', {
+        attr: {
+            style: `
+                margin: 20px 0;
+                padding: 20px;
+                border: 1px solid var(--modal-border-color);
+                border-radius: 7px;
+            `
+        }
+    })
+
+    exampleContainer.createEl('div', { text: 'Usage Example',
+        attr: {
+            style: `
+                font-weight: bold;
+                font-size: 1.1rem;
+                color: var(--color-accent);
+            `
+        }
+    });
+
+    exampleContainer.createEl('div', { text: 'Add keyword(s) to the banner frontmatter to display random API images matching the keywords.',
+        attr: {
+            style: `
+                margin: 10px 0;
+            `
+        }
+    });
+
+    exampleContainer.createEl('img', {
+        attr: {
+            src: 'https://raw.githubusercontent.com/jparkerweb/pixel-banner/refs/heads/main/img/3rd-party-apis-example.jpg',
+            style: `
+                width: auto;
+                max-width: 100%;
+            `
+        }
+    });
+    
     // Images section
     new Setting(containerEl)
         .setName('Images')

src/settings/tabs/settingsTabGeneral.js

@@ -12,7 +12,7 @@ export function createGeneralSettings(containerEl, plugin) {
 
     // Add the showSelectImageIcon setting
     const showSelectImageIconSetting = new Setting(SelectImageSettingsGroup)
-        .setName('Show Select Image Icon')
+        .setName('Show Pixel Banner Flag')
         .setDesc('Show the banner selector icon in the top-left corner of notes')
         .addToggle(toggle => toggle
             .setValue(plugin.settings.showSelectImageIcon)
@@ -38,7 +38,7 @@ export function createGeneralSettings(containerEl, plugin) {
 
     // Add the selectImageIconOpacity setting
     const selectImageIconOpacitySetting = new Setting(SelectImageSettingsGroup)
-        .setName('Pixel Banner Icon Opacity')
+        .setName('Pixel Banner Flag Opacity')
         .setDesc('Set the opacity of the banner selector icon in the top-left corner (0-100)')
         .addSlider(slider => slider
             .setLimits(0, 100, 1)