feat: add links in the homepage #11
Conversation
… website. this adds material-ui to the project
…re's 1 column, capitalized description-text (not uppercase);
…e grind-container;
…at/add-mui-homepageLinks
| import {useHistory} from '@docusaurus/router'; | ||
|
|
||
| export default function HomepageFeatures() { | ||
| const list = homeLinksList; |
| <Button | ||
| variant="contained" | ||
| onClick={() => { | ||
| console.log('linkName: ', linkName); |
There was a problem hiding this comment.
consider moving event handlers outside and maybe even use useCallback
| history.push(linkName); | ||
| } | ||
| }} | ||
| sx={{ |
There was a problem hiding this comment.
consider moving style objects outside the JSX
|
|
||
| const HomepageCard = ({title, text, img}) => { | ||
| console.log('got img: ', img); | ||
| const blue = '#29296E'; |
There was a problem hiding this comment.
export this color from css file?
…m.css: override some '--ifm-color' variables;
| } | ||
| }; | ||
|
|
||
| const renderCards = () => { |
There was a problem hiding this comment.
Move renderCards inside the HomepageFeatures component
| onKeyDown={e => handleOnKeyDown(e, linkName)} | ||
| sx={overrideLinkStyle} | ||
| > | ||
| <HomepageCard {...props}></HomepageCard> |
There was a problem hiding this comment.
| <HomepageCard {...props}></HomepageCard> | |
| <HomepageCard {...props}/> |
| : null; | ||
| }; | ||
|
|
||
| const HomepageFeatures = () => { |
There was a problem hiding this comment.
| const HomepageFeatures = () => { | |
| export const HomepageFeatures = () => { |
| import {CardContent, CardMedia, Typography} from '@mui/material'; | ||
| import {Blue} from '../../config/colors'; | ||
|
|
||
| const HomepageCard = ({title, text, img}) => { |
There was a problem hiding this comment.
| const HomepageCard = ({title, text, img}) => { | |
| export const HomepageCard = ({title, text, img}) => { |
src/config/colors.js
Outdated
| @@ -0,0 +1,9 @@ | |||
| export const Blue = { | |||
There was a problem hiding this comment.
'colors' should be reused between many files. Overriding mui-components is much easier using the 'sx' prop, than creating a ccs and importing it, and making sure in it to override relevant classes as seen on the browser (need to manually search the dom).
…t only with 'default export'; move back hook 'useHistory' to the top of the component;
| ); | ||
| }; | ||
|
|
||
| export default HomepageCard; |
| ); | ||
| }; | ||
|
|
||
| export default HomepageFeatures; |
…t', leave only named export for the Homepage-comps
Add 6 cards to the Homepage, which on-click navigate to pages in the website. Adds material-ui dependency to the project.
Defined to have 3 columns for medium+ screens, so It's preferable to have at least 3 cards (it can be any number).
Cards are defined by the file: src > config > home.json.