Merge branch 'upstream' into sync

Author: Abdelaziz18003

.gitignore

@@ -111,3 +111,6 @@ src/api/index.json
 src/examples/data.json
 src/tutorial/data.json
 draft.md
+
+# folders created by IDE
+.idea

.npmrc

@@ -0,0 +1 @@
+package-manager-strict=false

.prettierignore

@@ -0,0 +1 @@
+*.vue

.vitepress/config.ts

@@ -17,6 +17,7 @@ const nav: ThemeConfig['nav'] = [
       { text: 'انطلاقة سريعة', link: '/guide/quick-start' },
       // { text: 'دليل الأسلوب', link: '/style-guide/' },
       { text: 'فهرس', link: '/glossary/' },
+      { text: 'مرجع الأخطاء', link: '/error-reference/' },
       {
         text: 'Vue 2 توثيقات ',
         link: 'https://v2.vuejs.org'
@@ -44,6 +45,7 @@ const nav: ThemeConfig['nav'] = [
         text: 'Resources',
         items: [
           { text: 'الشركاء', link: '/partners/' },
+          { text: 'المطورون', link: '/developers/' },
           { text: 'قوالب (Themes)', link: '/ecosystem/themes' },
           { text: 'مكونات واجهة المستخدم', link: 'https://ui-libs.vercel.app/' },
           {
@@ -115,6 +117,7 @@ const nav: ThemeConfig['nav'] = [
         link: '/about/community-guide'
       },
       { text: 'مدونة قواعد السلوك', link: '/about/coc' },
+      { text: 'سياسة الخصوصية', link: '/about/privacy' },
       {
         text: 'الوثائقي',
         link: 'https://www.youtube.com/watch?v=OrxmtDw4pVI'
@@ -126,9 +129,13 @@ const nav: ThemeConfig['nav'] = [
     link: '/sponsor/'
   },
   {
-    text: 'الشركاء',
-    link: '/partners/',
-    activeMatch: `^/partners/`
+    text: 'الخبراء',
+    badge: { text: 'جديد' },
+    activeMatch: `^/(partners|developers)/`,
+    items: [
+      { text: 'الشركاء', link: '/partners/' },
+      { text: 'المطورون', link: '/developers/', badge: { text: 'جديد' } }
+    ]
   }
 ]
 
@@ -178,18 +185,15 @@ export const sidebar: ThemeConfig['sidebar'] = {
           link: '/guide/essentials/event-handling'
         },
         { text: 'ربط إدخالات النموذج', link: '/guide/essentials/forms' },
-        {
-          text: 'خطافات دورة الحياة',
-          link: '/guide/essentials/lifecycle'
-        },
         { text: 'الخاصيات المراقبة', link: '/guide/essentials/watchers' },
-        {
-          text: 'Refs مراجع القالب',
-          link: '/guide/essentials/template-refs'
-        },
+        { text: 'Refs مراجع القالب', link: '/guide/essentials/template-refs' },
         {
           text: 'أساسيات المكونات',
           link: '/guide/essentials/component-basics'
+        },
+        {
+          text: 'خطافات دورة الحياة',
+          link: '/guide/essentials/lifecycle'
         }
       ]
     },
@@ -376,6 +380,10 @@ export const sidebar: ThemeConfig['sidebar'] = {
         {
           text: 'حقن الإعتمادية',
           link: '/api/composition-api-dependency-injection'
+        },
+        {
+          text: 'Helpers',
+          link: '/api/composition-api-helpers'
         }
       ]
     },
@@ -425,10 +433,12 @@ export const sidebar: ThemeConfig['sidebar'] = {
     {
       text: 'الواجهة البرمجية المتقدمة',
       items: [
-        { text: 'دالة التصيير', link: '/api/render-function' },
-        { text: 'التصيير من الخادم', link: '/api/ssr' },
+        { text: 'العناصر المخصصة', link: '/api/custom-elements' },
+        { text: 'دالة التشكيل', link: '/api/render-function' },
+        { text: 'التشكيل من الخادم', link: '/api/ssr' },
         { text: 'الأنواع المساعدة (Typescript)', link: '/api/utility-types' },
-        { text: 'مصير مخصص', link: '/api/custom-renderer' }
+        { text: 'مشكل مخصص', link: '/api/custom-renderer' },
+        { text: 'شارات التشكيل', link: '/api/compile-time-flags' }
       ]
     }
   ],
@@ -570,8 +580,11 @@ export const sidebar: ThemeConfig['sidebar'] = {
 export default defineConfigWithTheme<ThemeConfig>({
   extends: baseConfig,
 
+  sitemap: {
+    hostname: 'https://vuejs.org'
+  },
+
   lang: 'ar',
-  dir:'rtl',
   title: 'Vue.js إطار',
   description: ' الإطار التقدمي للـJavascript  -Vue.js',
   srcDir: 'src',
@@ -613,6 +626,14 @@ export default defineConfigWithTheme<ThemeConfig>({
         'utf-8'
       )
     ],
+    [
+      'script',
+      {},
+      fs.readFileSync(
+        path.resolve(__dirname, './inlined-scripts/uwu.js'),
+        'utf-8'
+      )
+    ],
     [
       'script',
       {
@@ -683,6 +704,26 @@ export default defineConfigWithTheme<ThemeConfig>({
         text: 'Italiano',
         repo: 'https://github.com/vuejs-translations/docs-it'
       },
+      {
+        link: 'https://fa.vuejs.org',
+        text: 'فارسی',
+        repo: 'https://github.com/vuejs-translations/docs-fa'
+      },
+      {
+        link: 'https://ru.vuejs.org',
+        text: 'Русский',
+        repo: 'https://github.com/translation-gang/docs-ru'
+      },
+      {
+        link: 'https://cs.vuejs.org',
+        text: 'Čeština',
+        repo: 'https://github.com/vuejs-translations/docs-cs'
+      },
+      {
+        link: 'https://zh-hk.vuejs.org',
+        text: '繁體中文',
+        repo: 'https://github.com/vuejs-translations/docs-zh-hk'
+      },
       {
         link: '/translations/',
         text: 'ساعدنا في الترجمة',
@@ -693,7 +734,7 @@ export default defineConfigWithTheme<ThemeConfig>({
     algolia: {
       indexName: 'vuejs',
       appId: 'ML0LEBN7FQ',
-      apiKey: 'f49cbd92a74532cc55cfbffa5e5a7d01',
+      apiKey: '21cf9df0734770a2448a9da64a700c22',
       searchParameters: {
         facetFilters: ['version:v3']
       }
@@ -707,7 +748,7 @@ export default defineConfigWithTheme<ThemeConfig>({
     socialLinks: [
       { icon: 'github', link: 'https://github.com/vuejs/' },
       { icon: 'twitter', link: 'https://twitter.com/vuejs' },
-      { icon: 'discord', link: 'https://discord.com/invite/HBherRA' }
+      { icon: 'discord', link: 'https://discord.com/invite/vue' }
     ],
 
     editLink: {
@@ -725,6 +766,7 @@ export default defineConfigWithTheme<ThemeConfig>({
   },
 
   markdown: {
+    theme: 'github-dark',
     config(md) {
       md.use(headerPlugin)
       // .use(textAdPlugin)
@@ -751,7 +793,6 @@ export default defineConfigWithTheme<ThemeConfig>({
       }
     },
     build: {
-      minify: 'terser',
       chunkSizeWarningLimit: Infinity
     },
     json: {

.vitepress/inlined-scripts/uwu.js

@@ -0,0 +1,3 @@
+if (location.search.includes('?uwu')) {
+  document.documentElement.classList.add('uwu')
+}

.vitepress/theme/components/CallToActionSection.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  title?: string
+  description?: string
+  link?: string
+  linkText?: string
+  showDivider?: boolean
+}>(), {
+  showDivider: true
+})
+</script>
+
+<template>
+  <section class="cta-section">
+    <div v-if="showDivider" class="cta-divider"></div>
+    <div class="cta-content">
+      <h2 v-if="title" class="cta-title">{{ title }}</h2>
+      <p v-if="description" class="cta-description">{{ description }}</p>
+      <a v-if="link" :href="link" target="_blank" class="cta-link">{{ linkText }}</a>
+      <slot></slot>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.cta-section {
+  text-align: center;
+  max-width: 688px;
+  margin: 0 auto;
+}
+
+.cta-divider {
+  width: 100px;
+  margin: 0 auto;
+  border-top: 1px solid var(--vt-c-divider-light);
+}
+
+.cta-content {
+  padding: 28px 28px 96px;
+}
+
+.cta-title {
+  font-size: 34px;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+  line-height: 1.2;
+  margin: 0.5em 0 1em;
+}
+
+.cta-description {
+  color: var(--vt-c-text-2);
+}
+
+.cta-link {
+  margin-top: 2em;
+  display: inline-block;
+  padding: 12px 24px;
+  background-color: var(--vt-c-bg-mute);
+  color: var(--vt-c-text-code);
+  font-weight: 600;
+  border-radius: 6px;
+  text-decoration: none;
+  transition: background-color 0.5s, color 0.5s;
+}
+
+.cta-link:hover {
+  background-color: var(--vt-c-gray-light-4);
+}
+
+.dark .cta-link:hover {
+  background-color: var(--vt-c-gray-dark-3);
+}
+</style>

.vitepress/theme/components/CardList.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, shallowRef } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    items: Array<any>
+    filter?: (item: any) => boolean
+    cardComponent: any
+    showLinkToAll?: boolean
+    shuffleItems?: boolean
+    browseLinkText?: string
+    browseLinkUrl?: string
+    splitBy?: string
+  }>(),
+  {
+    showLinkToAll: false,
+    shuffleItems: false,
+    splitBy: 'platinum'
+  }
+)
+
+const isMounted = ref(false)
+const items = shallowRef([...props.items])
+
+const filteredItems = computed(() =>
+  props.filter ? items.value.filter(props.filter) : items.value
+)
+
+onMounted(() => {
+  isMounted.value = true
+  items.value = processItems([...items.value], props.splitBy, props.shuffleItems)
+})
+
+function processItems(items: Array<any>, splitBy: string, shouldShuffle: boolean) {
+  const splitItems = items.filter(item => item[splitBy])
+  const otherItems = items.filter(item => !item[splitBy])
+
+  if (shouldShuffle) {
+    shuffleArray(splitItems)
+    shuffleArray(otherItems)
+  }
+
+  return [...splitItems, ...otherItems]
+}
+
+function shuffleArray(array: Array<any>) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1)); // don't remove semicolon
+    [array[i], array[j]] = [array[j], array[i]]
+  }
+}
+</script>
+
+<template>
+  <div v-show="isMounted" class="card-list">
+    <!-- to skip SSG since the partners are shuffled -->
+    <ClientOnly>
+      <component
+        :is="cardComponent"
+        v-for="item in filteredItems"
+        :key="item.id || item.name"
+        :data="item"
+      />
+    </ClientOnly>
+
+    <a
+      v-if="showLinkToAll && filteredItems.length % 2"
+      :href="browseLinkUrl"
+      class="browse-all-link"
+    >
+      {{ browseLinkText }}
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.card-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.browse-all-link {
+  display: block;
+  width: 48.5%;
+  margin-bottom: 36px;
+  padding-top: 240px;
+  font-size: 1.2em;
+  text-align: center;
+  color: var(--vt-c-text-2);
+  border: 1px solid var(--vt-c-divider-light);
+  border-radius: 4px;
+  transition: color 0.5s ease;
+}
+
+.browse-all-link:hover {
+  color: var(--vt-c-text-1);
+}
+
+@media (max-width: 768px) {
+  .browse-all-link {
+    display: none;
+  }
+}
+</style>