Large changes

- Removes dependencies on EOLed rawgit
- Removes third party js
- Moves to jquery slim
- Migrates gif to mp4 and webm sources
- Optimises png files
- Removes some unused rules from style.css

assets/bootstrap-toc.min.css

@@ -0,0 +1,4 @@
+/*!
+ * Bootstrap Table of Contents v1.0.1 (http://afeld.github.io/bootstrap-toc/)
+ * Copyright 2015 Aidan Feldman
+ * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */nav[data-toggle=toc] .nav>li>a{display:block;padding:4px 20px;font-size:13px;font-weight:500;color:#767676}nav[data-toggle=toc] .nav>li>a:focus,nav[data-toggle=toc] .nav>li>a:hover{padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c}nav[data-toggle=toc] .nav-link.active,nav[data-toggle=toc] .nav-link.active:focus,nav[data-toggle=toc] .nav-link.active:hover{padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c}nav[data-toggle=toc] .nav-link+ul{display:none;padding-bottom:10px}nav[data-toggle=toc] .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}nav[data-toggle=toc] .nav .nav>li>a:focus,nav[data-toggle=toc] .nav .nav>li>a:hover{padding-left:29px}nav[data-toggle=toc] .nav .nav>li>.active,nav[data-toggle=toc] .nav .nav>li>.active:focus,nav[data-toggle=toc] .nav .nav>li>.active:hover{padding-left:28px;font-weight:500}nav[data-toggle=toc] .nav-link.active+ul{display:block}

assets/bootstrap-toc.min.js

@@ -0,0 +1,5 @@
+/*!
+ * Bootstrap Table of Contents v1.0.1 (http://afeld.github.io/bootstrap-toc/)
+ * Copyright 2015 Aidan Feldman
+ * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */
+!function(a){"use strict";window.Toc={helpers:{findOrFilter:function(e,t){var n=e.find(t);return e.filter(t).add(n).filter(":not([data-toc-skip])")},generateUniqueIdBase:function(e){return a(e).text().trim().replace(/\'/gi,"").replace(/[& +$,:;=?@"#{}|^~[`%!'<>\]\.\/\(\)\*\\\n\t\b\v]/g,"-").replace(/-{2,}/g,"-").substring(0,64).replace(/^-+|-+$/gm,"").toLowerCase()||e.tagName.toLowerCase()},generateUniqueId:function(e){for(var t=this.generateUniqueIdBase(e),n=0;;n++){var r=t;if(0<n&&(r+="-"+n),!document.getElementById(r))return r}},generateAnchor:function(e){if(e.id)return e.id;var t=this.generateUniqueId(e);return e.id=t},createNavList:function(){return a('<ul class="nav navbar-nav"></ul>')},createChildNavList:function(e){var t=this.createNavList();return e.append(t),t},generateNavEl:function(e,t){var n=a('<a class="nav-link"></a>');n.attr("href","#"+e),n.text(t);var r=a("<li></li>");return r.append(n),r},generateNavItem:function(e){var t=this.generateAnchor(e),n=a(e),r=n.data("toc-text")||n.text();return this.generateNavEl(t,r)},getTopLevel:function(e){for(var t=1;t<=6;t++){if(1<this.findOrFilter(e,"h"+t).length)return t}return 1},getHeadings:function(e,t){var n="h"+t,r="h"+(t+1);return this.findOrFilter(e,n+","+r)},getNavLevel:function(e){return parseInt(e.tagName.charAt(1),10)},populateNav:function(r,a,e){var i,s=r,c=this;e.each(function(e,t){var n=c.generateNavItem(t);c.getNavLevel(t)===a?s=r:i&&s===r&&(s=c.createChildNavList(i)),s.append(n),i=n})},parseOps:function(e){var t;return(t=e.jquery?{$nav:e}:e).$scope=t.$scope||a(document.body),t}},init:function(e){(e=this.helpers.parseOps(e)).$nav.attr("data-toggle","toc");var t=this.helpers.createChildNavList(e.$nav),n=this.helpers.getTopLevel(e.$scope),r=this.helpers.getHeadings(e.$scope,n);this.helpers.populateNav(t,n,r)}},a(function(){a('nav[data-toggle="toc"]').each(function(e,t){var n=a(t);Toc.init(n)})})}(jQuery);

assets/style.css

@@ -7,21 +7,8 @@ body {
 	background-color: #f5f5f5;
 }
 
-hr { 
-    display: block;
-    margin-before: 0.5em;
-    margin-after: 0.5em;
-    margin-start: auto;
-    margin-end: auto;
-    overflow: hidden;
-    border-style: inset;
-    border-width: 1px;
-}
-
 img {
 	margin: 2px;
-	padding-top: 10px;
-	padding-bottom: 5px;
 	max-width: 325px;	
 }
 

index.html

@@ -7,8 +7,8 @@
 	<meta content="" name="description">
 	<link href="favicon.ico" rel="icon">
 	<link href="assets/style.css" rel="stylesheet">
-	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
+	<link href="assets/bootstrap.min.css" rel="stylesheet">
-	<link href="https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.css" rel="stylesheet">
+	<link href="assets/bootstrap-toc.min.css" rel="stylesheet">
 </head>
 <body data-spy="scroll" data-target="#toc">
 	<div class="container">
@@ -28,77 +28,71 @@
 				<p><code>tachiyomi-vX.Y.Z.apk</code></p>
 				<p>Open and install the <code>.apk</code> file you just downloaded from GitHub.</p>
 				<div class="d-flex justify-content-center">
-					<a href="assets/install.jpg"><img class="mb-4" src="assets/install.jpg"></a>
+					<img class="mb-4" src="assets/install.jpg" intrinsicsize="1076x608" width="269" height="152">
 				</div>
 				<h3 class="h5 mb-3 font-weight-normal">Your first extension</h3>
 				<p>Now that Tachiyomi is installed, open the app and navigate to the <code>Extensions</code> tab.</p>
-				<div class="d-flex justify-content-center">
+				<figure class="d-flex justify-content-center">
-					<a href="assets/extensions.gif"><img class="lazyload mb-4" data-src="assets/extensions.gif" src="assets/extensions.png"></a>
+					<video preload="metadata" autoplay muted loop loading="lazy" poster="assets/extensions.png" intrinsicsize="600x1089" width="300" height="544">
-				</div>
+						<source src="assets/extensions.mp4" type="video/mp4" />
-				<p>In this guide we will use MangaDex, our most popular extension. Press the <code>Install</code> button and it will bring up the extension installer. If your phone does not allow third-party installations, follow <a href="#how-do-i-allow-third-party-installations-on-my-phone" id="how-do-i-allow-third-party-installations-on-my-phone-link">this</a> guide.</p>
+						<source src="assets/extensions.webm" type="video/webm" />
+						<img src="assets/extensions.gif" alt width="300" height="544"/>
+					</video>
+				</figure>
+				<p>In this guide we will use MangaDex, our most popular extension. Press the <code>Install</code> button and it will bring up the extension installer. If your phone does not allow third-party installations, follow <a href="#third-party-installs">this</a> guide.</p>
 				<h3 class="h5 mb-3 font-weight-normal">Exploring the catalogue</h3>
 				<p>If you successfully installed MangaDex then it should now show up in the <code>Catalogues</code> tab. The items appearing here are called <code>Sources</code>, an extension can contain multiple sources.</p>
 				<div class="d-flex justify-content-center">
-					<a href="assets/catalogues.png"><img class="mb-4" src="assets/catalogues.png"></a>
+					<img class="mb-4" src="assets/catalogues.png" loading="lazy" intrinsicsize="1080x828" width="270" height="207">
 				</div>
 				<h3 class="h5 mb-3 font-weight-normal">Adding manga to your library</h3>
 				<p>To find and add manga, you can now either use the <code>Latest</code> button on your source, or you can use <code>Browse</code> and search for it.</p>
 				<p>Now that you've found manga that you want to add to your library, click on it and then press the blue bookmark button.</p>
 				<p>It should now appear in your <code>My library</code> tab, ready to be read!</p>
-				<div class="d-flex justify-content-center">
+				<figure class="d-flex justify-content-center">
-					<a href="assets/addtolibrary.gif"><img class="lazyload mb-4" data-src="assets/addtolibrary.gif" src="assets/addtolibrary.png"></a>
+					<video preload="metadata" autoplay muted loop loading="lazy" poster="assets/addtolibrary.png" intrinsicsize="600x1089" width="300" height="544">
-				</div>
+						<source src="assets/addtolibrary.mp4" type="video/mp4" />
+						<source src="assets/addtolibrary.webm" type="video/webm" />
+						<img src="assets/addtolibrary.gif" alt width="300" height="544"/>
+					</video>
+				</figure>
 				<div class="mb-4">
 					<h2 class="h3 mb-3 font-weight-normal">Frequently Asked Questions</h2>
-					<div class="mb-5" id="accordion">
+					<div class="mb-5 accordion">
-						<div class="card">
+						<details id="well-known-extensions">
-							<div class="card-header" id="headerOne">
+							<summary>What are some good extensions?</summary>
-								<h3 class="mb-0"><button aria-controls="collapseOne" aria-expanded="false" class="btn btn-link collapsed" data-target="#collapseOne" data-toggle="collapse">What are some good extensions?</button></h5>
+							<p>The most popular are MangaDex, MangaRock and MangaSee, these are large sites which host content from scanlators, there's also extensions like Genkan, Madara, FoolSlide and ComiCake which contain sources which host directly from the scanlators own websites.</p>
-							</div>
+							<p><a href="https://docs.google.com/spreadsheets/d/1TyJEUg78WWH4zgnf3g6M2lkbWpBWbd40FYiPVQhW8IU/edit#gid=0" target="_blank">Here</a>'s a good spreadsheet showing the different extensions and their sources.</p>
-							<div aria-labelledby="headerOne" class="collapse" data-parent="#accordion" id="collapseOne">
+						</details>
-								<div class="card-body">
+						<details id="third-party-installs">
-									<p>The most popular is MangaDex, MangaRock and MangaSee, these are large sites which host content from scanlators, there's also extensions like Genkan, Madara, FoolSlide and ComiCake which contains sources which hosts directly from the scanlators own websites.</p>
+							<summary>How do I allow third-party installations on my phone?</summary>
-									<p><a href="https://docs.google.com/spreadsheets/d/1TyJEUg78WWH4zgnf3g6M2lkbWpBWbd40FYiPVQhW8IU/edit#gid=0" target="_blank">Here</a>'s a good spreadsheet showing the different extensions and their sources.</p>
+							<p>When installing your first extension and are promted that your phone isn't allowed to install unknown apps from that source, simply press the <code>Settings</code> button and then allow it.</p>
-								</div>
+							<p>Two example videos, left one is for newer Androids.</p>
-							</div>
+							<figure class="d-flex justify-content-center">
-						</div>
+								<video preload="metadata" autoplay muted loop loading="lazy" poster="assets/unknownapps-android8.png" intrinsicsize="400x688" width="200" height="344">
-						<div class="card">
+									<source src="assets/unknownapps-android8.mp4" type="video/mp4" />
-							<div class="card-header" id="headerTwo">
+									<source src="assets/unknownapps-android8.webm" type="video/webm" />
-								<h3 class="mb-0"><button aria-controls="collapseTwo" aria-expanded="false" class="btn btn-link collapsed" data-target="#collapseTwo" data-toggle="collapse">How do I allow third-party installations on my phone?</button></h5>
+									<img src="assets/unknownapps-android8.gif" alt width="200" height="344"/>
-							</div>
+								</video>
-							<div aria-labelledby="headerTwo" class="collapse" data-parent="#accordion" id="collapseTwo">
+							</figure>
-								<div class="card-body">
+							<figure class="d-flex justify-content-center">
-									<p>When installing your first extension and are promted that your phone isn't allowed to install unknown apps from that source, simply press the <code>Settings</code> button and then allow it.</p>
+								<video preload="metadata" autoplay muted loop loading="lazy" poster="assets/unknownapps-android7.png" intrinsicsize="400x688" width="200" height="344">
-									<p>Two example videos, left one is for newer Androids.</p>
+									<source src="assets/unknownapps-android7.mp4" type="video/mp4" />
-									<div class="d-flex justify-content-center">
+									<source src="assets/unknownapps-android7.webm" type="video/webm" />
-										<a href="assets/unknownapps-android8.gif"><img class="lazyload" data-src="assets/unknownapps-android8.gif" width="180"></a>
+									<img src="assets/unknownapps-android7.gif" alt width="200" height="344"/>
-										<a href="assets/unknownapps-android7.gif"><img class="lazyload" data-src="assets/unknownapps-android7.gif" width="180"></a>
+								</video>
-									</div>
+							</figure>
-								</div>
+						</details>
-							</div>
+						<details>
-						</div>
+							<summary>I'm not getting any results when browsing MangaDex...</summary>
-						<div class="card">
+							<p>Go to <code>Browse</code>/<code>Latest</code> for MangaDex under <code>Catalogues</code>, enter a random manga and then press overflow menu (3 dot menu) in the top-right corner and then the <code>Open in web view</code> button.</p>
-							<div class="card-header" id="headerThree">
+							<p>Now go to the hamburger menu, press the <code>Manga</code> drop-down and then choose either <code>Sign up</code> or <code>Log in</code>.</p>
-								<h3 class="mb-0"><button aria-controls="collapseThree" aria-expanded="false" class="btn btn-link collapsed" data-target="#collapseThree" data-toggle="collapse">I'm not getting any results when browsing MangaDex...</button></h5>
+						</details>
-							</div>
+						<details>
-							<div aria-labelledby="headerThree" class="collapse" data-parent="#accordion" id="collapseThree">
+							<summary>I've logged in to MangaDex and still isn't getting results...</summary>
-								<div class="card-body">
+							<p>Go to <code>Browse</code>/<code>Latest</code> for MangaDex under <code>Catalogues</code>, enter a random manga and then press the overflow menu (3 dot menu) in the top-right corner and then the <code>Open in web view</code> button.</p>
-									<p>Go to <code>Browse</code>/<code>Latest</code> for MangaDex under <code>Catalogues</code>, enter a random manga and then press overflow menu (3 dot menu) in the top-right corner and then the <code>Open in web view</code> button.</p>
+							<p>Now go to the hamburger menu, press the <code>Manga</code> drop-down and then <code>Titles</code>. The last step is to go to the icon in the upper right that looks like four-boxes and select <code>Detailed</code>.</p>
-									<p>Now go to the hamburger menu, press the <code>Manga</code> drop-down and then choose either <code>Sign up</code> or <code>Log in</code>.</p>
+						</details>
-								</div>
-							</div>
-						</div>
-						<div class="card">
-							<div class="card-header" id="headerFour">
-								<h3 class="mb-0"><button aria-controls="collapseFour" aria-expanded="false" class="btn btn-link collapsed" data-target="#collapseFour" data-toggle="collapse">I've logged in to MangaDex and still isn't getting results...</button></h5>
-							</div>
-							<div aria-labelledby="headerFour" class="collapse" data-parent="#accordion" id="collapseFour">
-								<div class="card-body">
-									<p>Go to <code>Browse</code>/<code>Latest</code> for MangaDex under <code>Catalogues</code>, enter a random manga and then press the overflow menu (3 dot menu) in the top-right corner and then the <code>Open in web view</code> button.</p>
-									<p>Now go to the hamburger menu, press the <code>Manga</code> drop-down and then <code>Titles</code>. The last step is to go to the icon in the upper right that looks like four-boxes and select <code>Detailed</code>.</p>
-								</div>
-							</div>
-						</div>
 					</div>
 					<h2 class="h3 mb-3 font-weight-normal">Advanced Features</h2>
 					<!--<h3 class="h5 mb-3 font-weight-normal">Customization</h3>
@@ -138,22 +132,16 @@
 				</div>
 			</div>
 		</div>
-	</div><!-- Scripts -->
+	</div>
-	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
+	<!-- Scripts to be removed when possible -->
-	</script> 
+	<script src="assets/jquery.slim.min.js"></script> 
-	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
+	<script src="assets/bootstrap.min.js"></script> 
-	</script> 
+	<script src="assets/bootstrap-toc.min.js"></script> 
-	<script src="https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.js">
-	</script> 
-	<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js">
-	</script> 
 	<script>
-	$("img.lazyload").lazyload();
+		addEventListener("hashchange", e => {
-	</script> 
+			let q = document.querySelector(location.hash)
-	<script>
+			if (q instanceof HTMLDetailsElement) { q.open = true; }
-	       $('#how-do-i-allow-third-party-installations-on-my-phone-link').click(function(e) {
+		})
-	       $('#collapseTwo').collapse('show');        
-	       });
 	</script>
 </body>
 </html>