translate home page

Author: Abdelaziz18003

.vitepress/theme/components/Home.vue

@@ -11,20 +11,19 @@ onMounted(async () => {
 </script>
 
 <template>
-  <section id="hero">
+  <section id="hero" dir="rtl">
     <h1 class="tagline">
-      The
-      <span class="accent">Progressive</span>
-      <br />JavaScript Framework
+      إطار جافاسكريبت
+      <br />
+      <span class="accent">التقدمي</span>
     </h1>
     <p class="description">
-      An approachable, performant and versatile framework for building web
-      user interfaces.
+      .إطار عمل سهل وقوي ومتعدد الإستعمالات لبناء واجهات الويب
     </p>
     <p class="actions">
       <vue-mastery-modal />
       <a class="get-started" href="/guide/introduction.html">
-        Get Started
+        البدء
         <svg
           class="icon"
           xmlns="http://www.w3.org/2000/svg"
@@ -37,17 +36,20 @@ onMounted(async () => {
           />
         </svg>
       </a>
-      <a class="setup" href="/guide/quick-start.html">Install</a>
+      <a class="setup" href="/guide/quick-start.html">التنصيب</a>
     </p>
   </section>
 
-  <section id="special-sponsor">
-    <span class="lead">Special Sponsor</span>
+  <section id="special-sponsor" dir="rtl">
+    <span class="lead">الراعي المميز</span>
     <template v-if="data && data.special">
       <template v-for="{ url, img, name, description } of data.special">
         <a :href="url" target="_blank" rel="sponsored noopener">
           <picture v-if="img.endsWith('png')">
-            <source type="image/avif" :srcset="`${base}/images/${img.replace(/\.png$/, '.avif')}`" />
+            <source
+              type="image/avif"
+              :srcset="`${base}/images/${img.replace(/\.png$/, '.avif')}`"
+            />
             <img :src="`${base}/images/${img}`" :alt="name" />
           </picture>
           <img v-else :src="`${base}/images/${img}`" :alt="name" />
@@ -57,34 +59,33 @@ onMounted(async () => {
     </template>
   </section>
 
-  <section id="highlights" class="vt-box-container">
+  <section id="highlights" dir="rtl" class="vt-box-container">
     <div class="vt-box">
-      <h2>Approachable</h2>
+      <h2>سهل</h2>
       <p>
-        Builds on top of standard HTML, CSS and JavaScript with intuitive
-        API and world-class documentation.
+        بُني باستخدام HTML و CSS و جافاسكريبت مع واجهة برمجية سهلة وتوثيق
+        رسمي بمعايير عالمية.
       </p>
     </div>
     <div class="vt-box">
-      <h2>Performant</h2>
+      <h2>قوي</h2>
       <p>
-        Truly reactive, compiler-optimized rendering system that rarely
-        requires manual optimization.
+        تفاعلي وذو نظام عرض محسن تلقائيا قلّما يحتاج إلى التدخل اليدوي.
       </p>
     </div>
     <div class="vt-box">
-      <h2>Versatile</h2>
+      <h2>متعدد الإستعمالات</h2>
       <p>
-        A rich, incrementally adoptable ecosystem that scales between a
-        library and a full-featured framework.
+        نظام غني وقابل للتبنّي التدريجي، يمكن استعماله كمكتبة برمجية أو
+        كإطار عمل متكامل.
       </p>
     </div>
   </section>
 
-  <section id="sponsors">
-    <h2>Platinum Sponsors</h2>
+  <section id="sponsors" dir="rtl">
+    <h2>الرعاة البلاتينيون</h2>
     <SponsorsGroup tier="platinum" placement="landing" />
-    <h2>Gold Sponsors</h2>
+    <h2>الرعاة الذهبيون</h2>
     <SponsorsGroup tier="gold" placement="landing" />
   </section>
 
@@ -138,7 +139,7 @@ html:not(.dark) .accent,
 }
 
 .actions .get-started {
-  margin-right: 18px;
+  margin-left: 18px;
 }
 
 .actions .icon {
@@ -148,14 +149,15 @@ html:not(.dark) .accent,
   margin-left: 2px;
   fill: currentColor;
   transition: transform 0.2s;
+  transform: rotateY(180deg);
 }
 
 .actions .get-started:hover {
   transition-duration: 0.2s;
 }
 
 .actions .get-started:hover .icon {
-  transform: translateX(2px);
+  transform: translateX(-2px) rotateY(180deg);
 }
 
 .actions .get-started,
@@ -191,7 +193,7 @@ html:not(.dark) .accent,
 }
 
 #special-sponsor span:first-child {
-  text-align: right;
+  text-align: left;
 }
 
 #special-sponsor a {

.vitepress/theme/components/NewsLetter.vue

@@ -3,9 +3,9 @@ import { VTLink } from '@vue/theme'
 </script>
 
 <template>
-  <section id="newsletter" class="NewsLetter">
+  <section id="newsletter" dir="rtl" class="NewsLetter">
     <div class="container">
-      <h2 class="title">Subscribe to our weekly newsletter.</h2>
+      <h2 class="title">سجّل في نشرتنا الإخبارية الأسبوعية</h2>
 
       <div class="form">
         <form
@@ -22,7 +22,7 @@ import { VTLink } from '@vue/theme'
             id="member_email"
             name="member[email]"
             type="email"
-            placeholder="Email address"
+            placeholder="البريد الإلكتروني"
             required
           />
 
@@ -39,14 +39,16 @@ import { VTLink } from '@vue/theme'
       </div>
 
       <p class="help">
-        You can read the previous issues and listen to our podcast at
-        <VTLink
-          class="link"
-          href="https://news.vuejs.org/"
-          no-icon
-        >news.vuejs.org</VTLink>. You may also go social at
-        <VTLink class="link" href="https://twitter.com/vuejs" no-icon>Twitter</VTLink>, or join our home at
-        <VTLink class="link" href="https://chat.vuejs.org/" no-icon>Discord</VTLink>.
+        يمكنك قراءة الأعداد السابقة والإستماع إلى البودكاست من
+        <VTLink class="link" href="https://news.vuejs.org/" no-icon
+          >news.vuejs.org</VTLink
+        >. تستطيع متابعتنا على
+        <VTLink class="link" href="https://twitter.com/vuejs" no-icon
+          >Twitter</VTLink
+        >, أو الانضمام إلينا على
+        <VTLink class="link" href="https://chat.vuejs.org/" no-icon
+          >Discord</VTLink
+        >.
       </p>
     </div>
   </section>

.vitepress/theme/components/VueMasteryModal.vue

@@ -20,6 +20,7 @@ watch(
     class="why-vue"
     @click="showWhyVue = true"
     href="javascript:;"
+    dir="rtl"
   >
     <svg
       class="icon-play"
@@ -33,13 +34,10 @@ watch(
         d="M50,3.8C24.5,3.8,3.8,24.5,3.8,50S24.5,96.2,50,96.2S96.2,75.5,96.2,50S75.5,3.8,50,3.8z M71.2,53.3l-30.8,18  c-0.6,0.4-1.3,0.5-1.9,0.5c-0.6,0-1.3-0.1-1.9-0.5c-1.2-0.6-1.9-1.9-1.9-3.3V32c0-1.4,0.8-2.7,1.9-3.3c1.2-0.6,2.7-0.6,3.8,0  l30.8,18c1.2,0.6,1.9,1.9,1.9,3.3S72.3,52.7,71.2,53.3z"
       ></path>
     </svg>
-    Why Vue
+    لماذا Vue
   </a>
   <Teleport v-if="showWhyVue" to="body">
-    <div
-      @click="showWhyVue = false"
-      class="vuemastery-modal-mask"
-    >
+    <div @click="showWhyVue = false" class="vuemastery-modal-mask">
       <div class="vuemastery-modal-wrapper">
         <div class="vuemastery-modal-container">
           <div class="vuemastery-modal-content">
@@ -73,7 +71,8 @@ watch(
                 title="Vue.js Courses on Vue Mastery"
               >
                 Vue Mastery.</a
-              > Watch Vue Mastery’s free
+              >
+              Watch Vue Mastery’s free
               <a
                 href="https://www.vuemastery.com/courses/intro-to-vue-3/intro-to-vue3"
                 target="_blank"
@@ -100,7 +99,7 @@ watch(
   font-weight: 600;
   background-color: var(--vt-c-green);
   color: #fff;
-  margin-right: 18px;
+  margin-left: 18px;
   padding: 8px 1em 8px 3em;
 }