feat: Ukrainian language

.gitignore

@@ -2,3 +2,4 @@ node_modules
 .DS_Store
 .pnpm-debug.log
 .vitepress/dist
+.idea

.vitepress/config.js

@@ -14,6 +14,7 @@ export default {
         {text: 'English', link: '/'},
         {text: '中文简体', link: '/zh/'},
         {text: '日本語（翻訳中）', link: '/ja/'},
+        {text: 'Українська', link: '/uk/'},
       ]
     },
     locales: locales.themeConfig

.vitepress/locales/index.js

@@ -1,16 +1,19 @@
 import en from './en'
 import zh from './zh'
 import ja from './ja'
+import uk from './uk'
 
 export default {
   vitepressConfig: {
     '/': en.vitepressConfig,
     '/zh/': zh.vitepressConfig,
     '/ja/': ja.vitepressConfig,
+    '/uk/': uk.vitepressConfig,
   },
   themeConfig: {
     '/': en.themeConfig,
     '/zh/': zh.themeConfig,
     '/ja/': ja.themeConfig,
+    '/uk/': uk.themeConfig,
   }
 }

.vitepress/locales/uk.js

@@ -0,0 +1,164 @@
+export default {
+  vitepressConfig: {
+    title: 'Міграція з Vue 3',
+    description: 'Гід з міграції з Vue 2 на Vue 3',
+    lang: 'ua-UK'
+  },
+  themeConfig: {
+    docFooter: {
+      prev: 'Попередня сторінка',
+      next: 'Наступна сторінка',
+    },
+    outlineTitle: 'На цій сторінці',
+    nav: [
+      { text: 'Документація по Vue 3', link: 'https://ua.vuejs.org' },
+    ],
+
+    sidebar: [
+      {
+        text: 'Гід',
+        items: [
+          { text: 'Огляд', link: '/uk/' },
+          { text: 'Нові рекомендації', link: '/uk/recommendations' },
+          { text: 'Міграційна збірка', link: '/uk/migration-build' },
+          {
+            text: 'Несумісні зміни',
+            link: '/uk/breaking-changes/'
+          }
+        ]
+      },
+      {
+        text: 'Глобальний API',
+        items: [
+          {
+            text: 'Екземпляр програми глобального API',
+            link: '/uk/breaking-changes/global-api'
+          },
+          {
+            text: 'Глобальний API струшування дерева',
+            link: '/uk/breaking-changes/global-api-treeshaking'
+          }
+        ]
+      },
+      {
+        text: 'Шаблон директив',
+        items: [
+          { text: 'v-model', link: '/uk/breaking-changes/v-model' },
+          {
+            text: 'Зміни використання key',
+            link: '/uk/breaking-changes/key-attribute'
+          },
+          {
+            text: 'Пріоритет v-if проти v-for',
+            link: '/uk/breaking-changes/v-if-v-for'
+          },
+          { text: 'Поведінка злиття v-bind', link: '/uk/breaking-changes/v-bind' },
+          {
+            text: 'Модифікатор v-on.native видалено',
+            link: '/uk/breaking-changes/v-on-native-modifier-removed'
+          }
+        ]
+      },
+      {
+        text: 'Компоненти',
+        items: [
+          {
+            text: 'Функціональні компоненти',
+            link: '/uk/breaking-changes/functional-components'
+          },
+          {
+            text: 'Асинхронні компоненти',
+            link: '/uk/breaking-changes/async-components'
+          },
+          { text: 'Опція emits', link: '/uk/breaking-changes/emits-option' }
+        ]
+      },
+      {
+        text: 'Функції рендерингу',
+        items: [
+          {
+            text: 'API функцій рендерингу',
+            link: '/uk/breaking-changes/render-function-api'
+          },
+          {
+            text: 'Уніфікація слотів',
+            link: '/uk/breaking-changes/slots-unification'
+          },
+          {
+            text: '$listeners об\'єднано з $attrs',
+            link: '/uk/breaking-changes/listeners-removed'
+          },
+          {
+            text: '$attrs включає class & style',
+            link: '/uk/breaking-changes/attrs-includes-class-style'
+          }
+        ]
+      },
+      {
+        text: 'Спеціальні елементи',
+        items: [
+          {
+            text: 'Зміни взаємодії',
+            link: '/uk/breaking-changes/custom-elements-interop'
+          }
+        ]
+      },
+      {
+        text: 'Видалені API',
+        items: [
+          {
+            text: 'Модифікатор v-on keyCode',
+            link: '/uk/breaking-changes/keycode-modifiers'
+          },
+          { text: 'API подій', link: '/uk/breaking-changes/events-api' },
+          { text: 'Фільтри', link: '/uk/breaking-changes/filters' },
+          {
+            text: 'inline-template',
+            link: '/uk/breaking-changes/inline-template-attribute'
+          },
+          { text: '$children', link: '/uk/breaking-changes/children' },
+          { text: 'Опція propsData', link: '/uk/breaking-changes/props-data' }
+        ]
+      },
+      {
+        text: 'Інші незначні зміни',
+        items: [
+          {
+            text: 'Поведінка приведення атрибутів',
+            link: '/uk/breaking-changes/attribute-coercion'
+          },
+          {
+            text: 'Користувацькі директиви',
+            link: '/uk/breaking-changes/custom-directives'
+          },
+          { text: 'Опція Data', link: '/uk/breaking-changes/data-option' },
+          {
+            text: 'Зміни в API монтування',
+            link: '/uk/breaking-changes/mount-changes'
+          },
+          {
+            text: 'Доступ до this в функції реквізитів',
+            link: '/uk/breaking-changes/props-default-this'
+          },
+          {
+            text: 'Зміни класів переходів',
+            link: '/uk/breaking-changes/transition'
+          },
+          {
+            text: 'Transition як кореневий елемент',
+            link: '/uk/breaking-changes/transition-as-root'
+          },
+          {
+            text: 'Transition Group як кореневий елемент',
+            link: '/uk/breaking-changes/transition-group'
+          },
+          {
+            text: 'Події життєвого циклу VNode',
+            link: '/uk/breaking-changes/vnode-lifecycle-events'
+          },
+          { text: 'Спостерігачі за масивами', link: '/uk/breaking-changes/watch' }
+        ]
+      }
+    ]
+  }
+}

.vitepress/theme/MigrationBadges.vue

@@ -19,6 +19,12 @@ const localeBadges = {
     breaking: '破壊的変更',
     removed: '削除',
     updated: '更新'
+  },
+  'ua-UK': {
+    new: 'нове',
+    breaking: 'несумісно',
+    removed: 'видалено',
+    updated: 'змінено'
   }
 }
 

src/uk/VueMastery.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="vue-mastery-link">
+    <a
+      href="https://www.vuemastery.com/migration-guide-cheat-sheet/"
+      target="_blank"
+    >
+      <div class="banner-wrapper">
+        <img
+          class="banner"
+          alt="Vue Mastery banner"
+          width="96px"
+          height="56px"
+          src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vuemastery-graphical-link-96x56.png"
+        />
+      </div>
+      <p class="description">
+        Отримайте безкоштовну шпаргалку з посібника з міграції на <span>VueMastery.com</span>
+      </p>
+      <div class="logo-wrapper">
+        <img
+          alt="Vue Mastery Logo"
+          width="25px"
+          src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vue-mastery-logo.png"
+        />
+      </div>
+    </a>
+  </div>
+</template>
+
+<style>
+.vue-mastery-link {
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  padding: 8px 16px 8px 8px;
+}
+
+.vue-mastery-link a {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+.vue-mastery-link .banner {
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  width: 96px;
+  height: 56px;
+  object-fit: cover;
+}
+
+.vue-mastery-link .description {
+  flex: 1;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  color: #213547;
+  margin: 0 0 0 16px;
+}
+
+.vue-mastery-link .description span {
+  color: #42b883;
+}
+
+.vue-mastery-link .logo-wrapper {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.vue-mastery-link .logo-wrapper img {
+  width: 25px;
+  object-fit: contain;
+}
+
+@media (max-width: 576px) {
+  .vue-mastery-link .banner {
+    width: 56px;
+  }
+
+  .vue-mastery-link .description {
+    font-size: 12px;
+    line-height: 18px;
+  }
+  .vue-mastery-link .logo-wrapper {
+    position: relative;
+    width: 32px;
+    height: 32px;
+  }
+}
+</style>