mschwarzmueller · codetributor · May 11, 2022 · Jul 25, 2022 · Aug 1, 2022 · Aug 2, 2022
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-  "window.zoomLevel": 6
-}
+  "window.zoomLevel": 0
+}
diff --git a/README.md b/README.md
@@ -1,34 +1 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+# MIJE Next Site
diff --git a/components/contact/contact-us.js b/components/contact/contact-us.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function ContactUs() {
+  return <h1>Contact Us - Page</h1>;
+}
diff --git a/components/contact/contact-us.module.css b/components/contact/contact-us.module.css
diff --git a/components/home-page/featured-posts.js b/components/home-page/featured-posts.js
@@ -1,12 +1,22 @@
+import Head from 'next/head';
 import PostsGrid from '../posts/posts-grid';
-import classes from './featured-posts.module.css';
 
 function FeaturedPosts(props) {
   return (
-    <section className={classes.latest}>
-      <h2>Featured Posts</h2>
+    <>
+    <Head>
+      <title>MIJE</title>
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+      <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap" rel="stylesheet" />
+    </Head>
+    <section className="bg-lightGray flex justify-center items-center flex-col">
+      <h2 className="text-6xl font-extrabold p-10 font-oswald"
+      >Maynard News</h2>
       <PostsGrid posts={props.posts} />
     </section>
+    </>
+
   );
 }
 

diff --git a/components/home-page/featured-posts.module.css b/components/home-page/featured-posts.module.css
diff --git a/components/home-page/hero.js b/components/home-page/hero.js
@@ -1,23 +1,24 @@
 import Image from 'next/image';
 
-import classes from './hero.module.css';
-
 function Hero() {
   return (
-    <section className={classes.hero}>
-      <div className={classes.image}>
+    <section className="bg-gray">
+      <div className='p-7 flex justify-center class'>
         <Image
-          src='/images/site/max.png'
-          alt='An image showing Max'
+          src="/images/site/g1.jpg"
+          alt="An image showing a rainbow gradient."
           width={300}
           height={300}
+          className="rounded-full"
         />
       </div>
-      <h1>Hi, I'm Max</h1>
-      <p>
-        I blog about web development - especially frontend frameworks like
-        Angular or React.
-      </p>
+      <div className='uppercase flex justify-center'>
+        <h1 className="text-gray-300 text-5xl text-center pb-7 font-extrabold">
+        40 YEARS OF DRIVING <br />
+        DIVERSITY IN JOURNALISM
+      </h1>
+    </div>
+
     </section>
   );
 }

diff --git a/components/home-page/hero.module.css b/components/home-page/hero.module.css
diff --git a/components/layout/logo.js b/components/layout/logo.js
@@ -1,7 +1,18 @@
-import classes from './logo.module.css';
+import Head from "next/head";
 
 function Logo() {
-  return <div className={classes.logo}>Max' Next Blog</div>;
+  return(
+      <>
+      <Head>
+      <title>Mije</title>
+    </Head>
+    <div className="text-white uppercase text-4xl ml-25 font-oswald"
+  >Maynard Institute</div>
+
+      </>
+
+
+  )
 }
 
 export default Logo;
diff --git a/components/layout/logo.module.css b/components/layout/logo.module.css
diff --git a/components/layout/main-navigation.js b/components/layout/main-navigation.js
@@ -1,28 +1,37 @@
+import Head from 'next/head';
 import Link from 'next/link';
-
 import Logo from './logo';
-import classes from './main-navigation.module.css';
 
 function MainNavigation() {
   return (
-    <header className={classes.header}>
-      <Link href='/'>
+    <header className="flex justify-between bg-primary p-6 place-items-center px-36"
+    >
+      <Link href="/">
         <a>
           <Logo />
         </a>
       </Link>
       <nav>
-        <ul>
-          <li>
-            <Link href='/posts'>Posts</Link>
+        <ul className='flex'>
+          <li className='p-4 text-white'
+          style={{
+            fontSize: "20px",
+          }}
+          >
+            <Link href="/news"
+            >News</Link>
           </li>
-          <li>
-            <Link href='/contact'>Contact</Link>
+          <li className='p-4 text-white'
+          style={{
+            fontSize: "20px",
+          }}
+          >
+            <Link href="/contact">Contact</Link>
           </li>
         </ul>
       </nav>
     </header>
   );
 }
 
-export default MainNavigation;
+export default MainNavigation;
diff --git a/components/layout/main-navigation.module.css b/components/layout/main-navigation.module.css
diff --git a/components/posts/all-posts.js b/components/posts/all-posts.js
@@ -4,7 +4,7 @@ import PostsGrid from './posts-grid';
 function AllPosts(props) {
   return (
     <section className={classes.posts}>
-      <h1>All Posts</h1>
+      <h1>Maynard News</h1>
       <PostsGrid posts={props.posts} />
     </section>
   );

diff --git a/components/posts/post-detail/post-content.js b/components/posts/post-detail/post-content.js
@@ -27,16 +27,16 @@ function PostContent(props) {
     //     />
     //   );
     // },
-    paragraph(paragraph) {
+    p(paragraph) {
       const { node } = paragraph;
 
-      if (node.children[0].type === 'image') {
+      if (node.children[0].tagName === 'img') {
         const image = node.children[0];
 
         return (
           <div className={classes.image}>
             <Image
-              src={`/images/posts/${post.slug}/${image.url}`}
+              src={`/images/posts/${post.slug}/${image.properties.src}`}
               alt={image.alt}
               width={600}
               height={300}
@@ -49,22 +49,28 @@ function PostContent(props) {
     },
 
     code(code) {
-      const { language, value } = code;
+      const { className, children } = code;
+      const language = className.split('-')[1]; // className is something like language-js => We need the "js" part here
       return (
         <SyntaxHighlighter
           style={atomDark}
           language={language}
-          children={value}
+          children={children}
         />
       );
     },
   };
 
   return (
-    <article className={classes.content}>
+    <div className="flex justify-center">
+      <div className="flex justify-center bg-slate w-4/5 p-4 m-4">
+      <article className={classes.content}>
       <PostHeader title={post.title} image={imagePath} />
-      <ReactMarkdown renderers={customRenderers}>{post.content}</ReactMarkdown>
+      <ReactMarkdown components={customRenderers}>{post.content}</ReactMarkdown>
     </article>
+    </div>
+    </div>
+
   );
 }
 

diff --git a/components/posts/post-detail/post-header.js b/components/posts/post-detail/post-header.js
@@ -1,3 +1,4 @@
+import Head from 'next/head';
 import Image from 'next/image';
 
 import classes from './post-header.module.css';
@@ -6,10 +7,18 @@ function PostHeader(props) {
   const { title, image } = props;
 
   return (
-    <header className={classes.header}>
-      <h1>{title}</h1>
+    <>
+    <Head>
+      <title>{title}</title>
+    </Head>
+    <header className="border-b-4 border-orange-300 flex justify-between m-4 p-4">
+      <h1
+      className="break-normal font-oswald text-5xl"
+      >{title}</h1>
       <Image src={image} alt={title} width={200} height={150} />
     </header>
+    </>
+
   );
 }