Enhancement: support maximum group cols up 8 (#5022)

docs/configs/settings.md

@@ -262,15 +262,15 @@ You can make homepage take up the entire window width by adding:
 fullWidth: true
 ```
 
-### Five Columns
+### Maximum Group Columns
 
-You can add a fifth column to services (when `style: columns` which is default) by adding:
+You can set the maximum number of columns of service groups on larger screen sizes (groups with `style: columns` which is default) by adding:
 
 ```yaml
-fiveColumns: true
+maxGroupColumns: 8 # default is 4, max 8
 ```
 
-By default homepage will max out at 4 columns for services with `columns` style
+By default homepage will max out at 4 columns (also the minimum number). If you're setting this to 8, you may want to consider enabling the [fullWidth](#full-width) option as well.
 
 ### Collapsible sections
 

src/components/services/group.jsx

@@ -10,7 +10,7 @@ import { columnMap } from "../../utils/layout/columns";
 export default function ServicesGroup({
   group,
   layout,
-  fiveColumns,
+  maxGroupColumns,
   disableCollapse,
   useEqualHeights,
   groupsInitiallyCollapsed,
@@ -31,7 +31,7 @@ export default function ServicesGroup({
       className={classNames(
         "services-group flex-1",
         layout?.style === "row" ? "basis-full" : "basis-full md:basis-1/2 lg:basis-1/3 xl:basis-1/4",
-        layout?.style !== "row" && fiveColumns ? "3xl:basis-1/5" : "",
+        layout?.style !== "row" && maxGroupColumns ? `3xl:basis-1/${maxGroupColumns}` : "",
         groupPadding,
         isSubgroup ? "subgroup" : "",
       )}
@@ -97,7 +97,7 @@ export default function ServicesGroup({
                         key={subgroup.name}
                         group={subgroup}
                         layout={layout?.[subgroup.name]}
-                        fiveColumns={fiveColumns}
+                        maxGroupColumns={maxGroupColumns}
                         disableCollapse={disableCollapse}
                         useEqualHeights={useEqualHeights}
                         groupsInitiallyCollapsed={groupsInitiallyCollapsed}

src/pages/_app.jsx

@@ -52,6 +52,12 @@ const tailwindSafelist = [
   "dark:bg-white",
   "bg-orange-400",
   "dark:bg-orange-400",
+  // maxGroupColumns
+  "3xl:basis-1/4",
+  "3xl:basis-1/5",
+  "3xl:basis-1/6",
+  "3xl:basis-1/7",
+  "3xl:basis-1/8",
   // yep
   "h-0 h-1 h-2 h-3 h-4 h-5 h-6 h-7 h-8 h-9 h-10 h-11 h-12 h-13 h-14 h-15 h-16 h-17 h-18 h-19 h-20 h-21 h-22 h-23 h-24 h-25 h-26 h-27 h-28 h-29 h-30 h-31 h-32 h-33 h-34 h-35 h-36 h-37 h-38 h-39 h-40 h-41 h-42 h-43 h-44 h-45 h-46 h-47 h-48 h-49 h-50 h-51 h-52 h-53 h-54 h-55 h-56 h-57 h-58 h-59 h-60 h-61 h-62 h-63 h-64 h-65 h-66 h-67 h-68 h-69 h-70 h-71 h-72 h-73 h-74 h-75 h-76 h-77 h-78 h-79 h-80 h-81 h-82 h-83 h-84 h-85 h-86 h-87 h-88 h-89 h-90 h-91 h-92 h-93 h-94 h-95 h-96",
   "sm:h-0 sm:h-1 sm:h-2 sm:h-3 sm:h-4 sm:h-5 sm:h-6 sm:h-7 sm:h-8 sm:h-9 sm:h-10 sm:h-11 sm:h-12 sm:h-13 sm:h-14 sm:h-15 sm:h-16 sm:h-17 sm:h-18 sm:h-19 sm:h-20 sm:h-21 sm:h-22 sm:h-23 sm:h-24 sm:h-25 sm:h-26 sm:h-27 sm:h-28 sm:h-29 sm:h-30 sm:h-31 sm:h-32 sm:h-33 sm:h-34 sm:h-35 sm:h-36 sm:h-37 sm:h-38 sm:h-39 sm:h-40 sm:h-41 sm:h-42 sm:h-43 sm:h-44 sm:h-45 sm:h-46 sm:h-47 sm:h-48 sm:h-49 sm:h-50 sm:h-51 sm:h-52 sm:h-53 sm:h-54 sm:h-55 sm:h-56 sm:h-57 sm:h-58 sm:h-59 sm:h-60 sm:h-61 sm:h-62 sm:h-63 sm:h-64 sm:h-65 sm:h-66 sm:h-67 sm:h-68 sm:h-69 sm:h-70 sm:h-71 sm:h-72 sm:h-73 sm:h-74 sm:h-75 sm:h-76 sm:h-77 sm:h-78 sm:h-79 sm:h-80 sm:h-81 sm:h-82 sm:h-83 sm:h-84 sm:h-85 sm:h-86 sm:h-87 sm:h-88 sm:h-89 sm:h-90 sm:h-91 sm:h-92 sm:h-93 sm:h-94 sm:h-95 sm:h-96",

src/pages/index.jsx

@@ -323,7 +323,7 @@ function Home({ initialSettings }) {
                   key={group.name}
                   group={group}
                   layout={settings.layout?.[group.name]}
-                  fiveColumns={settings.fiveColumns}
+                  maxGroupColumns={settings.fiveColumns ? 5 : settings.maxGroupColumns}
                   disableCollapse={settings.disableCollapse}
                   useEqualHeights={settings.useEqualHeights}
                   groupsInitiallyCollapsed={settings.groupsInitiallyCollapsed}
@@ -347,7 +347,7 @@ function Home({ initialSettings }) {
                 key={group.name}
                 group={group}
                 layout={settings.layout?.[group.name]}
-                fiveColumns={settings.fiveColumns}
+                maxGroupColumns={settings.fiveColumns ? 5 : settings.maxGroupColumns}
                 disableCollapse={settings.disableCollapse}
                 groupsInitiallyCollapsed={settings.groupsInitiallyCollapsed}
               />
@@ -377,6 +377,7 @@ function Home({ initialSettings }) {
     bookmarks,
     settings.layout,
     settings.fiveColumns,
+    settings.maxGroupColumns,
     settings.disableCollapse,
     settings.useEqualHeights,
     settings.cardBlur,