vuejs · 3imed-jaberi · Sep 2, 2019 · Sep 22, 2019 · Sep 22, 2019 · Sep 22, 2019
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
+
 .DS_Store
 Thumbs.db
 db.json
@@ -7,3 +8,5 @@ public/
 .deploy*/
 src/_drafts
 package-lock.json
+.idea
+.cache
diff --git a/README.md b/README.md
@@ -21,12 +21,9 @@ Translations for this documentation project are currently maintained in separate
 
 ### Arabic
 
-Arabic translation is maintained by [Interstellar Club](https://github.com/InterstellarClub)
+Arabic translation is maintained by [Vue.js AR](https://github.com/vuejs-ar)
 
-* Translation Repo - [/interstellarClub/ar.vuejs.org](https://github.com/interstellarClub/ar.vuejs.org)
-* Primary Maintainers :
-    * [Ilyes Chouia](https://github.com/celyes)
-    * [Ahmed Aissaoui](https://github.com/Aissaoui-Ahmed)
+* Translation Repo - [/vuejs-ar/ar.vuejs.org](https://github.com/vuejs-ar/ar.vuejs.org)
 
 ### French
 

diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs
@@ -13,13 +13,13 @@
     </div><div class="right">
       <h2 class="vue">Vue.js</h2>
       <h1>
-        The Progressive<br>JavaScript Framework
+         إطار جافاسكريبت <br/> مـتـكـامـل
       </h1>
       <p>
         <a id="modal-player" class="button has-icon" href="javascript:;">
           <%- partial('icons/play') %>
-          WHY VUE.JS?</a>
-        <a class="button white" href="<%- url_for("/v2/guide/") %>">GET STARTED</a>
+          لماذا VUE.JS ؟</a>
+        <a class="button white" href="<%- url_for("/v2/guide/") %>">إبدأ</a>
         <a class="button gray has-icon" href="https://github.com/vuejs/vue" target="_blank">
           <%- partial('icons/github-dark') %>
           GITHUB</a>
@@ -29,33 +29,34 @@
 </div>
 
 <div id="special-sponsor">
-  <h3>Special Sponsor</h3>
+  <h3>كفيلنا المميز</h3>
   <% var specialSponsor = theme.special_sponsors[0]; %>
   <a href="<%- specialSponsor.url %>" target="_blank">
     <img src="<%- url_for(`/images/${specialSponsor.img}`) %>" style="width:160px" alt="Code.xyz Logo">
     <br>
-    <span><%- specialSponsor.description %></span>
+    <!-- <%- specialSponsor.description %> -->
+    <span>بناء واجهات برمجة التطبيقات التي تحتاجها في دقائق بدلا من أيام ، مجانا.</span>
   </a>
 </div>
 
 <div id="highlights">
   <div class="inner">
     <div class="point">
-      <h2>Approachable</h2>
-      <p>Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!</p>
+      <h2>إعتيادي</h2>
+      <p>هل تعرف بالفعل HTML و CSS و JavaScript؟ إقرأ الدليل وإبدء في بناء مشاريعك في أي وقت من الأوقات!</p>
     </div>
 
     <div class="point">
-      <h2>Versatile</h2>
-      <p>An incrementally adoptable ecosystem that scales between a library and a full-featured framework.</p>
+      <h2>متعدد الاستعمالات</h2>
+      <p>نظام شامل يخول لك الإستعمال سواء كمكتبة او كإطار عمل متكامل.</p>
     </div>
 
     <div class="point">
-      <h2>Performant</h2>
+      <h2>ذو أداء عالي</h2>
       <p>
-        20KB min+gzip Runtime<br>
-        Blazing Fast Virtual DOM<br>
-        Minimal Optimization Efforts
+        الحجم في وقت التنفيذ 20 كيلوبايت<br>
+        نظام Virtual DOM سريع جدا<br>
+        الحد الأدنى من الجهد الأمثل
       </p>
     </div>
   </div>
@@ -69,7 +70,7 @@
 
 <div id="news">
   <div class="inner">
-    <h3><label for="member_email">Subscribe to our Weekly Newsletter</label></h3>
+    <h3><label for="member_email">إشترك في نشرتنا الإخبارية الأسبوعية</label></h3>
     <form
       class="newsletter-form"
       id="revue-form"
@@ -85,18 +86,18 @@
         name="member[email]"
         id="member_email"
         required
-        placeholder="Email address"
+        placeholder="عنوان البريد الإلكتروني"
       >
       <input
         class="button newsletter-button"
         type="submit"
-        value="Subscribe"
+        value="إشترك"
         name="member[subscribe]"
         id="member_submit"
       >
     </form>
     <p>
-      You can read the previous issues and listen to our podcast at <a href="https://news.vuejs.org" target="_blank">news.vuejs.org</a>.
+      يمكنك قراءة الإصدارات السابقة والاستماع إلى البودكاست الخاص بنا على <a href="https://news.vuejs.org" target="_blank">news.vuejs.org</a>.
     </p>
   </div>
 </div>
@@ -113,8 +114,8 @@
       <%- partial('icons/medium') %>
     </a>
   </p>
-  <p>Released under the <a href="https://opensource.org/licenses/MIT" target="_blank">MIT License</a><br>
-  Copyright &copy; 2014-<%- new Date().getFullYear() %> Evan You</p>
+  <p>صدر تحت <a href="https://opensource.org/licenses/MIT" target="_blank">رخصة MIT</a><br>
+  حقوق النشر &copy; 2014-<%- new Date().getFullYear() %> Evan You</p>
 </div>
 
 <div id="video-modal" class="modal">

diff --git a/themes/vue/layout/partials/header.ejs b/themes/vue/layout/partials/header.ejs
@@ -1,9 +1,9 @@
 <div id="header">
+  <ul id="nav">
+    <%- partial('partials/main_menu', { context: 'nav' }) %>
+  </ul>
   <a id="logo" href="<%- url_for("/") %>">
     <img src="<%- url_for("/images/logo.png") %>" alt="vue logo">
     <span>Vue.js</span>
   </a>
-  <ul id="nav">
-    <%- partial('partials/main_menu', { context: 'nav' }) %>
-  </ul>
 </div>
diff --git a/themes/vue/layout/partials/main_menu.ejs b/themes/vue/layout/partials/main_menu.ejs
@@ -1,12 +1,14 @@
-<li>
-  <form id="search-form">
-    <input type="text" id="search-query-<%- context %>" class="search-query st-default-search-input">
-  </form>
-</li>
+
 <%- partial('partials/learn_dropdown') %>
 <%- partial('partials/ecosystem_dropdown') %>
 <li>
   <a href="<%- url_for("/v2/guide/team.html") %>" class="nav-link team<%- page.path.match(/team\.html/) ? ' current' : '' %>">Team</a>
 </li>
 <%- partial('partials/support_vue_dropdown') %>
 <%- partial('partials/language_dropdown') %>
+
+<li>
+  <form id="search-form">
+    <input type="text" id="search-query-<%- context %>" class="search-query st-default-search-input">
+  </form>
+</li>
diff --git a/themes/vue/layout/partials/sponsors.ejs b/themes/vue/layout/partials/sponsors.ejs
@@ -1,4 +1,4 @@
-<h3>Patreon Sponsors</h3>
+<h3>كفيل باتريون (Patreon)</h3>
 
 <%_ for (const sponsor of theme.platinum_sponsors) {_%>
 <a href="<%- sponsor.url %>" target="_blank" style="width: 160px;">
@@ -14,17 +14,17 @@
 <%_ } _%>
 <br>
 
-<a class="become-sponsor button white" href="<%- url_for("/support-vuejs/") %>">Become a Sponsor!</a>
+<a class="become-sponsor button white" href="<%- url_for("/support-vuejs/") %>">   كن كفيل!   </a>
 
 <div class="open-collective-sponsors">
-  <h3>OpenCollective Sponsors</h3>
-  <h4>Platinum</h4>
+  <h3>الكفلاء المنفتحون</h3>
+  <h4>بلاتين</h4>
   <%_ for (let i = 0; i < 2; i++) {_%>
   <a href="https://opencollective.com/vuejs/tiers/platinum-sponsors/<%- i %>/website" target="_blank">
     <img src="https://opencollective.com/vuejs/tiers/platinum-sponsors/<%- i %>/avatar.svg">
   </a>
   <%_ } _%>
-  <h4>Gold</h4>
+  <h4>ذهب</h4>
   <%_ for (let i = 0; i < 8; i++) {_%>
   <a href="https://opencollective.com/vuejs/tiers/gold-sponsors/<%- i %>/website" target="_blank">
     <img src="https://opencollective.com/vuejs/tiers/gold-sponsors/<%- i %>/avatar.svg">

diff --git a/themes/vue/source/css/_ad.styl b/themes/vue/source/css/_ad.styl
@@ -5,7 +5,7 @@
   position: fixed
   z-index: 99
   bottom: 10px
-  right: 10px
+  left: 10px
   padding: 10px
   background-color: #fff
   border-radius: 3px

diff --git a/themes/vue/source/css/_common.styl b/themes/vue/source/css/_common.styl
@@ -41,6 +41,8 @@ code
   margin: 0 2px
   border-radius: 2px
   white-space: nowrap
+  text-align: left
+  direction: ltr
 
 em
   color: $light
@@ -63,7 +65,7 @@ input.button
     text-indent: 1.4em;
     > svg
       position: absolute
-      left: 0.4em
+      right: 0.4em
       top: 0.4em
       width: 2em
   &.white
@@ -79,7 +81,9 @@ input.button
   z-index: 1
   padding: 0 60px 30px
   overflow-x: hidden
-
+  text-align: right
+  direction: rtl
+
 #nav
   .nav-link
     cursor: pointer
@@ -101,7 +105,7 @@ input.button
     overflow-y: auto
     position: absolute
     top: 100%
-    right: -15px
+    left: -20px
     background-color: #fff
     padding: 10px 0
     border: 1px solid #ddd

diff --git a/themes/vue/source/css/_demo.styl b/themes/vue/source/css/_demo.styl
@@ -9,6 +9,9 @@
   -ms-user-select: none
   user-select: none
   overflow-x: auto
+  &.ltr
+    text-align: left
+    direction: ltr
   h1
     margin: 0 0 .5em
     font-size: 1.8em

diff --git a/themes/vue/source/css/_header.styl b/themes/vue/source/css/_header.styl
@@ -30,7 +30,7 @@ body.docs
   margin: 0
   padding: 0
   position: absolute
-  right: 30px
+  left: 80px
   top: $heading-padding-vertical
   height: $header-height
   line-height: $header-height
@@ -42,6 +42,7 @@ body.docs
     margin: 0 .6em
 
   .nav-dropdown
+    text-align: right
     .nav-link
       &:hover, &.current
         border-bottom: none
@@ -93,7 +94,7 @@ body.docs
   color: $dark
   outline: none
   border-radius: 15px
-  margin-right: 10px
+  margin-left: 10%
   transition: border-color .2s ease
   background: #fff url(../images/search.png) 8px 5px no-repeat
   background-size: 20px
@@ -108,9 +109,11 @@ body.docs
   color: $dark
   font-family: $logo-font
   font-weight: 500
+  position: absolute
+  left: 80%
   img
     vertical-align: middle
-    margin-right: 6px
+    margin-left: 6px
     width: $header-height
     height: $header-height
 

diff --git a/themes/vue/source/css/_scrimba.styl b/themes/vue/source/css/_scrimba.styl
@@ -7,15 +7,18 @@
   a
     color #486491 !important
     position relative
-    padding-left 36px
+    padding-right 36px
+    display block
+    font-weight normal !important
+    line-height 25px
     &:before
       content ''
       position absolute
       display block
       width 30px
       height 30px
       top -5px
-      left -4px
+      right -4px
       border-radius 50%
       background-color #73abfe
     &:after
@@ -25,7 +28,7 @@
       width 0
       height 0
       top 5px
-      left 8px
+      right 6px
       border-top 5px solid transparent
       border-bottom 5px solid transparent
       border-left 8px solid #fff
diff --git a/themes/vue/source/css/_sidebar.styl b/themes/vue/source/css/_sidebar.styl
@@ -2,9 +2,11 @@
 
 .sidebar
   position: absolute
+  direction: ltr
+  border-left: solid 1px #eee
   z-index: 10
   top: $header-height
-  left: 0
+  right: 0
   bottom: 0
   overflow-x: hidden
   overflow-y: auto
@@ -20,13 +22,15 @@
   li
     margin-top: .5em
   .sidebar-inner
+    direction rtl
     width: 260px
-    padding: $content-padding-top + 40px 0px 60px 20px
+    padding: $content-padding-top + 40px 20px 60px 0px
   .version-select
     vertical-align: middle
     margin-left: 5px
   .menu-root
     padding-left: 0
+    padding-inline-start: 0
   .sidebar-link
     color: $light
     &.current
@@ -63,19 +67,21 @@
       margin: 0
 
 @media screen and (max-width: 900px)
+  #ad
+    display: none
   .sidebar
     position: fixed
     z-index: 10
     background-color: #f9f9f9
     height: 100%
     top: 0
-    left: 0
+    right: 0
     box-shadow: 0 0 10px rgba(0,0,0,.2)
     transition: all .4s cubic-bezier(0.4, 0, 0, 1)
-    -webkit-transform: translate(-280px, 0)
-    transform: translate(-280px, 0)
+    -webkit-transform: translate(280px, 0)
+    transform: translate(280px, 0)
     .sidebar-inner
-      padding: 50px 10px 10px 20px
+      padding: 10px 10px 10px 20px
       box-sizing: border-box
     .sidebar-inner-index
       padding: 10px 10px 10px 20px
@@ -87,6 +93,11 @@
     &.open
       -webkit-transform: translate(0, 0)
       transform: translate(0, 0)
+      padding-inline-start: 10px
+    ul
+      padding-inline-start: 10px
+    div.list
+      display: none
 
 @media print
   .sidebar

diff --git a/themes/vue/source/css/_sponsors-index.styl b/themes/vue/source/css/_sponsors-index.styl
@@ -1,4 +1,5 @@
 #sponsors
+  direction: rtl
   text-align: center
   padding: 35px 40px 45px
   background-color: #f6f6f6