Rewrite website using VuePress.

.gitignore

@@ -13,4 +13,4 @@ node_modules/
 npm-debug.log
 
 # Compiled site
-public/
+./public/

package.json

@@ -2,8 +2,8 @@
 	"name": "tachiyomi-website",
 	"version": "0.0.0",
 	"scripts": {
-		"build": "cp -R src/ public/",
+		"build": "vuepress build src",
-		"serve": "npm run build && http-server"
+		"serve": "vuepress dev src"
 	},
 	"repository": {
 		"type": "git",
@@ -11,6 +11,7 @@
 	},
 	"private": true,
 	"devDependencies": {
-		"http-server": "^0.11.1"
+		"http-server": "^0.11.1",
+		"vuepress": "^1.1.0"
 	}
 }

src/.vuepress/config.js

@@ -0,0 +1,56 @@
+module.exports = {
+	dest: './public',
+	locales: {
+		'/': {
+			lang: 'en-US',
+			title: 'Tachiyomi',
+			description: 'Free and open source manga reader for Android'
+		},
+		'/pt/': {
+			lang: 'pt-BR',
+			title: 'Tachiyomi',
+			description: 'Leitor de mangás gratuito e de código aberto para Android'
+		}
+	},
+	themeConfig: {
+		repo: 'inorichi/tachiyomi',
+		docsRepo: 'tachiyomiorg/website',
+		docsDir: 'src',
+		editLinks: true,
+		locales: {
+			'/': {
+				selectText: 'Languages',
+				label: 'English',
+				nav: [
+					{ text: 'Guide', link: '/guide/' },
+					{ text: 'FAQ', link: '/faq/' },
+					{ text: 'Wiki', link: 'https://github.com/inorichi/tachiyomi/wiki' },
+					{ text: 'Discord', link: 'https://discord.gg/tachiyomi'}
+				],
+				sidebar: [
+					'/',
+					'/guide/',
+					'/faq/'
+				],
+				lastUpdated: 'Last Updated'
+			},
+			'/pt/': {
+				selectText: 'Idiomas',
+				label: 'Português (Brasil)',
+				nav: [
+					{ text: 'Guia', link: '/pt/guide/' },
+					{ text: 'FAQ', link: '/faq/' },
+					{ text: 'Wiki', link: 'https://github.com/inorichi/tachiyomi/wiki' },
+					{ text: 'Discord', link: 'https://discord.gg/tachiyomi' }
+				],
+				sidebar: [
+					'/pt/',
+					'/pt/guide/',
+					'/pt/faq/'
+				],
+				editLinkText: 'Edite esta página',
+				lastUpdated: 'Atualizado em'
+			}
+		}
+	}
+}

src/.vuepress/styles/index.styl

@@ -0,0 +1,5 @@
+.centered
+	text-align center
+
+.custom-block.tip
+	border-color $accentColor

src/.vuepress/styles/palette.styl

@@ -0,0 +1 @@
+$accentColor = #2E84BF

src/README.md

@@ -0,0 +1,17 @@
+---
+home: true
+lang: en-US
+heroImage: /assets/media/hero.png
+actionText: Get Started →
+actionLink: /guide/
+features:
+    - title: Extensions
+      details: Online reading from sources such as KissManga, MangaDex e mais.
+    - title: Tracking
+      details: MyAnimeList, AniList and Kitsu support.
+    - title: Configurable
+      details: Reader with multiple viewers, reading directions and other settings.
+footer: Apache Licensed | Copyright © 2015-present Javier Tomás
+---
+
+![screens](/assets/media/screens.png)

src/assets/css/bootstrap-toc-1.0.1.min.css

@@ -1,4 +0,0 @@
-/*!
- * 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}

src/assets/css/style.css

@@ -1,100 +0,0 @@
-/* html {
-	padding-bottom: 30em;  <-- Testing bottom scroll, commit 40
-	padding-bottom: calc(100vh - 30px);  <-- Testing bottom scroll, commit 40
-} */
-img, video {
-	margin-bottom: 1.5em;
-	max-width: 325px;
-}
-h1, h2, h3 {
-	font-weight: normal;
-}
-h1 { font-size: 2em; }
-h2 { font-size: 1.5em; }
-h3 { font-size: 1.25em; }
-body {
-	padding-top: 40px;
-	/* padding-bottom: 40px; <-- Testing bottom scroll, commit 40 */
-	background-color: #f5f5f5;
-	/* border-bottom: red dotted 30px; <-- Testing bottom scroll, commit 40 */
-}
-
-.row {
-	padding-bottom: 3em;
-}
-
-.btn-link {
-	font-weight: 400!important;
-}
-
-.btn-link:hover, .btn-link:focus {
-	text-decoration: none !important;
-}
-
-.card {
-    background-color: transparent!important;
-    background-clip: border-box;
-    border: none!important;
-}
-
-.card-header {
-    padding: .75rem 1.25rem;
-    margin-bottom: 0;
-    background-color: transparent!important;
-    border-bottom: 1px solid rgba(0,0,0,.125)!important;
-}
-
-figure {
-	margin: 0;
-	display: flex;
-	flex-flow: row wrap;
-	justify-content: center;
-}
-
-details > p:nth-child(2) {
-	padding-top: 16px;
-}
-
-summary:focus {
-    outline: none;
-    outline-color: transparent;
-}
-
-summary > * {
-	display: inline;
-}
-
-summary {
-	padding-top: 0.5em;
-}
-
-footer {
-	margin-top: 25em;
-	background-color: #eaeaea;
-}
-
-/** */
-nav[data-toggle="toc"] {
-  top: 95px;
-}
-
-/* small screens */
-@media (max-width: 768px) {
-  /* override stickyness so that the navigation does not follow scrolling */
-  nav[data-toggle="toc"] {
-    margin-bottom: 42px;
-    position: static;
-  }
-
-  /* PICK ONE */
-  /* don't expand nested items, which pushes down the rest of the page when navigating */
-  nav[data-toggle="toc"] .nav .active .nav {
-    display: none;
-  }
-  /* alternatively, if you *do* want the second-level navigation to be shown (as seen on this page on mobile), use this */
-  /*
-  nav[data-toggle='toc'] .nav .nav {
-    display: block;
-  }
-  */
-}

src/assets/js/bootstrap-toc-1.0.1.min.js

@@ -1,5 +0,0 @@
-/*!
- * 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);

src/assets/js/script.js

@@ -1,22 +0,0 @@
-addEventListener("hashchange", () => {
-	var q = document.querySelector(location.hash)
-	if (q instanceof HTMLHeadingElement && q.parentElement.parentElement instanceof HTMLDetailsElement)
-		q.parentElement.parentElement.open = true;
-})
-if (location.hash) requestAnimationFrame(() => dispatchEvent(new HashChangeEvent("hashchange")));
-if ('IntersectionObserver' in self) {
-	const mo = new IntersectionObserver(i => {
-		for (const s of i) {
-			/** @type {HTMLVideoElement} */
-			const v = s.target;
-			if (s.isIntersecting && v.paused) {
-				v.load()
-				v.play()
-			} else if (!v.paused) v.pause()
-		}
-	})
-	for (let v of document.querySelectorAll('video')) {
-		mo.observe(v)
-		v.controls = false
-	}
-}

src/faq/README.md

@@ -0,0 +1,131 @@
+---
+title: FAQ
+lang: en-US
+sidebarDepth: 2
+---
+
+# FAQ
+
+You can find more frequently asked questions [here].
+
+[here]: https://github.com/inorichi/tachiyomi/wiki/FAQ#frequently-asked-questions
+
+## App questions
+
+### What are some good extensions?
+
+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.
+
+[Here] is a good spreadsheet showing the different extensions and
+their sources.
+
+[Here]: https://docs.google.com/spreadsheets/d/1TyJEUg78WWH4zgnf3g6M2lkbWpBWbd40FYiPVQhW8IU/edit#gid=0
+
+### How do I allow third-party installations?
+
+When installing your first extension and are prompted that your phone
+isn't allowed to install unknown apps from that source, simply press
+the `Settings` button and then allow it.
+
+Two example videos, left one is for newer Androids.
+
+<figure class="centered">
+	<video autoplay crossorigin="use-credentials" height="355"
+	  intrinsicsize="400x688" loading="lazy" loop="loop" muted="muted"
+	  playsinline="playsinline" :poster="$withBase('/assets/media/unknownapps-api28.png')"
+	  preload="none" width="200">
+		<source :src="$withBase('/assets/media/unknownapps-api28.webm')" type="video/webm" />
+		<source :src="$withBase('/assets/media/unknownapps-api28.mp4')" type="video/mp4" />
+	</video>
+	<video autoplay crossorigin="use-credentials" height="355"
+	  intrinsicsize="400x688" loading="lazy" loop="loop" muted="muted"
+	  playsinline="playsinline" :poster="$withBase('/assets/media/unknownapps-api25.png')"
+	  preload="none" width="200">
+		<source :src="$withBase('/assets/media/unknownapps-api25.webm')" type="video/webm" />
+		<source :src="$withBase('/assets/media/unknownapps-api25.mp4')" type="video/mp4" />
+	</video>
+</figure>
+
+### Why won't the extensions install?
+
+In some cases your phone might have some issues downloading the
+extensions, in those cases you can try installing them yourselves
+directly from the source. [Here](https://github.com/inorichi/tachiyomi-extensions/tree/repo/apk)
+is the repository for the files.
+
+To install just download the `.apk` file for the extension you want
+and then install it, like how you installed Tachiyomi.
+
+### Does Tachiyomi have automatic updates?
+
+The Tachiyomi app now has in-app updating for both stable and dev
+versions. If you go to `Settings > About > Version` to check for updates,
+you can force an update there or wait for the app to notify you.
+
+### Why are some images not displayed?
+
+Aside from network issues, it could be because the images are too
+big or the decoder doesn't support that image.
+
+### How do I change the app language?
+
+Tachiyomi is (as of writing) available in 35 different languages.
+
+By default, the app language follows the language setting of your device.
+
+You can also set your own preferred language for Tachiyomi. Simply
+from side panel go to the `Settings > General > Language`.
+
+::: tip NOTE
+Only the UI has been localized, content will still be using
+the language of the source selected (i.e. English for KissManga
+source, Some sources have multiple Language too).
+:::
+
+If you want to help translate Tachiyomi, read [this].
+
+![weblate](https://hosted.weblate.org/widgets/tachiyomi/-/multi-auto.svg)
+
+[this]: https://github.com/inorichi/tachiyomi/wiki/Translation
+
+## MangaDex
+
+### No results when searching
+
+::: tip
+Make sure you're on app version `0.8.4` or higher.
+:::
+
+If you're not getting any results when searching MangaDex then
+you need to log in.
+
+To do so, go to `Browse`/`Latest` for MangaDex under `Catalogues`, open
+any manga from the list and then press the overflow menu (3 dot menu)
+in the top-right corner and then the `Open in web view` button.
+
+Now go to the hamburger menu, press the `Manga` drop-down and then
+choose either `Sign up` or `Log in` to proceed with the log in.
+
+### Chapters from Mangaplus are broken
+
+Install the Mangaplus extension and then migrate the manga that
+uses Mangaplus on Mangadex onto the Mangaplus source.
+
+## MangaRock
+
+### Slow updates to Tachiyomi
+
+MangaRock's API updates less frequently than the app or the website,
+so you may need to wait a couple hours or more before it shows up
+in Tachiyomi.
+
+## Madara
+
+### Leviatan Scans is missing
+
+Leviatan Scans has shifted from Madara to Genkan extension.
+
+Install Genkan. Migrate all Leviatan scans. Update Madara.

src/guide/README.md

@@ -0,0 +1,72 @@
+---
+title: Getting Started
+lang: en-US
+---
+
+## Installation
+
+Download the latest stable release of Tachiyomi from [GitHub].
+
+`tachiyomi-vX.Y.Z.apk`
+
+If you want to try new features before they get to the stable release,
+you can download the dev version [here].
+
+Open and install the `.apk` file you just downloaded from GitHub.
+
+<figure class="centered">
+	<img height="145" intrinsicsize="1000x500" width="300"
+	  :src="$withBase('/assets/media/installprompt.png')">
+</figure>
+
+[GitHub]: https://github.com/inorichi/tachiyomi/releases/latest
+[here]: http://tachiyomi.kanade.eu/latest
+
+## Installing an extension
+
+Now that Tachiyomi is installed, open the app and navigate to the
+`Extensions` tab.
+
+In this guide we will use MangaDex, our most popular extension.
+Press the `Install` button and accept the installation prompt that
+will be shown.
+
+If you're getting stopped by a security prompt and don't know what to do
+you can read this FAQ section: ["How do I allow third-party installations
+on my phone?"](/faq/#how-do-i-allow-third-party-installations).
+
+<figure class="centered">
+	<video autoplay crossorigin="use-credentials" height="534"
+	  intrinsicsize="500x100" loading="lazy" loop="loop" muted="muted"
+	  playsinline="playsinline" :poster="$withBase('/assets/media/extensioninstaller.png')"
+	  preload="none" width="300">
+		<source :src="$withBase('/assets/media/extensioninstaller.webm')" type="video/webm" />
+		<source :src="$withBase('/assets/media/extensioninstaller.mp4')" type="video/mp4" />
+	</video>
+</figure>
+
+## Adding manga to your library
+
+Now that you've installed the MangaDex extension it should show up in
+the `Catalogues` tab. The items appearing here are called `Sources`
+(can also be called Catalogues), an extension can contains multiple sources.
+
+To find and add manga, you can now either use the `Latest` button on your
+source, or you can use `Browse` and search for it.
+
+Now that you've found manga that you want to add to your library, click
+on it and then press the blue bookmark button.
+
+It should now appear in your `My Library` tab, ready to be read!
+
+<figure class="centered">
+	<video autoplay crossorigin="use-credentials" height="534"
+	  intrinsicsize="500x1000" loading="lazy" loop="loop" muted="muted"
+	  playsinline="playsinline" :poster="$withBase('/assets/media/addtolibrary.png')"
+	  preload="none" width="300">
+		<source :src="$withBase('/assets/media/addtolibrary.webm')" type="video/webm" />
+		<source :src="$withBase('/assets/media/addtolibrary.mp4')" type="video/mp4" />
+	</video>
+</figure>
+
+

src/index.html

@@ -1,140 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>Tachiyomi</title>
-		<meta charset="utf-8" />
-		<meta content="width=device-width, initial-scale=1" name="viewport" />
-		<meta content="" name="description" />
-		<link href="favicon.ico" rel="icon" />
-		<link href="assets/css/bootstrap-4.3.1.min.css" rel="stylesheet" />
-		<link href="assets/css/bootstrap-toc-1.0.1.min.css" rel="stylesheet" />
-		<link href="assets/css/style.css" rel="stylesheet" />
-	</head>
-	<body data-spy="scroll" data-target="#toc">
-		<div class="container">
-			<div class="row">
-				<div class="col-sm-3">
-					<nav class="sticky-top" data-toggle="toc" id="toc"><!--toc--></nav>
-				</div>
-				<div class="col-sm-6">
-					<div class="text-center mb-4"> <img src="assets/media/tachiyomi.png" />
-						<h1 id="getting-started-with-tachiyomi">Getting started with Tachiyomi</h1>
-						<p><a href="https://github.com/inorichi/tachiyomi" target="_blank">Tachiyomi</a> is a free and open source manga reader for Android.</p>
-					</div>
-					<h2 id="installation">Installation</h2>
-					<p>Download the latest stable release of Tachiyomi from <a href="https://github.com/inorichi/tachiyomi/releases/latest">GitHub.</a></p>
-					<p><code>tachiyomi-vX.Y.Z.apk</code></p>
-					<p>If you want to try new features before they get to the stable release, you can download the dev version <a href="http://tachiyomi.kanade.eu/latest">here</a>.</p>
-					<p>Open and install the <code>.apk</code> file you just downloaded from GitHub.</p>
-					<div class="d-flex justify-content-center"> <img height="145" intrinsicsize="1000x500" src="assets/media/installprompt.png" width="300" /></div>
-					<h3 id="installing-an-extension">Installing an extension</h3>
-					<p>Now that Tachiyomi is installed, open the app and navigate to the <code>Extensions</code> tab.</p>
-					<p>In this guide we will use MangaDex, our most popular extension. Press the <code>Install</code> button and accept the installation prompt that will be shown.</p>
-					<p>If you're getting stopped by a security prompt and don't know what to do you can read this FAQ section: <a href="#how-do-i-allow-third-party-installations"><span class="mt-5 text-muted">("How do I allow third-party installations on my phone?")</span></a></p>
-					<figure>
-						<video controls="controls" crossorigin="use-credentials" height="534" intrinsicsize="500x100" loading="lazy" loop="loop" muted="muted" playsinline="playsinline" poster="assets/media/extensioninstaller.png" preload="none" width="300">
-							<source src="assets/media/extensioninstaller.webm" type="video/webm" />
-							<source src="assets/media/extensioninstaller.mp4" type="video/mp4" />
-						</video>
-					</figure>
-					<h3 id="adding-manga-to-your-library">Adding manga to your library</h3>
-					<p>Now that you've installed the MangaDex extension it should show up in the <code>Catalogues</code> tab. The items appearing here are called <code>Sources</code> <span class="mt-5 text-muted">(can also be called Catalogues)</span>, an extension can contain multiple sources.</p>
-					<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>
-					<figure>
-						<video controls="controls" crossorigin="use-credentials" height="534" intrinsicsize="500x1000" loading="lazy" loop="loop" muted="muted" playsinline="playsinline" poster="assets/media/addtolibrary.png" preload="none" width="300">
-							<source src="assets/media/addtolibrary.webm" type="video/webm" />
-							<source src="assets/media/addtolibrary.mp4" type="video/mp4" />
-						</video>
-					</figure>
-					<div class="mb-4">
-						<h2 id="frequently-asked-questions">Frequently Asked Questions</h2>
-						<div class="mb-5 accordion">
-							<details>
-								<summary><h3 id="what-are-some-good-extensions">What are some good extensions?</h3></summary>
-								<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>
-								<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>
-							</details>
-							<details>
-								<summary><h3 id="how-do-i-allow-third-party-installations">How do I allow third-party installations?</h3></summary>
-								<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>
-								<p>Two example videos, left one is for newer Androids.</p>
-								<figure>
-									<video controls="controls" crossorigin="use-credentials" height="355" intrinsicsize="400x688" loading="lazy" loop="loop" muted="muted" playsinline="playsinline" poster="assets/media/unknownapps-api28.png" preload="none" width="200">
-										<source src="assets/media/unknownapps-api28.webm" type="video/webm" />
-										<source src="assets/media/unknownapps-api28.mp4" type="video/mp4" />
-									</video>
-									<video controls="controls" crossorigin="use-credentials" height="355" intrinsicsize="400x688" loading="lazy" loop="loop" muted="muted" playsinline="playsinline" poster="assets/media/unknownapps-api25.png" preload="none" width="200">
-										<source src="assets/media/unknownapps-api25.webm" type="video/webm" />
-										<source src="assets/media/unknownapps-api25.mp4" type="video/mp4" />
-									</video>
-								</figure>
-							</details>
-							<details>
-								<summary><h3 id="extensions-not-installing">Why won't the extensions install?</h3></summary>
-								<p>In some cases your phone might have some issues downloading the extensions, in those cases you can try installing them yourselves directly from the source. <a href="https://github.com/inorichi/tachiyomi-extensions/tree/repo/apk" target="_blank">Here</a>'s the repository for the files.</p>
-								<p>To install just download the <code>.apk</code> file for the extension you want and then install it, like how you installed Tachiyomi.</p>
-							</details>
-							<details>
-								<summary><h3 id="tachiyomi-automatic-updates">Does Tachiyomi have automatic updates?</h3></summary>
-								<p>The Tachiyomi app now has in-app updating for both stable and dev versions. If you go to <code>Settings > About > Version</code> to check for updates, you can force an update there or wait for the app to notify you.</p>
-							</details>
-							<details>
-								<summary><h3 id="image-display-issues">Why are some images not displayed?</h3></summary>
-								<p>Aside from network issues, it could be because the images are too big or the decoder doesn't support that image.</p>
-							</details>
-							<details>
-								<summary><h3 id="tachiyomi-menu-language">How do I change the app language?</h3></summary>
-								<p>Tachiyomi is (as of writing) available in 35 different languages.</p>
-								<p>By default, the app language follows the language setting of your device.</p>
-								<p>You can also set your own preferred language for Tachiyomi. Simply from side panel go to the <code>Settings > General > Language</code>.</p>
-								<p><code>Note:</code> Only the UI has been localized, content will still be using the language of the source selected (i.e. English for KissManga source, Some sources have multiple Language too).</p>
-								<p class="mt-5 text-muted">If you want to help translate Tachiyomi, read <a href="https://github.com/inorichi/tachiyomi/wiki/Translation" target="_blank">this</a>.</p>
-								<p><a href="https://hosted.weblate.org/engage/tachiyomi/?utm_source=widget" target="_blank"><img src="https://hosted.weblate.org/widgets/tachiyomi/-/multi-auto.svg" /></a></p>
-							</details>
-							<br />
-							<details>
-								<summary><h3 id="mangadex-no-results"><span class="mt-5 text-muted">Mangadex:</span> No results when searching.</h3></summary>
-								<p><b>Note:</b> Make sure you're on app version <code>0.8.4</code> or higher.</p>
-								<p>If you're not getting any results when searching MangaDex then you need to log in.</p>
-								<p>To do so, go to <code>Browse</code>/<code>Latest</code> for MangaDex under <code>Catalogues</code>, open any manga from the list 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 choose either <code>Sign up</code> or <code>Log in</code> to proceed with the log in.</p>
-							</details>
-							<details>
-								<summary><h3 id="mangadex-chapters-from-mangaplus-broken"><span class="mt-5 text-muted">Mangadex:</span> Chapters from Mangaplus are broken.</h3></summary>
-								<p>Install the Mangaplus extension and then migrate the manga that uses Mangaplus on Mangadex onto the Mangaplus source.</p>
-							</details>
-							<details>
-								<summary><h3 id="mangarock-slow-updates"><span class="mt-5 text-muted">MangaRock:</span> Slow updates to Tachiyomi.</h3></summary>
-								<p>MangaRock's API updates less frequently than the app or the website, so you may need to wait a couple hours or more before it shows up in Tachiyomi.</p>
-							</details>
-							<details>
-								<summary><h3 id="madara-missing-leviatan-scans"><span class="mt-5 text-muted">Madara:</span> Leviatan Scans is missing.</h3></summary>
-								<p>Leviatan Scans has shifted from Madara to Genkan extension.</p>
-								<p>Install Genkan. Migrate all Leviatan scans. Update Madara.</p>
-							</details>
-							<p class="mt-5 text-muted">More frequently asked questions can be found <a href="https://github.com/inorichi/tachiyomi/wiki/FAQ#frequently-asked-questions" target="_blank">here</a>.</p>
-						</div>
-						<h2 id="related-links">Related Links</h2>
-						<h3 id="github"><a href="https://github.com/inorichi/tachiyomi/">Github</a></h3>
-						<p>At a high level, GitHub is a website and cloud-based service that helps developers store and manage their code, as well as track and control changes to their code. It's here we store our FOSS (Free and open source software) code for Tachiyomi.</p>
-						<h3 id="wiki"><a href="https://github.com/inorichi/tachiyomi/wiki">GitHub Wiki</a></h3>
-						<p>Every GitHub repository comes equipped with a section for hosting documentation, called a wiki. Here you can find out more about features and how to fix a problem you might have.</p>
-						<h3 id="discord"><a href="https://discord.gg/tachiyomi">Discord</a></h3>
-						<p>Discord is a proprietary freeware VoIP application and digital distribution platform that specializes in text, image, video and audio communication between users in a chat channel. Join our Discord server for chatting or if you want help.</p>
-					</div>
-				</div>
-			</div>
-		</div>
-		<footer class="page-footer font-small blue">
-			<div class="footer-copyright text-center py-3"> <a href="https://github.com/tachiyomiorg/website">Website Repository</a></div>
-		</footer>
-		<!-- Scripts to be removed when possible -->
-		<script src="assets/js/jquery-3.4.1.slim.min.js" ></script>
-		<script src="assets/js/bootstrap-4.3.1.min.js"></script>
-		<script src="assets/js/bootstrap-toc-1.0.1.min.js"></script>
-		<!-- Convenience script -->
-		<script src="assets/js/script.js"></script>
-	</body>
-</html>

src/pt/README.md

@@ -0,0 +1,17 @@
+---
+home: true
+lang: pt-BR
+heroImage: /assets/media/hero.png
+actionText: Começar →
+actionLink: /pt/guide/
+features:
+    - title: Extensões
+      details: Leitura online de fontes como KissManga, MangaDex e mais.
+    - title: Acompanhamento
+      details: Suporte ao MyAnimeList, AniList e Kitsu.
+    - title: Configurável
+      details: Leitor com múltiplos visualizadores, direções de leitura e outras configurações.
+footer: Licenciado via Apache | Copyright © 2015-present Javier Tomás
+---
+
+![screens](/assets/media/screens.png)

src/pt/faq/README.md

@@ -0,0 +1,142 @@
+---
+title: FAQ
+lang: pt-BR
+sidebarDepth: 2
+---
+
+# FAQ
+
+Você pode encontrar mais perguntas [aqui].
+
+[aqui]: https://github.com/inorichi/tachiyomi/wiki/FAQ#frequently-asked-questions
+
+## Aplicativo
+
+### Quais são as extensões boas?
+
+As mais populares são o MangaDex, mangaRock e MangaSee. Estes são
+grandes sites que hospedam conteúdo dos *scanlators*. Há também extensões
+como Genkan, Madara, FoolSlide e ComiCake que possuem fontes que utilizam
+diretamente os sites dos *scanlators*.
+
+[Esta planilha] mostra as diferentes extensões e suas fontes.
+
+[Esta planilha]: https://docs.google.com/spreadsheets/d/1TyJEUg78WWH4zgnf3g6M2lkbWpBWbd40FYiPVQhW8IU/edit#gid=0
+
+### Como eu permito a instalação por terceiros no meu celular?
+
+Quando estiver instalando sua primeira extensão e for informado
+que seu celular não permite instalação de aplicativos desconhecidos
+daquela fonte, simplesmente pressione o botão `Configurações`
+e permita-a.
+
+Dois vídeos de exemplo, onde o da esquerda é para Androids mais novos.
+
+<figure class="centered">
+	<video autoplay crossorigin="use-credentials" height="355"
+	  intrinsicsize="400x688" loading="lazy" loop="loop" muted="muted"
+	  playsinline="playsinline" :poster="$withBase('/assets/media/unknownapps-api28.png')"
+	  preload="none" width="200">
+		<source :src="$withBase('/assets/media/unknownapps-api28.webm')" type="video/webm" />
+		<source :src="$withBase('/assets/media/unknownapps-api28.mp4')" type="video/mp4" />
+	</video>
+	<video autoplay crossorigin="use-credentials" height="355"
+	  intrinsicsize="400x688" loading="lazy" loop="loop" muted="muted"
+	  playsinline="playsinline" :poster="$withBase('/assets/media/unknownapps-api25.png')"
+	  preload="none" width="200">
+		<source :src="$withBase('/assets/media/unknownapps-api25.webm')" type="video/webm" />
+		<source :src="$withBase('/assets/media/unknownapps-api25.mp4')" type="video/mp4" />
+	</video>
+</figure>
+
+### Porque as extensões não instalam?
+
+Em alguns casos seu celular pode ter alguns problemas baixando as
+extensões. Nestes casos você pode tentar instalar elas você mesmo
+diretamente. [Aqui](https://github.com/inorichi/tachiyomi-extensions/tree/repo/apk)
+está o repositório para os arquivos.
+
+Para instalar, apenas baixe o arquivo `.apk` da extensão que você
+quer e instale, assim como você instalou o Tachiyomi.
+
+### O Tachiyomi possui atualizações automáticas?
+
+O aplicativo Tachiyomi agora tem atualizações dentro do app para ambas
+as versões, estável e de desenvolvimento. Se você for em `Configurações >
+Sobre > Versão` para verificar por atualizações, você pode forçar a
+atualização ali ou esperar o aplicativo te notificar.
+
+### Porque algumas imagens não são exibidas?
+
+Além de problemas com a internet, pode ser por causa que as imagens
+são muito grandes ou o decodificador não suporta aquela imagem.
+
+### Como eu mudo o idioma do aplicativo?
+
+O Tachiyomi está disponivel (no momento de escrita) em 35 idiomas diferentes.
+
+Por padrão, o idioma do aplicativo segue a configuração de idioma do seu aparelho.
+
+Você também pode escolher seu idioma preferido para o Tachiyomi.
+Simplesmente a partir do painel lateral vá em `Configurações > Geral > Idioma`.
+
+::: tip NOTA
+Apenas a interface de usuário foi localizada, o conteúdo ainda continuará
+usando o idioma da fonte escolhida (ou seja, inglês para a fonte KissManga).
+Algumas fontes possuem múltiplos idiomas também.
+:::
+
+Se você quer ajudar a traduzir o Tachiyomi, leia [isto].
+
+![weblate](https://hosted.weblate.org/widgets/tachiyomi/-/multi-auto.svg)
+
+[isto]: https://github.com/inorichi/tachiyomi/wiki/Translation
+
+## MangaDex
+
+### Sem resultados ao buscar
+
+::: tip
+Certifique-se que você possui a versão `0.8.4`, ou maior, do aplicativo.
+:::
+
+Se você não está obtendo nenhum resultado ao buscar no MangaDex, então
+você precisa fazer login.
+
+Para isto, vá em `Navegar`/`Mais Recente` no MangaDex em `Catálogos`,
+abra qualquer mangá da lista e então pressione o menu de mais opções
+(três pontinhos) no canto superior direito e então vá na opção
+`Open in web view`.
+
+Agora vá para o menu, pressione o *drop-down* `Manga` e então escolha
+ou `Sign up` ou `Log in` para continuar com o login.
+
+### Capítulos do Mangaplus não funcionam
+
+Instale a extensão MangaPlus e então migre os mangas que usam o
+Mangaplus no MangaDex para a fonte do MangaPlus.
+
+## MangaRock
+
+### Atualizações lentas no Tachiyomi
+
+A API do MangaRock atualiza menos frequentemente que o site ou o
+aplicativo, então você talvez precise esperar algumas horas ou mais
+para que ele apareça no Tachiyomi.
+
+## Madara
+
+### Está faltando a Leviatan Scans
+
+A Leviatan Scans mudou do Madara para a extensão Genkan.
+
+Instale Genkan. Migre todos os mangás da Leviatan. Atualize o Madara.
+
+## MangasProject
+
+### Está faltando o MangaLivre
+
+Por ser apenas um *mirror*, o MangaLivre foi incorporado na nova versão
+da extensão MangasProject. Para continuar usando, desinstale a versão
+antiga do MangaLivre, instale (ou atualize) a MangasProject e reinicie
+o aplicativo. Você não vai precisar migrar os mangás de sua biblioteca.

src/pt/guide/README.md

@@ -0,0 +1,71 @@
+---
+title: Primeiros Passos
+lang: pt-BR
+---
+
+## Instalação
+
+Efetue o *download* da versão mais recente do Tachiyomi no [GitHub].
+
+`tachiyomi-vX.Y.Z.apk`
+
+Se você deseja testar novas funcionalidades antes que elas entrem na
+versão estável, você pode baixar a versão de desenvolvimento [aqui].
+
+Abra e instale o arquivo `.apk` que você acabou de baixar do GitHub.
+
+<figure class="centered">
+	<img height="145" intrinsicsize="1000x500" width="300"
+	  :src="$withBase('/assets/media/installprompt.png')">
+</figure>
+
+[GitHub]: https://github.com/inorichi/tachiyomi/releases/latest
+[aqui]: http://tachiyomi.kanade.eu/latest
+
+## Instalando uma extensão
+
+Agora que o Tachiyomi está instalado, abra o aplicativo e navegue até
+a aba `Extensões`.
+
+Neste guia iremos utilizar o MangaDex, a extensão mais popular.
+Pressione o botão `Instalar` e aceite a confirmação de instalação
+que irá aparecer.
+
+Se você está sendo impedido por um alerta de segurança e não sabe o
+que fazer, você pode ler esta seção no FAQ: ["Como eu permito a instalação
+por terceiros no meu celular?"](/pt/faq/#como-eu-permito-a-instalacao-por-terceiros-no-meu-celular).
+
+<figure class="centered">
+	<video autoplay crossorigin="use-credentials" height="534"
+	  intrinsicsize="500x100" loading="lazy" loop="loop" muted="muted"
+	  playsinline="playsinline" :poster="$withBase('/assets/media/extensioninstaller.png')"
+	  preload="none" width="300">
+		<source :src="$withBase('/assets/media/extensioninstaller.webm')" type="video/webm" />
+		<source :src="$withBase('/assets/media/extensioninstaller.mp4')" type="video/mp4" />
+	</video>
+</figure>
+
+## Adicionando mangás em sua biblioteca
+
+Agora que você instalou a extensão do MangaDex, ela deve aparecer na
+aba `Catálogos`. Os itens que aparecem aqui são chamados de `Fontes`
+(também podem ser chamados de catálogos). Uma extensão pode ter
+múltiplas fontes.
+
+Para procurar e adicionar um mangá, você pode ou usar o botão `Mais Recente`
+em sua fonte, ou pode utilizar o `Navegar` e buscar por ele.
+
+Agora que você encontrou o mangá que queria adicionar em sua biblioteca,
+clique nele e então pressione o butão azul com o ícone de favoritos.
+
+Ele deve aparecer na aba `Minha biblioteca`, pronto para ser lido!
+
+<figure class="centered">
+	<video autoplay crossorigin="use-credentials" height="534"
+	  intrinsicsize="500x1000" loading="lazy" loop="loop" muted="muted"
+	  playsinline="playsinline" :poster="$withBase('/assets/media/addtolibrary.png')"
+	  preload="none" width="300">
+		<source :src="$withBase('/assets/media/addtolibrary.webm')" type="video/webm" />
+		<source :src="$withBase('/assets/media/addtolibrary.mp4')" type="video/mp4" />
+	</video>
+</figure>