fix: improve & fix pagination

Author: jrson83

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.organizeImports.biome": "explicit"
+    "source.organizeImports": "explicit"
   },
   "files.insertFinalNewline": true,
   "deno.enable": true,

_config.ts

@@ -2,18 +2,18 @@ import { config } from './_build.ts'
 
 import lume from 'lume/mod.ts'
 import date from 'lume/plugins/date.ts'
-import slugify_urls from 'lume/plugins/slugify_urls.ts'
+import inline from 'lume/plugins/inline.ts'
 import jsx from 'lume/plugins/jsx_preact.ts'
+import unified from 'lume/plugins/remark.ts'
 import sass from 'lume/plugins/sass.ts'
-import terser from 'lume/plugins/terser.ts'
-import inline from 'lume/plugins/inline.ts'
 import sitemap from 'lume/plugins/sitemap.ts'
-import unified from 'lume/plugins/remark.ts'
+import slugify_urls from 'lume/plugins/slugify_urls.ts'
+import terser from 'lume/plugins/terser.ts'
 
-import remarkPlugins from '#plugins/unified/remark/mod.ts'
-import rehypePlugins from '#plugins/unified/rehype/mod.ts'
 import atomFeed from '#plugins/atom-feed/mod.ts'
 import md5CacheBuster from '#plugins/md5-cache-buster/mod.ts'
+import rehypePlugins from '#plugins/unified/rehype/mod.ts'
+import remarkPlugins from '#plugins/unified/remark/mod.ts'
 
 const site = lume({
   location: config.location,

plugins/_deprecated/sitemap/mod.ts

@@ -1,8 +1,8 @@
 // deno-lint-ignore-file -- The plugin is deprecated in favour of: https://lume.land/plugins/sitemap/
 
-import { merge } from 'lume/core/utils.ts'
 import { Page } from 'lume/core/filesystem.ts'
 import { buildSort } from 'lume/core/searcher.ts'
+import { merge } from 'lume/core/utils.ts'
 
 import type { Site } from 'lume/core.ts'
 import type { Search } from 'lume/plugins/search.ts'

plugins/atom-feed/mod.ts

@@ -1,14 +1,14 @@
-import { merge } from 'lume/core/utils.ts'
 import { Page } from 'lume/core/filesystem.ts'
 import { buildSort } from 'lume/core/searcher.ts'
+import { merge } from 'lume/core/utils.ts'
 
 import { isString } from '#utils'
 
 import { XMLFormat } from '#plugins/atom-feed/deps.ts'
 
 import type { Site } from 'lume/core.ts'
-import type { Search } from 'lume/plugins/search.ts'
 import type { MetaData } from 'lume/plugins/metas.ts'
+import type { Search } from 'lume/plugins/search.ts'
 
 export interface Options {
   /** The query to search pages included in the feed. defaults to `type=post` */

plugins/md5-cache-buster/mod.ts

@@ -1,9 +1,9 @@
-import { Md5 } from './deps.ts'
 import { merge } from 'lume/core/utils.ts'
 import modifyUrls from 'lume/plugins/modify_urls.ts'
+import { Md5 } from './deps.ts'
 
-import type { Message } from './deps.ts'
 import type { Page, Site } from 'lume/core.ts'
+import type { Message } from './deps.ts'
 
 export interface Options {
   /** The list of extensions this plugin applies to */

plugins/unified/deps.ts

@@ -8,19 +8,19 @@ export * as unified from 'npm:[email protected]'
 
 export { default as readingTime } from 'https://esm.sh/[email protected]?bundle'
 
-export { default as rehypeMinifyWhitespace } from 'npm:rehype-[email protected].0'
+export { default as rehypeExtractToc } from 'npm:@stefanprobst/rehype-[email protected].0'
 export { default as rehypeCodeTitles } from 'npm:[email protected]'
 export { default as rehypeExternalLinks } from 'npm:[email protected]'
-export { default as rehypeExtractToc } from 'npm:@stefanprobst/[email protected]'
-export { default as rehypePrismPlus } from 'npm:[email protected]'
+export { default as rehypeMinifyWhitespace } from 'npm:[email protected]'
 export { default as rehypePrismDiff } from 'npm:[email protected]'
+export { default as rehypePrismPlus } from 'npm:[email protected]'
 
 export { slug } from 'npm:[email protected]'
+export { toString } from 'npm:[email protected]'
 export { findAfter } from 'npm:[email protected]'
 export { CONTINUE, EXIT, SKIP, visit } from 'npm:[email protected]'
-export { toString } from 'npm:[email protected]'
 
+export { default as rehypeImgSize } from 'npm:[email protected]'
+export type { Test } from 'npm:[email protected]'
 export { default as rehypeCopyCode } from './rehype/rehypeCopyCode.ts'
 export { default as rehypeSlugAnchorSectionize } from './rehype/slug.ts'
-export type { Test } from 'npm:[email protected]'
-export { default as rehypeImgSize } from 'npm:[email protected]'

plugins/unified/rehype/mod.ts

@@ -1,3 +1,4 @@
+import { dirname, fromFileUrl } from 'https://deno.land/[email protected]/path/mod.ts'
 import {
   rehypeCodeTitles,
   rehypeCopyCode,
@@ -9,7 +10,6 @@ import {
   rehypePrismPlus,
   rehypeSlugAnchorSectionize,
 } from '../deps.ts'
-import { dirname, fromFileUrl } from 'https://deno.land/[email protected]/path/mod.ts'
 
 const __dirname = dirname(fromFileUrl(import.meta.url))
 

plugins/unified/rehype/rehypeCopyCode.ts

@@ -1,5 +1,5 @@
-import type { Element, Root } from 'npm:@types/[email protected]'
 import { unified, visit } from '#plugins/unified/deps.ts'
+import type { Element, Root } from 'npm:@types/[email protected]'
 
 const rehypeCopyCode: unified.Plugin<[], Root> = () => {
   return (tree: Root) => {

plugins/unified/rehype/slug.ts

@@ -1,3 +1,4 @@
+import type { Element, Root } from 'npm:@types/[email protected]'
 import {
   findAfter,
   slug,
@@ -6,7 +7,6 @@ import {
   unified,
   visit,
 } from '../deps.ts'
-import type { Element, Root } from 'npm:@types/[email protected]'
 
 export interface RehypeSlugAnchorSectionizeOptions {
   /** The heading level depth to sectionize. defaults to `3` */

scripts.ts

@@ -1,4 +1,4 @@
-import { ScriptsConfiguration } from 'https://deno.land/x/[email protected]/mod.ts'
+import type { ScriptsConfiguration } from 'https://deno.land/x/[email protected]/mod.ts'
 
 export default <ScriptsConfiguration> {
   scripts: {

src/404.tsx

@@ -5,7 +5,7 @@ export const title = '404: Page Not Found'
 export const layout = 'layouts/root.tsx'
 export const url = '/404/'
 
-export default (data: PageData, { urlFilter }: PageHelpers) => {
+export default (_data: PageData, { urlFilter }: PageHelpers) => {
   return (
     <>
       <h1>{title}</h1>

src/_components/blog/pagination.tsx

@@ -1,5 +1,4 @@
 import type { PageData, PageHelpers } from '#types'
-
 import { getPaginationPages } from '#utils'
 
 export default (
@@ -42,21 +41,28 @@ export default (
                Prev
             </li>
           )}
-        {getPaginationPages(pagination?.totalPages!, pagination?.page!).map((
-          index,
-        ) => (
-          <li key={index}>
-            <a
-              href={urlFilter!(`/blog${index > 1 && `/${index}` || ``}`)}
-              className={`pagination__item ${
-                pagination?.page === index ? 'is-active' : ''
-              }`}
-              {...(pagination?.page === index && { ariaCurrent: true })}
-            >
-              {index}
-            </a>
-          </li>
-        ))}
+        {pagination &&
+          getPaginationPages(pagination.totalPages, pagination.page).map((
+            pageNumber,
+            idx,
+          ) => {
+            const isNumber = !isNaN(pageNumber)
+            const isActive = pagination?.page === pageNumber
+
+            return (
+              <li key={idx}>
+                <a
+                  {...(isActive && { ariaCurrent: true })}
+                  {...(!isNumber
+                    ? { role: 'link', 'aria-disabled': true }
+                    : { href: urlFilter!(`/blog/${pageNumber}`) })}
+                  className={`pagination__item ${isActive ? 'is-active' : ''}`}
+                >
+                  {isNumber ? pageNumber : '...'}
+                </a>
+              </li>
+            )
+          })}
         {pagination?.next
           ? (
             <li>

src/_includes/scss/components/_pagination.scss

@@ -17,7 +17,12 @@
     display: flex;
     align-items: center;
     padding: 0.125rem 0.5rem;
-  
+
+    &[aria-disabled="true"] {
+      pointer-events: none;
+      cursor: default;
+    }
+
     &.is-active {
       border: map.get($pagination, active-border);
       border-radius: map.get($pagination, active-border-radius);

src/_includes/utils/getPaginationPages.ts

@@ -2,8 +2,8 @@
 export function getPaginationPages(
   maxPages: number,
   currentPage: number,
-): Array<number | string> {
-  const pages: Array<number | string> = []
+): number[] {
+  const pages: number[] = []
 
   for (let i = 1; i <= maxPages; i++) {
     if (
@@ -13,8 +13,8 @@ export function getPaginationPages(
       (maxPages - currentPage < 3 && maxPages - i <= 3)
     ) {
       pages.push(i)
-    } else if (pages[pages.length - 1] !== '...') {
-      pages.push('...')
+    } else if (!isNaN(pages[pages.length - 1])) {
+      pages.push(NaN)
     }
   }
 

src/_includes/utils/index.ts

@@ -1,5 +1,5 @@
 export * from './capitalize.ts'
 export * from './getPaginationPages.ts'
 export * from './isEmptyArray.ts'
-export * from './truncateString.ts'
 export * from './isString.ts'
+export * from './truncateString.ts'