Add better folder structure preview to guide

This commit is contained in:
Soitora 2023-07-25 04:22:22 +02:00
parent d336ddf554
commit efe1f12023
No known key found for this signature in database
GPG Key ID: A6D711EB4F2CCD97
5 changed files with 300 additions and 53 deletions

View File

@ -0,0 +1,74 @@
.tree {
border-radius: 8px;
margin: 16px;
padding: 16px;
color: var(--vp-code-block-color);
background-color: var(--vp-code-block-bg);
font-family: "Roboto Mono", monospace;
font-size: 0.85rem;
line-height: 1.5;
}
.tree > ul {
margin: 0;
}
.tree li + li {
margin-top: 0;
}
.tree span.folder.main {
color: var(--vp-c-brand) !important;
}
.tree span.folder,
.tree span.file.zip {
color: var(--vp-c-brand-lighter) !important;
}
.tree ul {
padding-left: 5px;
list-style: none;
}
.tree ul li {
position: relative;
padding-left: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tree ul li:before {
top: 15px;
left: 0;
width: 10px;
height: 1px;
margin: auto;
}
.tree ul li:after {
top: 0;
bottom: 0;
left: 0;
width: 1px;
height: 100%;
}
.tree ul li:before,
.tree ul li:after {
position: absolute;
content: "";
background-color: var(--vp-c-code-dimm);
}
.tree ul li:last-child:after {
height: 15px;
}
.tree-icon {
height: 12px;
width: 12px;
margin-right: 6px;
display: inline-block;
}

View File

@ -33,43 +33,91 @@ Images will then go into the chapter folder.
See below for more information on archive files. See below for more information on archive files.
You can refer to the following example: You can refer to the following example:
#### Example (Folder) #### Example <Badge type="info" text="SD Card" /> {#example-sd-card}
```txt <div class="tree">
/sdcard/Tachiyomi/local <ul>
└───[the series title] <img src="/img/folder.svg" class="tree-icon icon-folder">
| cover.jpg <span class="folder root">/sdcard/Tachiyomi/local</span>
| <li>
└───chapter_1 <img src="/img/folder.svg" class="tree-icon icon-folder">
| | image_1 <span class="folder main">[the series title]</span>
| | image_n <ul>
| <li>
└───chapter_2 <img src="/img/jpeg.svg" class="tree-icon icon-jpeg">
| | image_1 <span class="file jpg">cover.jpg</span>
| | image_n </li>
| <li>
└───chaper_n <img src="/img/folder.svg" class="tree-icon icon-folder">
| image_1 <span class="folder">chapter_1</span>
| image_n <ul>
``` <li><span class="file">image_1.ext</span></li>
<li><span class="file">image_n.ext</span></li>
</ul>
</li>
<li>
<img src="/img/folder.svg" class="tree-icon icon-folder">
<span class="folder">chapter_2</span>
<ul>
<li><span class="file">image_1.ext</span></li>
<li><span class="file">image_n.ext</span></li>
</ul>
</li>
<li>
<img src="/img/folder.svg" class="tree-icon icon-folder">
<span class="folder">chapter_n</span>
<ul>
<li><span class="file">image_1.ext</span></li>
<li><span class="file">image_n.ext</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
```txt #### Example <Badge type="info" text="Phone storage" /> {#example-phone-storage}
/storage/18F5-2C11/Tachiyomi/local
└───[the series title] <div class="tree">
| cover.jpg <ul>
| <img src="/img/folder.svg" class="tree-icon icon-folder">
└───chapter_1 <span class="folder root">/storage/18F5-2C11/Tachiyomi/local</span>
| | image_1 <li>
| | image_n <img src="/img/folder.svg" class="tree-icon icon-folder">
| <span class="folder main">[the series title]</span>
└───chapter_2 <ul>
| | image_1 <li>
| | image_n <img src="/img/jpeg.svg" class="tree-icon icon-jpeg">
| <span class="file jpg">cover.jpg</span>
└───chaper_n </li>
| image_1 <li>
| image_n <img src="/img/folder.svg" class="tree-icon icon-folder">
``` <span class="folder">chapter_1</span>
<ul>
<li><span class="file">image_1.ext</span></li>
<li><span class="file">image_n.ext</span></li>
</ul>
</li>
<li>
<img src="/img/folder.svg" class="tree-icon icon-folder">
<span class="folder">chapter_2</span>
<ul>
<li><span class="file">image_1.ext</span></li>
<li><span class="file">image_n.ext</span></li>
</ul>
</li>
<li>
<img src="/img/folder.svg" class="tree-icon icon-folder">
<span class="folder">chapter_n</span>
<ul>
<li><span class="file">image_1.ext</span></li>
<li><span class="file">image_n.ext</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Tachiyomi will see four chapters in a single manga. Tachiyomi will see four chapters in a single manga.
The path to the folder with images must contain both the manga title and the chapter name (as seen above). The path to the folder with images must contain both the manga title and the chapter name (as seen above).
@ -81,25 +129,66 @@ Any folders inside the archive file are ignored.
You must place the archive inside the `Manga` folder where the name will become the `Chapter` title. You must place the archive inside the `Manga` folder where the name will become the `Chapter` title.
All images inside the archive regardless of folder structure will become pages for that chapter. All images inside the archive regardless of folder structure will become pages for that chapter.
Example (ZIP) #### Example <Badge type="info" text="ZIP" /> {#example-zip}
```txt <div class="tree">
/sdcard/Tachiyomi/local <ul>
└───[the series title] <img src="/img/folder.svg" class="tree-icon icon-folder">
| cover.jpg <span class="folder root">/sdcard/Tachiyomi/local</span>
| <li>
└───chapter_1.zip <img src="/img/folder.svg" class="tree-icon icon-folder">
| | image_1.jpg <span class="folder main">[the series title]</span>
| | image_n.jpg <ul>
| <li>
└───chapter_2.zip <img src="/img/jpeg.svg" class="tree-icon icon-jpeg">
| | image_1.jpg <span class="file jpg">cover.jpg</span>
| | image_n.jpg </li>
| <li>
└───chaper_n.zip <img src="/img/zip.svg" class="tree-icon icon-zip">
| image_1.jpg <span class="file zip">chapter_1.zip</span>
| image_n.jpg <ul>
``` <li>
<img src="/img/jpeg.svg" class="tree-icon icon-jpeg">
<span class="file jpg">image_1.jpg</span>
</li>
<li>
<img src="/img/jpeg.svg" class="tree-icon icon-jpeg">
<span class="file jpg">image_n.jpg</span>
</li>
</ul>
</li>
<li>
<img src="/img/zip.svg" class="tree-icon icon-zip">
<span class="file zip">chapter_2.zip</span>
<ul>
<li>
<img src="/img/jpeg.svg" class="tree-icon icon-jpeg">
<span class="file jpg">image_1.jpg</span>
</li>
<li>
<img src="/img/jpeg.svg" class="tree-icon icon-jpeg">
<span class="file jpg">image_n.jpg</span>
</li>
</ul>
</li>
<li>
<img src="/img/zip.svg" class="tree-icon icon-zip">
<span class="file zip">chapter_n.zip</span>
<ul>
<li>
<img src="/img/jpeg.svg" class="tree-icon icon-jpeg">
<span class="file jpg">image_1.jpg</span>
</li>
<li>
<img src="/img/jpeg.svg" class="tree-icon icon-jpeg">
<span class="file jpg">image_n.jpg</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
## Advanced ## Advanced
@ -138,3 +227,8 @@ It is also possible to use a custom image as a cover for each local manga.
To do this, you only need to place the image file, that needs to be named `cover.jpg`, in the root of the manga folder. To do this, you only need to place the image file, that needs to be named `cover.jpg`, in the root of the manga folder.
The app will then use your custom image in the local source listing. The app will then use your custom image in the local source listing.
<style scoped>
@import "../../.vitepress/theme/styles/tree.css"
</style>

11
src/public/img/folder.svg Normal file
View File

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" fill="#FFF">
<path fill="#FFB900" d="M45,24l-4.2426-4.2426C39.6321,18.6321,38.106,18,36.5147,18H9c-1.6569,0-3,1.3431-3,3v56 c0,0.5523,0.4477,1,1,1h82c0.5523,0,1-0.4477,1-1V27c0-1.6569-1.3431-3-3-3H45z"/>
<path fill="#FFD75E" d="M45,24l-4.2426,4.2426C39.6321,29.3679,38.106,30,36.5147,30H6v47c0,0.5523,0.4477,1,1,1h82 c0.5523,0,1-0.4477,1-1V27c0-1.6569-1.3431-3-3-3H45z"/>
<linearGradient id="a" x1="48" x2="48" y1="24" y2="78" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" stop-opacity="0"/>
<stop offset="1" stop-color="#ffd75e" stop-opacity=".3"/>
</linearGradient>
<path fill="url(#a)" d="M45,24l-4.2426,4.2426C39.6321,29.3679,38.106,30,36.5147,30H6v47c0,0.5523,0.4477,1,1,1h82 c0.5523,0,1-0.4477,1-1V27c0-1.6569-1.3431-3-3-3H45z"/>
<path opacity=".4" d="M6,30v1h30.6005c1.8565,0,3.637-0.7375,4.9497-2.0503L46.5,24H45l-4.2426,4.2426 C39.6321,29.3679,38.106,30,36.5147,30H6z"/>
<path fill="#DA7B16" d="M89,78H7c-0.5523,0-1-0.4477-1-1l0,0h84l0,0C90,77.5523,89.5523,78,89,78z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

67
src/public/img/jpeg.svg Normal file
View File

@ -0,0 +1,67 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 56 56" style="enable-background:new 0 0 56 56;" xml:space="preserve">
<g>
<path style="fill:#E9E9E0;" d="M36.985,0H7.963C7.155,0,6.5,0.655,6.5,1.926V55c0,0.345,0.655,1,1.463,1h40.074
c0.808,0,1.463-0.655,1.463-1V12.978c0-0.696-0.093-0.92-0.257-1.085L37.607,0.257C37.442,0.093,37.218,0,36.985,0z"/>
<polygon style="fill:#D9D7CA;" points="37.5,0.151 37.5,12 49.349,12 "/>
<circle style="fill:#F3D55B;" cx="18.931" cy="14.431" r="4.569"/>
<polygon style="fill:#26B99A;" points="6.5,39 17.5,39 49.5,39 49.5,28 39.5,18.5 29,30 23.517,24.517 "/>
<path style="fill:#14A085;" d="M48.037,56H7.963C7.155,56,6.5,55.345,6.5,54.537V39h43v15.537C49.5,55.345,48.845,56,48.037,56z"/>
<g>
<path style="fill:#FFFFFF;" d="M21.426,42.65v7.848c0,0.474-0.087,0.873-0.26,1.196c-0.173,0.323-0.406,0.583-0.697,0.779
c-0.292,0.196-0.627,0.333-1.005,0.41C19.085,52.961,18.696,53,18.295,53c-0.201,0-0.436-0.021-0.704-0.062
c-0.269-0.041-0.547-0.104-0.834-0.191s-0.563-0.185-0.827-0.294c-0.265-0.109-0.488-0.232-0.67-0.369l0.697-1.107
c0.091,0.063,0.221,0.13,0.39,0.198c0.168,0.068,0.353,0.132,0.554,0.191c0.2,0.06,0.41,0.111,0.629,0.157
s0.424,0.068,0.615,0.068c0.483,0,0.868-0.094,1.155-0.28s0.439-0.504,0.458-0.95V42.65H21.426z"/>
<path style="fill:#FFFFFF;" d="M25.514,52.932h-1.641V42.855h2.898c0.428,0,0.852,0.068,1.271,0.205
c0.419,0.137,0.795,0.342,1.128,0.615c0.333,0.273,0.602,0.604,0.807,0.991s0.308,0.822,0.308,1.306
c0,0.511-0.087,0.973-0.26,1.388c-0.173,0.415-0.415,0.764-0.725,1.046c-0.31,0.282-0.684,0.501-1.121,0.656
s-0.921,0.232-1.449,0.232h-1.217V52.932z M25.514,44.1v3.992h1.504c0.2,0,0.398-0.034,0.595-0.103
c0.196-0.068,0.376-0.18,0.54-0.335s0.296-0.371,0.396-0.649c0.1-0.278,0.15-0.622,0.15-1.032c0-0.164-0.023-0.354-0.068-0.567
c-0.046-0.214-0.139-0.419-0.28-0.615c-0.142-0.196-0.34-0.36-0.595-0.492C27.5,44.166,27.163,44.1,26.744,44.1H25.514z"/>
<path style="fill:#FFFFFF;" d="M39.5,47.736v3.896c-0.21,0.265-0.444,0.48-0.704,0.649s-0.533,0.308-0.82,0.417
s-0.583,0.187-0.889,0.232C36.781,52.978,36.479,53,36.178,53c-0.602,0-1.155-0.109-1.661-0.328s-0.948-0.542-1.326-0.971
c-0.378-0.429-0.675-0.966-0.889-1.613c-0.214-0.647-0.321-1.395-0.321-2.242s0.107-1.593,0.321-2.235
c0.214-0.643,0.51-1.178,0.889-1.606c0.378-0.429,0.822-0.754,1.333-0.978c0.51-0.224,1.062-0.335,1.654-0.335
c0.547,0,1.057,0.091,1.531,0.273c0.474,0.183,0.897,0.456,1.271,0.82l-1.135,1.012c-0.219-0.265-0.47-0.456-0.752-0.574
c-0.283-0.118-0.574-0.178-0.875-0.178c-0.337,0-0.659,0.063-0.964,0.191c-0.306,0.128-0.579,0.344-0.82,0.649
c-0.242,0.306-0.431,0.699-0.567,1.183s-0.21,1.075-0.219,1.777c0.009,0.684,0.08,1.276,0.212,1.777
c0.132,0.501,0.314,0.911,0.547,1.23s0.497,0.556,0.793,0.711c0.296,0.155,0.608,0.232,0.937,0.232c0.1,0,0.234-0.007,0.403-0.021
c0.168-0.014,0.337-0.036,0.506-0.068c0.168-0.032,0.33-0.075,0.485-0.13c0.155-0.055,0.269-0.132,0.342-0.232v-2.488h-1.709
v-1.121H39.5z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

1
src/public/img/zip.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" ?><svg height="24" version="1.1" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><g transform="translate(0 -1028.4)"><g transform="translate(-72,66)"><path d="m76 965.36c-1.105 0-2 0.9-2 2v8 2 1 6c0 1.11 0.895 2 2 2h2 12 2c1.105 0 2-0.89 2-2v-6-1-2-4-4c0-1.1-0.895-2-2-2h-2-2-2-8-2z" fill="#e67e22"/><path d="m76-64c-1.105 0-2 0.895-2 2v8 2 1 6c0 1.105 0.895 2 2 2h2 12 2c1.105 0 2-0.895 2-2v-6-1-2-4-4c0-1.105-0.895-2-2-2h-2-2-2-8-2z" fill="#f39c12" transform="translate(0 1028.4)"/><path d="m76-65c-1.105 0-2 0.895-2 2v8 2 1 6c0 1.105 0.895 2 2 2h2 12 2c1.105 0 2-0.895 2-2v-6-1-2-4-4c0-1.105-0.895-2-2-2h-2-2-2-8-2z" fill="#e67e22" transform="translate(0 1028.4)"/><path d="m76-66c-1.105 0-2 0.895-2 2v8 2 1 6c0 1.105 0.895 2 2 2h2 12 2c1.105 0 2-0.895 2-2v-6-1-2-4-4c0-1.105-0.895-2-2-2h-2-2-2-8-2z" fill="#f1c40f" transform="translate(0 1028.4)"/></g><path d="m17 1040.4c-1.105 0-2 0.9-2 2v4c0 1.1 0.895 2 2 2s2-0.9 2-2v-4c0-1.1-0.895-2-2-2zm0 1c0.552 0 1 0.4 1 1 0 0.5-0.448 1-1 1s-1-0.5-1-1c0-0.6 0.448-1 1-1zm0 3c0.552 0 1 0.4 1 1v1c0 0.5-0.448 1-1 1s-1-0.5-1-1v-1c0-0.6 0.448-1 1-1z" fill="#f39c12"/><g transform="translate(5)"><path d="m10 1028.4v10c0 1.1 0.895 2 2 2s2-0.9 2-2v-10h-4z" fill="#34495e"/><path d="m12 1028.4v1h1v-1h-1zm0 1h-1v1h1v-1zm0 1v1h1v-1h-1zm0 1h-1v1h1v-1zm0 1v1h1v-1h-1zm0 1h-1v1h1v-1zm0 1v1h1v-1h-1zm0 1h-1v1h1v-1zm0 1v1h1v-1h-1zm0 1h-1v1h1v-1zm0 1v1c0.552 0 1-0.5 1-1h-1z" fill="#95a5a6"/><path d="m11 1028.4v1h1v-1h-1zm0 2v1h1v-1h-1zm0 2v1h1v-1h-1zm0 2v1h1v-1h-1zm0 2v1h1v-1h-1zm0 2c0 0.5 0.448 1 1 1v-1h-1z" fill="#ecf0f1"/></g><path d="m17 1039.4c-1.105 0-2 0.9-2 2v4c0 1.1 0.895 2 2 2s2-0.9 2-2v-4c0-1.1-0.895-2-2-2zm0 1c0.552 0 1 0.4 1 1 0 0.5-0.448 1-1 1s-1-0.5-1-1c0-0.6 0.448-1 1-1zm0 3c0.552 0 1 0.4 1 1v1c0 0.5-0.448 1-1 1s-1-0.5-1-1v-1c0-0.6 0.448-1 1-1z" fill="#ecf0f1"/></g></svg>

After

Width:  |  Height:  |  Size: 1.9 KiB