hyde_admin 0.0.13 → 0.0.14

data/bin/admin_views/posts/edit.erb

@@ -1,58 +1,67 @@
-<h2><%= EscapeUtils.escape_html t.send(@type_file).capitalize %></h2>
+<div id="preview-wrapper">
+<div id="editor-panel">
+<h2><%= CGI.escapeHTML t.send(@type_file).capitalize %></h2>
 
 <% file_params = (!@new_record ? "?file=#{@file}" : "") %>
 
-<form action="/<%= @type_file %><%= file_params %>" method="post">
+<form action="/<%= @type_file %><%= file_params %>" method="post" data-autosave-key="hyde_autosave:<%= @new_record ? "new:#{@type_file}" : @file %>">
+  <div id="autosave-banner" class="alert alert-warning d-none mb-3" role="alert">
+    <i class="fa-solid fa-clock-rotate-left"></i>
+    <span id="autosave-banner-text"></span>
+    <button type="button" class="btn btn-sm btn-warning ms-2" id="autosave-restore">Restore</button>
+    <button type="button" class="btn btn-sm btn-outline-secondary ms-2" id="autosave-discard">Discard</button>
+  </div>
   <% if !@new_record %>
     <div class="mb-3">
-      <label for="i-path" class="form-label"><%= EscapeUtils.escape_html t.path.capitalize %></label>
+      <label for="i-path" class="form-label"><%= CGI.escapeHTML t.path.capitalize %></label>
       <div class="input-group">
         <span class="input-group-text">
-          <i class="fas fa-calendar-alt" id="btn-date-path" title="<%= EscapeUtils.escape_html t.change_date_path %>"></i>
+          <i class="fas fa-calendar-alt" id="btn-date-path" title="<%= CGI.escapeHTML t.change_date_path %>"></i>
         </span>
         <span class="input-group-text">
-          <i class="fas fa-sync-alt" id="btn-title-path" title="<%= EscapeUtils.escape_html t.change_title_path %>"></i>
+          <i class="fas fa-sync-alt" id="btn-title-path" title="<%= CGI.escapeHTML t.change_title_path %>"></i>
         </span>
-        <input type="text" class="form-control" value="<%= @file %>" name="new_file" id="i-path">
+        <input type="text" class="form-control" value="<%= CGI.escapeHTML(@file) %>" name="new_file" id="i-path">
       </div>
-      <div id="i-path-help" class="form-text"><%= EscapeUtils.escape_html t.help_path %></div>
+      <div id="i-path-help" class="form-text"><%= CGI.escapeHTML t.help_path %></div>
     </div>
   <% end %>
 
   <div class="mb-3">
-    <label for="i-title" class="form-label"><%= EscapeUtils.escape_html t.title.capitalize %></label>
-    <input type="text" value="<%= @headers.delete('title') %>" class="form-control" name="title" id="i-title">
+    <label for="i-title" class="form-label"><%= CGI.escapeHTML t.title.capitalize %></label>
+    <input type="text" value="<%= CGI.escapeHTML(@headers.delete('title').to_s) %>" class="form-control" name="title" id="i-title">
   </div>
   <div class="mb-3">
-    <label for="i-date" class="form-label"><%= EscapeUtils.escape_html t.date.capitalize %></label>
+    <label for="i-date" class="form-label"><%= CGI.escapeHTML t.date.capitalize %></label>
     <div class="input-group">
       <span class="input-group-text">
-        <i class="fas fa-calendar-day" id="btn-date-today" title="<%= EscapeUtils.escape_html t.set_date_today %>"></i>
+        <i class="fas fa-calendar-day" id="btn-date-today" title="<%= CGI.escapeHTML t.set_date_today %>"></i>
       </span>
-      <input type="text" value="<%= @headers.delete('date') || Time.now.strftime('%Y-%m-%d %H:%M:%S %z') %>" class="form-control" name="date" id="i-date">
+      <input type="text" value="<%= CGI.escapeHTML((@headers.delete('date') || Time.now.strftime('%Y-%m-%d %H:%M:%S %z')).to_s) %>" class="form-control" name="date" id="i-date">
     </div>
   </div>
   <div class="mb-3">
-    <label for="i-tags" class="form-label"><%= EscapeUtils.escape_html t.tags.capitalize %></label>
-    <input type="text" value="<%= Mid.extract_tags(@headers.delete('tags')).join(',') %>" class="form-control" name="tags" id="i-tags">
-    <div id="i-tags-help" class="form-text"><%= EscapeUtils.escape_html t.help_tags.capitalize %></div>
+    <label for="i-tags" class="form-label"><%= CGI.escapeHTML t.tags.capitalize %></label>
+    <input type="text" value="<%= CGI.escapeHTML(Mid.extract_tags(@headers.delete('tags')).join(',')) %>" class="form-control" name="tags" id="i-tags">
+    <div id="i-tags-help" class="form-text"><%= CGI.escapeHTML t.help_tags.capitalize %></div>
   </div>
 
   <% if @type_file == 'drafts' %>
     <div class="mb-3 form-check">
       <input type="checkbox" class="form-check-input" name="publish" value="publish" id="i-publish">
-      <label class="form-check-label" for="i-publish"><%= EscapeUtils.escape_html t.publish.capitalize %></label>
+      <label class="form-check-label" for="i-publish"><%= CGI.escapeHTML t.publish.capitalize %></label>
     </div>
   <% end %>
 
   <% selected_layout = @headers.delete('layout') %>
   <% selected_layout = @hyde_parameters['default_layout'] if selected_layout.nil? || selected_layout.empty? %>
+  <% available_layouts = Dir.glob(File.join(Dir.pwd, '_layouts', '*')).map { |f| File.basename(f, File.extname(f)) } %>
+  <% available_layouts.unshift(selected_layout) unless selected_layout.nil? || available_layouts.include?(selected_layout) %>
   <% if @hyde_parameters['display_layout'].to_s == 'true' %>
     <div class="mb-3">
-      <label for="i-layout" class="form-label"><%= EscapeUtils.escape_html t.layout.capitalize %></label>
+      <label for="i-layout" class="form-label"><%= CGI.escapeHTML t.layout.capitalize %></label>
       <select class="form-select" aria-label="Choice layout" name="layout">
-        <% Dir.glob(File.join(Dir.pwd, '_layouts', '*')).each do |f| %>
-          <% layout_loop = File.basename(f, File.extname(f)) %>
+        <% available_layouts.each do |layout_loop| %>
           <option <%= (layout_loop == selected_layout ? 'selected' : '') %> value="<%= layout_loop %>"><%= layout_loop %></option>
         <% end %>
       </select>
@@ -65,7 +74,7 @@
   <% selected_format = ".#{@hyde_parameters['default_format']}" if selected_format.empty? %>
   <% if @hyde_parameters['display_format'].to_s == 'true' %>
     <div class="mb-3">
-      <label for="i-format" class="form-label"><%= EscapeUtils.escape_html t.format.capitalize %></label>
+      <label for="i-format" class="form-label"><%= CGI.escapeHTML t.format.capitalize %></label>
       <select class="form-select" id="select-format" aria-label="Choice format" name="format">
         <% { 'html' => 'html', 'markdown' => 'md' }.each do |k, v| %>
           <option <%= (selected_format == ".#{v}" ? 'selected' : '') %> value="<%= v %>"><%= k %></option>
@@ -81,78 +90,166 @@
 
   <% @headers.each do |k,v| %>
     <div class="mb-3">
-      <label for="i-<%= k %>" class="form-label"><%= k %></label>
-      <input type="text" value="<%= v %>" class="form-control" name="<%= k %>" id="i-<%= k %>">
+      <label for="i-<%= CGI.escapeHTML(k) %>" class="form-label"><%= CGI.escapeHTML(k) %></label>
+      <input type="text" value="<%= CGI.escapeHTML(v.to_s) %>" class="form-control" name="<%= CGI.escapeHTML(k) %>" id="i-<%= CGI.escapeHTML(k) %>">
     </div>
   <% end %>
 
-  <a href="#" class="btn btn-secondary mb-2" id="add-header"><i class="fas fa-plus"></i> <%= EscapeUtils.escape_html t.add_header.capitalize %></a>
+  <a href="#" class="btn btn-secondary mb-2" id="add-header"><i class="fas fa-plus"></i> <%= CGI.escapeHTML t.add_header.capitalize %></a>
   <div class="mb-3 custom-headers"></div>
 
   <div class="mb-3 template-header" style="display: none">
     <div class="row">
-      <div class="col-sm-4"><input type="text" class="col-sm-6 form-control header-name" name="" placeholder="<%= EscapeUtils.escape_html t.header_name.capitalize %>"></div>
-      <div class="col-sm-8"><input type="text" class="col-sm-6 form-control header-value" name="" placeholder="<%= EscapeUtils.escape_html t.header_value.capitalize %>"></div>
+      <div class="col-sm-4"><input type="text" class="col-sm-6 form-control header-name" name="" placeholder="<%= CGI.escapeHTML t.header_name.capitalize %>"></div>
+      <div class="col-sm-8"><input type="text" class="col-sm-6 form-control header-value" name="" placeholder="<%= CGI.escapeHTML t.header_value.capitalize %>"></div>
     </div>
   </div>
 
   <script type="text/javascript" charset="utf-8">
       window.custom_headers_i = 0;
-      $(document).on('click', '#add-header', function(){
-          $('.template-header').clone().appendTo('.custom-headers');
-          let elt = $('.custom-headers .template-header');
-          elt.find('.header-name').attr('name', 'header' + window.custom_headers_i + '[]');
-          elt.find('.header-value').attr('name', 'header' + window.custom_headers_i + '[]');
-          elt.show();
-          elt.removeClass('template-header');
+      document.addEventListener('click', function(e){
+          if(!e.target.closest('#add-header')) return;
+          e.preventDefault();
+          var tpl = document.querySelector('.template-header');
+          var clone = tpl.cloneNode(true);
+          clone.querySelector('.header-name').setAttribute('name', 'header' + window.custom_headers_i + '[]');
+          clone.querySelector('.header-value').setAttribute('name', 'header' + window.custom_headers_i + '[]');
+          clone.style.display = '';
+          clone.classList.remove('template-header');
+          document.querySelector('.custom-headers').appendChild(clone);
           window.custom_headers_i += 1;
-          return false;
       });
   </script>
 
   <div class="mb-3">
-    <label for="i-content" class="form-label"><%= EscapeUtils.escape_html t.content.capitalize %> <a href="https://jekyllrb.com/docs/liquid/" class="text-secondary" target="_blank"><i class="fas fa-question-circle"></i></a></label>
+    <label for="i-content" class="form-label"><%= CGI.escapeHTML t.content.capitalize %> <a href="https://jekyllrb.com/docs/liquid/" class="text-secondary" target="_blank"><i class="fas fa-question-circle"></i></a></label>
 
     <% path = File.join(Pathname.new(Mid.gem_source_path), 'admin_views', 'editor_html.erb') %>
     <%= ERB.new(File.read(path)).result(binding) %>
 
-    <textarea class="form-control text-editor" id="i-content" rows="3" name="content"><%= @content %></textarea>
+    <textarea class="form-control text-editor" id="i-content" rows="3" name="content"><%= CGI.escapeHTML(@content.to_s) %></textarea>
   </div>
-  <button type="submit" class="btn btn-primary"><%= EscapeUtils.escape_html t.submit.capitalize %></button>
+  <button type="submit" class="btn btn-primary"><%= CGI.escapeHTML t.submit.capitalize %></button>
+  <span id="autosave-indicator"><i class="fa-solid fa-check"></i> Saved</span>
 </form>
 
 <script type="text/javascript" charset="utf-8">
-    $(document).on('click', '#select-format', function(){
-        let ext_mode = { md: "markdown", html: "htmlmixed"};
-        console.log($('#select-format').val());
-        window.myCodeMirror.setOption("mode", ext_mode[$('#select-format').val()]);
-        window.mode_markdown = ($('#select-format').val() == 'md');
-        return true;
-    });
-    $(document).on('click', '#btn-date-path', function(){
-        $.post( "/ajax/update_path_date", { date: $('#i-date').val(), path: $('#i-path').val() })
-            .done(function( data ) {
-                $('#i-path').val(data);
-            });
-        return false;
-    });
-    $(document).on('click', '#btn-title-path', function(){
-        $.post( "/ajax/update_path_title", { title: $('#i-title').val(), path: $('#i-path').val() })
-            .done(function( data ) {
-                $('#i-path').val(data);
-            });
-        return false;
+    document.addEventListener('change', function(e){
+        if(!e.target.closest('#select-format')) return;
+        var ext_mode = { md: "markdown", html: "htmlmixed"};
+        var val = document.getElementById('select-format').value;
+        window.myCodeMirror.setOption("mode", ext_mode[val]);
+        window.mode_markdown = (val == 'md');
     });
 
-    $(document).on('click', '#btn-date-today', function(){
-        $.post( "/ajax/update_date_today", {})
-            .done(function( data ) {
-                $('#i-date').val(data);
-            });
-        return false;
+    function postForm(url, params) {
+        var body = new URLSearchParams(params);
+        return fetch(url, { method: 'POST', body: body }).then(function(r){ return r.text(); });
+    }
+
+    document.addEventListener('click', function(e){
+        if(e.target.closest('#btn-date-path')){
+            e.preventDefault();
+            postForm("/ajax/update_path_date", {
+                date: document.getElementById('i-date').value,
+                path: document.getElementById('i-path').value
+            }).then(function(data){ document.getElementById('i-path').value = data; });
+            return;
+        }
+        if(e.target.closest('#btn-title-path')){
+            e.preventDefault();
+            postForm("/ajax/update_path_title", {
+                title: document.getElementById('i-title').value,
+                path: document.getElementById('i-path').value
+            }).then(function(data){ document.getElementById('i-path').value = data; });
+            return;
+        }
+        if(e.target.closest('#btn-date-today')){
+            e.preventDefault();
+            postForm("/ajax/update_date_today", {})
+                .then(function(data){ document.getElementById('i-date').value = data; });
+            return;
+        }
     });
 
     <% path = File.join(Pathname.new(Mid.gem_source_path), 'admin_views', 'editor_js.erb') %>
     <%= ERB.new(File.read(path)).result(binding) %>
 
+    // Preview functionality
+    document.addEventListener('click', function(e) {
+        if (e.target.closest('#btn-preview')) {
+            e.preventDefault();
+            var wrapper = document.getElementById('preview-wrapper');
+            var panel = document.getElementById('preview-panel');
+
+            document.getElementById('waiting').style.display = 'block';
+
+            var content = window.myCodeMirror ? window.myCodeMirror.getValue() : document.getElementById('i-content').value;
+            var layoutEl = document.querySelector('select[name="layout"]') || document.querySelector('input[name="layout"]');
+            var formatEl = document.getElementById('select-format') || document.querySelector('input[name="format"]');
+
+            var body = new URLSearchParams({
+                content: content,
+                title: (document.getElementById('i-title') || {}).value || '',
+                date: (document.getElementById('i-date') || {}).value || '',
+                tags: (document.getElementById('i-tags') || {}).value || '',
+                layout: layoutEl ? layoutEl.value : '',
+                format: formatEl ? formatEl.value : 'md'
+            });
+
+            fetch('/ajax/preview', { method: 'POST', body: body })
+                .then(function(r) { return r.text(); })
+                .then(function(url) {
+                    document.getElementById('preview-iframe').src = url;
+                    panel.classList.remove('d-none');
+                    wrapper.classList.add('preview-active');
+                    document.querySelector('main').classList.add('preview-active-main');
+                    document.getElementById('waiting').style.display = 'none';
+                    setTimeout(function() {
+                        if (window.myCodeMirror) window.myCodeMirror.refresh();
+                    }, 100);
+                })
+                .catch(function() {
+                    document.getElementById('waiting').style.display = 'none';
+                });
+            return;
+        }
+
+        if (e.target.closest('#btn-refresh-preview')) {
+            e.preventDefault();
+            document.getElementById('btn-preview').click();
+            return;
+        }
+
+        if (e.target.closest('#btn-close-preview')) {
+            e.preventDefault();
+            var wrapper = document.getElementById('preview-wrapper');
+            var panel = document.getElementById('preview-panel');
+            panel.classList.add('d-none');
+            wrapper.classList.remove('preview-active');
+            document.querySelector('main').classList.remove('preview-active-main');
+            setTimeout(function() {
+                if (window.myCodeMirror) window.myCodeMirror.refresh();
+            }, 100);
+            return;
+        }
+    });
+
 </script>
+</div><!-- /editor-panel -->
+
+<div id="preview-panel" class="d-none">
+  <div class="preview-panel-header d-flex align-items-center justify-content-between p-2 bg-light border-bottom">
+    <span><i class="fas fa-eye"></i> <%= CGI.escapeHTML t.editor_preview %></span>
+    <div>
+      <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-refresh-preview" title="<%= CGI.escapeHTML t.preview_refresh %>">
+        <i class="fas fa-sync-alt"></i>
+      </button>
+      <button type="button" class="btn btn-sm btn-outline-danger" id="btn-close-preview" title="<%= CGI.escapeHTML t.preview_close %>">
+        <i class="fas fa-times"></i>
+      </button>
+    </div>
+  </div>
+  <iframe id="preview-iframe" src="about:blank"></iframe>
+</div>
+</div><!-- /preview-wrapper -->

data/bin/admin_views/posts/listing.erb

@@ -1,33 +1,33 @@
-<h2><%= EscapeUtils.escape_html t.send(@type_file).capitalize %> &nbsp; <a href="/<%= @type_file %>/new" class="btn btn-secondary btn-sm"><i class="fas fa-plus"></i> <%= EscapeUtils.escape_html t.new.capitalize %></a></h2>
+<h2><%= CGI.escapeHTML t.send(@type_file).capitalize %> &nbsp; <a href="/<%= @type_file %>/new" class="btn btn-secondary btn-sm"><i class="fas fa-plus"></i> <%= CGI.escapeHTML t.new.capitalize %></a></h2>
 
 <div class="table-responsive">
-  <table class="table table-striped table-sm">
+  <table class="table table-striped table-sm table-bordered">
     <tr>
       <th>
-        <%= EscapeUtils.escape_html t.file.capitalize %>
+        <%= CGI.escapeHTML t.file.capitalize %>
       </th>
       <th>
-        <%= EscapeUtils.escape_html t.edit.capitalize %>
+        <%= CGI.escapeHTML t.edit.capitalize %>
       </th>
       <th>
-        <%= EscapeUtils.escape_html t.delete.capitalize %>
+        <%= CGI.escapeHTML t.delete.capitalize %>
       </th>
     </tr>
     <% @files.each do |f| %>
-      <% edit_path = "/#{@type_file}?file=#{f}" %>
+      <% edit_path = "/#{@type_file}?file=#{CGI.escape(f)}" %>
     <tr>
       <td>
         <a href="<%= edit_path %>" class="link-dark">
-          <%= f.gsub(File.join(Dir.pwd, ''),'') %>
+          <%= CGI.escapeHTML(f.gsub(File.join(Dir.pwd, ''),'')) %>
         </a>
       </td>
       <td>
-        <a href="<%= edit_path %>" class="btn btn-default"><i class="fa fa-edit" title="<%= EscapeUtils.escape_html t.edit.capitalize %>"></i></a>
+        <a href="<%= edit_path %>" class="btn btn-default"><i class="fa fa-edit" title="<%= CGI.escapeHTML t.edit.capitalize %>"></i></a>
       </td>
       <td>
-        <form method="post" action="/<%= @type_file %>/delete" class="inline form-confirm" data-confirm="<%= EscapeUtils.escape_html t.are_you_sure %>">
+        <form method="post" action="/<%= @type_file %>/delete" class="inline form-confirm" data-confirm="<%= CGI.escapeHTML t.are_you_sure %>">
           <input type="hidden" name="file" value="<%= f %>">
-	        <button type="submit" class="btn btn-default"><i class="fa fa-trash" title="<%= EscapeUtils.escape_html t.delete.capitalize %>"></i></button>
+	        <button type="submit" class="btn btn-default"><i class="fa fa-trash" title="<%= CGI.escapeHTML t.delete.capitalize %>"></i></button>
         </form>
       </td>
     </tr>

data/bin/admin_views/search.erb

@@ -0,0 +1,42 @@
+<h2><i class="fa-solid fa-magnifying-glass"></i> <%= CGI.escapeHTML t.global_search.capitalize %></h2>
+
+<form action="/search" method="get" class="mb-4">
+  <div class="input-group">
+    <input type="text" name="q" value="<%= CGI.escapeHTML(@query) %>" class="form-control" placeholder="<%= CGI.escapeHTML t.global_search_placeholder %>" autofocus>
+    <button class="btn btn-primary" type="submit"><%= CGI.escapeHTML t.search.capitalize %></button>
+  </div>
+</form>
+
+<% if @query.length >= 2 %>
+  <p class="text-muted"><%= @results.size %> <%= CGI.escapeHTML t.global_search_results_for %> "<%= CGI.escapeHTML(@query) %>"</p>
+
+  <% if @results.empty? %>
+    <p><%= CGI.escapeHTML t.global_search_no_results.capitalize %></p>
+  <% else %>
+    <% type_icons = { 'posts' => 'fa-file-lines', 'pages' => 'fa-file', 'drafts' => 'fa-file-pen', 'files' => 'fa-copy' } %>
+    <% @results.group_by { |r| r[:type] }.each do |type, results| %>
+      <h5 class="mt-4 mb-3"><i class="fa-solid <%= type_icons[type] || 'fa-file' %>"></i> <%= CGI.escapeHTML t.send(type).capitalize %></h5>
+      <div class="list-group mb-3">
+        <% results.each do |r| %>
+          <a href="<%= r[:edit_url] %>" class="list-group-item list-group-item-action">
+            <div class="d-flex justify-content-between align-items-start">
+              <div>
+                <strong><%= CGI.escapeHTML(r[:title].to_s) %></strong>
+                <br><small class="text-muted"><%= CGI.escapeHTML(r[:relative]) %></small>
+                <% if r[:tags] && !r[:tags].empty? %>
+                  <br>
+                  <% r[:tags].split(',').each do |tag| %>
+                    <span class="badge bg-secondary"><%= CGI.escapeHTML(tag.strip) %></span>
+                  <% end %>
+                <% end %>
+                <% if r[:excerpt] %>
+                  <br><small class="text-muted fst-italic"><%= CGI.escapeHTML(r[:excerpt]) %></small>
+                <% end %>
+              </div>
+            </div>
+          </a>
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/bin/admin_views/upload_image_form.erb

@@ -33,16 +33,16 @@
           <%= t.pictures_has_been_uploaded.capitalize %> : <%= @filenames.join(', ') %>
         <% end %>
 
-        <form enctype="multipart/form-data" method="post" action="/upload_image" class="row g-3">
-          <div class="col-10">
+        <form enctype="multipart/form-data" method="post" action="/upload_image">
+          <div class="input-group mb-3">
             <input type="file" name="files[]" multiple class="form-control">
-          </div>
-          <div class="col-2">
             <button class="btn btn-primary"><%= t.upload.capitalize %></button>
           </div>
+
+          <a class="btn btn-secondary btn-return-to-editor"><%= t.quit.capitalize %></a>
         </form>
 
-        <button class="btn btn-secondary btn-return-to-editor fixed-bottom mb-4 ms-4"><%= t.quit.capitalize %></button>
+
       </div>
     </div>
   </body>