feat: add links in the homepage

.eslintignore

@@ -0,0 +1,5 @@
+build
+node_modules
+.docusaurus
+*.css
+*.svg

.eslintrc.json

@@ -0,0 +1,41 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "jest": true
+  },
+  "globals": {
+    "process": true,
+    "global": true
+  },
+  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "react-hooks", "prettier"],
+  "rules": {
+    "prettier/prettier": "error",
+    "react/jsx-sort-props": [
+      2,
+      {
+        "callbacksLast": true,
+        "shorthandFirst": true,
+        "reservedFirst": true
+      }
+    ],
+    "prefer-destructuring": [
+      "warn",
+      {
+        "object": true,
+        "array": false
+      }
+    ],
+    "no-console": "warn",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "off"
+  }
+}

docusaurus.config.js

@@ -27,6 +27,7 @@ const config = {
       crossorigin: 'anonymous'
     }
   ],
+
   presets: [
     [
       'classic',

package.json

@@ -33,7 +33,11 @@
   "dependencies": {
     "@docusaurus/core": "2.0.0-beta.14",
     "@docusaurus/preset-classic": "2.0.0-beta.14",
+    "@docusaurus/types": "^2.0.0-beta.15",
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
     "@mdx-js/react": "^1.6.21",
+    "@mui/material": "^5.4.2",
     "clsx": "^1.1.1",
     "hast-util-is-element": "^1.1.0",
     "prism-react-renderer": "^1.2.1",

src/components/HomepageCard/HomepageCard.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import {CardContent, CardMedia, Typography} from '@mui/material';
+
+export const HomepageCard = ({title, text, img}) => {
+  return (
+    <>
+      <CardMedia
+        component="img"
+        height="60"
+        title={title}
+        image={`./img/${img}`}
+      />
+      <CardContent>
+        <Typography
+          variant="h5"
+          component="div"
+          sx={{color: 'var(--ifm-color-primary-darkest)'}}
+        >
+          {title}
+        </Typography>
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'var(--ifm-color-primary-darkest)',
+            textTransform: 'capitalize'
+          }}
+        >
+          {text}
+        </Typography>
+      </CardContent>
+    </>
+  );
+};

src/components/HomepageFeatures/HomepageFeatures.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import styles from './HomepageFeatures.module.css';
+import {Button, Grid} from '@mui/material';
+import {HomepageCard} from '../HomepageCard/HomepageCard';
+import list from '../../config/home.json';
+import {useHistory} from '@docusaurus/router';
+
+const overrideLinkStyle = {
+  flexFlow: 'column nowrap',
+  width: '100%',
+  minHeight: '100%',
+  backgroundColor: '#fff',
+  [':hover']: {
+    boxShadow: '-1px 5px 19px 0px rgba(0,0,0,0.3)',
+    backgroundColor: '#fff'
+  }
+};
+
+export const HomepageFeatures = () => {
+  const history = useHistory();
+
+  const renderCards = () => {
+    const handleOnClick = linkName => history.push(linkName);
+    const handleOnKeyDown = (event, linkName) => {
+      if (event.key === 'Enter') {
+        history.push(linkName);
+      }
+    };
+    return list.length
+      ? list.map(({linkName, ...props}, idx) => (
+          <Grid key={idx} item xs={8} md={4}>
+            <Button
+              variant="contained"
+              onClick={() => handleOnClick(linkName)}
+              onKeyDown={e => handleOnKeyDown(e, linkName)}
+              sx={overrideLinkStyle}
+            >
+              <HomepageCard {...props} />
+            </Button>
+          </Grid>
+        ))
+      : null;
+  };
+
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          <Grid
+            container
+            spacing={4}
+            sx={{justifyContent: 'center', padding: '0 24px'}}
+          >
+            {renderCards()}
+          </Grid>
+        </div>
+      </div>
+    </section>
+  );
+};

src/config/home.json

@@ -0,0 +1,38 @@
+[
+  {
+    "linkName": "docs/CLI/commands",
+    "img": "undraw_docusaurus_mountain.svg",
+    "title": "what is starkNet",
+    "text": "intrudaction to starknet: how it works, main concepts glossary, FAQs"
+  },
+  {
+    "linkName": "docs/CLI/commands",
+    "img": "undraw_docusaurus_tree.svg",
+    "title": "building on starknet",
+    "text": "useful link to help write and deploy your own contracts on starknet"
+  },
+  {
+    "linkName": "docs/CLI/commands",
+    "img": "undraw_docusaurus_react.svg",
+    "title": "dev tools",
+    "text": "tools for development and deployment"
+  },
+  {
+    "linkName": "docs/CLI/commands",
+    "img": "undraw_docusaurus_mountain.svg",
+    "title": "discussions",
+    "text": "starknet community discussions"
+  },
+  {
+    "linkName": "docs/CLI/commands",
+    "img": "undraw_docusaurus_tree.svg",
+    "title": "block explorer",
+    "text": "a link to Voyager, starknet alph block explorer"
+  },
+  {
+    "linkName": "docs/CLI/commands",
+    "img": "undraw_docusaurus_react.svg",
+    "title": "latest updates",
+    "text": "stay up to date with all the latest blog posts, news, and events"
+  }
+]

src/css/custom.css

@@ -6,16 +6,20 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: rgb(33, 175, 144);
-  --ifm-color-primary-darker: rgb(31, 165, 136);
-  --ifm-color-primary-darkest: rgb(26, 136, 112);
-  --ifm-color-primary-light: rgb(70, 203, 174);
-  --ifm-color-primary-lighter: rgb(102, 212, 189);
-  --ifm-color-primary-lightest: rgb(146, 224, 208);
+  --ifm-color-primary: #3850e9;
+  --ifm-color-primary-dark: rgb(25, 45, 160);
+  --ifm-color-primary-darker: rgb(14, 30, 122);
+  --ifm-color-primary-darkest: rgb(3, 13, 79);
+  --ifm-color-primary-light: rgb(126, 141, 238);
+  --ifm-color-primary-lighter: rgb(170, 179, 239);
+  --ifm-color-primary-lightest: rgb(243, 236, 247);
   --ifm-code-font-size: 95%;
 }
 
+.footer--dark {
+  --ifm-footer-background-color: rgb(10, 15, 60);
+}
+
 .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.1);
   display: block;

src/pages/index.js

@@ -4,7 +4,7 @@ import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './index.module.css';
-import HomepageFeatures from '../components/HomepageFeatures';
+import {HomepageFeatures} from '../components/HomepageFeatures/HomepageFeatures';
 
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();