[DONE] EXAMPLES

src/v2/examples/commits.md

@@ -1,9 +1,9 @@
 ---
-title: GitHub Commits
+title: مساهمات GitHub
 type: examples
 order: 1
 ---
 
-> This example fetches latest Vue.js commits data from GitHub's API and displays them as a list. You can switch between the master and dev branches.
+> هذا المثال يقوم بجلب أحدث بيانات مساهمات Vue.js من GitHub [API](https://github.com/softvenue/i18n/blob/master/i18n.json#L53) وعرضهم في قائمة. يمكنك التنقل بين فروع master و dev.
 
 <iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/c5g8xnar/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/deepstream.md

@@ -1,9 +1,9 @@
 ---
-title: Realtime with deepstreamHub
+title: الوقت الحقيقي  بواسطة deepstreamHub
 type: examples
 order: 9
 ---
 
-> This example uses [deepstreamHub](https://deepstreamhub.com/) to synchronize realtime data, send events and make remote procedure calls between clients (you can try opening it in multiple browser windows).
+> في هذا المثال نستعمل [deepstreamHub](https://deepstreamhub.com/) لمزامنة البيانات في الوقت الحقيقي، إرسال الأحداث وعمل نداءات عن بعد بين العملاء (يمكنك محاولة فتحه في نوافذ متصفح متعددة).
 
 <iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/ff0sp9hw/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/elastic-header.md

@@ -1,5 +1,5 @@
 ---
-title: Elastic Header
+title: الترويس المرن
 type: examples
 order: 7
 ---

src/v2/examples/firebase.md

@@ -1,9 +1,9 @@
 ---
-title: Firebase + Validation
+title: Firebase + التحقق
 type: examples
 order: 10
 ---
 
-> This example uses [Firebase](https://firebase.google.com/) as the data persistence backend and syncs between clients in real time (you can try opening it in multiple browser tabs). In addition, it performs instant validation using computed properties and triggers CSS transitions when adding/removing items.
+> في هذا المثال نستخدم [Firebase](https://firebase.google.com/) مداوم للبيانات في الخلفية ومزامنة بين العملاء في الوقت الحقيقي (يمكنك محاولة فتحه في علامات تبويب متصفح متعددة). بالإضافة إلى ذلك، فإنه يقوم بالتحقق من البيانات باستعمال الخاصيات المحسوبة وتشغيل إنتقالات CSS عند إضافة/حذف العناصر.
 
 <iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/pyLbpzzx/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/grid-component.md

@@ -1,9 +1,9 @@
 ---
-title: Grid Component
+title: شبكة المكون
 type: examples
 order: 3
 ---
 
-> This is an example of creating a reusable grid component and using it with external data.
+> هذا مثال لإنشاء شبكة مكون قابلة لإعادة الإستخدام وإستخدامها مع البيانات الخارجية.
 
 <iframe width="100%" height="500" src="https://jsfiddle.net/Tertia/vbyon64p/6/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/hackernews.md

@@ -1,10 +1,10 @@
 ---
-title: HackerNews Clone
+title: نسخة من HackerNews
 type: examples
 order: 12
 ---
 
-> This is a HackerNews clone built upon HN's official Firebase API, Vue 2.0 + Vue Router + Vuex, with server-side rendering.
+> هذا مثال على نسخة من HackerNews مبني على API الرسمي الخاص بـHackerNews مع Vue 2.0،  Vue Router + Vuex، مع تصيير من جهة الخادم.
 
 {% raw %}
 <div style="max-width: 600px;">
@@ -14,22 +14,22 @@ order: 12
 </div>
 {% endraw %}
 
-> [Live Demo](https://vue-hn.herokuapp.com/)
-> Note: the demo may need some spin up time if nobody has accessed it for a certain period.
+> [عرض توضيحي حي](https://vue-hn.herokuapp.com/)
+> ملاحظة: قد يحتاج العرض التوضيحي لبعض الوقت في الدوران إذا لم يصل إليه أحد لفترة معينة.
 >
-> [[Source](https://github.com/vuejs/vue-hackernews-2.0)]
+> [[المصدر](https://github.com/vuejs/vue-hackernews-2.0)]
 
-## Features
+## ميزات
 
-- Server Side Rendering
-  - Vue + Vue Router + Vuex working together
-  - Server-side data pre-fetching
-  - Client-side state & DOM hydration
-- Single-file Vue Components
-  - Hot-reload in development
-  - CSS extraction for production
-- Real-time List Updates with FLIP Animation
+- تصيير من جهة الخادم
+  - Vue + Vue Router + Vuex للعمل معا
+  - بيانات جهة الخادم قبل جلبها
+  - حالة جهة المستخدم & إماهة DOM
+- مكون Vue للملف الوحيد
+  - Hot-reload قيد التطوير
+  - استخلاص CSS للانتاج
+- الوقت الحقيقي لتحديث قائمة مع تأثير القلب
 
-## Architecture Overview
+## نظرة عامة عن هندسة
 
 <img width="973" alt="Hackernew clone architecture overview" src="../../images/hn-architecture.png">

src/v2/examples/index.md

@@ -1,9 +1,9 @@
 ---
-title: Markdown Editor
+title: محرر Markdown
 type: examples
 order: 0
 ---
 
-> Dead simple Markdown editor.
+> مثال بسيط عن محرر Markdown.
 
 <iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/0dzvcf4d/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/modal.md

@@ -1,9 +1,9 @@
 ---
-title: Modal Component
+title: نموذج عن مكون
 type: examples
 order: 6
 ---
 
-> Features used: component, prop passing, content insertion, transitions.
+> الميزات المستخدمة: مكون، إرسال خصائص، إدراج محتوى، التحولات.
 
 <iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mwLbw11k/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/select2.md

@@ -1,9 +1,9 @@
 ---
-title: Wrapper Component
+title: المكون المغلف
 type: examples
 order: 8
 ---
 
-> In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.
+> في هذا المثال سندرج إضافة خارجية jQuery (select2) عن طريق تغليفها داخل مكون مخصص.
 
 <iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/d131Lebj/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/svg.md

@@ -1,9 +1,9 @@
 ---
-title: SVG Graph
+title: الرسم البياني باستخدام SVG
 type: examples
 order: 5
 ---
 
-> This example showcases a combination of custom component, computed property, two-way binding and SVG support.
+> هذا المثال يعرض حالات لمكون مخصص، خاصية المحسوبة، طريقتي الربط و ودعم SVG.
 
 <iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mhrckqgq/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/themes.md

@@ -1,10 +1,10 @@
 ---
-title: Themes
+title: مظاهر
 type: examples
 is_new: true
 order: 13
 ---
-> With the examples below built by our partners from [Creative Tim](https://creative-tim.com?affiliate_id=116187) you can see how a real world application is built, the technology stack behind it and how most of the concepts you've learned so far apply in a real world application. 
+> من خلال الأمثلة التالية التي صممها شركاؤنا من [Creative Tim](https://creative-tim.com?affiliate_id=116187) يمكنك أن ترى كيف تم بناء تطبيق حقيقي، ومجموعة التكنولوجيا وراء ذلك وكيف أن معظم المفاهيم التي تعلمتها تنطبق حتى الآن في التطبيقات الحقيقية.
 
 {% raw %}
 <div id="themes-example" class="themes-grid">
@@ -20,7 +20,7 @@ order: 13
    <div class="see-more-container">
     <a :href="`https://www.creative-tim.com/bootstrap-themes/vuejs-themes?affiliate_id=${affiliateId}`"
        class="button white see-more-link">
-       See More Themes
+       رؤية المزيد من المظاهر
     </a>
    </div>
 </div>

src/v2/examples/todomvc.md

@@ -1,11 +1,11 @@
 ---
-title: TodoMVC
+title: TodoMVC (عمل:نموذج-عرض-مراقب)
 type: examples
 order: 11
 ---
 
-> This is a fully spec-compliant TodoMVC implementation in under 120 effective lines of JavaScript (excluding comments and blank lines).
+> هذا شامل لتوافقية مخصصة لعمل (نموذج-عرض-مراقب) تحت 120 سطر فعال من JavaScript (باستثناء التعليقات وخطوط فارغة).
 
-<p class="tip">Note that if your web browser is configured to block 3rd-party data/cookies, the example below will not work, as the `localStorage` data will fail to be saved from JSFiddle. You'll have to click on `Edit in JSFiddle` to see the live result.</p>
+<p class="tip">ملاحظة: هذا إذا كان متصفحك مخصص لحظر البيانات/كوكي الخارجية، المثال أدناه لن يعمل، لأن  بيانات تخزين المحلية `localStorage` ستفشل في حفظ JSFiddle. يجب عليك النقر فوق `Edit in JSFiddle` لرؤية النتيجة المباشرة.</p>
 
 <iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/4dr2fLb7/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/tree-view.md

@@ -1,9 +1,9 @@
 ---
-title: Tree View
+title: شجرة الإظهار
 type: examples
 order: 4
 ---
 
-> Example of a simple tree view implementation showcasing recursive usage of components.
+> مثال على طريقة عرض الشجرة البسيطة التي تعرض الاستخدام التراجعي للمكونات.
 
 <iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/pnqzspoe/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>