Merge pull request vuejs#1 from Abdelaziz18003/main

merge upstream

Author: boussadjra

.vitepress/config.ts

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
-import NewsLetter from './NewsLetter.vue'
+import SiteMap from './SiteMap.vue';
+// import NewsLetter from './NewsLetter.vue'
 import { load, data, base } from './sponsors'
 import SponsorsGroup from './SponsorsGroup.vue'
 import VueMasteryModal from './VueMasteryModal.vue'
@@ -89,7 +90,8 @@ onMounted(async () => {
     <SponsorsGroup tier="gold" placement="landing" />
   </section>
 
-  <NewsLetter />
+  <SiteMap />
+  <!-- <NewsLetter /> -->
 </template>
 
 <style scoped>
@@ -255,6 +257,7 @@ html:not(.dark) .accent,
     font-size: 64px;
     letter-spacing: -0.5px;
   }
+
   .description {
     font-size: 18px;
     margin-bottom: 48px;
@@ -272,26 +275,33 @@ html:not(.dark) .accent,
   #hero {
     padding: 64px 32px;
   }
+
   .description {
     font-size: 16px;
     margin: 18px 0 30px;
   }
+
   #special-sponsor {
     flex-direction: column;
   }
+
   #special-sponsor img {
     height: 36px;
     margin: 8px 0;
   }
+
   #special-sponsor span {
     text-align: center !important;
   }
+
   #highlights h3 {
     margin-bottom: 0.6em;
   }
+
   #highlights .vt-box {
     padding: 20px 36px;
   }
+
   .actions a {
     margin: 0.5em 0;
   }

.vitepress/theme/components/Home.vue

@@ -32,7 +32,7 @@ import { VTLink } from '@vue/theme'
               id="member_submit"
               name="member[subscribe]"
               type="submit"
-              value="SUBSCRIBE"
+              value="سجّل"
             />
           </div>
         </form>
@@ -44,10 +44,10 @@ import { VTLink } from '@vue/theme'
           >news.vuejs.org</VTLink
         >. تستطيع متابعتنا على
         <VTLink class="link" href="https://twitter.com/vuejs" no-icon
-          >Twitter</VTLink
+          >تويتر</VTLink
         >, أو الانضمام إلينا على
         <VTLink class="link" href="https://chat.vuejs.org/" no-icon
-          >Discord</VTLink
+          >ديسكورد</VTLink
         >.
       </p>
     </div>

.vitepress/theme/components/NewsLetter.vue

@@ -6,7 +6,7 @@
       <div></div>
       <div></div>
     </div>
-    <div>Repl is loading...</div>
+    <div>Repl قيد التحميل</div>
   </div>
 </template>
 

.vitepress/theme/components/ReplLoading.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { VTLink } from '@vue/theme'
+import { useData } from 'vitepress'
+
+const data = useData()
+const nav = data.site.value.themeConfig.nav
+const ecosystem = nav.find((i: any) => i.text === 'بيئة العمل')
+const items = nav
+  .filter((i: any) => i !== ecosystem && i.items)
+  .concat(ecosystem.items)
+</script>
+
+<template>
+  <section id="sitemap">
+    <div class="container">
+      <div class="sitemap-col" v-for="col in items">
+        <h4>{{ col.text }}</h4>
+        <ul>
+          <li v-for="row in col.items">
+            <VTLink :href="row.link">{{ row.text }}</VTLink>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style>
+#sitemap {
+  background: var(--vt-c-bg-soft);
+}
+
+#sitemap .container {
+  max-width: 900px;
+  margin: 0 auto;
+  columns: 1;
+  padding: 24px 32px;
+}
+
+@media (min-width: 768px) {
+  #sitemap .container {
+    columns: 2;
+  }
+}
+
+@media (min-width: 1024px) {
+  #sitemap .container {
+    columns: 3;
+  }
+}
+
+#sitemap h4 {
+  font-weight: 500;
+  color: var(--vt-c-text-1);
+  margin-bottom: 0.25em;
+}
+
+.sitemap-col {
+  margin-bottom: 2em;
+  break-inside: avoid;
+}
+
+#sitemap .vt-link {
+  font-size: 0.9em;
+  color: var(--vt-c-text-2);
+}
+</style>

.vitepress/theme/components/SiteMap.vue

@@ -6,7 +6,7 @@ const { frontmatter } = useData()
 
 <template>
   <div v-if="frontmatter.sponsors !== false">
-    <a class="sponsors-aside-text" href="/sponsor/">Sponsors</a>
+    <a class="sponsors-aside-text" href="/sponsor/">الراعون</a>
     <SponsorsGroup tier="special" />
     <SponsorsGroup tier="platinum" />
   </div>

.vitepress/theme/components/SponsorsAside.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted } from 'vue'
-import { SponsorData, data, base, load } from './sponsors';
+import { SponsorData, data, base, load } from './sponsors'
 
 const { tier, placement = 'aside' } = defineProps<{
   tier: keyof SponsorData

.vitepress/theme/components/SponsorsGroup.vue

@@ -5,17 +5,17 @@ const base = 'https://app.vuejobs.com/feed/vuejs/docs?format=json'
 let items = $ref<Jobs[]>([])
 
 type Jobs = {
-  organization: Organization;
-  title: string;
-  link: string;
-  locations: string[];
-  remote: false | 'ALLOWED' | 'ONLY';
-};
+  organization: Organization
+  title: string
+  link: string
+  locations: string[]
+  remote: false | 'ALLOWED' | 'ONLY'
+}
 
 type Organization = {
-  name: string;
-  avatar: string;
-};
+  name: string
+  avatar: string
+}
 </script>
 
 <script setup lang="ts">
@@ -43,8 +43,8 @@ onMounted(async () => {
         target="_blank"
       >
         <div class="vj-company-logo">
-          <img 
-            :src="job.organization.avatar" 
+          <img
+            :src="job.organization.avatar"
             :alt="`Logo for ${job.organization.name}`" />
         </div>
         <div
@@ -63,7 +63,7 @@ onMounted(async () => {
       </a>
     </div>
     <div class="vj-link">
-      Jobs by
+      وظائف من طرف
       <a
         href="https://vuejobs.com/?utm_source=vuejs&utm_medium=referral&utm_campaign=jobs_widget&utm_content=bottom_link"
         target="_blank"

.vitepress/theme/components/VueJobs.vue

@@ -20,7 +20,6 @@ watch(
     class="why-vue"
     @click="showWhyVue = true"
     href="javascript:;"
-    dir="rtl"
   >
     <svg
       class="icon-play"
@@ -29,12 +28,12 @@ watch(
       viewBox="0 0 100 125"
       fill="#FFFFFF"
     >
-      <title id="simpleicons-play-icon" lang="en">Play icon</title>
+      <title id="simpleicons-play-icon" lang="en">أيقونة التشغيل</title>
       <path
         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>
-    لماذا Vue
+    لماذا Vue؟
   </a>
   <Teleport v-if="showWhyVue" to="body">
     <div @click="showWhyVue = false" class="vuemastery-modal-mask">
@@ -61,9 +60,9 @@ watch(
             </div>
           </div>
 
-          <div class="vuemastery-modal-footer">
+          <div class="vuemastery-modal-footer" dir="rtl">
             <p class="vuemastery-modal-footer-text">
-              Video by
+              فيديو من طرف
               <a
                 href="https://www.vuemastery.com"
                 target="_blank"
@@ -72,14 +71,14 @@ watch(
               >
                 Vue Mastery.</a
               >
-              Watch Vue Mastery’s free
+              شاهد مجانا
               <a
                 href="https://www.vuemastery.com/courses/intro-to-vue-3/intro-to-vue3"
                 target="_blank"
                 rel="sponsored noopener"
-                title="Vue.js Courses on Vue Mastery"
+                title="دورات Vue.js على Vue Mastery"
               >
-                Intro to Vue course.</a
+                مقدمة عن دورة Vue</a
               >
             </p>
           </div>

.vitepress/theme/components/VueMasteryModal.vue

@@ -6,7 +6,7 @@
       rel="sponsored noopener"
       :title="title"
     >
-      <slot>Watch a free video lesson on Vue School</slot>
+      <slot> شاهد فيديو تعليمي مجاني على VueSchool</slot>
     </a>
   </div>
 </template>

.vitepress/theme/components/VueSchoolLink.vue

@@ -8,7 +8,6 @@ import {
   filterHeadersByPreference
 } from './components/preferences'
 import SponsorsAside from './components/SponsorsAside.vue'
-import VueJobs from './components/VueJobs.vue'
 import VueSchoolLink from './components/VueSchoolLink.vue'
 // import Banner from './components/Banner.vue'
 
@@ -26,6 +25,5 @@ export default Object.assign({}, VPTheme, {
     app.provide('prefer-sfc', preferSFC)
     app.provide('filter-headers', filterHeadersByPreference)
     app.component('VueSchoolLink', VueSchoolLink)
-    app.component('VueJobs', VueJobs)
   }
 })

.vitepress/theme/index.ts

@@ -1,6 +1,7 @@
-@import "./pages.css";
-@import "./badges.css";
-@import "./options-boxes.css";
-@import "./inline-demo.css";
-@import "./utilities.css";
-@import "./style-guide.css";
+@import './pages.css';
+@import './badges.css';
+@import './options-boxes.css';
+@import './inline-demo.css';
+@import './utilities.css';
+@import './style-guide.css';
+@import './overrides.css';

.vitepress/theme/styles/index.css

@@ -0,0 +1,49 @@
+.VPSidebar,
+.vt-doc.guide,
+.VPContentDocOutline,
+.edit-link {
+  direction: rtl;
+}
+
+pre {
+  direction: ltr;
+}
+.vt-doc .custom-block {
+  padding: 22px 24px 4px 20px !important;
+}
+.vt-doc .custom-block:before {
+  content: 'ⓘ';
+  position: absolute;
+  font-weight: 600;
+  font-size: 15px;
+  top: 28px;
+  right: 12px;
+}
+
+.vt-doc .custom-block-title {
+  margin-right: 14px;
+}
+
+.vt-doc ul {
+  padding-left: auto;
+  padding-right: 1.25rem;
+}
+
+.vt-doc ul > li:before {
+  content: '•';
+  right: -1.25rem;
+}
+
+.ar.vue-mastery-link .description {
+  margin-right: 16px;
+}
+
+.vt-doc a[href^="https://sfc.vuejs.org"]:before
+{
+  padding-right: 2.5px;
+}
+
+.vt-doc .header-anchor {
+  position: absolute;
+  right: -24px;
+}

.vitepress/theme/styles/overrides.css

@@ -13,8 +13,8 @@
 .vue-mastery-link .banner {
   background-color: var(--vt-c-white-soft);
   border-radius: 4px;
-  width:96px;
-  height:56px;
+  width: 96px;
+  height: 56px;
   object-fit: cover;
 }
 
@@ -50,7 +50,7 @@
 
 @media (max-width: 576px) {
   .vue-mastery-link .banner {
-    width:56px;
+    width: 56px;
   }
 
   .vue-mastery-link .description {

.vitepress/theme/styles/vue-mastery.css

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": false
+}