move footer into footer component

src/components/.pnpm-debug.log

@@ -1,19 +0,0 @@
-{
-  "0 debug pnpm:scope": {
-    "selected": 1
-  },
-  "1 error pnpm": {
-    "errno": 2,
-    "code": "ELIFECYCLE",
-    "pkgid": "@example/minimal@0.0.1",
-    "stage": "build",
-    "script": "make build",
-    "pkgname": "@example/minimal",
-    "err": {
-      "name": "pnpm",
-      "message": "@example/minimal@0.0.1 build: `make build`\nExit status 2",
-      "code": "ELIFECYCLE",
-      "stack": "pnpm: @example/minimal@0.0.1 build: `make build`\nExit status 2\n    at EventEmitter.<anonymous> (/usr/lib/node_modules/pnpm/dist/pnpm.cjs:103873:20)\n    at EventEmitter.emit (node:events:390:28)\n    at ChildProcess.<anonymous> (/usr/lib/node_modules/pnpm/dist/pnpm.cjs:91802:18)\n    at ChildProcess.emit (node:events:390:28)\n    at maybeClose (node:internal/child_process:1062:16)\n    at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)"
-    }
-  }
-}

src/components/footer.astro

@@ -0,0 +1,20 @@
+---
+import '../css/base.scss'
+import '../css/font.scss'
+import '../css/color.scss'
+---
+
+<div id="footer" class="white">
+    <footer class="white footer">
+      <p>
+        <center class="footer-entries">
+            {Object.keys(Astro.props.entries).map((key) => {
+                const val = Astro.props.entries[key]
+                return (
+                    <a href={val} class="grey">{key}</a>
+                )
+            })}
+        </center>
+      </p>
+    </footer>
+</div>

src/css/base.scss

@@ -1,7 +1,3 @@
-a + a {
-  margin-left: 5px;
-} /*i will kill you if this breaks other parts of the site*/
-
 .footer {
   position: fixed;
   bottom: 0;
@@ -9,19 +5,29 @@ a + a {
   width: 100%;
   height: 55px;
 }
+
+.footer-entries {
+  display: block;
+  a {
+    margin-right: 10px;
+    float: center;
+  }
+}
+
 .white {
   background-color: #222222;
 }
+
 .grey {
   color: #ffffff;
 }
 
 .padding {
 	position: relative;
-	left: 10px;
+	padding-left: 10px;
 }
 
 .padding-right {
 	position: relative;
-	right: 10px;
+	padding-right: 10px;
 }

src/layout/Base.astro

@@ -2,6 +2,9 @@
 import '../css/base.scss'
 import '../css/font.scss'
 import '../css/color.scss'
+
+import Footer from '../components/footer.astro';
+
 const {title} = Astro.props;
 ---
 
@@ -25,5 +28,10 @@ const {title} = Astro.props;
         </p>
       </footer>
 	  </div>
+    <Footer entries={{
+      Homepage: "/",
+      Blog: "/blog",
+      "About Us": "/about"
+    }} />
   </body>
 </html>

src/layout/BaseBlog.astro

@@ -2,6 +2,9 @@
 import '../css/base.scss'
 import '../css/font.scss'
 import '../css/color.scss'
+
+import Footer from '../components/footer.astro';
+
 const {content} = Astro.props;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 ---
@@ -21,14 +24,8 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
     <h3>{content.description}</h3>
     <slot />
     <div style="position:relative;margin-bottom:105px;"></div>
-    <div id="footer" class="white">
-      <footer class="white footer">
-        <p>
-          <center>
-            <a href="/blog" class="grey padding">Back to Blog Home</a>
-          </center>
-        </p>
-      </footer>
-    </div>
+    <Footer entries={{
+      "Back to Blog Home": "/blog"
+    }} />
   </body>
 </html>