-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e200ae6
commit e89ae1b
Showing
13 changed files
with
484 additions
and
75 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import * as React from 'react'; | ||
| import Grid from '@mui/material/Grid'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import Divider from '@mui/material/Divider'; | ||
| import Markdown from '../markdown/UIMarkdown'; | ||
|
|
||
| interface MainProps { | ||
| posts: Array<string>; | ||
| title: string; | ||
| } | ||
|
|
||
| export class UIMainPost extends React.Component<MainProps> { | ||
| render(): React.ReactNode { | ||
| const { posts, title } = this.props; | ||
| return ( | ||
| <Grid | ||
| item | ||
| xs={12} | ||
| md={8} | ||
| sx={{ | ||
| '& .markdown': { | ||
| py: 3 | ||
| } | ||
| }} | ||
| > | ||
| <Typography variant="h6" gutterBottom> | ||
| {title} | ||
| </Typography> | ||
| <Divider /> | ||
| {posts.map(post => ( | ||
| <Markdown className="markdown" key={post.substring(0, 40)}> | ||
| {post} | ||
| </Markdown> | ||
| ))} | ||
| </Grid> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import * as React from 'react'; | ||
| import Grid from '@mui/material/Grid'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import Paper from '@mui/material/Paper'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import Link from '@mui/material/Link'; | ||
|
|
||
| interface SidebarProps { | ||
| archives: Array<{ | ||
| url: string; | ||
| title: string; | ||
| }>; | ||
| description: string; | ||
| social: Array<{ | ||
| icon: React.ElementType; | ||
| name: string; | ||
| }>; | ||
| title: string; | ||
| } | ||
|
|
||
| export class UISideBar extends React.Component<SidebarProps> { | ||
| render() { | ||
| const { archives, description, social, title } = this.props; | ||
| return ( | ||
| <Grid item xs={12} md={4}> | ||
| <Paper elevation={2} sx={{ p: 3, bgcolor: 'grey.200' }}> | ||
| <Typography variant="h5" gutterBottom> | ||
| {title} | ||
| </Typography> | ||
| <Typography>{description}</Typography> | ||
| </Paper> | ||
| <Typography variant="h5" gutterBottom sx={{ p: 3 }}> | ||
| Archives | ||
| {archives.map(archive => ( | ||
| <Link | ||
| display="block" | ||
| variant="body1" | ||
| underline="none" | ||
| href={archive.url} | ||
| key={archive.title} | ||
| > | ||
| {archive.title} | ||
| </Link> | ||
| ))} | ||
| </Typography> | ||
| <Typography variant="h6" gutterBottom sx={{ p: 3 }}> | ||
| Social | ||
| {social.map(network => ( | ||
| <Link | ||
| display="block" | ||
| variant="body1" | ||
| underline="none" | ||
| href="#" | ||
| key={network.name} | ||
| sx={{ mb: 0.5 }} | ||
| > | ||
| <Stack direction="row" spacing={1} alignItems="center"> | ||
| <network.icon /> | ||
| <span>{network.name}</span> | ||
| </Stack> | ||
| </Link> | ||
| ))} | ||
| </Typography> | ||
| </Grid> | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.