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 df59bfaf6..658b21e4a 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 = 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(() => {