docs: add memo on images and bump dependencies

spectrocloud · Sep 6, 2024 · d0c5748 · d0c5748
1 parent 4c9699d
commit d0c5748
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 11 deletions.
diff --git a/deployment/k8s.yaml b/deployment/k8s.yaml
@@ -88,7 +88,7 @@ spec:
     spec:
       containers:
         - name: postgres
-          image: ghcr.io/spectrocloud/hello-universe-db:1.0.2
+          image: ghcr.io/spectrocloud/hello-universe-db:1.1.0
           ports:
             - containerPort: 5432
               name: postgres
@@ -132,7 +132,7 @@ spec:
       serviceAccountName: hello-universe-role
       containers:
         - name: api
-          image: ghcr.io/spectrocloud/hello-universe-api:1.0.12
+          image: ghcr.io/spectrocloud/hello-universe-api:1.1.0
           ports:
             - containerPort: 3000
               name: api

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -6,7 +6,7 @@ networks:
 
 services:
   db:
-    image: ghcr.io/spectrocloud/hello-universe-db:1.0.2
+    image: ghcr.io/spectrocloud/hello-universe-db:1.1.0
     ports:
       - "5432:5432"
     expose:
@@ -34,7 +34,7 @@ services:
     depends_on:
       db:
         condition: service_healthy
-    image: ghcr.io/spectrocloud/hello-universe-api:1.0.12
+    image: ghcr.io/spectrocloud/hello-universe-api:1.1.0
     environment:
       PORT: 3000
       DB_HOST: db

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -25,7 +26,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <script src='/env.js'></script>
-    <title>Spectro Cloud</title>
+    <title>Spacetastic</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -5,6 +5,18 @@ import linkedin from "../../img/linkedin.png";
 import mastodon from "../../img/mastodon.png";
 import logo from "../../img/logo.svg"
 
+const ImageInvert = React.memo(function Image({ src, altText }) {
+  return <img className="Social-invert" src={src} alt={altText} />;
+});
+
+const Image = React.memo(function Image({ src, altText }) {
+  return <img src={src} alt={altText} />;
+});
+
+const ImageFooter = React.memo(function Image({ src, altText }) {
+  return <img className="footer-logo" src={src} alt={altText} />;
+});
+
 const Footer = () => {
     return(
         <footer className="footer">
@@ -14,23 +26,23 @@ const Footer = () => {
               target={"_blank"}
               rel={"noreferrer"}
             >
-              <img className="Social-invert" src={linkedin} alt="linkedin" />
+              <ImageInvert src={linkedin} altText={"linkedin"} />
             </a>
 
             <a
               href="https://x.com/spectrocloudinc"
               target={"_blank"}
               rel={"noreferrer"}
             >
-              <img src={twitter} alt="twitter" />
+              <Image src={twitter} alt="twitter" />
             </a>
 
             <a
               href="https://hachyderm.io/@spectrocloudinc"
               target={"_blank"}
               rel={"noreferrer"}
             >
-              <img className="Social-invert" src={mastodon} alt="mastodon" />
+              <ImageInvert src={mastodon} altText={"mastodon"} />
             </a>
           </div>
           <div>
@@ -42,7 +54,7 @@ const Footer = () => {
             </span>
             </div>
             <div className="footer-logo-container">
-              <img className="footer-logo" src={logo} alt="spectrocloud" />
+              <ImageFooter src={logo} alt="spectrocloud" />
             </div>
           </div>
         </footer>        

diff --git a/src/components/Pages/Elements/Elements.css b/src/components/Pages/Elements/Elements.css
@@ -9,6 +9,12 @@
   margin-bottom: 5%;
 }
 
+.title-logo {
+  height: 100px;
+  width: 150px;
+  display: inline;
+}
+
 .subtitle {
   font-size: calc(10px + 2vmin);
 }
@@ -106,6 +112,10 @@
   .image-display {
     width: 100%;
   }
+
+  .title-logo {
+    display: none;
+  }
 }
 
 .description-text {

diff --git a/src/components/Pages/Elements/Title.jsx b/src/components/Pages/Elements/Title.jsx
@@ -1,10 +1,20 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import "./Elements.css";
+import logo from "../../../img/spectronaut.png";
+
+const Image = React.memo(function Image({ src }) {
+  return <img src={src} className="title-logo" alt="logo" />;
+});
 
 function Title ({title, subtitle}) {
+
   return (
     <div className="title-container">
-        <div className="title">{title}</div>
+        <div className="title">{title}
+            <div className="title-logo">
+              <Image src={logo}/>
+            </div>
+        </div>
         <div className="subtitle">{subtitle}</div>
     </div>
   );