Skip to content

Commit

Permalink
Release v0.2.46.
Browse files Browse the repository at this point in the history
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
alessandrojean committed Mar 15, 2022
1 parent f1337f9 commit 952ac7f
Show file tree
Hide file tree
Showing 109 changed files with 3,280 additions and 1,895 deletions.
92 changes: 92 additions & 0 deletions docs/en-US/a11y.md
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
93 changes: 93 additions & 0 deletions docs/en-US/about.md
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/
187 changes: 187 additions & 0 deletions docs/en-US/instructions.md
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.
Loading

0 comments on commit 952ac7f

Please sign in to comment.