Use yaml-static in Dockerfile

Fix reader buttons stacking on mobile
Use yaml-static
2026-01-24 00:03:14 -05:00 · 2021-08-18 19:42:32 +09:00 · 2021-03-29 00:41:33 +00:00 · 2021-03-28 12:49:50 +00:00 · 2021-03-28 11:56:06 +00:00 · 2021-03-28 11:49:49 +00:00
65 changed files with 1994 additions and 1132 deletions
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -95,6 +95,15 @@
      "contributions": [
        "code"
      ]
+    },
+    {
+      "login": "davidkna",
+      "name": "David Knaack",
+      "avatar_url": "https://avatars.githubusercontent.com/u/835177?v=4",
+      "profile": "https://github.com/davidkna",
+      "contributions": [
+        "infra"
+      ]
    }
  ],
  "contributorsPerLine": 7,
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -12,12 +12,12 @@ jobs:

    runs-on: ubuntu-latest
    container:
-      image: crystallang/crystal:0.35.1-alpine
+      image: crystallang/crystal:0.36.1-alpine

    steps:
    - uses: actions/checkout@v2
    - name: Install dependencies
-      run: apk add --no-cache yarn yaml sqlite-static libarchive-dev libarchive-static acl-static expat-static zstd-static lz4-static bzip2-static libjpeg-turbo-dev libpng-dev tiff-dev
+      run: apk add --no-cache yarn yaml-static sqlite-static libarchive-dev libarchive-static acl-static expat-static zstd-static lz4-static bzip2-static libjpeg-turbo-dev libpng-dev tiff-dev
    - name: Build
      run: make static || make static
    - name: Linter
--- a/.gitignore
+++ b/.gitignore
@@ -13,3 +13,4 @@ public/css/uikit.css
 public/img/*.svg
 public/js/*.min.js
 public/css/*.css
+public/webfonts
--- a/8
+++ b/8
@@ -1,15 +1,15 @@
-FROM crystallang/crystal:0.35.1-alpine AS builder
+FROM crystallang/crystal:0.36.1-alpine AS builder

 WORKDIR /Mango

 COPY . .
-RUN apk add --no-cache yarn yaml sqlite-static libarchive-dev libarchive-static acl-static expat-static zstd-static lz4-static bzip2-static libjpeg-turbo-dev libpng-dev tiff-dev
+RUN apk add --no-cache yarn yaml-static sqlite-static libarchive-dev libarchive-static acl-static expat-static zstd-static lz4-static bzip2-static libjpeg-turbo-dev libpng-dev tiff-dev
 RUN make static || make static

 FROM library/alpine

 WORKDIR /

-COPY --from=builder /Mango/mango .
+COPY --from=builder /Mango/mango /usr/local/bin/mango

-CMD ["./mango"]
+CMD ["/usr/local/bin/mango"]
--- a/Dockerfile.arm32v7
+++ b/Dockerfile.arm32v7
@@ -2,13 +2,14 @@ FROM arm32v7/ubuntu:18.04

 RUN apt-get update && apt-get install -y wget git make llvm-8 llvm-8-dev g++ libsqlite3-dev libyaml-dev libgc-dev libssl-dev libcrypto++-dev libevent-dev libgmp-dev zlib1g-dev libpcre++-dev pkg-config libarchive-dev libxml2-dev libacl1-dev nettle-dev liblzo2-dev liblzma-dev libbz2-dev libjpeg-turbo8-dev libpng-dev libtiff-dev

-RUN git clone https://github.com/crystal-lang/crystal && cd crystal && git checkout 0.35.1 && make deps && cd ..
+RUN git clone https://github.com/crystal-lang/crystal && cd crystal && git checkout 0.36.1 && make deps && cd ..
 RUN git clone https://github.com/kostya/myhtml && cd myhtml/src/ext && git checkout v1.5.0 && make && cd ..
 RUN git clone https://github.com/jessedoyle/duktape.cr && cd duktape.cr/ext && git checkout v0.20.0 && make && cd ..
 RUN git clone https://github.com/hkalexling/image_size.cr && cd image_size.cr && git checkout v0.2.0 && make && cd ..

 COPY mango-arm32v7.o .

-RUN cc 'mango-arm32v7.o' -o 'mango' -rdynamic -lxml2 -L/image_size.cr/ext/libwebp -lwebp -L/image_size.cr/ext/stbi -lstbi /myhtml/src/ext/modest-c/lib/libmodest_static.a -L/duktape.cr/src/.build/lib -L/duktape.cr/src/.build/include -lduktape -lm `pkg-config libarchive --libs` -lz `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libssl || printf %s '-lssl -lcrypto'` `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libcrypto || printf %s '-lcrypto'` -lgmp -lsqlite3 -lyaml -lpcre -lm /usr/lib/arm-linux-gnueabihf/libgc.so -lpthread /crystal/src/ext/libcrystal.a -levent -lrt -ldl -L/usr/bin/../lib/crystal/lib -L/usr/bin/../lib/crystal/lib
+RUN cc 'mango-arm32v7.o' -o '/usr/local/bin/mango' -rdynamic -lxml2 -L/image_size.cr/ext/libwebp -lwebp -L/image_size.cr/ext/stbi -lstbi /myhtml/src/ext/modest-c/lib/libmodest_static.a -L/duktape.cr/src/.build/lib -L/duktape.cr/src/.build/include -lduktape -lm `pkg-config libarchive --libs` -lz `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libssl || printf %s '-lssl -lcrypto'` `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libcrypto || printf %s '-lcrypto'` -lgmp -lsqlite3 -lyaml -lpcre -lm /usr/lib/arm-linux-gnueabihf/libgc.so -lpthread /crystal/src/ext/libcrystal.a -levent -lrt -ldl -L/usr/bin/../lib/crystal/lib -L/usr/bin/../lib/crystal/lib
+
+CMD ["/usr/local/bin/mango"]

-CMD ["./mango"]
--- a/Dockerfile.arm64v8
+++ b/Dockerfile.arm64v8
@@ -2,13 +2,13 @@ FROM arm64v8/ubuntu:18.04

 RUN apt-get update && apt-get install -y wget git make llvm-8 llvm-8-dev g++ libsqlite3-dev libyaml-dev libgc-dev libssl-dev libcrypto++-dev libevent-dev libgmp-dev zlib1g-dev libpcre++-dev pkg-config libarchive-dev libxml2-dev libacl1-dev nettle-dev liblzo2-dev liblzma-dev libbz2-dev libjpeg-turbo8-dev libpng-dev libtiff-dev

-RUN git clone https://github.com/crystal-lang/crystal && cd crystal && git checkout 0.35.1 && make deps && cd ..
+RUN git clone https://github.com/crystal-lang/crystal && cd crystal && git checkout 0.36.1 && make deps && cd ..
 RUN git clone https://github.com/kostya/myhtml && cd myhtml/src/ext && git checkout v1.5.0 && make && cd ..
 RUN git clone https://github.com/jessedoyle/duktape.cr && cd duktape.cr/ext && git checkout v0.20.0 && make && cd ..
 RUN git clone https://github.com/hkalexling/image_size.cr && cd image_size.cr && git checkout v0.2.0 && make && cd ..

 COPY mango-arm64v8.o .

-RUN cc 'mango-arm64v8.o' -o 'mango' -rdynamic -lxml2 -L/image_size.cr/ext/libwebp -lwebp -L/image_size.cr/ext/stbi -lstbi /myhtml/src/ext/modest-c/lib/libmodest_static.a -L/duktape.cr/src/.build/lib -L/duktape.cr/src/.build/include -lduktape -lm `pkg-config libarchive --libs` -lz `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libssl || printf %s '-lssl -lcrypto'` `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libcrypto || printf %s '-lcrypto'` -lgmp -lsqlite3 -lyaml -lpcre -lm /usr/lib/aarch64-linux-gnu/libgc.so -lpthread /crystal/src/ext/libcrystal.a -levent -lrt -ldl -L/usr/bin/../lib/crystal/lib -L/usr/bin/../lib/crystal/lib
+RUN cc 'mango-arm64v8.o' -o '/usr/local/bin/mango' -rdynamic -lxml2 -L/image_size.cr/ext/libwebp -lwebp -L/image_size.cr/ext/stbi -lstbi /myhtml/src/ext/modest-c/lib/libmodest_static.a -L/duktape.cr/src/.build/lib -L/duktape.cr/src/.build/include -lduktape -lm `pkg-config libarchive --libs` -lz `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libssl || printf %s '-lssl -lcrypto'` `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libcrypto || printf %s '-lcrypto'` -lgmp -lsqlite3 -lyaml -lpcre -lm /usr/lib/aarch64-linux-gnu/libgc.so -lpthread /crystal/src/ext/libcrystal.a -levent -lrt -ldl -L/usr/bin/../lib/crystal/lib -L/usr/bin/../lib/crystal/lib

-CMD ["./mango"]
+CMD ["/usr/local/bin/mango"]
--- a/README.md
+++ b/README.md
@@ -52,7 +52,7 @@ The official docker images are available on [Dockerhub](https://hub.docker.com/r
 ### CLI

 ```
-  Mango - Manga Server and Web Reader. Version 0.20.0
+  Mango - Manga Server and Web Reader. Version 0.22.0

  Usage:

@@ -75,6 +75,7 @@ The default config file location is `~/.config/mango/config.yml`. It might be di

 ```yaml
 ---
+host: 0.0.0.0
 port: 9000
 base_url: /
 session_secret: mango-session-secret
@@ -89,14 +90,16 @@ download_timeout_seconds: 30
 page_margin: 30
 disable_login: false
 default_username: ""
+auth_proxy_header_name: ""
 mangadex:
  base_url: https://mangadex.org
-  api_url: https://mangadex.org/api
+  api_url: https://api.mangadex.org/v2
  download_wait_seconds: 5
  download_retries: 4
  download_queue_db_path: ~/mango/queue.db
  chapter_rename_rule: '[Vol.{volume} ][Ch.{chapter} ]{title|id}'
  manga_rename_rule: '{title}'
+  subscription_update_interval_hours: 24
 ```

 - `scan_interval_minutes`, `thumbnail_generation_interval_hours` and `db_optimization_interval_hours` can be any non-negative integer. Setting them to `0` disables the periodic tasks
@@ -172,6 +175,7 @@ Please check the [development guideline](https://github.com/hkalexling/Mango/wik
  <tr>
    <td align="center"><a href="https://github.com/Leeingnyo"><img src="https://avatars0.githubusercontent.com/u/6760150?v=4?s=100" width="100px;" alt=""/><br /><sub><b>이인용</b></sub></a><br /><a href="https://github.com/hkalexling/Mango/commits?author=Leeingnyo" title="Code">💻</a></td>
    <td align="center"><a href="http://h45h74x.eu.org"><img src="https://avatars1.githubusercontent.com/u/27204033?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Simon</b></sub></a><br /><a href="https://github.com/hkalexling/Mango/commits?author=h45h74x" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/davidkna"><img src="https://avatars.githubusercontent.com/u/835177?v=4?s=100" width="100px;" alt=""/><br /><sub><b>David Knaack</b></sub></a><br /><a href="#infra-davidkna" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
  </tr>
 </table>

--- a/gulpfile.js
+++ b/gulpfile.js
@@ -4,26 +4,25 @@ const minify = require('gulp-babel-minify');
 const minifyCss = require('gulp-minify-css');
 const less = require('gulp-less');

-// Copy libraries from node_moduels to public/js
-gulp.task('copy-js', () => {
-	return gulp.src([
-			'node_modules/@fortawesome/fontawesome-free/js/fontawesome.min.js',
-			'node_modules/@fortawesome/fontawesome-free/js/solid.min.js',
-			'node_modules/uikit/dist/js/uikit.min.js',
-			'node_modules/uikit/dist/js/uikit-icons.min.js'
-		])
-		.pipe(gulp.dest('public/js'));
-});
-
-// Copy UIKit SVG icons to public/img
-gulp.task('copy-uikit-icons', () => {
+gulp.task('copy-img', () => {
 	return gulp.src('node_modules/uikit/src/images/backgrounds/*.svg')
 		.pipe(gulp.dest('public/img'));
 });

+gulp.task('copy-font', () => {
+	return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff**')
+		.pipe(gulp.dest('public/webfonts'));
+});
+
+// Copy files from node_modules
+gulp.task('node-modules-copy', gulp.parallel('copy-img', 'copy-font'));
+
 // Compile less
 gulp.task('less', () => {
-	return gulp.src('public/css/*.less')
+	return gulp.src([
+			'public/css/mango.less',
+			'public/css/tags.less'
+		])
 		.pipe(less())
 		.pipe(gulp.dest('public/css'));
 });
@@ -54,14 +53,19 @@ gulp.task('minify-css', () => {

 // Copy static files (includeing images) to dist
 gulp.task('copy-files', () => {
-	return gulp.src(['public/img/*', 'public/*.*', 'public/js/*.min.js'], {
+	return gulp.src([
+			'public/*.*',
+			'public/img/*',
+			'public/webfonts/*',
+			'public/js/*.min.js'
+		], {
 			base: 'public'
 		})
 		.pipe(gulp.dest('dist'));
 });

 // Set up the public folder for development
-gulp.task('dev', gulp.parallel('copy-js', 'copy-uikit-icons', 'less'));
+gulp.task('dev', gulp.parallel('node-modules-copy', 'less'));

 // Set up the dist folder for deployment
 gulp.task('deploy', gulp.parallel('babel', 'minify-css', 'copy-files'));
--- a/migration/md_account.11.cr
+++ b/migration/md_account.11.cr
@@ -0,0 +1,20 @@
+class CreateMangaDexAccount < MG::Base
+  def up : String
+    <<-SQL
+    CREATE TABLE md_account (
+      username TEXT NOT NULL PRIMARY KEY,
+      token TEXT NOT NULL,
+      expire INTEGER NOT NULL,
+      FOREIGN KEY (username) REFERENCES users (username)
+        ON UPDATE CASCADE
+        ON DELETE CASCADE
+    );
+    SQL
+  end
+
+  def down : String
+    <<-SQL
+    DROP TABLE md_account;
+    SQL
+  end
+end
--- a/migration/subscription.12.cr
+++ b/migration/subscription.12.cr
@@ -0,0 +1,31 @@
+class CreateSubscription < MG::Base
+  def up : String
+    # We allow multiple subscriptions for the same manga.
+    # This can be useful for example when you want to download from multiple
+    #   groups.
+    <<-SQL
+    CREATE TABLE subscription (
+      id INTEGER PRIMARY KEY,
+      manga_id INTEGER NOT NULL,
+      language TEXT,
+      group_id INTEGER,
+      min_volume INTEGER,
+      max_volume INTEGER,
+      min_chapter INTEGER,
+      max_chapter INTEGER,
+      last_checked INTEGER NOT NULL,
+      created_at INTEGER NOT NULL,
+      username TEXT NOT NULL,
+      FOREIGN KEY (username) REFERENCES users (username)
+        ON UPDATE CASCADE
+        ON DELETE CASCADE
+    );
+    SQL
+  end
+
+  def down : String
+    <<-SQL
+    DROP TABLE subscription;
+    SQL
+  end
+end
--- a/public/css/mango.less
+++ b/public/css/mango.less
@@ -1,3 +1,16 @@
+// UIKit
+@import "./uikit.less";
+
+// FontAwesome
+@import "../../node_modules/@fortawesome/fontawesome-free/less/fontawesome.less";
+@import "../../node_modules/@fortawesome/fontawesome-free/less/solid.less";
+
+@font-face {
+  src: url('@{fa-font-path}/fa-solid-900.woff2');
+  src: url('@{fa-font-path}/fa-solid-900.woff2') format('woff2'),
+    url('@{fa-font-path}/fa-solid-900.woff') format('woff');
+}
+
 // Item cards
 .item .uk-card {
    cursor: pointer;
@@ -21,9 +34,11 @@
 	.uk-card-body {
 		padding: 20px;
 		.uk-card-title {
-			max-height: 3em;
 			font-size: 1rem;
 		}
+		.uk-card-title:not(.free-height) {
+			max-height: 3em;
+		}
 	}
 }

--- a/public/css/uikit.less
+++ b/public/css/uikit.less
@@ -43,3 +43,22 @@
@internal-list-bullet-image:                     "../img/list-bullet.svg";
@internal-accordion-open-image:                  "../img/accordion-open.svg";
@internal-accordion-close-image:                 "../img/accordion-close.svg";
+
+.hook-card-default() {
+	.uk-light & {
+		background: @card-secondary-background;
+		color: @card-secondary-color;
+	}
+}
+
+.hook-card-default-title() {
+	.uk-light & {
+		color: @card-secondary-title-color;
+	}
+}
+
+.hook-card-default-hover() {
+	.uk-light & {
+		background-color: @card-secondary-hover-background;
+	}
+}
--- a/public/js/common.js
+++ b/public/js/common.js
@@ -117,14 +117,10 @@ const setTheme = (theme) => {
 	if (theme === 'dark') {
 		$('html').css('background', 'rgb(20, 20, 20)');
 		$('body').addClass('uk-light');
-		$('.uk-card').addClass('uk-card-secondary');
-		$('.uk-card').removeClass('uk-card-default');
 		$('.ui-widget-content').addClass('dark');
 	} else {
 		$('html').css('background', '');
 		$('body').removeClass('uk-light');
-		$('.uk-card').removeClass('uk-card-secondary');
-		$('.uk-card').addClass('uk-card-default');
 		$('.ui-widget-content').removeClass('dark');
 	}
 };
--- a/public/js/download.js
+++ b/public/js/download.js
@@ -1,305 +1,379 @@
-$(() => {
-	$('#search-input').keypress(event => {
-		if (event.which === 13) {
-			search();
-		}
-	});
-	$('.filter-field').each((i, ele) => {
-		$(ele).change(() => {
-			buildTable();
-		});
-	});
-});
-const selectAll = () => {
-	$('tbody > tr').each((i, e) => {
-		$(e).addClass('ui-selected');
-	});
-};
-const unselect = () => {
-	$('tbody > tr').each((i, e) => {
-		$(e).removeClass('ui-selected');
-	});
-};
-const download = () => {
-	const selected = $('tbody > tr.ui-selected');
-	if (selected.length === 0) return;
-	UIkit.modal.confirm(`Download ${selected.length} selected chapters?`).then(() => {
-		$('#download-btn').attr('hidden', '');
-		$('#download-spinner').removeAttr('hidden');
-		const ids = selected.map((i, e) => {
-			return $(e).find('td').first().text();
-		}).get();
-		const chapters = globalChapters.filter(c => ids.indexOf(c.id) >= 0);
-		console.log(ids);
-		$.ajax({
-				type: 'POST',
-				url: base_url + 'api/admin/mangadex/download',
-				data: JSON.stringify({
-					chapters: chapters
-				}),
-				contentType: "application/json",
-				dataType: 'json'
-			})
-			.done(data => {
-				console.log(data);
-				if (data.error) {
-					alert('danger', `Failed to add chapters to the download queue. Error: ${data.error}`);
+const downloadComponent = () => {
+	return {
+		chaptersLimit: 1000,
+		loading: false,
+		addingToDownload: false,
+		searchAvailable: false,
+		searchInput: '',
+		data: {},
+		chapters: [],
+		mangaAry: undefined, // undefined: not searching; []: searched but no result
+		candidateManga: {},
+		langChoice: 'All',
+		groupChoice: 'All',
+		chapterRange: '',
+		volumeRange: '',
+
+		get languages() {
+			const set = new Set();
+			if (this.data.chapters) {
+				this.data.chapters.forEach(chp => {
+					set.add(chp.language);
+				});
+			}
+			const ary = [...set].sort();
+			ary.unshift('All');
+			return ary;
+		},
+
+		get groups() {
+			const set = new Set();
+			if (this.data.chapters) {
+				this.data.chapters.forEach(chp => {
+					Object.keys(chp.groups).forEach(g => {
+						set.add(g);
+					});
+				});
+			}
+			const ary = [...set].sort();
+			ary.unshift('All');
+			return ary;
+		},
+
+		init() {
+			const tableObserver = new MutationObserver(() => {
+				console.log('table mutated');
+				$("#selectable").selectable({
+					filter: 'tr'
+				});
+			});
+			tableObserver.observe($('table').get(0), {
+				childList: true,
+				subtree: true
+			});
+
+			$.getJSON(`${base_url}api/admin/mangadex/expires`)
+				.done((data) => {
+					if (data.error) {
+						alert('danger', 'Failed to check MangaDex integration status. Error: ' + data.error);
+						return;
+					}
+					if (data.expires && data.expires > Math.floor(Date.now() / 1000))
+						this.searchAvailable = true;
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to check MangaDex integration status. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				})
+		},
+
+		filtersUpdated() {
+			if (!this.data.chapters)
+				this.chapters = [];
+			const filters = {
+				chapter: this.parseRange(this.chapterRange),
+				volume: this.parseRange(this.volumeRange),
+				lang: this.langChoice,
+				group: this.groupChoice
+			};
+			console.log('filters:', filters);
+			let _chapters = this.data.chapters.slice();
+			Object.entries(filters).forEach(([k, v]) => {
+				if (v === 'All') return;
+				if (k === 'group') {
+					_chapters = _chapters.filter(c => {
+						const unescaped_groups = Object.entries(c.groups).map(([g, id]) => this.unescapeHTML(g));
+						return unescaped_groups.indexOf(v) >= 0;
+					});
 					return;
 				}
-				const successCount = parseInt(data.success);
-				const failCount = parseInt(data.fail);
-				UIkit.modal.confirm(`${successCount} of ${successCount + failCount} chapters added to the download queue. Proceed to the download manager?`).then(() => {
-					window.location.href = base_url + 'admin/downloads';
+				if (k === 'lang') {
+					_chapters = _chapters.filter(c => c.language === v);
+					return;
+				}
+				const lb = parseFloat(v[0]);
+				const ub = parseFloat(v[1]);
+				if (isNaN(lb) && isNaN(ub)) return;
+				_chapters = _chapters.filter(c => {
+					const val = parseFloat(c[k]);
+					if (isNaN(val)) return false;
+					if (isNaN(lb))
+						return val <= ub;
+					else if (isNaN(ub))
+						return val >= lb;
+					else
+						return val >= lb && val <= ub;
 				});
-			})
-			.fail((jqXHR, status) => {
-				alert('danger', `Failed to add chapters to the download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
-			})
-			.always(() => {
-				$('#download-spinner').attr('hidden', '');
-				$('#download-btn').removeAttr('hidden');
 			});
-	});
-};
-const toggleSpinner = () => {
-	var attr = $('#spinner').attr('hidden');
-	if (attr) {
-		$('#spinner').removeAttr('hidden');
-		$('#search-btn').attr('hidden', '');
-	} else {
-		$('#search-btn').removeAttr('hidden');
-		$('#spinner').attr('hidden', '');
-	}
-	searching = !searching;
-};
-var searching = false;
-var globalChapters;
-const search = () => {
-	if (searching) {
-		return;
-	}
-	$('#manga-details').attr('hidden', '');
-	$('#filter-form').attr('hidden', '');
-	$('table').attr('hidden', '');
-	$('#selection-controls').attr('hidden', '');
-	$('#filter-notification').attr('hidden', '');
-	toggleSpinner();
-	const input = $('input').val();
+			console.log('filtered chapters:', _chapters);
+			this.chapters = _chapters;
+		},

-	if (input === "") {
-		toggleSpinner();
-		return;
-	}
+		search() {
+			if (this.loading || this.searchInput === '') return;
+			this.data = {};
+			this.mangaAry = undefined;

-	var int_id = -1;
+			var int_id = -1;
+			try {
+				const path = new URL(this.searchInput).pathname;
+				const match = /\/(?:title|manga)\/([0-9]+)/.exec(path);
+				int_id = parseInt(match[1]);
+			} catch (e) {
+				int_id = parseInt(this.searchInput);
+			}

-	try {
-		const path = new URL(input).pathname;
-		const match = /\/(?:title|manga)\/([0-9]+)/.exec(path);
-		int_id = parseInt(match[1]);
-	} catch (e) {
-		int_id = parseInt(input);
-	}
+			if (!isNaN(int_id) && int_id > 0) {
+				// The input is a positive integer. We treat it as an ID.
+				this.loading = true;
+				$.getJSON(`${base_url}api/admin/mangadex/manga/${int_id}`)
+					.done((data) => {
+						if (data.error) {
+							alert('danger', 'Failed to get manga info. Error: ' + data.error);
+							return;
+						}

-	if (int_id <= 0 || isNaN(int_id)) {
-		alert('danger', 'Please make sure you are using a valid manga ID or manga URL from Mangadex.');
-		toggleSpinner();
-		return;
-	}
+						this.data = data;
+						this.chapters = data.chapters;
+						this.mangaAry = undefined;
+					})
+					.fail((jqXHR, status) => {
+						alert('danger', `Failed to get manga info. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+					})
+					.always(() => {
+						this.loading = false;
+					});
+			} else {
+				if (!this.searchAvailable) {
+					alert('danger', 'Please make sure you are using a valid manga ID or manga URL from Mangadex. If you are trying to search MangaDex with a search term, please log in to MangaDex first by going to "Admin -> Connect to MangaDex".');
+					return;
+				}

-	$.getJSON(`${base_url}api/admin/mangadex/manga/${int_id}`)
-		.done((data) => {
-			if (data.error) {
-				alert('danger', 'Failed to get manga info. Error: ' + data.error);
+				// Search as a search term
+				this.loading = true;
+				$.getJSON(`${base_url}api/admin/mangadex/search?${$.param({
+					query: this.searchInput
+				})}`)
+					.done((data) => {
+						if (data.error) {
+							alert('danger', `Failed to search MangaDex. Error: ${data.error}`);
+							return;
+						}
+
+						this.mangaAry = data.manga;
+						this.data = {};
+					})
+					.fail((jqXHR, status) => {
+						alert('danger', `Failed to search MangaDex. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+					})
+					.always(() => {
+						this.loading = false;
+					});
+			}
+		},
+
+		parseRange(str) {
+			const regex = /^[\t ]*(?:(?:(<|<=|>|>=)[\t ]*([0-9]+))|(?:([0-9]+))|(?:([0-9]+)[\t ]*-[\t ]*([0-9]+))|(?:[\t ]*))[\t ]*$/m;
+			const matches = str.match(regex);
+			var num;
+
+			if (!matches) {
+				return [null, null];
+			} else if (typeof matches[1] !== 'undefined' && typeof matches[2] !== 'undefined') {
+				// e.g., <= 30
+				num = parseInt(matches[2]);
+				if (isNaN(num)) {
+					return [null, null];
+				}
+				switch (matches[1]) {
+					case '<':
+						return [null, num - 1];
+					case '<=':
+						return [null, num];
+					case '>':
+						return [num + 1, null];
+					case '>=':
+						return [num, null];
+				}
+			} else if (typeof matches[3] !== 'undefined') {
+				// a single number
+				num = parseInt(matches[3]);
+				if (isNaN(num)) {
+					return [null, null];
+				}
+				return [num, num];
+			} else if (typeof matches[4] !== 'undefined' && typeof matches[5] !== 'undefined') {
+				// e.g., 10 - 23
+				num = parseInt(matches[4]);
+				const n2 = parseInt(matches[5]);
+				if (isNaN(num) || isNaN(n2) || num > n2) {
+					return [null, null];
+				}
+				return [num, n2];
+			} else {
+				// empty or space only
+				return [null, null];
+			}
+		},
+
+		unescapeHTML(str) {
+			var elt = document.createElement("span");
+			elt.innerHTML = str;
+			return elt.innerText;
+		},
+
+		selectAll() {
+			$('tbody > tr').each((i, e) => {
+				$(e).addClass('ui-selected');
+			});
+		},
+
+		clearSelection() {
+			$('tbody > tr').each((i, e) => {
+				$(e).removeClass('ui-selected');
+			});
+		},
+
+		download() {
+			const selected = $('tbody > tr.ui-selected');
+			if (selected.length === 0) return;
+			UIkit.modal.confirm(`Download ${selected.length} selected chapters?`).then(() => {
+				const ids = selected.map((i, e) => {
+					return parseInt($(e).find('td').first().text());
+				}).get();
+				const chapters = this.chapters.filter(c => ids.indexOf(c.id) >= 0);
+				console.log(ids);
+				this.addingToDownload = true;
+				$.ajax({
+						type: 'POST',
+						url: `${base_url}api/admin/mangadex/download`,
+						data: JSON.stringify({
+							chapters: chapters
+						}),
+						contentType: "application/json",
+						dataType: 'json'
+					})
+					.done(data => {
+						console.log(data);
+						if (data.error) {
+							alert('danger', `Failed to add chapters to the download queue. Error: ${data.error}`);
+							return;
+						}
+						const successCount = parseInt(data.success);
+						const failCount = parseInt(data.fail);
+						alert('success', `${successCount} of ${successCount + failCount} chapters added to the download queue. You can view and manage your download queue on the <a href="${base_url}admin/downloads">download manager page</a>.`);
+					})
+					.fail((jqXHR, status) => {
+						alert('danger', `Failed to add chapters to the download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+					})
+					.always(() => {
+						this.addingToDownload = false;
+					});
+			});
+		},
+
+		chooseManga(manga) {
+			this.candidateManga = manga;
+			UIkit.modal($('#modal').get(0)).show();
+		},
+
+		confirmManga(id) {
+			UIkit.modal($('#modal').get(0)).hide();
+			this.searchInput = id;
+			this.search();
+		},
+
+		subscribe(langConfirmed = false, groupConfirmed = false) {
+			const filters = {
+				manga: this.data.id,
+				language: this.langChoice === 'All' ? null : this.langChoice,
+				group: this.groupChoice === 'All' ? null : this.groupChoice,
+				volume: this.volumeRange === '' ? null : this.volumeRange,
+				chapter: this.chapterRange === '' ? null : this.chapterRange
+			};
+
+			// Get group ID
+			if (filters.group) {
+				this.data.chapters.forEach(chp => {
+					const gid = chp.groups[filters.group];
+					if (gid) {
+						filters.groupId = gid;
+						return;
+					}
+				});
+			}
+
+			// Parse range values
+			if (filters.volume) {
+				[filters.volumeMin, filters.volumeMax] = this.parseRange(filters.volume);
+			}
+			if (filters.chapter) {
+				[filters.chapterMin, filters.chapterMax] = this.parseRange(filters.chapter);
+			}
+
+			if (!filters.language && !langConfirmed) {
+				UIkit.modal.confirm('You didn\'t specify a language in the filtering rules. This might cause Mango to download chapters that are not in your preferred language. Are you sure you want to continue?', {
+					labels: {
+						ok: 'Yes',
+						cancel: 'Cancel'
+					}
+				}).then(() => {
+					this.subscribe(true, groupConfirmed);
+				});
 				return;
 			}

-			const cover = baseURL + data.cover_url;
-			$('#cover').attr("src", cover);
-			$('#title').text("Title: " + data.title);
-			$('#artist').text("Artist: " + data.artist);
-			$('#author').text("Author: " + data.author);
-
-			$('#manga-details').removeAttr('hidden');
-
-			console.log(data.chapters);
-			globalChapters = data.chapters;
-
-			let langs = new Set();
-			let group_names = new Set();
-			data.chapters.forEach(chp => {
-				Object.entries(chp.groups).forEach(([k, v]) => {
-					group_names.add(k);
+			if (!filters.group && !groupConfirmed) {
+				UIkit.modal.confirm('You didn\'t specify a group in the filtering rules. This might cause Mango to download multiple versions of the same chapter. Are you sure you want to continue?', {
+					labels: {
+						ok: 'Yes',
+						cancel: 'Cancel'
+					}
+				}).then(() => {
+					this.subscribe(langConfirmed, true);
 				});
-				langs.add(chp.language);
+				return;
+			}
+
+			const mangaURL = `${mangadex_base_url}/manga/${filters.manga}`;
+
+			console.log(filters);
+			UIkit.modal.confirm(`All <strong>FUTURE</strong> chapters matching the following filters will be downloaded:<br>
+			<ul>
+			<li>Manga ID: ${filters.manga}</li>
+			<li>Language: ${filters.language || 'all'}</li>
+			<li>Group: ${filters.group || 'all'}</li>
+			<li>Volume: ${filters.volume || 'all'}</li>
+			<li>Chapter: ${filters.chapter || 'all'}</li>
+			</ul>
+
+			<strong>IMPORTANT:</strong> Please make sure you are following the manga on MangaDex, otherwise Mango won't be able to receive any updates. To follow it, visit <a href="${mangaURL}">${mangaURL}</a> and click "Follow".
+				`, {
+				labels: {
+					ok: 'Confirm',
+					cancel: 'Cancel'
+				}
+			}).then(() => {
+				$.ajax({
+						type: 'POST',
+						url: `${base_url}api/admin/mangadex/subscriptions`,
+						data: JSON.stringify({
+							subscription: filters
+						}),
+						contentType: "application/json",
+						dataType: 'json'
+					})
+					.done(data => {
+						console.log(data);
+						if (data.error) {
+							alert('danger', `Failed to subscribe. Error: ${data.error}`);
+							return;
+						}
+						alert('success', `You've successfully subscribed to this manga! You can view and manage your subscriptions on the <a href="${base_url}download/subscription">subscription manager page</a>.`);
+					})
+					.fail((jqXHR, status) => {
+						alert('danger', `Failed to subscribe. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+					});
 			});
-
-			const comp = (a, b) => {
-				var ai;
-				var bi;
-				try {
-					ai = parseFloat(a);
-				} catch (e) {}
-				try {
-					bi = parseFloat(b);
-				} catch (e) {}
-				if (typeof ai === 'undefined') return -1;
-				if (typeof bi === 'undefined') return 1;
-				if (ai < bi) return 1;
-				if (ai > bi) return -1;
-				return 0;
-			};
-
-			langs = [...langs].sort();
-			group_names = [...group_names].sort();
-
-			langs.unshift('All');
-			group_names.unshift('All');
-
-			$('select#lang-select').html(langs.map(e => `<option>${e}</option>`).join(''));
-			$('select#group-select').html(group_names.map(e => `<option>${e}</option>`).join(''));
-
-			$('#filter-form').removeAttr('hidden');
-
-			buildTable();
-		})
-		.fail((jqXHR, status) => {
-			alert('danger', `Failed to get manga info. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
-		})
-		.always(() => {
-			toggleSpinner();
-		});
-};
-const parseRange = str => {
-	const regex = /^[\t ]*(?:(?:(<|<=|>|>=)[\t ]*([0-9]+))|(?:([0-9]+))|(?:([0-9]+)[\t ]*-[\t ]*([0-9]+))|(?:[\t ]*))[\t ]*$/m;
-	const matches = str.match(regex);
-	var num;
-
-	if (!matches) {
-		alert('danger', `Failed to parse filter input ${str}`);
-		return [null, null];
-	} else if (typeof matches[1] !== 'undefined' && typeof matches[2] !== 'undefined') {
-		// e.g., <= 30
-		num = parseInt(matches[2]);
-		if (isNaN(num)) {
-			alert('danger', `Failed to parse filter input ${str}`);
-			return [null, null];
-		}
-		switch (matches[1]) {
-			case '<':
-				return [null, num - 1];
-			case '<=':
-				return [null, num];
-			case '>':
-				return [num + 1, null];
-			case '>=':
-				return [num, null];
-		}
-	} else if (typeof matches[3] !== 'undefined') {
-		// a single number
-		num = parseInt(matches[3]);
-		if (isNaN(num)) {
-			alert('danger', `Failed to parse filter input ${str}`);
-			return [null, null];
-		}
-		return [num, num];
-	} else if (typeof matches[4] !== 'undefined' && typeof matches[5] !== 'undefined') {
-		// e.g., 10 - 23
-		num = parseInt(matches[4]);
-		const n2 = parseInt(matches[5]);
-		if (isNaN(num) || isNaN(n2) || num > n2) {
-			alert('danger', `Failed to parse filter input ${str}`);
-			return [null, null];
-		}
-		return [num, n2];
-	} else {
-		// empty or space only
-		return [null, null];
-	}
-};
-const getFilters = () => {
-	const filters = {};
-	$('.uk-select').each((i, ele) => {
-		const id = $(ele).attr('id');
-		const by = id.split('-')[0];
-		const choice = $(ele).val();
-		filters[by] = choice;
-	});
-	filters.volume = parseRange($('#volume-range').val());
-	filters.chapter = parseRange($('#chapter-range').val());
-	return filters;
-};
-const buildTable = () => {
-	$('table').attr('hidden', '');
-	$('#selection-controls').attr('hidden', '');
-	$('#filter-notification').attr('hidden', '');
-	console.log('rebuilding table');
-	const filters = getFilters();
-	console.log('filters:', filters);
-	var chapters = globalChapters.slice();
-	Object.entries(filters).forEach(([k, v]) => {
-		if (v === 'All') return;
-		if (k === 'group') {
-			chapters = chapters.filter(c => {
-				const unescaped_groups = Object.entries(c.groups).map(([g, id]) => unescapeHTML(g));
-				return unescaped_groups.indexOf(v) >= 0;
-			});
-			return;
-		}
-		if (k === 'lang') {
-			chapters = chapters.filter(c => c.language === v);
-			return;
-		}
-		const lb = parseFloat(v[0]);
-		const ub = parseFloat(v[1]);
-		if (isNaN(lb) && isNaN(ub)) return;
-		chapters = chapters.filter(c => {
-			const val = parseFloat(c[k]);
-			if (isNaN(val)) return false;
-			if (isNaN(lb))
-				return val <= ub;
-			else if (isNaN(ub))
-				return val >= lb;
-			else
-				return val >= lb && val <= ub;
-		});
-	});
-	console.log('filtered chapters:', chapters);
-	$('#count-text').text(`${chapters.length} chapters found`);
-
-	const chaptersLimit = 1000;
-	if (chapters.length > chaptersLimit) {
-		$('#filter-notification').text(`Mango can only list ${chaptersLimit} chapters, but we found ${chapters.length} chapters in this manga. Please use the filter options above to narrow down your search.`);
-		$('#filter-notification').removeAttr('hidden');
-		return;
-	}
-
-	const inner = chapters.map(chp => {
-		const group_str = Object.entries(chp.groups).map(([k, v]) => {
-			return `<a href="${baseURL }/group/${v}">${k}</a>`;
-		}).join(' | ');
-		return `<tr class="ui-widget-content">
-						<td><a href="${baseURL}/chapter/${chp.id}">${chp.id}</a></td>
-						<td>${chp.title}</td>
-						<td>${chp.language}</td>
-						<td>${group_str}</td>
-						<td>${chp.volume}</td>
-						<td>${chp.chapter}</td>
-						<td>${moment.unix(chp.time).fromNow()}</td>
-					</tr>`;
-	}).join('');
-	const tbody = `<tbody id="selectable">${inner}</tbody>`;
-	$('tbody').remove();
-	$('table').append(tbody);
-	$('table').removeAttr('hidden');
-	$("#selectable").selectable({
-		filter: 'tr'
-	});
-	$('#selection-controls').removeAttr('hidden');
-};
-
-const unescapeHTML = (str) => {
-	var elt = document.createElement("span");
-	elt.innerHTML = str;
-	return elt.innerText;
+		}
+	};
 };
--- a/public/js/mangadex.js
+++ b/public/js/mangadex.js
@@ -0,0 +1,61 @@
+const component = () => {
+	return {
+		username: '',
+		password: '',
+		expires: undefined,
+		loading: true,
+		loggingIn: false,
+
+		init() {
+			this.loading = true;
+			$.ajax({
+					type: 'GET',
+					url: `${base_url}api/admin/mangadex/expires`,
+					contentType: "application/json",
+				})
+				.done(data => {
+					console.log(data);
+					if (data.error) {
+						alert('danger', `Failed to retrieve MangaDex token status. Error: ${data.error}`);
+						return;
+					}
+					this.expires = data.expires;
+					this.loading = false;
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to retrieve MangaDex token status. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				});
+		},
+		login() {
+			if (!(this.username && this.password)) return;
+			this.loggingIn = true;
+			$.ajax({
+					type: 'POST',
+					url: `${base_url}api/admin/mangadex/login`,
+					contentType: "application/json",
+					dataType: 'json',
+					data: JSON.stringify({
+						username: this.username,
+						password: this.password
+					})
+				})
+				.done(data => {
+					console.log(data);
+					if (data.error) {
+						alert('danger', `Failed to log in. Error: ${data.error}`);
+						return;
+					}
+					this.expires = data.expires;
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to log in. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				})
+				.always(() => {
+					this.loggingIn = false;
+				});
+		},
+		get expired() {
+			return this.expires && moment().diff(moment.unix(this.expires)) > 0;
+		}
+	};
+};
--- a/public/js/plugin-download.js
+++ b/public/js/plugin-download.js
@@ -126,9 +126,7 @@ const download = () => {
 				}
 				const successCount = parseInt(data.success);
 				const failCount = parseInt(data.fail);
-				UIkit.modal.confirm(`${successCount} of ${successCount + failCount} chapters added to the download queue. Proceed to the download manager?`).then(() => {
-					window.location.href = base_url + 'admin/downloads';
-				});
+				alert('success', `${successCount} of ${successCount + failCount} chapters added to the download queue. You can view and manage your download queue on the <a href="${base_url}admin/downloads">download manager page</a>.`);
 			})
 			.fail((jqXHR, status) => {
 				alert('danger', `Failed to add chapters to the download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
--- a/public/js/reader.js
+++ b/public/js/reader.js
@@ -9,6 +9,8 @@ const readerComponent = () => {
 		flipAnimation: null,
 		longPages: false,
 		lastSavedPage: page,
+		selectedIndex: 0, // 0: not selected; 1: the first page
+		margin: 30,

 		/**
 		 * Initialize the component by fetching the page dimensions
@@ -26,7 +28,6 @@ const readerComponent = () => {
 							url: `${base_url}api/page/${tid}/${eid}/${i+1}`,
 							width: d.width,
 							height: d.height,
-							style: `margin-top: ${data.margin}px; margin-bottom: ${data.margin}px;`
 						};
 					});

@@ -46,6 +47,11 @@ const readerComponent = () => {
 					const mode = this.mode;
 					this.updateMode(this.mode, page, nextTick);
 					$('#mode-select').val(mode);
+
+					const savedMargin = localStorage.getItem('margin');
+					if (savedMargin) {
+						this.margin = savedMargin;
+					}
 				})
 				.catch(e => {
 					const errMsg = `Failed to get the page dimensions. ${e}`;
@@ -221,10 +227,7 @@ const readerComponent = () => {
 		 */
 		showControl(event) {
 			const idx = event.currentTarget.id;
-			const pageCount = this.items.length;
-			const progressText = `Progress: ${idx}/${pageCount} (${(idx/pageCount * 100).toFixed(1)}%)`;
-			$('#progress-label').text(progressText);
-			$('#page-select').val(idx);
+			this.selectedIndex = idx;
 			UIkit.modal($('#modal-sections')).show();
 		},
 		/**
@@ -263,19 +266,27 @@ const readerComponent = () => {
 			});
 		},
 		/**
-		 * Exits the reader, and optionally sets the reading progress tp 100%
+		 * Exits the reader, and sets the reading progress tp 100%
 		 *
 		 * @param {string} exitUrl - The Exit URL
-		 * @param {boolean} [markCompleted] - Whether we should mark the
-		 *		reading progress to 100%
 		 */
-		exitReader(exitUrl, markCompleted = false) {
-			if (!markCompleted) {
-				return this.redirect(exitUrl);
-			}
+		exitReader(exitUrl) {
 			this.saveProgress(this.items.length, () => {
 				this.redirect(exitUrl);
 			});
+		},
+
+		/**
+		 * Handles the `change` event for the entry selector
+		 */
+		entryChanged() {
+			const id = $('#entry-select').val();
+			this.redirect(`${base_url}reader/${tid}/${id}`);
+		},
+
+		marginChanged() {
+			localStorage.setItem('margin', this.margin);
+			this.toPage(this.selectedIndex);
 		}
 	};
 }
--- a/public/js/subscription.js
+++ b/public/js/subscription.js
@@ -0,0 +1,82 @@
+const component = () => {
+	return {
+		available: undefined,
+		subscriptions: [],
+
+		init() {
+			$.getJSON(`${base_url}api/admin/mangadex/expires`)
+				.done((data) => {
+					if (data.error) {
+						alert('danger', 'Failed to check MangaDex integration status. Error: ' + data.error);
+						return;
+					}
+					this.available = Boolean(data.expires && data.expires > Math.floor(Date.now() / 1000));
+
+					if (this.available) this.getSubscriptions();
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to check MangaDex integration status. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				})
+		},
+
+		getSubscriptions() {
+			$.getJSON(`${base_url}api/admin/mangadex/subscriptions`)
+				.done(data => {
+					if (data.error) {
+						alert('danger', 'Failed to get subscriptions. Error: ' + data.error);
+						return;
+					}
+					this.subscriptions = data.subscriptions;
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to get subscriptions. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				})
+		},
+
+		rm(event) {
+			const id = event.currentTarget.parentNode.getAttribute('data-id');
+			$.ajax({
+					type: 'DELETE',
+					url: `${base_url}api/admin/mangadex/subscriptions/${id}`,
+					contentType: 'application/json'
+				})
+				.done(data => {
+					if (data.error) {
+						alert('danger', `Failed to delete subscription. Error: ${data.error}`);
+					}
+					this.getSubscriptions();
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to delete subscription. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				});
+		},
+
+		check(event) {
+			const id = event.currentTarget.parentNode.getAttribute('data-id');
+			$.ajax({
+					type: 'POST',
+					url: `${base_url}api/admin/mangadex/subscriptions/check/${id}`,
+					contentType: 'application/json'
+				})
+				.done(data => {
+					if (data.error) {
+						alert('danger', `Failed to check subscription. Error: ${data.error}`);
+						return;
+					}
+					alert('success', 'Mango is now checking the subscription for updates. This might take a while, but you can safely leave the page.');
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to check subscription. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				});
+		},
+
+		formatRange(min, max) {
+			if (!isNaN(min) && isNaN(max)) return `≥ ${min}`;
+			if (isNaN(min) && !isNaN(max)) return `≤ ${max}`;
+			if (isNaN(min) && isNaN(max)) return 'All';
+
+			if (min === max) return `= ${min}`;
+			return `${min} - ${max}`;
+		}
+	};
+};
--- a/shard.lock
+++ b/shard.lock
@@ -2,7 +2,7 @@ version: 2.0
 shards:
  ameba:
    git: https://github.com/crystal-ameba/ameba.git
-    version: 0.12.1
+    version: 0.14.0

  archive:
    git: https://github.com/hkalexling/archive.cr.git
@@ -30,7 +30,7 @@ shards:

  http_proxy:
    git: https://github.com/mamantoha/http_proxy.git
-    version: 0.7.1
+    version: 0.8.0

  image_size:
    git: https://github.com/hkalexling/image_size.cr.git
@@ -42,7 +42,7 @@ shards:

  kemal-session:
    git: https://github.com/kemalcr/kemal-session.git
-    version: 0.12.1
+    version: 0.13.0

  kilt:
    git: https://github.com/jeromegn/kilt.git
@@ -50,11 +50,15 @@ shards:

  koa:
    git: https://github.com/hkalexling/koa.git
-    version: 0.5.0
+    version: 0.7.0
+
+  mangadex:
+    git: https://github.com/hkalexling/mangadex.git
+    version: 0.11.0+git.commit.f5b0d64fbb138879fb9228b6e9ff34ec97c3e824

  mg:
    git: https://github.com/hkalexling/mg.git
-    version: 0.2.0+git.commit.171c46489d991a8353818e00fc6a3c4e0809ded9
+    version: 0.3.0+git.commit.a19417abf03eece80039f89569926cff1ce3a1a3

  myhtml:
    git: https://github.com/kostya/myhtml.git
--- a/shard.yml
+++ b/shard.yml
@@ -1,5 +1,5 @@
 name: mango
-version: 0.20.0
+version: 0.22.0

 authors:
  - Alex Ling <hkalexling@gmail.com>
@@ -8,7 +8,7 @@ targets:
  mango:
    main: src/mango.cr

-crystal: 0.35.1
+crystal: 0.36.1

 license: MIT

@@ -43,3 +43,5 @@ dependencies:
    github: epoch/tallboy
  mg:
   github: hkalexling/mg
+  mangadex:
+   github: hkalexling/mangadex
--- a/spec/storage_spec.cr
+++ b/spec/storage_spec.cr
@@ -8,9 +8,7 @@ describe Storage do
  end

  it "deletes user" do
-    with_storage do |storage|
-      storage.delete_user "admin"
-    end
+    with_storage &.delete_user "admin"
  end

  it "creates new user" do
--- a/spec/util_spec.cr
+++ b/spec/util_spec.cr
@@ -21,7 +21,7 @@ describe "compare_numerically" do
  it "sorts like the stack exchange post" do
    ary = ["2", "12", "200000", "1000000", "a", "a12", "b2", "text2",
           "text2a", "text2a2", "text2a12", "text2ab", "text12", "text12a"]
-    ary.reverse.sort { |a, b|
+    ary.reverse.sort! { |a, b|
      compare_numerically a, b
    }.should eq ary
  end
@@ -29,7 +29,7 @@ describe "compare_numerically" do
  # 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|
+    ary.reverse.sort! { |a, b|
      compare_numerically a, b
    }.should eq ary
  end
@@ -56,7 +56,7 @@ describe "chapter_sort" do
  it "sorts correctly" do
    ary = ["Vol.1 Ch.01", "Vol.1 Ch.02", "Vol.2 Ch. 2.5", "Ch. 3", "Ch.04"]
    sorter = ChapterSorter.new ary
-    ary.reverse.sort do |a, b|
+    ary.reverse.sort! do |a, b|
      sorter.compare a, b
    end.should eq ary
  end
--- a/src/assets/lang_codes.csv
+++ b/src/assets/lang_codes.csv
@@ -1,41 +0,0 @@
-Arabic,sa
-Bengali,bd
-Bulgarian,bg
-Burmese,mm
-Catalan,ct
-Chinese (Simp),cn
-Chinese (Trad),hk
-Czech,cz
-Danish,dk
-Dutch,nl
-English,gb
-Filipino,ph
-Finnish,fi
-French,fr
-German,de
-Greek,gr
-Hebrew,il
-Hindi,in
-Hungarian,hu
-Indonesian,id
-Italian,it
-Japanese,jp
-Korean,kr
-Lithuanian,lt
-Malay,my
-Mongolian,mn
-Other,
-Persian,ir
-Polish,pl
-Portuguese (Br),br
-Portuguese (Pt),pt
-Romanian,ro
-Russian,ru
-Serbo-Croatian,rs
-Spanish (Es),es
-Spanish (LATAM),mx
-Swedish,se
-Thai,th
-Turkish,tr
-Ukrainian,ua
-Vietnames,vn
--- a/src/config.cr
+++ b/src/config.cr
@@ -5,6 +5,7 @@ class Config

  @[YAML::Field(ignore: true)]
  property path : String = ""
+  property host : String = "0.0.0.0"
  property port : Int32 = 9000
  property base_url : String = "/"
  property session_secret : String = "mango-session-secret"
@@ -19,21 +20,23 @@ class Config
  property plugin_path : String = File.expand_path "~/mango/plugins",
    home: true
  property download_timeout_seconds : Int32 = 30
-  property page_margin : Int32 = 30
  property disable_login = false
  property default_username = ""
+  property auth_proxy_header_name = ""
  property mangadex = Hash(String, String | Int32).new

  @[YAML::Field(ignore: true)]
  @mangadex_defaults = {
    "base_url"               => "https://mangadex.org",
-    "api_url"                => "https://mangadex.org/api",
+    "api_url"                => "https://api.mangadex.org/v2",
    "download_wait_seconds"  => 5,
    "download_retries"       => 4,
    "download_queue_db_path" => File.expand_path("~/mango/queue.db",
      home: true),
-    "chapter_rename_rule" => "[Vol.{volume} ][Ch.{chapter} ]{title|id}",
-    "manga_rename_rule"   => "{title}",
+    "chapter_rename_rule" => "[Vol.{volume} ]" \
+                             "[Ch.{chapter} ]{title|id}",
+    "manga_rename_rule"                  => "{title}",
+    "subscription_update_interval_hours" => 24,
  }

  @@singlet : Config?
@@ -51,9 +54,9 @@ class Config
    cfg_path = File.expand_path path, home: true
    if File.exists? cfg_path
      config = self.from_yaml File.read cfg_path
-      config.preprocess
      config.path = path
      config.fill_defaults
+      config.preprocess
      return config
    end
    puts "The config file #{cfg_path} does not exist. " \
@@ -91,5 +94,24 @@ class Config
      raise "Login is disabled, but default username is not set. " \
            "Please set a default username"
    end
+
+    # `Logger.default` is not available yet
+    Log.setup :debug
+    unless mangadex["api_url"] =~ /\/v2/
+      Log.warn { "It looks like you are using the deprecated MangaDex API " \
+                 "v1 in your config file. Please update it to " \
+                 "https://api.mangadex.org/v2 to suppress this warning." }
+      mangadex["api_url"] = "https://api.mangadex.org/v2"
+    end
+    if mangadex["api_url"] =~ /\/api\/v2/
+      Log.warn { "It looks like you are using the outdated MangaDex API " \
+                 "url (mangadex.org/api/v2) in your config file. Please " \
+                 "update it to https://api.mangadex.org/v2 to suppress this " \
+                 "warning." }
+      mangadex["api_url"] = "https://api.mangadex.org/v2"
+    end
+
+    mangadex["api_url"] = mangadex["api_url"].to_s.rstrip "/"
+    mangadex["base_url"] = mangadex["base_url"].to_s.rstrip "/"
  end
 end
--- a/src/handlers/auth_handler.cr
+++ b/src/handlers/auth_handler.cr
@@ -15,7 +15,11 @@ class AuthHandler < Kemal::Handler
    env.response.status_code = 401
    env.response.headers["WWW-Authenticate"] = HEADER_LOGIN_REQUIRED
    env.response.print AUTH_MESSAGE
-    call_next env
+  end
+
+  def require_auth(env)
+    env.session.string "callback", env.request.path
+    redirect env, "/login"
  end

  def validate_token(env)
@@ -49,55 +53,50 @@ class AuthHandler < Kemal::Handler
    Storage.default.verify_user username, password
  end

-  def handle_opds_auth(env)
-    if validate_token(env) || validate_auth_header(env)
-      call_next env
-    else
-      env.response.status_code = 401
-      env.response.headers["WWW-Authenticate"] = HEADER_LOGIN_REQUIRED
-      env.response.print AUTH_MESSAGE
-    end
-  end
-
-  def handle_auth(env)
+  def call(env)
+    # Skip all authentication if requesting /login, /logout, or a static file
    if request_path_startswith(env, ["/login", "/logout"]) ||
       requesting_static_file env
      return call_next(env)
    end

-    unless validate_token(env) || Config.current.disable_login
-      env.session.string "callback", env.request.path
-      return redirect env, "/login"
+    # Check user is logged in
+    if validate_token env
+      # Skip if the request has a valid token
+    elsif Config.current.disable_login
+      # Check default username if login is disabled
+      unless Storage.default.username_exists Config.current.default_username
+        Logger.warn "Default username #{Config.current.default_username} " \
+                    "does not exist"
+        return require_auth env
+      end
+    elsif !Config.current.auth_proxy_header_name.empty?
+      # Check auth proxy if present
+      username = env.request.headers[Config.current.auth_proxy_header_name]?
+      unless username && Storage.default.username_exists username
+        Logger.warn "Header #{Config.current.auth_proxy_header_name} unset " \
+                    "or is not a valid username"
+        return require_auth env
+      end
+    elsif request_path_startswith env, ["/opds"]
+      # Check auth header if requesting an opds page
+      unless validate_auth_header env
+        return require_basic_auth env
+      end
+    else
+      return require_auth env
    end

-    if request_path_startswith env, ["/admin", "/api/admin", "/download"]
-      # The token (if exists) takes precedence over the default user option.
-      #   this is why we check the default username first before checking the
-      #   token.
-      should_reject = true
-      if Config.current.disable_login &&
-         Storage.default.username_is_admin Config.current.default_username
-        should_reject = false
-      end
-      if env.session.string? "token"
-        should_reject = !validate_token_admin(env)
-      end
-      if should_reject
+    # Check admin access when requesting an admin page
+    if request_path_startswith env, %w(/admin /api/admin /download)
+      unless is_admin? env
        env.response.status_code = 403
-        send_error_page "HTTP 403: You are not authorized to visit " \
-                        "#{env.request.path}"
-        return
+        return send_error_page "HTTP 403: You are not authorized to visit " \
+                               "#{env.request.path}"
      end
    end

+    # Let the request go through if it passes the above checks
    call_next env
  end
-
-  def call(env)
-    if request_path_startswith env, ["/opds"]
-      handle_opds_auth env
-    else
-      handle_auth env
-    end
-  end
 end
--- a/src/library/entry.cr
+++ b/src/library/entry.cr
@@ -86,7 +86,7 @@ class Entry
          SUPPORTED_IMG_TYPES.includes? \
            MIME.from_filename? e.filename
        }
-        .sort { |a, b|
+        .sort! { |a, b|
          compare_numerically a.filename, b.filename
        }
      yield file, entries
@@ -134,10 +134,11 @@ class Entry
    entries[idx + 1]
  end

-  def previous_entry
-    idx = @book.entries.index self
+  def previous_entry(username)
+    entries = @book.sorted_entries username
+    idx = entries.index self
    return nil if idx.nil? || idx == 0
-    @book.entries[idx - 1]
+    entries[idx - 1]
  end

  def date_added
--- a/src/library/library.cr
+++ b/src/library/library.cr
@@ -42,6 +42,25 @@ class Library
        end
      end
    end
+
+    subscription_interval = Config.current
+      .mangadex["subscription_update_interval_hours"].as Int32
+    unless subscription_interval < 1
+      spawn do
+        loop do
+          subscriptions = Storage.default.subscriptions
+          Logger.info "Checking MangaDex for updates on " \
+                      "#{subscriptions.size} subscriptions"
+          added_count = 0
+          subscriptions.each do |sub|
+            added_count += sub.check_for_updates
+          end
+          Logger.info "Subscription update completed. Added #{added_count} " \
+                      "chapters to the download queue"
+          sleep subscription_interval.hours
+        end
+      end
+    end
  end

  def titles
@@ -63,7 +82,7 @@ class Library
  end

  def deep_titles
-    titles + titles.map { |t| t.deep_titles }.flatten
+    titles + titles.flat_map &.deep_titles
  end

  def to_json(json : JSON::Builder)
@@ -98,7 +117,7 @@ class Library
      .select { |path| File.directory? path }
      .map { |path| Title.new path, "" }
      .select { |title| !(title.entries.empty? && title.titles.empty?) }
-      .sort { |a, b| a.title <=> b.title }
+      .sort! { |a, b| a.title <=> b.title }
      .tap { |_| @title_ids.clear }
      .each do |title|
        @title_hash[title.id] = title
@@ -114,14 +133,14 @@ class Library

  def get_continue_reading_entries(username)
    cr_entries = deep_titles
-      .map { |t| t.get_last_read_entry username }
+      .map(&.get_last_read_entry username)
      # Select elements with type `Entry` from the array and ignore all `Nil`s
      .select(Entry)[0...ENTRIES_IN_HOME_SECTIONS]
      .map { |e|
        # Get the last read time of the entry. If it hasn't been started, get
        #   the last read time of the previous entry
        last_read = e.load_last_read username
-        pe = e.previous_entry
+        pe = e.previous_entry username
        if last_read.nil? && pe
          last_read = pe.load_last_read username
        end
@@ -150,14 +169,14 @@ class Library
    recently_added = [] of RA
    last_date_added = nil

-    titles.map { |t| t.deep_entries_with_date_added }.flatten
-      .select { |e| e[:date_added] > 1.month.ago }
-      .sort { |a, b| b[:date_added] <=> a[:date_added] }
+    titles.flat_map(&.deep_entries_with_date_added)
+      .select(&.[:date_added].> 1.month.ago)
+      .sort! { |a, b| b[:date_added] <=> a[:date_added] }
      .each do |e|
        break if recently_added.size > 12
        last = recently_added.last?
        if last && e[:entry].book.id == last[:entry].book.id &&
-           (e[:date_added] - last_date_added.not_nil!).duration < 1.day
+           (e[:date_added] - last_date_added.not_nil!).abs < 1.day
          # A NamedTuple is immutable, so we have to cast it to a Hash first
          last_hash = last.to_h
          count = last_hash[:grouped_count].as(Int32)
@@ -188,9 +207,9 @@ class Library
    # If we use `deep_titles`, the start reading section might include `Vol. 2`
    #   when the user hasn't started `Vol. 1` yet
    titles
-      .select { |t| t.load_percentage(username) == 0 }
+      .select(&.load_percentage(username).== 0)
      .sample(ENTRIES_IN_HOME_SECTIONS)
-      .shuffle
+      .shuffle!
  end

  def thumbnail_generation_progress
@@ -205,7 +224,7 @@ class Library
    end

    Logger.info "Starting thumbnail generation"
-    entries = deep_titles.map(&.deep_entries).flatten.reject &.err_msg
+    entries = deep_titles.flat_map(&.deep_entries).reject &.err_msg
    @entries_count = entries.size
    @thumbnails_count = 0

--- a/src/library/title.cr
+++ b/src/library/title.cr
@@ -44,14 +44,14 @@ class Title

    mtimes = [@mtime]
    mtimes += @title_ids.map { |e| Library.default.title_hash[e].mtime }
-    mtimes += @entries.map { |e| e.mtime }
+    mtimes += @entries.map &.mtime
    @mtime = mtimes.max

    @title_ids.sort! do |a, b|
      compare_numerically Library.default.title_hash[a].title,
        Library.default.title_hash[b].title
    end
-    sorter = ChapterSorter.new @entries.map { |e| e.title }
+    sorter = ChapterSorter.new @entries.map &.title
    @entries.sort! do |a, b|
      sorter.compare a.title, b.title
    end
@@ -92,12 +92,12 @@ class Title
  # Get all entries, including entries in nested titles
  def deep_entries
    return @entries if title_ids.empty?
-    @entries + titles.map { |t| t.deep_entries }.flatten
+    @entries + titles.flat_map &.deep_entries
  end

  def deep_titles
    return [] of Title if titles.empty?
-    titles + titles.map { |t| t.deep_titles }.flatten
+    titles + titles.flat_map &.deep_titles
  end

  def parents
@@ -138,7 +138,7 @@ class Title
  end

  def get_entry(eid)
-    @entries.find { |e| e.id == eid }
+    @entries.find &.id.== eid
  end

  def display_name
@@ -217,29 +217,23 @@ class Title
    @entries.each do |e|
      e.save_progress username, e.pages
    end
-    titles.each do |t|
-      t.read_all username
-    end
+    titles.each &.read_all username
  end

  # Set the reading progress of all entries and nested libraries to 0%
  def unread_all(username)
-    @entries.each do |e|
-      e.save_progress username, 0
-    end
-    titles.each do |t|
-      t.unread_all username
-    end
+    @entries.each &.save_progress(username, 0)
+    titles.each &.unread_all username
  end

  def deep_read_page_count(username) : Int32
    load_progress_for_all_entries(username).sum +
-      titles.map { |t| t.deep_read_page_count username }.flatten.sum
+      titles.flat_map(&.deep_read_page_count username).sum
  end

  def deep_total_page_count : Int32
-    entries.map { |e| e.pages }.sum +
-      titles.map { |t| t.deep_total_page_count }.flatten.sum
+    entries.sum(&.pages) +
+      titles.flat_map(&.deep_total_page_count).sum
  end

  def load_percentage(username)
@@ -311,13 +305,13 @@ class Title
      ary = @entries.zip(percentage_ary)
        .sort { |a_tp, b_tp| (a_tp[1] <=> b_tp[1]).or \
          compare_numerically a_tp[0].title, b_tp[0].title }
-        .map { |tp| tp[0] }
+        .map &.[0]
    else
      unless opt.method.auto?
        Logger.warn "Unknown sorting method #{opt.not_nil!.method}. Using " \
                    "Auto instead"
      end
-      sorter = ChapterSorter.new @entries.map { |e| e.title }
+      sorter = ChapterSorter.new @entries.map &.title
      ary = @entries.sort do |a, b|
        sorter.compare(a.title, b.title).or \
          compare_numerically a.title, b.title
@@ -383,13 +377,13 @@ class Title
      {entry: e, date_added: da_ary[i]}
    end
    return zip if title_ids.empty?
-    zip + titles.map { |t| t.deep_entries_with_date_added }.flatten
+    zip + titles.flat_map &.deep_entries_with_date_added
  end

  def bulk_progress(action, ids : Array(String), username)
    selected_entries = ids
      .map { |id|
-        @entries.find { |e| e.id == id }
+        @entries.find &.id.==(id)
      }
      .select(Entry)

--- a/src/mangadex/api.cr
+++ b/src/mangadex/api.cr
@@ -1,217 +0,0 @@
-require "json"
-require "csv"
-require "../rename"
-
-macro string_properties(names)
-  {% for name in names %}
-    property {{name.id}} = ""
-  {% end %}
-end
-
-macro parse_strings_from_json(names)
-  {% for name in names %}
-    @{{name.id}} = obj[{{name}}].as_s
-  {% end %}
-end
-
-macro properties_to_hash(names)
-  {
-    {% for name in names %}
-      "{{name.id}}" => @{{name.id}}.to_s,
-    {% end %}
-  }
-end
-
-module MangaDex
-  class Chapter
-    string_properties ["lang_code", "title", "volume", "chapter"]
-    property manga : Manga
-    property time = Time.local
-    property id : String
-    property full_title = ""
-    property language = ""
-    property pages = [] of {String, String} # filename, url
-    property groups = [] of {Int32, String} # group_id, group_name
-
-    def initialize(@id, json_obj : JSON::Any, @manga,
-                   lang : Hash(String, String))
-      self.parse_json json_obj, lang
-    end
-
-    def to_info_json
-      JSON.build do |json|
-        json.object do
-          {% for name in ["id", "title", "volume", "chapter",
-                          "language", "full_title"] %}
-          json.field {{name}}, @{{name.id}}
-        {% end %}
-          json.field "time", @time.to_unix.to_s
-          json.field "manga_title", @manga.title
-          json.field "manga_id", @manga.id
-          json.field "groups" do
-            json.object do
-              @groups.each do |gid, gname|
-                json.field gname, gid
-              end
-            end
-          end
-        end
-      end
-    end
-
-    def parse_json(obj, lang)
-      parse_strings_from_json ["lang_code", "title", "volume",
-                               "chapter"]
-      language = lang[@lang_code]?
-      @language = language if language
-      @time = Time.unix obj["timestamp"].as_i
-      suffixes = ["", "_2", "_3"]
-      suffixes.each do |s|
-        gid = obj["group_id#{s}"].as_i
-        next if gid == 0
-        gname = obj["group_name#{s}"].as_s
-        @groups << {gid, gname}
-      end
-
-      rename_rule = Rename::Rule.new \
-        Config.current.mangadex["chapter_rename_rule"].to_s
-      @full_title = rename rename_rule
-    rescue e
-      raise "failed to parse json: #{e}"
-    end
-
-    def rename(rule : Rename::Rule)
-      hash = properties_to_hash ["id", "title", "volume", "chapter",
-                                 "lang_code", "language", "pages"]
-      hash["groups"] = @groups.map { |g| g[1] }.join ","
-      rule.render hash
-    end
-  end
-
-  class Manga
-    string_properties ["cover_url", "description", "title", "author", "artist"]
-    property chapters = [] of Chapter
-    property id : String
-
-    def initialize(@id, json_obj : JSON::Any)
-      self.parse_json json_obj
-    end
-
-    def to_info_json(with_chapters = true)
-      JSON.build do |json|
-        json.object do
-          {% for name in ["id", "title", "description", "author", "artist",
-                          "cover_url"] %}
-            json.field {{name}}, @{{name.id}}
-          {% end %}
-          if with_chapters
-            json.field "chapters" do
-              json.array do
-                @chapters.each do |c|
-                  json.raw c.to_info_json
-                end
-              end
-            end
-          end
-        end
-      end
-    end
-
-    def parse_json(obj)
-      parse_strings_from_json ["cover_url", "description", "title", "author",
-                               "artist"]
-    rescue e
-      raise "failed to parse json: #{e}"
-    end
-
-    def rename(rule : Rename::Rule)
-      rule.render properties_to_hash ["id", "title", "author", "artist"]
-    end
-  end
-
-  class API
-    use_default
-
-    def initialize
-      @base_url = Config.current.mangadex["api_url"].to_s ||
-                  "https://mangadex.org/api/"
-      @lang = {} of String => String
-      CSV.each_row {{read_file "src/assets/lang_codes.csv"}} do |row|
-        @lang[row[1]] = row[0]
-      end
-    end
-
-    def get(url)
-      headers = HTTP::Headers{
-        "User-agent" => "Mangadex.cr",
-      }
-      res = HTTP::Client.get url, headers
-      raise "Failed to get #{url}. [#{res.status_code}] " \
-            "#{res.status_message}" if !res.success?
-      JSON.parse res.body
-    end
-
-    def get_manga(id)
-      obj = self.get File.join @base_url, "manga/#{id}"
-      if obj["status"]? != "OK"
-        raise "Expecting `OK` in the `status` field. Got `#{obj["status"]?}`"
-      end
-      begin
-        manga = Manga.new id, obj["manga"]
-        obj["chapter"].as_h.map do |k, v|
-          chapter = Chapter.new k, v, manga, @lang
-          manga.chapters << chapter
-        end
-        manga
-      rescue
-        raise "Failed to parse JSON"
-      end
-    end
-
-    def get_chapter(chapter : Chapter)
-      obj = self.get File.join @base_url, "chapter/#{chapter.id}"
-      if obj["status"]? == "external"
-        raise "This chapter is hosted on an external site " \
-              "#{obj["external"]?}, and Mango does not support " \
-              "external chapters."
-      end
-      if obj["status"]? != "OK"
-        raise "Expecting `OK` in the `status` field. Got `#{obj["status"]?}`"
-      end
-      begin
-        server = obj["server"].as_s
-        hash = obj["hash"].as_s
-        chapter.pages = obj["page_array"].as_a.map do |fn|
-          {
-            fn.as_s,
-            "#{server}#{hash}/#{fn.as_s}",
-          }
-        end
-      rescue
-        raise "Failed to parse JSON"
-      end
-    end
-
-    def get_chapter(id : String)
-      obj = self.get File.join @base_url, "chapter/#{id}"
-      if obj["status"]? == "external"
-        raise "This chapter is hosted on an external site " \
-              "#{obj["external"]?}, and Mango does not support " \
-              "external chapters."
-      end
-      if obj["status"]? != "OK"
-        raise "Expecting `OK` in the `status` field. Got `#{obj["status"]?}`"
-      end
-      manga_id = ""
-      begin
-        manga_id = obj["manga_id"].as_i.to_s
-      rescue
-        raise "Failed to parse JSON"
-      end
-      manga = self.get_manga manga_id
-      chapter = manga.chapters.find { |c| c.id == id }.not_nil!
-      self.get_chapter chapter
-      chapter
-    end
-  end
-end
--- a/src/mangadex/downloader.cr
+++ b/src/mangadex/downloader.cr
@@ -1,5 +1,7 @@
-require "./api"
+require "mangadex"
 require "compress/zip"
+require "../rename"
+require "./ext"

 module MangaDex
  class PageJob
@@ -21,7 +23,7 @@ module MangaDex
    use_default

    def initialize
-      @api = API.default
+      @client = Client.from_config
      super
    end

@@ -46,7 +48,10 @@ module MangaDex
      @downloading = true
      @queue.set_status Queue::JobStatus::Downloading, job
      begin
-        chapter = @api.get_chapter(job.id)
+        chapter = @client.chapter job.id
+        # We must put the `.pages` call in a rescue block to handle external
+        #   chapters.
+        pages = chapter.pages
      rescue e
        Logger.error e
        @queue.set_status Queue::JobStatus::Error, job
@@ -56,7 +61,7 @@ module MangaDex
        @downloading = false
        return
      end
-      @queue.set_pages chapter.pages.size, job
+      @queue.set_pages pages.size, job
      lib_dir = @library_path
      rename_rule = Rename::Rule.new \
        Config.current.mangadex["manga_rename_rule"].to_s
@@ -67,14 +72,14 @@ module MangaDex
      zip_path = File.join manga_dir, "#{job.title}.cbz.part"

      # Find the number of digits needed to store the number of pages
-      len = Math.log10(chapter.pages.size).to_i + 1
+      len = Math.log10(pages.size).to_i + 1

      writer = Compress::Zip::Writer.new zip_path
      # Create a buffered channel. It works as an FIFO queue
-      channel = Channel(PageJob).new chapter.pages.size
+      channel = Channel(PageJob).new pages.size
      spawn do
-        chapter.pages.each_with_index do |tuple, i|
-          fn, url = tuple
+        pages.each_with_index do |url, i|
+          fn = Path.new(URI.parse(url).path).basename
          ext = File.extname fn
          fn = "#{i.to_s.rjust len, '0'}#{ext}"
          page_job = PageJob.new url, fn, writer, @retries
@@ -97,7 +102,7 @@ module MangaDex

      spawn do
        page_jobs = [] of PageJob
-        chapter.pages.size.times do
+        pages.size.times do
          page_job = channel.receive

          break unless @queue.exists? job
--- a/src/mangadex/ext.cr
+++ b/src/mangadex/ext.cr
@@ -0,0 +1,94 @@
+private macro properties_to_hash(names)
+  {
+    {% for name in names %}
+      "{{name.id}}" => {{name.id}}.to_s,
+    {% end %}
+  }
+end
+
+# Monkey-patch the structures in the `mangadex` shard to suit our needs
+module MangaDex
+  struct Client
+    @@group_cache = {} of String => Group
+
+    def self.from_config : Client
+      self.new base_url: Config.current.mangadex["base_url"].to_s,
+        api_url: Config.current.mangadex["api_url"].to_s
+    end
+  end
+
+  struct Manga
+    def rename(rule : Rename::Rule)
+      rule.render properties_to_hash %w(id title author artist)
+    end
+
+    def to_info_json
+      hash = JSON.parse(to_json).as_h
+      _chapters = chapters.map do |c|
+        JSON.parse c.to_info_json
+      end
+      hash["chapters"] = JSON::Any.new _chapters
+      hash.to_json
+    end
+  end
+
+  struct Chapter
+    def rename(rule : Rename::Rule)
+      hash = properties_to_hash %w(id title volume chapter lang_code language)
+      hash["groups"] = groups.join(",", &.name)
+      rule.render hash
+    end
+
+    def full_title
+      rule = Rename::Rule.new \
+        Config.current.mangadex["chapter_rename_rule"].to_s
+      rename rule
+    end
+
+    def to_info_json
+      hash = JSON.parse(to_json).as_h
+      hash["language"] = JSON::Any.new language
+      _groups = {} of String => JSON::Any
+      groups.each do |g|
+        _groups[g.name] = JSON::Any.new g.id
+      end
+      hash["groups"] = JSON::Any.new _groups
+      hash["full_title"] = JSON::Any.new full_title
+      hash.to_json
+    end
+
+    # We don't need to rename the manga title here. It will be renamed in
+    #   src/mangadex/downloader.cr
+    def to_job : Queue::Job
+      Queue::Job.new(
+        id.to_s,
+        manga_id.to_s,
+        full_title,
+        manga_title,
+        Queue::JobStatus::Pending,
+        Time.unix timestamp
+      )
+    end
+  end
+
+  struct User
+    def updates_after(time : Time, &block : Chapter ->)
+      page = 1
+      stopped = false
+      until stopped
+        chapters = followed_updates(page: page).chapters
+        return if chapters.empty?
+        chapters.each do |c|
+          if time > Time.unix c.timestamp
+            stopped = true
+            break
+          end
+          yield c
+        end
+        page += 1
+        # Let's not DDOS MangaDex :)
+        sleep 5.seconds
+      end
+    end
+  end
+end
--- a/src/mango.cr
+++ b/src/mango.cr
@@ -8,7 +8,7 @@ require "option_parser"
 require "clim"
 require "tallboy"

-MANGO_VERSION = "0.20.0"
+MANGO_VERSION = "0.22.0"

 # From http://www.network-science.de/ascii/
 BANNER = %{
--- a/src/plugin/plugin.cr
+++ b/src/plugin/plugin.cr
@@ -117,7 +117,7 @@ class Plugin
  def initialize(id : String)
    Plugin.build_info_ary

-    @info = @@info_ary.find { |i| i.id == id }
+    @info = @@info_ary.find &.id.== id
    if @info.nil?
      raise Error.new "Plugin with ID #{id} not found"
    end
--- a/src/queue.cr
+++ b/src/queue.cr
@@ -303,12 +303,12 @@ class Queue
  end

  def pause
-    @downloaders.each { |d| d.stopped = true }
+    @downloaders.each &.stopped=(true)
    @paused = true
  end

  def resume
-    @downloaders.each { |d| d.stopped = false }
+    @downloaders.each &.stopped=(false)
    @paused = false
  end

--- a/src/rename.cr
+++ b/src/rename.cr
@@ -35,15 +35,15 @@ module Rename

  class Group < Base(Pattern | String)
    def render(hash : VHash)
-      return "" if @ary.select(&.is_a? Pattern)
+      return "" if @ary.select(Pattern)
                     .any? &.as(Pattern).render(hash).empty?
-      @ary.map do |e|
+      @ary.join do |e|
        if e.is_a? Pattern
          e.render hash
        else
          e
        end
-      end.join
+      end
    end
  end

@@ -129,13 +129,13 @@ module Rename
    end

    def render(hash : VHash)
-      str = @ary.map do |e|
+      str = @ary.join do |e|
        if e.is_a? String
          e
        else
          e.render hash
        end
-      end.join.strip
+      end.strip
      post_process str
    end

--- a/src/routes/admin.cr
+++ b/src/routes/admin.cr
@@ -73,5 +73,9 @@ struct AdminRouter
    get "/admin/missing" do |env|
      layout "missing-items"
    end
+
+    get "/admin/mangadex" do |env|
+      layout "mangadex"
+    end
  end
 end
--- a/src/routes/api.cr
+++ b/src/routes/api.cr
@@ -10,7 +10,7 @@ struct APIRouter
  macro s(fields)
    {
      {% for field in fields %}
-        {{field}} => "string",
+        {{field}} => String,
      {% end %}
    }
  end
@@ -33,160 +33,49 @@ struct APIRouter
    MD

    Koa.cookie_auth "cookie", "mango-sessid-#{Config.current.port}"
-    Koa.global_tag "admin", desc: <<-MD
+    Koa.define_tag "admin", desc: <<-MD
      These are the admin endpoints only accessible for users with admin access. A non-admin user will get HTTP 403 when calling the endpoints.
    MD

-    Koa.binary "binary", desc: "A binary file"
-    Koa.array "entryAry", "$entry", desc: "An array of entries"
-    Koa.array "titleAry", "$title", desc: "An array of titles"
-    Koa.array "strAry", "string", desc: "An array of strings"
+    Koa.schema "entry", {
+      "pages" => Int32,
+      "mtime" => Int64,
+    }.merge(s %w(zip_path title size id title_id display_name cover_url)),
+      desc: "An entry in a book"

-    entry_schema = {
-      "pages" => "integer",
-      "mtime" => "integer",
-    }.merge s %w(zip_path title size id title_id display_name cover_url)
-    Koa.object "entry", entry_schema, desc: "An entry in a book"
-
-    title_schema = {
-      "mtime"   => "integer",
-      "entries" => "$entryAry",
-      "titles"  => "$titleAry",
-      "parents" => "$strAry",
-    }.merge s %w(dir title id display_name cover_url)
-    Koa.object "title", title_schema,
+    Koa.schema "title", {
+      "mtime"   => Int64,
+      "entries" => ["entry"],
+      "titles"  => ["title"],
+      "parents" => [String],
+    }.merge(s %w(dir title id display_name cover_url)),
      desc: "A manga title (a collection of entries and sub-titles)"

-    Koa.object "library", {
-      "dir"    => "string",
-      "titles" => "$titleAry",
-    }, desc: "A library containing a list of top-level titles"
-
-    Koa.object "scanResult", {
-      "milliseconds" => "integer",
-      "titles"       => "integer",
+    Koa.schema "result", {
+      "success" => Bool,
+      "error"   => String?,
    }

-    Koa.object "progressResult", {
-      "progress" => "number",
-    }
+    Koa.schema("mdChapter", {
+      "id"    => Int64,
+      "group" => {} of String => String,
+    }.merge(s %w(title volume chapter language full_title time
+      manga_title manga_id)),
+      desc: "A MangaDex chapter")

-    Koa.object "result", {
-      "success" => "boolean",
-      "error"   => "string?",
-    }
-
-    mc_schema = {
-      "groups" => "object",
-    }.merge s %w(id title volume chapter language full_title time manga_title manga_id)
-    Koa.object "mangadexChapter", mc_schema, desc: "A MangaDex chapter"
-
-    Koa.array "chapterAry", "$mangadexChapter"
-
-    mm_schema = {
-      "chapers" => "$chapterAry",
-    }.merge s %w(id title description author artist cover_url)
-    Koa.object "mangadexManga", mm_schema, desc: "A MangaDex manga"
-
-    Koa.object "chaptersObj", {
-      "chapters" => "$chapterAry",
-    }
-
-    Koa.object "successFailCount", {
-      "success" => "integer",
-      "fail"    => "integer",
-    }
-
-    job_schema = {
-      "pages"         => "integer",
-      "success_count" => "integer",
-      "fail_count"    => "integer",
-      "time"          => "integer",
-    }.merge s %w(id manga_id title manga_title status_message status)
-    Koa.object "job", job_schema, desc: "A download job in the queue"
-
-    Koa.array "jobAry", "$job"
-
-    Koa.object "jobs", {
-      "success" => "boolean",
-      "paused"  => "boolean",
-      "jobs"    => "$jobAry",
-    }
-
-    Koa.object "binaryUpload", {
-      "file" => "$binary",
-    }
-
-    Koa.object "pluginListBody", {
-      "plugin" => "string",
-      "query"  => "string",
-    }
-
-    Koa.object "pluginChapter", {
-      "id"    => "string",
-      "title" => "string",
-    }
-
-    Koa.array "pluginChapterAry", "$pluginChapter"
-
-    Koa.object "pluginList", {
-      "success"  => "boolean",
-      "chapters" => "$pluginChapterAry?",
-      "title"    => "string?",
-      "error"    => "string?",
-    }
-
-    Koa.object "pluginDownload", {
-      "plugin"   => "string",
-      "title"    => "string",
-      "chapters" => "$pluginChapterAry",
-    }
-
-    Koa.object "dimension", {
-      "width"  => "integer",
-      "height" => "integer",
-    }
-
-    Koa.array "dimensionAry", "$dimension"
-
-    Koa.object "dimensionResult", {
-      "success"    => "boolean",
-      "dimensions" => "$dimensionAry?",
-      "margin"     => "number",
-      "error"      => "string?",
-    }
-
-    Koa.object "ids", {
-      "ids" => "$strAry",
-    }
-
-    Koa.object "tagsResult", {
-      "success" => "boolean",
-      "tags"    => "$strAry?",
-      "error"   => "string?",
-    }
-
-    Koa.object "missing", {
-      "path"      => "string",
-      "id"        => "string",
-      "signature" => "string",
-    }
-
-    Koa.array "missingAry", "$missing"
-
-    Koa.object "missingResult", {
-      "success" => "boolean",
-      "error"   => "string?",
-      "entries" => "$missingAry?",
-      "titles"  => "$missingAry?",
-    }
+    Koa.schema "mdManga", {
+      "id"       => Int64,
+      "chapters" => ["mdChapter"],
+    }.merge(s %w(title description author artist cover_url)),
+      desc: "A MangaDex manga"

    Koa.describe "Returns a page in a manga entry"
    Koa.path "tid", desc: "Title ID"
    Koa.path "eid", desc: "Entry ID"
-    Koa.path "page", type: "integer", desc: "The page number to return (starts from 1)"
-    Koa.response 200, ref: "$binary", media_type: "image/*"
+    Koa.path "page", schema: Int32, desc: "The page number to return (starts from 1)"
+    Koa.response 200, schema: Bytes, media_type: "image/*"
    Koa.response 500, "Page not found or not readable"
+    Koa.tag "reader"
    get "/api/page/:tid/:eid/:page" do |env|
      begin
        tid = env.params.url["tid"]
@@ -212,8 +101,9 @@ struct APIRouter
    Koa.describe "Returns the cover image of a manga entry"
    Koa.path "tid", desc: "Title ID"
    Koa.path "eid", desc: "Entry ID"
-    Koa.response 200, ref: "$binary", media_type: "image/*"
+    Koa.response 200, schema: Bytes, media_type: "image/*"
    Koa.response 500, "Page not found or not readable"
+    Koa.tag "library"
    get "/api/cover/:tid/:eid" do |env|
      begin
        tid = env.params.url["tid"]
@@ -238,8 +128,9 @@ struct APIRouter

    Koa.describe "Returns the book with title `tid`"
    Koa.path "tid", desc: "Title ID"
-    Koa.response 200, ref: "$title"
+    Koa.response 200, schema: "title"
    Koa.response 404, "Title not found"
+    Koa.tag "library"
    get "/api/book/:tid" do |env|
      begin
        tid = env.params.url["tid"]
@@ -255,14 +146,21 @@ struct APIRouter
    end

    Koa.describe "Returns the entire library with all titles and entries"
-    Koa.response 200, ref: "$library"
+    Koa.response 200, schema: {
+      "dir"    => String,
+      "titles" => ["title"],
+    }
+    Koa.tag "library"
    get "/api/library" do |env|
      send_json env, Library.default.to_json
    end

    Koa.describe "Triggers a library scan"
-    Koa.tag "admin"
-    Koa.response 200, ref: "$scanResult"
+    Koa.tags ["admin", "library"]
+    Koa.response 200, schema: {
+      "milliseconds" => Float64,
+      "titles"       => Int32,
+    }
    post "/api/admin/scan" do |env|
      start = Time.utc
      Library.default.scan
@@ -274,8 +172,10 @@ struct APIRouter
    end

    Koa.describe "Returns the thumbnail generation progress between 0 and 1"
-    Koa.tag "admin"
-    Koa.response 200, ref: "$progressResult"
+    Koa.tags ["admin", "library"]
+    Koa.response 200, schema: {
+      "progress" => Float64,
+    }
    get "/api/admin/thumbnail_progress" do |env|
      send_json env, {
        "progress" => Library.default.thumbnail_generation_progress,
@@ -283,7 +183,7 @@ struct APIRouter
    end

    Koa.describe "Triggers a thumbnail generation"
-    Koa.tag "admin"
+    Koa.tags ["admin", "library"]
    post "/api/admin/generate_thumbnails" do |env|
      spawn do
        Library.default.generate_thumbnails
@@ -291,8 +191,8 @@ struct APIRouter
    end

    Koa.describe "Deletes a user with `username`"
-    Koa.tag "admin"
-    Koa.response 200, ref: "$result"
+    Koa.tags ["admin", "users"]
+    Koa.response 200, schema: "result"
    delete "/api/admin/user/delete/:username" do |env|
      begin
        username = env.params.url["username"]
@@ -319,7 +219,8 @@ struct APIRouter
    Koa.path "tid", desc: "Title ID"
    Koa.query "eid", desc: "Entry ID", required: false
    Koa.path "page", desc: "The new page number indicating the progress"
-    Koa.response 200, ref: "$result"
+    Koa.response 200, schema: "result"
+    Koa.tag "progress"
    put "/api/progress/:tid/:page" do |env|
      begin
        username = get_username env
@@ -350,8 +251,11 @@ struct APIRouter
    Koa.describe "Updates the reading progress of multiple entries in a title"
    Koa.path "action", desc: "The action to perform. Can be either `read` or `unread`"
    Koa.path "tid", desc: "Title ID"
-    Koa.body ref: "$ids", desc: "An array of entry IDs"
-    Koa.response 200, ref: "$result"
+    Koa.body schema: {
+      "ids" => [String],
+    }, desc: "An array of entry IDs"
+    Koa.response 200, schema: "result"
+    Koa.tag "progress"
    put "/api/bulk_progress/:action/:tid" do |env|
      begin
        username = get_username env
@@ -377,11 +281,11 @@ struct APIRouter
    Koa.describe "Sets the display name of a title or an entry", <<-MD
      When `eid` is provided, apply the display name to the entry. Otherwise, apply the display name to the title identified by `tid`.
    MD
-    Koa.tag "admin"
+    Koa.tags ["admin", "library"]
    Koa.path "tid", desc: "Title ID"
    Koa.query "eid", desc: "Entry ID", required: false
    Koa.path "name", desc: "The new display name"
-    Koa.response 200, ref: "$result"
+    Koa.response 200, schema: "result"
    put "/api/admin/display_name/:tid/:name" do |env|
      begin
        title = (Library.default.get_title env.params.url["tid"])
@@ -408,14 +312,13 @@ struct APIRouter
    Koa.describe "Returns a MangaDex manga identified by `id`", <<-MD
      On error, returns a JSON that contains the error message in the `error` field.
    MD
-    Koa.tag "admin"
+    Koa.tags ["admin", "mangadex"]
    Koa.path "id", desc: "A MangaDex manga ID"
-    Koa.response 200, ref: "$mangadexManga"
+    Koa.response 200, schema: "mdManga"
    get "/api/admin/mangadex/manga/:id" do |env|
      begin
        id = env.params.url["id"]
-        api = MangaDex::API.default
-        manga = api.get_manga id
+        manga = MangaDex::Client.from_config.manga id
        send_json env, manga.to_info_json
      rescue e
        Logger.error e
@@ -426,20 +329,25 @@ struct APIRouter
    Koa.describe "Adds a list of MangaDex chapters to the download queue", <<-MD
      On error, returns a JSON that contains the error message in the `error` field.
    MD
-    Koa.tag "admin"
-    Koa.body ref: "$chaptersObj"
-    Koa.response 200, ref: "$successFailCount"
+    Koa.tags ["admin", "mangadex", "downloader"]
+    Koa.body schema: {
+      "chapters" => ["mdChapter"],
+    }
+    Koa.response 200, schema: {
+      "success" => Int32,
+      "fail"    => Int32,
+    }
    post "/api/admin/mangadex/download" do |env|
      begin
-        chapters = env.params.json["chapters"].as(Array).map { |c| c.as_h }
+        chapters = env.params.json["chapters"].as(Array).map &.as_h
        jobs = chapters.map { |chapter|
          Queue::Job.new(
-            chapter["id"].as_s,
-            chapter["manga_id"].as_s,
+            chapter["id"].as_i64.to_s,
+            chapter["mangaId"].as_i64.to_s,
            chapter["full_title"].as_s,
-            chapter["manga_title"].as_s,
+            chapter["mangaTitle"].as_s,
            Queue::JobStatus::Pending,
-            Time.unix chapter["time"].as_s.to_i
+            Time.unix chapter["timestamp"].as_i64
          )
        }
        inserted_count = Queue.default.push jobs
@@ -458,7 +366,7 @@ struct APIRouter
      interval = (interval_raw.to_i? if interval_raw) || 5
      loop do
        socket.send({
-          "jobs"   => Queue.default.get_all,
+          "jobs"   => Queue.default.get_all.reverse,
          "paused" => Queue.default.paused?,
        }.to_json)
        sleep interval.seconds
@@ -468,17 +376,27 @@ struct APIRouter
    Koa.describe "Returns the current download queue", <<-MD
      On error, returns a JSON that contains the error message in the `error` field.
    MD
-    Koa.tag "admin"
-    Koa.response 200, ref: "$jobs"
+    Koa.tags ["admin", "downloader"]
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+      "paused"  => Bool?,
+      "jobs?"   => [{
+        "pages"         => Int32,
+        "success_count" => Int32,
+        "fail_count"    => Int32,
+        "time"          => Int64,
+      }.merge(s %w(id manga_id title manga_title status_message status))],
+    }
    get "/api/admin/mangadex/queue" do |env|
      begin
-        jobs = Queue.default.get_all
        send_json env, {
-          "jobs"    => jobs,
+          "jobs"    => Queue.default.get_all.reverse,
          "paused"  => Queue.default.paused?,
          "success" => true,
        }.to_json
      rescue e
+        Logger.error e
        send_json env, {
          "success" => false,
          "error"   => e.message,
@@ -495,10 +413,10 @@ struct APIRouter

      When `action` is set to `retry`, the behavior depends on `id`. If `id` is provided, restarts the job identified by the ID. Otherwise, retries all jobs in the `Error` or `MissingPages` status in the queue.
    MD
-    Koa.tag "admin"
+    Koa.tags ["admin", "downloader"]
    Koa.path "action", desc: "The action to perform. It should be one of the followins: `delete`, `retry`, `pause` and `resume`."
    Koa.query "id", required: false, desc: "A job ID"
-    Koa.response 200, ref: "$result"
+    Koa.response 200, schema: "result"
    post "/api/admin/mangadex/queue/:action" do |env|
      begin
        action = env.params.url["action"]
@@ -526,6 +444,7 @@ struct APIRouter

        send_json env, {"success" => true}.to_json
      rescue e
+        Logger.error e
        send_json env, {
          "success" => false,
          "error"   => e.message,
@@ -547,8 +466,10 @@ struct APIRouter
      When `eid` is omitted, the new cover image will be applied to the title. Otherwise, applies the image to the specified entry.
    MD
    Koa.tag "admin"
-    Koa.body type: "multipart/form-data", ref: "$binaryUpload"
-    Koa.response 200, ref: "$result"
+    Koa.body media_type: "multipart/form-data", schema: {
+      "file" => Bytes,
+    }
+    Koa.response 200, schema: "result"
    post "/api/admin/upload/:target" do |env|
      begin
        target = env.params.url["target"]
@@ -596,6 +517,7 @@ struct APIRouter

        raise "No part with name `file` found"
      rescue e
+        Logger.error e
        send_json env, {
          "success" => false,
          "error"   => e.message,
@@ -604,9 +526,18 @@ struct APIRouter
    end

    Koa.describe "Lists the chapters in a title from a plugin"
-    Koa.tag "admin"
-    Koa.body ref: "$pluginListBody"
-    Koa.response 200, ref: "$pluginList"
+    Koa.tags ["admin", "downloader"]
+    Koa.query "plugin", schema: String
+    Koa.query "query", schema: String
+    Koa.response 200, schema: {
+      "success"   => Bool,
+      "error"     => String?,
+      "chapters?" => [{
+        "id"    => String,
+        "title" => String,
+      }],
+      "title" => String?,
+    }
    get "/api/admin/plugin/list" do |env|
      begin
        query = env.params.query["query"].as String
@@ -622,6 +553,7 @@ struct APIRouter
          "title"    => title,
        }.to_json
      rescue e
+        Logger.error e
        send_json env, {
          "success" => false,
          "error"   => e.message,
@@ -630,9 +562,19 @@ struct APIRouter
    end

    Koa.describe "Adds a list of chapters from a plugin to the download queue"
-    Koa.tag "admin"
-    Koa.body ref: "$pluginDownload"
-    Koa.response 200, ref: "$successFailCount"
+    Koa.tags ["admin", "downloader"]
+    Koa.body schema: {
+      "plugin"   => String,
+      "title"    => String,
+      "chapters" => [{
+        "id"    => String,
+        "title" => String,
+      }],
+    }
+    Koa.response 200, schema: {
+      "success" => Int32,
+      "fail"    => Int32,
+    }
    post "/api/admin/plugin/download" do |env|
      begin
        plugin = Plugin.new env.params.json["plugin"].as String
@@ -655,6 +597,7 @@ struct APIRouter
          "fail":    jobs.size - inserted_count,
        }.to_json
      rescue e
+        Logger.error e
        send_json env, {
          "success" => false,
          "error"   => e.message,
@@ -665,7 +608,15 @@ struct APIRouter
    Koa.describe "Returns the image dimensions of all pages in an entry"
    Koa.path "tid", desc: "A title ID"
    Koa.path "eid", desc: "An entry ID"
-    Koa.response 200, ref: "$dimensionResult"
+    Koa.tag "reader"
+    Koa.response 200, schema: {
+      "success"     => Bool,
+      "error"       => String?,
+      "dimensions?" => [{
+        "width"  => Int32,
+        "height" => Int32,
+      }],
+    }
    get "/api/dimensions/:tid/:eid" do |env|
      begin
        tid = env.params.url["tid"]
@@ -680,9 +631,9 @@ struct APIRouter
        send_json env, {
          "success"    => true,
          "dimensions" => sizes,
-          "margin"     => Config.current.page_margin,
        }.to_json
      rescue e
+        Logger.error e
        send_json env, {
          "success" => false,
          "error"   => e.message,
@@ -693,8 +644,9 @@ struct APIRouter
    Koa.describe "Downloads an entry"
    Koa.path "tid", desc: "A title ID"
    Koa.path "eid", desc: "An entry ID"
-    Koa.response 200, ref: "$binary"
+    Koa.response 200, schema: Bytes
    Koa.response 404, "Entry not found"
+    Koa.tags ["library", "reader"]
    get "/api/download/:tid/:eid" do |env|
      begin
        title = (Library.default.get_title env.params.url["tid"]).not_nil!
@@ -709,7 +661,12 @@ struct APIRouter

    Koa.describe "Gets the tags of a title"
    Koa.path "tid", desc: "A title ID"
-    Koa.response 200, ref: "$tagsResult"
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+      "tags"    => [String?],
+    }
+    Koa.tags ["library", "tags"]
    get "/api/tags/:tid" do |env|
      begin
        title = (Library.default.get_title env.params.url["tid"]).not_nil!
@@ -729,7 +686,12 @@ struct APIRouter
    end

    Koa.describe "Returns all tags"
-    Koa.response 200, ref: "$tagsResult"
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+      "tags"    => [String?],
+    }
+    Koa.tags ["library", "tags"]
    get "/api/tags" do |env|
      begin
        tags = Storage.default.list_tags
@@ -748,8 +710,8 @@ struct APIRouter

    Koa.describe "Adds a new tag to a title"
    Koa.path "tid", desc: "A title ID"
-    Koa.response 200, ref: "$result"
-    Koa.tag "admin"
+    Koa.response 200, schema: "result"
+    Koa.tags ["admin", "library", "tags"]
    put "/api/admin/tags/:tid/:tag" do |env|
      begin
        title = (Library.default.get_title env.params.url["tid"]).not_nil!
@@ -771,8 +733,8 @@ struct APIRouter

    Koa.describe "Deletes a tag from a title"
    Koa.path "tid", desc: "A title ID"
-    Koa.response 200, ref: "$result"
-    Koa.tag "admin"
+    Koa.response 200, schema: "result"
+    Koa.tags ["admin", "library", "tags"]
    delete "/api/admin/tags/:tid/:tag" do |env|
      begin
        title = (Library.default.get_title env.params.url["tid"]).not_nil!
@@ -793,8 +755,16 @@ struct APIRouter
    end

    Koa.describe "Lists all missing titles"
-    Koa.response 200, ref: "$missingResult"
-    Koa.tag "admin"
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+      "titles?" => [{
+        "path"      => String,
+        "id"        => String,
+        "signature" => String,
+      }],
+    }
+    Koa.tags ["admin", "library"]
    get "/api/admin/titles/missing" do |env|
      begin
        send_json env, {
@@ -803,6 +773,7 @@ struct APIRouter
          "titles"  => Storage.default.missing_titles,
        }.to_json
      rescue e
+        Logger.error e
        send_json env, {
          "success" => false,
          "error"   => e.message,
@@ -811,8 +782,16 @@ struct APIRouter
    end

    Koa.describe "Lists all missing entries"
-    Koa.response 200, ref: "$missingResult"
-    Koa.tag "admin"
+    Koa.response 200, schema: {
+      "success"  => Bool,
+      "error"    => String?,
+      "entries?" => [{
+        "path"      => String,
+        "id"        => String,
+        "signature" => String,
+      }],
+    }
+    Koa.tags ["admin", "library"]
    get "/api/admin/entries/missing" do |env|
      begin
        send_json env, {
@@ -821,6 +800,7 @@ struct APIRouter
          "entries" => Storage.default.missing_entries,
        }.to_json
      rescue e
+        Logger.error e
        send_json env, {
          "success" => false,
          "error"   => e.message,
@@ -829,8 +809,8 @@ struct APIRouter
    end

    Koa.describe "Deletes all missing titles"
-    Koa.response 200, ref: "$result"
-    Koa.tag "admin"
+    Koa.response 200, schema: "result"
+    Koa.tags ["admin", "library"]
    delete "/api/admin/titles/missing" do |env|
      begin
        Storage.default.delete_missing_title
@@ -839,6 +819,7 @@ struct APIRouter
          "error"   => nil,
        }.to_json
      rescue e
+        Logger.error e
        send_json env, {
          "success" => false,
          "error"   => e.message,
@@ -847,8 +828,8 @@ struct APIRouter
    end

    Koa.describe "Deletes all missing entries"
-    Koa.response 200, ref: "$result"
-    Koa.tag "admin"
+    Koa.response 200, schema: "result"
+    Koa.tags ["admin", "library"]
    delete "/api/admin/entries/missing" do |env|
      begin
        Storage.default.delete_missing_entry
@@ -857,6 +838,7 @@ struct APIRouter
          "error"   => nil,
        }.to_json
      rescue e
+        Logger.error e
        send_json env, {
          "success" => false,
          "error"   => e.message,
@@ -867,8 +849,8 @@ struct APIRouter
    Koa.describe "Deletes a missing title identified by `tid`", <<-MD
    Does nothing if the given `tid` is not found or if the title is not missing.
    MD
-    Koa.response 200, ref: "$result"
-    Koa.tag "admin"
+    Koa.response 200, schema: "result"
+    Koa.tags ["admin", "library"]
    delete "/api/admin/titles/missing/:tid" do |env|
      begin
        tid = env.params.url["tid"]
@@ -878,6 +860,7 @@ struct APIRouter
          "error"   => nil,
        }.to_json
      rescue e
+        Logger.error e
        send_json env, {
          "success" => false,
          "error"   => e.message,
@@ -888,8 +871,8 @@ struct APIRouter
    Koa.describe "Deletes a missing entry identified by `eid`", <<-MD
    Does nothing if the given `eid` is not found or if the entry is not missing.
    MD
-    Koa.response 200, ref: "$result"
-    Koa.tag "admin"
+    Koa.response 200, schema: "result"
+    Koa.tags ["admin", "library"]
    delete "/api/admin/entries/missing/:eid" do |env|
      begin
        eid = env.params.url["eid"]
@@ -899,6 +882,240 @@ struct APIRouter
          "error"   => nil,
        }.to_json
      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Logs the current user into their MangaDex account", <<-MD
+    If successful, returns the expiration date (as a unix timestamp) of the newly created token.
+    MD
+    Koa.body schema: {
+      "username" => String,
+      "password" => String,
+    }
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+      "expires" => Int64?,
+    }
+    Koa.tags ["admin", "mangadex", "users"]
+    post "/api/admin/mangadex/login" do |env|
+      begin
+        username = env.params.json["username"].as String
+        password = env.params.json["password"].as String
+        mango_username = get_username env
+
+        client = MangaDex::Client.from_config
+        client.auth username, password
+
+        Storage.default.save_md_token mango_username, client.token.not_nil!,
+          client.token_expires
+
+        send_json env, {
+          "success" => true,
+          "error"   => nil,
+          "expires" => client.token_expires.to_unix,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Returns the expiration date (as a unix timestamp) of the mangadex token if it exists"
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+      "expires" => Int64?,
+    }
+    Koa.tags ["admin", "mangadex", "users"]
+    get "/api/admin/mangadex/expires" do |env|
+      begin
+        username = get_username env
+        _, expires = Storage.default.get_md_token username
+
+        send_json env, {
+          "success" => true,
+          "error"   => nil,
+          "expires" => expires.try &.to_unix,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Searches MangaDex for manga matching `query`", <<-MD
+    Returns an empty list if the current user hasn't logged in to MangaDex.
+    MD
+    Koa.query "query"
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+      "manga?"  => [{
+        "id"          => Int64,
+        "title"       => String,
+        "description" => String,
+        "mainCover"   => String,
+      }],
+    }
+    Koa.tags ["admin", "mangadex"]
+    get "/api/admin/mangadex/search" do |env|
+      begin
+        query = env.params.query["query"]
+
+        send_json env, {
+          "success" => true,
+          "error"   => nil,
+          "manga"   => get_client(env).partial_search query,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Lists all MangaDex subscriptions"
+    Koa.response 200, schema: {
+      "success"        => Bool,
+      "error"          => String?,
+      "subscriptions?" => [{
+        "id"           => Int64,
+        "username"     => String,
+        "manga_id"     => Int64,
+        "language"     => String?,
+        "group_id"     => Int64?,
+        "min_volume"   => Int64?,
+        "max_volume"   => Int64?,
+        "min_chapter"  => Int64?,
+        "max_chapter"  => Int64?,
+        "last_checked" => Int64,
+        "created_at"   => Int64,
+      }],
+    }
+    Koa.tags ["admin", "mangadex", "subscriptions"]
+    get "/api/admin/mangadex/subscriptions" do |env|
+      begin
+        send_json env, {
+          "success"       => true,
+          "error"         => nil,
+          "subscriptions" => Storage.default.subscriptions,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Creates a new MangaDex subscription"
+    Koa.body schema: {
+      "subscription" => {
+        "manga"      => Int64,
+        "language"   => String?,
+        "groupId"    => Int64?,
+        "volumeMin"  => Int64?,
+        "volumeMax"  => Int64?,
+        "chapterMin" => Int64?,
+        "chapterMax" => Int64?,
+      },
+    }
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+    }
+    Koa.tags ["admin", "mangadex", "subscriptions"]
+    post "/api/admin/mangadex/subscriptions" do |env|
+      begin
+        json = env.params.json["subscription"].as Hash(String, JSON::Any)
+        sub = Subscription.new json["manga"].as_i64, get_username env
+        sub.language = json["language"]?.try &.as_s?
+        sub.group_id = json["groupId"]?.try &.as_i64?
+        sub.min_volume = json["volumeMin"]?.try &.as_i64?
+        sub.max_volume = json["volumeMax"]?.try &.as_i64?
+        sub.min_chapter = json["chapterMin"]?.try &.as_i64?
+        sub.max_chapter = json["chapterMax"]?.try &.as_i64?
+
+        Storage.default.save_subscription sub
+
+        send_json env, {
+          "success" => true,
+          "error"   => nil,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Deletes a MangaDex subscription identified by `id`", <<-MD
+    Does nothing if the subscription was not created by the current user.
+    MD
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+    }
+    Koa.tags ["admin", "mangadex", "subscriptions"]
+    delete "/api/admin/mangadex/subscriptions/:id" do |env|
+      begin
+        id = env.params.url["id"].to_i64
+        Storage.default.delete_subscription id, get_username env
+        send_json env, {
+          "success" => true,
+          "error"   => nil,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Triggers an update for a MangaDex subscription identified by `id`", <<-MD
+    Does nothing if the subscription was not created by the current user.
+    MD
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+    }
+    Koa.tags ["admin", "mangadex", "subscriptions"]
+    post "/api/admin/mangadex/subscriptions/check/:id" do |env|
+      begin
+        id = env.params.url["id"].to_i64
+        username = get_username env
+        sub = Storage.default.get_subscription id, username
+        unless sub
+          raise "Subscription with id #{id} not found under user #{username}"
+        end
+        spawn do
+          sub.check_for_updates
+        end
+        send_json env, {
+          "success" => true,
+          "error"   => nil,
+        }.to_json
+      rescue e
+        Logger.error e
        send_json env, {
          "success" => false,
          "error"   => e.message,
--- a/src/routes/main.cr
+++ b/src/routes/main.cr
@@ -95,6 +95,12 @@ struct MainRouter
      end
    end

+    get "/download/subscription" do |env|
+      mangadex_base_url = Config.current.mangadex["base_url"]
+      username = get_username env
+      layout "subscription"
+    end
+
    get "/" do |env|
      begin
        username = get_username env
@@ -103,7 +109,7 @@ struct MainRouter
        recently_added = Library.default.get_recently_added_entries username
        start_reading = Library.default.get_start_reading_titles username
        titles = Library.default.titles
-        new_user = !titles.any? { |t| t.load_percentage(username) > 0 }
+        new_user = !titles.any? &.load_percentage(username).> 0
        empty_library = titles.size == 0
        layout "home"
      rescue e
--- a/src/routes/reader.cr
+++ b/src/routes/reader.cr
@@ -30,6 +30,11 @@ struct ReaderRouter

        title = (Library.default.get_title env.params.url["title"]).not_nil!
        entry = (title.get_entry env.params.url["entry"]).not_nil!
+
+        sort_opt = SortOptions.from_info_json title.dir, username
+        get_sort_opt
+        entries = title.sorted_entries username, sort_opt
+
        page_idx = env.params.url["page"].to_i
        if page_idx > entry.pages || page_idx <= 0
          raise "Page #{page_idx} not found."
@@ -37,10 +42,12 @@ struct ReaderRouter

        exit_url = "#{base_url}book/#{title.id}"

-        next_entry_url = nil
-        next_entry = entry.next_entry username
-        unless next_entry.nil?
-          next_entry_url = "#{base_url}reader/#{title.id}/#{next_entry.id}"
+        next_entry_url = entry.next_entry(username).try do |e|
+          "#{base_url}reader/#{title.id}/#{e.id}"
+        end
+
+        previous_entry_url = entry.previous_entry(username).try do |e|
+          "#{base_url}reader/#{title.id}/#{e.id}"
        end

        render "src/views/reader.html.ecr"
--- a/src/server.cr
+++ b/src/server.cr
@@ -49,6 +49,7 @@ class Server
    {% if flag?(:release) %}
      Kemal.config.env = "production"
    {% end %}
+    Kemal.config.host_binding = Config.current.host
    Kemal.config.port = Config.current.port
    Kemal.run
  end
--- a/src/storage.cr
+++ b/src/storage.cr
@@ -5,6 +5,7 @@ require "base64"
 require "./util/*"
 require "mg"
 require "../migration/*"
+require "./subscription"

 def hash_password(pw)
  Crypto::Bcrypt::Password.create(pw).to_s
@@ -14,6 +15,9 @@ def verify_password(hash, pw)
  (Crypto::Bcrypt::Password.new hash).verify pw
 end

+SUB_ATTR = %w(manga_id language group_id min_volume max_volume min_chapter
+  max_chapter username)
+
 class Storage
  @@insert_entry_ids = [] of IDTuple
  @@insert_title_ids = [] of IDTuple
@@ -34,7 +38,7 @@ class Storage
    dir = File.dirname @path
    unless Dir.exists? dir
      Logger.info "The DB directory #{dir} does not exist. " \
-                  "Attepmting to create it"
+                  "Attempting to create it"
      Dir.mkdir_p dir
    end
    MainFiber.run do
@@ -48,14 +52,6 @@ class Storage

        user_count = db.query_one "select count(*) from users", as: Int32
        init_admin if init_user && user_count == 0
-
-        # Verifies that the default username in config is valid
-        if Config.current.disable_login
-          username = Config.current.default_username
-          unless username_exists username
-            raise "Default username #{username} does not exist"
-          end
-        end
      end
      unless @auto_close
        @db = DB.open "sqlite3://#{@path}"
@@ -453,7 +449,7 @@ class Storage
          Logger.debug "Marking #{trash_ids.size} entries as unavailable"
        end
        db.exec "update ids set unavailable = 1 where id in " \
-                "(#{trash_ids.map { |i| "'#{i}'" }.join ","})"
+                "(#{trash_ids.join "," { |i| "'#{i}'" }})"

        # Detect dangling title IDs
        trash_titles = [] of String
@@ -469,7 +465,7 @@ class Storage
          Logger.debug "Marking #{trash_titles.size} titles as unavailable"
        end
        db.exec "update titles set unavailable = 1 where id in " \
-                "(#{trash_titles.map { |i| "'#{i}'" }.join ","})"
+                "(#{trash_titles.join "," { |i| "'#{i}'" }})"
      end
    end
  end
@@ -522,6 +518,101 @@ class Storage
    delete_missing "titles", id
  end

+  def save_md_token(username : String, token : String, expire : Time)
+    MainFiber.run do
+      get_db do |db|
+        count = db.query_one "select count(*) from md_account where " \
+                             "username = (?)", username, as: Int64
+        if count == 0
+          db.exec "insert into md_account values (?, ?, ?)", username, token,
+            expire.to_unix
+        else
+          db.exec "update md_account set token = (?), expire = (?) " \
+                  "where username = (?)", token, expire.to_unix, username
+        end
+      end
+    end
+  end
+
+  def get_md_token(username) : Tuple(String?, Time?)
+    token = nil
+    expires = nil
+    MainFiber.run do
+      get_db do |db|
+        db.query_one? "select token, expire from md_account where " \
+                      "username = (?)", username do |res|
+          token = res.read String
+          expires = Time.unix res.read Int64
+        end
+      end
+    end
+    {token, expires}
+  end
+
+  def save_subscription(sub : Subscription)
+    MainFiber.run do
+      get_db do |db|
+        {% begin %}
+          db.exec "insert into subscription (#{SUB_ATTR.join ","}, " \
+            "last_checked, created_at) values " \
+            "(#{Array.new(SUB_ATTR.size + 2, "?").join ","})",
+          {% for type in SUB_ATTR %}
+            sub.{{type.id}},
+          {% end %}
+          sub.last_checked.to_unix, sub.created_at.to_unix
+        {% end %}
+      end
+    end
+  end
+
+  def subscriptions : Array(Subscription)
+    subs = [] of Subscription
+    MainFiber.run do
+      get_db do |db|
+        db.query "select * from subscription" do |rs|
+          subs += Subscription.from_rs rs
+        end
+      end
+    end
+    subs
+  end
+
+  def delete_subscription(id : Int64, username : String)
+    MainFiber.run do
+      get_db do |db|
+        db.exec "delete from subscription where id = (?) and username = (?)",
+          id, username
+      end
+    end
+  end
+
+  def get_subscription(id : Int64, username : String) : Subscription?
+    sub = nil
+    MainFiber.run do
+      get_db do |db|
+        db.query "select * from subscription where id = (?) and " \
+                 "username = (?) limit 1", id, username do |rs|
+          sub = Subscription.from_rs(rs).first?
+        end
+      end
+    end
+    sub
+  end
+
+  def update_subscription_last_checked(id : Int64? = nil)
+    MainFiber.run do
+      get_db do |db|
+        if id
+          db.exec "update subscription set last_checked = (?) where id = (?)",
+            Time.utc.to_unix, id
+        else
+          db.exec "update subscription set last_checked = (?)",
+            Time.utc.to_unix
+        end
+      end
+    end
+  end
+
  def close
    MainFiber.run do
      unless @db.nil?
--- a/src/subscription.cr
+++ b/src/subscription.cr
@@ -0,0 +1,83 @@
+require "db"
+require "json"
+
+struct Subscription
+  include DB::Serializable
+  include JSON::Serializable
+
+  getter id : Int64 = 0
+  getter username : String
+  getter manga_id : Int64
+  property language : String?
+  property group_id : Int64?
+  property min_volume : Int64?
+  property max_volume : Int64?
+  property min_chapter : Int64?
+  property max_chapter : Int64?
+  @[DB::Field(key: "last_checked")]
+  @[JSON::Field(key: "last_checked")]
+  @raw_last_checked : Int64
+  @[DB::Field(key: "created_at")]
+  @[JSON::Field(key: "created_at")]
+  @raw_created_at : Int64
+
+  def last_checked : Time
+    Time.unix @raw_last_checked
+  end
+
+  def created_at : Time
+    Time.unix @raw_created_at
+  end
+
+  def initialize(@manga_id, @username)
+    @raw_created_at = Time.utc.to_unix
+    @raw_last_checked = Time.utc.to_unix
+  end
+
+  private def in_range?(value : String, lowerbound : Int64?,
+                        upperbound : Int64?) : Bool
+    lb = lowerbound.try &.to_f64
+    ub = upperbound.try &.to_f64
+
+    return true if lb.nil? && ub.nil?
+
+    v = value.to_f64?
+    return false unless v
+
+    if lb.nil?
+      v <= ub.not_nil!
+    elsif ub.nil?
+      v >= lb.not_nil!
+    else
+      v >= lb.not_nil! && v <= ub.not_nil!
+    end
+  end
+
+  def match?(chapter : MangaDex::Chapter) : Bool
+    if chapter.manga_id != manga_id ||
+       (language && chapter.language != language) ||
+       (group_id && !chapter.groups.map(&.id).includes? group_id)
+      return false
+    end
+
+    in_range?(chapter.volume, min_volume, max_volume) &&
+      in_range?(chapter.chapter, min_chapter, max_chapter)
+  end
+
+  def check_for_updates : Int32
+    Logger.debug "Checking updates for subscription with ID #{id}"
+    jobs = [] of Queue::Job
+    get_client(username).user.updates_after last_checked do |chapter|
+      next unless match? chapter
+      jobs << chapter.to_job
+    end
+    Storage.default.update_subscription_last_checked id
+    count = Queue.default.push jobs
+    Logger.debug "#{count}/#{jobs.size} of updates added to queue"
+    count
+  rescue e
+    Logger.error "Error occurred when checking updates for " \
+                 "subscription with ID #{id}. #{e}"
+    0
+  end
+end
--- a/src/util/chapter_sort.cr
+++ b/src/util/chapter_sort.cr
@@ -73,7 +73,7 @@ class ChapterSorter
      .select do |key|
        keys[key].count >= str_ary.size / 2
      end
-      .sort do |a_key, b_key|
+      .sort! do |a_key, b_key|
        a = keys[a_key]
        b = keys[b_key]
        # Sort keys by the number of times they appear
--- a/src/util/numeric_sort.cr
+++ b/src/util/numeric_sort.cr
@@ -11,7 +11,7 @@ end
 def split_by_alphanumeric(str)
  arr = [] of String
  str.scan(/([^\d\n\r]*)(\d*)([^\d\n\r]*)/) do |match|
-    arr += match.captures.select { |s| s != "" }
+    arr += match.captures.select &.!= ""
  end
  arr
 end
--- a/src/util/util.cr
+++ b/src/util/util.cr
@@ -1,7 +1,7 @@
 IMGS_PER_PAGE            = 5
 ENTRIES_IN_HOME_SECTIONS = 8
 UPLOAD_URL_PREFIX        = "/uploads"
-STATIC_DIRS              = ["/css", "/js", "/img", "/favicon.ico"]
+STATIC_DIRS              = %w(/css /js /img /webfonts /favicon.ico /robots.txt)
 SUPPORTED_FILE_EXTNAMES  = [".zip", ".cbz", ".rar", ".cbr"]

 def random_str
@@ -23,10 +23,18 @@ end

 def register_mime_types
  {
+    # Comic Archives
    ".zip" => "application/zip",
    ".rar" => "application/x-rar-compressed",
    ".cbz" => "application/vnd.comicbook+zip",
    ".cbr" => "application/vnd.comicbook-rar",
+
+    # Favicon
+    ".ico" => "image/x-icon",
+
+    # FontAwesome fonts
+    ".woff"  => "font/woff",
+    ".woff2" => "font/woff2",
  }.each do |k, v|
    MIME.register k, v
  end
@@ -106,7 +114,7 @@ class String
  def components_similarity(other : String) : Float64
    s, l = [self, other]
      .map { |str| Path.new(str).parts }
-      .sort_by &.size
+      .sort_by! &.size

    match = s.reverse.zip(l.reverse).count { |a, b| a == b }
    match / s.size
--- a/src/util/web.cr
+++ b/src/util/web.cr
@@ -1,23 +1,23 @@
 # Web related helper functions/macros

-# This macro defines `is_admin` when used
-macro check_admin_access
+def is_admin?(env) : Bool
  is_admin = false
-  # The token (if exists) takes precedence over the default user option.
-  #   this is why we check the default username first before checking the
-  #   token.
-  if Config.current.disable_login
-    is_admin = Storage.default.
-      username_is_admin Config.current.default_username
+  if !Config.current.auth_proxy_header_name.empty? ||
+     Config.current.disable_login
+    is_admin = Storage.default.username_is_admin get_username env
  end
+
+  # The token (if exists) takes precedence over other authentication methods.
  if token = env.session.string? "token"
    is_admin = Storage.default.verify_admin token
  end
+
+  is_admin
 end

 macro layout(name)
  base_url = Config.current.base_url
-  check_admin_access
+  is_admin = is_admin? env
  begin
    page = {{name}}
    render "src/views/#{{{name}}}.html.ecr", "src/views/layout.html.ecr"
@@ -32,7 +32,7 @@ end
 macro send_error_page(msg)
  message = {{msg}}
  base_url = Config.current.base_url
-  check_admin_access
+  is_admin = is_admin? env
  page = "Error"
  html = render "src/views/message.html.ecr", "src/views/layout.html.ecr"
  send_file env, html.to_slice, "text/html"
@@ -49,6 +49,8 @@ macro get_username(env)
  rescue e
    if Config.current.disable_login
      Config.current.default_username
+    elsif (header = Config.current.auth_proxy_header_name) && !header.empty?
+      env.request.headers[header]
    else
      raise e
    end
@@ -70,7 +72,7 @@ def redirect(env, path)
 end

 def hash_to_query(hash)
-  hash.map { |k, v| "#{k}=#{v}" }.join("&")
+  hash.join "&" { |k, v| "#{k}=#{v}" }
 end

 def request_path_startswith(env, ary)
@@ -105,6 +107,25 @@ macro get_sort_opt
  end
 end

+# Returns an authorized client
+def get_client(username : String) : MangaDex::Client
+  token, expires = Storage.default.get_md_token username
+
+  unless expires && token
+    raise "No token found for user #{username}"
+  end
+
+  client = MangaDex::Client.from_config
+  client.token = token
+  client.token_expires = expires
+
+  client
+end
+
+def get_client(env) : MangaDex::Client
+  get_client get_username env
+end
+
 module HTTP
  class Client
    private def self.exec(uri : URI, tls : TLSContext = nil)
--- a/src/views/admin.html.ecr
+++ b/src/views/admin.html.ecr
@@ -33,6 +33,7 @@
      <option>System</option>
    </select>
  </li>
+  <li><a class="uk-link-reset" href="<%= base_url %>admin/mangadex">Connect to MangaDex</a></li>
 </ul>

 <hr class="uk-divider-icon">
--- a/src/views/components/dots-scripts.html.ecr
+++ b/src/views/components/dots-scripts.html.ecr
@@ -1,3 +1,3 @@
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script> 
+<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script> 
 <script src="<%= base_url %>js/dots.js"></script>
--- a/src/views/components/head.html.ecr
+++ b/src/views/components/head.html.ecr
@@ -4,13 +4,10 @@
  <title>Mango - <%= page.split("-").map(&.capitalize).join(" ") %></title>
  <meta name="description" content="Mango - Manga Server and Web Reader">
  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="<%= base_url %>css/uikit.css" />
  <link rel="stylesheet" href="<%= base_url %>css/mango.css" />
  <link rel="icon" href="<%= base_url %>favicon.ico">

-  <script src="https://polyfill.io/v3/polyfill.min.js?features=matchMedia%2Cdefault&flags=gated"></script>
-  <script defer src="<%= base_url %>js/fontawesome.min.js"></script>
-  <script defer src="<%= base_url %>js/solid.min.js"></script>
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=MutationObserver%2Cdefault%2CmatchMedia&flats=gated"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine-ie11.min.js" defer></script>
--- a/src/views/components/jquery-ui.html.ecr
+++ b/src/views/components/jquery-ui.html.ecr
@@ -0,0 +1 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
--- a/src/views/components/moment.html.ecr
+++ b/src/views/components/moment.html.ecr
@@ -0,0 +1 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
--- a/src/views/components/uikit.html.ecr
+++ b/src/views/components/uikit.html.ecr
@@ -0,0 +1,2 @@
+<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/js/uikit.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/js/uikit-icons.min.js"></script>
--- a/src/views/download-manager.html.ecr
+++ b/src/views/download-manager.html.ecr
@@ -5,65 +5,67 @@
    <button class="uk-button uk-button-default" @click="load()" :disabled="loading">Refresh Queue</button>
    <button class="uk-button uk-button-default" x-show="paused !== undefined" x-text="paused ? 'Resume Download' : 'Pause Download'" @click="toggle()" :disabled="toggling"></button>
  </div>
-  <table class="uk-table uk-table-striped uk-overflow-auto">
-    <thead>
-      <tr>
-        <th>Chapter</th>
-        <th>Manga</th>
-        <th>Progress</th>
-        <th>Time</th>
-        <th>Status</th>
-        <th>Plugin</th>
-        <th>Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-      <template x-for="job in jobs" :key="job">
-        <tr :id="`chapter-${job.id}`">
-
-          <template x-if="job.plugin_id">
-            <td x-text="job.title"></td>
-          </template>
-          <template x-if="!job.plugin_id">
-            <td><a :href="`${'<%= mangadex_base_url %>'.replace(/\/$/, '')}/chapter/${job.id}`" x-text="job.title"></td>
-          </template>
-
-          <template x-if="job.plugin_id">
-            <td x-text="job.manga_title"></td>
-          </template>
-          <template x-if="!job.plugin_id">
-            <td><a :href="`${'<%= mangadex_base_url %>'.replace(/\/$/, '')}/manga/${job.manga_id}`" x-text="job.manga_title"></td>
-          </template>
-
-          <td x-text="`${job.success_count}/${job.pages}`"></td>
-          <td x-text="`${moment(job.time).fromNow()}`"></td>
-
-          <td>
-            <span :class="statusClass(job.status)" x-text="job.status"></span>
-            <template x-if="job.status_message.length > 0">
-              <div class="uk-inline">
-                <span uk-icon="info"></span>
-                <div uk-dropdown x-text="job.status_message" style="white-space: pre-line;"></div>
-              </div>
-            </template>
-          </td>
-
-          <td x-text="`${job.plugin_id || ''}`"></td>
-
-          <td>
-            <a @click="jobAction('delete', $event)" uk-icon="trash"></a>
-            <template x-if="job.status_message.length > 0">
-              <a @click="jobAction('retry', $event)" uk-icon="refresh"></a>
-            </template>
-          </td>
+  <div class="uk-overflow-auto">
+    <table class="uk-table uk-table-striped">
+      <thead>
+        <tr>
+          <th>Chapter</th>
+          <th>Manga</th>
+          <th>Progress</th>
+          <th>Time</th>
+          <th>Status</th>
+          <th>Plugin</th>
+          <th>Actions</th>
        </tr>
-      </template>
-    </tbody>
-  </table>
+      </thead>
+      <tbody>
+        <template x-for="job in jobs" :key="job">
+          <tr :id="`chapter-${job.id}`">
+
+            <template x-if="job.plugin_id">
+              <td x-text="job.title"></td>
+            </template>
+            <template x-if="!job.plugin_id">
+              <td><a :href="`<%= mangadex_base_url %>/chapter/${job.id}`" x-text="job.title"></td>
+            </template>
+
+            <template x-if="job.plugin_id">
+              <td x-text="job.manga_title"></td>
+            </template>
+            <template x-if="!job.plugin_id">
+              <td><a :href="`<%= mangadex_base_url %>/manga/${job.manga_id}`" x-text="job.manga_title"></td>
+            </template>
+
+            <td x-text="`${job.success_count}/${job.pages}`"></td>
+            <td x-text="`${moment(job.time).fromNow()}`"></td>
+
+            <td>
+              <span :class="statusClass(job.status)" x-text="job.status"></span>
+              <template x-if="job.status_message.length > 0">
+                <div class="uk-inline">
+                  <span uk-icon="info"></span>
+                  <div uk-dropdown x-text="job.status_message" style="white-space: pre-line;"></div>
+                </div>
+              </template>
+            </td>
+
+            <td x-text="`${job.plugin_id || ''}`"></td>
+
+            <td>
+              <a @click="jobAction('delete', $event)" uk-icon="trash" uk-tooltip="Delete"></a>
+              <template x-if="job.status_message.length > 0">
+                <a @click="jobAction('retry', $event)" uk-icon="refresh" uk-tooltip="Retry"></a>
+              </template>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
 </div>

 <% content_for "script" do %>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
+  <%= render_component "moment" %>
  <script src="<%= base_url %>js/alert.js"></script>
  <script src="<%= base_url %>js/download-manager.js"></script>
 <% end %>
--- a/src/views/download.html.ecr
+++ b/src/views/download.html.ecr
@@ -1,83 +1,170 @@
 <h2 class=uk-title>Download from MangaDex</h2>
-<div class="uk-grid-small" uk-grid>
-  <div class="uk-width-3-4">
-    <input id="search-input" class="uk-input" type="text" placeholder="MangaDex manga ID or URL">
-  </div>
-  <div class="uk-width-1-4">
-    <div id="spinner" uk-spinner class="uk-align-center" hidden></div>
-    <button id="search-btn" class="uk-button uk-button-default" onclick="search()">Search</button>
-  </div>
+<div x-data="downloadComponent()" x-init="init()">
+    <div class="uk-grid-small" uk-grid style="margin-bottom:40px;">
+        <div class="uk-width-expand">
+            <input class="uk-input" type="text" :placeholder="searchAvailable ? 'Search MangaDex or enter a manga ID/URL' : 'MangaDex manga ID or URL'" x-model="searchInput" @keydown.enter.debounce="search()">
+        </div>
+        <div class="uk-width-auto">
+            <div uk-spinner class="uk-align-center" x-show="loading" x-cloak></div>
+            <button class="uk-button uk-button-default" x-show="!loading" @click="search()">Search</button>
+        </div>
+    </div>
+
+    <template x-if="mangaAry">
+        <div>
+            <p x-show="mangaAry.length === 0">No matching manga found.</p>
+
+            <div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
+                <template x-for="manga in mangaAry" :key="manga.id">
+                    <div class="item" :data-id="manga.id" @click="chooseManga(manga)">
+                        <div class="uk-card uk-card-default">
+                            <div class="uk-card-media-top uk-inline">
+                                <img uk-img :data-src="manga.mainCover">
+                            </div>
+                            <div class="uk-card-body">
+                                <h3 class="uk-card-title break-word uk-margin-remove-bottom free-height" x-text="manga.title"></h3>
+                                <p class="uk-text-meta" x-text="`ID: ${manga.id}`"></p>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </template>
+
+    <div x-show="data && data.chapters" x-cloak>
+        <div class"uk-grid-small" uk-grid>
+            <div class="uk-width-1-4@s">
+                <img :src="data.mainCover">
+            </div>
+            <div class="uk-width-1-4@s">
+                <p>Title: <a :href="`<%= mangadex_base_url %>/manga/${data.id}`" x-text="data.title"></a></p>
+                <p x-text="`Artist: ${data.artist}`"></p>
+                <p x-text="`Author: ${data.author}`"></p>
+            </div>
+            <div class="uk-form-stacked uk-width-1-2@s" id="filters">
+                <p class="uk-text-lead uk-margin-remove-bottom">
+                <span>Filter Chapters</span>
+                <button class="uk-icon-button uk-align-right" uk-icon="rss" uk-tooltip="Subscribe" x-show="searchAvailable" @click="subscribe()"></button>
+                </p>
+                <p class="uk-text-meta uk-margin-remove-top" x-text="`${chapters.length} chapters found`"></p>
+                <div class="uk-margin">
+                    <label class="uk-form-label">Language</label>
+                    <div class="uk-form-controls">
+                        <select class="uk-select filter-field" x-model="langChoice" @change="filtersUpdated()">
+                            <template x-for="lang in languages" :key="lang">
+                                <option x-text="lang"></option>
+                            </template>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="uk-margin">
+                    <label class="uk-form-label">Group</label>
+                    <div class="uk-form-controls">
+                        <select class="uk-select filter-field" x-model="groupChoice" @change="filtersUpdated()">
+                            <template x-for="group in groups" :key="group">
+                                <option x-text="group"></option>
+                            </template>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="uk-margin">
+                    <label class="uk-form-label">Volume</label>
+                    <div class="uk-form-controls">
+                        <input class="uk-input filter-field" type="text" placeholder="e.g., 127, 10-14, >30, <=212, or leave it empty." x-model="volumeRange" @keydown.enter="filtersUpdated()">
+                    </div>
+                </div>
+
+                <div class="uk-margin">
+                    <label class="uk-form-label">Chapter</label>
+                    <div class="uk-form-controls">
+                        <input class="uk-input filter-field" type="text" placeholder="e.g., 127, 10-14, >30, <=212, or leave it empty." x-model="chapterRange" @keydown.enter="filtersUpdated()">
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="uk-margin">
+            <div class="uk-margin">
+                <button class="uk-button uk-button-default" @click="selectAll()">Select All</button>
+                <button class="uk-button uk-button-default" @click="clearSelection()">Clear Selections</button>
+                <button class="uk-button uk-button-primary" @click="download()" x-show="!addingToDownload">Download Selected</button>
+                <div uk-spinner class="uk-margin-left" x-show="addingToDownload"></div>
+            </div>
+            <p class="uk-text-meta">Click on a table row to select the chapter. Drag your mouse over multiple rows to select them all. Hold Ctrl to make multiple non-adjacent selections.</p>
+        </div>
+        <p x-text="`Mango can only list ${chaptersLimit} chapters, but we found ${chapters.length} chapters. Please use the filter options above to narrow down your search.`" x-show="chapters.length > chaptersLimit"></p>
+        <div class="uk-overflow-auto">
+            <table class="uk-table uk-table-striped" x-show="chapters.length <= chaptersLimit">
+                <thead>
+                    <tr>
+                        <th>ID</th>
+                        <th>Title</th>
+                        <th>Language</th>
+                        <th>Group</th>
+                        <th>Volume</th>
+                        <th>Chapter</th>
+                        <th>Timestamp</th>
+                    </tr>
+                </thead>
+
+                <template x-if="chapters.length <= chaptersLimit">
+                    <tbody id="selectable">
+                        <template x-for="chp in chapters" :key="chp">
+                            <tr class="ui-widget-content">
+                                <td><a :href="`<%= mangadex_base_url %>/chapter/${chp.id}`" x-text="chp.id"></a></td>
+                                <td x-text="chp.title"></td>
+                                <td x-text="chp.language"></td>
+                                <td>
+                                    <template x-for="grp in Object.entries(chp.groups)">
+                                        <div>
+                                            <a :href="`<%= mangadex_base_url %>/group/${grp[1]}`" x-text="grp[0]"></a>
+                                        </div>
+                                    </template>
+                                </td>
+                                <td x-text="chp.volume"></td>
+                                <td x-text="chp.chapter"></td>
+                                <td x-text="`${moment.unix(chp.timestamp).fromNow()}`"></td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </template>
+            </table>
+        </div>
+    </div>
+
+    <div id="modal" class="uk-flex-top" uk-modal="container: false">
+        <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" x-text="candidateManga.title"></h3>
+            </div>
+            <div class="uk-modal-body">
+                <div class="uk-grid">
+                    <div class="uk-width-1-3@s">
+                        <img uk-img data-width data-height :src="candidateManga.mainCover" style="width:100%;margin-bottom:10px;">
+                        <a :href="`<%= mangadex_base_url %>/manga/${candidateManga.id}`" x-text="`ID: ${candidateManga.id}`" class="uk-link-muted"></a>
+                    </div>
+                    <div class="uk-width-2-3@s">
+                        <p x-text="candidateManga.description"></p>
+                    </div>
+                </div>
+            </div>
+            <div class="uk-modal-footer">
+                <button class="uk-button uk-button-primary" type="button" @click="confirmManga(candidateManga.id)">Choose</button>
+            </div>
+        </div>
+    </div>
 </div>
-<div class"uk-grid-small" uk-grid hidden id="manga-details">
-  <div class="uk-width-1-4@s">
-    <img id="cover">
-  </div>
-  <div class="uk-width-1-4@s">
-    <p id="title"></p>
-    <p id="artist"></p>
-    <p id="author"></p>
-  </div>
-  <div id="filter-form" class="uk-form-stacked uk-width-1-2@s" hidden>
-    <p class="uk-text-lead uk-margin-remove-bottom">Filter Chapters</p>
-    <p class="uk-text-meta uk-margin-remove-top" id="count-text"></p>
-    <div class="uk-margin">
-      <label class="uk-form-label" for="lang-select">Language</label>
-      <div class="uk-form-controls">
-        <select class="uk-select filter-field" id="lang-select">
-        </select>
-      </div>
-    </div>
-    <div class="uk-margin">
-      <label class="uk-form-label" for="group-select">Group</label>
-      <div class="uk-form-controls">
-        <select class="uk-select filter-field" id="group-select">
-        </select>
-      </div>
-    </div>
-    <div class="uk-margin">
-      <label class="uk-form-label" for="volume-range">Volume</label>
-      <div class="uk-form-controls">
-        <input class="uk-input filter-field" type="text" id="volume-range" placeholder="e.g., 127, 10-14, >30, <=212, or leave it empty.">
-      </div>
-    </div>
-    <div class="uk-margin">
-      <label class="uk-form-label" for="chapter-range">Chapter</label>
-      <div class="uk-form-controls">
-        <input class="uk-input filter-field" type="text" id="chapter-range" placeholder="e.g., 127, 10-14, >30, <=212, or leave it empty.">
-      </div>
-    </div>
-  </div>
-</div>
-<div id="selection-controls" class="uk-margin" hidden>
-  <div class="uk-margin">
-    <button class="uk-button uk-button-default" onclick="selectAll()">Select All</button>
-    <button class="uk-button uk-button-default" onclick="unselect()">Clear Selections</button>
-    <button class="uk-button uk-button-primary" id="download-btn" onclick="download()">Download Selected</button>
-    <div id="download-spinner" uk-spinner class="uk-margin-left" hidden></div>
-  </div>
-  <p class="uk-text-meta">Click on a table row to select the chapter. Drag your mouse over multiple rows to select them all. Hold Ctrl to make multiple non-adjacent selections.</p>
-</div>
-<p id="filter-notification" hidden></p>
-<table class="uk-table uk-table-striped uk-overflow-auto" hidden>
-  <thead>
-    <tr>
-      <th>ID</th>
-      <th>Title</th>
-      <th>Language</th>
-      <th>Group</th>
-      <th>Volume</th>
-      <th>Chapter</th>
-      <th>Timestamp</th>
-    </tr>
-  </thead>
-</table>

 <% content_for "script" do %>
-  <script>
-    var baseURL = "<%= mangadex_base_url %>".replace(/\/$/, "");
-  </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="<%= base_url %>js/alert.js"></script>
-  <script src="<%= base_url %>js/download.js"></script>
+    <%= render_component "moment" %>
+    <%= render_component "jquery-ui" %>
+    <script>
+        const mangadex_base_url = "<%= mangadex_base_url %>";
+    </script>
+    <script src="<%= base_url %>js/alert.js"></script>
+    <script src="<%= base_url %>js/download.js"></script>
 <% end %>
--- a/src/views/home.html.ecr
+++ b/src/views/home.html.ecr
@@ -77,7 +77,7 @@
 <%- end -%>

 <% content_for "script" do %>
-  <%= render_component "dots-scripts" %>
+  <%= render_component "dots" %>
  <script src="<%= base_url %>js/alert.js"></script>
  <script src="<%= base_url %>js/title.js"></script>
 <% end %>
--- a/src/views/layout.html.ecr
+++ b/src/views/layout.html.ecr
@@ -20,6 +20,7 @@
                    <li><a href="<%= base_url %>download">MangaDex</a></li>
                    <li><a href="<%= base_url %>download/plugins">Plugins</a></li>
                    <li><a href="<%= base_url %>admin/downloads">Download Manager</a></li>
+                    <li><a href="<%= base_url %>download/subscription">Subscription Manager</a></li>
                  </ul>
                </li>
              <% end %>
@@ -53,6 +54,7 @@
                    <li><a href="<%= base_url %>download/plugins">Plugins</a></li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="<%= base_url %>admin/downloads">Download Manager</a></li>
+                    <li><a href="<%= base_url %>download/subscription">Subscription Manager</a></li>
                  </ul>
                </div>
              </li>
@@ -82,9 +84,7 @@
      setTheme();
      const base_url = "<%= base_url %>";
    </script>
-    <script src="<%= base_url %>js/uikit.min.js"></script>
-    <script src="<%= base_url %>js/uikit-icons.min.js"></script>
-
+    <%= render_component "uikit" %>
    <%= yield_content "script" %>
  </body>

--- a/src/views/library.html.ecr
+++ b/src/views/library.html.ecr
@@ -24,7 +24,7 @@
 </div>

 <% content_for "script" do %>
-  <%= render_component "dots-scripts" %>
+  <%= render_component "dots" %>
  <script src="<%= base_url %>js/search.js"></script>
  <script src="<%= base_url %>js/sort-items.js"></script>
 <% end %>
--- a/src/views/login.html.ecr
+++ b/src/views/login.html.ecr
@@ -30,8 +30,7 @@
    <script>
      setTheme();
    </script>
-    <script src="<%= base_url %>js/uikit.min.js"></script>
-    <script src="<%= base_url %>js/uikit-icons.min.js"></script>
+    <%= render_component "uikit" %>
  </body>

 </html>
--- a/src/views/mangadex.html.ecr
+++ b/src/views/mangadex.html.ecr
@@ -0,0 +1,39 @@
+<div x-data="component()" x-init="init()">
+  <h2 class="uk-title">Connect to MangaDex</h2>
+  <div class"uk-grid-small" uk-grid x-show="!loading" x-cloak>
+    <div class="uk-width-1-2@s" x-show="!expires">
+      <p>This step is optional but highly recommended if you are using the MangaDex downloader. Connecting to MangaDex allows you to:</p>
+      <ul>
+        <li>Search MangaDex by search terms in addition to manga IDs</li>
+        <li>Automatically download new chapters when they are available (coming soon)</li>
+      </ul>
+    </div>
+
+    <div class="uk-width-1-2@s" x-show="expires">
+      <p>
+      <span x-show="!expired">You have logged in to MangaDex!</span>
+      <span x-show="expired">You have logged in to MangaDex but the token has expired.</span>
+      The expiration date of your token is <code x-text="moment.unix(expires).format('MMMM Do YYYY, HH:mm:ss')"></code>. 
+      <span x-show="!expired">If the integration is not working, you</span>
+      <span x-show="expired">You</span>
+      can log in again and the token will be updated.
+      </p>
+    </div>
+
+    <div class="uk-width-1-2@s">
+      <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" x-model="username" @keydown.enter.debounce="login()"></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" x-model="password" @keydown.enter.debounce="login()"></div>
+      </div>
+      <div class="uk-margin"><button class="uk-button uk-button-primary uk-button-large uk-width-1-1" @click="login()" :disabled="loggingIn">Login to MangaDex</button></div>
+    </div>
+  </div>
+</div>
+
+<% content_for "script" do %>
+  <%= render_component "moment" %>
+  <script src="<%= base_url %>js/alert.js"></script>
+  <script src="<%= base_url %>js/mangadex.js"></script>
+<% end %>
--- a/src/views/missing-items.html.ecr
+++ b/src/views/missing-items.html.ecr
@@ -3,34 +3,36 @@
  <div x-show="!empty">
    <p>The following items were present in your library, but now we can't find them anymore. If you deleted them mistakenly, try to recover the files or folders, put them back to where they were, and rescan the library. Otherwise, you can safely delete them and the associated metadata using the buttons below to free up database space.</p>
    <button class="uk-button uk-button-danger" @click="rmAll()">Delete All</button>
-    <table class="uk-table uk-table-striped uk-overflow-auto">
-      <thead>
-        <tr>
-          <th>Type</th>
-          <th>Relative Path</th>
-          <th>ID</th>
-          <th>Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        <template x-for="title in titles" :key="title">
-          <tr :id="`title-${title.id}`">
-            <td>Title</td>
-            <td x-text="title.path"></td>
-            <td x-text="title.id"></td>
-            <td><a @click="rm($event)" uk-icon="trash"></a></td>
+    <div class="uk-overflow-auto">
+      <table class="uk-table uk-table-striped">
+        <thead>
+          <tr>
+            <th>Type</th>
+            <th>Relative Path</th>
+            <th>ID</th>
+            <th>Actions</th>
          </tr>
-        </template>
-        <template x-for="entry in entries" :key="entry">
-          <tr :id="`entry-${entry.id}`">
-            <td>Entry</td>
-            <td x-text="entry.path"></td>
-            <td x-text="entry.id"></td>
-            <td><a @click="rm($event)" uk-icon="trash"></a></td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          <template x-for="title in titles" :key="title">
+            <tr :id="`title-${title.id}`">
+              <td>Title</td>
+              <td x-text="title.path"></td>
+              <td x-text="title.id"></td>
+              <td><a @click="rm($event)" uk-icon="trash"></a></td>
+            </tr>
+          </template>
+          <template x-for="entry in entries" :key="entry">
+            <tr :id="`entry-${entry.id}`">
+              <td>Entry</td>
+              <td x-text="entry.path"></td>
+              <td x-text="entry.id"></td>
+              <td><a @click="rm($event)" uk-icon="trash"></a></td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
  </div>
 </div>

--- a/src/views/plugin-download.html.ecr
+++ b/src/views/plugin-download.html.ecr
@@ -56,8 +56,10 @@
      <div id="download-spinner" uk-spinner class="uk-margin-left" hidden></div>
    </div>
    <p class="uk-text-meta">Click on a table row to select the chapter. Drag your mouse over multiple rows to select them all. Hold Ctrl to make multiple non-adjacent selections.</p>
-    <table class="uk-table uk-table-striped uk-overflow-auto tablesorter">
-    </table>
+    <div class="uk-overflow-auto">
+      <table class="uk-table uk-table-striped tablesorter">
+      </table>
+    </div>
  </div>
 <% end %>

@@ -68,7 +70,7 @@
      var pid = "<%= plugin.not_nil!.info.id %>";
    </script>
  <% end %>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+  <%= render_component "jquery-ui" %>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.combined.min.js"></script>
  <script src="<%= base_url %>js/alert.js"></script>
  <script src="<%= base_url %>js/plugin-download.js"></script>
--- a/src/views/reader.html.ecr
+++ b/src/views/reader.html.ecr
@@ -24,19 +24,19 @@
          <template x-for="item in items">
            <img
              uk-img
-              class="uk-align-center"
-              :style="item.style"
+              :class="{'uk-align-center': true, 'spine': item.width < 50}"
              :data-src="item.url"
              :width="item.width"
              :height="item.height"
              :id="item.id"
+              :style="`margin-top:${margin}px; margin-bottom:${margin}px`"
              @click="showControl($event)"
              />
          </template>
          <%- if next_entry_url -%>
            <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="nextEntry('<%= next_entry_url %>')">Next Entry</button>
          <%- else -%>
-            <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="exitReader('<%= exit_url %>', true)">Exit Reader</button>
+            <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="exitReader('<%= exit_url %>')">Exit Reader</button>
          <%- end -%>
        </div>

@@ -68,18 +68,19 @@
        </div>
        <div class="uk-modal-body">
          <div class="uk-margin">
-            <p id="progress-label"></p>
+            <p x-text="`Progress: ${selectedIndex}/${items.length} (${(selectedIndex/items.length * 100).toFixed(1)}%)`"></p>
          </div>
          <div class="uk-margin">
-            <label class="uk-form-label" for="page-select">Jump to page</label>
+            <label class="uk-form-label" for="page-select">Jump to Page</label>
            <div class="uk-form-controls">
-              <select id="page-select" class="uk-select" @change="pageChanged()">
+              <select id="page-select" class="uk-select" @change="pageChanged()" x-model="selectedIndex">
                <%- (1..entry.pages).each do |p| -%>
                  <option value="<%= p %>"><%= p %></option>
                <%- end -%>
              </select>
            </div>
          </div>
+
          <div class="uk-margin">
            <label class="uk-form-label" for="mode-select">Mode</label>
            <div class="uk-form-controls">
@@ -89,9 +90,40 @@
              </select>
            </div>
          </div>
+
+          <div class="uk-margin" x-show="mode === 'continuous'">
+            <label class="uk-form-label" for="margin-range" x-text="`Page Margin: ${margin}px`"></label>
+            <div class="uk-form-controls">
+              <input id="margin-range" class="uk-range" type="range" min="0" max="50" step="5" x-model="margin" @change="marginChanged()">
+            </div>
+          </div>
+
+          <hr class="uk-divider-icon">
+
+          <div class="uk-margin">
+            <label class="uk-form-label" for="entry-select">Jump to Entry</label>
+            <div class="uk-form-controls">
+              <select id="entry-select" class="uk-select" @change="entryChanged()">
+                <% entries.each do |e| %>
+                  <option value="<%= e.id %>"
+                  <% if e.id == entry.id %>
+                    selected
+                  <% end %>>
+                  <%= e.title %>
+                  </option>
+                <% end %>
+              </select>
+            </div>
+          </div>
        </div>
        <div class="uk-modal-footer uk-text-right">
-          <button class="uk-button uk-button-danger" type="button" @click="exitReader('<%= exit_url %>')">Exit Reader</button>
+          <% if previous_entry_url %>
+            <a class="uk-button uk-button-default uk-margin-small-bottom uk-margin-small-right" href="<%= previous_entry_url %>">Previous Entry</a>
+          <% end %>
+          <% if next_entry_url %>
+            <a class="uk-button uk-button-default uk-margin-small-bottom uk-margin-small-right" href="<%= next_entry_url %>">Next Entry</a>
+          <% end %>
+          <a class="uk-button uk-button-danger uk-margin-small-bottom uk-margin-small-right" href="<%= exit_url %>">Exit Reader</a>
        </div>
      </div>
    </div>
@@ -103,15 +135,14 @@
      const eid = "<%= entry.id %>";
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
+    <%= render_component "uikit" %>
    <script src="<%= base_url %>js/alert.js"></script>
-    <script src="<%= base_url %>js/uikit.min.js"></script>
-    <script src="<%= base_url %>js/uikit-icons.min.js"></script>
    <script src="<%= base_url %>js/reader.js"></script>
  </body>

  <style>
 img[data-src][src*='data:image'] { background: white; }
-img { width: 100%; }
+img:not(.spine) { width: 100%; }
 .reader-bg { background: black; }
  </style>

--- a/src/views/subscription.html.ecr
+++ b/src/views/subscription.html.ecr
@@ -0,0 +1,54 @@
+<h2 class="uk-title">MangaDex Subscription Manager</h2>
+
+<div x-data="component()" x-init="init()">
+  <p x-show="available === false">The subscription manager uses a MangaDex API that requires authentication. Please <a href="<%= base_url %>admin/mangadex">connect to MangaDex</a> before using this feature.</p>
+
+  <p x-show="available && subscriptions.length === 0">No subscription found. Go to the <a href="<%= base_url %>download">MangaDex download page</a> and start subscribing.</p>
+
+  <template x-if="subscriptions.length > 0">
+    <div class="uk-overflow-auto">
+      <table class="uk-table uk-table-striped">
+        <thead>
+          <tr>
+            <th>Manga ID</th>
+            <th>Language</th>
+            <th>Group ID</th>
+            <th>Volume Range</th>
+            <th>Chapter Range</th>
+            <th>Creator</th>
+            <th>Last Checked</th>
+            <th>Created At</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <template x-for="sub in subscriptions" :key="sub">
+            <tr>
+              <td><a :href="`<%= mangadex_base_url %>/manga/${sub.manga_id}`" x-text="sub.manga_id"></a></td>
+              <td x-text="sub.language || 'All'"></td>
+              <td>
+                <a x-show="sub.group_id" :href="`<%= mangadex_base_url %>/group/${sub.group_id}`" x-text="sub.group_id"></a>
+                <span x-show="!sub.group_id">All</span>
+              </td>
+              <td x-text="formatRange(sub.min_volume, sub.max_volume)"></td>
+              <td x-text="formatRange(sub.min_chapter, sub.max_chapter)"></td>
+              <td x-text="sub.username"></td>
+              <td x-text="`${moment.unix(sub.last_checked).fromNow()}`"></td>
+              <td x-text="`${moment.unix(sub.created_at).fromNow()}`"></td>
+              <td :data-id="sub.id">
+                <a @click="check($event)" x-show="sub.username === '<%= username %>'" uk-icon="refresh" uk-tooltip="Check for updates"></a>
+                <a @click="rm($event)" x-show="sub.username === '<%= username %>'" uk-icon="trash" uk-tooltip="Delete"></a>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </template>
+</div>
+
+<% content_for "script" do %>
+  <%= render_component "moment" %>
+  <script src="<%= base_url %>js/alert.js"></script>
+  <script src="<%= base_url %>js/subscription.js"></script>
+<% end %>
--- a/src/views/tag.html.ecr
+++ b/src/views/tag.html.ecr
@@ -24,7 +24,7 @@
 </div>

 <% content_for "script" do %>
-  <%= render_component "dots-scripts" %>
+  <%= render_component "dots" %>
  <script src="<%= base_url %>js/search.js"></script>
  <script src="<%= base_url %>js/sort-items.js"></script>
 <% end %>
--- a/src/views/title.html.ecr
+++ b/src/views/title.html.ecr
@@ -123,7 +123,7 @@
 </div>

 <% content_for "script" do %>
-  <%= render_component "dots-scripts" %>
+  <%= render_component "dots" %>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
  <link href="<%= base_url %>css/tags.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
Author	SHA1	Message	Date
Leeingnyo	5a17ca07d8	Use yaml-static in Dockerfile	2021-08-18 19:42:32 +09:00
Alex Ling	46e6e41bfe	Fix reader buttons stacking on mobile	2021-03-29 00:41:33 +00:00
Alex Ling	c9f55e7a8e	Use yaml-static	2021-03-28 12:49:50 +00:00
Alex Ling	741c3a4e20	Update config example in README	2021-03-28 11:56:06 +00:00
Alex Ling	f6da20321d	Bump version to 0.22.0	2021-03-28 11:49:49 +00:00
Alex Ling	2764e955b2	Show success alert on plugin download page	2021-03-15 17:07:15 +00:00
Alex Ling	00c15014a1	Document subscription APIs	2021-03-15 07:12:30 +00:00
Alex Ling	c6fdbfd9fd	Better format ranges on subscription manager page	2021-03-15 07:12:10 +00:00
Alex Ling	e03bf32358	Show success alerts on the download page	2021-03-14 17:36:43 +00:00
Alex Ling	bbf1520c73	Make `in_range?` private	2021-03-14 17:36:26 +00:00
Alex Ling	8950c3a1ed	Fix downloader stuck on external chapters	2021-03-14 16:27:08 +00:00
Alex Ling	17837d8a29	Add tooltips to download manager	2021-03-14 16:03:37 +00:00
Alex Ling	b4a69425c8	Reverse the queue on download manager	2021-03-14 16:01:29 +00:00
Alex Ling	a612500b0f	Subscription manager	2021-03-14 16:01:29 +00:00
Alex Ling	9bb7144479	Fix warning	2021-03-12 15:28:39 +00:00
Alex Ling	ee52c52f46	Fix new linter errors	2021-03-12 15:03:12 +00:00
Alex Ling	daec2bdac6	Update ameba	2021-03-12 14:06:20 +00:00
Alex Ling	e9a490676b	Update the mangadex shard	2021-03-12 13:59:11 +00:00
Alex Ling	757f7c8214	Upgrade Crystal to 0.36.1	2021-03-12 13:41:24 +00:00
Alex Ling	eed1a9717e	Merge branch 'master' into dev	2021-03-10 16:48:51 +00:00
Alex Ling	8829d2e237	Merge pull request #173 from hkalexling/rc/0.21.0	2021-03-11 00:44:49 +08:00
Alex Ling	eec6ec60bf	Warn about old API url (#174 )	2021-03-10 05:47:25 +00:00
Alex Ling	3a82effa40	Update config in README	2021-03-09 18:01:03 +00:00
Alex Ling	0b3e78bcb7	Merge branch 'rc/0.21.0' into dev	2021-03-09 16:45:26 +00:00
Alex Ling	cb4e4437a6	Update MD API URL (closes #174 )	2021-03-09 16:43:46 +00:00
Alex Ling	6a275286ea	Merge branch 'rc/0.21.0' into dev	2021-03-07 14:14:46 +00:00
Alex Ling	2743868438	Remove outdated MD API link in warning	2021-03-06 17:03:48 +00:00
Alex Ling	d3f26ecbc9	Move the page margin config to frontend	2021-03-06 15:04:44 +00:00
Alex Ling	f62344806a	Bump version to 0.21.0	2021-03-06 06:16:07 +00:00
Alex Ling	b7b7e6f718	Fix typo [skip ci]	2021-03-05 17:04:23 +00:00
Alex Ling	05b4e77fa9	Entry selector on reader page (closes #168 )	2021-03-05 17:02:45 +00:00
Alex Ling	8aab113aab	Expiration date should be nil when theres no token	2021-03-05 11:01:00 +00:00
Alex Ling	371c8056e7	Wording	2021-03-05 10:57:23 +00:00
Alex Ling	a9a2c9faa8	Finish search for MD	2021-03-05 04:58:56 +00:00
Alex Ling	011768ed1f	Rename the `dots-scripts` component to `dots`	2021-03-05 04:58:56 +00:00
Alex Ling	c36d2608e8	Make uk-card adaptive to dark/light mode	2021-03-05 04:58:56 +00:00
Alex Ling	1b25a1fa47	Update Koa	2021-03-05 04:58:56 +00:00
Alex Ling	df7e2270a4	Add MangaDex login page	2021-03-05 04:58:56 +00:00
Alex Ling	3c3549a489	Merge pull request #172 from hkalexling/hotfix/bind-localhost	2021-03-04 13:47:59 +08:00
Alex Ling	8160b0a18e	Bump version to 0.20.2	2021-03-04 04:49:37 +00:00
Alex Ling	a7eff772be	Update example config in README	2021-03-04 04:48:51 +00:00
Alex Ling	bf3900f9a2	Add host to config	2021-03-03 17:35:39 +00:00
Alex Ling	6fa575cf4f	Bind localhost when a proxy auth header is set	2021-03-03 16:28:31 +00:00
Alex Ling	604c5d49a6	Merge pull request #166 from hkalexling/dev	2021-02-28 19:38:02 +08:00
Alex Ling	7449d19075	Bump version to 0.20.1	2021-02-26 10:35:34 +00:00
Alex Ling	c5c9305a0b	Merge pull request #162 from hkalexling/all-contributors/add-davidkna docs: add davidkna as a contributor	2021-02-14 23:30:02 +08:00
allcontributors[bot]	fdceab9060	docs: update .all-contributorsrc [skip ci]	2021-02-14 15:28:33 +00:00
allcontributors[bot]	c18591c5cf	docs: update README.md [skip ci]	2021-02-14 15:28:32 +00:00
Alex Ling	bb5cb9b94c	Merge pull request #161 from davidkna/docker-usr-local Move binary in docker image to /usr/local	2021-02-14 23:26:38 +08:00
David Knaack	fb499a5caf	Move binary in docker image to /usr/local	2021-02-14 11:42:00 +01:00
Alex Ling	154d85e197	Use only woff and woff2	2021-02-11 08:40:24 +00:00
Alex Ling	933617503e	Optimize the static files - Use webfont version of FontAwesome - Use CDN for UIKit JS files	2021-02-10 16:24:34 +00:00
Alex Ling	31c6893bbb	Display book spines in original size (fixes #152 )	2021-02-06 13:37:25 +00:00
Alex Ling	171125e8ac	Merge pull request #159 from Leeingnyo/fix/favicon-500-error Fix HTTP 500 Error when accessing the favicon	2021-02-06 16:34:56 +08:00
Leeingnyo	d81334026b	add MIME type of ico file The server returns 500 error when requested '/favion.ico' The handler worked fine, but send_file has failed with - Missing MIME type for extension ".ico" so I register mime type for .ico file	2021-02-06 16:58:49 +09:00
Alex Ling	2b3b2eb8ba	Fill default configs before pre-processing	2021-02-03 05:27:41 +00:00
Alex Ling	ffd5f4454b	Merge branch 'feature/auth-proxy' into dev	2021-02-03 05:23:00 +00:00
Alex Ling	cb25d7ba00	Merge branch 'feature/mangadex-api-upgrade' into dev	2021-02-03 05:22:35 +00:00
Alex Ling	c61eb7554e	Update the mangadex shard	2021-02-01 11:35:16 +00:00
Alex Ling	edd9a2e093	Add MutationObserver polyfill	2021-01-31 15:32:38 +00:00
Alex Ling	1f50785e8f	Rewrite MangaDex download page with Alpine	2021-01-31 12:48:37 +00:00
Alex Ling	70d418d1a1	Upgrade to MangaDex API v2	2021-01-30 17:08:04 +00:00
Alex Ling	45e20c94f9	Merge branch 'dev' into feature/auth-proxy	2021-01-30 10:55:27 +00:00
Alex Ling	4da263c594	Rewrite auth_handler Make sure the OPDS pages are accessible without login when login is disabled	2021-01-30 10:54:03 +00:00
Alex Ling	d67a24809b	Allow proxy authentication (#141 )	2021-01-30 07:43:02 +00:00
				`@@ -0,0 +1 @@`
				`<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>`