Skip to content

Commit

Permalink
trans&bug: add zh-hans translations and fix build ci error (#310)
Browse files Browse the repository at this point in the history 
* translation: add zh translation

* i18n

* trans: add zh-Hans README

* trans: add language zh-Hans link

* trans: update zh-Hans README

* clean&trans: clean useless file & rename README_zh-Hans.md -> README_zh-hans.md

* fix: language zh-hans link

* locale: add zh-hans translation for page contribute and add sample for Alert

* docs: add docs zh-hans translation

---------

Co-authored-by: Yan Savinov <piraten.pad@gmail.com>
  • Loading branch information
@cherrol @quatrochan
cherrol and quatrochan authored Aug 15, 2023
1 parent a66093e commit d4aaa01
Show file tree
Hide file tree
Showing 14 changed files with 329 additions and 167 deletions.
44 changes: 13 additions & 31 deletions docs/locales/en.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
import support from '../pages/Support/locale/en'
import theming from '../pages/Theming/locale/en'
import contribute from '../pages/Contribute/locale/en'
import introduction from '../pages/Introduction/locale/en'
import start from '../pages/Start/locale/en'
import alert from '../pages/components/Alert/locale/en'

export default {
landing: {
title:
Expand Down Expand Up @@ -123,35 +130,10 @@ export default {
template: 'Template',
code: 'Code',
},
support: {
intro:
'We are grateful for your interest in supporting Equal UI! Your support helps us to continue developing and maintaining the project, as well as adding new features and improving documentation.',
ways_to_support_title: 'Ways to Support',
via_crypto: 'Make a financial contribution via crypto.',
github_star: 'Star and share the repository on GitHub.',
promote: 'Promote the project on social media.',
review:
"Leave a positive review on the project's listing in package managers.",
contribute:
'Contribute to the project by reporting bugs, fixing issues, or implementing new features.',
donations_title: 'Donations',
donations_text:
'At this moment the only way you can support the author is crypto. All donations go towards maintaining the project, development time, and other expenses.',
cardano_wallet: 'Cardano wallet:',
eth_wallet: 'Ethereum wallet:',
thanks:
'Thank you for your support of Equal UI! It is greatly appreciated and helps to ensure the continued development and improvement of the project.',
contact: 'For any questions about sponsoring project you can contact',
},
theming: {
wip: 'This page is WIP',
own_theme_copy:
'To create your own theme you can copy on of the initial theme files and make your changes to them:',
own_theme: 'Or make your own theme file from scratch',
full: 'contains classes for light and dark themes',
light: 'contains classes for light theme',
dark: 'contains classes for dark theme',
},
contribute: (await import('../pages/Contribute/locale/en')).default,
alert: (await import('../pages/components/Alert/locale/en')).default,
support,
theming,
contribute,
introduction,
start,
alert,
}
41 changes: 13 additions & 28 deletions docs/locales/zh-hans.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
import support from '../pages/Support/locale/zh-hans'
import theming from '../pages/Theming/locale/zh-hans'
import contribute from '../pages/Contribute/locale/zh-hans'
import introduction from '../pages/Introduction/locale/zh-hans'
import start from '../pages/Start/locale/zh-hans'
import alert from '../pages/components/Alert/locale/zh-hans'

export default {
landing: {
title:
Expand Down Expand Up @@ -121,35 +128,13 @@ export default {
template: 'Template',
code: '代码',
},
support: {
intro:
'我们感谢您对 Equal UI 的支持！您的支持有助于我们继续开发和维护项目，并增加新功能和完善文档。',
ways_to_support_title: '支持的方式',
via_crypto: '通过加密货币赞助。',
github_star: '在GitHub上给项目仓库Star并分享。',
promote: '在社交媒体上推广项目。',
review: '在包管理器的项目列表中留下好评。',
contribute: '通过报告错误，修复问题或实现新功能来为项目做出贡献。',
donations_title: '赞助',
donations_text:
'目前，支持作者的唯一方式就是加密货币。所有捐款都将用于项目维护、开发时间和其他开支。',
cardano_wallet: 'Cardano钱包：',
eth_wallet: '以太坊钱包：',
thanks:
'感谢您对 Equal UI 的支持！我们非常感谢您的支持，这有助于确保项目的持续发展和改进。',
contact: '如果你对赞助项目有任何问题，可以联系我们',
},
theming: {
wip: '这个页面正在进行中',
own_theme_copy: '要创建自己的主题，可以复制初始主题文件并对其进行修改：',
own_theme: '或者从头开始创建你自己的主题文件',
full: '包含亮色和暗色主题的class',
light: '包含亮色主题的class',
dark: '包含暗色主题的class',
},
improve_translation_title: '帮助我们改进翻译',
improve_translation_text:
'此语言的翻译是自动从英语翻译过来的。\n你可以帮助我们改进它。请到github上帮助我们翻译。',
contribute: (await import('../pages/Contribute/locale/zh-hans')).default,
alert: (await import('../pages/components/Alert/locale/zh-hans')).default,
support,
theming,
contribute,
introduction,
start,
alert,
}
129 changes: 55 additions & 74 deletions docs/pages/Introduction.vue → docs/pages/Introduction/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,41 @@
<template>
<div>
<h1 class="mb-4 text-2xl font-bold">Introduction</h1>
<h1 class="mb-4 text-2xl font-bold">
{{ $t('introduction.title') }}
</h1>
<div
class="flex w-full flex-col rounded border bg-white p-8 dark:border-neutral-700 dark:bg-neutral-800"
>
<p class="dark:text-slate-300">
<i18n-t
keypath="introduction.description"
tag="p"
class="dark:text-slate-300"
>
<b class="dark:text-white">Equal UI</b>
is a design philosophy that focuses on creating user interfaces that are
accessible, intuitive, and easy to use for all users, regardless of
their physical abilities or technological expertise. It involves
creating user interfaces that are visually and functionally consistent
across different devices and platforms, and that are easy to navigate
and use for people with disabilities or special needs. Equal UI aims to
create a more inclusive and equitable user experience for all users, by
designing interfaces that are easy to understand and use for everyone.
</p>
</i18n-t>

<h2 class="my-4 text-lg font-semibold">How it works</h2>
<p>
Every component's template contains tags with variant blocks. This
example shows short version of
<h2 class="my-4 text-lg font-semibold">
{{ $t('introduction.how_works.label') }}
</h2>
<i18n-t keypath="introduction.how_works.content" tag="p">
<it-button
variant="primary-text"
nuxt
to="/components/alert"
target="_blank"
rel="noopener noreferrer"
class="!text-md !inline-block !py-0 !px-1 font-semibold leading-relaxed text-blue-500"
class="!text-md !inline-block !px-1 !py-0 font-semibold leading-relaxed text-blue-500"
>
it-alert
</it-button>
:
</p>
</i18n-t>

<prism
language="html"
class="my-4 rounded border dark:border-neutral-700"
:code="alertCode"
></prism>
<p>
There are a single source of styles in Equal UI. It's the file with
object containing classes for every component. There are 3 different
types:
</p>
<p>{{ $t('introduction.types.title') }}</p>
<ul class="mt-2">
<li>
<it-button
Expand All @@ -50,10 +44,11 @@
target="_blank"
size="big"
rel="noopener noreferrer"
class="!inline-block !py-0 !px-1 font-semibold leading-relaxed text-blue-500"
class="!inline-block !px-1 !py-0 font-semibold leading-relaxed text-blue-500"
>
<strong>Full:</strong>
contains classes for light and dark themes
<i18n-t keypath="introduction.types.type1.description">
<strong>{{ $t('introduction.types.type1.name') }}</strong>
</i18n-t>
</it-button>
</li>
<li>
Expand All @@ -63,10 +58,11 @@
target="_blank"
rel="noopener noreferrer"
size="big"
class="!inline-block !py-0 !px-1 font-semibold leading-relaxed text-blue-500"
class="!inline-block !px-1 !py-0 font-semibold leading-relaxed text-blue-500"
>
<strong>Light:</strong>
contains classes for light theme
<i18n-t keypath="introduction.types.type2.description">
<strong>{{ $t('introduction.types.type2.name') }}</strong>
</i18n-t>
</it-button>
</li>
<li>
Expand All @@ -76,77 +72,65 @@
target="_blank"
size="big"
rel="noopener noreferrer"
class="!inline-block !py-0 !px-1 font-semibold leading-relaxed text-blue-500"
class="!inline-block !px-1 !py-0 font-semibold leading-relaxed text-blue-500"
>
<strong>Dark:</strong>
contains classes for dark theme
<i18n-t keypath="introduction.types.type3.description">
<strong>{{ $t('introduction.types.type3.name') }}</strong>
</i18n-t>
</it-button>
</li>
</ul>

<p class="mt-4">
This is how
<i18n-t keypath="introduction.blocks_title" tag="p" class="mt-4">
<it-button
variant="primary-text"
nuxt
to="/components/alert"
target="_blank"
rel="noopener noreferrer"
class="!text-md !inline-block !py-0 !px-1 font-semibold leading-relaxed text-blue-500"
class="!text-md !inline-block !px-1 !py-0 font-semibold leading-relaxed text-blue-500"
>
it-alert
</it-button>
block looks:
</p>
</i18n-t>

<prism
language="js"
class="my-4 rounded border dark:border-neutral-700"
:code="alertBlockCode"
></prism>

<p>
<i18n-t keypath="introduction.variants.title" tag="p" class="mt-4">
<strong>Base</strong>
contains entries for every major part of the component and applies
permanent classes to them
</p>
<p>
<strong>Variants</strong>
contains entries for every variant of the component. Default variant is
applied by default. Classes in chosen variant applies classes on top of
the
<it-tag variant="primary">base</it-tag>
</p>
</i18n-t>

<p class="mt-4">
To apply variant to the component you need to use
<i18n-t keypath="introduction.variants.usage1.title" tag="p" class="mt-4">
<it-tag variant="primary">variant</it-tag>
prop, it works with every Equal UI component
</p>
</i18n-t>

<prism
language="html"
class="my-4 rounded border dark:border-neutral-700"
:code="usePropCode"
></prism>
<p>Result:</p>
<p>{{ $t('introduction.variants.result') }}</p>
<it-alert variant="primary" title="Example alert">
This is the result component with primary variant
</it-alert>

<p class="mt-4">
Also you can make inline variants via
<i18n-t keypath="introduction.variants.usage2.title" tag="p" class="mt-4">
<it-tag variant="primary">variants</it-tag>
prop. You can use multiple variants at the same time!
</p>
</i18n-t>

<prism
language="html"
class="my-4 rounded border dark:border-neutral-700"
:code="multiVarCode"
></prism>

<p>Result:</p>
<p>{{ $t('introduction.variants.result') }}</p>
<it-alert
:variants="{
'my-variant': {
Expand All @@ -161,41 +145,38 @@
and classes from two variants.
</it-alert>

<p class="mt-4">
Equal UI uses Tailwindcss as a classes provider. But you can use you
your own classes or another utility classes provider if you want.
</p>
<p class="mt-4">{{ $t('introduction.note') }}</p>

<h2 class="my-4 text-lg font-semibold">How to create my own theme?</h2>
<p>
To create your theme please read the
<h2 class="my-4 text-lg font-semibold">
{{ $t('introduction.create_theme.title') }}
</h2>
<i18n-t keypath="introduction.create_theme.step1" tag="p">
<it-button
variant="primary-text"
nuxt
to="/theming"
class="!text-md !inline-block !py-0 !px-1 font-semibold leading-relaxed text-blue-500"
class="!text-md !inline-block !px-1 !py-0 font-semibold leading-relaxed text-blue-500"
>
theming
{{ $t('introduction.create_theme.theme') }}
</it-button>
</p>
</i18n-t>

<p>
Also, do not hesitate to use Customization feature under every component
on it's own page
</p>
<p>{{ $t('introduction.create_theme.step2') }}</p>

<it-divider class="mt-8" />
<div class="flex flex-col justify-center">
<p class="my-4 text-center font-semibold">What's next?</p>
<p class="my-4 text-center font-semibold">
{{ $t('introduction.next.title') }}
</p>
<div class="flex flex-col justify-around gap-4 md:flex-row">
<it-button size="big" nuxt to="/start" variant="primary" class="grow">
Getting started
{{ $t('introduction.next.start') }}
</it-button>
<it-button size="big" nuxt to="/contribute" class="grow">
How to contribute?
{{ $t('introduction.next.contribute') }}
</it-button>
<it-button size="big" nuxt to="/support" class="grow">
Support the project
{{ $t('introduction.next.support') }}
</it-button>
</div>
</div>
Expand Down
Loading

0 comments on commit d4aaa01

Please sign in to comment.