dokno 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: df8bbd2d17e134f0298f31fc97d049b245c4830e9d44655a8c4659507c6ebe6f
4
- data.tar.gz: bdeb9513295036198a8f30a476a1ea8a4c34d35330c9e6e75e2364aadddf0b3b
3
+ metadata.gz: 43b733c58c27a4d573269c75b1d47ba35aa570796535de91f9619429ce0cc017
4
+ data.tar.gz: 199666be242bb2a24a57552d377f4d3c9f84a1d0f5e92e99817c4786a80ba5c6
5
5
  SHA512:
6
- metadata.gz: 97c1353f3c85e9a6e40de60a0947101978bb101b0dc85be48945ee7e54bb13596fd0f1afbd011113f538c5dfe0ed8784c09c87643b5813e5021292c49244273b
7
- data.tar.gz: 1bfda031b688b21b65fc8b43fd550e006fec2d5b5f1fd50d4f536db9724ef4853ed47f49e8b2e3ed3329f9ecd6092eb2d678dc6562fa1c07d092da0412ff1e12
6
+ metadata.gz: 4a5b2583ecedf613308ac35ce4f55df892ca69593a34698d9cf8584ae61c8f0fa9d0d3444957941c76a9f501b383b49b517d63cac0b18d9012a3fc5201901708
7
+ data.tar.gz: a06162fecccb4d41751e8fcbb0f503427f3fe280fbd67fab5af761a3976a4d1646bc1d1861641da7bb9d06299c5e05281cc2a7b97b2a47349537a119eebe3fce
@@ -10,6 +10,31 @@ function elems(selector) {
10
10
  return document.getElementsByClassName(selector);
11
11
  }
12
12
 
13
+ function selectOption(id, value) {
14
+ var sel = elem('#' + id);
15
+ var opts = sel.options;
16
+
17
+ for (var opt, j = 0; opt = opts[j]; j++) {
18
+ if (opt.value == value) {
19
+ sel.selectedIndex = j;
20
+ break;
21
+ }
22
+ }
23
+ }
24
+
25
+ function changeCategory(category_code, term, order) {
26
+ goToPage(dokno__base_path + category_code + '?search_term=' + term + '&order=' + order);
27
+ }
28
+
29
+ function search(term, order) {
30
+ goToPage('?search_term=' + term + '&order=' + order);
31
+ }
32
+
33
+ function goToPage(url) {
34
+ var param_join = url.indexOf('?') >= 0 ? '&' : '?';
35
+ location.href=url + param_join + '_=' + Math.round(new Date().getTime());
36
+ }
37
+
13
38
  function sendRequest(url, data, callback, method) {
14
39
  const request = new XMLHttpRequest();
15
40
  request.open(method, url, true);
@@ -57,6 +57,11 @@ module Dokno
57
57
  self.class.branch(parent_category_id: id)
58
58
  end
59
59
 
60
+ # Used to invalidate the fragment cache of the hierarchical category select options
61
+ def self.cache_key
62
+ maximum :updated_at
63
+ end
64
+
60
65
  # The given Category and all child Categories. Useful for filtering associated articles.
61
66
  def self.branch(parent_category_id:, at_top: true)
62
67
  return if parent_category_id.blank?
@@ -1,7 +1,7 @@
1
1
  <style>
2
2
  /* Article formatting */
3
3
  .dokno-article-content-markup {
4
- font-weight: 300;
4
+ font-weight: 400;
5
5
  line-height: 1.75rem;
6
6
  font-size: 1rem;
7
7
  }
@@ -37,18 +37,17 @@
37
37
  }
38
38
 
39
39
  .dokno-article-content-markup h1 {
40
- font-size: 2rem;
41
- }
42
-
43
- .dokno-article-content-markup h2 {
44
40
  font-size: 1.625rem;
45
41
  }
46
42
 
47
- .dokno-article-content-markup h3 {
43
+ .dokno-article-content-markup h2 {
48
44
  font-size: 1.25rem;
49
45
  }
50
46
 
51
- .dokno-article-content-markup h4 {
47
+ .dokno-article-content-markup h3,
48
+ .dokno-article-content-markup h4,
49
+ .dokno-article-content-markup h5,
50
+ .dokno-article-content-markup h6 {
52
51
  font-size: 1rem;
53
52
  }
54
53
 
@@ -13,13 +13,6 @@
13
13
 
14
14
  <!-- Slide-out panel markup -->
15
15
  <div id="dokno-panel-container">
16
- <div id="dokno-panel-close" class="dokno-hidden">
17
- <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">
18
- <circle cx="12" cy="12" r="10"></circle>
19
- <line x1="15" y1="9" x2="9" y2="15"></line>
20
- <line x1="9" y1="9" x2="15" y2="15"></line>
21
- </svg>
22
- </div>
23
16
  <div id="dokno-panel-title"></div>
24
17
  <div id="dokno-panel-summary"></div>
25
18
  <div id="dokno-panel-markdown" class="dokno-article-content-markup"></div>
@@ -29,10 +22,12 @@
29
22
  <!-- Slide-out panel behavior -->
30
23
  <script>
31
24
  function doknoOpenPanel(slug) {
32
- if (slug == dokno__slug) {
33
- doknoClosePanel();
34
- return true;
35
- }
25
+ if (slug == dokno__slug) { return true; }
26
+
27
+ // Set flag to avoid flicker when closing the panel before opening the panel
28
+ dokno__link_just_clicked = true;
29
+ setTimeout(function() { dokno__link_just_clicked = false; }, 200);
30
+
36
31
  dokno__slug = slug;
37
32
 
38
33
  // Can't use fetch API; IE
@@ -62,9 +57,6 @@
62
57
  dokno__panel.classList.add('open');
63
58
  document.body.classList.add('dokno-no-scroll');
64
59
 
65
- // Reveal fixed close icon
66
- setTimeout(function() { dokno__close.classList.remove('dokno-hidden'); }, 200);
67
-
68
60
  // Close on escape
69
61
  document.addEventListener('keydown', dokno__keydown_listener, false);
70
62
  document.addEventListener('click', dokno__click_listener, false);
@@ -75,7 +67,9 @@
75
67
  }
76
68
 
77
69
  function doknoClosePanel() {
78
- dokno__close.classList.add('dokno-hidden');
70
+ // Just clicked a link to open a panel, so don't close to avoid flicker
71
+ if (dokno__link_just_clicked) { return true; }
72
+
79
73
  dokno__panel.classList.remove('open');
80
74
  document.body.classList.remove('dokno-no-scroll');
81
75
  document.removeEventListener('keydown', dokno__keydown_listener, false);
@@ -98,7 +92,6 @@
98
92
  }
99
93
 
100
94
  const dokno__panel = document.getElementById('dokno-panel-container');
101
- const dokno__close = document.querySelector('div#dokno-panel-close');
102
95
  const dokno__panel_title = document.getElementById('dokno-panel-title');
103
96
  const dokno__panel_summary = document.getElementById('dokno-panel-summary');
104
97
  const dokno__panel_footer = document.getElementById('dokno-panel-footer');
@@ -113,7 +106,5 @@
113
106
  if (!isClickInside) { doknoClosePanel(); }
114
107
  }
115
108
 
116
- dokno__close.onclick = function() { doknoClosePanel(); }
117
-
118
- var dokno__id, dokno__slug;
109
+ var dokno__id, dokno__slug, dokno__link_just_clicked;
119
110
  </script>
@@ -9,87 +9,77 @@
9
9
 
10
10
  div#dokno-panel-container {
11
11
  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;
12
- font-size: 1rem;
13
- line-height: 1.5rem;
14
- right: -600px;
15
- z-index: 9999;
16
- position: fixed;
17
- top: 0;
18
- bottom: 0;
19
- width: 600px;
20
- max-width: 100vw;
21
- overflow: hidden;
22
- overflow-y: auto;
23
- background-color: #fff;
24
- color: #2d3748;
25
- transition: all .15s ease-in-out;
26
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
12
+ font-size: 1rem !important;
13
+ line-height: 1.5rem !important;
14
+ right: -600px !important;
15
+ z-index: 9999 !important;
16
+ position: fixed !important;
17
+ top: 0 !important;
18
+ bottom: 0 !important;
19
+ width: 600px !important;
20
+ max-width: 100vw !important;
21
+ overflow: hidden !important;
22
+ overflow-y: auto !important;
23
+ background-color: #fff !important;
24
+ color: #2d3748 !important;
25
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
27
26
  }
28
27
 
29
28
  div#dokno-panel-container.open {
30
- right: 0;
31
- }
32
-
33
- div#dokno-panel-close {
34
- position: fixed;
35
- background-color: transparent;
36
- color: #222;
37
- cursor: pointer;
38
- top: 1.5rem;
39
- right: 2.5rem;
29
+ right: 0 !important;
40
30
  }
41
31
 
42
32
  div#dokno-panel-title {
43
- padding: 2.5rem;
44
- font-size: 2.25rem;
45
- line-height: 2.75rem;
46
- font-weight: 300;
47
- background-color: rgb(42,67,101);
48
- color: #ebf8ff;
33
+ padding: 2.5rem !important;
34
+ font-size: 2.25rem !important;
35
+ line-height: 2.75rem !important;
36
+ font-weight: 600 !important;
37
+ background-color: rgb(42,67,101) !important;
38
+ color: #ebf8ff !important;
49
39
  }
50
40
 
51
41
  div#dokno-panel-title div#article-deprecated-alert {
52
- font-size: 1rem;
53
- line-height: 1.5rem;
54
- padding: 1rem;
55
- margin-bottom: 1rem;
56
- border-top-width: 4px;
57
- border-radius: .25rem;
58
- border-top-style: solid;
59
- border-color: rgb(116,66,16);
60
- background-color: rgb(183,121,31);
61
- color: rgb(255,255,255);
42
+ font-size: 1rem !important;
43
+ line-height: 1.5rem !important;
44
+ padding: 1rem !important;
45
+ margin-bottom: 1rem !important;
46
+ border-top-width: 4px !important;
47
+ border-radius: .25rem !important;
48
+ border-top-style: solid !important;
49
+ border-color: rgb(116,66,16) !important;
50
+ background-color: rgb(183,121,31) !important;
51
+ color: rgb(255,255,255) !important;
62
52
  }
63
53
 
64
54
  div#dokno-panel-title > span,
65
55
  div#dokno-panel-footer > svg {
66
- cursor: pointer;
56
+ cursor: pointer !important;
67
57
  }
68
58
 
69
59
  div#dokno-panel-summary {
70
- font-size: 1.5rem;
71
- line-height: 2.25rem;
72
- padding: 2.5rem;
73
- font-weight: 300;
60
+ font-size: 1.5rem !important;
61
+ line-height: 2.25rem !important;
62
+ padding: 2.5rem !important;
63
+ font-weight: 400 !important;
74
64
  }
75
65
 
76
66
  div#dokno-panel-markdown {
77
- padding: 2.5rem;
78
- background-color: #f7fafc;
67
+ padding: 2.5rem !important;
68
+ background-color: #f7fafc !important;
79
69
  }
80
70
 
81
71
  div#dokno-panel-footer {
82
- text-align: center;
83
- position: relative;
84
- padding: 2.5rem;
85
- color: #999;
86
- background-color: #edf2f7;
87
- font-weight: 300;
88
- font-size: 1rem;
89
- line-height: 1.5rem;
72
+ text-align: center !important;
73
+ position: relative !important;
74
+ padding: 2.5rem !important;
75
+ color: #999 !important;
76
+ background-color: #edf2f7 !important;
77
+ font-weight: 400 !important;
78
+ font-size: 1rem !important;
79
+ line-height: 1.5rem !important;
90
80
  }
91
81
 
92
82
  div#dokno-panel-footer p {
93
- margin: .5rem 0;
83
+ margin: .5rem 0 !important;
94
84
  }
95
85
  </style>
@@ -38,7 +38,7 @@
38
38
  </div>
39
39
  </div>
40
40
 
41
- <div class="mt-5 flex">
41
+ <div class="mt-5 flex no-print">
42
42
  <div class="no-print w-8"><i data-feather="eye" class="inline-block h-5"></i></div>
43
43
  <div class="w-full">
44
44
  Views:<br />
@@ -57,7 +57,7 @@
57
57
  <% end %>
58
58
 
59
59
  <% if @article.reading_time.present? %>
60
- <div class="mt-5 flex">
60
+ <div class="mt-5 flex no-print">
61
61
  <div class="no-print w-8"><i data-feather="watch" class="inline-block h-5"></i></div>
62
62
  <div class="w-full">
63
63
  Reading time:<br />
@@ -75,7 +75,7 @@
75
75
  </div>
76
76
 
77
77
  <% if can_edit? %>
78
- <div class="mt-5 flex">
78
+ <div class="mt-5 flex no-print">
79
79
  <div class="no-print w-8"><i data-feather="crosshair" class="inline-block h-5"></i></div>
80
80
  <div class="w-full">
81
81
  Unique slug:<br />
@@ -94,7 +94,7 @@
94
94
  <% end %>
95
95
 
96
96
  <% if @article.categories.exists? %>
97
- <div class="mt-5 flex">
97
+ <div class="mt-5 flex no-print">
98
98
  <div class="no-print w-8"><i data-feather="folder" class="inline-block h-5"></i></div>
99
99
  <div class="w-full">
100
100
  <%= 'Category'.pluralize @article.categories.count %>:<br />
@@ -31,7 +31,7 @@
31
31
  <% if category.persisted? %>
32
32
  <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>
33
33
  <% end %>
34
- <span class="text-lg ml-5"><a class="no-underline" href="<%= category.persisted? ? "#{root_path}?id=#{category.id}" : root_path %>">Cancel</a></span>
34
+ <span class="text-lg ml-5"><a class="no-underline" href="<%= category.persisted? ? "#{dokno.article_index_path(category.code)}" : root_path %>">Cancel</a></span>
35
35
  </div>
36
36
  </section>
37
37
 
@@ -7,17 +7,18 @@
7
7
  <div class="flex items-center mb-10">
8
8
  <% if Dokno::Category.exists? %>
9
9
  <div class="w-1/2 pr-5">
10
- <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 %>';">
10
+
11
+ <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="changeCategory(this.value, elem('#search_term').value, '<%= @order %>');">
11
12
  <option value="">Select a category</option>
12
- <%= Dokno::Category.select_option_markup(selected_category_codes: [@category&.code]).html_safe %>
13
+ <% cache Dokno::Category do %>
14
+ <%= Dokno::Category.select_option_markup.html_safe %>
15
+ <% end %>
13
16
  </select>
17
+
14
18
  </div>
15
19
  <% end %>
16
20
  <div class="w-<%= Dokno::Category.exists? ? '1/2 pl-5' : 'full' %>">
17
- <%= form_with(url: article_index_path(@category&.code), method: :get) do %>
18
- <input type="hidden" name="order" value="<%= @order %>">
19
- <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" />
20
- <% end %>
21
+ <input onsearch="search(this.value, '<%= @order %>');" placeholder="Search article content, titles, and slugs" type="search" name="search_term" id="search_term" value="<%= @search_term %>" class="rounded text-xl shadow-inner bg-gray-100 p-2 w-full" />
21
22
  </div>
22
23
  </div>
23
24
 
@@ -53,7 +54,7 @@
53
54
  </div>
54
55
 
55
56
  <div id="dokno-article-list">
56
- <% @articles.each_with_index do |article, i| %>
57
+ <% @articles.each do |article| %>
57
58
  <section class="border-t border-gray-300 py-10 text-xl flex">
58
59
  <div class="w-1/3 pr-10">
59
60
  <div class="flex">
@@ -72,17 +73,17 @@
72
73
 
73
74
  <span class="dokno-article-content-highlight"><%= article.summary.presence || 'No summary provided' %></span>
74
75
 
75
- <div class="text-base mt-2">
76
- <div class="text-gray-500"><%= article.category_name_list(context_category_id: @category&.id, order: @order, search_term: @search_term) %></div>
77
-
78
- <% if @order == 'views' %>
79
- <div class="text-gray-500">Viewed <%= number_with_delimiter(article.views, delimiter: ',') %> <%= 'time'.pluralize(article.views) %></div>
80
- <% elsif @order == 'updated' %>
81
- <div class="text-gray-500">Last updated <%= time_ago_in_words article.updated_at %> ago</div>
82
- <% elsif @order == 'newest' %>
83
- <div class="text-gray-500">Added <%= time_ago_in_words article.created_at %> ago</div>
84
- <% end %>
85
- </div>
76
+ <% unless @order == 'alpha' %>
77
+ <div class="text-base mt-2">
78
+ <% if @order == 'views' %>
79
+ <div class="text-gray-500">Viewed <%= number_with_delimiter(article.views, delimiter: ',') %> <%= 'time'.pluralize(article.views) %></div>
80
+ <% elsif @order == 'updated' %>
81
+ <div class="text-gray-500">Last updated <%= time_ago_in_words article.updated_at %> ago</div>
82
+ <% elsif @order == 'newest' %>
83
+ <div class="text-gray-500">Added <%= time_ago_in_words article.created_at %> ago</div>
84
+ <% end %>
85
+ </div>
86
+ <% end %>
86
87
  </div>
87
88
  </section>
88
89
  <% end %>
@@ -96,6 +97,11 @@
96
97
  </div>
97
98
  <% end %>
98
99
 
100
+ <script>
101
+ // Client-side select of cached select list
102
+ selectOption('category', '<%= j @category&.code %>');
103
+ </script>
104
+
99
105
  <% if @search_term.present? %>
100
- <script>highlightTerm(['<%= j @search_term.strip %>'], 'dokno-article-content-highlight');</script>
106
+ <script> highlightTerm(['<%= j @search_term.strip %>'], 'dokno-article-content-highlight'); </script>
101
107
  <% end %>
@@ -45,7 +45,7 @@
45
45
  <div class="text-center m-auto mb-10 w-full max-w-screen-xl">
46
46
  <% if @search_term.present? %>
47
47
  <div class="text-gray-600 text-2xl uppercase">
48
- <%= (article_count = @articles.count).positive? ? "#{article_count} #{'article'.pluralize(article_count)}" : 'No articles' %>
48
+ <%= @total_records.positive? ? "#{@total_records} #{'article'.pluralize(@total_records)}" : 'No articles' %>
49
49
  found containing the search term
50
50
  <div class="text-4xl leading-tight"><span class="font-serif">&ldquo;</span> <%= @search_term %> <span class="font-serif">&rdquo;</span> </div>
51
51
  </div>
@@ -76,12 +76,11 @@
76
76
 
77
77
  <footer id="dokno-footer-container">
78
78
  <% if @article.present? && action_name == 'show' %>
79
- <div id="dokno-article-log-container" data-category-id="<%= @category&.id %>" data-article-id="<%= @article&.id %>">
79
+ <div id="dokno-article-log-container" data-category-id="<%= @category&.id %>" data-article-id="<%= @article.id %>">
80
80
  <%= render 'partials/logs', category: @category, article: @article %>
81
81
  </div>
82
82
  <% end %>
83
83
 
84
-
85
84
  <div class="py-10 px-16 text-gray-400 bg-blue-900">
86
85
  <div class="w-full max-w-screen-xl m-auto flex">
87
86
  <div class="w-1/2">
@@ -99,7 +98,6 @@
99
98
  </div>
100
99
  </div>
101
100
  </div>
102
-
103
101
  </footer>
104
102
 
105
103
  <%= javascript_include_tag 'init' %>
@@ -5,11 +5,10 @@
5
5
 
6
6
  <span class="mr-1 inline-block">Page</span>
7
7
 
8
- <%= form_with(url: article_index_path, method: :get, class: 'inline') do %>
9
- <input type="hidden" name="id" value="<%= @category&.id %>">
8
+ <%= form_with(url: article_index_path(@category&.code), method: :get, class: 'inline') do %>
10
9
  <input type="hidden" name="search_term" value="<%= @search_term %>">
11
10
  <input type="hidden" name="order" value="<%= @order %>">
12
- <input type="text" name="page" id="page" value="<%= @page %>" onclick="this.select();" class="w-10 text-center bg-gray-200 rounded" />
11
+ <input aria-label="Page" type="text" name="page" value="<%= @page %>" onclick="this.select();" class="w-10 text-center bg-gray-200 rounded" />
13
12
 
14
13
  <span class="mx-1 inline-block">of</span>
15
14
  <span class="text-center inline-block"><%= @total_pages %></span>
@@ -1,3 +1,3 @@
1
1
  module Dokno
2
- VERSION = '1.1.0'
2
+ VERSION = '1.1.1'
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: dokno
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.1.0
4
+ version: 1.1.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Courtney Payne
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-12-04 00:00:00.000000000 Z
11
+ date: 2020-12-06 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: diffy