dokno 1.0.0

data/app/models/dokno/article_slug.rb

@@ -0,0 +1,7 @@
+module Dokno
+  class ArticleSlug < ApplicationRecord
+    belongs_to :article
+
+    validates :slug, presence: true
+  end
+end

data/app/models/dokno/category.rb

@@ -0,0 +1,100 @@
+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
+
+    has_and_belongs_to_many :articles
+
+    validates :name, :code, presence: true, uniqueness: true
+    validate :circular_parent_check
+
+    before_validation :set_code
+
+    # The display breadcrumb for the Category
+    def breadcrumb
+      crumbs = [name]
+      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_id = parent_category.category_id
+      end
+
+      crumbs.join(' > ')
+    end
+
+    # All Articles in the Category, including all child Categories
+    def articles_in_branch(order: :updated)
+      records = Article
+        .includes(:categories_dokno_articles, :categories)
+        .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
+    end
+
+    def branch
+      self.class.branch(parent_category_id: id)
+    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?
+
+      categories = []
+      parent_category = find(parent_category_id)
+      child_categories = parent_category.children.to_a
+
+      child_categories.each do |child_category|
+        categories << child_category << branch(parent_category_id: child_category.id, at_top: false)
+      end
+
+      categories.prepend parent_category if at_top
+      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
+    end
+
+    private
+
+    # Never allow setting of parent to self
+    def circular_parent_check
+      return unless persisted? && id.to_i == category_id.to_i
+
+      errors.add(:category_id, "can't set parent to self")
+    end
+
+    def set_code
+      return unless name.present?
+
+      self.code = name.downcase.strip.gsub(' ', '-').gsub(/[^\w-]/, '')
+    end
+  end
+end

data/app/models/dokno/log.rb

@@ -0,0 +1,7 @@
+module Dokno
+  class Log < ApplicationRecord
+    belongs_to :article
+
+    default_scope { order(created_at: :desc) }
+  end
+end

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

@@ -0,0 +1,89 @@
+<style>
+  /* Article formatting */
+  .dokno-article-content-markup {
+    font-weight: 300;
+    line-height: 1.75rem;
+    font-size: 1rem;
+  }
+
+  .dokno-article-content-markup code {
+    font-size: 80%;
+    background-color: #eee;
+    padding: 3px 5px;
+    border-radius: 3px;
+  }
+
+  .dokno-article-content-markup b,
+  .dokno-article-content-markup strong {
+    font-weight: 500;
+  }
+
+  .dokno-article-content-markup p,
+  .dokno-article-content-markup ul,
+  .dokno-article-content-markup ol,
+  .dokno-article-content-markup hr,
+  .dokno-article-content-markup table {
+    margin-bottom: 1.25rem;
+  }
+
+  .dokno-article-content-markup h1,
+  .dokno-article-content-markup h2,
+  .dokno-article-content-markup h3,
+  .dokno-article-content-markup h4,
+  .dokno-article-content-markup h5,
+  .dokno-article-content-markup h6 {
+    margin-bottom: 1.25rem;
+    font-weight: 600;
+  }
+
+  .dokno-article-content-markup h1 {
+    font-size: 2rem;
+  }
+
+  .dokno-article-content-markup h2 {
+    font-size: 1.625rem;
+  }
+
+  .dokno-article-content-markup h3 {
+    font-size: 1.25rem;
+  }
+
+  .dokno-article-content-markup h4 {
+    font-size: 1rem;
+  }
+
+  .dokno-article-content-markup blockquote {
+    border-left: 4px solid #edf2f7;
+    padding-left: 1.25rem;
+  }
+
+  .dokno-article-content-markup ul,
+  .dokno-article-content-markup ol {
+    list-style-position: inside;
+  }
+
+  .dokno-article-content-markup ul {
+    list-style-type: disc;
+  }
+
+  .dokno-article-content-markup ol {
+    list-style-type: decimal;
+  }
+
+  .dokno-article-content-markup table {
+    table-layout: auto;
+  }
+
+  .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;
+    font-weight: normal;
+  }
+
+  .dokno-article-content-markup table td {
+    border-width: 1px;
+  }
+</style>

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

@@ -0,0 +1,112 @@
+<!-- DOKNO SLIDE-OUT PANEL                                                                             -->
+<!-- This file is injected into the host layout when included via render ` 'dokno/article_panel' `.    -->
+<!-- It provides the necessary markup, CSS, and JS to support in-context flyout article panels.        -->
+
+<!-- Reset styles -->
+<%= render 'dokno/reset_formatting' %>
+
+<!-- Slide-out panel styles -->
+<%= render 'dokno/panel_formatting' %>
+
+<!-- Article content styles -->
+<%= render 'dokno/article_formatting' %>
+
+<!-- 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>
+  <div id="dokno-panel-footer"></div>
+</div>
+
+<!-- Slide-out panel behavior -->
+<script>
+  function doknoOpenPanel(slug) {
+    if (slug == dokno__slug) {
+      doknoClosePanel();
+      return true;
+    }
+    dokno__slug = slug;
+
+    // Can't use fetch API; IE
+    const request = new XMLHttpRequest();
+
+    request.open('GET', '<%= Dokno::Engine.routes.url_helpers.root_path %>article_panel/' + slug, true);
+    request.onload = function() {
+      if (request.readyState == 4 && request.status == 200) {
+        try {
+          var data = JSON.parse(request.responseText);
+        } catch(err) {
+          console.log("Dokno: " + err.message + " in " + request.responseText);
+          return;
+        }
+
+        // Populate panel
+        dokno__id                       = data.id;
+        dokno__panel_title.innerHTML    = data.title;
+        dokno__panel_summary.innerHTML  = data.summary;
+        dokno__panel_footer.innerHTML   = data.footer;
+        dokno__panel_markdown.innerHTML = data.markdown;
+
+        doknoRevealAppropriatePanelSections(data);
+
+        // Reveal panel
+        dokno__panel.scrollTop = 0;
+        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);
+      }
+    };
+
+    request.send();
+  }
+
+  function doknoClosePanel() {
+    dokno__close.classList.add('dokno-hidden');
+    dokno__panel.classList.remove('open');
+    document.body.classList.remove('dokno-no-scroll');
+    document.removeEventListener('keydown', dokno__keydown_listener, false);
+
+    dokno__slug = null;
+  }
+
+  function doknoRevealAppropriatePanelSections(data) {
+    const markdown_classes = dokno__panel_markdown.classList;
+    const summary_classes  = dokno__panel_summary.classList;
+
+    if (data.markdown != '') {
+      markdown_classes.remove('dokno-hidden');
+      if (data.summary == '') { summary_classes.add('dokno-hidden'); } else { summary_classes.remove('dokno-hidden'); }
+    } else {
+      markdown_classes.add('dokno-hidden');
+      summary_classes.remove('dokno-hidden');
+    }
+  }
+
+  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');
+  const dokno__panel_markdown = document.getElementById('dokno-panel-markdown');
+
+  const dokno__keydown_listener = function(e) {
+    if (e.key === 'Escape') { doknoClosePanel(); }
+  }
+
+  dokno__close.onclick = function() { doknoClosePanel(); }
+
+  var dokno__id, dokno__slug;
+</script>

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

@@ -0,0 +1,95 @@
+<style>
+  .dokno-no-scroll {
+    overflow: hidden !important;
+  }
+
+  .dokno-hidden {
+    display: none !important;
+  }
+
+  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);
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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);
+  }
+
+  div#dokno-panel-title > span,
+  div#dokno-panel-footer > svg {
+    cursor: pointer;
+  }
+
+  div#dokno-panel-summary {
+    font-size: 1.5rem;
+    line-height: 2.25rem;
+    padding: 2.5rem;
+    font-weight: 300;
+  }
+
+  div#dokno-panel-markdown {
+    padding: 2.5rem;
+    background-color: #f7fafc;
+  }
+
+  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;
+  }
+
+  div#dokno-panel-footer p {
+    margin: .5rem 0;
+  }
+</style>

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

@@ -0,0 +1,55 @@
+<style>
+  /* Resets */
+  .dokno-article-content-markup blockquote,
+  .dokno-article-content-markup dl,
+  .dokno-article-content-markup dd,
+  .dokno-article-content-markup h1,
+  .dokno-article-content-markup h2,
+  .dokno-article-content-markup h3,
+  .dokno-article-content-markup h4,
+  .dokno-article-content-markup h5,
+  .dokno-article-content-markup h6,
+  .dokno-article-content-markup hr,
+  .dokno-article-content-markup figure,
+  .dokno-article-content-markup p,
+  .dokno-article-content-markup pre {
+    margin: 0;
+  }
+
+  .dokno-article-content-markup h1,
+  .dokno-article-content-markup h2,
+  .dokno-article-content-markup h3,
+  .dokno-article-content-markup h4,
+  .dokno-article-content-markup h5,
+  .dokno-article-content-markup h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  .dokno-article-content-markup ol,
+  .dokno-article-content-markup ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .dokno-article-content-markup img,
+  .dokno-article-content-markup svg,
+  .dokno-article-content-markup video,
+  .dokno-article-content-markup canvas,
+  .dokno-article-content-markup audio,
+  .dokno-article-content-markup iframe,
+  .dokno-article-content-markup embed,
+  .dokno-article-content-markup object {
+    display: block;
+    vertical-align: middle;
+  }
+
+  .dokno-article-content-markup *,
+  .dokno-article-content-markup ::before,
+  .dokno-article-content-markup ::after {
+    border-width: 0;
+    border-style: solid;
+    border-color: currentColor;
+  }
+</style>