docs: center last projects row in landing (#18424)

Co-authored-by: 翠 / green <[email protected]>

Author: 2 people

.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue

@@ -244,26 +244,48 @@ const numFrameworksPerRow = computed(
   () => numBlocksPerRow.value - paddedBlocksPerSide.value * 2,
 )
 
-/**
- * The indexes of the blocks on each row that support framework cards.
- */
-const centerIndexes: ComputedRef<{ start: number; end: number }> = computed(
-  () => {
-    const startIndex = paddedBlocksPerSide.value
-    return {
-      start: startIndex,
-      end: numBlocksPerRow.value - paddedBlocksPerSide.value,
-    }
-  },
-)
-
 /**
  * How many rows do we need to display all the frameworks?
  */
 const numRows: ComputedRef<number> = computed(() => {
   return Math.ceil(frameworks.length / numFrameworksPerRow.value)
 })
 
+/**
+ * The indexes of the blocks on each row that support framework cards.
+ *
+ * Note that the index of the returned array is 1-based.
+ */
+const centerIndexes: ComputedRef<{ start: number; end: number }[]> = computed(
+  () => {
+    const firstRowsStartIndex = paddedBlocksPerSide.value
+    const frameworksPerFirstRows =
+      numBlocksPerRow.value - 2 * paddedBlocksPerSide.value
+    const lastRowStartIndex =
+      paddedBlocksPerSide.value +
+      Math.floor(
+        (frameworksPerFirstRows -
+          (frameworks.length % frameworksPerFirstRows)) /
+          2,
+      )
+    return new Array(numRows.value + 1).fill(0).map((_, i) => {
+      return i < numRows.value ||
+        frameworks.length % frameworksPerFirstRows === 0
+        ? {
+            start: firstRowsStartIndex,
+            end: numBlocksPerRow.value - paddedBlocksPerSide.value,
+          }
+        : {
+            start: lastRowStartIndex,
+            end:
+              lastRowStartIndex +
+              (frameworks.length % frameworksPerFirstRows) +
+              1,
+          }
+    })
+  },
+)
+
 /**
  * Generate CSS transformations for each row, to gracefully slide between horizontal positions.
  */
@@ -289,16 +311,16 @@ const rowStyle: ComputedRef<{ transform: string }> = computed(() => {
           <template v-for="columnIndex in numBlocksPerRow + 2">
             <template
               v-if="
-                columnIndex - 1 >= centerIndexes.start &&
-                columnIndex - 1 < centerIndexes.end
+                columnIndex - 1 >= centerIndexes[rowIndex].start &&
+                columnIndex - 1 < centerIndexes[rowIndex].end
               "
             >
               <FrameworkCard
                 :framework="
                   frameworks[
                     (rowIndex - 1) * numFrameworksPerRow +
                       (columnIndex - 1) -
-                      centerIndexes.start
+                      centerIndexes[rowIndex].start
                   ]
                 "
               />