dokno 1.0.0 → 1.3.0

data/app/models/dokno/category.rb

@@ -20,6 +20,8 @@ module Dokno
 
     before_validation :set_code
 
+    scope :alpha_order, -> { order(:name) }
+
     # The display breadcrumb for the Category
     def breadcrumb
       crumbs = [name]
@@ -43,18 +45,18 @@ 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
       self.class.branch(parent_category_id: id)
     end
 
+    # Used to invalidate the fragment cache of the hierarchical category select options
+    def self.cache_key
+      [maximum(:updated_at), Article.maximum(:updated_at)].compact.max
+    end
+
     # The given Category and all child Categories. Useful for filtering associated articles.
     def self.branch(parent_category_id:, at_top: true)
       return if parent_category_id.blank?
@@ -71,19 +73,41 @@ module Dokno
       categories.flatten
     end
 
-    # HTML markup for Category SELECT field OPTION lists
-    def self.select_option_markup(selected_category_codes: nil, exclude_category_id: nil)
-      breadcrumbs = all
-        .reject { |category| category.id == exclude_category_id.to_i }
-        .map { |category| { code: category.code, name: category.breadcrumb } }
-      breadcrumbs.sort_by { |category_hash| category_hash[:name] }.map do |category_hash|
-        selected = selected_category_codes&.include?(category_hash[:code])
-        %(<option value="#{category_hash[:code]}" #{'selected="selected"' if selected}>#{category_hash[:name]}</option>)
-      end.join
+    def self.select_option_markup(selected_category_codes: nil, exclude_category_id: 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)
+        )
+      end
+
+      options.join
     end
 
     private
 
+    def self.option_markup(category:, selected_category_codes:, exclude_category_id:, level: 0)
+      return '' if category.id == exclude_category_id
+
+      selected = selected_category_codes&.include?(category.code)
+      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
     def circular_parent_check
       return unless persisted? && id.to_i == category_id.to_i

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

@@ -1,9 +1,9 @@
 <style>
   /* Article formatting */
   .dokno-article-content-markup {
-    font-weight: 300;
-    line-height: 1.75rem;
-    font-size: 1rem;
+    font-weight: 400;
+    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,29 +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: 2rem;
+    font-size: 1.625em;
   }
 
   .dokno-article-content-markup h2 {
-    font-size: 1.625rem;
+    font-size: 1.25em;
   }
 
-  .dokno-article-content-markup h3 {
-    font-size: 1.25rem;
-  }
-
-  .dokno-article-content-markup h4 {
-    font-size: 1rem;
+  .dokno-article-content-markup h3,
+  .dokno-article-content-markup h4,
+  .dokno-article-content-markup h5,
+  .dokno-article-content-markup h6 {
+    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,
@@ -76,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/_article_panel.html.erb

@@ -13,13 +13,6 @@
 
 <!-- Slide-out panel markup -->
 <div id="dokno-panel-container">
-  <div id="dokno-panel-close" class="dokno-hidden">
-    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="#eee" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle">
-      <circle cx="12" cy="12" r="10"></circle>
-      <line x1="15" y1="9" x2="9" y2="15"></line>
-      <line x1="9" y1="9" x2="15" y2="15"></line>
-    </svg>
-  </div>
   <div id="dokno-panel-title"></div>
   <div id="dokno-panel-summary"></div>
   <div id="dokno-panel-markdown" class="dokno-article-content-markup"></div>
@@ -29,10 +22,12 @@
 <!-- Slide-out panel behavior -->
 <script>
   function doknoOpenPanel(slug) {
-    if (slug == dokno__slug) {
-      doknoClosePanel();
-      return true;
-    }
+    if (slug == dokno__slug) { return true; }
+
+    // Set flag to avoid flicker when closing the panel before opening the panel
+    dokno__link_just_clicked = true;
+    setTimeout(function() { dokno__link_just_clicked = false; }, 200);
+
     dokno__slug = slug;
 
     // Can't use fetch API; IE
@@ -62,11 +57,9 @@
         dokno__panel.classList.add('open');
         document.body.classList.add('dokno-no-scroll');
 
-        // Reveal fixed close icon
-        setTimeout(function() { dokno__close.classList.remove('dokno-hidden'); }, 200);
-
         // Close on escape
         document.addEventListener('keydown', dokno__keydown_listener, false);
+        document.addEventListener('click', dokno__click_listener, false);
       }
     };
 
@@ -74,10 +67,13 @@
   }
 
   function doknoClosePanel() {
-    dokno__close.classList.add('dokno-hidden');
+    // Just clicked a link to open a panel, so don't close to avoid flicker
+    if (dokno__link_just_clicked) { return true; }
+
     dokno__panel.classList.remove('open');
     document.body.classList.remove('dokno-no-scroll');
     document.removeEventListener('keydown', dokno__keydown_listener, false);
+    document.removeEventListener('click', dokno__click_listener, false);
 
     dokno__slug = null;
   }
@@ -96,7 +92,6 @@
   }
 
   const dokno__panel          = document.getElementById('dokno-panel-container');
-  const dokno__close          = document.querySelector('div#dokno-panel-close');
   const dokno__panel_title    = document.getElementById('dokno-panel-title');
   const dokno__panel_summary  = document.getElementById('dokno-panel-summary');
   const dokno__panel_footer   = document.getElementById('dokno-panel-footer');
@@ -106,7 +101,10 @@
     if (e.key === 'Escape') { doknoClosePanel(); }
   }
 
-  dokno__close.onclick = function() { doknoClosePanel(); }
+  const dokno__click_listener = function(e) {
+    var isClickInside = dokno__panel.contains(e.target);
+    if (!isClickInside) { doknoClosePanel(); }
+  }
 
-  var dokno__id, dokno__slug;
+  var dokno__id, dokno__slug, dokno__link_just_clicked;
 </script>

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

@@ -9,87 +9,77 @@
 
   div#dokno-panel-container {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    right: -600px;
-    z-index: 9999;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    width: 600px;
-    max-width: 100vw;
-    overflow: hidden;
-    overflow-y: auto;
-    background-color: #fff;
-    color: #2d3748;
-    transition: all .15s ease-in-out;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    font-size: 1rem !important;
+    line-height: 1.5rem !important;
+    right: -600px !important;
+    z-index: 9999 !important;
+    position: fixed !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    width: 600px !important;
+    max-width: 100vw !important;
+    overflow: hidden !important;
+    overflow-y: auto !important;
+    background-color: #fff !important;
+    color: #2d3748 !important;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
   }
 
   div#dokno-panel-container.open {
-    right: 0;
-  }
-
-  div#dokno-panel-close {
-    position: fixed;
-    background-color: transparent;
-    color: #222;
-    cursor: pointer;
-    top: 1.5rem;
-    right: 2.5rem;
+    right: 0 !important;
   }
 
   div#dokno-panel-title {
-    padding: 2.5rem;
-    font-size: 2.25rem;
-    line-height: 2.75rem;
-    font-weight: 300;
-    background-color: rgb(42,67,101);
-    color: #ebf8ff;
+    padding: 2.5rem !important;
+    font-size: 2.25rem !important;
+    line-height: 2.75rem !important;
+    font-weight: 600 !important;
+    background-color: rgb(42,67,101) !important;
+    color: #ebf8ff !important;
   }
 
   div#dokno-panel-title div#article-deprecated-alert {
-    font-size: 1rem;
-    line-height: 1.5rem;
-    padding: 1rem;
-    margin-bottom: 1rem;
-    border-top-width: 4px;
-    border-radius: .25rem;
-    border-top-style: solid;
-    border-color: rgb(116,66,16);
-    background-color: rgb(183,121,31);
-    color: rgb(255,255,255);
+    font-size: 1rem !important;
+    line-height: 1.5rem !important;
+    padding: 1rem !important;
+    margin-bottom: 1rem !important;
+    border-top-width: 4px !important;
+    border-radius: .25rem !important;
+    border-top-style: solid !important;
+    border-color: rgb(116,66,16) !important;
+    background-color: rgb(183,121,31) !important;
+    color: rgb(255,255,255) !important;
   }
 
   div#dokno-panel-title > span,
   div#dokno-panel-footer > svg {
-    cursor: pointer;
+    cursor: pointer !important;
   }
 
   div#dokno-panel-summary {
-    font-size: 1.5rem;
-    line-height: 2.25rem;
-    padding: 2.5rem;
-    font-weight: 300;
+    font-size: 1.5rem !important;
+    line-height: 2.25rem !important;
+    padding: 2.5rem !important;
+    font-weight: 400 !important;
   }
 
   div#dokno-panel-markdown {
-    padding: 2.5rem;
-    background-color: #f7fafc;
+    padding: 2.5rem !important;
+    background-color: #f7fafc !important;
   }
 
   div#dokno-panel-footer {
-    text-align: center;
-    position: relative;
-    padding: 2.5rem;
-    color: #999;
-    background-color: #edf2f7;
-    font-weight: 300;
-    font-size: 1rem;
-    line-height: 1.5rem;
+    text-align: center !important;
+    position: relative !important;
+    padding: 2.5rem !important;
+    color: #999 !important;
+    background-color: #edf2f7 !important;
+    font-weight: 400 !important;
+    font-size: 1rem !important;
+    line-height: 1.5rem !important;
   }
 
   div#dokno-panel-footer p {
-    margin: .5rem 0;
+    margin: .5rem 0 !important;
   }
 </style>

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>
@@ -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,14 +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();
+  setReviewForm();
+</script>