dokno 1.1.1 → 1.4.1

data/app/models/dokno/category.rb

@@ -1,41 +1,33 @@
 module Dokno
   class Category < ApplicationRecord
-    belongs_to :parent,
-      class_name: 'Dokno::Category',
-      primary_key: 'id',
-      foreign_key: 'category_id',
-      optional: true,
-      inverse_of: :children
-    has_many :children,
-      class_name: 'Dokno::Category',
-      primary_key: 'id',
-      foreign_key: 'category_id',
-      dependent: :nullify,
-      inverse_of: :parent
+    belongs_to :parent, class_name: 'Dokno::Category', primary_key: 'id', foreign_key: 'category_id', inverse_of: :children, optional: true
+    has_many :children, class_name: 'Dokno::Category', primary_key: 'id', foreign_key: 'category_id', inverse_of: :parent, dependent: :nullify
 
     has_and_belongs_to_many :articles
 
+    before_validation :set_code
     validates :name, :code, presence: true, uniqueness: true
     validate :circular_parent_check
 
-    before_validation :set_code
-
     scope :alpha_order, -> { order(:name) }
 
-    # The display breadcrumb for the Category
-    def breadcrumb
-      crumbs = [name]
+    def breadcrumb(**args)
+      crumbs = [(category_link(self, args) unless args[:hide_self])]
       parent_category_id = category_id
 
       loop do
         break if parent_category_id.blank?
 
-        parent_category = self.class.find(parent_category_id)
-        crumbs.prepend parent_category.name
+        parent_category = Category.find(parent_category_id)
+        crumbs.prepend category_link(parent_category, args)
         parent_category_id = parent_category.category_id
       end
 
-      crumbs.join(' > ')
+      crumbs.compact.join("&nbsp;&nbsp;>&nbsp;&nbsp;").html_safe
+    end
+
+    def category_link(category, args={})
+      %(<a href="#{article_index_path(category.code)}?search_term=#{CGI.escape(args[:search_term].to_s)}&order=#{CGI.escape(args[:order].to_s)}">#{category.name}</a>)
     end
 
     # All Articles in the Category, including all child Categories
@@ -45,12 +37,7 @@ module Dokno
         .joins(:categories)
         .where(dokno_categories: { id: self.class.branch(parent_category_id: id).pluck(:id) })
 
-      records = records.updated_order if order == :updated
-      records = records.newest_order  if order == :newest
-      records = records.view_order    if order == :views
-      records = records.alpha_order   if order == :alpha
-
-      records
+      Article.apply_sort(records, order: order)
     end
 
     def branch
@@ -59,7 +46,7 @@ module Dokno
 
     # Used to invalidate the fragment cache of the hierarchical category select options
     def self.cache_key
-      maximum :updated_at
+      [maximum(:updated_at), Article.maximum(:updated_at)].compact.max
     end
 
     # The given Category and all child Categories. Useful for filtering associated articles.
@@ -78,26 +65,14 @@ module Dokno
       categories.flatten
     end
 
-    def self.select_option_markup(selected_category_codes: nil, exclude_category_id: nil, context_category: nil, level: 0)
+    def self.select_option_markup(selected_category_codes: nil, context_category: nil, level: 0)
       return '' if level.positive? && context_category.blank?
 
       options = []
       level_categories = where(category_id: context_category&.id).alpha_order
-
       level_categories.each do |category|
-        options << option_markup(
-          category:                category,
-          selected_category_codes: selected_category_codes,
-          exclude_category_id:     exclude_category_id,
-          level:                   level
-        )
-
-        options << select_option_markup(
-          selected_category_codes: selected_category_codes,
-          exclude_category_id:     exclude_category_id,
-          context_category:        category,
-          level:                   (level + 1)
-        )
+        options << option_markup(category: category, selected_category_codes: selected_category_codes, level: level)
+        options << select_option_markup(selected_category_codes: selected_category_codes, context_category: category, level: (level + 1))
       end
 
       options.join
@@ -105,11 +80,10 @@ module Dokno
 
     private
 
-    def self.option_markup(category:, selected_category_codes:, exclude_category_id:, level: 0)
-      return '' if category.id == exclude_category_id
-
+    def self.option_markup(category:, selected_category_codes:, level: 0)
       selected = selected_category_codes&.include?(category.code)
-      %(<option value="#{category.code}" #{'selected="selected"' if selected}>#{('&nbsp;&nbsp;' * level)}#{category.name}</option>)
+      article_count = category.articles_in_branch.size
+      %(<option value="#{category.code}" #{'selected="selected"' if selected}>#{('&nbsp;&nbsp;' * level)}#{category.name}#{' (' + article_count.to_s + ')' if article_count.positive?}</option>)
     end
 
     # Never allow setting of parent to self

data/app/views/dokno/_article_formatting.html.erb

@@ -2,8 +2,8 @@
   /* Article formatting */
   .dokno-article-content-markup {
     font-weight: 400;
-    line-height: 1.75rem;
-    font-size: 1rem;
+    line-height: 1.75em;
+    font-size: 1em;
   }
 
   .dokno-article-content-markup code {
@@ -23,7 +23,7 @@
   .dokno-article-content-markup ol,
   .dokno-article-content-markup hr,
   .dokno-article-content-markup table {
-    margin-bottom: 1.25rem;
+    margin-bottom: 1.25em;
   }
 
   .dokno-article-content-markup h1,
@@ -32,28 +32,28 @@
   .dokno-article-content-markup h4,
   .dokno-article-content-markup h5,
   .dokno-article-content-markup h6 {
-    margin-bottom: 1.25rem;
+    margin-bottom: 1.25em;
     font-weight: 600;
   }
 
   .dokno-article-content-markup h1 {
-    font-size: 1.625rem;
+    font-size: 1.625em;
   }
 
   .dokno-article-content-markup h2 {
-    font-size: 1.25rem;
+    font-size: 1.25em;
   }
 
   .dokno-article-content-markup h3,
   .dokno-article-content-markup h4,
   .dokno-article-content-markup h5,
   .dokno-article-content-markup h6 {
-    font-size: 1rem;
+    font-size: 1em;
   }
 
   .dokno-article-content-markup blockquote {
     border-left: 4px solid #edf2f7;
-    padding-left: 1.25rem;
+    padding-left: 1.25em;
   }
 
   .dokno-article-content-markup ul,
@@ -75,10 +75,10 @@
 
   .dokno-article-content-markup table th,
   .dokno-article-content-markup table td {
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
+    padding-left: 1em;
+    padding-right: 1em;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
     font-weight: normal;
   }
 

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

@@ -3,8 +3,31 @@
 <section class="mb-10">
 
   <div class="text-2xl mb-5 text-gray-500"><%= article.persisted? ? 'Edit' : 'New' %> Article</div>
-  <h1 class="text-4xl mb-5 leading-tight font-light"><%= article.title %></h1>
-  <hr class="mb-5" />
+  <h1 class="text-4xl leading-tight font-light"><%= article.title %></h1>
+  <hr class="mt-8 mb-10" />
+
+  <% if article.up_for_review? %>
+    <div class="bg-gray-800 text-gray-100 rounded mb-10">
+      <h2 class="bg-gray-900 p-10 rounded-t text-2xl leading-tight font-light">Review for Accuracy / Relevance</h2>
+
+      <div class="flex p-10">
+        <div class="w-1/2 pr-5">
+          <div>
+            <span class="text-lg font-semibold"><label for="reset_review_date">Reset the next review date?</label></span>
+            <input onchange="setReviewForm();" type="checkbox" name="reset_review_date" id="reset_review_date" value="true" class="ml-2 text-lg" <%= "checked='checked'" if @reset_review_date %> />
+          </div>
+          <div class="text-gray-400">
+            <%= article.review_due_days_string %>.
+            Check the box above to mark this article as reviewed and reset the next review date to <span class="px-2 py-1 bg-gray-900 rounded text-white font-semibold"><%= "#{Date.today + Dokno.config.article_review_period}" %></span>
+          </div>
+        </div>
+        <div class="w-1/2">
+          <div class="text-lg font-semibold"><label for="review_notes">Reviewer Notes</label></div>
+          <textarea placeholder="Any review notes here will be added to the change history for this article" name="review_notes" id="review_notes" class="rounded text-xl shadow-inner bg-gray-100 p-3 mt-2 w-full text-gray-900" rows="2"><%= @review_notes %></textarea>
+        </div>
+      </div>
+    </div>
+  <% end %>
 
   <div class="mb-5">
     <div class="text-lg font-semibold"><label for="slug">Slug</label></div>
@@ -13,9 +36,9 @@
   </div>
 
   <% if Dokno::Category.exists? %>
-    <div class="mb-5">
-      <div class="text-lg font-semibold"><label for="category_id"><%= 'Category'.pluralize article.categories.count %></label></div>
-      <select name="category_code[]" id="category_code" multiple="multiple" size="<%= (cat_count = Dokno::Category.count) <= 4 ? (cat_count + 1).to_s : '5' %>" class="rounded text-xl shadow-inner bg-gray-100 p-2 w-full mt-2 w-full max-w-full">
+    <div class="mb-5 w-2/3">
+      <div class="text-lg font-semibold"><label for="category_code"><%= 'Category'.pluralize article.categories.count %></label></div>
+      <select name="category_code[]" id="category_code" multiple="multiple" size="<%= (cat_count = Dokno::Category.count) <= 9 ? (cat_count + 1).to_s : '10' %>" class="rounded text-xl shadow-inner bg-gray-100 p-2 w-full mt-2 w-full max-w-full">
         <option></option>
         <%= Dokno::Category.select_option_markup(selected_category_codes: @category_codes).html_safe %>
       </select>
@@ -27,7 +50,7 @@
     </div>
   <% end %>
 
-  <hr class="mb-5" />
+  <hr class="my-10" />
 
   <div class="mb-5">
     <div class="text-lg font-semibold"><label for="title">Title</label></div>
@@ -47,16 +70,32 @@
       <a id="markdown_write_link" href="javascript:;" onclick="writeArticleToggle();" class="float-right hidden"><i data-feather="pen-tool" class="inline"></i> Write</a>
       <a id="markdown_preview_link" href="javascript:;" onclick="previewArticleToggle();" class="float-right"><i data-feather="eye" class="inline"></i> Preview</a>
     </div>
-    <textarea placeholder="Full article content" name="markdown" id="markdown" class="rounded text-xl shadow-inner bg-gray-100 p-3 mt-2 w-full" rows="10"><%= article.persisted? ? article.markdown : (article.markdown.presence || @template) %></textarea>
+    <textarea placeholder="Full article content" name="markdown" id="markdown" class="rounded text-xl shadow-inner bg-gray-100 p-3 mt-2 w-full" rows="20"><%= article.persisted? ? article.markdown : (article.markdown.presence || @template) %></textarea>
     <div id="markdown_preview" class="dokno-article-content-markup hidden text-lg overflow-hidden overflow-y-auto rounded p-10 mt-2 bg-gray-100 shadow-inner"></div>
     <div class="text-gray-500 mt-2">Detailed documentation of the described topic. Basic HTML &amp; <a target="_blank" href="https://commonmark.org/help/" title="Markdown formatting examples">markdown</a> OK.</div>
   </div>
 
-  <div class="mt-10">
+  <div class="mb-5">
+    <div>
+      <span class="text-lg font-semibold"><label for="starred">Starred article?</label></span>
+      <input type="hidden" name="starred" value="false" />
+      <input type="checkbox" name="starred" id="starred" value="true" class="ml-2 text-lg" <%= "checked='checked'" if article.starred %> />
+    </div>
+    <div class="text-gray-400">
+      Starred articles are always listed first when browsing.
+    </div>
+  </div>
+
+  <hr class="my-10" />
+
+  <div class="text-right">
+    <span class="text-lg mr-5"><a class="no-underline" href="<%= article.persisted? ? article_path(article.slug) : root_path %>">Cancel</a></span>
     <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 ARTICLE</button>
-    <span class="text-lg ml-5"><a class="no-underline" href="<%= article.persisted? ? article_path(article.slug) : root_path %>">Cancel</a></span>
   </div>
 
 </section>
 
-<script> elem('input#slug').focus(); </script>
+<script>
+  elem('input#slug').focus();
+  setReviewForm();
+</script>

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

@@ -1,34 +1,37 @@
 <%= render 'dokno/article_formatting' %>
 
-<section>
-  <% if @article.categories.present? %>
-    <div class="text-gray-500 mb-5">
-      <% @article.categories.each do |category| %>
-        <div><a href="<%= article_index_path(category.code) %>"><%= category.breadcrumb %></a></div>
+<% if @category.present? %>
+  <div class="no-print text-gray-500 mb-5">
+    <div>
+      <% if request.referrer&.include? article_index_path %>
+        <a class="fixed left-0 ml-6" title="Back" href="javascript:history.back();"><i data-feather="chevrons-left" class="text-gray-300 h-5 align-text-bottom inline"></i></a>
       <% end %>
+      <span class="text-gray-500 mr-1">Under</span> <%= @category.breadcrumb(search_term: @search_term, order: @order) %>
     </div>
-  <% end %>
+  </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
@@ -39,7 +42,7 @@
         </div>
 
         <div class="mt-5 flex no-print">
-          <div class="no-print w-8"><i data-feather="eye" class="inline-block h-5"></i></div>
+          <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: ',') %>
@@ -48,7 +51,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 %>
@@ -58,7 +61,7 @@
 
         <% if @article.reading_time.present? %>
           <div class="mt-5 flex no-print">
-            <div class="no-print w-8"><i data-feather="watch" class="inline-block h-5"></i></div>
+            <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 %>
@@ -67,7 +70,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>
@@ -76,7 +79,7 @@
 
         <% if can_edit? %>
           <div class="mt-5 flex no-print">
-            <div class="no-print w-8"><i data-feather="crosshair" class="inline-block h-5"></i></div>
+            <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>
@@ -93,12 +96,11 @@
           </div>
         <% end %>
 
-        <% if @article.categories.exists? %>
+        <% 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"></i></div>
+            <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 %>
@@ -118,21 +120,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="setArticleStatus('<%= @article.slug %>', false);"><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="setArticleStatus('<%= @article.slug %>', true);"><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

@@ -10,13 +10,20 @@
   </div>
 
   <% if Dokno::Category.exists? %>
-    <div class="mb-5">
+    <div class="mb-5 w-1/2">
       <div class="text-lg font-semibold"><label for="parent_category_code">Parent Category</label></div>
-      <select name="parent_category_code" id="parent_category_code" class="rounded text-xl shadow-inner bg-gray-100 p-2 mt-2 w-1/2 max-w-full">
-        <option></option>
-        <%= Dokno::Category.select_option_markup(selected_category_codes: [@parent_category_code], exclude_category_id: category.id).html_safe %>
+
+      <select name="parent_category_code" id="parent_category_code" size="1" class="rounded text-xl shadow-inner bg-gray-100 p-2 w-full max-w-full">
+        <option value="">No Parent Category</option>
+
+        <optgroup label="Categories">
+          <% cache Dokno::Category do %>
+            <%= Dokno::Category.select_option_markup.html_safe %>
+          <% end %>
+        </optgroup>
       </select>
-      <div class="text-gray-500 mt-2 w-1/2">
+
+      <div class="text-gray-500 mt-2">
         The existing category to which this category belongs.
         <% if (article_count = category.articles.count).positive? %>
           There <%= article_count > 1 ? "are #{article_count} articles" : 'is an article' %> currently in this category.
@@ -35,4 +42,8 @@
   </div>
 </section>
 
-<script> elem('input#name').focus(); </script>
+<script>
+  // Client-side select of cached select list
+  selectOption('parent_category_code', '<%= j @parent_category_code %>');
+  elem('input#name').focus();
+</script>