Add outreach page (#397)

Addresses #395 --------- Co-authored-by: Vincent Rubinetti <[email protected]>
monarch-initiative · Oct 16, 2023 · 479c3e2 · 479c3e2
1 parent c45f839
commit 479c3e2
Show file tree

Hide file tree

Showing 8 changed files with 178 additions and 9 deletions.
diff --git a/frontend/src/components/TheFooter.vue b/frontend/src/components/TheFooter.vue
@@ -11,6 +11,18 @@
       <AppLink v-tooltip="'GitHub'" to="https://github.com/monarch-initiative">
         <AppIcon icon="github" />
       </AppLink>
+      <AppLink
+        v-tooltip="'YouTube'"
+        to="https://www.youtube.com/@monarchinitiative"
+      >
+        <AppIcon icon="youtube" />
+      </AppLink>
+      <AppLink
+        v-tooltip="'LinkedIn'"
+        to="https://www.linkedin.com/company/the-monarch-initiative"
+      >
+        <AppIcon icon="linkedin" />
+      </AppLink>
     </div>
     <div class="license">
       <span>Monarch Intiative {{ new Date().getFullYear() }}</span>

diff --git a/frontend/src/global/icons.ts b/frontend/src/global/icons.ts
@@ -8,7 +8,9 @@ import * as fas from "@fortawesome/free-solid-svg-icons";
 /** create collection/"palette" of useable icons */
 const icons = [
   fab.faGithub,
+  fab.faLinkedin,
   fab.faMedium,
+  fab.faYoutube,
   far.faChartBar,
   far.faCircleCheck,
   far.faCirclePause,
@@ -46,6 +48,7 @@ const icons = [
   fas.faBars,
   fas.faBarsProgress,
   fas.faBook,
+  fas.faBullhorn,
   fas.faCheck,
   fas.faCircleExclamation,
   fas.faCircleInfo,
@@ -58,6 +61,7 @@ const icons = [
   fas.faFeatherPointed,
   fas.faFilter,
   fas.faFlask,
+  fas.faHandshakeAngle,
   fas.faLink,
   fas.faLocationDot,
   fas.faMagnifyingGlass,
@@ -67,6 +71,7 @@ const icons = [
   fas.faPersonRunning,
   fas.faScaleBalanced,
   fas.faSitemap,
+  fas.faShareNodes,
   fas.faSquareCheck,
   fas.faSubscript,
   fas.faTable,

diff --git a/frontend/src/pages/PageHome.vue b/frontend/src/pages/PageHome.vue
@@ -141,14 +141,28 @@
         to="https://medium.com/@MonarchInit"
         icon="medium"
         title="Medium"
-        subtitle="Blog posts and major updates"
+        subtitle="Blog posts"
         design="small"
       />
       <AppTile
         to="https://github.com/monarch-initiative"
         icon="github"
         title="GitHub"
-        subtitle="Source code and releases"
+        subtitle="Source code"
+        design="small"
+      />
+      <AppTile
+        to="https://www.youtube.com/@monarchinitiative"
+        icon="youtube"
+        title="YouTube"
+        subtitle="Videos"
+        design="small"
+      />
+      <AppTile
+        to="https://www.linkedin.com/company/the-monarch-initiative"
+        icon="linkedin"
+        title="LinkedIn"
+        subtitle="Major updates"
         design="small"
       />
     </AppFlex>

diff --git a/frontend/src/pages/about/PageAbout.vue b/frontend/src/pages/about/PageAbout.vue
@@ -69,6 +69,12 @@
         title="Cite"
         subtitle="How to cite and attribute Monarch"
       />
+      <AppTile
+        to="/outreach"
+        icon="bullhorn"
+        title="Outreach"
+        subtitle="Training and Community Engagement"
+      />
       <AppTile
         to="/terms"
         icon="scale-balanced"

diff --git a/frontend/src/pages/about/PageOutreach.vue b/frontend/src/pages/about/PageOutreach.vue
@@ -0,0 +1,113 @@
+<!-- 
+    This is a page for information about outreach and community engagement.
+ -->
+
+<template>
+  <AppSection>
+    <AppHeading>Outreach</AppHeading>
+    <p>
+      The Monarch Initiative is a community effort, and we welcome your
+      participation!
+    </p>
+
+    <AppFlex>
+      <AppButton to="/help" icon="handshake-angle" text="Support" />
+      <AppButton to="/#follow" icon="share-nodes" text="Follow" />
+    </AppFlex>
+  </AppSection>
+
+  <AppSection>
+    <AppHeading>Ways to Get Involved</AppHeading>
+
+    <AppLink
+      to="https://oboacademy.github.io/obook/courses/monarch-obo-training/"
+      >OBO Academy: Monarch Training Series</AppLink
+    >
+    <p>
+      Training for Semantic Engineers, Ontology Curators, and Knowledge
+      Scientists on basic technologies in and around the Monarch Initiative and
+      Open Biological and Biomedical Ontologies (OBO).
+    </p>
+
+    <ul>
+      <li>
+        The OBO Academy develops Self-paced tutorials in the OBOOK, hosts
+        fortnightly live training sessions on Zoom, and maintains a YouTube
+        channel with lesson recordings.
+      </li>
+      <li>
+        Youtube channel:
+        <AppLink to="https://www.youtube.com/@obo-academy"
+          >https://www.youtube.com/@obo-academy</AppLink
+        >
+      </li>
+      <li>
+        Join the OBO Academy mailing list
+        <AppLink to="https://groups.google.com/g/obo-academy"> here </AppLink>
+      </li>
+    </ul>
+
+    <hr />
+
+    <AppLink to="https://mondo.monarchinitiative.org"
+      >The Mondo Disease Ontology (Mondo)</AppLink
+    >
+
+    <p>
+      Mondo aims to harmonize disease definitions across the world. The name
+      Mondo comes from the latin word ‘mundus’ and means ‘for the world.’
+    </p>
+
+    <ul>
+      <li>
+        The Mondo Outreach calls aim to bring together stakeholders and clinical
+        terminology experts to discuss specific use cases and requirements. Our
+        goal is to improve Mondo with a focus on our user needs.
+      </li>
+      <ul>
+        <li>
+          These calls are scheduled for the second Thursday of every month. You
+          can find more information about the calls
+          <AppLink
+            to="https://mondo.monarchinitiative.org/pages/workshop/#outreach"
+            >here</AppLink
+          >.
+        </li>
+        <li>
+          You can find the schedule with Zoom information
+          <AppLink
+            to="https://docs.google.com/document/d/1MStpDyh9LOZYJTjLtnpOsNYc3HaeU-bz0CHAI9xOjfQ/edit#heading=h.6sqkx1xhumse"
+            >here</AppLink
+          >.
+        </li>
+      </ul>
+      <li>
+        Join the Mondo User mailing list
+        <AppLink to="https://groups.google.com/g/mondo-users"> here </AppLink>
+      </li>
+    </ul>
+
+    <hr />
+
+    <AppLink to="https://linkml.io/linkml/"
+      >LinkML (the Linked data Modeling Language)</AppLink
+    >
+
+    <p>
+      LinkML is a flexible modeling language that allows you to author schemas
+      in YAML that describe the structure of your data.
+    </p>
+    <p>
+      LinkML is used to model the Monarch data model, and we welcome your
+      contributions to the LinkML community.
+    </p>
+    <ul>
+      <li>
+        You can learn more
+        <AppLink to="https://linkml.io/linkml/faq/contributing.html"
+          >here</AppLink
+        >.
+      </li>
+    </ul>
+  </AppSection>
+</template>
diff --git a/frontend/src/pages/about/team.json b/frontend/src/pages/about/team.json
@@ -75,7 +75,8 @@
       },
       {
         "name": "Bryan Laraway",
-        "role": "Data Wrangler"
+        "role": "Data Wrangler",
+        "link": "https://tislab.org/members/bryan-laraway.html"
       }
     ]
   },
@@ -85,8 +86,8 @@
     "members": [
       {
         "name": "Peter Robinson",
-        "link": "https://www.jax.org/research-and-faculty/faculty/peter-robinson",
-        "role": "Monarch PI"
+        "role": "Monarch PI",
+        "link": "https://www.jax.org/research-and-faculty/faculty/peter-robinson"
       },
       {
         "name": "Leigh Carmody",
@@ -288,7 +289,7 @@
       {
         "name": "Harry Hochheiser",
         "role": "Monarch PI",
-        "link": "https://www.dbmi.pitt.edu/person/harry-hochheiser-phd"
+        "link": "https://www.phdl.pitt.edu/people/harry-hochheiser-phd"
       },
       {
         "name": "Michael Davis",

diff --git a/frontend/src/pages/help/PageHelp.vue b/frontend/src/pages/help/PageHelp.vue
@@ -7,8 +7,9 @@
   <AppSection>
     <AppHeading>Help</AppHeading>
     <p>
-      Request a feature, report a bug, or chat with us about anything
-      Monarch-related.
+      We welcome all questions, requests, and feedback! Request a feature,
+      report a bug, or chat with us about anything Monarch-related. We will
+      connect you with someone who can help.
     </p>
     <AppFlex gap="big">
       <AppTile

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
@@ -98,6 +98,11 @@ export const routes: RouteRecordRaw[] = [
     name: "PhenomicsFirst",
     component: () => import("../pages/about/PagePhenomicsFirst.vue"),
   },
+  {
+    path: "/outreach",
+    name: "Outreach",
+    component: () => import("../pages/about/PageOutreach.vue"),
+  },
 
   /** help pages */
   {
@@ -184,7 +189,12 @@ const getTarget = (element: Element): Element => {
 };
 
 /** get offset to account for header */
-const getOffset = () => document?.querySelector("header")?.clientHeight || 0;
+const getOffset = () => {
+  const header = document?.querySelector("header");
+  if (header && window.getComputedStyle(header).position === "sticky")
+    header.clientHeight;
+  return 0;
+};
 
 /** scroll to element */
 export const scrollToElement = async (element?: Element | null) => {
@@ -220,4 +230,11 @@ router.beforeEach(() => {
   hideAll();
 });
 
+/** on route load */
+router.afterEach(async () => {
+  /** wait for layout shifts */
+  await sleep(1000);
+  scrollToHash();
+});
+
 export default router;