# Debrief project 20

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.

```tsx 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). ![footer-logo-typeahead.png](/assets/footer-logo-typeahead.a97e1166c0306b6ba3333df4a8469b1e9621d613c7408a9313bf4151e2abd0d0.5091b66b.png)
- 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

1. Missing eject component in Reunite. ![eject-component.png](/assets/eject-component.3b2120285b735eb892b460a907c09fc9d4bb3ca3429fc63a8d6fe4ea4d0e5591.5091b66b.png)
2. `preview-docs` and `build-docs` should probably move to the bottom of the list of "Documentation" commands for the CLI commands index page.
3. Temporary error -- it disappeared.
 Stack trace of Data dependency not cached ahead of time error 
```bash
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
```
4. Had to use an image tag instead of the `FooterLogo` component.
5. X icon displayed poorly in the "icons". ![x-icon-issue.png](/assets/x-icon-issue.0992751dbcbdb09fab2ecf949bd37274c40803ca94caa94b6fd3ac31d450eff5.5091b66b.png)
6. 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. ![footer-dark-mode.png](/assets/footer-dark-mode.66adbfd89ffbc5d9c2e2e3b530fcd16ed50f50e1b7a6fb5a540206293884a1e1.5091b66b.png)
7. After figuring out how to do a color mode image, couldn't figure out how to pass a "width" property to it.
8. 🐛 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.
9. Footer `srcSet` documentation is wrong. `srcSet` can be used as a prop on the `icon`.