Update site looks (#3)

revamp site

docs/advanced/audio.md

@@ -1,5 +1,3 @@
-# Audio
-
 ## Default audio sources
 
 After looking up a term, you can click on the <img src="../ext/images/play-audio.svg" alt="" width="16" height="16"> _speaker_ button to hear the term's pronunciation. When searching for audio, multiple audio sources are checked until the first source with audio for the term is found. If no audio is found, you will hear a short click instead. Right-clicking the <img src="../ext/images/play-audio.svg" alt="" width="16" height="16"> button allows choosing the source manually.

docs/advanced/keyboard-shortcuts.md

@@ -1,5 +1,3 @@
-## Keyboard Shortcuts
-
 The following shortcuts are globally available:
 
 | Shortcut                           | Action                   |

docs/change-log.md

@@ -0,0 +1,17 @@
+> While we have made some substantial changes, the majority of the extension's functionality is thanks to hard work of [FooSoft](https://foosoft.net/) and many other incredible open source contributors from 2016-2023.
+
+## Major changes:
+
+- 🌐 Added multi-language support!
+- 💪 Completed the Manifest V2 → V3 transition, [read why here](https://developer.chrome.com/blog/resuming-the-transition-to-mv3/).
+- ⚡ Switched to using ECMAScript modules and npm-sourced dependencies.
+- 🔧 Implemented an end-to-end CI/CD pipeline.
+- 🧪 Switched to standard testing frameworks, vitest and playwrights.
+
+### In addition, we have made important bug fixes and minor enhancements:
+
+- ⚡ Improved dictionary import speeds by 2x~10x.
+- 📚 Added functionality to import/export multiple dictionaries, enabling portability across devices.
+- ✨ And [more](https://github.com/themoeway/yomitan/pulls?q=is%3Apr+is%3Amerged+-label%3Aarea%2Fdependencies+-label%3Akind%2Fmeta).
+
+Since the owner requested forks be uniquely named, we have chosen a new name, _Yomitan_ (_-tan_ is an honorific used for anthropomorphic moe characters).

docs/contributing.md

@@ -0,0 +1,43 @@
+## Contributing
+
+🚀 **Dip your toes into contributing by looking at issues with the label [good-first-issue](https://github.com/themoeway/yomitan/issues?q=is%3Aopen+is%3Aissue+label%3Agood-first-issue).**
+
+Since this is a distributed effort, we **highly welcome new contributors**! Feel free to browse the [issue tracker](https://github.com/themoeway/yomitan/issues), and read our [contributing guidelines](./CONTRIBUTING.md).
+
+Here are some ways anyone can help:
+
+- Try using the Yomitan dev build. Not only do you get cutting edge features, but you can help uncover bugs and give feedback to developers early on.
+- Document any UI/UX friction in Github Issues. We're looking to make Yomitan more accessible to non-technical users.
+- All the issues in `area/bug` older than 2 months need help reproducing. If anything interests you, please try to reproduce it and report your results. We can't easily tell if these issues are one-off, have since been resolved, or are no longer relevant.
+
+> The current active maintainers of Yomitan spend a lot of their time debugging and triaging issues. When someone files a bug report, we need to assess the frequency and severity of the bug. It is extremely helpful if we get multiple reports of people who experience a bug or people who can contribute additional detail to an existing bug report.
+
+If you're looking to code, please let us know what you plan on working on before submitting a Pull Request. This gives the core maintainers an opportunity to provide feedback early on before you dive too deep. You can do this by opening a Github Issue with the proposal.
+
+Some contributions we always appreciate:
+
+- Well-written tests covering different functionalities. This includes [playwright tests](https://github.com/themoeway/yomitan/tree/master/test/playwright), [benchmark tests](https://github.com/themoeway/yomitan/tree/master/benches), and unit tests.
+- Increasing our type coverage.
+- More and better documentation!
+
+Information on how to setup and build the codebase can be found [here](./CONTRIBUTING.md#setup).
+
+If you want to add or improve support for a language, read the documentation on [language features](./docs/development/language-features.md).
+
+Feel free to join us on [TheMoeWay Discord 🐇](https://discord.gg/UGNPMDE7zC) at [#yomitan-development](https://discord.com/channels/617136488840429598/1081538711742844980).
+
+## Third-Party Libraries
+
+Yomitan uses several third-party libraries to function.
+
+<!-- The following table is generated using the command `npm run license-report:markdown`. -->
+
+| Name                | Installed version | License type | Link                                             |
+| :------------------ | :---------------- | :----------- | :----------------------------------------------- |
+| @zip.js/zip.js      | 2.7.32            | BSD-3-Clause | git+https://github.com/gildas-lormeau/zip.js.git |
+| dexie               | 3.2.4             | Apache-2.0   | git+https://github.com/dfahlander/Dexie.js.git   |
+| dexie-export-import | 4.0.7             | Apache-2.0   | git+https://github.com/dexie/Dexie.js.git        |
+| yomitan-handlebars  | 1.0.0             | MIT          | n/a                                              |
+| parse5              | 7.1.2             | MIT          | git://github.com/inikulin/parse5.git             |
+| wanakana            | 5.3.1             | MIT          | git+ssh://[email protected]/WaniKani/WanaKana.git   |
+| hangul.js           | 0.2.6             | MIT          | git+https://github.com/e-/Hangul.js.git          |

docs/getting-started/index.md

@@ -0,0 +1,70 @@
+This introduction will help you quickly familiarize yourself with the basics and set you up for a smooth language learning experience. 
+
+Whether you're new to Yomitan or just need a refresher, here you'll find all the essential information you need to begin your journey.
+
+Let's dive in and get started!
+
+---
+
+## Installation
+
+##### Yomitan comes in two flavors: _stable_ and _testing_.
+
+!!! info "Stable and Testing"
+    - New changes are initially introduced into the _testing_ version, and after some time spent ensuring that they are relatively bug free, they will be promoted to the _stable_ version.
+
+    - If you are technically savvy and don't mind [submitting issues](https://github.com/themoeway/yomitan/issues/new/choose) on GitHub, try the _testing_ version; otherwise, the _stable_ version will be your best bet. Check [contributing](#contributing) for more information on how to help.
+
+=== "Google Chrome"
+    === "Stable"
+        [:fontawesome-brands-chrome: Get Yomitan <small>Stable</small>](https://chrome.google.com/webstore/detail/yomitan/likgccmbimhjbgkjambclfkhldnlhbnn){ .md-button .md-button--primary }
+    === "Testing"
+        [:fontawesome-brands-chrome: Get Yomitan <small>Testing</small>](https://chrome.google.com/webstore/detail/yomitan-development-build/glnaenfapkkecknnmginabpmgkenenml){ .md-button .md-button--primary }
+=== "Mozilla Firefox"
+    === "Stable"
+        [:fontawesome-brands-firefox-browser: Get Yomitan <small>Stable</small>](https://addons.mozilla.org/en-US/firefox/addon/yomitan/){ .md-button .md-button--primary }
+    === "Testing"        
+        [:fontawesome-brands-firefox-browser: Go To Github Releases](https://github.com/themoeway/yomitan/releases){ .md-button .md-button--primary }
+
+        <small>※ Unlike Chrome, Firefox does not allow extensions meant for testing to be hosted in the marketplace. You will to download the desired version and side-load it yourself. You only need to do this once, and you will get updautomatically.</small>
+
+---
+
+## Basic Usage
+
+Now that you have installed Yomitan, let's explore how you can utilize her features in your language learning journey.
+
+### Quick-actions
+
+Click the <img src="../assets/icon/yomitan-icon.svg" width="16" height="16" alt="yomitan icon"> _Yomitan_ button in the browser bar to open the quick-actions popup.
+
+<img src="../assets/resources/browser-action-popup1.png" alt="yomitan main popup">
+
+- The <img src="../assets/icon/cog.svg" width="16" height="16" alt="cog"> _cog_ button will open the Settings page.
+- The <img src="../assets/icon/magnifying-glass.svg" width="16" height="16" alt="magnifying glass"> _magnifying glass_ button willopen the Search page.
+- The <img src="../assets/icon/question-mark-circle.svg" width="16" height="16" alt="question mark symbol"> _question mark_ buttonwill open the Information page.
+- The <img src="../assets/icon/profile.svg" width="16" height="16" alt="profile icon"> _profile_ button will appear when multipleprofiles exist, allowing the current profile to be quickly changed.
+
+### Installing Dictionaries
+
+Import the dictionaries you wish to use for term and kanji searches; head over to the [dictionary docs](./docs/dictionaries.md) to get set up! If you do not have any dictionaries installed or enabled, Yomitan will warn you that it is not ready for use by displaying an orange exclamation mark over its icon. This exclamation mark will disappear once you have installed and enabled at least one dictionary.
+
+<img src="../assets/resources/settings-dictionaries-popup.png" width="300" alt="custom dictionaries list">
+
+### Scanning Text
+
+Webpage text can be scanned by moving the cursor while holding a modifier key, which is <kbd>Shift</kbd> by default. If definitions are found for the text at the cursor position, a popup window containing term definitions will open. This window can be dismissed by clicking anywhere outside of it.
+
+<img src="../assets/resources/search-popup-terms.png" width="300" alt="popup with search terms">
+
+### Audio
+
+Click on the <img src="../assets/icon/play-audio.svg" width="16" height="16" alt="loudspeaker icon"> _speaker_ button to hear the term pronounced by a native speaker. If an audio sample is not available, you will hear a short click instead. For more options, see [Audio Configuration](./docs/audio.md).
+
+### Kanji
+
+Click on individual kanji in the term definition results to view additional information about those characters, including stroke order diagrams, readings, meanings, and other useful data.
+
+<img src="../assets/resources/search-popup-kanji.png" width="300" alt="popup with kanji details">
+
+To further enhance your Yomitan experience, it's worth [integrating with Anki](./docs/anki-integration.md), a spaced-repetition flashcard program to help solidify the words you encounter.