adding completed project

2022-02-15 09:17:52 -05:00
parent 855f2f75bb
commit 4e97734a1a
31 changed files with 3159 additions and 80 deletions
--- a/components/BlogList.js
+++ b/components/BlogList.js
@@ -0,0 +1,45 @@
+import Link from 'next/link'
+import ReactMarkdown from 'react-markdown'
+import styles from "../styles/BlogList.module.css"
+const BlogList = ({ allBlogs }) => {
+    function truncateSummary(content) {
+        return content.slice(0, 200).trimEnd()
+    }
+
+    function reformatDate(fullDate) {
+        const date = new Date(fullDate)
+        return date.toDateString().slice(4)
+    }
+
+    return (
+        <>
+            <ul className={styles.list}>
+                {allBlogs.length > 1 &&
+                    allBlogs.map(post => (
+                        <Link key={post.slug} href={{ pathname: `/blog/${post.slug}` }}>
+                            <a className={styles.blog__link}>
+                                <li>
+                                    <div className={styles.hero_image}>
+                                        <img
+                                            src={post.frontmatter.hero_image}
+                                            alt={post.frontmatter.hero_image}
+                                        />
+                                    </div>
+                                    <div className={styles.blog__info}>
+                                        <h2>{post.frontmatter.title}</h2>
+                                        <h3> {reformatDate(post.frontmatter.date)}</h3>
+                                        <p>
+                                            <ReactMarkdown
+                                                children={truncateSummary(post.markdownBody)}
+                                            />
+                                        </p>
+                                    </div>
+                                </li>
+                            </a>
+                        </Link>
+                    ))}
+            </ul>
+        </>
+    )
+}
+export default BlogList
--- a/components/Header.js
+++ b/components/Header.js
@@ -0,0 +1,28 @@
+import Link from "next/link";
+import styles from '../styles/Header.module.css'
+
+export default function Header(props) {
+  return (
+    <header className={styles.header}>
+      <nav
+        className={styles.nav}
+        role="navigation"
+        aria-label="main navigation"
+      >
+        <Link href="/" passHref>
+          <h1>{props.siteTitle}</h1>
+        </Link>
+        <div>
+          <Link href={`${typeof window !== "undefined" &&
+          window.location.pathname == "/info" ?
+          "/" : "/info"}`} passHref>
+            <h1>{`${typeof window !== "undefined" &&
+          window.location.pathname == "/info" ?
+          "close" : "info"}`}</h1>
+          </Link>
+        </div>
+      </nav>
+    </header>
+  );
+}
+
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -0,0 +1,23 @@
+import Header from "./Header";
+import Meta from './Meta'
+import styles from '../styles/Layout.module.css'
+
+export default function Layout(props) {
+const pathname = props.pathname
+  return (
+    <section
+    className={styles.layout}
+    style={{
+      backgroundColor: `${props.bgColor && props.bgColor}`,
+      color: `${props.pathname == "info" && 'white'}`
+    }}
+  >
+    <Meta
+      siteTitle={props.siteTitle}
+      siteDescription={props.siteDescription}
+    />
+    <Header siteTitle={props.siteTitle} />
+    <div className={styles.content}>{props.children}</div>
+  </section>
+  );
+}
--- a/components/Meta.js
+++ b/components/Meta.js
@@ -0,0 +1,14 @@
+import Head from 'next/head'
+
+export default function Meta(props) {
+    return (
+        <>
+            <Head>
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <meta charSet="utf-8" />
+                <title>{props.siteTitle}</title>
+                <meta name="Description" content={props.description}></meta>
+            </Head>
+        </>
+    )
+}