chore: add images

src/components/GlossarySearch/glossaryTerms.json

@@ -449,7 +449,6 @@
   {
     "termTitle": "Chargeback",
     "pageTitle": "Define: Chargeback in FinOps",
-    "imgUrl": "/img/glossary/chargeback.png",
     "slug": "chargeback",
     "definition": "A financial management tool where departments or teams are billed internally for their consumption or use of IT services and resources.",
     "sections": [
@@ -793,6 +792,7 @@
     "termTitle": "AWS",
     "pageTitle": "Understanding AWS in the Context of FinOps",
     "slug": "aws",
+    "imgUrl": "aws.png",
     "definition": "Amazon Web Services, a subsidiary of Amazon providing cloud computing platforms and APIs to businesses, governments, and individuals.",
     "sections": [
       {

src/components/GlossaryTermPage/GlossaryTermPage.css

@@ -29,7 +29,13 @@
 	box-shadow: var(--box-shadow);
 }
 
-.glossary-term__aside--img {	
+.glossary-term__aside-img-container {
+	position: relative;
+	display: flex;
+	align-items: stretch;
+}
+
+.glossary-term__aside-img {	
 	background-color: #fafafa;
 	object-fit: cover;
 	width: 100%;
@@ -47,12 +53,23 @@
 	margin-bottom: .5rem;
 }
 
-.glossary-term__def {
+.glossary-term__aside-def {
+	display: flex;
+	gap: .25rem;
+	align-items: center;
 	font-size: smaller;
-	color: var(--faded-text);
+	position: absolute;
+	color: white;
+	bottom: .5rem;
+	left: 1rem;
+	opacity: .5;
 	font-weight: 100;
 }
 
+.glossary-term__aside-def svg {
+	margin-bottom: 1px;
+}
+
 .glossary-term__definition {
 	margin: .4rem 0
 }

src/components/GlossaryTermPage/GlossaryTermPageAside.tsx

@@ -1,18 +1,24 @@
 import React from 'react';
 import { GlossaryTermType } from '../GlossarySearch';
+import OpenBookIcon from '../icons/OpenBookIcon';
+
+const imgUrlPrefix = '/img/glossary/';
 
 const GlossaryTermPageAside = ({ term }: { term: GlossaryTermType }) => (
   <aside className="glossary-term__aside">
-    {term.imgUrl && (
-      <div>
-        <img className="glossary-term__aside--img" src={term.imgUrl} alt="" />
+    <div className="glossary-term__aside-img-container">
+      <img
+        className="glossary-term__aside-img"
+        src={term.imgUrl ? `${imgUrlPrefix}/${term.imgUrl}` : `${imgUrlPrefix}/generic.png`}
+        alt=""
+      />
+      <div className="glossary-term__aside-def">
+        <OpenBookIcon />
+        <span>Definition</span>
       </div>
-    )}
+    </div>
     <div className="glossary-term__aside-content">
-      <h3 className="glossary-term__header">
-        {term.termTitle}
-        <span className="glossary-term__def">(definition)</span>
-      </h3>
+      <h3 className="glossary-term__header">{term.termTitle}</h3>
       <span className="glossary-term__definition">{term.definition}</span>
     </div>
   </aside>