@anishpras/create-portfolio
Version:
🏗 Personal CLI to bootstrap new portfolio from the given templates.
84 lines (81 loc) • 2.42 kB
JavaScript
import React from "react";
import Head from "next/head";
import { parseISO, format } from "date-fns";
import {
useColorMode,
Heading,
Text,
Flex,
Stack,
Avatar,
} from "@chakra-ui/react";
import { useRouter } from "next/router";
import Container from "../components/Container";
export default function BlogLayout({ children, frontMatter }) {
const { colorMode } = useColorMode();
const textColor = {
light: "gray.700",
dark: "gray.400",
};
const router = useRouter();
const slug = router.asPath.replace("/blog", "");
return (
<Container>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charSet="utf-8" />
<meta name="description" content="lorem ipsum"></meta>
<meta property="og:url" content="" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en" />
<meta property="og:image" content="" />
<title>${slug} - Blog - Lorem Ipsum</title>
</Head>
<Stack
as="article"
spacing={8}
justifyContent="center"
alignItems="flex-start"
m="0 auto 4rem auto"
maxWidth="700px"
w="100%"
px={2}>
<Flex
flexDirection="column"
justifyContent="flex-start"
alignItems="flex-start"
maxWidth="700px"
w="100%">
<Heading letterSpacing="tight" mb={2} as="h1" size="2xl">
{frontMatter.title}
</Heading>
<Flex
justify="space-between"
align={["initial", "center"]}
direction={["column", "row"]}
mt={2}
w="100%"
mb={4}>
<Flex align="center">
<Avatar
size="xs"
name="Benjamin Carlson"
src="../images/portrait.jpeg"
mr={2}
/>
<Text fontSize="sm" color={textColor[colorMode]}>
{frontMatter.by}
{"Benjamin Carlson / "}
{format(parseISO(frontMatter.publishedAt), "MMMM dd, yyyy")}
</Text>
</Flex>
<Text fontSize="sm" color="gray.500" minWidth="100px" mt={[2, 0]}>
{frontMatter.readingTime.text}
</Text>
</Flex>
</Flex>
{children}
</Stack>
</Container>
);
}