Debrief project 20
Copy for LLM
Copy page as Markdown for LLMs
View as Markdown
Open this page as Markdown
Open in ChatGPT
Get insights from ChatGPT
Open in Claude
Get insights from Claude
Connect to Cursor
Install MCP server on Cursor
Connect to VS Code
Install MCP server on VS Code

Training exercise

What made you smile?

Ejecting the component was fine from the CLI (but the way we did it isn't well described in the docs).
This color mode images guide helped me: https://redocly.com/docs/realm/extend/how-to/color-mode-images (but I couldn't figure out how to change the size of the image -- it renders too big for the footer)

Solving the logo size issue with a wrapper and styles.

Footer.tsx

<FooterLogoSection>
  <Image srcSet={`${LightLogo} light, ${DarkLogo} dark`} className="footer-logo" />
</FooterLogoSection>
//        ...
const FooterLogoSection = styled.div`
  margin-bottom: var(--spacing-md);
  img {
    max-width: 132px;
  }
  @media screen and (min-width: ${breakpoints.small}) {
    margin-bottom: 0;
  }
`;

What was confusing?

Reunite has autocomplete suggestions for footer logo (but it doesn't work).
Going from local to Reunite, I copied the "Footer" folder but directly to @theme instead of @theme/components.
A FooterLogo component that we couldn't figure out how to use was confusing.
Importing the image was a little confusing for me.
I couldn't figure out how to do light/dark mode logos in the footer.
The CLI docs don't suggest npx @redocly/cli eject component.

Issues

Missing eject component in Reunite.
preview-docs and build-docs should probably move to the bottom of the list of "Documentation" commands for the CLI commands index page.

Temporary error -- it disappeared.

Stack trace of Data dependency not cached ahead of time error

Data dependency not cached ahead of time: graphql-docs-products/api-hub/vendors/schema.docs.graphql
ERROR
Error: Data dependency not cached ahead of time: graphql-docs-products/api-hub/vendors/schema.docs.graphql
at i2.getSync (file:///home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/@redocly/realm/dist/server/esbuild/cache/server/chunks/chunk-3HTFPKHS.js:249:13)
at file:///home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/@redocly/realm/dist/server/esbuild/cache/server/chunks/chunk-3HTFPKHS.js:3807:47
at file:///home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/@redocly/realm/dist/server/esbuild/cache/server/chunks/chunk-3HTFPKHS.js:47:71
at Array.map (<anonymous>)
at y (file:///home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/@redocly/realm/dist/server/esbuild/cache/server/chunks/chunk-3HTFPKHS.js:47:48)
at _R.loadSync (file:///home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/@redocly/realm/dist/server/esbuild/cache/server/chunks/chunk-3HTFPKHS.js:3807:16)
at E4 (file:///home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/@redocly/realm/dist/server/esbuild/cache/server/chunks/chunk-3HTFPKHS.js:3412:13)
at be (file:///home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/@redocly/realm/dist/server/esbuild/cache/server/server-entry.js?Wed%20Sep%2025%202024%2009:09:47%20GMT+0000%20(Coordinated%20Universal%20Time):1660:14)
at renderWithHooks (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5662:16)
at renderIndeterminateComponent (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5735:15)
at renderElement (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
at renderNodeDestructiveImpl (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
at renderNodeDestructive (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
at renderContextProvider (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5924:3)
at renderElement (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6021:11)
at renderNodeDestructiveImpl (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
at renderNodeDestructive (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
at renderIndeterminateComponent (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5789:7)
at renderElement (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
at renderNodeDestructiveImpl (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
at renderNodeDestructive (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
at finishClassComponent (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5692:3)
at renderClassComponent (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5700:3)
at renderElement (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5947:7)
at renderNodeDestructiveImpl (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
at renderNodeDestructive (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
at renderIndeterminateComponent (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5789:7)
at renderElement (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
at renderNodeDestructiveImpl (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
at renderNodeDestructive (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
at renderContextProvider (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5924:3)
at renderElement (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6021:11)
at renderNodeDestructiveImpl (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
at renderNodeDestructive (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
at renderContextProvider (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5924:3)
at renderElement (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6021:11)
at renderNodeDestructiveImpl (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
at renderNodeDestructive (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
at renderIndeterminateComponent (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5789:7)
at renderElement (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
at renderNodeDestructiveImpl (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
at renderNodeDestructive (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
at renderContextProvider (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5924:3)
at renderElement (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6021:11)
at renderNodeDestructiveImpl (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
at renderNodeDestructive (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
at renderContextProvider (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5924:3)
at renderElement (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6021:11)
at renderNodeDestructiveImpl (/home/child_process/data/repos/org01j0wt03vft6qrqdcqgsc62ez8/prj01j7pcbvce8h9c9a6aehap9z6z/project20/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
at renderNodeDestructive (/home/child_process

Had to use an image tag instead of the FooterLogo component.
X icon displayed poorly in the "icons".
Color mode issues with the footer social icons (except Youtube because red looks fine in both light and dark mode). Also, couldn't figure out how to do the logo in dark mode.
After figuring out how to do a color mode image, couldn't figure out how to pass a "width" property to it.
🐛 With the Image component when we use srcSet we cannot also pass a className because we need to target a max-width of 132 to the logo image.
Footer srcSet documentation is wrong. srcSet can be used as a prop on the icon.

Debrief project 20CopyCopy for LLMCopy page as Markdown for LLMsView as MarkdownOpen this page as MarkdownOpen in ChatGPTGet insights from ChatGPTOpen in ClaudeGet insights from ClaudeConnect to CursorInstall MCP server on CursorConnect to VS CodeInstall MCP server on VS Code

What made you smile?

What was confusing?

Issues

Was this helpful?

Debrief project 20
Copy for LLM
Copy page as Markdown for LLMs
View as Markdown
Open this page as Markdown
Open in ChatGPT
Get insights from ChatGPT
Open in Claude
Get insights from Claude
Connect to Cursor
Install MCP server on Cursor
Connect to VS Code
Install MCP server on VS Code