[nextra-theme-blog]: fix `Application error: a client-side exception …

…has occurred` when invalid date was provided in frontmatter + TESTS (#612)

Co-authored-by: Shu Ding <[email protected]>

.changeset/young-frogs-travel.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-blog': patch
+---
+
+[nextra-theme-blog]: fix `Application error: a client-side exception has occurred` when invalid date was provided in frontmatter + TESTS

packages/nextra-theme-blog/__test__/date.spec.ts

@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest'
+import { isValidDate } from '../src/utils/date'
+
+describe('date', () => {
+  describe('isValidDate()', () => {
+    it('should be valid', () => {
+      expect(isValidDate('2022-07-28')).toBe(true)
+      expect(isValidDate('2022-07-28T10:40')).toBe(true)
+
+      expect(isValidDate('2022/10/1')).toBe(true)
+      expect(isValidDate('2016/5/3 10:10')).toBe(true)
+      expect(isValidDate('2022-07-29T20:49:45.112Z')).toBe(true)
+    })
+    it('should be invalid', () => {
+      expect(isValidDate('2022-07-28 10:40')).toBe(false)
+    })
+  })
+})

packages/nextra-theme-blog/package.json

@@ -28,6 +28,7 @@
     "dev:tailwind": "cross-env TAILWIND_MODE=watch pnpm postcss src/styles.css -o style.css --watch",
     "prepublishOnly": "pnpm build",
     "clean": "rimraf ./dist ./style.css",
+    "test": "vitest run",
     "format": "prettier --ignore-path ../../.gitignore --write --list-different ."
   },
   "dependencies": {

packages/nextra-theme-blog/src/blog-context.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react'
 import { createContext, PropsWithChildren } from 'react'
 import { LayoutProps } from './types'
+import { isValidDate } from './utils/date'
 
 const BlogContext = createContext<LayoutProps | null>(null)
 
@@ -9,6 +10,11 @@ export const BlogProvider: React.FC<PropsWithChildren<LayoutProps>> = ({
   children,
   opts
 }) => {
+  const { date } = opts.meta
+
+  if (date && !isValidDate(date)) {
+    throw new Error(`Invalid date "${date}". Provide date in "YYYY/M/D", "YYYY/M/D H:m", "YYYY-MM-DD", "[YYYY-MM-DD]T[HH:mm]" or "[YYYY-MM-DD]T[HH:mm:ss.SSS]Z" format.`)
+  }
   return (
     <BlogContext.Provider value={{ config, opts }}>
       {children}

packages/nextra-theme-blog/src/utils/collect.ts

@@ -1,6 +1,6 @@
 import { PageMapItem } from 'nextra'
 import { LayoutProps } from '../types'
-import sortDate from './sort-date'
+import { sortDate } from './date'
 import traverse from './traverse'
 
 const isNav = (page: PageMapItem) => {

packages/nextra-theme-blog/src/utils/date.ts

@@ -0,0 +1,15 @@
+import { PageMapItem } from 'nextra'
+
+export const sortDate = (a: PageMapItem, b: PageMapItem): number => {
+  if (!a.frontMatter?.date || !b.frontMatter?.date) return -1
+
+  return (
+    new Date(b.frontMatter.date).getTime() -
+    new Date(a.frontMatter.date).getTime()
+  )
+}
+
+const DATE_REGEX = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2})?(:\d{2}\.\d{3}Z)?$/
+const DATE_REGEX_WITH_SLASH = /^\d{4}\/\d{1,2}\/\d{1,2}( \d{1,2}:\d{1,2})?$/
+
+export const isValidDate = (date: string): boolean => DATE_REGEX.test(date) || DATE_REGEX_WITH_SLASH.test(date)