Add blog page (orcasound#57)

src/components/BlogItem.tsx

@@ -0,0 +1,70 @@
+import { styled, Typography } from '@mui/material'
+import Image from 'next/image'
+
+import Link from './Link'
+
+interface BlogItemProps {
+  image: string
+  title?: string
+  summary?: string
+  datePublished?: string
+  author?: string
+}
+
+const BlogItemContainer = styled('div')({
+  width: '48%',
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  margin: '20px 0',
+  '@media(max-width: 785px)': {
+    width: '68%',
+    flexWrap: 'wrap',
+  },
+})
+
+const BlogItemBody = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  margin: '0 20px',
+  '@media(max-width: 785px)': {
+    margin: 0,
+    marginTop: 20,
+  },
+})
+
+const BlogItem = ({
+  image,
+  title,
+  summary,
+  datePublished,
+  author,
+}: BlogItemProps) => {
+  return (
+    <BlogItemContainer>
+      <Image src={image} alt={title} width="300%" height="240%" />
+      <BlogItemBody>
+        <Typography variant="h3" sx={{ fontSize: 20, fontWeight: 550 }}>
+          {title}
+        </Typography>
+        <Typography
+          paragraph
+          sx={{
+            fontSize: 13,
+            fontWeight: 600,
+            color: '#999999',
+            textTransform: 'uppercase',
+          }}
+        >
+          Posted on {datePublished} By {author}
+        </Typography>
+        <Typography paragraph sx={{ fontSize: 16, fontWeight: 450 }}>
+          {summary}
+        </Typography>
+        <Link href="/blog">Read More...</Link>
+      </BlogItemBody>
+    </BlogItemContainer>
+  )
+}
+
+export default BlogItem

src/pages/blog.jsx

@@ -0,0 +1,90 @@
+import KeyboardDoubleArrowDownRoundedIcon from '@mui/icons-material/KeyboardDoubleArrowDownRounded'
+import { Typography } from '@mui/material'
+import { styled } from '@mui/system'
+
+import frequency1 from '../../public/images/frequency.png'
+import BlogItem from '../components/BlogItem'
+import blogStyles from '../styles/blog.module.css'
+
+// TODO: replace CSS module with MUI styled()
+// should use next/image instead of backgroundImage
+// eslint-disable-next-line no-unused-vars
+const Banner = styled('div')({
+  // backgroundImage: "url('../../public/images/frequency.png')",
+  backgroundSize: 'cover',
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: '50% 55%',
+})
+
+const Overlay = styled('div')({
+  height: '88vh',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: 'rgba(5, 28, 90, 0.3)',
+})
+
+const BlogItemList = styled('section')({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+})
+
+const Blog = () => {
+  const data = [
+    {
+      image: frequency1,
+      title: 'Lone first to hear j+K pods entering Puget Sound at Bush Point',
+      summary:
+        'This morning at around 8:30, Lon Brocklehurst texted that he was hearing orcas on the Bush Point. Though it ...',
+      date: '2020-11-11',
+      author: 'Scott Veirs',
+    },
+    {
+      image: frequency1,
+      title: 'Election Night humpback calls at Orcasound',
+      summary:
+        'For about a half hour 20:00 this evening (Tues, 3 Nov 2020), Humpback calls were recorded at Orcasound',
+      date: '2020-11-04',
+      author: 'Scott Veirs',
+    },
+  ]
+
+  return (
+    <>
+      <div className={blogStyles.banner}>
+        <Overlay>
+          <Typography
+            variant="h1"
+            sx={{ fontSize: 160, color: '#fff', fontWeight: 450 }}
+          >
+            Blog
+          </Typography>
+          <KeyboardDoubleArrowDownRoundedIcon
+            sx={{
+              fontSize: 100,
+              color: '#fff',
+              position: 'absolute',
+              bottom: 1,
+            }}
+          />
+        </Overlay>
+      </div>
+      <BlogItemList>
+        {data.map((item, id) => (
+          <BlogItem
+            key={id}
+            image={item.image}
+            title={item.title}
+            summary={item.summary}
+            author={item.author}
+            datePublished={item.date}
+          />
+        ))}
+      </BlogItemList>
+    </>
+  )
+}
+
+export default Blog

src/styles/blog.module.css

@@ -0,0 +1,6 @@
+.banner {
+  background: url('../../public/images/srkw2-36.jpg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50% 55%;
+}

src/styles/theme.ts

@@ -13,10 +13,6 @@ const theme = createTheme({
     error: {
       main: red.A400,
     },
-    text: {
-      primary: '#ffffff',
-      secondary: '#007bff',
-    },
   },
 })