seeemess 1.0.7 → 1.0.9

package/admin/config.js

@@ -28,6 +28,7 @@ let currentConfig = null;
  * @param {string} [options.publicDir] Public/uploads directory path (defaults to cmsRoot/public)
  * @param {string} [options.imageUrlPath] URL path prefix for images in final site (defaults to '/uploads')
  * @param {string} [options.previewTemplate] Path to custom preview template (relative to cmsRoot)
+ * @param {string} [options.title] Title for the admin interface (defaults to 'CMS Admin')
  * @param {number} [options.port] Server port (defaults to 3000 or PORT env var)
  * @param {Array} options.sections Array of section definitions: { id, name, folder, tag, customFields? }
  *   customFields is an optional array of: { id, label, type, placeholder? }
@@ -40,9 +41,10 @@ export function createConfig(options = {}) {
   const cmsRoot = options.cmsRoot || process.cwd();
 
   // Normalize imageUrlPath - ensure it starts with / and doesn't end with /
-  let imageUrlPath = options.imageUrlPath || '/uploads';
-  if (!imageUrlPath.startsWith('/')) imageUrlPath = '/' + imageUrlPath;
-  if (imageUrlPath.endsWith('/')) imageUrlPath = imageUrlPath.slice(0, -1);
+  // Use 'imageUrlPath' in options check to allow empty string as valid value
+  let imageUrlPath = 'imageUrlPath' in options ? options.imageUrlPath : '/uploads';
+  if (imageUrlPath && !imageUrlPath.startsWith('/')) imageUrlPath = '/' + imageUrlPath;
+  if (imageUrlPath && imageUrlPath.endsWith('/')) imageUrlPath = imageUrlPath.slice(0, -1);
 
   const config = {
     CMS_ROOT: cmsRoot,
@@ -50,6 +52,7 @@ export function createConfig(options = {}) {
     PUBLIC_DIR: options.publicDir || join(cmsRoot, 'public'),
     IMAGE_URL_PATH: imageUrlPath,
     PREVIEW_TEMPLATE: options.previewTemplate ? join(cmsRoot, options.previewTemplate) : null,
+    TITLE: options.title || 'CMS Admin',
     PORT: options.port || process.env.PORT || 3000,
     SECTIONS: options.sections || [],
     IMAGE_SIZES: options.imageSizes || DEFAULT_IMAGE_SIZES,
@@ -80,6 +83,7 @@ export const getContentDir = () => getConfig().CONTENT_DIR;
 export const getPublicDir = () => getConfig().PUBLIC_DIR;
 export const getImageUrlPath = () => getConfig().IMAGE_URL_PATH;
 export const getPreviewTemplate = () => getConfig().PREVIEW_TEMPLATE;
+export const getTitle = () => getConfig().TITLE;
 export const getPort = () => getConfig().PORT;
 export const getSections = () => getConfig().SECTIONS;
 export const getImageSizes = () => getConfig().IMAGE_SIZES;

package/admin/server.js

@@ -4,7 +4,7 @@ import { fileURLToPath } from 'url';
 import { Eta } from 'eta';
 
 // Config
-import { createConfig, getConfig, getCmsRoot, getPublicDir, getImageUrlPath, getPreviewTemplate, getPort, getSections } from './config.js';
+import { createConfig, getConfig, getCmsRoot, getPublicDir, getImageUrlPath, getPreviewTemplate, getTitle, getPort, getSections } from './config.js';
 
 // Routes
 import postsRouter from './routes/posts.js';
@@ -44,12 +44,17 @@ export function startAdminServer(options = {}) {
 
   // Static files - serve images at configured URL path
   const imageUrlPath = getImageUrlPath();
-  app.use(imageUrlPath, express.static(getPublicDir()));
+  // Use '/' as mount path if imageUrlPath is empty string
+  app.use(imageUrlPath || '/', express.static(getPublicDir()));
+  // Also serve at /uploads for backward compatibility in admin previews
+  if (imageUrlPath !== '/uploads') {
+    app.use('/uploads', express.static(getPublicDir()));
+  }
   app.use('/css', express.static(join(getCmsRoot(), 'css')));
 
   // Admin interface
   app.get('/', (req, res) => {
-    res.send(eta.render('admin', { imageUrlPath }));
+    res.send(eta.render('admin', { imageUrlPath, title: getTitle() }));
   });
 
   // API Routes

package/admin/templates/admin.eta

@@ -30,9 +30,10 @@
     .section-tab { flex: 1; padding: 0.6rem 0.5rem; text-align: center; background: #f0f0f0; border: none; cursor: pointer; font-size: 0.8rem; font-weight: 600; border-radius: 4px 4px 0 0; }
     .section-tab:hover { background: #e0e0e0; }
     .section-tab.active { background: #333; color: #fff; }
-    .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
-    .section-header h3 { margin: 0; font-size: 0.9rem; }
-    .lede-indicator { font-size: 0.7rem; color: #004085; }
+    .search-box { position: relative; margin-bottom: 0.75rem; }
+    .search-box input { width: 100%; padding: 0.5rem 0.5rem 0.5rem 2rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.85rem; }
+    .search-box input:focus { outline: none; border-color: #333; }
+    .search-icon { position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); color: #666; font-size: 0.9rem; pointer-events: none; }
     .btn-lede { font-size: 0.65rem; padding: 2px 6px; background: #17a2b8; color: #fff; border: none; border-radius: 3px; cursor: pointer; margin-left: auto; }
     .btn-lede:hover { background: #138496; }
     .btn-lede.is-lede { background: #28a745; }
@@ -268,16 +269,16 @@
 </head>
 <body>
   <div class="header-row">
-    <h1>CMS Admin</h1>
+    <h1><%= it.title || "CMS Admin" %></h1>
     <button class="btn-publish-global" id="publishGlobalBtn" disabled onclick="publishChanges()">Publish Changes</button>
   </div>
   <div class="container">
     <div class="sidebar">
       <button class="btn btn-primary" style="width:100%; margin-bottom:1rem;" onclick="newPost()">+ New Post</button>
       <div class="section-tabs" id="sectionTabs"></div>
-      <div class="section-header">
-        <h3 id="sectionTitle">Posts</h3>
-        <span class="lede-indicator" id="ledeIndicator"></span>
+      <div class="search-box">
+        <span class="search-icon">🔍</span>
+        <input type="text" id="searchInput" placeholder="Search posts..." oninput="filterPosts()">
       </div>
       <ul class="post-list" id="postList"></ul>
     </div>
@@ -386,15 +387,16 @@
 
         <div>
           <label>Content (Markdown)</label>
+          <p style="font-size: 0.85rem; color: #666; margin: 0.25rem 0 0.5rem;">[Photo](photo.jpg){.float-left .w-1/3 .mt-4 .mb-4 .mr-4} or [Photo](photo.jpg){.float-right .w-1/3 .mt-4 .mb-4 .ml-4}</p>
           <textarea id="body" required></textarea>
         </div>
 
         <div class="image-section" id="inlineImagesSection" style="display: none;">
           <div style="display: flex; justify-content: space-between; align-items: center;">
-            <label>Inline Image Captions &amp; Credits</label>
+            <label>Images in Content</label>
             <button type="button" class="btn btn-secondary" onclick="syncInlineImages()" style="padding: 0.25rem 0.5rem; font-size: 0.8rem;">Refresh</button>
           </div>
-          <p style="font-size: 0.85rem; color: #666; margin: 0.25rem 0 0.5rem;">Add captions and credits for images in your content</p>
+          <p style="font-size: 0.85rem; color: #666; margin: 0.25rem 0 0.5rem;">Images found in your markdown content (manage captions/credits in gallery)</p>
           <div id="inlineImagesList" class="gallery-thumbnails"></div>
         </div>
 
@@ -495,7 +497,6 @@
     let modalResolve = null;
     let formDirty = false;
     let editingGalleryIndex = null;
-    let editingImageIndex = null;
     let currentSection = 'news';
     let pendingChanges = false;
 
@@ -601,10 +602,25 @@
       document.querySelectorAll('.section-tab').forEach((tab, idx) => {
         tab.classList.toggle('active', sections[idx].id === sectionId);
       });
+      document.getElementById('searchInput').value = '';
       renderPostList();
       renderCustomFields();
     }
 
+    function filterPosts() {
+      const searchTerm = document.getElementById('searchInput').value.toLowerCase();
+      const listItems = document.querySelectorAll('.post-list li');
+
+      listItems.forEach(li => {
+        const title = li.querySelector('.post-title').textContent.toLowerCase();
+        if (title.includes(searchTerm)) {
+          li.style.display = '';
+        } else {
+          li.style.display = 'none';
+        }
+      });
+    }
+
     function renderCustomFields() {
       const container = document.getElementById('customFieldsContainer');
       const section = sections.find(s => s.id === currentSection);
@@ -714,19 +730,6 @@
       // Filter posts by current section
       const sectionPosts = posts.filter(p => p.section === currentSection);
 
-      // Find current lede
-      const ledePost = sectionPosts.find(p => p.lede === true || p.lede === 'true');
-      const ledeIndicator = document.getElementById('ledeIndicator');
-      if (ledePost) {
-        ledeIndicator.textContent = 'Lead: ' + (ledePost.title || '').substring(0, 20) + (ledePost.title && ledePost.title.length > 20 ? '...' : '');
-      } else {
-        ledeIndicator.textContent = 'Lead: Most recent';
-      }
-
-      // Update section title
-      const section = sections.find(s => s.id === currentSection);
-      document.getElementById('sectionTitle').textContent = section ? section.name : 'Posts';
-
       sectionPosts.forEach(p => {
         const li = document.createElement('li');
         li.dataset.path = p.path;
@@ -1430,60 +1433,17 @@
       container.innerHTML = '';
 
       images.forEach((item, idx) => {
-        const hasMetadata = item.caption || item.credit;
         const thumb = document.createElement('div');
-        thumb.className = 'gallery-thumb' + (hasMetadata ? ' has-metadata' : '');
+        thumb.className = 'gallery-thumb';
 
         thumb.innerHTML =
           '<img src="' + imageUrlPath + '/' + item.src.replace(/(\.[^.]+)$/, '-thumb$1') + '" alt="" onerror="this.onerror=null; this.src=\'' + imageUrlPath + '/' + item.src + '\'">' +
-          '<div class="gallery-thumb-actions">' +
-            '<button type="button" class="gallery-thumb-btn edit" onclick="openInlineImageEditModal(' + idx + ')" title="Edit caption/credit">✎</button>' +
-          '</div>' +
           '<div class="gallery-thumb-name">' + item.src + '</div>';
 
         container.appendChild(thumb);
       });
     }
 
-    function openInlineImageEditModal(idx) {
-      editingImageIndex = idx;
-      const item = images[idx];
-
-      document.getElementById('galleryCaption').value = item.caption || '';
-      document.getElementById('galleryCredit').value = item.credit || '';
-      document.getElementById('captionCount').textContent = (item.caption || '').length;
-      document.getElementById('creditCount').textContent = (item.credit || '').length;
-
-      // Update modal title to indicate inline image
-      document.querySelector('#galleryEditModal .modal-title').textContent = 'Edit Inline Image Details';
-      document.getElementById('galleryEditModal').classList.add('active');
-    }
-
-    function closeInlineImageEditModal() {
-      document.getElementById('galleryEditModal').classList.remove('active');
-      editingImageIndex = null;
-      // Restore modal title
-      document.querySelector('#galleryEditModal .modal-title').textContent = 'Edit Photo Details';
-    }
-
-    function saveInlineImageEdit() {
-      if (editingImageIndex === null) return;
-
-      const caption = document.getElementById('galleryCaption').value.trim();
-      const credit = document.getElementById('galleryCredit').value.trim();
-
-      images[editingImageIndex] = {
-        src: images[editingImageIndex].src,
-        caption,
-        credit
-      };
-
-      closeInlineImageEditModal();
-      renderInlineImages();
-      markFormDirty();
-      showStatus('Image details saved', 'success');
-    }
-
     // Listen for body changes to sync inline images
     document.getElementById('body').addEventListener('blur', syncInlineImages);
 
@@ -1546,18 +1506,11 @@
     function closeGalleryEditModal() {
       document.getElementById('galleryEditModal').classList.remove('active');
       editingGalleryIndex = null;
-      editingImageIndex = null;
       // Restore modal title
       document.querySelector('#galleryEditModal .modal-title').textContent = 'Edit Photo Details';
     }
 
     function saveGalleryEdit() {
-      // Check if editing inline image or gallery image
-      if (editingImageIndex !== null) {
-        saveInlineImageEdit();
-        return;
-      }
-
       if (editingGalleryIndex === null) return;
 
       const caption = document.getElementById('galleryCaption').value.trim();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "seeemess",
-	"version": "1.0.7",
+	"version": "1.0.9",
 	"description": "A simple CMS framework built on Eleventy with an admin interface for managing blog content.",
 	"type": "module",
 	"main": "index.js",