feat: customise pagination options for listings

src/project/types/website/listing/website-listing-read.ts

@@ -68,6 +68,11 @@ import {
   kListing,
   kMaxDescLength,
   kPageSize,
+  kPaginationOptions,
+  kInnerWindow,
+  kOuterWindow,
+  kLeftOuterWindow,
+  kRightOuterWindow,
   kSortAsc,
   kSortDesc,
   kSortUi,
@@ -147,6 +152,13 @@ const kDefaultFields = [
   kFieldDescription,
 ];
 
+const kDefaultPaginationOptions = {
+  [kInnerWindow]: 2,
+  [kOuterWindow]: 0,
+  [kLeftOuterWindow]: 0,
+  [kRightOuterWindow]: 0,
+};
+
 const defaultFieldDisplayNames = (format: Format) => {
   return {
     [kFieldImage]: " ",
@@ -619,6 +631,7 @@ function hydrateListing(
     [kFieldFilter]: hydratedFields,
     [kFieldRequired]: kDefaultFieldRequired,
     [kPageSize]: defaultPageSize(),
+    [kPaginationOptions]: kDefaultPaginationOptions,
     [kFilterUi]: listing[kFilterUi] !== undefined
       ? listing[kFilterUi]
       : listing.type === ListingType.Table,

src/project/types/website/listing/website-listing-shared.ts

@@ -57,6 +57,21 @@ export const kFieldFilter = "field-filter";
 // The number of rows to display per page
 export const kPageSize = "page-size";
 
+// Pagination options
+export const kPaginationOptions = "pagination";
+
+// How many pages should be visible on each side of the current page. list.js default: 2
+export const kInnerWindow = "inner-window";
+
+// How many pages should be visible on from the beginning and from the end of the pagination. list.js default: 0
+export const kOuterWindow = "outer-window";
+
+// Same as outerWindow but only from left. list.js default: 0
+export const kLeftOuterWindow = "outer-window-left";
+
+// Same as outerWindow but only from right. list.js default: 0
+export const kRightOuterWindow = "outer-window-right";
+
 // The maximum number of items to include
 export const kMaxItems = "max-items";
 
@@ -169,6 +184,7 @@ export interface Listing extends ListingDehydrated {
   [kFieldFilter]: string[];
   [kFieldRequired]: string[];
   [kPageSize]: number;
+  [kPaginationOptions]: Record<string, number>;
   [kMaxItems]?: number;
   [kFilterUi]: boolean;
   [kSortUi]: boolean;

src/project/types/website/listing/website-listing-template.ts

@@ -31,6 +31,11 @@ import {
   kMaxDescLength,
   kMaxItems,
   kPageSize,
+  kPaginationOptions,
+  kInnerWindow,
+  kOuterWindow,
+  kLeftOuterWindow,
+  kRightOuterWindow,
   kSortAsc,
   kSortDesc,
   Listing,
@@ -522,13 +527,24 @@ export function templateJsScript(
   itemCount: number,
 ) {
   const pageSize = listing[kPageSize] as number || 50;
+  const listingPaginationOptions = listing[kPaginationOptions] as Record<string, number> || {};
 
   // If columns are present, factor that in
   const columns = listing[kFields] as string[] || [];
 
+  const paginationOptions = [
+    listingPaginationOptions[kInnerWindow] ? `innerWindow: ${listingPaginationOptions[kInnerWindow]}` : "",
+    listingPaginationOptions[kOuterWindow] ? `outerWindow: ${listingPaginationOptions[kOuterWindow]}` : "",
+    listingPaginationOptions[kLeftOuterWindow] ? `leftOuterWindow: ${listingPaginationOptions[kLeftOuterWindow]}` : "",
+    listingPaginationOptions[kRightOuterWindow] ? `rightOuterWindow: ${listingPaginationOptions[kRightOuterWindow]}` : "",
+    'item: "<li class=\'page-item\'><a class=\'page page-link\' href=\'#\'></a></li>"',
+  ]
+    .filter((v) => v !== "")
+    .join(", ");
+
   const pageOptions = itemCount > pageSize
     ? `${pageSize ? `page: ${pageSize}` : ""},
-    pagination: { item: "<li class='page-item'><a class='page page-link' href='#'></a></li>" },`
+    pagination: { ${paginationOptions} },`
     : "";
 
   const filterOptions = `searchColumns: [${

src/resources/editor/tools/vs-code.mjs

@@ -10527,6 +10527,37 @@ var require_yaml_intelligence_resources = __commonJS({
                   long: "Display item categories from this listing in the margin of the page.\n\n  - `numbered`: Category list with number of items\n  - `unnumbered`: Category list\n  - `cloud`: Word cloud style categories\n"
                 }
               },
+              pagination: {
+                object: {
+                  closed: true,
+                  properties: {
+                    "inner-window": {
+                      number: {
+                        description: "The number of pages to display on each side of the current page.",
+                        default: 2
+                      }
+                    },
+                    "outer-window": {
+                      number: {
+                        description: "The number of pages to display at the start and end of the pagination control.",
+                        default: 0
+                      }
+                    },
+                    "outer-window-left": {
+                      number: {
+                        description: "The number of pages to display on the left side of the current page.",
+                        default: 0
+                      }
+                    },
+                    "outer-window-right": {
+                      number: {
+                        description: "The number of pages to display on the right side of the current page.",
+                        default: 0
+                      }
+                    }
+                  }
+                }
+              },
               feed: {
                 anyOf: [
                   "boolean",
@@ -21829,6 +21860,10 @@ var require_yaml_intelligence_resources = __commonJS({
           short: "Display item categories from this listing in the margin of the\npage.",
           long: "Display item categories from this listing in the margin of the\npage."
         },
+        "The number of pages to display on each side of the current page.",
+        "The number of pages to display at the start and end of the pagination\ncontrol.",
+        "The number of pages to display on the left side of the current\npage.",
+        "The number of pages to display on the right side of the current\npage.",
         "Enables an RSS feed for the listing.",
         "The number of items to include in your feed. Defaults to 20.",
         {
@@ -22458,6 +22493,8 @@ var require_yaml_intelligence_resources = __commonJS({
         "Names of customizeable logos",
         "Path or brand.yml logo resource name.",
         "Alternative text for the logo, used for accessibility.",
+        "Path or brand.yml logo resource name.",
+        "Alternative text for the logo, used for accessibility.",
         "Any of the ways a logo can be specified: string, object, or\nlight/dark object of string or object",
         "Specification of a light logo",
         "Specification of a dark logo",
@@ -24292,6 +24329,7 @@ var require_yaml_intelligence_resources = __commonJS({
         "List execution engines you want to give priority when determining\nwhich engine should render a notebook. If two engines have support for a\nnotebook, the one listed earlier will be chosen. Quarto\u2019s default order\nis \u2018knitr\u2019, \u2018jupyter\u2019, \u2018markdown\u2019, \u2018julia\u2019.",
         "When defined, run axe-core accessibility tests on the document.",
         "If set, output axe-core results on console. <code>json</code>:\nproduce structured output; <code>console</code>: print output to\njavascript console; <code>document</code>: produce a visual report of\nviolations in the document itself.",
+        "The logo image.",
         "Project configuration.",
         "Project type (<code>default</code>, <code>website</code>,\n<code>book</code>, or <code>manuscript</code>)",
         "Files to render (defaults to all files)",
@@ -24637,10 +24675,7 @@ var require_yaml_intelligence_resources = __commonJS({
         "Disambiguating year suffix in author-date styles (e.g.&nbsp;\u201Ca\u201D in \u201CDoe,\n1999a\u201D).",
         "Manuscript configuration",
         "internal-schema-hack",
-        "List execution engines you want to give priority when determining\nwhich engine should render a notebook. If two engines have support for a\nnotebook, the one listed earlier will be chosen. Quarto\u2019s default order\nis \u2018knitr\u2019, \u2018jupyter\u2019, \u2018markdown\u2019, \u2018julia\u2019.",
-        "Path or brand.yml logo resource name.",
-        "Alternative text for the logo, used for accessibility.",
-        "The logo image."
+        "List execution engines you want to give priority when determining\nwhich engine should render a notebook. If two engines have support for a\nnotebook, the one listed earlier will be chosen. Quarto\u2019s default order\nis \u2018knitr\u2019, \u2018jupyter\u2019, \u2018markdown\u2019, \u2018julia\u2019."
       ],
       "schema/external-schemas.yml": [
         {
@@ -24869,12 +24904,12 @@ var require_yaml_intelligence_resources = __commonJS({
         mermaid: "%%"
       },
       "handlers/mermaid/schema.yml": {
-        _internalId: 197511,
+        _internalId: 197483,
         type: "object",
         description: "be an object",
         properties: {
           "mermaid-format": {
-            _internalId: 197503,
+            _internalId: 197475,
             type: "enum",
             enum: [
               "png",
@@ -24890,7 +24925,7 @@ var require_yaml_intelligence_resources = __commonJS({
             exhaustiveCompletions: true
           },
           theme: {
-            _internalId: 197510,
+            _internalId: 197482,
             type: "anyOf",
             anyOf: [
               {