-
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update dependencies. Use markdown files in about pages. Add body classes to postcss file. Add a animated indicator in page contents. Add an about the project page. Add a11y link to dashboard footer. Remove header anchor on heading focus. Replace deprecated Google Sign In with Google Identity Services SDK. Fix page contents algorithm. Add useBreakpoints in more places. Update heading levels in instructions. Fix undefined error in page contents component. Update outdated information in docs. Update dependencies. Update GitHub icon in dashboard footer. Add missing transition to docs. Make table of contents sr-only. Use more useLocalStorage from @vueuse. Redirect to last page on sign in. Remember search sort property and direction. Add a better error handling in queries. Show dialog overlay in GIS prompt. Show settings button disabled outside dashboard. Use book grid component in book tabs. Hide Beta flag from screenreaders. Add a grouped statistics component. Fix undefined error in search dialog. Redesign the mobile navbar. Decrease the chart title font size. Refactor cover finder service. Update dependencies. Bump the version to release.
- Loading branch information
1 parent
f1337f9
commit 952ac7f
Showing
109 changed files
with
3,280 additions
and
1,895 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,92 @@ | ||
--- | ||
title: Accessibility | ||
category: general | ||
date: 2022-03-09T15:34:00.000-03:00 | ||
--- | ||
|
||
This site have some accessibility features. | ||
|
||
[[toc]] | ||
|
||
## Jump to the content | ||
|
||
All pages have a internal link to jump to the main content. | ||
It can be used by users browsing with only the keyboard | ||
or by users that depend on a screenreader. Follow the link | ||
to get the focus directly in the page main content. | ||
|
||
## Jump to the navigation | ||
|
||
In pages such as Dashboard, you will also find a internal | ||
link to jump directly to the main navigation. | ||
|
||
## Menus | ||
|
||
The menus utilized in this website are from the Headless UI library, | ||
and they follow all the WAI-ARIA patterns for menu components. | ||
The keyboard shortcuts can be found in the table below. | ||
|
||
| Command | Description | | ||
| ----------------------- | ------------------------------------------------------------ | | ||
| [[Enter]] or [[Space]] | Opens menu and focuses first non-disabled item. | | ||
| [[▲]] or [[▼]] | Opens menu and focuses first/last non-disabled itemm. | | ||
| [[Esc]] | Close any open menus. | | ||
| [[▼]] or [[▲]] | When opened, focuses previous/next non-disabled item. | | ||
| [[Home]] or [[End]] | When opened, focuses first/last non-disabled item. | | ||
| [[Enter]] or [[Space]] | When opened, activates/clicks the current menu item. | | ||
| [[A-Z]] or [[a-z]] | When opened, focuses first item that matches keyboard input. | | ||
|
||
## Navigation | ||
|
||
This website load dinamically its content. When the page is | ||
changed, the screenreader will be updated by a modification | ||
of a control element. | ||
|
||
## Animations | ||
|
||
This website follow the Operating System setting, if available, | ||
to disable non-essential animations. You can find this setting | ||
at the Accessibility section of your computer or device. | ||
|
||
## Keyboard input | ||
|
||
This website supports the navigation with keyboard only. The navigation | ||
tries to implement the good practices and commands normally used. | ||
The commands are available in the tables below. | ||
|
||
### Simple commands | ||
|
||
All HTML5 components supports these commands. | ||
|
||
| Command | Description | | ||
| ----------------------- | ----------------------------------------- | | ||
| [[Tab]] | Jump to the next focusable component. | | ||
| [[Shift]] + [[Tab]] | Jump to the previous focusable component. | | ||
| [[Enter]] or [[Space]] | Activates/clicks the focused component. | | ||
|
||
### Selectable components commands | ||
|
||
Selectable components includes the group and book grid, the book table | ||
in the library and the carousels in the *dashboard*. | ||
|
||
| Command | Description | | ||
| ------------------------------------------- | --------------------------------------------------- | | ||
| [[▼]] or [[▲]] | Focuses the item above/below. | | ||
| [[►]] or [[◄]] | Advance/go back one item. | | ||
| [[Home]] or [[End]] | Jump to the first/last item. | | ||
| [[Shift]] + [[▼]] or [[Shift]] + [[▲]] | Increase the selection in the bottom/top direction. | | ||
| [[Shift]] + [[End]] or [[Shift]] + [[Home]] | Increase the selection to the last/first. | | ||
| [[Ctrl]] + [[▼]] or [[Ctrl]] + [[▲]] | Move the cursor to the item above/below. | | ||
| [[Ctrl]] + [[End]] or [[Ctrl]] + [[Home]] | Move the cursor to the last/first item. | | ||
| [[Ctrl]] + [[A]] | Select/unselect all items. | | ||
| [[Ctrl]] + [[K]] | Open the dashboard book search. | | ||
|
||
In macOS, use [[Command]] instead of [[Ctrl]]. | ||
|
||
## Issues during access | ||
|
||
If you find some issue during the access or some wrong implementation | ||
of an accessibility feature, please report it at the [repository | ||
on GitHub]. | ||
|
||
[repository on GitHub]: https://github.com/alessandrojean/toshokan/issues/new/choose |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,93 @@ | ||
--- | ||
title: About the project | ||
category: general | ||
date: 2022-03-06T21:39:00.000-03:00 | ||
--- | ||
|
||
In this page you will find a little more about the project. | ||
|
||
[[toc]] | ||
|
||
## The motivations | ||
|
||
The project was created because of many limitations in the existing | ||
manga and comic books collection management websites and apps, such as: | ||
|
||
- Outdated design and not being mobile-compatible; | ||
- Watermark in the book covers; | ||
- Slow or broken website; | ||
- Missing better fields for categorization; | ||
- Closed-source and doubtful user privacy; | ||
- No support to mark as read and have a read history. | ||
|
||
There also weren't any good tool (offline-based or not) that allowed the user | ||
to have full control over their collection data. Since none of the existing | ||
and well-populated database websites have an public API, the project would | ||
need to depend on manual field filling, but that's a minor issue if you | ||
take in consideration the advantage of being the owner of your collection data. | ||
|
||
## The sheet script | ||
|
||
The first concept of this tool was built directly in the Google Spreadsheets, | ||
by using their script environment called _Google Apps Script_. It helped | ||
in the creation and edition of the books, but it's bad to view the data | ||
only by a table in the sheet, it was one of the limitations. | ||
|
||
Since the beginning, the tool already had the ISBN search and cover finder, | ||
one of the key features that helps a lot to create the records. | ||
|
||
## The first version | ||
|
||
The first website was built using [Vue.js] (the same framework that is | ||
used in the current version) and [Vuetify] as the UI kit. Although it | ||
worked well, its performance wasn't very good, the UI was bloated | ||
and the app had a bad data management in memory, it just fetched all | ||
the sheet content at once and work locally with it. | ||
|
||
[Vue.js]: https://vuejs.org/ | ||
[Vuetify]: https://vuetifyjs.com/ | ||
|
||
## The current version | ||
|
||
The current version is more optimized and uses [Tailwind CSS] for the UI. | ||
It is powered by [Vite] and [Netlify]. The data fetching algorithm was | ||
enhanced and it loads much more faster in comparison to the first version. | ||
|
||
[Tailwind CSS]: https://tailwindcss.com/ | ||
[Vite]: https://vitejs.dev/ | ||
[Netlify]: https://www.netlify.com/ | ||
|
||
## Development | ||
|
||
The project is still in Beta stage, so its use to catalogation is limited | ||
to a few beta testers, and we aren't open to new ones at the moment, sorry. | ||
|
||
If it wasn't for the beta testers, the project would never be in constant | ||
improvement and optimization. We appreciate a lot the colaboration and feedback. | ||
|
||
If you find any bug or issue, we appreciate if you take some time to report | ||
it in our [GitHub repository], by filling one of the issues form. | ||
|
||
[GitHub repository]: https://github.com/alessandrojean/toshokan/issues/new/choose/ | ||
|
||
## Individual donations | ||
|
||
If you find the project useful and want to contribute, you can make | ||
a donation through [PicPay] (Brazil only). We appreciate it! | ||
|
||
[PicPay]: https://app.picpay.com/user/alessandrojean | ||
|
||
## Business sponsoring | ||
|
||
If you have a business related to manga, comics or books (such as an store, | ||
for example) and want to sponsor the project monthly, please open an issue | ||
in our [GitHub repository] about it so we can discuss. | ||
|
||
By sponsoring the project, your logo will be included in the `README.md` | ||
file and in the front page and sidebars of the help center, depending | ||
on plan choosed. | ||
|
||
We still haven't stablished the available plans, but please keep checking | ||
this page for future updates if you want your business to sponsor the project. | ||
|
||
[GitHub repository]: https://github.com/alessandrojean/toshokan/issues/new/choose/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,187 @@ | ||
--- | ||
title: Instructions | ||
category: guide | ||
date: 2022-03-09T12:04:00.000-03:00 | ||
--- | ||
|
||
Toshokan is a utility aiming to provide a friendly user interface | ||
for better management of your manga, comic and book collection | ||
spreadsheet. | ||
|
||
The spreadsheet must follow a strict template, that have to be | ||
copied to your Google Drive account so the application can | ||
have access to it. | ||
|
||
The application only reads and writes information on the | ||
spreadsheet, so you still have total control over your collection | ||
data and can have an easy access in case you want to export | ||
or use in other third party service. | ||
|
||
[[toc]] | ||
|
||
## Before starting | ||
|
||
Before the first use, you have to create the spreadsheet | ||
file in your Google Drive that will store your collection information. | ||
|
||
- Sign in with your Google Account at the [Google Drive] website. | ||
- Access [this sheet] and create a copy by clicking on | ||
**File → Make a copy**. | ||
- **Do not rename the file**, it should be named **Toshokan**. | ||
|
||
In the next time, the copied spreadsheet will be selected automatically. | ||
|
||
[Google Drive]: https://drive.google.com/ | ||
[this sheet]: # | ||
|
||
## Signing in | ||
|
||
After you copied the spreadsheet to your Google Drive, you can | ||
start to use Toshokan, by signing in with your Google Account. | ||
|
||
- Access the homepage and click on **Sign in with Google**. | ||
- Grant access to the information requested by Toshokan. | ||
|
||
In the next time, you will not need to grant the permissions again. | ||
|
||
### Usage of your personal information | ||
|
||
Toshokan is a open source application and rendered at the browser | ||
side. We do not have a server that store your data and we also | ||
do not share your information with any third party services. | ||
|
||
You can remove the granted permissions of access to your Google | ||
Drive files and Google Sheets spreadsheets at any time | ||
on your Google Account settings. | ||
|
||
More information can be found in our Privacy Policy. | ||
|
||
## Creating the first book | ||
|
||
When you sign in by the first time the sheet will be empty, | ||
and you will be asked to create the first book by using the wizard. | ||
|
||
If the ISBN search is available, you can search the book you | ||
want to add by typing the ISBN. If the book exists and the code | ||
is valid, you will be taken to the next step with some fields of | ||
the formulary already filled. | ||
|
||
![First step: ISBN search.](@/assets/about/new-book-step-01.jpg) | ||
|
||
The ISBN used to search can be typed with or without the dashes, | ||
and the search also works with old books that have the ISBN | ||
with 10 digits. However, at the moment, the search will only | ||
work with Brazilian books that have the ISBN starting with | ||
**978-85** or **978-65**. | ||
|
||
If the search returns no results or the book don't have a | ||
Brazilian ISBN, you can use the **Fill manually** option. | ||
|
||
![Second step: fill the book's metadata.](@/assets/about/new-book-step-02.jpg) | ||
|
||
The book metadata not always is right or follow a pattern, so | ||
you will probably need to fix some minor issues at the data. | ||
In the image above the manga had it title and author filled | ||
with upper case characters, and needs to be fixed. | ||
|
||
## The book metadata | ||
|
||
Below you will find an brief explanation of each metadata. | ||
|
||
ID | ||
: Usually the ISBN of the book, but other unique codes such | ||
as ISSN or EAN can be used too. In independent publications, | ||
the **N/A** (not applicable) value can be used. | ||
|
||
Title | ||
: Official name of the book. In case of publications with more | ||
than one volume, you can use the **#** (number sign) character | ||
followed by the volume/issue number. | ||
|
||
**Example:** Lone Wolf and Cub #01: The Assassin's Road | ||
|
||
Authors | ||
: People involved in the creation of the book, such as writers, | ||
artists, letterers, etc. In case of multiple people, you | ||
must separate their names by using the **semicolon** character. | ||
|
||
**Example:** Kazuo Koike; Goseki Kojima | ||
|
||
Publisher | ||
: Publisher that released the book. Sometimes te value retorned | ||
by the search is incorrect and the tool will perform a fix, | ||
but you may still need to modify it manually. | ||
|
||
Group | ||
: The group the book has in common with the others in your collection. | ||
Although ideally it is recommended to use the publication type | ||
(such as "books", "comics" or "manga"), you can also use | ||
the name of the franchise in cases with multiple volumes. | ||
|
||
You must always manually fill this metadata. | ||
|
||
Size | ||
: Width and height ratio, *in centimeters*. The values can have | ||
a maximum of one digit in the decimal place. | ||
|
||
Label price | ||
: Full price of the book. You can use up to two digits for the | ||
decimal places. | ||
|
||
In case of imported books, you can change the currency in the | ||
select field on the side, choosing the equivalent [ISO 4217] code. | ||
|
||
Paid price | ||
: Promotional price paid in the book purchase. When not applicable, | ||
you must fill in the label price value. You can also change | ||
the currency. | ||
|
||
Store | ||
: Place where the book was purchase. You can fill it with the | ||
**Unknown** value when you don't remember or when you | ||
don't want to fill it. | ||
|
||
Bought at | ||
: Date when the book entered your collection. It is used to | ||
generate the monthly statistics. If you do not remember | ||
or do not have this information, you can leave the field | ||
value blank by erasing the day, month and year at the input. | ||
|
||
![Book metadata correctly filled.](@/assets/about/new-book-step-03.jpg) | ||
|
||
[ISO 4217]: https://en.wikipedia.org/wiki/ISO_4217 | ||
|
||
## Cover image | ||
|
||
After filling the book metadata, you can choose a cover image | ||
automatically obtained from Amazon or from the publisher's website, | ||
or provide a custom valid URL to another image. | ||
|
||
If you want to leave the book without a cover image, just do not | ||
select any option and skip to the next step. | ||
|
||
![Third step: choosing the cover image.](@/assets/about/new-book-step-04.jpg) | ||
|
||
## Information review | ||
|
||
With all the metadata correct filled and the cover image choosen, | ||
you can do a last review on the information provided before | ||
finishing the wizard and creating the book at the spreadsheet. | ||
|
||
![Fourth step: information review.](@/assets/about/new-book-step-05.jpg) | ||
|
||
If all information is correct, you must click on | ||
**Finish**. | ||
|
||
![Creation confirmation dialog.](@/assets/about/new-book-step-06.jpg) | ||
|
||
With this, the book will be added to the spreadsheet and you | ||
can then choose **View**, if you want to go straight to the | ||
book page, or **New book** if you want to add another book | ||
in sequence. | ||
|
||
![Book information page.](@/assets/about/new-book-step-07.jpg) | ||
|
||
The book is now saved in the spreadsheet and you can repeat | ||
the wizard when you want to add new books. You can explore | ||
your library items via the **Library** item in the main navigation. |
Oops, something went wrong.