Merge pull request #4 from Devteamvietnam/dev

add code design blog basic homepage

.vscode/settings.json

@@ -5,6 +5,7 @@
     "source.fixAll.eslint": true
   },
   "cSpell.words": [
+    "bgcolor",
     "flowtype",
     "Parens",
     "precached",

package.json

@@ -15,12 +15,15 @@
     "prettier:fix": "prettier --write \"src/**/(*.tsx|*.ts|*.jsx|*.js|*.scss|*.css)\""
   },
   "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/icons-material": "^5.10.3",
+    "@mui/material": "^5.10.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
-    "reactstrap": "^9.1.4",
     "redux": "^4.2.0",
     "redux-thunk": "^2.4.1",
     "typescript": "^4.8.2",
@@ -38,7 +41,6 @@
     "@typescript-eslint/eslint-plugin": "^5.36.1",
     "@typescript-eslint/parser": "^5.36.1",
     "babel-eslint": "^10.1.0",
-    "bootstrap": "^5.2.0",
     "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
@@ -50,6 +52,7 @@
     "eslint-plugin-react": "^7.31.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "gh-pages": "^4.0.0",
+    "markdown-to-jsx": "^7.1.7",
     "node-sass": "^7.0.1",
     "prettier": "^2.7.1"
   },

public/index.html

@@ -12,7 +12,14 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/components/footer/UIFooter.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+
+function Copyright() {
+  return (
+    <Typography variant="body2" color="text.secondary" align="center">
+      {'Copyright © '}
+      <Link color="inherit" href="https://devteamvietnam.github.io/shdsvn.com/">
+        SHDSVN
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  );
+}
+
+interface FooterProps {
+  description: string;
+  title: string;
+}
+
+export class UIFooter extends React.Component<FooterProps> {
+  render(): React.ReactNode {
+    const { description, title } = this.props;
+    return (
+      <Box component="footer" sx={{ bgcolor: 'background.paper', py: 6 }}>
+        <Container maxWidth="lg">
+          <Typography variant="h6" align="center" gutterBottom>
+            {title}
+          </Typography>
+          <Typography
+            variant="subtitle1"
+            align="center"
+            color="text.secondary"
+            component="p"
+          >
+            {description}
+          </Typography>
+          <Copyright />
+        </Container>
+      </Box>
+    );
+  }
+}

src/components/header/UIHeader.tsx

@@ -1,57 +1,77 @@
 import React, { Component } from 'react';
 
-import {
-  Collapse,
-  Navbar,
-  NavbarToggler,
-  NavbarBrand,
-  Nav,
-  NavItem,
-  NavLink
-} from 'reactstrap';
-
-import { AppContextProps } from '@/api';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import Button from '@mui/material/Button';
 
 import logo from '../../assets/images/logo.svg';
-import '../header/style.scss';
 
-export class UIHeader extends Component<AppContextProps> {
-  constructor(props) {
-    super(props);
+import '../header/style.scss';
 
-    this.toggle = this.toggle.bind(this);
+interface HeaderProps {
+  sections: Array<{
+    title: string;
+    url: string;
+    description: string;
+  }>;
+  title: string;
+}
 
-    this.state = {
-      isOpen: false
-    };
-  }
-  toggle() {
-    this.setState({
-      isOpen: !this.state
-    });
-  }
+export class UIHeader extends Component<HeaderProps> {
   render() {
-    let name = 'SHDSVN';
+    const { sections, title } = this.props;
+
     return (
-      <div>
-        <Navbar color="light" light expand="md">
-          <NavbarBrand href="/">
-            <img src={logo} className="App-logo-header" alt="logo" />
-            {name}
-          </NavbarBrand>
-          <NavbarToggler onClick={this.toggle} />
-          <Collapse navbar>
-            <Nav className="ml-auto" navbar>
-              <NavItem></NavItem>
-              <NavItem>
-                <NavLink href="https://github.com/Devteamvietnam/shdsvn.com">
-                  GitHub
-                </NavLink>
-              </NavItem>
-            </Nav>
-          </Collapse>
-        </Navbar>
-      </div>
+      <React.Fragment>
+        <AppBar position="relative">
+          <Toolbar sx={{ borderBottom: 1, borderColor: 'divider' }}>
+            <Typography
+              component="h1"
+              variant="h5"
+              color="inherit"
+              align="left"
+              noWrap
+              mt={1}
+              sx={{ flex: 1 }}
+            >
+              {title}
+            </Typography>
+            <Typography
+              component="h1"
+              variant="h5"
+              color="inherit"
+              align="left"
+              noWrap
+              mt={1}
+              sx={{ flex: 1 }}
+            >
+              <img src={logo} className="App-logo-header" alt="logo" />
+            </Typography>
+            <Button variant="outlined" size="small"></Button>
+          </Toolbar>
+          <Toolbar
+            component="nav"
+            variant="dense"
+            sx={{ justifyContent: 'center', overflowX: 'auto' }}
+          >
+            {sections.map(section => (
+              <Link
+                color="inherit"
+                rel="noopener"
+                underline="none"
+                key={section.title}
+                variant="body1"
+                href={section.url}
+                sx={{ p: 2, flexShrink: 0 }}
+              >
+                {section.title}
+              </Link>
+            ))}
+          </Toolbar>
+        </AppBar>
+      </React.Fragment>
     );
   }
 }

src/components/header/style.scss

@@ -1,5 +1,5 @@
 .App-logo-header {
-  height: 5vmin;
+  height: 6vmin;
   pointer-events: stroke;
 }
 

src/components/markdown/UIMarkdown.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import ReactMarkdown from 'markdown-to-jsx';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import Box from '@mui/material/Box';
+
+function MarkdownListItem(props: any) {
+  return <Box component="li" sx={{ mt: 1, typography: 'body1' }} {...props} />;
+}
+
+const options = {
+  overrides: {
+    h1: {
+      component: Typography,
+      props: {
+        gutterBottom: true,
+        variant: 'h4',
+        component: 'h1'
+      }
+    },
+    h2: {
+      component: Typography,
+      props: { gutterBottom: true, variant: 'h6', component: 'h2' }
+    },
+    h3: {
+      component: Typography,
+      props: { gutterBottom: true, variant: 'subtitle1' }
+    },
+    h4: {
+      component: Typography,
+      props: {
+        gutterBottom: true,
+        variant: 'caption',
+        paragraph: true
+      }
+    },
+    p: {
+      component: Typography,
+      props: { paragraph: true }
+    },
+    a: { component: Link },
+    li: {
+      component: MarkdownListItem
+    }
+  }
+};
+
+export default function Markdown(props: any) {
+  return <ReactMarkdown options={options} {...props} />;
+}

src/components/posts/UIFeaturedPost.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import Card from '@mui/material/Card';
+import CardActionArea from '@mui/material/CardActionArea';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+
+interface FeaturedPostProps {
+  post: {
+    date: string;
+    description: string;
+    image: string;
+    imageLabel: string;
+    title: string;
+  };
+}
+
+export class UIFeaturedPost extends React.Component<FeaturedPostProps> {
+  render() {
+    const { post } = this.props;
+
+    return (
+      <Grid item xs={12} md={6}>
+        <CardActionArea component="a" href="#">
+          <Card elevation={2} sx={{ display: 'flex' }}>
+            <CardContent sx={{ flex: 1 }}>
+              <Typography component="h2" variant="h5">
+                {post.title}
+              </Typography>
+              <Typography variant="subtitle1" color="text.secondary">
+                {post.date}
+              </Typography>
+              <Typography variant="subtitle1" paragraph>
+                {post.description}
+              </Typography>
+              <Typography variant="subtitle1" color="primary">
+                Continue reading...
+              </Typography>
+            </CardContent>
+            <CardMedia
+              component="img"
+              sx={{ width: 160, display: { xs: 'none', sm: 'block' } }}
+              image={post.image}
+              alt={post.imageLabel}
+            />
+          </Card>
+        </CardActionArea>
+      </Grid>
+    );
+  }
+}