Add member metadata and flip card (2nd variant)

src/lib/components/svg/discord.svelte

@@ -1,8 +1,14 @@
-<svg width="71" height="55" viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg
+  width="71"
+  height="55"
+  viewBox="0 0 71 55"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="currentColor"
+>
+  <title>Discord</title>
   <g clip-path="url(#clip0)">
     <path
       d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z"
-      fill="currentColor"
     />
   </g>
   <defs>

src/lib/components/svg/github.svelte

@@ -0,0 +1,14 @@
+<svg
+  viewBox="64 64 896 896"
+  focusable="false"
+  data-icon="github"
+  width="64"
+  height="64"
+  fill="currentColor"
+  aria-hidden="true"
+>
+  <title>GitHub</title>
+  <path
+    d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0138.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
+  />
+</svg>

src/lib/components/svg/instagram.svelte

@@ -1,10 +1,15 @@
-<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg
+  width="56"
+  height="56"
+  viewBox="0 0 56 56"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <title>Instagram</title>
   <path
     d="M39.6662 4.66625C42.7578 4.67548 45.7201 5.9077 47.9062 8.09378C50.0923 10.2799 51.3245 13.2422 51.3338 16.3337V39.6662C51.3245 42.7578 50.0923 45.7201 47.9062 47.9062C45.7201 50.0923 42.7578 51.3245 39.6662 51.3338H16.3337C13.2422 51.3245 10.2799 50.0923 8.09378 47.9062C5.9077 45.7201 4.67548 42.7578 4.66625 39.6662V16.3337C4.67548 13.2422 5.9077 10.2799 8.09378 8.09378C10.2799 5.9077 13.2422 4.67548 16.3337 4.66625H39.6662ZM39.6662 0H16.3337C7.35 0 0 7.35 0 16.3337V39.6662C0 48.65 7.35 56 16.3337 56H39.6662C48.65 56 56 48.65 56 39.6662V16.3337C56 7.35 48.65 0 39.6662 0Z"
-    fill="white"
   />
   <path
     d="M43.1663 16.3338C42.474 16.3338 41.7973 16.1285 41.2218 15.7439C40.6462 15.3594 40.1976 14.8127 39.9327 14.1732C39.6678 13.5337 39.5985 12.8299 39.7335 12.151C39.8686 11.4721 40.2019 10.8484 40.6914 10.3589C41.1809 9.86944 41.8045 9.5361 42.4834 9.40105C43.1624 9.26601 43.8661 9.33532 44.5056 9.60022C45.1452 9.86513 45.6918 10.3137 46.0764 10.8893C46.461 11.4649 46.6663 12.1416 46.6663 12.8338C46.6672 13.2937 46.5774 13.7493 46.4018 14.1744C46.2263 14.5994 45.9685 14.9857 45.6433 15.3109C45.3181 15.6361 44.9319 15.8939 44.5068 16.0694C44.0817 16.2449 43.6262 16.3348 43.1663 16.3338ZM28 18.6663C29.846 18.6663 31.6506 19.2137 33.1856 20.2393C34.7205 21.2649 35.9168 22.7227 36.6233 24.4282C37.3297 26.1337 37.5146 28.0104 37.1544 29.821C36.7943 31.6315 35.9053 33.2947 34.6 34.6C33.2946 35.9054 31.6315 36.7943 29.8209 37.1545C28.0104 37.5146 26.1337 37.3298 24.4281 36.6233C22.7226 35.9169 21.2649 34.7205 20.2393 33.1856C19.2137 31.6507 18.6663 29.8461 18.6663 28.0001C18.6689 25.5254 19.6531 23.1529 21.403 21.403C23.1528 19.6532 25.5254 18.669 28 18.6663ZM28 14.0001C25.2311 14.0001 22.5243 14.8211 20.222 16.3595C17.9197 17.8978 16.1253 20.0843 15.0657 22.6425C14.0061 25.2006 13.7288 28.0156 14.269 30.7313C14.8092 33.4471 16.1426 35.9416 18.1005 37.8995C20.0584 39.8575 22.553 41.1909 25.2687 41.731C27.9845 42.2712 30.7994 41.994 33.3576 40.9344C35.9157 39.8747 38.1022 38.0803 39.6406 35.778C41.1789 33.4757 42 30.769 42 28.0001C42 24.287 40.525 20.7261 37.8995 18.1006C35.274 15.475 31.713 14.0001 28 14.0001Z"
-    fill="white"
   />
 </svg>

src/lib/components/svg/linkedin.svelte

@@ -1,6 +1,12 @@
-<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg
+  width="56"
+  height="56"
+  viewBox="0 0 56 56"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <title>LinkedIn</title>
   <path
     d="M51.5213 0H4.785C2.23125 0 0 1.8375 0 4.36125V51.2012C0 53.7387 2.23125 56 4.785 56H51.5075C54.075 56 56 53.7237 56 51.2012V4.36125C56.015 1.8375 54.075 0 51.5213 0ZM17.3587 46.6787H9.33625V21.735H17.3587V46.6787ZM13.625 17.9425H13.5675C11 17.9425 9.3375 16.0312 9.3375 13.6388C9.3375 11.2025 11.0438 9.33625 13.6688 9.33625C16.2938 9.33625 17.9 11.1888 17.9575 13.6388C17.9563 16.0312 16.2938 17.9425 13.625 17.9425ZM46.6787 46.6787H38.6562V33.04C38.6562 29.7725 37.4888 27.54 34.5863 27.54C32.3688 27.54 31.0562 29.04 30.4725 30.5013C30.2537 31.0263 30.195 31.7412 30.195 32.4712V46.6787H22.1725V21.735H30.195V25.2062C31.3625 23.5437 33.1862 21.1513 37.43 21.1513C42.6963 21.1513 46.68 24.6225 46.68 32.1063L46.6787 46.6787Z"
-    fill="white"
   />
 </svg>

src/lib/components/svg/public.svelte

@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="2 2 20 20"
+  width="24px"
+  fill="currentColor"
+>
+  <path d="M0 0h24v24H0z" fill="none" />
+  <path
+    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"
+  />
+</svg>

src/lib/components/toaster/toaster.svelte

@@ -1,6 +1,17 @@
 <script lang="ts">
   import { fly } from 'svelte/transition';
   import { toasts, ToastType } from './toasts';
+  import type { Toast } from './toasts';
+
+  function toastHighlightStyle(toast: Toast): string {
+    switch (toast.type) {
+      case ToastType.Error:
+        return `--error-rgb`;
+      case ToastType.Success:
+      default:
+        return `--acm-${toast.path}-rgb`;
+    }
+  }
 </script>
 
 <section>
@@ -9,10 +20,9 @@
       class="toast-item"
       class:error={toastItem.type === ToastType.Error}
       class:success={toastItem.type === ToastType.Success}
-      class:info={toastItem.type === ToastType.Info}
       in:fly={{ y: 20 }}
       out:fly={{ y: -20 }}
-      style:--highlights={`var(--acm-${toastItem.path}-rgb)`}
+      style:--highlights={`var(${toastHighlightStyle(toastItem)})`}
     >
       <img src="/assets/png/acm-shark.png" alt="acmCSUF Mascot: Frank the Shark" />
       <p>{@html toastItem.content}</p>
@@ -22,7 +32,6 @@
 
 <style>
   :root {
-    --success-rgb: 157, 231, 53;
     --error-rgb: 255, 67, 101;
     --info-rgb: 30, 108, 255;
   }

src/lib/components/toaster/toasts.ts

@@ -9,12 +9,11 @@ const numToasts = writable<number>(0);
 export enum ToastType {
   Success = 'success',
   Error = 'error',
-  Info = 'info',
 }
 
 export interface Toast {
   id: number;
-  content: string;
+  content: string | (() => string | Promise<string>);
   type?: ToastType;
   dismissible?: boolean;
   timeout?: number;
@@ -30,14 +29,32 @@ function makeToast(
   return {
     id,
     content: content,
-    type: type ?? ToastType.Info,
+    type: type ?? ToastType.Success,
     dismissible: dismissible ?? true,
     timeout: timeout ?? TOAST_TIMEOUT,
     path: path ?? acmGeneral.slug,
   };
 }
 
-export function toast(props: Omit<Toast, 'id'>): void {
+export async function toast(contentOrProps: Toast['content'] | Omit<Toast, 'id'>): Promise<void> {
+  let props: Omit<Toast, 'id'>;
+  if (typeof contentOrProps == 'object') {
+    props = contentOrProps;
+  } else {
+    props = {
+      content: contentOrProps,
+    };
+  }
+
+  if (typeof props.content == 'function') {
+    try {
+      props.content = await props.content();
+    } catch (err) {
+      props.content = `${err}`;
+      props.type = ToastType.Error;
+    }
+  }
+
   numToasts.update((value: number) => {
     const nextToast = makeToast(value + 1, props);
 

src/lib/public/board/data/officers.json

@@ -71,6 +71,10 @@
   },
   {
     "fullName": "Alan Cortez",
+    "socials": {
+      "website": "alancortez1337.github.io/portfolio/",
+      "github": "alancortez1337"
+    },
     "positions": {
       "S22": {
         "title": "Create Officer",
@@ -107,6 +111,13 @@
   },
   {
     "fullName": "Ethan Davidson",
+    "socials": {
+      "website": "ethandavidson.com",
+      "github": "EthanThatOneKid",
+      "discord": "EthanThatOneKid#3456",
+      "linkedin": "etok",
+      "instagram": "ethanthatonekid"
+    },
     "positions": {
       "S21": {
         "title": "Webmaster",
@@ -139,6 +150,9 @@
   },
   {
     "fullName": "Diamond Dinh",
+    "socials": {
+      "github": "diamondburned"
+    },
     "positions": {
       "S22": {
         "title": "Dev Project Manager",

src/lib/public/board/types.ts

@@ -6,11 +6,20 @@ export enum Term {
   Spring23 = 'S23',
 }
 
+export enum Social {
+  Website = 'website',
+  GitHub = 'github',
+  Discord = 'discord',
+  LinkedIn = 'linkedin',
+  Instagram = 'instagram',
+}
+
 export interface Officer {
   fullName: string;
   picture: string;
-  displayName?: string;
-
+  socials?: {
+    [s in Social]?: string;
+  };
   positions: {
     [t in Term]?: {
       title: string;

src/lib/server/blog/posts.ts

@@ -111,6 +111,8 @@ function cacheBlogPosts(output: any): BlogPost[] {
 
 function getOfficerByGhUsername(ghUsername: string): Officer | null {
   // get author by GitHub username
-  const officer = OFFICERS.find((o) => o.displayName !== undefined && o.displayName === ghUsername);
+  const officer = OFFICERS.find(
+    (o) => o.socials && o.socials.github && o.socials.github === ghUsername
+  );
   return officer ?? null;
 }

src/routes/(site)/about/officer-profile-list.svelte

@@ -63,7 +63,8 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 16px;
+    /* More padding is added in .officer-container for the underline. */
+    gap: 12px;
 
     .container {
       width: 100%;