some blogging

src/components/Blog.css

@@ -0,0 +1,11 @@
+.blog-card {
+    transition: 1s;
+    width: 80%;
+    background-color: #eee;
+    border-radius: 20px;
+    overflow: clip;
+}
+
+.blog-card:hover {
+    transform: translateY(-10px);
+}

src/components/Blogs.tsx

@@ -0,0 +1,41 @@
+import {useEffect, useState} from "react";
+import {Blog, Incident, UptimeResponse} from "../nws-api/types";
+import {getBlogs, getIncidents, getUptime} from "../nws-api/calls";
+import "./Blog.css";
+import ReactMarkdown from 'react-markdown';
+import strip from 'strip-markdown';
+
+export default function Blogs(){
+    const [blogs, setBlogs] = useState<Blog[]>([]);
+
+    const fetchBlogs = async () => {
+        let resp: Blog[] = await getBlogs();
+        setBlogs(resp);
+    }
+
+    useEffect(() => {
+        fetchBlogs();
+    }, []);
+
+    return(
+        <div>
+            <h1>Blogs</h1>
+            <div className={"d-flex justify-content-center"}>
+                {blogs.map((e)=>{
+                    return(
+                      <div className={"blog-card row"} onClick={()=>{window.location.href=`/blog?id=${e.id}`}}>
+                          <img src={e.imageUrl} className={"col-md-4 m-0 p-0"}/>
+                          <div className={"p-2 col-md-8"}>
+                              <h2>{e.title}</h2>
+                              <p>By: {e.author}</p>
+                              <p style={{maxHeight: 100, overflow: "clip"}}><ReactMarkdown remarkPlugins={[strip]}>{e.content}</ReactMarkdown>...</p>
+
+                              <p><b>Click to read more</b></p>
+                          </div>
+                      </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}

src/index.css

@@ -11,3 +11,16 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.nav-lnk {
+  font-weight: bold;
+  color: black;
+  text-decoration: none;
+  padding-left: 30px;
+  font-size: 1.1rem;
+  transition: .5s;
+}
+
+.nav-lnk:hover {
+  color: #F7BA00;
+}

src/index.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {
-    createBrowserRouter,
+    createBrowserRouter, NavLink,
     RouterProvider,
 } from "react-router-dom";
 import StatusPage from "./components/StatusPage";
@@ -10,10 +10,27 @@ import "./index.css";
 import 'bootstrap/dist/css/bootstrap.min.css';
 import UptimeCard from "./components/UptimeCard";
 import Footer from "./components/Footer";
+import {Nav, Navbar, NavbarBrand} from "react-bootstrap";
+import NWSLogo from "./static/images/NWS_Logo.png";
+import Blogs from "./components/Blogs";
 
 function Layout (props: {children: any}) {
     return (
         <div>
+            <Navbar sticky={"top"} style={{backgroundColor: "#eee", paddingLeft: 100, paddingRight: 100}}>
+                <NavbarBrand>
+                    <img src={NWSLogo} alt="nws-logo" style={{width: 120}}/>
+                </NavbarBrand>
+                <NavLink className={"nav-lnk"} to={"/"}>
+                    Home
+                </NavLink>
+                <NavLink className={"nav-lnk"} to={"/status"}>
+                    Status
+                </NavLink>
+                <NavLink className={"nav-lnk"} to={"/blogs"}>
+                    Blog
+                </NavLink>
+            </Navbar>
             {props.children}
             <Footer/>
         </div>
@@ -29,17 +46,24 @@ const router = createBrowserRouter([
             </Layout>
     },
     {
-        path: "blog",
+        path: "status",
         element:
             <Layout>
                 <StatusPage/>
             </Layout>
     },
+    {
+        path: "blog",
+        element:
+            <Layout>
+                <Blogs/>
+            </Layout>
+    },
     {
         path: "blogs",
         element:
             <Layout>
-                <StatusPage/>
+                <Blogs/>
             </Layout>
     },
     {

src/nws-api/calls.ts

@@ -1,4 +1,4 @@
-import {Incident, UptimeResponse} from "./types";
+import {Blog, Incident, UptimeResponse} from "./types";
 
 export async function getUptime(): Promise<UptimeResponse> {
     let response: Response = await fetch('https://api-nws.nickorlow.com/uptime');
@@ -12,3 +12,10 @@ export async function getIncidents(): Promise<Incident[]> {
     return incidents;
 }
 
+export async function getBlogs(): Promise<Blog[]> {
+    let response: Response = await fetch('https://api-nws.nickorlow.com/blogs');
+    let blogs: Blog[] = await response.json();
+    return blogs;
+}
+
+