componentize assorted, fix navbar

src/components/AboutCard.astro

@@ -0,0 +1,19 @@
+---
+interface Props {
+  columns?: boolean;
+}
+
+const {columns} = Astro.props;
+---
+
+<div class={columns ? "column is-half" : ""}>
+    <div class="box has-background-danger">
+        <slot/>
+    </div>
+</div>
+
+<style>
+    .box {
+      box-shadow: 3px 3px white;
+    }
+</style>

src/components/Globe.astro

@@ -16,6 +16,7 @@ const { lng, lat, zoom, mapstyle, bearing, accesstoken, interactive = false, sec
 
 <div transition:persist id="map"/>
 <mapbox-map
+    transition:persist
     data-lat={lat}
     data-lng={lng}
     data-zoom={zoom}

src/components/ImageBox.astro

@@ -0,0 +1,27 @@
+---
+interface Props {
+  src: string;
+  alt: string;
+}
+
+const {src, alt} = Astro.props;
+
+let photopath = src && '/src/assets/'.concat(src);
+import type { ImageMetadata } from 'astro';
+import { Image } from 'astro:assets';
+const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}')
+---
+
+<figure class="image">
+    <Image src={images[photopath]()} alt={alt} />
+</figure>
+
+
+<style>
+    img {
+      -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
+      filter: grayscale(100%);
+      mix-blend-mode: screen;
+      object-fit: cover;
+    }
+</style>

src/components/Navbar.astro

@@ -1,4 +1,7 @@
 ---
+
+import { slide } from 'astro:transitions';
+
 interface Props {
   navItems: {
     path: string;
@@ -18,36 +21,32 @@ const {navItems} = Astro.props;
     </a>
   </div>
   <div id="navMenu" class="navbar-menu  has-background-dark">
-    <div class="navbar-start  has-background-dark" id="navMenu">
+    <div class="navbar-start is-grouped">
         {
             navItems.map((item) => (
-                <a class="navbar-item has-background-dark" href={item.path}><span class="tag is-danger is-large">{item.title}</span></a>
+                <a class="button navbar-item is-fullwidth is-medium is-danger m-2" href={item.path}>{item.title}</a>
             ))
         }
     </div>
   </div>
 </nav>
 
 <script>
-  document.addEventListener('DOMContentLoaded', () => {
-
-  // Get all "navbar-burger" elements
-  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
-
-  // Add a click event on each of them
-  $navbarBurgers.forEach( el => {
-    el.addEventListener('click', () => {
 
-      // Get the target from the "data-target" attribute
-      const target = el.dataset.target;
-      const $target = document.getElementById(target);
+  let burgerListener = () => {
+    let $burger = document.querySelector('.navbar-burger')
+        $burger.addEventListener('click', () => {
+          document.getElementById("navMenu").classList.toggle('is-active');
+        })
+  }
 
-      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
-      el.classList.toggle('is-active');
-      $target.classList.toggle('is-active');
 
-    });
-  });
+  document.addEventListener('DOMContentLoaded', burgerListener)
+  document.addEventListener("astro:after-swap", burgerListener)
+</script>
 
-});
-</script>
+<style>
+  .button {
+    box-shadow: 3px 3px white;
+  }
+</style>

src/components/Organization.astro

@@ -1,5 +1,6 @@
 ---
 import { Icon } from 'astro-icon/components'
+import AboutCard from '@components/AboutCard.astro'
 import markdownit from 'markdown-it'
 const md = markdownit()
 
@@ -22,11 +23,12 @@ interface Props {
       name?: string;
     }[];
   };
+  columns: boolean;
 }
 
-const { org } = Astro.props;
+const { org, columns = true} = Astro.props;
 ---
-<div class="box has-background-danger">
+<AboutCard columns={columns}>
   <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>
@@ -54,4 +56,4 @@ const { org } = Astro.props;
         ))
       }
   </div>
-</div>
+</AboutCard>

src/components/People.astro

@@ -21,10 +21,8 @@ interface Props {
 
 const { people, columns = false } = Astro.props;
 ---
-<div class={columns ? "columns is-multiline" : ""}>
 {
   people.map((person) => (
     <Person {person} columns = {columns} />
   ))
-}
-</div>
+}

src/components/Person.astro

@@ -1,5 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components';
+import AboutCard from '@components/AboutCard.astro'
+import ImageBox from '@components/ImageBox.astro'
 
 import markdownit from 'markdown-it';
 
@@ -25,58 +27,34 @@ interface Props {
 
 const { person, columns = false} = Astro.props;
 
-let photopath = person.photo && '/src/assets/'.concat(person.photo);
-import type { ImageMetadata } from 'astro';
-import { Image } from 'astro:assets';
-const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}')
-
 ---
-<div class={columns ? "column is-half" : ""}>
-  <div class="box has-background-danger">
-    <div class="block">
-      <div class="tile is-ancestor">
-        <div class="tile is-parent">
-          {"photo" in person && 
-            <div class="tile is-child is-3">
-              <figure class="image is-128x128">
-                <Image src={images[photopath]()} alt={"Photo of ".concat(person.name)} />
-              </figure>
-            </div>}
-          <div class="tile is-child">
-            <p class="title is-4 has-text-white">{person.name}{person.creds && ", ".concat(person.creds.join(", "))}</p>
-            <p class="subtitle is-4 has-text-white">{person.roles && person.roles.join(", ")}</p>
-            <p class="has-text-white">{person.pronouns}</p>
-            <p>{person.email && <a href={"mailto:".concat(person.email)} class="has-text-white">{person.email}</a>}</p>
-          </div>
+<AboutCard columns={columns}>
+  <div class="block">
+    <div class="tile is-ancestor">
+      <div class="tile is-parent">
+        {"photo" in person && 
+          <div class="tile is-child is-3">
+            <figure class="image is-128x128">
+              <ImageBox src={person.photo} alt={"Photo of ".concat(person.name)} />
+            </figure>
+          </div>}
+        <div class="tile is-child">
+          <p class="title is-4 has-text-white">{person.name}{person.creds && ", ".concat(person.creds.join(", "))}</p>
+          <p class="subtitle is-4 has-text-white">{person.roles && person.roles.join(", ")}</p>
+          <p class="has-text-white">{person.pronouns}</p>
+          <p>{person.email && <a href={"mailto:".concat(person.email)} class="has-text-white">{person.email}</a>}</p>
         </div>
       </div>
     </div>
-    <div class="block">
-      <p class="has-text-white" set:html={md.renderInline(person.bio)}></p>
-    </div>
-    <!-- <div class="block">
-      <div class="tags">
-        {
-          person.skills.map((skill) => (
-            <span class="tag is-success">{skill}</span>
-          ))
-        }
-      </div>
-    </div> -->
-    <div class="block">
-        {
-          person.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>
-
-<style>
-img {
-  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
-  filter: grayscale(100%);
-  mix-blend-mode: screen;
-}
-</style>
+  <div class="block">
+    <p class="has-text-white" set:html={md.renderInline(person.bio)}></p>
+  </div>
+  <div class="block">
+      {
+        person.socials.map((platform) => (
+          <span><a href={platform.url} class="has-text-white"><Icon name={"mdi:".concat(platform.name.toLowerCase())} size={28} /></a></span>
+        ))
+      }
+  </div>
+</AboutCard>

src/layouts/BaseLayout.astro

@@ -4,8 +4,6 @@ import Globe from '@components/Globe.astro';
 import Footer from '@components/Footer.astro';
 import Background from '@components/Background.astro';
 
-import { ViewTransitions } from 'astro:transitions';
-
 import '../sass/styles.scss';
 
 interface Props {
@@ -37,12 +35,15 @@ const navItems = [
 		<title>{name}</title>
 	</head>
 	<body>
-		<div>
-		<Header {navItems}/>
-		<slot/>
+		<section class="section is-fullheight">
+			<Header {navItems}/>
+			<div class="container" id="content">
+				<slot/>
+			</div>
+		</section>
 		<Footer {navItems}/>
-		</div>
-		<Globe 
+		<Globe
+		transition:persist
 		sec={50000},
 		lat={42.389118}, 
 		lng={-71.097153}, 
@@ -53,6 +54,4 @@ const navItems = [
 		accesstoken={import.meta.env.PUBLIC_MAPBOX_KEY}/>
 		<Background/>
 	</body>
-</html>
-
-<ViewTransitions />
+</html>

src/layouts/ContentLayout.astro

@@ -1,6 +1,5 @@
 ---
 import BaseLayout from '@layouts/BaseLayout.astro';
-import { ViewTransitions } from 'astro:transitions';
 
 interface Props {
   name: string;
@@ -15,6 +14,4 @@ const { name } = Astro.props;
             <slot/>
         </div>
     </section>
-</BaseLayout>
-
-<ViewTransitions />
+</BaseLayout>

src/pages/about.astro

@@ -1,7 +1,8 @@
 ---
-import ContentLayout from '@layouts/ContentLayout.astro'
+import BaseLayout from '@layouts/BaseLayout.astro'
 import People from '@components/People.astro'
 import Organization from '@components/Organization.astro'
+import { ViewTransitions } from 'astro:transitions'
 
 import data from "@src/config.json";
 
@@ -12,24 +13,26 @@ let leadership = data.people.filter(function(person) {
  let people = data.people.filter(function(person) {
       return !person.leadership;
  });
- console.log(people.length);
+
 ---
-<ContentLayout name={data.name}>
+<BaseLayout 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={leadership} />
+      <Organization org={data} columns={true}/>
+      <People people={leadership} columns={true}/>
     </div>
   </div>
   </section>
   {(people.length >0 ) &&
     <section class="section">
       <h1 class="title has-text-white">Who We Are</h1>
+        <div class="columns is-multiline">
         <People people={people} columns={true} />
+        </div>
     </section>
   }
-
-</ContentLayout>
+</BaseLayout>
+<ViewTransitions/>
+
+<style>
+</style>

src/pages/index.astro

@@ -2,7 +2,9 @@
 import BaseLayout from '@layouts/BaseLayout.astro';
 import Hero from '@components/Hero.astro';
 import data from "@src/config.json";
+import { ViewTransitions } from 'astro:transitions';
 ---
 <BaseLayout name={data.name}>
 	<Hero title={data.name}, subtitle={data.subtitle}/>
-</BaseLayout>
+</BaseLayout>
+<ViewTransitions/>

src/sass/styles.scss

@@ -5,4 +5,8 @@ $success: rgb(102, 14, 17);
 $link: rgb(255, 255, 255);
 $dark: rgba(255, 255, 255, 0);
 
-@import "node_modules/bulma/bulma.sass";
+@import "node_modules/bulma/bulma.sass";
+
+#content {
+    min-height: 60vh;
+  }