Quick start guide: revamp text and look (#7985)

By @offset-torque, extracts from his upcoming user manual.
See https://github.com/koreader/koreader/discussions/7898
pull/8002/head
poire-z 3 years ago committed by GitHub
parent e3bac94db1
commit b31b7728db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -38,11 +38,12 @@ local FileConverter = {
---- @string markdown the markdown fragment
---- @string title an optional title for the HTML document
---- @treturn string an HTML document
function FileConverter:mdToHtml(markdown, title)
function FileConverter:mdToHtml(markdown, title, stylesheet)
local MD = require("apps/filemanager/lib/md")
stylesheet = stylesheet and string.format("<style>\n%s\n</style>\n", stylesheet) or ""
local md_options = {
prependHead = "<!DOCTYPE html>\n<html>\n<head>\n",
insertHead = string.format("<title>%s</title>\n</head>\n<body>\n", title),
insertHead = string.format("<title>%s</title>\n%s</head>\n<body>\n", title, stylesheet),
appendTail = "\n</body>\n</html>",
}
local html, err = MD(markdown, md_options)

@ -10,61 +10,184 @@ local lfs = require("libs/libkoreader-lfs")
local _ = require("gettext")
local QuickStart = {
quickstart_force_show_version = 201511982,
quickstart_force_show_version = 2021070000,
}
local language = G_reader_settings:readSetting("language") or "en"
local version = Version:getNormalizedCurrentVersion()
local rev = Version:getCurrentRevision()
local stylesheet = [[
div.logo { float: right; }
div.logo > img { height: 4em; }
h1 { page-break-before: avoid; margin-bottom: 1em; text-transform: uppercase; }
h2 { background-color: black; color: white; text-align: center; page-break-after: avoid; text-transform: uppercase; }
hr { margin: 1em 20%; }
div.generated { font-size: x-small; }
li { margin: 0.5em 0; page-break-inside: avoid; }
blockquote { text-align: center; page-break-before: avoid; page-break-inside: avoid; } /* Markdown lines starting with '>' */
/* Inline image (icons) */
p img, blockquote img { height: 1.5em; vertical-align: bottom; }
/* Standalone image (UI screenshots) */
div.img-block { text-align: center; margin: 0.5em; }
div.img-block > img { max-height: 60vh; max-width: 80vw; }
div.break-before-avoid { page-break-before: avoid; }
div.break-after-avoid { page-break-after: avoid; }
div.table { display: table; page-break-inside: avoid; width: 100%; }
div.table > div { display: table-row; }
div.table > div > * { display: table-cell; text-indent: 0; padding: 0.3em; }
div.table > div > *:nth-child(2) { text-align: left; hyphens: none; background-color: #eeeeee; }
div.table > div > *:nth-child(3) { white-space: nowrap; }
]]
local quickstart_guide = T(_([[
# KOReader Quickstart Guide
<div class="logo">![KOReader](../resources/koreader.svg)</div>
# Quickstart guide
* [User interface](#ui)
* [User interface tips](#uitips)
* [Accessing files](#afiles)
* [Transferring files](#tfiles)
* [Frontlight/backlight](#flight)
* [While reading](#reading)
* [Installing dictionaries](#dicts)
* [More info](#more)
---
You can access the complete user manual from [our GitHub page](https://github.com/koreader/koreader).
]])
..
_([[## User interface <a id="ui"></a>
<div class="img-block">![Touch zones](../resources/quickstart/touchzones.png)</div>
- To show the **TOP MENU** or **BOTTOM MENU** you can click the indicated zones. You can click or swipe down the upper zone to show the **TOP MENU**.
- The **STATUS BAR** zone can be used to cycle between STATUS BAR items if one item is visible. This will also hide and show the STATUS BAR if you tap enough times.
]])
..
_([[## User interface tips <a id="uitips"></a>
- You can change the interface language using:
> **TOP MENU ![Settings](../resources/icons/mdlight/appbar.settings.svg) Language**
- If you tap and hold on an option or menu item (font weight, line spacing etc.), you can set its value as **DEFAULT**. The new value will only be applied to documents opened from now on. Previously opened documents will keep their settings. You can identify default values as a STAR in menu or as a black border around indicators as seen below:
<div class="img-block break-before-avoid">![Default setting 1](../resources/quickstart/defaultsetting1.png)</div>
<div class="img-block break-before-avoid">![Default setting 2](../resources/quickstart/defaultsetting2.png)</div>
- You can see explanations for all items on the **BOTTOM MENU** by tapping and holding the name of the option. This is also available for most of the **TOP MENU** menu items.
- You can **CLOSE** full screen dialogs (History, Table of Contents, Bookmarks, Reading Statistics etc.) by swiping down
- **SCREENSHOTS** can be taken by touching opposing corners of the screen diagonally at the same time or by making a long diagonal swipe
<div class="img-block break-after-avoid">![Number picker](../resources/quickstart/numberpicker.png)</div>
- In dialogs containing adjustment arrow buttons like the one above, you can tap and hold on arrow buttons to increase / decrease the value in bigger increments
- You can **CLOSE** this type of dialog (non-full screen) by tapping outside of the window. You can **MOVE** this type of dialog by holding the window title and dragging
- You can make this type of dialog **SEMI-TRANSPARENT** (to see the text under it while adjusting a value) by tapping and holding the window title
- Tapping and holding a word brings up a dialog which allows you to search for the selection to find more occurrences in the document or to look it up on Wikipedia
- You can highlight sections by tapping and holding a word and dragging your finger
- You can move through your document via the **SKIM DOCUMENT** dialog:
> **TOP MENU ![Navigation](../resources/icons/mdlight/appbar.navigation.svg) Skim document**
]])
..
_([[## Accessing files <a id="afiles"></a>
The following methods are available for accessing your books and articles:
* File Browser
* Favorites
* History
You can assign gestures for quick access to each of these dialogs.
You can also set KOReader to open with any of these dialogs on startup via:
> **TOP MENU (in File Browser) ![Filebrowser](../resources/icons/mdlight/appbar.filebrowser.svg) Start with**
]])
..
_([[## Transferring files <a id="tfiles"></a>
In addition to transferring files the same way you would with the built-in reader application, other options are available depending on your device:
1. USB Mass Storage mode within KOReader
2. Cloud storage (Dropbox/FTP/Webdav)
3. SSH/SFTP access
4. Calibre transfer
5. News downloader
6. Wallabag
]])
..
_([[## Frontlight/backlight <a id="flight"></a>
You can control your screen light via this menu. If you have warm lighting (normal white LEDs+orange ones) you can control them separately from this dialog:
> **TOP MENU ![Settings](../resources/icons/mdlight/appbar.settings.svg) Frontlight**
]])
..
_([[## While reading <a id="reading"></a>
<div class="table"><div>
You can change the font
Welcome to KOReader.
**TOP MENU ![Typesettings](../resources/icons/mdlight/appbar.typeset.svg) Font**
You can activate the menu by swiping down from the top of the screen. Clicking outside the menu or swiping up on the menu will discard it.
</div><div>
Turning pages can be done either by swiping left and right or by single taps on the left or right side of the screen.
Make font bigger
### Contents
**BOTTOM MENU ![Textsize](../resources/icons/mdlight/appbar.textsize.svg)**
* [Menu](#menu)
* [Main menu](#main-menu)
* [Settings](#settings)
* [File browser](#file-browser)
</div><div>
Make font bolder
## Menu <a id="menu"></a>
**BOTTOM MENU ![Contrast](../resources/icons/mdlight/appbar.contrast.svg)**
Most menu items will show more information about what they do by long pressing on the item.
</div><div>
### Main <a id="main-menu"></a>
Invert the colors (white text on black)
![Menu](../resources/icons/mdlight/appbar.menu.svg) You can always view this quickstart guide again through *Help* *Quickstart guide* in the top right menu.
**TOP MENU ![Settings](../resources/icons/mdlight/appbar.settings.svg) Night mode**
### Settings <a id="settings"></a>
</div><div>
![Settings](../resources/icons/mdlight/appbar.settings.svg) You can change the language and other settings through the gear icon.
Change many formatting options
**TOP MENU ![Typesettings](../resources/icons/mdlight/appbar.typeset.svg) Style tweaks**
## File browser <a id="file-browser"></a>
</div></div>
]])
..
_([[## Installing dictionaries <a id="dicts"></a>
The file browser will only show document or ebook files that KOReader can read.
KOReader supports dictionary lookup in EPUB and even in scanned PDF/DJVU documents. To see the dictionary definition or translation, tap and hold a word.
In the file browser, you can tap on any file to open it. Long press on any file to bring up a menu with more options. The location path display above the list of files and folders shows you which folder you're viewing. The `../` entry, at the top of the listed folders, lets you go *up* one level. For instance, if you are at `/mnt/onboard` now, tapping the `../` will bring you to `/mnt/`.
To use the dictionary lookup function, first you need to install one or more dictionaries in the StarDict format. KOReader has an inbuilt dictionary installation system:
Once you have found the folder you have your books listed in, you can long press the selection that opens that folder and you should see a message box popup with the option to **Set as HOME folder**.
**TOP MENU ![Search](../resources/icons/mdlight/appbar.search.svg) Dictionary Settings > Download dictionaries**
]])
..
_([[## More info <a id="more"></a>
## Defaults <a id="defaults"></a>
You can find more information on our GitHub page
If you long press an option KOReader will prompt you to set it as the global default.
[https://github.com/koreader/koreader](https://github.com/koreader/koreader)
## Wiki <a id="wiki"></a>
You can find other KOReader users on MobileRead forums
Please refer to the wiki at <a href="https://github.com/koreader/koreader/wiki">https://github.com/koreader/koreader/wiki</a> for more documentation.
[https://www.mobileread.com/forums/forumdisplay.php?f=276](https://www.mobileread.com/forums/forumdisplay.php?f=276)
-------------
Generated by KOReader %1.
---
<div class="generated">Generated by KOReader %1.</div>
]]),
rev)
@ -103,7 +226,7 @@ function QuickStart:getQuickStart()
end
end
local quickstart_html = FileConverter:mdToHtml(quickstart_guide, _("KOReader Quickstart Guide"))
local quickstart_html = FileConverter:mdToHtml(quickstart_guide, _("KOReader Quickstart Guide"), stylesheet)
if quickstart_html then
FileConverter:writeStringToFile(quickstart_html, quickstart_filename)
end

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Loading…
Cancel
Save