From 3778c7acf95e2dec3c18f3954ba4a52a979f45c4 Mon Sep 17 00:00:00 2001
From: patak <583075+patak-dev@users.noreply.github.com>
Date: Wed, 23 Oct 2024 08:20:12 +0200
Subject: [PATCH] docs: center last projects row in landing (#18424)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 翠 / green <green@sapphi.red>
---
 .../FrameworksSection.vue                     | 54 +++++++++++++------
 1 file changed, 38 insertions(+), 16 deletions(-)

diff --git a/docs/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue b/docs/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue
index df59bfaf6d545a..658b21e4a826da 100644
--- a/docs/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue	
+++ b/docs/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue	
@@ -244,19 +244,6 @@ 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?
  */
@@ -264,6 +251,41 @@ 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,8 +311,8 @@ 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
@@ -298,7 +320,7 @@ const rowStyle: ComputedRef<{ transform: string }> = computed(() => {
                   frameworks[
                     (rowIndex - 1) * numFrameworksPerRow +
                       (columnIndex - 1) -
-                      centerIndexes.start
+                      centerIndexes[rowIndex].start
                   ]
                 "
               />