Rename and format ECR files

src/routes/main.cr

@@ -4,7 +4,7 @@ class MainRouter < Router
   def initialize
     get "/login" do |env|
       base_url = Config.current.base_url
-      render "src/views/login.ecr"
+      render "src/views/login.html.ecr"
     end
 
     get "/logout" do |env|

src/routes/opds.cr

@@ -4,13 +4,13 @@ class OPDSRouter < Router
   def initialize
     get "/opds" do |env|
       titles = @context.library.titles
-      render_xml "src/views/opds/index.ecr"
+      render_xml "src/views/opds/index.xml.ecr"
     end
 
     get "/opds/book/:title_id" do |env|
       begin
         title = @context.library.get_title(env.params.url["title_id"]).not_nil!
-        render_xml "src/views/opds/title.ecr"
+        render_xml "src/views/opds/title.xml.ecr"
       rescue e
         @context.error e
         env.response.status_code = 404

src/routes/reader.cr

@@ -56,7 +56,7 @@ class ReaderRouter < Router
           next_entry_url = "#{base_url}reader/#{title.id}/#{next_entry.id}"
         end
 
-        render "src/views/reader.ecr"
+        render "src/views/reader.html.ecr"
       rescue e
         @context.error e
         env.response.status_code = 404

src/util.cr

@@ -16,11 +16,11 @@ macro layout(name)
       is_admin = @context.storage.verify_admin token
     end
     page = {{name}}
-    render "src/views/#{{{name}}}.ecr", "src/views/layout.ecr"
+    render "src/views/#{{{name}}}.html.ecr", "src/views/layout.html.ecr"
   rescue e
     message = e.to_s
     @context.error message
-    render "src/views/message.ecr", "src/views/layout.ecr"
+    render "src/views/message.html.ecr", "src/views/layout.html.ecr"
   end
 end
 
@@ -139,7 +139,7 @@ macro render_xml(path)
 end
 
 macro render_component(filename)
-  render "src/views/components/#{{{filename}}}.ecr"
+  render "src/views/components/#{{{filename}}}.html.ecr"
 end
 
 # Works in all Unix systems. Follows https://github.com/crystal-lang/crystal/

src/views/admin.html.ecr

@@ -15,5 +15,5 @@
 <a class="uk-button uk-button-danger" href="<%= base_url %>logout">Log Out</a>
 
 <% content_for "script" do %>
-<script src="<%= base_url %>js/admin.js"></script>
+  <script src="<%= base_url %>js/admin.js"></script>
 <% end %>

src/views/components/card.ecr

@@ -1,49 +0,0 @@
-<% if item.is_a? NamedTuple(entry: Entry, percentage: Float64, grouped_count: Int32) %>
-<% grouped_count = item[:grouped_count] %>
-<% if grouped_count == 1 %>
-<% item = item[:entry] %>
-<% else %>
-<% item = item[:entry].book %>
-<% end %>
-<% else %>
-<% grouped_count = 1 %>
-<% end %>
-<div class="item" data-mtime="<%= item.mtime.to_unix %>" data-progress="<%= progress %>"
-  <% if item.is_a? Entry %>
-  id="<%= item.id %>"
-  <% end %>>
-
-  <a class="acard"
-    <% unless item.is_a? Entry %>
-    href="<%= base_url %>book/<%= item.id %>"
-    <% end %>>
-
-    <div class="uk-card uk-card-default"
-      <% if item.is_a? Entry %>
-      onclick="showModal(&quot;<%= item.encoded_path %>&quot;, '<%= item.pages %>', <%= (progress * 100).round(1) %>, &quot;<%= item.book.encoded_display_name %>&quot;, &quot;<%= item.encoded_display_name %>&quot;, '<%= item.title_id %>', '<%= item.id %>')"
-      <% end %>>
-
-      <div class="uk-card-media-top">
-        <img data-src="<%= item.cover_url %>" data-width data-height alt="" uk-img>
-      </div>
-
-      <div class="uk-card-body">
-        <% unless progress < 0 || progress > 100 %>
-        <div class="uk-card-badge uk-label"><%= (progress * 100).round(1) %>%</div>
-        <% end %>
-
-        <h3 class="uk-card-title break-word" data-title="<%= item.display_name.gsub("\"", "&quot;") %>"><%= item.display_name %></h3>
-        <% if item.is_a? Entry %>
-        <p><%= item.pages %> pages</p>
-        <% end %>
-        <% if item.is_a? Title %>
-        <% if grouped_count == 1 %>
-        <p><%= item.size %> entries</p>
-        <% else %>
-        <p><%= grouped_count %> new entries</p>
-        <% end %>
-        <% end %>
-      </div>
-    </div>
-  </a>
-</div>

src/views/components/card.html.ecr

@@ -0,0 +1,50 @@
+<% if item.is_a? NamedTuple(entry: Entry, percentage: Float64, grouped_count: Int32) %>
+  <% grouped_count = item[:grouped_count] %>
+  <% if grouped_count == 1 %>
+    <% item = item[:entry] %>
+  <% else %>
+    <% item = item[:entry].book %>
+  <% end %>
+<% else %>
+  <% grouped_count = 1 %>
+<% end %>
+
+<div class="item" data-mtime="<%= item.mtime.to_unix %>" data-progress="<%= progress %>" 
+  <% if item.is_a? Entry %> 
+    id="<%= item.id %>"
+  <% end %>>
+
+  <a class="acard" 
+    <% unless item.is_a? Entry %> 
+      href="<%= base_url %>book/<%= item.id %>" 
+    <% end %>>
+
+    <div class="uk-card uk-card-default" 
+      <% if item.is_a? Entry %> 
+        onclick="showModal(&quot;<%= item.encoded_path %>&quot;, '<%= item.pages %>', <%= (progress * 100).round(1) %>, &quot;<%= item.book.encoded_display_name %>&quot;, &quot;<%= item.encoded_display_name %>&quot;, '<%= item.title_id %>', '<%= item.id %>')" 
+      <% end %>>
+
+      <div class="uk-card-media-top">
+        <img data-src="<%= item.cover_url %>" data-width data-height alt="" uk-img>
+      </div>
+
+      <div class="uk-card-body">
+        <% unless progress < 0 || progress > 100 %>
+          <div class="uk-card-badge uk-label"><%= (progress * 100).round(1) %>%</div>
+        <% end %>
+
+        <h3 class="uk-card-title break-word" data-title="<%= item.display_name.gsub("\"", "&quot;") %>"><%= item.display_name %></h3>
+        <% if item.is_a? Entry %>
+          <p><%= item.pages %> pages</p>
+        <% end %>
+        <% if item.is_a? Title %>
+          <% if grouped_count == 1 %>
+            <p><%= item.size %> entries</p>
+          <% else %>
+            <p><%= grouped_count %> new entries</p>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  </a>
+</div>

src/views/download-manager.html.ecr

@@ -23,10 +23,10 @@
 </table>
 
 <% content_for "script" do %>
-<script>
+  <script>
     var baseURL = "<%= mangadex_base_url %>".replace(/\/$/, "");
-</script>
+  </script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
-<script src="<%= base_url %>js/alert.js"></script>
+  <script src="<%= base_url %>js/alert.js"></script>
-<script src="<%= base_url %>js/download-manager.js"></script>
+  <script src="<%= base_url %>js/download-manager.js"></script>
 <% end %>

src/views/download.html.ecr

@@ -73,11 +73,11 @@
 </table>
 
 <% content_for "script" do %>
-<script>
+  <script>
     var baseURL = "<%= mangadex_base_url %>".replace(/\/$/, "");
-</script>
+  </script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
-<script src="<%= base_url %>js/alert.js"></script>
+  <script src="<%= base_url %>js/alert.js"></script>
-<script src="<%= base_url %>js/download.js"></script>
+  <script src="<%= base_url %>js/download.js"></script>
 <% end %>

src/views/home.ecr

@@ -1,69 +0,0 @@
-<%- if new_user && empty_library -%>
-
-<div class="uk-container uk-text-center">
-  <i class="fas fa-plus" style="font-size: 80px;"></i>
-  <h2>Add your first manga</h2>
-  <p style="margin-bottom: 40px;">We can't find any files yet. Add some to your library and they'll appear here.</p>
-  <dl class="uk-description-list">
-    <dt style="font-weight: 500;">Current library path</dt>
-    <dd><code><%= Config.current.library_path %></code></dd>
-    <dt style="font-weight: 500;">Want to change your library path?</dt>
-    <dd>Update <code>config.yml</code> located at: <code><%= Config.current.path %></code></dd>
-    <dt style="font-weight: 500;">Can't see your files yet?</dt>
-    <dd>You must wait <%= Config.current.scan_interval %> minutes for the library scan to complete
-      <% if is_admin %>, or manually re-scan from <a href="<%= base_url %>admin">Admin</a><% end %>.</dd>
-  </dl>
-</div>
-
-<%- elsif new_user && empty_library == false -%>
-
-<div class="uk-container uk-text-center">
-  <i class="fas fa-book-open" style="font-size: 80px;"></i>
-  <h2>Read your first manga</h2>
-  <p>Once you start reading, Mango will remember where you left off
-    and show your entries here.</p>
-  <a href="<%= base_url %>library" class="uk-button uk-button-default">View library</a>
-</div>
-
-<%- elsif new_user == false && empty_library == false -%>
-
-<%- if continue_reading.empty? && recently_added.empty? -%>
-<div class="uk-container uk-text-center">
-  <img src="<%= base_url %>img/banner.png" style="max-width: 400px; padding: 0 20px;">
-  <p>A self-hosted manga server and reader</p>
-  <a href="<%= base_url %>library" class="uk-button uk-button-default">View library</a>
-</div>
-<%- end -%>
-
-<%- unless continue_reading.empty? -%>
-<h2 class="uk-title home-headings">Continue Reading</h2>
-<div id="item-container-continue" class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
-  <%- continue_reading.each do |cr| -%>
-  <% item = cr[:entry] %>
-  <% progress = cr[:percentage] %>
-  <%= render_component "card" %>
-  <%- end -%>
-</div>
-<%- end -%>
-
-<%- unless recently_added.empty? -%>
-<h2 class="uk-title home-headings">Recently Added</h2>
-<div id="item-container-continue" class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
-  <%- recently_added.each do |ra| -%>
-  <% item = ra %>
-  <% progress = ra[:percentage] %>
-  <%= render_component "card" %>
-  <%- end -%>
-</div>
-<%- end -%>
-
-<%= render_component "entry-modal" %>
-
-<%- end -%>
-
-<% content_for "script" do %>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
-<script src="<%= base_url %>js/dots.js"></script>
-<script src="<%= base_url %>js/alert.js"></script>
-<script src="<%= base_url %>js/title.js"></script>
-<% end %>

src/views/home.html.ecr

@@ -0,0 +1,73 @@
+<%- if new_user && empty_library -%>
+
+  <div class="uk-container uk-text-center">
+    <i class="fas fa-plus" style="font-size: 80px;"></i>
+    <h2>Add your first manga</h2>
+    <p style="margin-bottom: 40px;">We can't find any files yet. Add some to your library and they'll appear here.</p>
+    <dl class="uk-description-list">
+      <dt style="font-weight: 500;">Current library path</dt>
+      <dd><code><%= Config.current.library_path %></code></dd>
+      <dt style="font-weight: 500;">Want to change your library path?</dt>
+      <dd>Update <code>config.yml</code> located at: <code><%= Config.current.path %></code></dd>
+      <dt style="font-weight: 500;">Can't see your files yet?</dt>
+      <dd>
+      You must wait <%= Config.current.scan_interval %> minutes for the library scan to complete
+      <% if is_admin %>
+        , or manually re-scan from <a href="<%= base_url %>admin">Admin</a>
+      <% end %>.
+      </dd>
+    </dl>
+  </div>
+
+<%- elsif new_user && empty_library == false -%>
+
+  <div class="uk-container uk-text-center">
+    <i class="fas fa-book-open" style="font-size: 80px;"></i>
+    <h2>Read your first manga</h2>
+    <p>Once you start reading, Mango will remember where you left off
+    and show your entries here.</p>
+    <a href="<%= base_url %>library" class="uk-button uk-button-default">View library</a>
+  </div>
+
+<%- elsif new_user == false && empty_library == false -%>
+
+  <%- if continue_reading.empty? && recently_added.empty? -%>
+    <div class="uk-container uk-text-center">
+      <img src="<%= base_url %>img/banner.png" style="max-width: 400px; padding: 0 20px;">
+      <p>A self-hosted manga server and reader</p>
+      <a href="<%= base_url %>library" class="uk-button uk-button-default">View library</a>
+    </div>
+  <%- end -%>
+
+  <%- unless continue_reading.empty? -%>
+    <h2 class="uk-title home-headings">Continue Reading</h2>
+    <div id="item-container-continue" class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
+      <%- continue_reading.each do |cr| -%>
+        <% item = cr[:entry] %>
+        <% progress = cr[:percentage] %>
+        <%= render_component "card" %>
+      <%- end -%>
+    </div>
+  <%- end -%>
+
+  <%- unless recently_added.empty? -%>
+    <h2 class="uk-title home-headings">Recently Added</h2>
+    <div id="item-container-continue" class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
+      <%- recently_added.each do |ra| -%>
+        <% item = ra %>
+        <% progress = ra[:percentage] %>
+        <%= render_component "card" %>
+      <%- end -%>
+    </div>
+  <%- end -%>
+
+  <%= render_component "entry-modal" %>
+
+<%- end -%>
+
+<% content_for "script" do %>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
+  <script src="<%= base_url %>js/dots.js"></script>
+  <script src="<%= base_url %>js/alert.js"></script>
+  <script src="<%= base_url %>js/title.js"></script>
+<% end %>

src/views/layout.ecr

@@ -1,68 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<%= render_component "head" %>
-
-<body>
-  <div class="uk-offcanvas-content">
-    <div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar">
-      <div id="mobile-nav" uk-offcanvas="overlay: true">
-        <div class="uk-offcanvas-bar uk-flex uk-flex-column">
-          <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical">
-            <li><a href="<%= base_url %>">Home</a></li>
-            <li><a href="<%= base_url %>library">Library</a></li>
-            <% if is_admin %>
-            <li><a href="<%= base_url %>admin">Admin</a></li>
-            <li><a href="<%= base_url %>download">Download</a></li>
-            <% end %>
-            <hr uk-divider>
-            <li><a onclick="toggleTheme()"><i class="fas fa-adjust"></i></a></li>
-            <li><a href="<%= base_url %>logout">Logout</a></li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="uk-position-top">
-    <div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar">
-      <div class="uk-navbar-left uk-hidden@s">
-        <div class="uk-navbar-toggle" uk-navbar-toggle-icon="uk-navbar-toggle-icon" uk-toggle="target: #mobile-nav"></div>
-      </div>
-      <div class="uk-navbar-left uk-visible@s">
-        <a class="uk-navbar-item uk-logo" href="<%= base_url %>"><img src="<%= base_url %>img/icon.png"></a>
-        <ul class="uk-navbar-nav">
-          <li><a href="<%= base_url %>">Home</a></li>
-          <li><a href="<%= base_url %>library">Library</a></li>
-          <% if is_admin %>
-          <li><a href="<%= base_url %>admin">Admin</a></li>
-          <li><a href="<%= base_url %>download">Download</a></li>
-          <% end %>
-        </ul>
-      </div>
-      <div class="uk-navbar-right uk-visible@s">
-        <ul class="uk-navbar-nav">
-          <li><a onclick="toggleTheme()"><i class="fas fa-adjust"></i></a></li>
-          <li><a href="<%= base_url %>logout">Logout</a></li>
-        </ul>
-      </div>
-    </div>
-  </div>
-  <div class="uk-section uk-section-small">
-  </div>
-  <div class="uk-section uk-section-small">
-    <div class="uk-container uk-container-small">
-      <div id="alert"></div>
-      <%= content %>
-    </div>
-  </div>
-  <script>
-    setTheme(getTheme());
-    const base_url = "<%= base_url %>";
-  </script>
-  <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit-icons.min.js"></script>
-
-  <%= yield_content "script" %>
-</body>
-
-</html>

src/views/layout.html.ecr

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+
+  <%= render_component "head" %>
+
+  <body>
+    <div class="uk-offcanvas-content">
+      <div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar">
+        <div id="mobile-nav" uk-offcanvas="overlay: true">
+          <div class="uk-offcanvas-bar uk-flex uk-flex-column">
+            <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical">
+              <li><a href="<%= base_url %>">Home</a></li>
+              <li><a href="<%= base_url %>library">Library</a></li>
+              <% if is_admin %>
+                <li><a href="<%= base_url %>admin">Admin</a></li>
+                <li><a href="<%= base_url %>download">Download</a></li>
+              <% end %>
+              <hr uk-divider>
+              <li><a onclick="toggleTheme()"><i class="fas fa-adjust"></i></a></li>
+              <li><a href="<%= base_url %>logout">Logout</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="uk-position-top">
+      <div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar">
+        <div class="uk-navbar-left uk-hidden@s">
+          <div class="uk-navbar-toggle" uk-navbar-toggle-icon="uk-navbar-toggle-icon" uk-toggle="target: #mobile-nav"></div>
+        </div>
+        <div class="uk-navbar-left uk-visible@s">
+          <a class="uk-navbar-item uk-logo" href="<%= base_url %>"><img src="<%= base_url %>img/icon.png"></a>
+          <ul class="uk-navbar-nav">
+            <li><a href="<%= base_url %>">Home</a></li>
+            <li><a href="<%= base_url %>library">Library</a></li>
+            <% if is_admin %>
+              <li><a href="<%= base_url %>admin">Admin</a></li>
+              <li><a href="<%= base_url %>download">Download</a></li>
+            <% end %>
+          </ul>
+        </div>
+        <div class="uk-navbar-right uk-visible@s">
+          <ul class="uk-navbar-nav">
+            <li><a onclick="toggleTheme()"><i class="fas fa-adjust"></i></a></li>
+            <li><a href="<%= base_url %>logout">Logout</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="uk-section uk-section-small">
+    </div>
+    <div class="uk-section uk-section-small">
+      <div class="uk-container uk-container-small">
+        <div id="alert"></div>
+        <%= content %>
+      </div>
+    </div>
+    <script>
+      setTheme(getTheme());
+      const base_url = "<%= base_url %>";
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit-icons.min.js"></script>
+
+    <%= yield_content "script" %>
+  </body>
+
+</html>

src/views/library.html.ecr

@@ -24,8 +24,8 @@
 </div>
 
 <% content_for "script" do %>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
-<script src="<%= base_url %>js/dots.js"></script>
+  <script src="<%= base_url %>js/dots.js"></script>
-<script src="<%= base_url %>js/search.js"></script>
+  <script src="<%= base_url %>js/search.js"></script>
-<script src="<%= base_url %>js/sort-items.js"></script>
+  <script src="<%= base_url %>js/sort-items.js"></script>
 <% end %>

src/views/login.ecr

@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<%= render_component "head" %>
-
-<body>
-  <div class="uk-section uk-flex uk-flex-middle uk-animation-fade" uk-height-viewport="">
-    <div class="uk-width-1-1">
-      <div class="uk-container">
-        <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
-          <div class="uk-width-1-1@m">
-            <div class="uk-margin uk-width-large uk-margin-auto uk-card uk-card-default uk-card-body uk-box-shadow-large">
-              <h3 class="uk-card-title uk-text-center">Log In</h3>
-              <form action="<%= base_url %>login" method="post">
-                <div class="uk-margin">
-                  <div class="uk-inline uk-width-1-1"><span class="uk-form-icon" uk-icon="icon:user"></span><input class="uk-input uk-form-large" type="text" name="username"></div>
-                </div>
-                <div class="uk-margin">
-                  <div class="uk-inline uk-width-1-1"><span class="uk-form-icon" uk-icon="icon:lock"></span><input class="uk-input uk-form-large" type="password" name="password"></div>
-                </div>
-                <div class="uk-margin"><button class="uk-button uk-button-primary uk-button-large uk-width-1-1">Login</button></div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <script>
-    setTheme(getTheme());
-  </script>
-  <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit-icons.min.js"></script>
-</body>
-
-</html>

src/views/login.html.ecr

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+
+  <%= render_component "head" %>
+
+  <body>
+    <div class="uk-section uk-flex uk-flex-middle uk-animation-fade" uk-height-viewport="">
+      <div class="uk-width-1-1">
+        <div class="uk-container">
+          <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
+            <div class="uk-width-1-1@m">
+              <div class="uk-margin uk-width-large uk-margin-auto uk-card uk-card-default uk-card-body uk-box-shadow-large">
+                <h3 class="uk-card-title uk-text-center">Log In</h3>
+                <form action="<%= base_url %>login" method="post">
+                  <div class="uk-margin">
+                    <div class="uk-inline uk-width-1-1"><span class="uk-form-icon" uk-icon="icon:user"></span><input class="uk-input uk-form-large" type="text" name="username"></div>
+                  </div>
+                  <div class="uk-margin">
+                    <div class="uk-inline uk-width-1-1"><span class="uk-form-icon" uk-icon="icon:lock"></span><input class="uk-input uk-form-large" type="password" name="password"></div>
+                  </div>
+                  <div class="uk-margin"><button class="uk-button uk-button-primary uk-button-large uk-width-1-1">Login</button></div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script>
+      setTheme(getTheme());
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit-icons.min.js"></script>
+  </body>
+
+</html>

src/views/message.ecr

@@ -1 +0,0 @@
-<p class="uk-text-lead uk-text-center"><%= message %></p>

src/views/message.html.ecr

@@ -0,0 +1 @@
+<p class="uk-text-lead uk-text-center"><%= message %></p>

src/views/opds/title.ecr

@@ -1,38 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<feed xmlns="http://www.w3.org/2005/Atom">
-  <id>urn:mango:<%= title.id %></id>
-
-  <link rel="self" href="<%= base_url %>opds/book/<%= title.id %>" type="application/atom+xml;profile=opds-catalog;kind=navigation" />
-  <link rel="start" href="<%= base_url %>opds/" type="application/atom+xml;profile=opds-catalog;kind=navigation" />
-
-  <title><%= title.display_name %></title>
-
-  <author>
-    <name>Mango</name>
-    <uri>https://github.com/hkalexling/Mango</uri>
-  </author>
-
-  <% title.titles.each do |t| %>
-  <entry>
-    <title><%= t.display_name %></title>
-    <id>urn:mango:<%= t.id %></id>
-    <link type="application/atom+xml;profile=opds-catalog;kind=navigation" rel="subsection" href="<%= base_url %>opds/book/<%= t.id %>" />
-  </entry>
-  <% end %>
-
-  <% title.entries.each do |e| %>
-  <entry>
-    <title><%= e.display_name %></title>
-    <id>urn:mango:<%= e.id %></id>
-
-    <link rel="http://opds-spec.org/image" href="<%= e.cover_url %>" />
-    <link rel="http://opds-spec.org/image/thumbnail" href="<%= e.cover_url %>" />
-
-    <link rel="http://opds-spec.org/acquisition" href="<%= base_url %>opds/download/<%= e.title_id %>/<%= e.id %>" title="Read" type="<%= MIME.from_filename e.zip_path %>" />
-
-    <link type="text/html" rel="alternate" title="Read in Mango" href="<%= base_url %>reader/<%= e.title_id %>/<%= e.id %>" />
-    <link type="text/html" rel="alternate" title="Open in Mango" href="<%= base_url %>book/<%= e.title_id %>" />
-  </entry>
-  <% end %>
-
-</feed>

src/views/opds/title.xml.ecr

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+  <id>urn:mango:<%= title.id %></id>
+
+  <link rel="self" href="<%= base_url %>opds/book/<%= title.id %>" type="application/atom+xml;profile=opds-catalog;kind=navigation" />
+  <link rel="start" href="<%= base_url %>opds/" type="application/atom+xml;profile=opds-catalog;kind=navigation" />
+
+  <title><%= title.display_name %></title>
+
+  <author>
+    <name>Mango</name>
+    <uri>https://github.com/hkalexling/Mango</uri>
+  </author>
+
+  <% title.titles.each do |t| %>
+    <entry>
+      <title><%= t.display_name %></title>
+      <id>urn:mango:<%= t.id %></id>
+      <link type="application/atom+xml;profile=opds-catalog;kind=navigation" rel="subsection" href="<%= base_url %>opds/book/<%= t.id %>" />
+    </entry>
+  <% end %>
+
+  <% title.entries.each do |e| %>
+    <entry>
+      <title><%= e.display_name %></title>
+      <id>urn:mango:<%= e.id %></id>
+
+      <link rel="http://opds-spec.org/image" href="<%= e.cover_url %>" />
+      <link rel="http://opds-spec.org/image/thumbnail" href="<%= e.cover_url %>" />
+
+      <link rel="http://opds-spec.org/acquisition" href="<%= base_url %>opds/download/<%= e.title_id %>/<%= e.id %>" title="Read" type="<%= MIME.from_filename e.zip_path %>" />
+
+      <link type="text/html" rel="alternate" title="Read in Mango" href="<%= base_url %>reader/<%= e.title_id %>/<%= e.id %>" />
+      <link type="text/html" rel="alternate" title="Open in Mango" href="<%= base_url %>book/<%= e.title_id %>" />
+    </entry>
+  <% end %>
+
+</feed>

src/views/reader.ecr

@@ -1,62 +0,0 @@
-<!DOCTYPE html>
-<html class="reader-bg">
-
-<%= render_component "head" %>
-
-<body>
-  <div class="uk-section uk-section-default uk-section-small reader-bg">
-    <div class="uk-container uk-container-small">
-      <%- urls.each_with_index do |url, i| -%>
-      <img class="uk-align-center" data-src="<%= url %>" data-width data-height uk-img id="<%= reader_urls[i] %>" onclick="showControl(<%= pages.to_a[i] %>);">
-      <%- end -%>
-      <%- if next_url -%>
-      <a class="next-url" href="<%= next_url %>"></a>
-      <%- end -%>
-    </div>
-    <%- if next_entry_url -%>
-    <button id="next-btn" class="uk-align-center uk-button uk-button-primary" hidden onclick="redirect('<%= next_entry_url %>')">Next Entry</button>
-    <%- else -%>
-    <button id="next-btn" class="uk-align-center uk-button uk-button-primary" hidden onclick="redirect('<%= exit_url %>')">Exit Reader</button>
-    <%- end -%>
-  </div>
-
-  <div id="hidden" hidden></div>
-
-  <div id="modal-sections" class="uk-flex-top" uk-modal>
-    <div class="uk-modal-dialog uk-margin-auto-vertical">
-      <button class="uk-modal-close-default" type="button" uk-close></button>
-      <div class="uk-modal-header">
-        <h3 class="uk-modal-title break-word"><%= entry.display_name %></h3>
-        <p class="uk-text-meta uk-margin-remove-bottom break-word"><%= entry.zip_path %></p>
-      </div>
-      <div class="uk-modal-body">
-        <div class="uk-margin">
-          <p id="progress-label"></p>
-        </div>
-        <div class="uk-margin">
-          <label class="uk-form-label" for="form-stacked-select">Jump to page</label>
-          <div class="uk-form-controls">
-            <select id="page-select" class="uk-select">
-              <%- (1..entry.pages).each do |p| -%>
-              <option value="<%= p %>"><%= p %></option>
-              <%- end -%>
-            </select>
-          </div>
-        </div>
-      </div>
-      <div class="uk-modal-footer uk-text-right">
-        <button class="uk-button uk-button-danger" type="button" onclick="redirect('<%= exit_url %>')">Exit Reader</button>
-      </div>
-    </div>
-  </div>
-  <script>
-    const base_url = "<%= base_url %>"
-  </script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit-icons.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
-  <script src="<%= base_url %>js/reader.js"></script>
-</body>
-
-</html>

src/views/reader.html.ecr

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html class="reader-bg">
+
+  <%= render_component "head" %>
+
+  <body>
+    <div class="uk-section uk-section-default uk-section-small reader-bg">
+      <div class="uk-container uk-container-small">
+        <%- urls.each_with_index do |url, i| -%>
+          <img class="uk-align-center" data-src="<%= url %>" data-width data-height uk-img id="<%= reader_urls[i] %>" onclick="showControl(<%= pages.to_a[i] %>);">
+        <%- end -%>
+        <%- if next_url -%>
+          <a class="next-url" href="<%= next_url %>"></a>
+        <%- end -%>
+      </div>
+      <%- if next_entry_url -%>
+        <button id="next-btn" class="uk-align-center uk-button uk-button-primary" hidden onclick="redirect('<%= next_entry_url %>')">Next Entry</button>
+      <%- else -%>
+        <button id="next-btn" class="uk-align-center uk-button uk-button-primary" hidden onclick="redirect('<%= exit_url %>')">Exit Reader</button>
+      <%- end -%>
+    </div>
+
+    <div id="hidden" hidden></div>
+
+    <div id="modal-sections" class="uk-flex-top" uk-modal>
+      <div class="uk-modal-dialog uk-margin-auto-vertical">
+        <button class="uk-modal-close-default" type="button" uk-close></button>
+        <div class="uk-modal-header">
+          <h3 class="uk-modal-title break-word"><%= entry.display_name %></h3>
+          <p class="uk-text-meta uk-margin-remove-bottom break-word"><%= entry.zip_path %></p>
+        </div>
+        <div class="uk-modal-body">
+          <div class="uk-margin">
+            <p id="progress-label"></p>
+          </div>
+          <div class="uk-margin">
+            <label class="uk-form-label" for="form-stacked-select">Jump to page</label>
+            <div class="uk-form-controls">
+              <select id="page-select" class="uk-select">
+                <%- (1..entry.pages).each do |p| -%>
+                  <option value="<%= p %>"><%= p %></option>
+                <%- end -%>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div class="uk-modal-footer uk-text-right">
+          <button class="uk-button uk-button-danger" type="button" onclick="redirect('<%= exit_url %>')">Exit Reader</button>
+        </div>
+      </div>
+    </div>
+    <script>
+      const base_url = "<%= base_url %>"
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit-icons.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
+    <script src="<%= base_url %>js/reader.js"></script>
+  </body>
+
+</html>

src/views/title.html.ecr

@@ -94,10 +94,10 @@
 </div>
 
 <% content_for "script" do %>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
-<script src="<%= base_url %>js/dots.js"></script>
+  <script src="<%= base_url %>js/dots.js"></script>
-<script src="<%= base_url %>js/alert.js"></script>
+  <script src="<%= base_url %>js/alert.js"></script>
-<script src="<%= base_url %>js/title.js"></script>
+  <script src="<%= base_url %>js/title.js"></script>
-<script src="<%= base_url %>js/search.js"></script>
+  <script src="<%= base_url %>js/search.js"></script>
-<script src="<%= base_url %>js/sort-items.js"></script>
+  <script src="<%= base_url %>js/sort-items.js"></script>
 <% end %>

src/views/user-edit.ecr

@@ -1,46 +0,0 @@
-<form action="<%= base_url %>admin/user/edit" method="post" accept-charset="utf-8">
-
-  <div class="uk-margin">
-    <label class="uk-form-label" for="form-stacked-text">Username</label>
-    <input class="uk-input" type="text" name="username" <%- if username -%> value=<%= username %> <%- end -%>>
-  </div>
-  <%- if new_user -%>
-  <div class="uk-margin">
-    <label class="uk-form-label" for="form-stacked-text">Password</label>
-    <input class="uk-input" type="password" name="password">
-  </div>
-  <%- end -%>
-  <div class="uk-margin">
-    <label class="uk-form-label" for="form-stacked-text">Admin Access</label>
-    <input class="uk-checkbox" type="checkbox" name="admin" <%- if admin == true -%> checked <%- end -%>>
-  </div>
-
-  <%- if !new_user -%>
-  <div>
-    <button class="uk-button uk-button-default" type="button" uk-toggle="target: #change-password">Change Password</button>
-    <div id="change-password" class="uk-margin" hidden>
-      <label class="uk-form-label" for="form-stacked-text">New Password</label>
-      <input class="uk-input" type="password" name="password">
-    </div>
-  </div>
-  <%- end -%>
-
-  <hr class="uk-divider-icon">
-
-  <input type="submit" value="Save" class="uk-button uk-button-primary">
-</form>
-
-<% content_for "script" do %>
-<script>
-  var username;
-  var error;
-  <%- if !new_user -%>
-  username = '/<%= username %>';
-  <%- end -%>
-  <%- if error -%>
-  error = '<%= error %>';
-  <%- end -%>
-</script>
-<script src="<%= base_url %>js/alert.js"></script>
-<script src="<%= base_url %>js/user-edit.js"></script>
-<% end %>

src/views/user-edit.html.ecr

@@ -0,0 +1,46 @@
+<form action="<%= base_url %>admin/user/edit" method="post" accept-charset="utf-8">
+
+  <div class="uk-margin">
+    <label class="uk-form-label" for="form-stacked-text">Username</label>
+    <input class="uk-input" type="text" name="username" <%- if username -%> value=<%= username %> <%- end -%>>
+  </div>
+  <%- if new_user -%>
+    <div class="uk-margin">
+      <label class="uk-form-label" for="form-stacked-text">Password</label>
+      <input class="uk-input" type="password" name="password">
+    </div>
+  <%- end -%>
+  <div class="uk-margin">
+    <label class="uk-form-label" for="form-stacked-text">Admin Access</label>
+    <input class="uk-checkbox" type="checkbox" name="admin" <%- if admin == true -%> checked <%- end -%>>
+  </div>
+
+  <%- unless new_user -%>
+    <div>
+      <button class="uk-button uk-button-default" type="button" uk-toggle="target: #change-password">Change Password</button>
+      <div id="change-password" class="uk-margin" hidden>
+        <label class="uk-form-label" for="form-stacked-text">New Password</label>
+        <input class="uk-input" type="password" name="password">
+      </div>
+    </div>
+  <%- end -%>
+
+  <hr class="uk-divider-icon">
+
+  <input type="submit" value="Save" class="uk-button uk-button-primary">
+</form>
+
+<% content_for "script" do %>
+  <script>
+    var username;
+    var error;
+    <%- if !new_user -%>
+      username = '/<%= username %>';
+    <%- end -%>
+      <%- if error -%>
+        error = '<%= error %>';
+      <%- end -%>
+  </script>
+  <script src="<%= base_url %>js/alert.js"></script>
+  <script src="<%= base_url %>js/user-edit.js"></script>
+<% end %>

src/views/user.ecr

@@ -1,31 +0,0 @@
-<table class="uk-table uk-table-divider">
-  <thead>
-    <tr>
-      <th>Username</th>
-      <th>Admin Access</th>
-      <th>Actions</th>
-    </tr>
-  </thead>
-  <tbody>
-    <%- users.each do |u| -%>
-    <tr>
-      <td><%= u[0] %></td>
-      <td><%= u[1] %></td>
-      <td>
-        <a href="<%= base_url %>admin/user/edit?username=<%= u[0] %>&admin=<%= u[1] %>" uk-icon="file-edit"></a>
-        <%- if u[0] != username %>
-        <a href="#" onclick="remove('<%= u[0] %>');return false;" uk-icon="trash"></a>
-        <%- end %>
-      </td>
-    </tr>
-    <%- end -%>
-  </tbody>
-</table>
-
-<a href="<%= base_url %>admin/user/edit" class="uk-button uk-button-primary">New User</a>
-
-
-<% content_for "script" do %>
-<script src="<%= base_url %>js/alert.js"></script>
-<script src="<%= base_url %>js/user.js"></script>
-<% end %>

src/views/user.html.ecr

@@ -0,0 +1,31 @@
+<table class="uk-table uk-table-divider">
+  <thead>
+    <tr>
+      <th>Username</th>
+      <th>Admin Access</th>
+      <th>Actions</th>
+    </tr>
+  </thead>
+  <tbody>
+    <%- users.each do |u| -%>
+      <tr>
+        <td><%= u[0] %></td>
+        <td><%= u[1] %></td>
+        <td>
+          <a href="<%= base_url %>admin/user/edit?username=<%= u[0] %>&admin=<%= u[1] %>" uk-icon="file-edit"></a>
+          <%- if u[0] != username %>
+            <a href="#" onclick="remove('<%= u[0] %>');return false;" uk-icon="trash"></a>
+          <%- end %>
+        </td>
+      </tr>
+    <%- end -%>
+  </tbody>
+</table>
+
+<a href="<%= base_url %>admin/user/edit" class="uk-button uk-button-primary">New User</a>
+
+
+<% content_for "script" do %>
+  <script src="<%= base_url %>js/alert.js"></script>
+  <script src="<%= base_url %>js/user.js"></script>
+<% end %>