Switch to vanilla CSS, basic placeholder card and navbar compoments

package-lock.json

@@ -12,7 +12,6 @@
         "@babel/core": "^7.24.4",
         "@babel/preset-env": "^7.24.4",
         "@babel/preset-react": "^7.24.1",
-        "bootstrap": "^5.3.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -1916,16 +1915,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.8",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/@types/body-parser": {
       "version": "1.19.5",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
@@ -2665,24 +2654,6 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
-    "node_modules/bootstrap": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
-      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/twbs"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/bootstrap"
-        }
-      ],
-      "peerDependencies": {
-        "@popperjs/core": "^2.11.8"
-      }
-    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",

package.json

@@ -30,7 +30,6 @@
     "@babel/core": "^7.24.4",
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
-    "bootstrap": "^5.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

src/App.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
 import BlogEntryCard from "./components/BlogEntryCard.tsx";
+import Navbar from "./components/Navbar.tsx";
+import NavbarButton from "./components/NavbarButton.tsx";
 
 export default function App() {
   // A mock of what the data from the getBlogEntries JSON return would look like
@@ -22,16 +24,23 @@ export default function App() {
 
   return (
     <main>
-      {blogEntries.map((item, index) => (
+      <Navbar>
-        <BlogEntryCard
+        <NavbarButton></NavbarButton>
-          key={index}
+        <NavbarButton></NavbarButton>
-          blogImage={item["blogImage"]}
+        <NavbarButton></NavbarButton>
-          blogTitle={item["blogTitle"]}
+        <NavbarButton></NavbarButton>
-          blogDatePosted={item["blogDatePosted"]}
+      </Navbar>
-          blogDescription={item["blogDescription"]}
+      <div className="blogEntryGrid">
-          className="col"
+        {blogEntries.map((item, index) => (
-        ></BlogEntryCard>
+          <BlogEntryCard
-      ))}
+            key={index}
+            blogImage={item["blogImage"]}
+            blogTitle={item["blogTitle"]}
+            blogDatePosted={item["blogDatePosted"]}
+            blogDescription={item["blogDescription"]}
+          ></BlogEntryCard>
+        ))}
+      </div>
     </main>
   );
 }

src/components/BlogEntryCard.tsx

@@ -15,14 +15,18 @@ export default function BlogEntryCard({
 }: Props) {
   return (
     <>
-      <a href="#" className="card" style={{ width: "18rem" }}>
+      <div className="blogEntryCard">
-        <img src={blogImage} className="card-img-top" alt="..."></img>
+        <a href="#">
-        <div className="card-body">
+          <div className="blogEntry">
-          <h4 className="card-title">{blogTitle}</h4>
+            <img src={blogImage} className="blogEntryImage" alt="..."></img>
-          <p className="card-title">{blogDatePosted}</p>
+            <div className="blogEntryBody">
-          <p className="card-text">{blogDescription}</p>
+              <h4 className="blogEntryTitle">{blogTitle}</h4>
-        </div>
+              <p className="blogEntryDatePosted">{blogDatePosted}</p>
-      </a>
+              <p className="blogEntryDescription">{blogDescription}</p>
+            </div>
+          </div>
+        </a>
+      </div>
     </>
   );
 }

src/components/Navbar.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function Navbar({ children }: Props) {
+  return (
+    <>
+      <div className="navBar">
+	{children}
+      </div>
+    </>
+  );
+}

src/components/NavbarButton.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+interface Props {
+  blogImage: string; // This needs a placeholder/default variable
+  blogTitle: string;
+  blogDatePosted: string;
+  blogDescription: string;
+}
+
+export default function NavbarButton() {
+  return (
+    <>
+      <button className="navBarButton">
+	Hiiiii
+      </button>
+    </>
+  );
+}

src/index.css

@@ -0,0 +1,82 @@
+body {
+  margin: 0px;
+  padding: 0px;
+  background-color: white;
+  font-family: "consolas", sans-serif;
+}
+
+a {
+  text-decoration: none;
+}
+
+.navBar {
+  width: 100%;
+  height: 30px;
+  max-height: 30px;
+  background-color: black;
+  display: grid;
+  gap: 20px;
+  padding: 10px;
+  grid-auto-flow: column;
+  grid-auto-rows: 100%;
+  grid-auto-columns: 5rem;
+}
+
+.blogEntryGrid {
+  display: grid;
+  gap: 20px;
+  padding: 10px;
+  grid-auto-flow: column;
+  grid-auto-rows: 18rem;
+  grid-auto-columns: 18rem;
+}
+
+.blogEntryCard {
+  width: 18rem;
+  max-width: 18rem;
+  height: 20rem;
+  max-height: 20rem;
+}
+
+.blogEntry {
+  width: 100%;
+  height: 100%;
+  border-style: solid;
+  border-width: 5px;
+  border-color: black;
+  border-radius: 10px;
+  background-color: white;
+  position: relative;
+}
+
+.blogEntryImage {
+  width: 18rem;
+  max-width: 18rem;
+  max-height: 18rem;
+  border-radius: 4px;
+}
+
+.blogEntryBody {
+  background-color: grey;
+  padding: 20px;
+  position: absolute;
+  top: 8rem;
+  /* TODO: Need to switch to CSS grid positioning to sort this out */
+  width: 86%;
+  height: 45%;
+}
+
+.blogEntryTitle {
+  padding: 0px;
+  margin: 0px;
+  text-align: center;
+}
+
+.blogEntryDatePosted {
+  padding: 0px;
+  margin: 0px;
+  text-align: center;
+}
+
+.blogEntryDescription {
+}

src/index.html

@@ -5,7 +5,7 @@
     <title>Document</title>
   </head>
 
-  <body>
+  <body style="color: black">
     <div id="root"></div>
   </body>
 </html>

src/index.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom/client";
 import App from "./App.tsx";
-import "bootstrap/dist/css/bootstrap.css";
+import "./index.css";
 
 const rootElement = document.getElementById("root");