Add service images to layouts and change scaling

3 files changed, 55 insertions, 14 deletions

diff --git a/src/components/service.tsx b/src/components/service.tsx
index 79b8648..b350d3a 100644
--- a/src/components/service.tsx
+++ b/src/components/service.tsx
@@ -3,10 +3,12 @@ import styled from 'styled-components';
 import { capitalize } from '../utils';
 
 export type ServiceProps = {
+    slug: string;
     name: string;
     description: string;
     url: string;
     tags: string[];
+    image: string;
 }
 
 const ServiceCard = styled.a`
@@ -25,12 +27,6 @@ const ServiceCard = styled.a`
     }
 `;
 
-const DimmedURL = styled.span`
-    color: #999;
-    font-size: 0.9em;
-    font-family: monospace;
-`;
-
 export const Tag = styled.span`
     background-color: rgba(110, 119, 255, 0.39);
     color: #000;
@@ -42,11 +38,26 @@ export const Tag = styled.span`
     display: inline-block;
 `;
 
-const Service: React.FC<ServiceProps> = ({ name, description, url, tags }) => {
+const ServiceImage = styled.img`
+    border-radius: 10px;
+    width: 80px;
+`;
+
+const ServiceHeader = styled.h3`
+    margin: 0;
+`;
+
+const ServiceDescription = styled.p`
+    margin: 0;
+`;
+
+
+const Service: React.FC<ServiceProps> = ({ name, description, url, tags, image }) => {
     return (
         <ServiceCard href={url}>
-            <h3>{name}</h3>
-            <p>{description}</p>
+            <ServiceImage src={image} alt={name} />
+            <ServiceHeader>{name}</ServiceHeader>
+            <ServiceDescription>{description}</ServiceDescription>
             <div>
                 {
                     tags.map((tag, index) => (
@@ -54,7 +65,6 @@ const Service: React.FC<ServiceProps> = ({ name, description, url, tags }) => {
                     ))
                 }
             </div>
-            <DimmedURL>{url}</DimmedURL>
         </ServiceCard>
     );
 }
diff --git a/src/layout/page.tsx b/src/layout/page.tsx
index 2bfec09..2245bcb 100644
--- a/src/layout/page.tsx
+++ b/src/layout/page.tsx
@@ -28,7 +28,7 @@ const GlobalStyle = createGlobalStyle`
 const CenterImage = styled.img`
   display: block;
   margin: 0 auto;
-  margin-top: 50px;
+  margin-top: 10px;
   width: 70%;
   height: auto;
   max-width: 600px;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2099902..7827a7b 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -12,14 +12,24 @@ type IndexPageProps = {
     services: {
       nodes: ServiceProps[],
       tags: string[]
+    },
+    images: {
+      nodes: {
+        name: string,
+        childImageSharp: {
+          resize: {
+            src: string
+          }
+        }
+      }[]
     }
   }
 }
 
 const ServicesHolder = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 10px;
   margin-top: 20px;
 `;
 
@@ -50,6 +60,15 @@ const LargerTag = styled(Tag)`
 const IndexPage: React.FC<IndexPageProps> = ({ data }) => {
   const [selectedTag, setSelectedTag] = React.useState<string | null>(null);
 
+
+  const serviceImageMap: Record<string, string> = {};
+
+  data.images.nodes.forEach((node) => {
+    serviceImageMap[node.name] = node.childImageSharp.resize.src;
+  });
+
+  console.log(data.services)
+
   return (
     <PageLayout header="Available Services" subheader="Below are all the internal services for Python Discord">
       <main>
@@ -64,7 +83,7 @@ const IndexPage: React.FC<IndexPageProps> = ({ data }) => {
             service => selectedTag ? service.tags.includes(selectedTag) : true
           ).sort((a, b) => a.name.localeCompare(b.name))
             .map((service, index) => (
-              <Service key={index} {...service} />
+              <Service key={index} {...service} image={serviceImageMap[service.slug] ? serviceImageMap[service.slug] : serviceImageMap["unknown"]} />
             ))}
         </ServicesHolder>
 
@@ -81,6 +100,7 @@ export const query = graphql`
   query {
     services: allServicesYaml {
       nodes {
+        slug
         name
         description
         url
@@ -89,6 +109,17 @@ export const query = graphql`
 
       tags: distinct(field: {tags: SELECT})
     }
+      
+    images: allFile(filter: {sourceInstanceName: {eq: "service_images"}}) {
+      nodes {
+        name
+        childImageSharp {
+          resize(height: 80, quality: 100) {
+            src
+          }
+        }
+      }
+    }
   }
 `