Merge branch 'main' into fix/i18n-turkish-missing-translations

Author: mrnasil

.gitignore

@@ -40,6 +40,7 @@ test-results/
 # generated files
 shared/types/lexicons
 file-tree-sprite.svg
+public/blog/avatar
 
 **/__screenshots__/**
 

app/components/AuthorList.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import type { Author } from '#shared/schemas/blog'
+import type { ResolvedAuthor } from '#shared/schemas/blog'
 
-const props = defineProps<{
-  authors: Author[]
+defineProps<{
+  authors: ResolvedAuthor[]
   variant?: 'compact' | 'expanded'
 }>()
-
-const { resolvedAuthors } = useBlueskyAuthorProfiles(props.authors)
 </script>
 
 <template>
   <!-- Expanded variant: vertical list with larger avatars -->
   <div v-if="variant === 'expanded'" class="flex flex-wrap items-center gap-4">
-    <div v-for="author in resolvedAuthors" :key="author.name" class="flex items-center gap-2">
+    <div v-for="author in authors" :key="author.name" class="flex items-center gap-2">
       <AuthorAvatar :author="author" size="md" disable-link />
       <div class="flex flex-col">
         <span class="text-sm font-medium text-fg">{{ author.name }}</span>
@@ -34,7 +32,7 @@ const { resolvedAuthors } = useBlueskyAuthorProfiles(props.authors)
   <div v-else class="flex items-center gap-2 min-w-0">
     <div class="flex items-center">
       <AuthorAvatar
-        v-for="(author, index) in resolvedAuthors"
+        v-for="(author, index) in authors"
         :key="author.name"
         :author="author"
         size="md"
@@ -43,7 +41,7 @@ const { resolvedAuthors } = useBlueskyAuthorProfiles(props.authors)
       />
     </div>
     <span class="text-xs text-fg-muted font-mono truncate">
-      {{ resolvedAuthors.map(a => a.name).join(', ') }}
+      {{ authors.map(a => a.name).join(', ') }}
     </span>
   </div>
 </template>

app/components/BlogPostListCard.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { Author } from '#shared/schemas/blog'
+import type { ResolvedAuthor } from '#shared/schemas/blog'
 
 defineProps<{
   /** Authors of the blog post */
-  authors: Author[]
+  authors: ResolvedAuthor[]
   /** Blog Title */
   title: string
   /** Tags such as OpenSource, Architecture, Community, etc. */

app/components/OgImage/BlogPost.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { Author } from '#shared/schemas/blog'
+import type { ResolvedAuthor } from '#shared/schemas/blog'
 
 const props = withDefaults(
   defineProps<{
     title: string
-    authors?: Author[]
+    authors?: ResolvedAuthor[]
     date?: string
     primaryColor?: string
   }>(),
@@ -15,8 +15,6 @@ const props = withDefaults(
   },
 )
 
-const { resolvedAuthors } = useBlueskyAuthorProfiles(props.authors)
-
 const formattedDate = computed(() => {
   if (!props.date) return ''
   try {
@@ -41,17 +39,17 @@ const getInitials = (name: string) =>
     .slice(0, 2)
 
 const visibleAuthors = computed(() => {
-  if (resolvedAuthors.value.length <= 3) return resolvedAuthors.value
-  return resolvedAuthors.value.slice(0, MAX_VISIBLE_AUTHORS)
+  if (props.authors.length <= 3) return props.authors
+  return props.authors.slice(0, MAX_VISIBLE_AUTHORS)
 })
 
 const extraCount = computed(() => {
-  if (resolvedAuthors.value.length <= 3) return 0
-  return resolvedAuthors.value.length - MAX_VISIBLE_AUTHORS
+  if (props.authors.length <= 3) return 0
+  return props.authors.length - MAX_VISIBLE_AUTHORS
 })
 
 const formattedAuthorNames = computed(() => {
-  const allNames = resolvedAuthors.value.map(a => a.name)
+  const allNames = props.authors.map(a => a.name)
   if (allNames.length === 0) return ''
   if (allNames.length === 1) return allNames[0]
   if (allNames.length === 2) return `${allNames[0]} and ${allNames[1]}`
@@ -96,7 +94,7 @@ const formattedAuthorNames = computed(() => {
 
       <!-- Authors -->
       <div
-        v-if="resolvedAuthors.length"
+        v-if="authors.length"
         class="flex items-center gap-4 self-start justify-start flex-nowrap"
         style="font-family: 'Geist', sans-serif"
       >

app/components/Package/Dependencies.vue

@@ -218,8 +218,8 @@ const numberFormatter = useNumberFormatter()
           :key="peer.name"
           class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
         >
-          <div class="flex items-center gap-1 min-w-0 flex-1">
-            <LinkBase :to="packageRoute(peer.name)" class="block truncate" dir="ltr">
+          <div class="flex items-center gap-2 min-w-0 flex-1">
+            <LinkBase :to="packageRoute(peer.name)" class="block max-w-[70%] break-words" dir="ltr">
               {{ peer.name }}
             </LinkBase>
             <TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
@@ -228,7 +228,7 @@ const numberFormatter = useNumberFormatter()
           </div>
           <LinkBase
             :to="packageRoute(peer.name, peer.version)"
-            class="block truncate max-w-[40%]"
+            class="block truncate max-w-[30%]"
             :title="peer.version"
             dir="ltr"
           >
@@ -278,9 +278,9 @@ const numberFormatter = useNumberFormatter()
             optionalDepsExpanded ? undefined : 10,
           )"
           :key="dep"
-          class="flex items-center justify-between py-1 text-sm gap-2"
+          class="flex items-baseline justify-between py-1 text-sm gap-2"
         >
-          <LinkBase :to="packageRoute(dep)" class="block truncate" dir="ltr">
+          <LinkBase :to="packageRoute(dep)" class="block max-w-[80%] break-words" dir="ltr">
             {{ dep }}
           </LinkBase>
           <LinkBase

app/components/Package/Playgrounds.vue

@@ -21,6 +21,7 @@ const providerIcons: Record<string, string> = {
   'svelte-playground': 'i-simple-icons:svelte',
   'tailwind-playground': 'i-simple-icons:tailwindcss',
   'storybook': 'i-simple-icons:storybook',
+  'marko-playground': 'i-simple-icons:marko',
 }
 
 // Map provider id to color class
@@ -39,6 +40,7 @@ const providerColors: Record<string, string> = {
   'svelte-playground': 'text-provider-svelte',
   'tailwind-playground': 'text-provider-tailwind',
   'storybook': 'text-provider-storybook',
+  'marko-playground': 'text-provider-marko',
 }
 
 function getIcon(provider: string): string {

app/components/global/BlogPostWrapper.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import type { BlogPostFrontmatter } from '#shared/schemas/blog'
+import type { RawBlogPostFrontmatter } from '#shared/schemas/blog'
 import { generateBlogTID } from '#shared/utils/atproto'
+import { posts } from '#blog/posts'
 
 const props = defineProps<{
-  frontmatter: BlogPostFrontmatter
+  frontmatter: RawBlogPostFrontmatter
 }>()
 
+const post = computed(() => posts.find(p => p.slug === props.frontmatter.slug))
+
 useSeoMeta({
   title: props.frontmatter.title,
   description: props.frontmatter.description || props.frontmatter.excerpt,
@@ -26,7 +29,7 @@ useHead({
 
 defineOgImageComponent('BlogPost', {
   title: props.frontmatter.title,
-  authors: props.frontmatter.authors,
+  authors: post.value?.authors ?? [],
   date: props.frontmatter.date,
 })
 
@@ -50,9 +53,9 @@ const blueskyPostUri = computed(() => blueskyLink.value?.postUri ?? null)
         </span>
       </div>
     </div>
-    <div v-if="frontmatter.authors" class="mb-12 max-w-prose mx-auto">
+    <div v-if="post?.authors" class="mb-12 max-w-prose mx-auto">
       <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-        <AuthorList :authors="frontmatter.authors" variant="expanded" />
+        <AuthorList :authors="post.authors" variant="expanded" />
       </div>
     </div>
     <article class="max-w-prose mx-auto p-2 prose dark:prose-invert">

i18n/locales/uk-UA.json

@@ -13,10 +13,12 @@
   "trademark_disclaimer": "npm є зареєстрованою торговою маркою npm, Inc. Цей сайт не пов'язаний з npm, Inc.",
   "footer": {
     "about": "про проект",
+    "blog": "Блог",
     "docs": "документація",
     "source": "код",
     "social": "соціальні мережі",
     "chat": "чат",
+    "builders_chat": "розробники",
     "keyboard_shortcuts": "гарячі клавіші"
   },
   "shortcuts": {
@@ -63,7 +65,13 @@
       "org": "організація",
       "view_user_packages": "Переглянути пакети цього користувача",
       "view_org_packages": "Переглянути пакети цієї організації"
-    }
+    },
+    "instant_search": "Миттєвий пошук",
+    "instant_search_on": "увімкнено",
+    "instant_search_off": "вимкнено",
+    "instant_search_turn_on": "увімкнути",
+    "instant_search_turn_off": "вимкнути",
+    "instant_search_advisory": "{label} {state} — {action}"
   },
   "nav": {
     "main_navigation": "Головна",
@@ -77,6 +85,31 @@
     "links": "Посилання",
     "tap_to_search": "Натисніть для пошуку"
   },
+  "blog": {
+    "title": "Блог",
+    "heading": "блог",
+    "meta_description": "Думки та оновлення від спільноти npmx",
+    "author": {
+      "view_profile": "Переглянути профіль {name} у Bluesky"
+    },
+    "draft_badge": "Чернетка",
+    "draft_banner": "Це неопублікована чернетка. Вона може бути неповною або містити неточності.",
+    "atproto": {
+      "view_on_bluesky": "Переглянути у Bluesky",
+      "reply_on_bluesky": "Відповісти у Bluesky",
+      "likes_on_bluesky": "Вподобайки у Bluesky",
+      "like_or_reply_on_bluesky": "Вподобайте цей пост або залиште коментар у Bluesky",
+      "no_comments_yet": "Коментарів поки немає.",
+      "could_not_load_comments": "Не вдалося завантажити коментарі.",
+      "comments": "Коментарі",
+      "loading_comments": "Завантаження коментарів...",
+      "updating": "Оновлення...",
+      "reply_count": "{count} відповідь | {count} відповіді | {count} відповідей",
+      "like_count": "{count} вподобайка | {count} вподобайки | {count} вподобайок",
+      "repost_count": "{count} репост | {count} репости | {count} репостів",
+      "more_replies": "ще {count} відповідь... | ще {count} відповіді... | ще {count} відповідей..."
+    }
+  },
   "settings": {
     "title": "параметри",
     "tagline": "налаштуйте ваше середовище npmx",
@@ -96,6 +129,8 @@
       "algolia": "Algolia",
       "algolia_description": "Використовує Algolia для швидшого пошуку, сторінок організацій та користувачів."
     },
+    "instant_search": "Миттєвий пошук",
+    "instant_search_description": "Переходить на сторінку пошуку та оновлює результати під час введення.",
     "relative_dates": "Відносні дати",
     "include_types": "Включити {'@'}types у встановлення",
     "include_types_description": "Додавайте пакет {'@'}types до команд встановлення для пакетів без типів",
@@ -122,6 +157,13 @@
     "edit_on_github": "Редагувати на GitHub",
     "view_guide": "Керівництво з перекладу"
   },
+  "error": {
+    "401": "Не авторизовано",
+    "404": "Сторінку не знайдено",
+    "500": "Внутрішня помилка сервера",
+    "503": "Сервіс недоступний",
+    "default": "Щось пішло не так"
+  },
   "common": {
     "loading": "Завантаження...",
     "loading_more": "Завантаження ще...",
@@ -399,6 +441,8 @@
       "download_file": "Завантажити {fileType}",
       "toggle_annotator": "Перемкнути анотатор",
       "toggle_stack_mode": "Перемкнути режим стека",
+      "open_options": "Відкрити параметри",
+      "close_options": "Закрити параметри",
       "legend_estimation": "Оцінка",
       "no_data": "Дані недоступні",
       "y_axis_label": "{granularity} {facet}",
@@ -918,6 +962,11 @@
         "description": "Спілкуйтеся в чаті, ставте питання та діліться ідеями.",
         "cta": "Приєднатися до спільноти Discord"
       },
+      "builders": {
+        "title": "Допоможіть розвивати npmx",
+        "description": "Приєднайтесь до розробників, що формують майбутнє npmx.",
+        "cta": "Приєднатися до Discord для розробників"
+      },
       "follow": {
         "title": "Залишайтеся в курсі",
         "description": "Дізнайтеся останні новини про npmx.",
@@ -1099,6 +1148,7 @@
     "file_too_large": "Файл завеликий для порівняння",
     "file_size_warning": "{size} перевищує ліміт 250 КБ для порівняння",
     "compare_versions": "різниця",
+    "compare_versions_title": "Порівняти з останньою версією",
     "summary": "Підсумок",
     "deps_count": "{count} залежн.",
     "dependencies": "Залежності",
@@ -1126,6 +1176,34 @@
     "close_files_panel": "Закрити панель файлів",
     "filter_files_label": "Фільтрувати файли за типом зміни"
   },
+  "pds": {
+    "title": "npmx.social",
+    "meta_description": "Офіційний сервер особистих даних AT Protocol (PDS) для спільноти npmx.",
+    "join": {
+      "title": "Приєднатися до спільноти",
+      "description": "Незалежно від того, чи ви створюєте свій перший акаунт в атмосфері, чи мігруєте наявний — ви тут на своєму місці. Ви можете перенести поточний акаунт, не втрачаючи нікнейм, пости або підписників.",
+      "migrate": "Мігрувати за допомогою PDS MOOver"
+    },
+    "server": {
+      "title": "Деталі сервера",
+      "location_label": "Розташування:",
+      "location_value": "Нюрнберг, Німеччина",
+      "infrastructure_label": "Інфраструктура:",
+      "infrastructure_value": "Розміщено на Hetzner",
+      "privacy_label": "Конфіденційність:",
+      "privacy_value": "Підпадає під суворе законодавство ЄС про захист даних",
+      "learn_more": "Дізнайтесь, як npmx використовує Атмосферу"
+    },
+    "community": {
+      "title": "Хто тут є",
+      "description": "Деякі з {count} акаунтів, що вже вважають npmx.social своїм домом:",
+      "loading": "Завантаження спільноти PDS...",
+      "error": "Не вдалося завантажити спільноту PDS.",
+      "empty": "Немає учасників спільноти для відображення.",
+      "view_profile": "Переглянути профіль {handle}",
+      "new_accounts": "...та ще {count} нових в атмосфері"
+    }
+  },
   "privacy_policy": {
     "title": "політика конфіденційності",
     "last_updated": "Останнє оновлення: {date}",