[v4] fix colorSchema for HEX format, add bottomContent prop for `…

…<Wrapper>` component (#3890)

* fix `colorSchema` for hex format with 4 chars, e.g. #111

* make `nextThemes` optional prop, to avoid ts errors

* add `flex flex-col` classes for main `<article>` to have possibility move content, e.g. after pagination

* Update .changeset/short-bulldogs-matter.md

* lint

* aa

.changeset/moody-jars-film.md

@@ -0,0 +1,6 @@
+---
+"nextra-theme-docs": patch
+"nextra": patch
+---
+
+add `bottomContent` prop for `<Wrapper>` component, e.g. to put some content after pagination in `nextra-theme-docs`

.changeset/sharp-foxes-carry.md

@@ -0,0 +1,7 @@
+---
+"nextra-theme-blog": patch
+"nextra-theme-docs": patch
+"nextra": patch
+---
+
+fix `colorSchema` for HEX format with 4 chars, e.g. `#111`

.changeset/short-bulldogs-matter.md

@@ -0,0 +1,5 @@
+---
+"nextra-theme-blog": patch
+---
+
+make nextThemes optional prop, to avoid ts errors

packages/nextra-theme-blog/src/components/layout.tsx

@@ -14,7 +14,7 @@ export const Footer: FC<{
 
 export const Layout: FC<{
   children: ReactNode
-  nextThemes: Omit<ComponentProps<typeof ThemeProvider>, 'children'>
+  nextThemes?: Omit<ComponentProps<typeof ThemeProvider>, 'children'>
   banner?: ReactElement
 }> = ({ children, nextThemes, banner }) => {
   return (

packages/nextra-theme-docs/src/mdx-components/index.tsx

@@ -82,7 +82,7 @@ const DEFAULT_COMPONENTS = getNextraMDXComponents({
       {...props}
     />
   ),
-  wrapper({ toc, children, metadata, ...props }) {
+  wrapper({ toc, children, metadata, bottomContent, ...props }) {
     // @ts-expect-error fixme
     toc = toc.map(item => ({
       ...item,
@@ -96,7 +96,11 @@ const DEFAULT_COMPONENTS = getNextraMDXComponents({
       >
         <Sidebar toc={toc} />
 
-        <ClientWrapper toc={toc} metadata={metadata}>
+        <ClientWrapper
+          toc={toc}
+          metadata={metadata}
+          bottomContent={bottomContent}
+        >
           <SkipNavContent />
           <main
             data-pagefind-body={

packages/nextra-theme-docs/src/mdx-components/wrapper.client.tsx

@@ -6,7 +6,12 @@ import { cloneElement, useEffect } from 'react'
 import { Breadcrumb, Pagination, TOC } from '../components'
 import { setToc, useConfig, useThemeConfig } from '../stores'
 
-export const ClientWrapper: MDXWrapper = ({ toc, children, metadata }) => {
+export const ClientWrapper: MDXWrapper = ({
+  toc,
+  children,
+  metadata,
+  bottomContent
+}) => {
   const {
     activeType,
     activeThemeContext: themeContext,
@@ -57,6 +62,7 @@ export const ClientWrapper: MDXWrapper = ({ toc, children, metadata }) => {
           <div className="x:mt-16" />
         )}
         {themeContext.pagination && activeType !== 'page' && <Pagination />}
+        {bottomContent}
       </article>
     </>
   )

packages/nextra/src/client/components/head.tsx

@@ -12,25 +12,40 @@ const darkLightSchema = z
   ])
   .transform(v => (typeof v === 'number' ? { dark: v, light: v } : v))
 
-function hexToRgb(hex: `#${string}`): string {
-  const bigint = Number.parseInt(hex.slice(1), 16)
+function hexToRgb(hex: string): string {
+  hex = hex.slice(1)
+  if (hex.length === 3) {
+    hex = hex
+      // eslint-disable-next-line unicorn/prefer-spread -- https://github.com/sindresorhus/eslint-plugin-unicorn/issues/2521#issuecomment-2564033898
+      .split('')
+      .map(char => char + char)
+      .join('')
+  }
+  const bigint = Number.parseInt(hex, 16)
   const r = (bigint >> 16) & 255
   const g = (bigint >> 8) & 255
   const b = bigint & 255
   return `${r},${g},${b}`
 }
 
+const RGB_RE = /^rgb\((?<rgb>.*?)\)$/
+const HEX_RE = /^#(?<hex>[0-9a-f]{3,6})$/i
+
 const colorSchema = z
-  .union([
-    z.string().startsWith('#'),
-    z.string().startsWith('rgb('),
-    z.string().regex(/^\d{1,3},\d{1,3},\d{1,3}$/)
-  ])
+  .string()
+  .refine(str => {
+    if (HEX_RE.test(str) || RGB_RE.test(str)) {
+      return true
+    }
+    throw new Error(
+      'Color format should be in HEX or RGB format. E.g. #000, #112233 or rgb(255,255,255)'
+    )
+  })
   .transform(value => {
     if (value.startsWith('#')) {
-      return hexToRgb(value as `#${string}`)
+      return hexToRgb(value)
     }
-    const rgb = value.match(/^rgb\((?<rgb>.*?)\)$/)?.groups!.rgb
+    const rgb = value.match(RGB_RE)?.groups!.rgb
     if (rgb) {
       return rgb.replaceAll(' ', '')
     }

packages/nextra/src/types.ts

@@ -99,6 +99,7 @@ export type MDXWrapper = FC<{
   toc: Heading[]
   children: ReactNode
   metadata: NextraMetadata
+  bottomContent?: ReactNode
 }>
 
 export type MetaRecord = Record<string, z.infer<typeof metaSchema>>