some blogging

.idea/workspace.xml

@@ -2,13 +2,14 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="03fafda4-e2c1-4602-a731-a2f96e84badd" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/src/components/Footer.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/StatusPage.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/Blog.css" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/Blogs.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/App.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/nws-api/calls.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/nws-api/calls.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -20,6 +21,7 @@
       <list>
         <option value="TypeScript File" />
         <option value="TypeScript JSX File" />
+        <option value="CSS File" />
       </list>
     </option>
   </component>
@@ -40,6 +42,7 @@
     <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
     <property name="WebServerToolWindowFactoryState" value="false" />
     <property name="last_opened_file_path" value="$PROJECT_DIR$" />
+    <property name="list.type.of.created.stylesheet" value="CSS" />
     <property name="node.js.detected.package.eslint" value="true" />
     <property name="node.js.path.for.package.eslint" value="project" />
     <property name="node.js.selected.package.eslint" value="(autodetect)" />
@@ -72,7 +75,7 @@
       <workItem from="1648500425230" duration="246000" />
       <workItem from="1658028513357" duration="2964000" />
       <workItem from="1666469240565" duration="7361000" />
-      <workItem from="1666543043382" duration="1855000" />
+      <workItem from="1666543043382" duration="3674000" />
     </task>
     <servers />
   </component>

package.json

@@ -14,9 +14,11 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.4.0",
     "react-dom": "^18.2.0",
+    "react-markdown": "^8.0.3",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.0",
     "react-tooltip": "^4.4.3",
+    "strip-markdown": "^5.0.0",
     "typescript": "^4.5.5",
     "web-vitals": "^2.1.4"
   },

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;
+}
+
+