blog locale

v3/src/components/blog/ListItem.astro

@@ -65,7 +65,9 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
       <div class="mb-1">
         <span class="text-sm">
           <Icon name="tabler:clock" class="w-3.5 h-3.5 inline-block -mt-0.5 dark:text-gray-400" />
-          <time datetime={String(post.publishDate)} class="inline-block">{getFormattedDate(post.publishDate)}</time>
+          <time datetime={String(post.publishDate)} class="inline-block"
+            >{getFormattedDate(post.publishDate, post.lang)}</time
+          >
           {
             post.author && (
               <>
@@ -80,7 +82,7 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
               <>
                 {' '}
                 ·{' '}
-                <a class="hover:underline" href={getPermalink(post.category.slug, 'category')}>
+                <a class="hover:underline" href={getPermalink(post.category.slug, 'category', post.lang)}>
                   {post.category.title}
                 </a>
               </>
@@ -108,7 +110,7 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
     {
       post.tags && Array.isArray(post.tags) ? (
         <footer class="mt-5">
-          <PostTags tags={post.tags} />
+          <PostTags tags={post.tags} lang={post.lang} />
         </footer>
       ) : (
         <Fragment />

v3/src/components/blog/Pagination.astro

@@ -2,15 +2,20 @@
 import { Icon } from 'astro-icon/components';
 import { getPermalink } from '~/utils/permalinks';
 import Button from '~/components/ui/Button.astro';
+import { getBlogCopy } from '@/i18n/blog';
+import type { Lang } from '@/i18n';
 
 export interface Props {
   prevUrl?: string;
   nextUrl?: string;
   prevText?: string;
   nextText?: string;
+  lang?: Lang;
 }
 
-const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } = Astro.props;
+const { lang = Astro.currentLocale as Lang } = Astro.props;
+const copy = getBlogCopy(lang);
+const { prevUrl, nextUrl, prevText = copy.newerPosts, nextText = copy.olderPosts } = Astro.props;
 ---
 
 {

v3/src/components/blog/RelatedPosts.astro

@@ -5,6 +5,7 @@ import { getRelatedPosts } from '~/utils/blog';
 import BlogHighlightedPosts from '../widgets/BlogHighlightedPosts.astro';
 import type { Post } from '~/types';
 import { getBlogPermalink } from '~/utils/permalinks';
+import { getBlogCopy } from '@/i18n/blog';
 
 export interface Props {
   post: Post;
@@ -13,15 +14,16 @@ export interface Props {
 const { post } = Astro.props;
 
 const relatedPosts = post.tags ? await getRelatedPosts(post, 4) : [];
+const copy = getBlogCopy(post.lang);
 ---
 
 {
   APP_BLOG.isRelatedPostsEnabled ? (
     <BlogHighlightedPosts
       classes={{ container: 'pt-0 lg:pt-0 md:pt-0' }}
-      title="Related Posts"
-      linkText="View All Posts"
-      linkUrl={getBlogPermalink()}
+      title={copy.relatedPosts}
+      linkText={copy.viewAllPosts}
+      linkUrl={getBlogPermalink(post.lang)}
       postIds={relatedPosts.map((post) => post.id)}
     />
   ) : null

v3/src/components/blog/SinglePost.astro

@@ -9,6 +9,7 @@ import { getPermalink } from '~/utils/permalinks';
 import { getFormattedDate } from '~/utils/utils';
 
 import type { Post } from '~/types';
+import { getBlogCopy } from '@/i18n/blog';
 
 export interface Props {
   post: Post;
@@ -17,6 +18,7 @@ export interface Props {
 
 const { post, url } = Astro.props;
 const authorName = post.author || 'RustDesk Team';
+const copy = getBlogCopy(post.lang);
 ---
 
 <section class="py-8 sm:py-16 lg:py-20 mx-auto">
@@ -25,13 +27,18 @@ const authorName = post.author || 'RustDesk Team';
       <div class="flex justify-between flex-col sm:flex-row max-w-4xl mx-auto mt-0 mb-2 px-4 sm:px-6 sm:items-center">
         <p>
           <Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-0.5 dark:text-gray-400" />
-          <time datetime={String(post.publishDate)} class="inline-block">{getFormattedDate(post.publishDate)}</time>
+          <time datetime={String(post.publishDate)} class="inline-block"
+            >{getFormattedDate(post.publishDate, post.lang)}</time
+          >
           {
             post.updateDate && (
               <>
                 {' '}
                 · <Icon name="tabler:refresh" class="w-4 h-4 inline-block -mt-0.5 dark:text-gray-400" />
-                <span class="inline-block text-sm text-gray-500">Updated: <time datetime={String(post.updateDate)}>{getFormattedDate(post.updateDate)}</time></span>
+                <span class="inline-block text-sm text-gray-500">
+                  {copy.updated}:{' '}
+                  <time datetime={String(post.updateDate)}>{getFormattedDate(post.updateDate, post.lang)}</time>
+                </span>
               </>
             )
           }
@@ -43,7 +50,7 @@ const authorName = post.author || 'RustDesk Team';
               <>
                 {' '}
                 ·{' '}
-                <a class="hover:underline inline-block" href={getPermalink(post.category.slug, 'category')}>
+                <a class="hover:underline inline-block" href={getPermalink(post.category.slug, 'category', post.lang)}>
                   {post.category.title}
                 </a>
               </>
@@ -52,7 +59,7 @@ const authorName = post.author || 'RustDesk Team';
           {
             post.readingTime && (
               <>
-                &nbsp;· <span>{post.readingTime}</span> min read
+                &nbsp;· <span>{post.readingTime}</span> {copy.minRead}
               </>
             )
           }
@@ -96,8 +103,13 @@ const authorName = post.author || 'RustDesk Team';
       <slot />
     </div>
     <div class="mx-auto px-6 sm:px-6 max-w-4xl mt-8 flex justify-between flex-col sm:flex-row">
-      <PostTags tags={post.tags} class="mr-5 rtl:mr-0 rtl:ml-5" />
-      <SocialShare url={url} text={post.title} class="mt-5 sm:mt-1 align-middle text-gray-500 dark:text-slate-600" />
+      <PostTags tags={post.tags} lang={post.lang} class="mr-5 rtl:mr-0 rtl:ml-5" />
+      <SocialShare
+        url={url}
+        text={post.title}
+        label={copy.share}
+        class="mt-5 sm:mt-1 align-middle text-gray-500 dark:text-slate-600"
+      />
     </div>
   </article>
 </section>

v3/src/components/blog/Tags.astro

@@ -3,15 +3,23 @@ import { getPermalink } from '~/utils/permalinks';
 
 import { APP_BLOG } from 'astrowind:config';
 import type { Post } from '~/types';
+import type { Lang } from '@/i18n';
 
 export interface Props {
   tags: Post['tags'];
   class?: string;
   title?: string | undefined;
   isCategory?: boolean;
+  lang?: Lang;
 }
 
-const { tags, class: className = 'text-sm', title = undefined, isCategory = false } = Astro.props;
+const {
+  tags,
+  class: className = 'text-sm',
+  title = undefined,
+  isCategory = false,
+  lang = Astro.currentLocale as Lang,
+} = Astro.props;
 ---
 
 {
@@ -31,7 +39,7 @@ const { tags, class: className = 'text-sm', title = undefined, isCategory = fals
               tag.title
             ) : (
               <a
-                href={getPermalink(tag.slug, isCategory ? 'category' : 'tag')}
+                href={getPermalink(tag.slug, isCategory ? 'category' : 'tag', lang)}
                 class="text-muted dark:text-slate-300 hover:text-primary dark:hover:text-gray-200"
               >
                 {tag.title}

v3/src/components/blog/ToBlogLink.astro

@@ -1,20 +1,28 @@
 ---
 import { Icon } from 'astro-icon/components';
 import { getBlogPermalink } from '~/utils/permalinks';
-import { I18N } from 'astrowind:config';
 import Button from '~/components/ui/Button.astro';
+import { getBlogCopy } from '@/i18n/blog';
+import { LOCALES, type Lang } from '@/i18n';
 
-const { textDirection } = I18N;
+export interface Props {
+  lang?: Lang;
+}
+
+const { lang = Astro.currentLocale as Lang } = Astro.props;
+const copy = getBlogCopy(lang);
+const textDirection = LOCALES[lang]?.dir || 'ltr';
 ---
 
 <div class="mx-auto px-6 sm:px-6 max-w-4xl pt-8 md:pt-4 pb-12 md:pb-20">
-  <Button variant="tertiary" class="px-3 md:px-3" href={getBlogPermalink()}>
+  <Button variant="tertiary" class="px-3 md:px-3" href={getBlogPermalink(lang)}>
     {
       textDirection === 'rtl' ? (
         <Icon name="tabler:chevron-right" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
       ) : (
         <Icon name="tabler:chevron-left" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
       )
-    } Back to Blog
+    }
+    {copy.backToBlog}
   </Button>
 </div>

v3/src/components/common/SocialShare.astro

@@ -4,14 +4,15 @@ import { Icon } from 'astro-icon/components';
 export interface Props {
   text: string;
   url: string | URL;
+  label?: string;
   class?: string;
 }
 
-const { text, url, class: className = 'inline-block' } = Astro.props;
+const { text, url, label = 'Share', class: className = 'inline-block' } = Astro.props;
 ---
 
 <div class={className}>
-  <span class="align-super font-bold text-slate-500 dark:text-slate-400">Share:</span>
+  <span class="align-super font-bold text-slate-500 dark:text-slate-400">{label}:</span>
   <button
     class="ml-2 rtl:ml-0 rtl:mr-2"
     title="Twitter Share"

v3/src/components/widgets/Announcement.astro

@@ -1,14 +1,28 @@
 ---
+import type { Lang } from '@/i18n';
+import { getBlogCopy } from '@/i18n/blog';
+import { findLatestPosts } from '~/utils/blog';
+import { getPermalink } from '~/utils/permalinks';
+
+export interface Props {
+  lang?: Lang;
+}
+
+const { lang = Astro.currentLocale as Lang } = Astro.props;
+const [post] = await findLatestPosts({ count: 1, lang });
+const copy = getBlogCopy(lang);
+const href = post ? getPermalink(post.permalink, 'post') : '';
+---
 
----
-
-<div
-  class="dark text-muted text-sm bg-black dark:bg-transparent dark:border-b dark:border-slate-800 dark:text-slate-400 hidden md:flex gap-1 overflow-hidden px-3 py-2 relative text-ellipsis whitespace-nowrap justify-center items-center"
->
-  <span class="bg-secondary text-slate-300 font-semibold px-1 py-0.5 text-xs mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-block"
-    >NEW</span
-  >
-  <a href="/blog/2025/02/enhanced-acl-in-rustdesk-server-pro-1-5-0" class="text-muted hover:underline dark:text-slate-400 font-medium"
-    >Enhanced ACL in RustDesk Server Pro 1.5.0! »</a
-  >
-</div>
+{
+  post && (
+    <div class="dark text-muted text-sm bg-black dark:bg-transparent dark:border-b dark:border-slate-800 dark:text-slate-400 hidden md:flex gap-1 overflow-hidden px-3 py-2 relative text-ellipsis whitespace-nowrap justify-center items-center">
+      <span class="bg-secondary text-slate-300 font-semibold px-1 py-0.5 text-xs mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-block">
+        {copy.newPost}
+      </span>
+      <a href={href} class="text-muted hover:underline dark:text-slate-400 font-medium">
+        {post.title} »
+      </a>
+    </div>
+  )
+}

v3/src/components/widgets/BlogLatestPosts.astro

@@ -8,6 +8,8 @@ import { findLatestPosts } from '~/utils/blog';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
 import type { Widget } from '~/types';
 import Button from '../ui/Button.astro';
+import { getBlogCopy } from '@/i18n/blog';
+import type { Lang } from '@/i18n';
 
 export interface Props extends Widget {
   title?: string;
@@ -17,10 +19,12 @@ export interface Props extends Widget {
   count?: number;
 }
 
+const lang = Astro.currentLocale as Lang;
+const copy = getBlogCopy(lang);
 const {
   title = await Astro.slots.render('title'),
-  linkText = 'View all posts',
-  linkUrl = getBlogPermalink(),
+  linkText = copy.viewAllPosts,
+  linkUrl = getBlogPermalink(lang),
   information = await Astro.slots.render('information'),
   count = 4,
 
@@ -30,7 +34,7 @@ const {
   bg = await Astro.slots.render('bg'),
 } = Astro.props;
 
-const posts = APP_BLOG.isEnabled ? await findLatestPosts({ count }) : [];
+const posts = APP_BLOG.isEnabled ? await findLatestPosts({ count, lang }) : [];
 ---
 
 {

v3/src/components/widgets/Header.astro

@@ -4,12 +4,12 @@ import Logo from '~/components/Logo.astro';
 import ToggleTheme from '~/components/common/ToggleTheme.astro';
 import ToggleMenu from '~/components/common/ToggleMenu.astro';
 import Button from '~/components/ui/Button.astro';
-import { getLocalPath } from '@/i18n';
+import { getLocalPath, type Lang } from '@/i18n';
 
 import { getHomePermalink } from '~/utils/permalinks';
 import { trimSlash, getAsset } from '~/utils/permalinks';
 import type { CallToAction } from '~/types';
-import { getLocalePaths, LOCALES, DEFAULT_LOCALE } from '@/i18n';
+import { getLocalePaths, LOCALES, DEFAULT_LOCALE, type LocalePath } from '@/i18n';
 
 interface Link {
   text?: string;
@@ -34,6 +34,8 @@ export interface Props {
   position?: string;
   showGithubStar?: boolean;
   i18n?: boolean;
+  lang?: Lang;
+  localePaths?: LocalePath[];
 }
 
 const {
@@ -48,9 +50,13 @@ const {
   showGithubStar = false,
   position = 'center',
   i18n = false,
+  lang: pageLocale,
+  localePaths,
 } = Astro.props;
 
 const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
+const languagePaths = localePaths ?? getLocalePaths(Astro.url);
+const locale = pageLocale || (Astro.currentLocale as Lang);
 ---
 
 <header
@@ -77,7 +83,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
     ]}
   >
     <div class:list={[{ 'mr-auto rtl:mr-0 rtl:ml-auto': position === 'right' }, 'flex justify-between']}>
-      <a class="flex items-center" href={getHomePermalink(getLocalPath(Astro.currentLocale || '', '/'))}>
+      <a class="flex items-center" href={getHomePermalink(getLocalPath(locale || '', '/'))}>
         <Logo />
       </a>
       <div class="flex items-center md:hidden">
@@ -156,23 +162,25 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
                   id="languages"
                   class="md:mt-12 hidden bg-white dark:bg-dark dropdown-menu md:backdrop-blur-md dark:md:bg-dark rounded absolute pl-4 md:pl-0 font-medium md:bg-white/90 md:min-w-[200px] drop-shadow-xl"
                 >
-                  {getLocalePaths(Astro.url).map(({ path, lang }) => {
+                  {languagePaths.map(({ path, lang }) => {
                     let path2 = path.replace(/\/$/, '');
                     if (path2.indexOf('/' + DEFAULT_LOCALE) === 0) {
-                      path2 = path2 + '?lang=en';
+                      path2 = path2.replace('/' + DEFAULT_LOCALE, '');
                     }
-                    path2 = path2.replace('/' + DEFAULT_LOCALE, '');
                     if (!path2) {
                       path2 = '/';
                     } else if (path2[0] != '/') {
                       path2 = '/' + path2;
                     }
+                    if (lang === DEFAULT_LOCALE) {
+                      path2 += `${path2.includes('?') ? '&' : '?'}lang=en`;
+                    }
                     return (
                       <li>
                         <a
                           class:list={[
                             'first:rounded-t last:rounded-b md:hover:bg-gray-100 hover:text-link dark:hover:text-white dark:hover:bg-gray-700 py-2 px-5 block whitespace-no-wrap',
-                            { 'text-primary': lang === Astro.currentLocale },
+                            { 'text-primary': lang === locale },
                           ]}
                           href={path2}
                         >