@primer/doctocat-nextjs 0.5.1 → 0.5.2-rc.3e8f242

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @primer/doctocat-nextjs
2
2
 
3
+ ## 0.5.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#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
8
+
9
+ - [#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
10
+
3
11
  ## 0.5.1
4
12
 
5
13
  ### Patch Changes
@@ -1,12 +1,5 @@
1
- .heading a {
2
- color: var(--brand-InlineLink-color-rest);
3
- text-decoration: none;
4
- }
5
-
6
- .heading a:hover {
7
- text-decoration: underline;
8
- }
9
-
10
- .heading a:active {
11
- color: var(--brand-InlineLink-color-pressed);
1
+ .IndexCards {
2
+ --brand-Grid-spacing-column-gap: var(--base-size-24);
3
+ --brand-Grid-spacing-row: var(--base-size-24);
4
+ padding-inline: 0;
12
5
  }
@@ -1,9 +1,9 @@
1
1
  import React from 'react'
2
- import {Heading, Stack, Text} from '@primer/react-brand'
2
+ import {Card, Grid} from '@primer/react-brand'
3
+ import {DocsItem} from '../../../types'
4
+ import {useColorMode} from '../../context/color-modes/useColorMode'
3
5
 
4
- import Link from 'next/link'
5
6
  import styles from './IndexCards.module.css'
6
- import {DocsItem} from '../../../types'
7
7
 
8
8
  type IndexCardsProps = {
9
9
  route: string
@@ -27,23 +27,29 @@ export function IndexCards({route, folderData}: IndexCardsProps) {
27
27
  })
28
28
 
29
29
  const filteredData = onlyDirectChildren.filter(item => item.type === 'doc')
30
+
31
+ const {colorMode} = useColorMode()
32
+
30
33
  return (
31
- <Stack direction="vertical" padding="none" gap="spacious">
34
+ <Grid className={styles.IndexCards}>
32
35
  {filteredData.map((item: DocsItem) => {
33
36
  if (item.type !== 'doc' || !item.frontMatter) return null
34
37
 
38
+ const thumbnailUrl =
39
+ colorMode === 'dark' && item.frontMatter.thumbnail_darkMode
40
+ ? item.frontMatter.thumbnail_darkMode
41
+ : item.frontMatter.thumbnail
42
+
35
43
  return (
36
- <Stack direction="vertical" padding="none" gap="condensed" key={item.frontMatter.title}>
37
- <Heading as="h2" size="6" className={styles.heading}>
38
- <Link href={item.route} legacyBehavior passHref>
39
- {item.frontMatter.title}
40
- </Link>
41
- </Heading>
42
-
43
- {item.frontMatter.description && <Text as="p">{item.frontMatter.description}</Text>}
44
- </Stack>
44
+ <Grid.Column span={{xsmall: 12, small: 12, medium: 12, large: 6, xlarge: 4}} key={item.frontMatter.title}>
45
+ <Card href={item.route} hasBorder>
46
+ <Card.Image src={thumbnailUrl} alt="" aspectRatio="4:3" />
47
+ <Card.Heading>{item.frontMatter.title}</Card.Heading>
48
+ {item.frontMatter.description && <Card.Description>{item.frontMatter.description}</Card.Description>}
49
+ </Card>
50
+ </Grid.Column>
45
51
  )
46
52
  })}
47
- </Stack>
53
+ </Grid>
48
54
  )
49
55
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/doctocat-nextjs",
3
- "version": "0.5.1",
3
+ "version": "0.5.2-rc.3e8f242",
4
4
  "description": "A Next.js theme for building Primer documentation sites",
5
5
  "main": "index.js",
6
6
  "type": "module",
@@ -20,7 +20,7 @@
20
20
  "@next/mdx": "15.2.4",
21
21
  "@primer/octicons-react": "19.15.1",
22
22
  "@primer/react": "^37.11.0",
23
- "@primer/react-brand": "0.49.0",
23
+ "@primer/react-brand": "0.54.0",
24
24
  "@types/lodash.debounce": "^4.0.9",
25
25
  "framer-motion": "12.4.0",
26
26
  "lodash.debounce": "^4.0.8",
package/types.ts CHANGED
@@ -38,4 +38,6 @@ export type FrontMatter = {
38
38
  timestamp?: number
39
39
  title?: string
40
40
  [key: string]: unknown
41
+ thumbnail?: string
42
+ thumbnail_darkMode?: string
41
43
  }