Show page counts on chapter cards

Update Dockerfile to reduce the image size

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+patreon: hkalexling

.github/workflows/build.yml

@@ -0,0 +1,24 @@
+name: Build
+
+on:
+  push:
+    branches: [ master, dev ]
+  pull_request:
+    branches: [ master, dev ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    container:
+      image: crystallang/crystal:0.32.1-alpine
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Install dependencies
+      run: apk add --no-cache yarn yaml sqlite-static
+    - name: Build
+      run: make
+    - name: Run tests
+      run: make test

Dockerfile

@@ -1,18 +1,16 @@
-FROM crystallang/crystal:0.32.0
+FROM crystallang/crystal:0.32.1-alpine AS builder
-
-RUN apt-get update && apt-get install -y curl
-
-RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -
-RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
-RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
-
-RUN apt-get update && apt-get install -y nodejs yarn libsqlite3-dev
 
 WORKDIR /Mango
 
 COPY . .
 COPY package*.json .
+RUN apk add --no-cache yarn yaml sqlite-static \
+    && make static
 
-RUN make && make install
+FROM library/alpine
 
-CMD ["mango"]
+WORKDIR /
+
+COPY --from=builder /Mango/mango .
+
+CMD ["./mango"]

README.md

@@ -5,13 +5,14 @@
 
 # Mango
 
-[![Gitter](https://badges.gitter.im/mango-cr/mango.svg)](https://gitter.im/mango-cr/mango?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+[![Patreon](https://img.shields.io/badge/support-patreon-brightgreen?link=https://www.patreon.com/hkalexling)](https://www.patreon.com/hkalexling) ![Build](https://github.com/hkalexling/Mango/workflows/Build/badge.svg) [![Gitter](https://badges.gitter.im/mango-cr/mango.svg)](https://gitter.im/mango-cr/mango?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 
 Mango is a self-hosted manga server and reader. Its features include
 
 - Multi-user support
 - Dark/light mode switch
 - Supports both `.zip` and `.cbz` formats
+- Supports nested folders in library
 - Automatically stores reading progress
 - Built-in [MangaDex](https://mangadex.org/) downloader
 - The web reader is responsive and works well on mobile, so there is no need for a mobile app
@@ -74,20 +75,23 @@ mangadex:
 - `scan_interval_minutes` can be any non-negative integer. Setting it to `0` disables the periodic scan
 - `log_level` can be `debug`, `info`, `warn`, `error`, `fatal` or `off`. Setting it to `off` disables the logging
 
-### Required Library Structure
+### Library Structure
 
-Please make sure that your library directory has the following structure:
+You can organize your `.cbz/.zip` files in nested folders in the library directory. Here's an example:
 
 ```
 .
 ├── Manga 1
-│   └── Manga 1.cbz
+│   ├── Volume 1.cbz
+│   ├── Volume 2.cbz
+│   ├── Volume 3.cbz
+│   └── Volume 4.zip
 └── Manga 2
-    ├── Vol 0001.zip
+    └── Vol. 1
-    ├── Vol 0002.zip
+        └── Ch.1 - Ch.3
-    ├── Vol 0003.zip
+            ├── 1.zip 
-    ├── Vol 0004.zip
+            ├── 2.zip 
-    └── Vol 0005.zip
+            └── 3.zip
 ```
 
 ### Initial Login

public/css/mango.css

@@ -5,8 +5,20 @@
 	padding: 20px;
 }
 .uk-card-media-top {
-	max-height: 350px;
+	height: 250px;
-	overflow: hidden;
+}
+@media (min-width: 600px) {
+.uk-card-media-top {
+	height: 300px;
+}
+}
+.uk-card-media-top > img {
+	height: 100%;
+	width: 100%;
+	object-fit: cover;
+}
+.uk-card-title {
+	height: 3em;
 }
 .acard:hover {
 	text-decoration: none;
@@ -20,7 +32,7 @@
 #scan-status {
 	cursor: auto;
 }
-.uk-card-title {
+.break-word {
 	word-wrap: break-word;
 }
 .uk-logo > img {

public/js/dots.js

@@ -0,0 +1,18 @@
+const truncate = () => {
+	$('.acard .uk-card-title').each((i, e) => {
+		$(e).dotdotdot({
+			truncate: 'letter',
+			watch: true,
+			callback: (truncated) => {
+				if (truncated) {
+					$(e).attr('uk-tooltip', $(e).attr('data-title'));
+				}
+				else {
+					$(e).removeAttr('uk-tooltip');
+				}
+			}
+		});
+	});
+};
+
+truncate();

public/js/sort-items.js

@@ -93,8 +93,8 @@ $(() => {
 				else if (by === 'date')
 					res = $(a).attr('data-mtime') > $(b).attr('data-mtime');
 				else if (by === 'progress') {
-					const ap = $(a).attr('data-progress');
+					const ap = parseFloat($(a).attr('data-progress'));
-					const bp = $(b).attr('data-progress');
+					const bp = parseFloat($(b).attr('data-progress'));
 					if (ap === bp)
 						// if progress is the same, we compare by name
 						res = $(a).find('.uk-card-title').text() > $(b).find('.uk-card-title').text();

public/js/theme.js

@@ -15,48 +15,20 @@ const toggleTheme = () => {
 	saveTheme(newTheme);
 };
 
-// https://stackoverflow.com/a/28344281
-const hasClass = (ele,cls) => {
-  return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
-};
-const addClass = (ele,cls) => {
-  if (!hasClass(ele,cls)) ele.className += " "+cls;
-};
-const removeClass = (ele,cls) => {
-  if (hasClass(ele,cls)) {
-    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
-    ele.className=ele.className.replace(reg,' ');
-  }
-};
-
-const addClassToClass = (targetCls, newCls) => {
-	const elements = document.getElementsByClassName(targetCls);
-	for (let i = 0; i < elements.length; i++) {
-		addClass(elements[i], newCls);
-	}
-};
-
-const removeClassFromClass = (targetCls, newCls) => {
-	const elements = document.getElementsByClassName(targetCls);
-	for (let i = 0; i < elements.length; i++) {
-		removeClass(elements[i], newCls);
-	}
-};
-
 const setTheme = themeStr => {
 	if (themeStr === 'dark') {
-		document.getElementsByTagName('html')[0].style.background = 'rgb(20, 20, 20)';
+		$('html').css('background', 'rgb(20, 20, 20)');
-		addClass(document.getElementsByTagName('body')[0], 'uk-light');
+		$('body').addClass('uk-light');
-		addClassToClass('uk-card', 'uk-card-secondary');
+		$('.uk-card').addClass('uk-card-secondary');
-		removeClassFromClass('uk-card', 'uk-card-default');
+		$('.uk-card').removeClass('uk-card-default');
-		addClassToClass('ui-widget-content', 'dark');
+		$('.ui-widget-content').addClass('dark');
 	}
 	else {
-		document.getElementsByTagName('html')[0].style.background = '';
+		$('html').css('background', '');
-		removeClass(document.getElementsByTagName('body')[0], 'uk-light');
+		$('body').removeClass('uk-light');
-		removeClassFromClass('uk-card', 'uk-card-secondary');
+		$('.uk-card').removeClass('uk-card-secondary');
-		addClassToClass('uk-card', 'uk-card-default');
+		$('.uk-card').addClass('uk-card-default');
-		removeClassFromClass('ui-widget-content', 'dark');
+		$('.ui-widget-content').removeClass('dark');
 	}
 };
 
@@ -69,10 +41,3 @@ const styleModal = () => {
 
 // do it before document is ready to prevent the initial flash of white
 setTheme(getTheme());
-
-document.addEventListener('DOMContentLoaded', () => {
-	// because this script is attached at the top of HTML, the style on uk-card
-	// 	won't be applied because the elements are not available yet. We have to
-	// 	apply the theme again for it to take effect
-	setTheme(getTheme());
-}, false);

public/js/title.js

@@ -15,7 +15,7 @@ function showModal(encodedPath, pages, percentage, encodedeTitle, encodedEntryTi
 	if (percentage === 100) {
 		$('#read-btn').attr('hidden', '');
 	}
-	$('#modal-title').text(title);
+	$('#modal-title').text(entry);
 	$('#path-text').text(zipPath);
 	$('#pages-text').text(pages + ' pages');
 

shard.yml

@@ -1,5 +1,5 @@
 name: mango
-version: 0.1.0
+version: 0.2.4
 
 authors:
   - Alex Ling <hkalexling@gmail.com>

spec/util_spec.cr

@@ -25,4 +25,12 @@ describe "compare_alphanumerically" do
 			compare_alphanumerically a, b
 		}.should eq ary
 	end
+
+	# https://github.com/hkalexling/Mango/issues/22
+	it "handles numbers larger than Int32" do
+		ary = ["14410155591588.jpg", "21410155591588.png", "104410155591588.jpg"]
+		ary.reverse.sort {|a, b|
+			compare_alphanumerically a, b
+		}.should eq ary
+	end
 end

src/library.cr

@@ -15,10 +15,10 @@ struct Image
 end
 
 class Entry
-	JSON.mapping zip_path: String, book_title: String, title: String,
+	property zip_path : String, book_title : String, title : String,
-		size: String, pages: Int32, cover_url: String, id: String,
+		size : String, pages : Int32, cover_url : String, id : String,
-		title_id: String, encoded_path: String, encoded_title: String,
+		title_id : String, encoded_path : String, encoded_title : String,
-		mtime: Time
+		mtime : Time
 
 	def initialize(path, @book_title, @title_id, storage)
 		@zip_path = path
@@ -38,6 +38,19 @@ class Entry
 		@cover_url = "/api/page/#{@title_id}/#{@id}/1"
 		@mtime = File.info(@zip_path).modification_time
 	end
+
+	def to_json(json : JSON::Builder)
+		json.object do
+			{% for str in ["zip_path", "book_title", "title", "size",
+				"cover_url", "id", "title_id", "encoded_path",
+				"encoded_title"] %}
+				json.field {{str}}, @{{str.id}}
+			{% end %}
+			json.field "pages" {json.number @pages}
+			json.field "mtime" {json.number @mtime.to_unix}
+		end
+	end
+
 	def read_page(page_num)
 		Zip::File.open @zip_path do |file|
 			page = file.entries
@@ -63,27 +76,94 @@ class Entry
 end
 
 class Title
-	JSON.mapping dir: String, entries: Array(Entry), title: String,
+	property dir : String, parent_id : String, title_ids : Array(String),
-		id: String, encoded_title: String, mtime: Time, logger: MLogger
+		entries : Array(Entry), title : String, id : String,
+		encoded_title : String, mtime : Time
 
-	def initialize(dir : String, storage, @logger : MLogger)
+	def initialize(dir : String, @parent_id, storage,
+				   @logger : MLogger, @library : Library)
 		@dir = dir
 		@id = storage.get_id @dir, true
 		@title = File.basename dir
 		@encoded_title = URI.encode @title
-		@entries = (Dir.entries dir)
+		@title_ids = [] of String
-			.select { |path| [".zip", ".cbz"].includes? File.extname path }
+		@entries = [] of Entry
-			.map { |path| File.join dir, path }
+
-			.select { |path| valid_zip path }
+		Dir.entries(dir).each do |fn|
-			.map { |path|
+			next if fn.starts_with? "."
-				Entry.new path, @title, @id, storage
+			path = File.join dir, fn
-			}
+			if File.directory? path
-			.select { |e| e.pages > 0 }
+				title = Title.new path, @id, storage, @logger, library
-			.sort { |a, b| a.title <=> b.title }
+				next if title.entries.size == 0 && title.titles.size == 0
+				@library.title_hash[title.id] = title
+				@title_ids << title.id
+				next
+			end
+			if [".zip", ".cbz"].includes? File.extname path
+				next if !valid_zip path
+				entry = Entry.new path, @title, @id, storage
+				@entries << entry if entry.pages > 0
+			end
+		end
+
+		@title_ids.sort! do |a, b|
+			compare_alphanumerically @library.title_hash[a].title,
+				@library.title_hash[b].title
+		end
+		@entries.sort! do |a, b|
+			compare_alphanumerically a.title, b.title
+		end
+
 		mtimes = [File.info(dir).modification_time]
+		mtimes += @title_ids.map{|e| @library.title_hash[e].mtime}
 		mtimes += @entries.map{|e| e.mtime}
 		@mtime = mtimes.max
 	end
+
+	def to_json(json : JSON::Builder)
+		json.object do
+			{% for str in ["dir", "title", "id", "encoded_title"] %}
+				json.field {{str}}, @{{str.id}}
+			{% end %}
+			json.field "mtime" {json.number @mtime.to_unix}
+			json.field "titles" do
+				json.raw self.titles.to_json
+			end
+			json.field "entries" do
+				json.raw @entries.to_json
+			end
+			json.field "parents" do
+				json.array do
+					self.parents.each do |title|
+						json.object do
+							json.field "title", title.title
+							json.field "id", title.id
+						end
+					end
+				end
+			end
+		end
+	end
+
+	def titles
+		@title_ids.map {|tid| @library.get_title! tid}
+	end
+
+	def parents
+		ary = [] of Title
+		tid = @parent_id
+		while !tid.empty?
+			title = @library.get_title! tid
+			ary << title
+			tid = title.parent_id
+		end
+		ary
+	end
+
+	def size
+		@entries.size + @title_ids.size
+	end
+
 	# When downloading from MangaDex, the zip/cbz file would not be valid
 	#	before the download is completed. If we scan the zip file,
 	#	Entry.new would throw, so we use this method to check before
@@ -128,10 +208,11 @@ class Title
 		info = TitleInfo.new @dir
 		page = load_progress username, entry
 		entry_obj = @entries.find{|e| e.title == entry}
-		return 0 if entry_obj.nil?
+		return 0.0 if entry_obj.nil?
 		page / entry_obj.pages
 	end
 	def load_percetage(username)
+		return 0.0 if @entries.empty?
 		read_pages = total_pages = 0
 		@entries.each do |e|
 			read_pages += load_progress username, e.title
@@ -150,10 +231,7 @@ class TitleInfo
 	# { user1: { entry1: 10, entry2: 0 } }
 	include JSON::Serializable
 
-	@[JSON::Field(key: "comment")]
 	property comment = "Generated by Mango. DO NOT EDIT!"
-
-	@[JSON::Field(key: "progress")]
 	property progress : Hash(String, Hash(String, Int32))
 
 	def initialize(title_dir)
@@ -175,13 +253,14 @@ class TitleInfo
 end
 
 class Library
-	JSON.mapping dir: String, titles: Array(Title), scan_interval: Int32,
+	property dir : String, title_ids : Array(String), scan_interval : Int32,
-		logger: MLogger, storage: Storage
+		logger : MLogger, storage : Storage, title_hash : Hash(String, Title)
 
 	def initialize(@dir, @scan_interval, @logger, @storage)
 		# explicitly initialize @titles to bypass the compiler check. it will
 		#	be filled with actual Titles in the `scan` call below
-		@titles = [] of Title
+		@title_ids = [] of String
+		@title_hash = {} of String => Title
 
 		return scan if @scan_interval < 1
 		spawn do
@@ -189,13 +268,27 @@ class Library
 				start = Time.local
 				scan
 				ms = (Time.local - start).total_milliseconds
-				@logger.info "Scanned #{@titles.size} titles in #{ms}ms"
+				@logger.info "Scanned #{@title_ids.size} titles in #{ms}ms"
 				sleep @scan_interval * 60
 			end
 		end
 	end
+	def titles
+		@title_ids.map {|tid| self.get_title!(tid) }
+	end
+	def to_json(json : JSON::Builder)
+		json.object do
+			json.field "dir", @dir
+			json.field "titles" do
+				json.raw self.titles.to_json
+			end
+		end
+	end
 	def get_title(tid)
-		@titles.find { |t| t.id == tid }
+		@title_hash[tid]?
+	end
+	def get_title!(tid)
+		@title_hash[tid]
 	end
 	def scan
 		unless Dir.exists? @dir
@@ -203,11 +296,18 @@ class Library
 				"Attempting to create it"
 			Dir.mkdir_p @dir
 		end
-		@titles = (Dir.entries @dir)
+		@title_ids.clear
-			.select { |path| File.directory? File.join @dir, path }
+		(Dir.entries @dir)
-			.map { |path| Title.new File.join(@dir, path), @storage, @logger }
+			.select { |fn| !fn.starts_with? "." }
-			.select { |title| !title.entries.empty? }
+			.map { |fn| File.join @dir, fn }
+			.select { |path| File.directory? path }
+			.map { |path| Title.new path, "", @storage, @logger, self }
+			.select { |title| !(title.entries.empty? && title.titles.empty?) }
 			.sort { |a, b| a.title <=> b.title }
+			.each do |title|
+				@title_hash[title.id] = title
+				@title_ids << title.id
+			end
 		@logger.debug "Scan completed"
 	end
 end

src/mangadex/downloader.cr

@@ -249,6 +249,7 @@ module MangaDex
 
 	class Downloader
 		property stopped = false
+		@downloading = false
 
 		def initialize(@queue : Queue, @api : API, @library_path : String,
 					   @wait_seconds : Int32, @retries : Int32,
@@ -258,7 +259,7 @@ module MangaDex
 			spawn do
 				loop do
 					sleep 1.second
-					next if @stopped
+					next if @stopped || @downloading
 					begin
 						job = @queue.pop
 						next if job.nil?
@@ -271,7 +272,7 @@ module MangaDex
 		end
 
 		private def download(job : Job)
-			@stopped = true
+			@downloading = true
 			@queue.set_status JobStatus::Downloading, job
 			begin
 				chapter = @api.get_chapter(job.id)
@@ -281,7 +282,7 @@ module MangaDex
 				unless e.message.nil?
 					@queue.add_message e.message.not_nil!, job
 				end
-				@stopped = false
+				@downloading = false
 				return
 			end
 			@queue.set_pages chapter.pages.size, job
@@ -346,7 +347,7 @@ module MangaDex
 				else
 					@queue.set_status JobStatus::MissingPages, job
 				end
-				@stopped = false
+				@downloading = false
 			end
 		end
 

src/mango.cr

@@ -3,7 +3,7 @@ require "./context"
 require "./mangadex/*"
 require "option_parser"
 
-VERSION = "0.2.0"
+VERSION = "0.2.4"
 
 config_path = nil
 

src/routes/api.cr

@@ -26,7 +26,7 @@ class APIRouter < Router
 			end
 		end
 
-		get "/api/book/:title" do |env|
+		get "/api/book/:tid" do |env|
 			begin
 				tid = env.params.url["tid"]
 				title = @context.library.get_title tid

src/routes/main.cr

@@ -26,12 +26,14 @@ class MainRouter < Router
 					.not_nil!
 
 				cookie = HTTP::Cookie.new "token", token
+				cookie.expires = Time.local.shift years: 1
 				env.response.cookies << cookie
 				env.redirect "/"
 			rescue
 				env.redirect "/login"
 			end
 		end
+
 		get "/" do |env|
 			titles = @context.library.titles
 			username = get_username env

src/util.cr

@@ -1,3 +1,5 @@
+require "big"
+
 IMGS_PER_PAGE = 5
 
 macro layout(name)
@@ -56,7 +58,7 @@ def compare_alphanumerically(c, d)
 		return -1 if a.nil?
 		return 1 if b.nil?
 		if is_numeric(a) && is_numeric(b)
-			compare = a.to_i <=> b.to_i
+			compare = a.to_big_i <=> b.to_big_i
 			return compare if compare != 0
 		else
 			compare = a <=> b

src/views/index.ecr

@@ -26,12 +26,18 @@
       <a class="acard" href="/book/<%= t.id %>">
         <div class="uk-card uk-card-default">
             <div class="uk-card-media-top">
-              <img src="<%= t.entries[0].cover_url %>" alt="">
+			<%- if t.entries.size > 0 -%>
+              <img data-src="<%= t.entries[0].cover_url %>" data-width data-height alt="" uk-img>
+			<%- else -%>
+              <img data-src="/img/icon.png" data-width data-height alt="" uk-img>
+			<%- end -%>
             </div>
             <div class="uk-card-body">
+			<%- if t.entries.size > 0 -%>
               <div class="uk-card-badge uk-label"><%= (percentage[i] * 100).round(1) %>%</div>
-              <h3 class="uk-card-title"><%= t.title %></h3>
+			<%- end -%>
-              <p><%= t.entries.size %> entries</p>
+			<h3 class="uk-card-title break-word" data-title="<%= t.title.gsub("\"", "&quot;") %>"><%= t.title %></h3>
+              <p><%= t.size %> entries</p>
             </div>
         </div>
       </a>
@@ -40,6 +46,8 @@
 </div>
 
 <% content_for "script" do %>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
+<script src="/js/dots.js"></script>
 <script src="/js/search.js"></script>
 <script src="/js/sort-items.js"></script>
 <% end %>

src/views/layout.ecr

@@ -10,10 +10,11 @@
     <link rel="stylesheet" href="/css/mango.css" />
 	<script defer src="/js/fontawesome.min.js"></script>
 	<script defer src="/js/solid.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+	<script src="/js/theme.js"></script>
   </head>
 
   <body>
-	<script src="/js/theme.js"></script>
     <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">
@@ -59,7 +60,9 @@
         <%= content %>
       </div>
     </div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+	<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>
 

src/views/title.ecr

@@ -1,5 +1,12 @@
 <h2 class=uk-title><%= title.title %></h2>
-<p class="uk-text-meta"><%= title.entries.size %> entries found</p>
+<ul class="uk-breadcrumb">
+	<li><a href="/">Library</a></li>
+	<%- title.parents.each do |t| -%>
+	<li><a href="/book/<%= t.id %>"><%= t.title %></a></li>
+	<%- end -%>
+	<li class="uk-disabled"><a><%= title.title %></a></li>
+</ul>
+<p class="uk-text-meta"><%= title.size %> entries found</p>
 <div class="uk-grid-small" uk-grid>
 	<div class="uk-margin-bottom uk-width-3-4@s">
 		<form class="uk-search uk-search-default">
@@ -23,16 +30,36 @@
 	</div>
 </div>
 <div id="item-container" class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
+	<%- title.titles.each_with_index do |t, i| -%>
+	<div class="item" data-mtime="<%= t.mtime.to_unix %>" data-progress="0.0">
+      <a class="acard" href="/book/<%= t.id %>">
+        <div class="uk-card uk-card-default">
+            <div class="uk-card-media-top">
+			<%- if t.entries.size > 0 -%>
+              <img data-src="<%= t.entries[0].cover_url %>" data-width data-height alt="" uk-img>
+			<%- else -%>
+              <img data-src="/img/icon.png" data-width data-height alt="" uk-img>
+			<%- end -%>
+            </div>
+            <div class="uk-card-body">
+			<h3 class="uk-card-title break-word" data-title="<%= t.title.gsub("\"", "&quot;") %>"><%= t.title %></h3>
+              <p><%= t.size %> entries</p>
+            </div>
+        </div>
+      </a>
+	</div>
+	<%- end -%>
   <%- title.entries.each_with_index do |e, i| -%>
   <div class="item" data-mtime="<%= e.mtime.to_unix %>" data-progress="<%= percentage[i] %>">
       <a class="acard">
 		  <div class="uk-card uk-card-default" onclick="showModal(&quot;<%= e.encoded_path %>&quot;, '<%= e.pages %>', <%= (percentage[i] * 100).round(1) %>, &quot;<%= title.encoded_title %>&quot;, &quot;<%= e.encoded_title %>&quot;, '<%= e.title_id %>', '<%= e.id %>')">
           <div class="uk-card-media-top">
-            <img src="<%= e.cover_url %>" alt="">
+            <img data-src="<%= e.cover_url %>" alt="" data-width data-height uk-img>
           </div>
           <div class="uk-card-body">
             <div class="uk-card-badge uk-label"><%= (percentage[i] * 100).round(1) %>%</div>
-            <h3 class="uk-card-title"><%= e.title %></h3>
+			<h3 class="uk-card-title break-word" data-title="<%= e.title.gsub("\"", "&quot;") %>"><%= e.title %></h3>
+              <p><%= e.pages %> pages</p>
           </div>
       </div>
       </a>
@@ -44,8 +71,8 @@
   <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" id="modal-title"></h3>
+      <h3 class="uk-modal-title break-word" id="modal-title"></h3>
-      <p class="uk-text-meta uk-margin-remove-bottom" id="path-text"></p>
+      <p class="uk-text-meta uk-margin-remove-bottom break-word" id="path-text"></p>
       <p class="uk-text-meta uk-margin-remove-top" id="pages-text"></p>
     </div>
     <div class="uk-modal-body">
@@ -64,6 +91,8 @@
 </div>
 
 <% content_for "script" do %>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
+<script src="/js/dots.js"></script>
 <script src="/js/alert.js"></script>
 <script src="/js/title.js"></script>
 <script src="/js/search.js"></script>