diff --git a/site/src/app.rs b/site/src/app.rs index b492881..fa648f2 100644 --- a/site/src/app.rs +++ b/site/src/app.rs @@ -10,7 +10,7 @@ use leptos_tw_ui::components::{ }; use crate::{ - pages::{about::AboutPage, transliterator::Transliterator}, + pages::{about::AboutPage, guide::GuidePage, transliterator::Transliterator}, theme::{ default_page_class, ButtonVariant, MenuBarVariant, MenuHeaderVariant, ToggleSwitchClassVariant, @@ -37,6 +37,7 @@ pub fn App() -> impl IntoView { }/> }/> + }/> @@ -97,6 +98,9 @@ fn Menu() -> impl IntoView { Транслітерація + + Посібник + Про Коваль diff --git a/site/src/pages/about.rs b/site/src/pages/about.rs index 464b6e9..a6c064c 100644 --- a/site/src/pages/about.rs +++ b/site/src/pages/about.rs @@ -87,7 +87,7 @@ fn AboutTextBlock() -> impl IntoView { target="_blank" href="https://github.com/alardev/wana_kana_rust" > - Модифікація наведеної бібліотеки + Модифікація наведеної бібліотеки допомогла створити транслітерацію хірагани/катакани українською мовою за використання impl IntoView { Сашко - За створення чудового логотипу для сайту. diff --git a/site/src/pages/guide.rs b/site/src/pages/guide.rs index 464b6e9..9fb214c 100644 --- a/site/src/pages/guide.rs +++ b/site/src/pages/guide.rs @@ -8,17 +8,17 @@ use leptos_tw_ui::components::{ use crate::theme::TypographyClass; #[component] -pub fn AboutPage() -> impl IntoView { +pub fn GuidePage() -> impl IntoView { view! { - + <Title text="Коваль | Посібник"/> <Main id="main"> // class="max-w-[45rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto text-gray-900 dark:text-gray-400" <div class="flex flex-col pl-3 max-w-[45rem] 2xl:h-screen landscape:h-full px-4 py-4 sm:px-6 lg:px-8 mx-auto text-gray-900 dark:text-gray-400"> // <!-- Announcement Banner --> <Typography variant=TypographyVariant::H1 class=TypographyClass::H1.get()> - Про Коваль + Посібник </Typography> - <AboutTextBlock/> + <GuideTextBlock/> // <!-- End Announcement Banner --> </div> @@ -27,212 +27,154 @@ pub fn AboutPage() -> impl IntoView { } #[component] -fn AboutTextBlock() -> impl IntoView { +fn GuideTextBlock() -> impl IntoView { view! { <section class="max-w-[70rem] grow py-4 mx-auto"> <div class="border rounded-xl shadow-sm border-blue-600 dark:bg-slate-800 dark:border-slate-600 p-5 pt-2 mt-3 mb-20"> <Typography variant=TypographyVariant::H2 class=TypographyClass::H2.get()> - Що таке + Як використовувати {"«Коваль»?"} </Typography> <Typography variant=TypographyVariant::Paragraph class=TypographyClass::Paragraph.get() > + Для того, щоб Коваль міг транслітерувати японські імена, ви маєте вводити їх, використовуючи фонетичну систему письма <a class="font-semibold dark:text-violet-400" - href="https://github.com/alardev/koval" + href="https://uk.wikipedia.org/wiki/%D0%A5%D1%96%D1%80%D0%B0%D2%91%D0%B0%D0%BD%D0%B0" target="_blank" > - Коваль + хірагана </a> - {"— це безкоштовний вебзастосунок з відкритим вихідним кодом, створений для транслітерації з японської на українську, названий на честь"} + або <a class="font-semibold dark:text-violet-400" - href="https://uk.wikipedia.org/wiki/%D0%9A%D0%BE%D0%B2%D0%B0%D0%BB%D0%B5%D0%BD%D0%BA%D0%BE_%D0%9E%D0%BB%D0%B5%D0%BA%D1%81%D0%B0%D0%BD%D0%B4%D1%80_%D0%9E%D0%BB%D0%B5%D0%BA%D1%81%D0%B0%D0%BD%D0%B4%D1%80%D0%BE%D0%B2%D0%B8%D1%87_(%D1%81%D1%85%D0%BE%D0%B4%D0%BE%D0%B7%D0%BD%D0%B0%D0%B2%D0%B5%D1%86%D1%8C)" + href="https://uk.wikipedia.org/wiki/%D0%9A%D0%B0%D1%82%D0%B0%D0%BA%D0%B0%D0%BD%D0%B0" target="_blank" > - Олександра Коваленка. + катакана. </a> - </Typography> - <Typography variant=TypographyVariant::H2 class=TypographyClass::H2.get()> - Навіщо він потрібен? - </Typography> - <Typography - variant=TypographyVariant::Paragraph - class=TypographyClass::Paragraph.get() - > - {"Мета цього вебзастосунку — допомогти перекладачам стандартизувати та уточнити правильну транслітерацію імен, назв та інших слів. Однак він також може бути корисним для тих, хто вивчає мову."} - </Typography> - <Typography variant=TypographyVariant::H2 class=TypographyClass::H2.get()> - Як він працює? - </Typography> - <Typography - variant=TypographyVariant::Paragraph - class=TypographyClass::Paragraph.get() - > + // <div> + // <ruby class="text-5xl">赤<rp>{"（"}</rp><rt>あか</rt><rp>{"）"}</rp></ruby> + // <ruby class="text-5xl">井<rp>{"（"}</rp><rt>い</rt><rp>{"）"}</rp></ruby> + // <ruby class="text-5xl">沢<rp>{"（"}</rp><rt>ざわ</rt><rp>{"）"}</rp></ruby> + // </div> + <h3 class="my-3"> + {"Наприклад:"} + <br/> + {"にほん - Ніхон."} + <br/> + {"しんいちろう - Шін'їчіро."} + </h3> - Сайт використовує модифіковану бібліотеку транслітератора - <a - class="font-semibold dark:text-violet-400" - href="https://github.com/PSeitz/wana_kana_rust" - target="_blank" - > - wana_kana_rust, - </a> - яка спочатку використовувалася для транслітерації між катаканою, хіраганою та ромадзі. - <a - class="font-semibold dark:text-violet-400" - target="_blank" - href="https://github.com/alardev/wana_kana_rust" - > - Модифікація наведеної бібліотеки - </a> - допомогла створити транслітерацію хірагани/катакани українською мовою за використання - <a - class="font-semibold dark:text-violet-400" - target="_blank" - href="https://uk.wikipedia.org/wiki/%D0%AF%D0%BF%D0%BE%D0%BD%D1%81%D1%8C%D0%BA%D0%BE-%D1%83%D0%BA%D1%80%D0%B0%D1%97%D0%BD%D1%81%D1%8C%D0%BA%D1%96_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B8_%D1%82%D1%80%D0%B0%D0%BD%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%86%D1%96%D1%97_%D1%82%D0%B0_%D1%82%D1%80%D0%B0%D0%BD%D1%81%D0%BB%D1%96%D1%82%D0%B5%D1%80%D0%B0%D1%86%D1%96%D1%97#%D0%9A%D0%BE%D0%B2%D0%B0%D0%BB%D0%B5%D0%BD%D0%BA%D0%BE_(2012)" - > - системи транслітерації Коваленка (2012). - </a> - </Typography> - <Typography - variant=TypographyVariant::Paragraph - class=TypographyClass::Paragraph.get() - > - Для тестування використовувалася ручна транслітерація імен, що була створена - <a - class="font-semibold dark:text-violet-400" - href="https://t.me/HeiterkaEcchi" - target="_blank" - > - Гейтеркою Еччі, - </a> - а також роботи інших перекладачів й перекладачок. Без їхніх зусиль цей вебзастосунок не існував би! + <h3 class="my-3"> + <p class="font-bold text-xl"> + {"Увага!"} + </p> + {"У деяких випадках потрібно використовувати спеціальний символ-розділювач \"_\" для позначення розриву між складами кандзі. Прочитайте про це нижче, щоб зрозуміти, чому це важливо."} + </h3> + + <h3 class="my-3"> + {"Приклад застосування:"} + <br/> + {"はつか_いち - Хацукаїчі."} + <br/> + {"ごう あか_いざわ - Ґо Акаїдзава."} + </h3> </Typography> + <Typography variant=TypographyVariant::H2 class=TypographyClass::H2.get()> - Важливо зазначити: + Навіщо позначати розділення складів? </Typography> <Typography variant=TypographyVariant::Paragraph class=TypographyClass::Paragraph.get() > - Усі можливі помилки є моїми власними й жодним чином не є результатом роботи будь-кого, на кого є посилання в цій роботі. Якщо ви знайшли будь-які помилки або маєте зауваження, будь ласка, повідомте про це через + {"Існують певні слова та імена як はつかいち. Читається як \"Хацукаїчі\" - місто в Японії. Однак, якщо ви введете це фонетичне читання у Коваль, він видасть ХацукаЙчі. Чому це так?"} + <p class="mt-3"> + {"Причина в тому, що хіраґана і катакана - це фонетичні алфавіти, які використовуються для позначення вимови іншого набору японської писемності, який називається"} + + <a + class="font-semibold dark:text-violet-400" + href="https://uk.wikipedia.org/wiki/%D0%9A%D0%B0%D0%BD%D0%B4%D0%B7%D1%96" + target="_blank" + > + кандзі. + </a> + + {"Багато слів і особливо імен пишуться використовуючи ієрогліфи кандзі. Кожен ієрогліф кандзі це склад. У системі транслітерації Коваленка, коли однин склад кандзі закінчується на I, а інший кандзі починається зі звуку I, це називається збігом, який означає, що буква I перетворюється на Ї."} + </p> - <a - class="font-semibold dark:text-violet-400" - href="https://github.com/alardev/koval/issues/new" - target="_blank" - > - Github - </a> + <p class="mt-3"> + {"Давайте розглянемо кандзі Хацукаїчі, щоб краще зрозуміти, чому важливо знати, де починається і де закінчується читання складів кандзі."} + </p> + <div class="mt-3"> + <ruby class="text-4xl">廿<rp>{"（"}</rp><rt>はつ</rt><rp>{"）"}</rp></ruby> + <ruby class="text-4xl">日<rp>{"（"}</rp><rt>か</rt><rp>{"）"}</rp></ruby> + <ruby class="text-4xl">市<rp>{"（"}</rp><rt>いち</rt><rp>{"）"}</rp></ruby> + </div> - або - {"зв'яжіться"} - зі мною у Телеграм. Також не соромтеся залишати відгуки, бо саме вони і є відзнакою й оцінкою моєї праці! + <p class="mt-3"> + {"Саме так записується ім'я Хацукаїчі у вигляді кандзі. Наступне позначення, яке ви бачите, називається"} + + <a + class="font-semibold dark:text-violet-400" + href="https://uk.wikipedia.org/wiki/%D0%A4%D1%83%D1%80%D1%96%D2%91%D0%B0%D0%BD%D0%B0" + target="_blank" + > + Фуріґана. + </a> - </Typography> + + + {"Фуріґана використовується для написання кандзі з відповідним читанням над ними. Ви дуже часто зустрінете це в японській літературі та медіа."} + </p> - <Typography variant=TypographyVariant::H2 class=TypographyClass::H2.get()> - Використані правила: - </Typography> - <Typography - variant=TypographyVariant::Paragraph - class=TypographyClass::Paragraph.get() - > - <ul class="list-decimal ml-5"> - <li> - {"Н/М: Перед складом на б, п, м ん \"n\" пишеться і читається як \"м\". ✅"} - </li> - <li> - {"Подвоєння приголосних (matcha — маччя)✅"} - </li> - <li> - Подовження голосних: - <ul class="list-disc ml-5"> - <li> - {"о: та у: Kyousuke — Кьоске ✅"} - </li> - <li> - {"і: - За Коваленком, довга \"і:\" передається додаванням ї — \"ії\": Niigata — Ніїґата ✅"} - </li> - <li> - {"а:, е: - зберігаємо: \"аа\", \"ее\". ✅"} - </li> - <li> - {"розрізняти \"ou\" おう та \"oo\" おお. ✅"} - </li> - <li> - {"Не всі \"ou\" є подовженим \"о:\" - 井上 Inoue — Іноуе. ✅"} - </li> - </ul> - </li> - <li> - {"Дифтонги /ai, ii, ui, ei, oi/ - Nagai — Наґай ✅"} - </li> - <li> - {"Збіг голосних на межі складів - Hatsukaichi — Хацукаїчі ✅"} - </li> - <li> - {"Особливості апострофа - Shin'ichi — Шін'їчі (не Шінічі) ✅"} - <br/> - {"NB! треба додавати позначення 「 в хірагані/катакані"} - </li> - <li> - {"Сполучення /ei/ : sensei — сенсей ✅"} - </li> - <li> - {"Редукція - Sasuke — Саске НЕ ВИКОРИСТОВУЄТЬСЯ 🔴"} - </li> - <li> - {"Є у Коваленка: Ieyasu — Ієясу ✅"} - </li> - </ul> + <p class="mt-3"> + {"Тепер ми можемо записати назву наступним чином: はつ_か_いち. Тепер, коли ми вводимо це у Коваль, ми отримуємо правильний очікуваний результат Хацукаїчі"} + </p> + + <p class="mt-3"> + {"Ви могли помітити, що ієрогліф 廿 читається як はつ (хацу українською). В японській мові кандзі може мати довільне читання, яке читач або автор бажає. Вони можуть буквально придумати власне значення, якщо захочуть. Один ієрогліф кандзі може означати багато різних речей і може бути вимовлений або прочитаний кількома абсолютно різними способами. Отже, використовуючи лише кандзі, неможливо визначити вимову. Коли ви зустрічаєте японця або бачите ім'я, яке написане у вигляді кандзі, ви можете статистично вгадати його прочитання, але щоб бути абсолютно впевненим, ви повинні запитати людину, як воно читається."} + </p> + + <p class="mt-3"> + {"Саме тому вам потрібно знати, як кожне ім'я пишеться у формі кандзі, і як вимовляється кожен склад."} + </p> + <p class="mt-3 font-bold"> + {"Просто використовувати кандзі недостатньо. Тому треба використовувати хірагану і вручну відзначати розділення."} + </p> </Typography> <Typography variant=TypographyVariant::H2 class=TypographyClass::H2.get()> - Плани на майбутнє + Де знайти вимову іменам в хірагани та катакани? </Typography> <Typography variant=TypographyVariant::Paragraph class=TypographyClass::Paragraph.get() > - <ul class="list-disc ml-4"> - <li> - Додати можливість транслітерувати Кандзі через бібліотеку jmdict - </li> - <li> - Створити базу імен персонажів та інших назв для зручного пошуку - </li> - </ul> - </Typography> + <p class="mb-3"> + {"Перше місце, де ви повинні шукати значення кандзі, - це першоджерело, з яким ви працюєте. Автор, найімовірніше, зазначить нестандартне прочитання будь-яких імен чи слів, які він вважатиме за потрібне."} + </p> - <Typography variant=TypographyVariant::H2 class=TypographyClass::H2.get()> - Окрема подяка: - </Typography> - <Typography - variant=TypographyVariant::Paragraph - class=TypographyClass::Paragraph.get() - > - {"Наступні люди надали зворотній зв'язок про вебзастосунок на ранніх етапах та допомогли зробити його таким, яким він є сьогодні:"} + <p class="my-3"> + {"Крім того, ви можете спробувати пошукати в Інтернеті або скористатися такими інструментами, як"} + </p> <ul class="list-disc ml-4 mt-4"> - <li> - ОКЕ - Особлива подяка за ідею, допомогу з перекладами та правописом. - </li> <li> <a - class="font-semibold dark:text-violet-400" - href="https://www.instagram.com/stoka100k/" - target="_blank" + class="font-semibold dark:text-violet-400" + href="https://jotoba.de" + target="_blank" > - Сашко - </a> - За створення чудового логотипу для сайту. + jotoba.de + </a> </li> </ul> </Typography> - </div> + </div> </section> } } diff --git a/site/src/pages/mod.rs b/site/src/pages/mod.rs index 858b877..bd9c218 100644 --- a/site/src/pages/mod.rs +++ b/site/src/pages/mod.rs @@ -1,3 +1,4 @@ // pub mod counter; pub mod about; +pub mod guide; pub mod transliterator; diff --git a/site/src/theme.rs b/site/src/theme.rs index e0ae482..860b06a 100644 --- a/site/src/theme.rs +++ b/site/src/theme.rs @@ -161,7 +161,7 @@ impl TypographyClass { "text-2xl", "text-violet-800", "dark:text-gray-200", - "mt-4" + "mt-4", ]; const H3: &[&str] = &[ "font-weight-20",