dokno 1.0.0 → 1.3.0

data/app/views/dokno/articles/show.html.erb

@@ -1,26 +1,32 @@
 <%= render 'dokno/article_formatting' %>
 
+<% if @category.present? %>
+  <div class="no-print text-gray-500 mb-5">
+    <div>Category: <a href="<%= article_index_path(@category.code) %>?search_term=<%= CGI.escape(@search_term.to_s) %>&order=<%= @order %>"><%= @category.breadcrumb %></a></div>
+  </div>
+<% end %>
+
+<%= render 'partials/category_header' %>
+
+<div class="my-10 no-print"><hr /></div>
+
 <section>
   <div class="flex">
     <div id="dokno-article-sidebar" class="w-2/5 pr-10">
-      <div id="article-deprecated-alert" class="<%= 'hidden' if @article.active %> bg-yellow-700 p-4 mb-5 rounded text-lg border-t-4 border-yellow-900 text-white font-base">
-        <i data-feather="alert-circle" class="inline-block mr-2"></i> This article is no longer active
-      </div>
-
-      <h1 class="dokno-article-content-highlight text-4xl mb-10 leading-tight font-light"><%= @article.title %></h1>
+      <h1 class="dokno-article-content-highlight text-4xl mb-8 leading-tight font-light">
+        <%= @article.title %>
+        <% if @article.starred %><i title="Starred article" data-feather="star" class="inline align-middle"></i><% end %>
+      </h1>
 
       <div>
-        <div class="mb-10 no-print">
-          <button title="Email article" class="bg-gray-600 text-gray-300 hover:text-white rounded mr-3 py-2 px-3 font-bold text-xs" onclick="window.open('mailto:?subject=<%= CGI.escape(@article.title) %>&body=<%= CGI.escape(article_url(@article.slug)) %>');"><i data-feather="send" class="inline h-4"></i> EMAIL THIS</button>
-          <button title="Print article" class="bg-gray-600 text-gray-300 hover:text-white rounded mr-3 py-2 px-3 font-bold text-xs" onclick="window.print();"><i data-feather="printer" class="inline h-4"></i> PRINT THIS</button>
-
-          <% if can_edit? %>
-            <button title="Edit article" class="bg-blue-900 text-gray-300 hover:text-white rounded py-2 px-3 font-bold text-xs" onclick="location.href='<%= edit_article_path(@article.slug) %>';"><i data-feather="edit" class="inline h-4"></i> EDIT THIS</button>
-          <% end %>
+        <div class="mb-8 no-print">
+          <button title="Copy link" class="bg-gray-600 text-gray-300 hover:text-white rounded my-2 mr-2 py-2 px-3 font-bold text-sm" onclick="copyToClipboard('<%= @article.permalink(request.base_url) %>');"><i data-feather="clipboard" class="inline h-5"></i> COPY</button>
+          <button title="Email article" class="bg-gray-600 text-gray-300 hover:text-white rounded my-2 mr-2 py-2 px-3 font-bold text-sm" onclick="window.open('mailto:?subject=<%= CGI.escape(@article.title.to_s) %>&body=<%= CGI.escape(article_url(@article.slug)) %>');"><i data-feather="send" class="inline h-5"></i> EMAIL</button>
+          <button title="Print article" class="bg-gray-600 text-gray-300 hover:text-white rounded my-2 py-2 px-3 font-bold text-sm" onclick="window.print();"><i data-feather="printer" class="inline h-5"></i> PRINT</button>
         </div>
 
         <div class="flex">
-          <div class="no-print w-8"><i data-feather="clock" class="inline-block h-5"></i></div>
+          <div class="no-print w-8"><i data-feather="clock" class="inline-block h-5 mr-2"></i></div>
           <div class="w-full">
             Last updated:<br />
             <%= time_ago_in_words @article.updated_at %> ago
@@ -30,8 +36,8 @@
           </div>
         </div>
 
-        <div class="mt-5 flex">
-          <div class="no-print w-8"><i data-feather="eye" class="inline-block h-5"></i></div>
+        <div class="mt-5 flex no-print">
+          <div class="no-print w-8"><i data-feather="eye" class="inline-block h-5 mr-2"></i></div>
           <div class="w-full">
             Views:<br />
             <%= number_with_delimiter(@article.views, delimiter: ',') %>
@@ -40,7 +46,7 @@
 
         <% if @article.contributors.present? %>
           <div class="mt-5 flex">
-            <div class="no-print w-8"><i data-feather="user-check" class="inline-block h-5"></i></div>
+            <div class="no-print w-8"><i data-feather="user-check" class="inline-block h-5 mr-2"></i></div>
             <div class="w-full">
               Contributors:<br />
               <%= @article.contributors %>
@@ -49,8 +55,8 @@
         <% end %>
 
         <% if @article.reading_time.present? %>
-          <div class="mt-5 flex">
-            <div class="no-print w-8"><i data-feather="watch" class="inline-block h-5"></i></div>
+          <div class="mt-5 flex no-print">
+            <div class="no-print w-8"><i data-feather="watch" class="inline-block h-5 mr-2"></i></div>
             <div class="w-full">
               Reading time:<br />
               <%= @article.reading_time %>
@@ -59,7 +65,7 @@
         <% end %>
 
         <div class="mt-5 flex">
-          <div class="no-print w-8"><i data-feather="link" class="inline-block h-5"></i></div>
+          <div class="no-print w-8"><i data-feather="link" class="inline-block h-5 mr-2"></i></div>
           <div class="w-full">
             Permalink:<br />
             <a class="inline-block mt-1 -ml-2 px-2 py-1 bg-blue-100 rounded" title="Copy to clipboard" href="javascript:;" onclick="copyToClipboard('<%= @article.permalink(request.base_url) %>');"><%= @article.permalink(request.base_url) %></a>
@@ -67,8 +73,8 @@
         </div>
 
         <% if can_edit? %>
-          <div class="mt-5 flex">
-            <div class="no-print w-8"><i data-feather="crosshair" class="inline-block h-5"></i></div>
+          <div class="mt-5 flex no-print">
+            <div class="no-print w-8"><i data-feather="crosshair" class="inline-block h-5 mr-2"></i></div>
             <div class="w-full">
               Unique slug:<br />
               <a class="inline-block mt-1 -ml-2 px-2 py-1 bg-blue-100 rounded" title="Copy to clipboard" href="javascript:;" onclick="copyToClipboard('<%= j @article.slug %>');"><%= @article.slug %></a>
@@ -85,12 +91,11 @@
           </div>
         <% end %>
 
-        <% if @article.categories.exists? %>
-          <div class="mt-5 flex">
-            <div class="no-print w-8"><i data-feather="folder" class="inline-block h-5"></i></div>
+        <% if (category_name_list = @article.category_name_list(context_category_id: @category&.id)).present? %>
+          <div class="mt-5 flex no-print">
+            <div class="no-print w-8"><i data-feather="folder" class="inline-block h-5 mr-2"></i></div>
             <div class="w-full">
-              <%= 'Category'.pluralize @article.categories.count %>:<br />
-              <%= @article.category_name_list.split(':').last.html_safe %>
+              <%= category_name_list.sub(':', ':<br />').html_safe %>
             </div>
           </div>
         <% end %>
@@ -110,21 +115,22 @@
       <% if @article.summary.blank? && @article.markdown.blank? %>
         <div class="mb-10">No content</div>
       <% end %>
-
-      <% if can_edit? %>
-        <div class="no-print">
-          <hr class="mt-5" />
-          <div class="mt-10 text-right">
-            <button title="Deactivate article" id="article-deactivate-button" class="bg-yellow-700 text-gray-300 hover:text-white rounded mr-3 py-2 px-3 font-bold text-xs <% if !@article.active %>hidden<% end %>" onclick="deactiveArticle('<%= @article.slug %>');"><i data-feather="sunset" class="inline h-4"></i> DEACTIVATE THIS</button>
-            <button title="Re-activate article" id="article-activate-button" class="bg-green-700 text-gray-300 hover:text-white rounded mr-3 py-2 px-3 font-bold text-xs <% if @article.active %>hidden<% end %>" onclick="activeArticle('<%= @article.slug %>');"><i data-feather="sunrise" class="inline h-4"></i> RE-ACTIVATE THIS</button>
-            <button title="Permanently delete article" class="bg-red-700 text-gray-300 hover:text-white rounded py-2 px-3 font-bold text-xs" onclick="deleteArticle('<%= @article.id %>');"><i data-feather="trash" class="inline h-4"></i> DELETE THIS</button>
-          </div>
-        </div>
-      <% end %>
     </div>
   </div>
 </section>
 
-<% if @search_term.present? %>
-  <script>highlightTerm(['<%= j @search_term.strip %>'], 'dokno-article-content-highlight');</script>
+<% if can_edit? %>
+  <div class="no-print">
+    <hr class="mt-5 mb-10" />
+    <div class="text-right">
+      <button title="Edit article" class="bg-blue-900 text-gray-300 hover:text-white rounded mr-5 py-2 px-3 font-bold text-sm" onclick="location.href='<%= edit_article_path(@article.slug) %>';"><i data-feather="edit-2" class="inline h-5"></i> EDIT</button>
+
+      <% if @article.active %>
+        <button title="Deactivate article" id="article-deactivate-button" class="bg-yellow-700 text-gray-300 hover:text-white rounded mr-5 py-2 px-3 font-bold text-base" onclick="deactivateArticle('<%= @article.slug %>');"><i data-feather="file-minus" class="inline h-5"></i> DEACTIVATE</button>
+      <% else %>
+        <button title="Re-activate article" id="article-activate-button" class="bg-green-700 text-gray-300 hover:text-white rounded mr-5 py-2 px-3 font-bold text-base" onclick="activateArticle('<%= @article.slug %>');"><i data-feather="file-plus" class="inline h-5"></i> RE-ACTIVATE</button>
+      <% end %>
+      <button title="Permanently delete article" class="bg-red-700 text-gray-300 hover:text-white rounded py-2 px-3 font-bold text-base" onclick="deleteArticle('<%= @article.id %>');"><i data-feather="slash" class="inline h-5"></i> DELETE</button>
+    </div>
+  </div>
 <% end %>

data/app/views/dokno/categories/_category_form.html.erb

@@ -28,6 +28,11 @@
 
   <div class="mt-10">
     <button type="submit" class="bg-gray-700 text-gray-300 hover:bg-gray-900 hover:text-white rounded py-2 px-3 font-bold"><i data-feather="check" class="inline h-5"></i> SAVE CATEGORY</button>
-    <span class="text-lg ml-5"><a class="no-underline" href="<%= category.persisted? ? "#{root_path}?id=#{category.id}" : root_path %>">Cancel</a></span>
+    <% if category.persisted? %>
+      <button type="button" class="bg-red-700 text-gray-300 hover:bg-red-900 hover:text-white rounded py-2 px-3 font-bold ml-5" onclick="deleteCategory('<%= category.id %>');"><i data-feather="trash" class="inline h-5"></i> DELETE</button>
+    <% end %>
+    <span class="text-lg ml-5"><a class="no-underline" href="<%= category.persisted? ? "#{dokno.article_index_path(category.code)}" : root_path %>">Cancel</a></span>
   </div>
 </section>
+
+<script> elem('input#name').focus(); </script>

data/app/views/dokno/categories/index.html.erb

@@ -1,20 +1,12 @@
-
-<div class="flex items-center mb-10">
-  <% if Dokno::Category.exists? %>
-    <div class="w-1/2 pr-5">
-      <select name="category" id="category" size="1" class="rounded text-xl shadow-inner bg-gray-100 p-2 w-full max-w-full" onchange="location.href='<%= article_index_path %>' + this.value + '?search_term=' + elem('#search_term').value + '&order=<%= @order %>';">
-        <option value="">Select a category</option>
-        <%= Dokno::Category.select_option_markup(selected_category_codes: [@category&.code]).html_safe %>
-      </select>
-    </div>
-  <% end %>
-  <div class="w-<%= Dokno::Category.exists? ? '1/2 pl-5' : 'full' %>">
-    <%= form_with(url: article_index_path(@category&.code), method: :get) do %>
-      <input type="hidden" name="order" value="<%= @order %>">
-      <input placeholder="Search article content, titles, and slugs" type="text" name="search_term" id="search_term" value="<%= @search_term %>" class="rounded text-xl shadow-inner bg-gray-100 p-2 w-full" />
-    <% end %>
+<% if @category&.parent.present? %>
+  <div class="text-gray-500 mb-5">
+    <div><%= @category.breadcrumb %></div>
   </div>
-</div>
+<% end %>
+
+<% if !current_page?(up_for_review_path) && (Dokno::Category.exists? || Dokno::Article.exists?) %>
+  <%= render 'partials/category_header' %>
+<% end %>
 
 <% if @articles.blank? %>
 
@@ -40,44 +32,55 @@
     </div>
     <div class="w-1/3 text-right">
       <i data-feather="corner-right-down" class="h-5 inline-block" title="Sort order"></i>
-      <a class="ml-3 pb-1 <%= 'border-b-2 border-blue-900' if @order == 'updated' %>" href="?search_term=<%= CGI.escape @search_term.to_s %>&order=updated">Updated</a>
-      <a class="ml-3 pb-1 <%= 'border-b-2 border-blue-900' if @order == 'newest' %>" href="?search_term=<%= CGI.escape @search_term.to_s %>&order=newest">Newest</a>
-      <a class="ml-3 pb-1 <%= 'border-b-2 border-blue-900' if @order == 'views' %>" href="?search_term=<%= CGI.escape @search_term.to_s %>&order=views">Views</a>
-      <a class="ml-3 pb-1 <%= 'border-b-2 border-blue-900' if @order == 'alpha' %>" href="?search_term=<%= CGI.escape @search_term.to_s %>&order=alpha">Title</a>
+      <a id="dokno-order-link-updated" class="ml-3 pb-1 <%= 'border-b-2 border-blue-900' if @order == 'updated' %>" href="?search_term=<%= CGI.escape @search_term.to_s %>&order=updated">Updated</a>
+      <a id="dokno-order-link-newest" class="ml-3 pb-1 <%= 'border-b-2 border-blue-900' if @order == 'newest' %>" href="?search_term=<%= CGI.escape @search_term.to_s %>&order=newest">Newest</a>
+      <a id="dokno-order-link-views" class="ml-3 pb-1 <%= 'border-b-2 border-blue-900' if @order == 'views' %>" href="?search_term=<%= CGI.escape @search_term.to_s %>&order=views">Views</a>
+      <a id="dokno-order-link-alpha" class="ml-3 pb-1 <%= 'border-b-2 border-blue-900' if @order == 'alpha' %>" href="?search_term=<%= CGI.escape @search_term.to_s %>&order=alpha">Title</a>
     </div>
   </div>
 
   <div id="dokno-article-list">
-    <% @articles.each_with_index do |article, i| %>
+    <% @articles.each do |article| %>
       <section class="border-t border-gray-300 py-10 text-xl flex">
         <div class="w-1/3 pr-10">
           <div class="flex">
-            <div class="no-print w-10 text-gray-300"><i data-feather="chevron-right" class="inline-block"></i></div>
+            <div title="<%= 'Starred article' if article.starred %>" class="no-print w-10 text-gray-300"><i data-feather="<%= article.starred ? 'star' : 'chevron-right' %>" class="inline-block"></i></div>
             <div class="w-full">
-              <a class="" href="<%= article_path article.slug %>?search_term=<%= @search_term %>" title="View article"><%= article.title %></a>
+              <a class="dokno-article-title <% unless article.active %>text-gray-500 italic<% end %>" href="<%= article_path article.slug %>?search_term=<%= @search_term %>&cat_code=<%= @category&.code %>&order=<%= @order %>" title="View article"><%= article.title %></a>
             </div>
           </div>
         </div>
         <div class="dokno-article-summary w-2/3 <% unless article.active %>text-gray-500 italic<% end %>">
           <% unless article.active %>
             <div class="bg-yellow-700 p-4 mb-5 rounded text-lg border-t-4 border-yellow-900 text-white font-base not-italic">
-              <i data-feather="alert-circle" class="inline-block"></i> This article is no longer active
+              <i data-feather="info" class="inline-block"></i> This article is no longer active
             </div>
           <% end %>
 
-          <span class="dokno-article-content-highlight"><%= article.summary.presence || 'No summary provided' %></span>
-
-          <div class="text-base mt-2">
-            <div class="text-gray-500"><%= article.category_name_list(context_category_id: @category&.id, order: @order, search_term: @search_term) %></div>
+          <div class="dokno-article-content-highlight mb-2"><%= article.summary.presence || 'No summary provided' %></div>
 
-            <% if @order == 'views' %>
-              <div class="text-gray-500">Viewed <%= number_with_delimiter(article.views, delimiter: ',') %> <%= 'time'.pluralize(article.views) %></div>
-            <% elsif @order == 'updated' %>
-              <div class="text-gray-500">Last updated <%= time_ago_in_words article.updated_at %> ago</div>
-            <% elsif @order == 'newest' %>
-              <div class="text-gray-500">Added <%= time_ago_in_words article.created_at %> ago</div>
-            <% end %>
+          <div class="text-base text-gray-500">
+            <%= article.category_name_list(context_category_id: @category&.id, order: @order, search_term: @search_term) %>
           </div>
+
+          <% unless @order == 'alpha' %>
+            <div class="text-base">
+              <% if @order == 'views' %>
+                <div class="text-gray-500">This article was viewed <%= number_with_delimiter(article.views, delimiter: ',') %> <%= 'time'.pluralize(article.views) %></div>
+              <% elsif @order == 'updated' %>
+                <div class="text-gray-500">This article was last updated <%= time_ago_in_words article.updated_at %> ago</div>
+              <% elsif @order == 'newest' %>
+                <div class="text-gray-500">This article was added <%= time_ago_in_words article.created_at %> ago</div>
+              <% end %>
+            </div>
+          <% end %>
+
+          <% if article.up_for_review? %>
+            <div class="bg-<%= article.review_due_days.negative? ? 'red' : 'gray' %>-800 p-4 mt-5 rounded text-lg border-t-4 border-<%= article.review_due_days.negative? ? 'red' : 'gray' %>-900 text-white font-base not-italic">
+              <i data-feather="bell" class="inline-block mr-1"></i> <%= article.review_due_days_string %>
+            </div>
+          <% end %>
+
         </div>
       </section>
     <% end %>
@@ -91,6 +94,6 @@
   </div>
 <% end %>
 
-<% if @search_term.present? %>
-  <script>highlightTerm(['<%= j @search_term.strip %>'], 'dokno-article-content-highlight');</script>
+<% if @search_term.present? && @articles.blank? %>
+  <script> handleSearchHotKey(); </script>
 <% end %>

data/app/views/layouts/dokno/application.html.erb

@@ -2,6 +2,8 @@
 <html>
 <head>
   <title><%= Dokno.config.app_name %> KNOWLEDGEBASE</title>
+
+  <meta name="viewport" content="width=device-width,initial-scale=1">
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
 
@@ -12,7 +14,7 @@
     var dokno__base_path = '<%= root_path %>';
   </script>
 </head>
-<body class="bg-white font-sans font-light subpixel-antialiased">
+<body class="bg-white font-sans font-light subpixel-antialiased text-lg">
 
   <nav id="dokno-nav-container" class="bg-blue-900 text-white py-10 px-16 text-lg">
     <div class="flex items-center m-auto w-full max-w-screen-xl">
@@ -24,12 +26,12 @@
       <div class="w-2/3 text-right">
         <% if can_edit? %>
           <% if action_name != 'new' %>
-            <button title="Add a new article" class="bg-gray-700 text-gray-300 hover:text-white hover:bg-gray-900 rounded ml-3 py-2 px-3 font-bold text-base" onclick="location.href='<%= new_article_path %>/?category_code=<%= @category&.code %>';"><i data-feather="plus-circle" class="inline h-5"></i> ARTICLE</button>
-            <button title="Add a new category" class="bg-gray-700 text-gray-300 hover:text-white hover:bg-gray-900 rounded ml-3 py-2 px-3 font-bold text-base" onclick="location.href='<%= new_category_path %>/?parent_category_code=<%= @category&.code %>';"><i data-feather="plus-circle" class="inline h-5"></i> CATEGORY</button>
+            <button title="Add a new article" class="bg-gray-700 text-gray-300 hover:text-white hover:bg-gray-900 rounded ml-3 py-2 px-3 font-bold text-base" onclick="location.href='<%= new_article_path %>/?category_code=<%= @category&.code %>';"><i data-feather="plus" class="inline h-5"></i> ARTICLE</button>
+            <button title="Add a new category" class="bg-gray-700 text-gray-300 hover:text-white hover:bg-gray-900 rounded ml-3 py-2 px-3 font-bold text-base" onclick="location.href='<%= new_category_path %>/?parent_category_code=<%= @category&.code %>';"><i data-feather="plus" class="inline h-5"></i> CATEGORY</button>
           <% end %>
 
           <% if @category&.persisted? && action_name != 'edit' %>
-            <button title="Edit this category" class="bg-gray-700 text-gray-100 hover:text-white hover:bg-gray-900 rounded ml-3 py-2 px-3 font-bold text-base" onclick="location.href='<%= edit_category_path(@category) %>';"><i data-feather="edit" class="inline h-5"></i> CATEGORY</button>
+            <button title="Edit this category" class="bg-gray-700 text-gray-100 hover:text-white hover:bg-gray-900 rounded ml-3 py-2 px-3 font-bold text-base" onclick="location.href='<%= edit_category_path(@category) %>';"><i data-feather="edit-2" class="inline h-5"></i> CATEGORY</button>
           <% end %>
         <% end %>
 
@@ -40,12 +42,19 @@
     </div>
   </nav>
 
+  <% flash.each do |type, msg| %>
+    <div class="bg-<%= type %>-800 text-lg text-white font-base py-10 px-16 text-center">
+      <i data-feather="<%= (type == 'green' ? 'smile' : (type == 'yellow' ? 'info' : (type == 'gray' ? 'bell' : 'frown'))) %>" class="inline mr-1"></i>
+      <%= sanitize(msg, tags: %w[a], attributes: %w[href class]) %>
+    </div>
+  <% end %>
+
   <main class="py-10 px-16">
-    <% if @article.blank? && (@category.blank? || @search_term.present?) %>
+    <% if !current_page?(up_for_review_path) && @article.blank? && (@category.blank? || @search_term.present?) %>
       <div class="text-center m-auto mb-10 w-full max-w-screen-xl">
         <% if @search_term.present? %>
           <div class="text-gray-600 text-2xl uppercase">
-            <%= (article_count = @articles.count).positive? ? "#{article_count} #{'article'.pluralize(article_count)}" : 'No articles' %>
+            <%= @total_records.positive? ? "#{@total_records} #{'article'.pluralize(@total_records)}" : 'No articles' %>
             found containing the search term
             <div class="text-4xl leading-tight"><span class="font-serif">&ldquo;</span> <%= @search_term %> <span class="font-serif">&rdquo;</span> </div>
           </div>
@@ -69,16 +78,29 @@
 
   <footer id="dokno-footer-container">
     <% if @article.present? && action_name == 'show' %>
-      <div id="dokno-article-log-container" data-category-id="<%= @category&.id %>" data-article-id="<%= @article&.id %>">
+      <div id="dokno-article-log-container" data-category-id="<%= @category&.id %>" data-article-id="<%= @article.id %>">
         <%= render 'partials/logs', category: @category, article: @article %>
       </div>
     <% end %>
 
+    <% if can_edit? && !current_page?(up_for_review_path) && action_name == 'index' && (up_for_review_count = Dokno::Article.up_for_review.count).positive? %>
+      <div id="dokno-articles-up-for-review-container">
+        <div class="py-10 px-16 bg-gray-900">
+          <div class="w-full max-w-screen-xl m-auto">
+            <div class="text-xl text-white cursor-pointer" onclick="location.href='<%= up_for_review_path %>';">
+              <i data-feather="bell" class="inline mr-1"></i>
+              There <%= "#{up_for_review_count == 1 ? 'is' : 'are'} #{up_for_review_count}" %> <%= 'article'.pluralize(up_for_review_count) %> up for accuracy / relevance review
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
 
     <div class="py-10 px-16 text-gray-400 bg-blue-900">
       <div class="w-full max-w-screen-xl m-auto flex">
         <div class="w-1/2">
-          <a target="_blank" href="https://github.com/cpayne624/dokno" title="Knowledgebase">dokno</a>
+          <i data-feather="github" class="inline mr-1"></i>
+          <a target="_blank" href="https://github.com/cpayne624/dokno" title="Dokno on GitHub">dokno</a>
         </div>
         <div class="w-1/2 text-right">
           <% if user.present? %>
@@ -92,9 +114,12 @@
         </div>
       </div>
     </div>
-
   </footer>
 
   <%= javascript_include_tag 'init' %>
+
+  <% if @search_term.present? %>
+    <script>highlightTerm(['<%= j @search_term.strip %>'], 'dokno-article-content-highlight');</script>
+  <% end %>
 </body>
 </html>

data/app/views/partials/_category_header.html.erb

@@ -0,0 +1,29 @@
+<div class="no-print flex items-center mb-10">
+  <% if Dokno::Category.exists? %>
+    <div class="w-1/2 pr-5">
+      <select aria-label="Category" name="category" id="category" size="1" class="rounded text-xl shadow-inner bg-gray-100 p-2 w-full max-w-full" onchange="applyCategoryCriteria(this.value, elem('#search_term').value, '<%= @order %>');">
+        <option value="">Uncategorized</option>
+
+        <optgroup label="Categories">
+          <% cache Dokno::Category do %>
+            <%= Dokno::Category.select_option_markup.html_safe %>
+          <% end %>
+        </optgroup>
+      </select>
+    </div>
+  <% end %>
+
+  <% if Dokno::Article.exists? %>
+    <div class="relative w-<%= Dokno::Category.exists? ? '1/2 pl-5' : 'full' %>">
+      <i data-feather="search" class="absolute ml-4 mt-3 inline-block text-gray-300" title="Search"></i>
+      <input title="Press / to search" onsearch="applyCategoryCriteria('<%= @category&.code %>', this.value, '<%= @order %>');" onfocus="disableSearchHotkey();" onblur="enableSearchHotkey();" placeholder="Search<%= @category.present? ? ' under this category' : ', hotkey /' %>" type="search" name="search_term" id="search_term" value="<%= @search_term %>" class="pl-12 pr-8 py-2 rounded text-xl shadow-inner bg-gray-100 w-full" />
+      <% if @category.present? %><div title="Press / to search" class="absolute -ml-6 mt-2 inline-block text-gray-300 font-semibold">/</div><% end %>
+    </div>
+  <% end %>
+</div>
+
+<script>
+  // Client-side select of cached select list
+  selectOption('category', '<%= j @category&.code %>');
+  enableSearchHotkey();
+</script>

data/app/views/partials/_form_errors.html.erb

@@ -1,5 +1,4 @@
 <div id="error_explanation" class="bg-white mb-10">
-  <i data-feather="alert-octagon" class="float-right"></i>
   <h2 class="font-semibold">
     There
     <% if errors.count == 1 %>

data/app/views/partials/_logs.html.erb

@@ -2,7 +2,7 @@
   <div class="py-10 px-16 text-gray-200 bg-gray-900">
     <div class="w-full max-w-screen-xl m-auto">
       <div class="text-xl text-gray-600 cursor-pointer" onclick="toggleVisibility('change-log');">
-        Change log for this article
+        Change history for this article
 
         <div class="inline toggle-visibility-indicator-container change-log">
           <i data-feather="chevron-left" class="inline toggle-visibility-indicator change-log"></i>
@@ -20,7 +20,7 @@
                 <% end %>
 
                 <div class="text-gray-500 bg-gray-700 p-5 pr-10 rounded <%= 'cursor-pointer' if log.diff_left != log.diff_right %> flex items-center" onclick="toggleVisibility('article-diff-<%= log.id %>');" title="Show / Hide Diff">
-                  <div class="w-4/5">
+                  <div class="w-<%= log.diff_left != log.diff_right ? '11/12' : 'full' %>">
                     <%= time_ago_in_words log.created_at %> ago
                     <% if log.username.present? %>
                       by <%= log.username %>
@@ -31,9 +31,11 @@
                     <% end %>
                   </div>
 
-                  <div class="w-1/5 text-right toggle-visibility-indicator-container article-diff-<%= log.id %>">
-                    <% if log.diff_left != log.diff_right %><i data-feather="chevron-left" class="inline toggle-visibility-indicator article-diff-<%= log.id %>"></i><% end %>
-                  </div>
+                  <% if log.diff_left != log.diff_right %>
+                    <div class="w-1/12 text-right toggle-visibility-indicator-container article-diff-<%= log.id %>">
+                      <i data-feather="chevron-left" class="inline toggle-visibility-indicator article-diff-<%= log.id %>"></i>
+                    </div>
+                  <% end %>
                 </div>
 
                 <% if log.diff_left != log.diff_right %>

data/app/views/partials/_pagination.html.erb

@@ -1,29 +1,31 @@
-<span class="mr-5">
-  <% if @page > 1 %>
-    <span class="mr-1 inline-block"><a href="?search_term=<%= CGI.escape @search_term.to_s %>&order=<%= @order %>&page=<%= (@page - 1) %>"><i data-feather="arrow-left" class="h-5 inline-block" title="Previous page"></i></a></span>
-  <% end %>
+<% if @total_pages > 1 %>
+  <span class="mr-5">
+    <% if @page > 1 %>
+      <span class="mr-1 inline-block"><a href="?search_term=<%= CGI.escape @search_term.to_s %>&order=<%= @order %>&page=<%= (@page - 1) %>"><i data-feather="arrow-left" class="h-5 inline-block" title="Previous page"></i></a></span>
+    <% end %>
 
-  <span class="mr-1 inline-block">Page</span>
+    <span class="mr-1 inline-block">Page</span>
 
-  <%= form_with(url: article_index_path, method: :get, class: 'inline') do %>
-    <input type="hidden" name="id" value="<%= @category&.id %>">
-    <input type="hidden" name="search_term" value="<%= @search_term %>">
-    <input type="hidden" name="order" value="<%= @order %>">
-    <input type="text" name="page" id="page" value="<%= @page %>" onclick="this.select();" class="w-10 text-center bg-gray-200 rounded" />
+    <%= form_with(url: article_index_path(@category&.code), method: :get, class: 'inline') do %>
+      <input type="hidden" name="search_term" value="<%= @search_term %>">
+      <input type="hidden" name="order" value="<%= @order %>">
+      <input aria-label="Page" type="text" name="page" value="<%= @page %>" onclick="this.select();" class="w-10 text-center bg-gray-200 rounded" />
 
-    <span class="mx-1 inline-block">of</span>
-    <span class="text-center inline-block"><%= @total_pages %></span>
-  <% end %>
+      <span class="mx-1 inline-block">of</span>
+      <span class="text-center inline-block"><%= @total_pages %></span>
+    <% end %>
 
-  <% if @page < @total_pages %>
-    <span class="ml-1 inline-block"><a href="?search_term=<%= CGI.escape @search_term.to_s %>&order=<%= @order %>&page=<%= (@page + 1) %>"><i data-feather="arrow-right" class="h-5 inline-block" title="Next page"></i></a></span>
-  <% end %>
-</span>
+    <% if @page < @total_pages %>
+      <span class="ml-1 inline-block"><a href="?search_term=<%= CGI.escape @search_term.to_s %>&order=<%= @order %>&page=<%= (@page + 1) %>"><i data-feather="arrow-right" class="h-5 inline-block" title="Next page"></i></a></span>
+    <% end %>
+  </span>
+<% end %>
 
 <span class="text-gray-400">
   <%= @total_records %>
-  <%= 'uncategorized' if @category.blank? && @search_term.blank? %>
+  <%= 'uncategorized' if !current_page?(up_for_review_path) && @category.blank? && @search_term.blank? %>
   <%= 'article'.pluralize(@total_records) %>
+  <%= 'up for review' if current_page?(up_for_review_path) %>
 
   <% if @search_term.present? %>
     containing <span class="font-serif">&ldquo;</span><%= @search_term %><span class="font-serif">&rdquo;</span>