astrofy logo!

Author: ericrobskyhuntley

src/components/Hero.astro

@@ -3,17 +3,28 @@ import {type NameURLModel } from '@ts/Models';
 interface Props {
   title: string;
   subtitle: string;
+  logo: string;
   parent?: NameURLModel;
 }
 
-const { title, subtitle, parent } = Astro.props;
+const { title, subtitle, parent, logo } = Astro.props;
+
+let photopath = logo && '/src/assets/'.concat(logo);
+
+import { Image } from 'astro:assets';
+const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif,svg}')
+
 ---
 
 <section class="hero is-fullheight">
     <div class="hero-body is-fullwidth" style="z-index:1000">
         <div class="columns is-fullwidth is-vcentered" style="width:100%">
-            <div class="column is-one-fifth has-text-centered">
-                <img class="image is-inline-block" width="250px" src='/src/assets/logo_medium.png' alt={"Logo of ".concat(title)} />
+            <div class="column is-one-fifth has-text-centered image-shadow-success">
+                <Image 
+                    class:list={["image-shadow-success"]}
+                    src={images[photopath]()} 
+                    alt={"Logo of ".concat(title)}
+                     />
             </div>
             <div class="column">
                 <h1 class="title has-text-danger is-size-1 text-shadow-success"> {title}</h1>

src/components/Organization.astro

@@ -2,31 +2,37 @@
 import { Icon } from 'astro-icon/components'
 import AboutCard from '@components/AboutCard.astro'
 import markdownit from 'markdown-it'
+import ImageBox from '@components/ImageBox.astro'
 const md = markdownit()
 
 import { type OrgModel } from '@ts/Models'
 
 interface Props {
   org: OrgModel;
+  logo: string;
   columns: boolean;
 }
 
 const iconSize = 20;
 
-const { org, columns = true} = Astro.props;
+const { org, logo, columns = true} = Astro.props;
 ---
 <AboutCard columns={columns}>
   <div class="block">
     <div class="columns is-vcentered">
     <div class="column is-one-quarter has-text-centered">
-      <img class="logo image is-inline-block" src='/src/assets/logo_medium.png' />
+      <ImageBox 
+          class:list={["image-shadow-success"]}
+          src={logo} 
+          alt={"Logo of ".concat(org.name)}
+            />
     </div>
     <div class="column">
-    <p class="title is-4 has-text-danger">{org.name}</p>
-    <p class="subtitle is-4 has-text-danger">{org.subtitle}</p>
-    {org.parent && 
-      <p class="has-text-danger"><a href={org.parent.url}>{org.parent.name}</a></p>
-    }   
+      <p class="title is-4 has-text-danger">{org.name}</p>
+      <p class="subtitle is-4 has-text-danger">{org.subtitle}</p>
+      {org.parent && 
+        <p class="has-text-danger"><a href={org.parent.url}>{org.parent.name}</a></p>
+      }   
     </div>
   </div>
   </div>

src/config.json

@@ -1,7 +1,7 @@
 {
     "name": "OGRAPHIES Research & Design",
     "corp_form": "LLC",
-    "logo": "logo.jpg",
+    "logo": "logo_medium.png",
     "subtitle": "When mapping matters.",
     "url": "https://ographiesresearch.com",
     "description": "[OGRAPHIES Research & Design](https://ographiesresearch.com) is a mission-driven GIS, mapping, and spatial data science consultancy based in Greater Boston that designs tools and analyzes problems for clients who are working towards a more just world. [OGRAPHIES](https://ographiesresearch.com) is not a traditional GIS consultancy. [OGRAPHIES](https://ographiesresearch.com) builds custom web applications, automates complex spatial workflows, and works to scale the complexity of our solutions to align with the capacity of our clients.",

src/pages/about.astro

@@ -23,7 +23,7 @@ let clients = data.clients.sort((a,b) => (a.name > b.name) ? 1 : ((b.name > a.na
 <BaseLayout name={data.name}>
   <section class="section">
     <div class="columns">
-        <Organization org={data} columns={true}/>
+        <Organization org={data} columns={true}, logo={dataRaw.logo}/>
         <People people={leadership} columns={true}/>
       </div>
     </div>

src/pages/index.astro

@@ -10,6 +10,6 @@ const data:ConfigModel= dataRaw;
 import { ViewTransitions } from 'astro:transitions';
 ---
 <BaseLayout name={data.name}>
-	<Hero title={data.name} subtitle={data.subtitle} parent={data.parent}/>
+	<Hero title={data.name} subtitle={data.subtitle} logo={dataRaw.logo} parent={data.parent}/>
 </BaseLayout>
 <ViewTransitions/>

src/sass/styles.scss

@@ -29,6 +29,14 @@ a.button {
     text-decoration-line: none;
 }
 
+.image-shadow-danger {
+    filter: drop-shadow($shadow-offset $shadow-offset 0px $danger);
+}
+
+.image-shadow-success {
+    filter: drop-shadow($shadow-offset $shadow-offset 0px $success);
+}
+
 .text-shadow-danger {
     text-shadow: $shadow-offset $shadow-offset $danger;
 }