multi-person g2g / markdownify long text

ographiesresearch · Feb 28, 2024 · 75c420f · 75c420f
1 parent 50ae967
commit 75c420f
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "astro-icon": "^1.1.0",
     "bulma": "^0.9.4",
     "mapbox-gl": "^3.1.2",
+    "markdown-it": "^14.0.0",
     "node-sass": "^9.0.0",
     "sass": "^1.71.1",
     "typescript": "^5.3.3"

diff --git a/src/components/Organization.astro b/src/components/Organization.astro
@@ -1,11 +1,15 @@
 ---
 import { Icon } from 'astro-icon/components'
+import markdownit from 'markdown-it'
+const md = markdownit()
+
 interface Props {
   org: {
     name: string;
     subtitle?: string;
     email?: string;
     phone?: string;
+    description?: string;
     office?: {
       address?: string;
       city?: string;
@@ -21,25 +25,27 @@ interface Props {
 
 const { org } = Astro.props;
 ---
-
 <div class="box has-background-danger">
-    <div class="block">
-      <p class="title is-4 has-text-white">{org.name}</p>
-      <p class="subtitle is-4 has-text-white">{org.subtitle}</p>
-    </div>
-    <div class="block">
-      <ul>
-        <li>{org.email && <a href={"mailto:".concat(org.email)} class="has-text-white">{org.email}</a>}</li>
-        <li>{org.phone && <a href={"tel:".concat(org.phone)} class="has-text-white">{org.phone}</a>}</li>
-        <li class="has-text-white">{org.office.address}</li>
-        <li class="has-text-white">{org.office.city}, {org.office.state} {org.office.postal}</li>
-      </ul>
-    </div>
-    <div class="block">
-        {
-          org.socials.map((platform) => (
-            <span><a href={platform.url}  class="has-text-white"><Icon name={"mdi:".concat(platform.name.toLowerCase())} size={28} /></a></span>
-          ))
-        }
-    </div>
-  </div>
+  <div class="block">
+    <p class="title is-4 has-text-white">{org.name}</p>
+    <p class="subtitle is-4 has-text-white">{org.subtitle}</p>
+  </div>
+  <div class="block">
+    <p class="has-text-white" set:html={md.renderInline(org.description)}></p>
+  </div>
+  <div class="block">
+    <ul>
+      <li>{org.email && <a href={"mailto:".concat(org.email)} class="has-text-white">{org.email}</a>}</li>
+      <li>{org.phone && <a href={"tel:".concat(org.phone)} class="has-text-white">{org.phone}</a>}</li>
+      <li class="has-text-white">{org.office.address}</li>
+      <li class="has-text-white">{org.office.city}, {org.office.state} {org.office.postal}</li>
+    </ul>
+  </div>
+  <div class="block">
+      {
+        org.socials.map((platform) => (
+          <span><a href={platform.url}  class="has-text-white"><Icon name={"mdi:".concat(platform.name.toLowerCase())} size={28} /></a></span>
+        ))
+      }
+  </div>
+</div>
diff --git a/src/components/People.astro b/src/components/People.astro
@@ -15,13 +15,15 @@ interface Props {
       name?: string;
     }[];
   }[];
+  columns?: boolean;
 }
 
-const { people } = Astro.props;
+const { people, columns = false } = Astro.props;
 ---
-
+<div class={columns ? "columns is-multiline" : ""}>
 {
   people.map((person) => (
-    <Person {person} />
+    <Person {person} columns = {columns} />
   ))
-}
+}
+</div>
diff --git a/src/components/Person.astro b/src/components/Person.astro
@@ -1,5 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components'
+import markdownit from 'markdown-it'
+const md = markdownit()
 interface Props {
   person: {
     name: string;
@@ -14,19 +16,20 @@ interface Props {
       name?: string;
     }[];
   };
+  columns?: boolean;
 }
 
-const { person } = Astro.props;
+const { person, columns = false} = Astro.props;
 ---
-
-<div class="box has-background-danger">
+<div class={columns ? "column is-half" : ""}>
+  <div class="box has-background-danger">
     <div class="block">
       <p class="title is-4 has-text-white">{person.name}{person.creds && ", ".concat(person.creds.join(", "))} {person.pronouns  && <span class="has-text-weight-light">({person.pronouns})</span>}</p>
       <p class="subtitle is-4 has-text-white">{person.roles && person.roles.join(", ")}</p>
       <p>{person.email && <a href={"mailto:".concat(person.email)} class="has-text-white">{person.email}</a>}</p>
     </div>
     <div class="block">
-      <p  class="has-text-white">{person.bio}</p>
+      <p class="has-text-white" set:html={md.renderInline(person.bio)}></p>
     </div>
     <div class="block">
       <div class="tags">
@@ -44,4 +47,5 @@ const { person } = Astro.props;
           ))
         }
     </div>
-  </div>
+  </div>
+</div>
diff --git a/src/config.json b/src/config.json
@@ -13,7 +13,7 @@
     "socials": [
         {
             "name": "Github",
-            "url": "https://github.com/organizations/ographiesresearch/"
+            "url": "https://github.com/ographiesresearch"
         },
         {
             "name": "Linkedin",

diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -4,14 +4,29 @@ import People from '@components/People.astro'
 import Organization from '@components/Organization.astro'
 
 import data from "@src/config.json";
+
+let leadership = data.people.filter(function(person) {
+      return person.leadership;
+ });
+
+ let others = data.people.filter(function(person) {
+      return !person.leadership;
+ });
 ---
 <ContentLayout name={data.name}>
+  <section class="section">
   <div class="columns">
     <div class="column is-one-half">
         <Organization org={data}/>
     </div>
     <div class="column is-one-half">
-      <People people={data.people.leadership} />
+      <People people={leadership} />
     </div>
   </div>
+  </section>
+  <section class="section">
+    <h1 class="title has-text-white">Who We Are</h1>
+      <People people={others} columns={true} />
+  </section>
+
 </ContentLayout>