@primer/doctocat-nextjs 0.5.2-rc.3d762f6 → 0.5.2-rc.7482d32

package/CHANGELOG.md

@@ -8,11 +8,15 @@
 
   - Added active header link as sidebar heading.
   - Made active header the root item of breadcrumbs, if available.
-  - Made sidebar group headins link to the index page.
+  - Made sidebar group headlines link to the index page.
 
-- [#39](https://github.com/primer/doctocat-nextjs/pull/39) [`9090a35`](https://github.com/primer/doctocat-nextjs/commit/9090a3516de8657321ff2217e944cca6466ec9a0) Thanks [@danielguillan](https://github.com/danielguillan)! - Updated index pages to use a grid of Cards with thumbnails
+- [#39](https://github.com/primer/doctocat-nextjs/pull/39) [`9090a35`](https://github.com/primer/doctocat-nextjs/commit/9090a3516de8657321ff2217e944cca6466ec9a0) Thanks [@danielguillan](https://github.com/danielguillan)! - Updated index pages to use a grid of Cards with thumbnails.
 
-- [#38](https://github.com/primer/doctocat-nextjs/pull/38) [`e950c9a`](https://github.com/primer/doctocat-nextjs/commit/e950c9af9ad410025437510113172e207e2e30a2) Thanks [@danielguillan](https://github.com/danielguillan)! - Updated Primer Brand library to v0.54.0
+  Use `thumbnail` and `thumbnail_darkMode` to set custom thumbnail URLs for light and dark color modes respectively.
+
+- [#38](https://github.com/primer/doctocat-nextjs/pull/38) [`e950c9a`](https://github.com/primer/doctocat-nextjs/commit/e950c9af9ad410025437510113172e207e2e30a2) Thanks [@danielguillan](https://github.com/danielguillan)! - Updated Primer Brand library to `v0.54.0`
+
+- [#42](https://github.com/primer/doctocat-nextjs/pull/42) [`c9c2d16`](https://github.com/primer/doctocat-nextjs/commit/c9c2d16aa12ad56c71ec5ddbc008a028a378d81d) Thanks [@rezrah](https://github.com/rezrah)! - Added placeholder images to the Index page cards, where `thumbnail` and `thumbnail_darkMode` aren't provided through the frontmatter
 
 ## 0.5.1
 

package/components/layout/index-cards/IndexCards.tsx

@@ -1,7 +1,20 @@
-import React from 'react'
+import React, {useCallback, useRef} from 'react'
 import {Card, Grid} from '@primer/react-brand'
 import {DocsItem} from '../../../types'
 import {useColorMode} from '../../context/color-modes/useColorMode'
+import type {StaticImageData} from 'next/image'
+import placeholderDarkOneThumb from './images/dark-1.png'
+import placeholderDarkTwoThumb from './images/dark-2.png'
+import placeholderDarkThreeThumb from './images/dark-3.png'
+import placeholderDarkFourThumb from './images/dark-4.png'
+import placeholderDarkFiveThumb from './images/dark-5.png'
+import placeholderDarkSixThumb from './images/dark-6.png'
+import placeholderLightOneThumb from './images/light-1.png'
+import placeholderLightTwoThumb from './images/light-2.png'
+import placeholderLightThreeThumb from './images/light-3.png'
+import placeholderLightFourThumb from './images/light-4.png'
+import placeholderLightFiveThumb from './images/light-5.png'
+import placeholderLightSixThumb from './images/light-6.png'
 
 import styles from './IndexCards.module.css'
 
@@ -10,7 +23,26 @@ type IndexCardsProps = {
   folderData: DocsItem[]
 }
 
+const darkModePlaceholderThumbs = [
+  placeholderDarkOneThumb,
+  placeholderDarkTwoThumb,
+  placeholderDarkThreeThumb,
+  placeholderDarkFourThumb,
+  placeholderDarkFiveThumb,
+  placeholderDarkSixThumb,
+] as unknown as StaticImageData[]
+
+const lightModePlaceholderThumbs = [
+  placeholderLightOneThumb,
+  placeholderLightTwoThumb,
+  placeholderLightThreeThumb,
+  placeholderLightFourThumb,
+  placeholderLightFiveThumb,
+  placeholderLightSixThumb,
+] as unknown as StaticImageData[]
+
 export function IndexCards({route, folderData}: IndexCardsProps) {
+  const lastPlaceholderIndexRef = useRef<number>(-1)
   // We don't want to show children of these pages. E.g. tabbed pages
   const onlyDirectChildren = folderData.filter(item => {
     // Normalize paths regardless of trailing slash enablement
@@ -30,15 +62,31 @@ export function IndexCards({route, folderData}: IndexCardsProps) {
 
   const {colorMode} = useColorMode()
 
+  // This is a better approach to straight randomisation, as it ensures that no adjacent placeholder images will be the same.
+  const getNextPlaceholderIndex = useCallback((placeholderArray: StaticImageData[]): StaticImageData => {
+    if (placeholderArray.length <= 1) {
+      return placeholderArray[0]
+    }
+
+    const numImagesByIndex = placeholderArray.map((_, index) => index)
+
+    const filteredIndexes = numImagesByIndex.filter(index => index !== lastPlaceholderIndexRef.current)
+
+    const nextIndex = filteredIndexes[Math.floor(Math.random() * filteredIndexes.length)]
+
+    lastPlaceholderIndexRef.current = nextIndex
+    return placeholderArray[nextIndex]
+  }, [])
+
   return (
     <Grid className={styles.IndexCards}>
       {filteredData.map((item: DocsItem) => {
         if (item.type !== 'doc' || !item.frontMatter) return null
 
         const thumbnailUrl =
-          colorMode === 'dark' && item.frontMatter.thumbnail_darkMode
-            ? item.frontMatter.thumbnail_darkMode
-            : item.frontMatter.thumbnail
+          colorMode === 'dark'
+            ? item.frontMatter.thumbnail_darkMode || getNextPlaceholderIndex(darkModePlaceholderThumbs).src
+            : item.frontMatter.thumbnail || getNextPlaceholderIndex(lightModePlaceholderThumbs).src
 
         return (
           <Grid.Column span={{xsmall: 12, small: 12, medium: 12, large: 6, xlarge: 4}} key={item.frontMatter.title}>

package/global.types.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png' {
+  const content: string
+
+  export default content
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/doctocat-nextjs",
-  "version": "0.5.2-rc.3d762f6",
+  "version": "0.5.2-rc.7482d32",
   "description": "A Next.js theme for building Primer documentation sites",
   "main": "index.js",
   "type": "module",