feat: implement learn landing page (#3328)

common/types.ts

@@ -0,0 +1,3 @@
+import { LinkProps as DXLinkProps } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
+
+export type LinkProps = Omit<DXLinkProps, "url"> & { url: string };

components/Events/common/utils.ts

@@ -3,6 +3,7 @@ import {
   buildMomentField,
   convertDateToMoment,
   getFrontmatterByPaths,
+  isFrontmatterEvent,
 } from "../../../content/utils";
 import {
   getDocsDirectory,
@@ -141,10 +142,14 @@ function processFrontmatterURL(path?: string): string | null {
  * @returns frontmatter for an event article.
  */
 export function processEventFrontmatter(
-  frontmatter: FrontmatterEvent
-): FrontmatterEvent {
+  frontmatter: Frontmatter | undefined
+): FrontmatterEvent | undefined {
+  if (!frontmatter) return;
+  if (!isFrontmatterEvent(frontmatter)) return;
   return {
     ...processFrontmatter(["", frontmatter]),
+    enableNavigation: false,
+    enableOutline: false,
     formattedSessions: formatSessions(
       frontmatter.sessions,
       frontmatter.timezone

components/Home/components/Section/components/SectionAnalysisPortals/common/utils.ts

@@ -23,7 +23,7 @@ export function buildAnalysisPortalCards(browserURL: string): SectionCard[] {
         {
           label: ACTION_LABEL.LEARN_MORE,
           target: ANCHOR_TARGET.SELF,
-          url: "/learn/introduction/intro-to-terra",
+          url: "/learn/run-analyses-workflows/intro-to-terra",
         },
       ],
       media: {
@@ -61,7 +61,7 @@ export function buildAnalysisPortalCards(browserURL: string): SectionCard[] {
         {
           label: ACTION_LABEL.LEARN_MORE,
           target: ANCHOR_TARGET.SELF,
-          url: "/learn/introduction/intro-to-dockstore",
+          url: "/learn/run-analyses-workflows/intro-to-dockstore",
         },
       ],
       media: {
@@ -93,7 +93,7 @@ export function buildAnalysisPortalCards(browserURL: string): SectionCard[] {
         {
           label: ACTION_LABEL.LEARN_MORE,
           target: ANCHOR_TARGET.SELF,
-          url: "/learn/interactive-analysis/getting-started-with-bioconductor",
+          url: "/learn/run-interactive-analyses/getting-started-with-bioconductor",
         },
       ],
       media: {
@@ -109,7 +109,7 @@ export function buildAnalysisPortalCards(browserURL: string): SectionCard[] {
         {
           label: ACTION_LABEL.LEARN_MORE,
           target: ANCHOR_TARGET.SELF,
-          url: "/learn/interactive-analysis/getting-started-with-galaxy",
+          url: "/learn/run-interactive-analyses/getting-started-with-galaxy",
         },
       ],
       media: {
@@ -125,7 +125,7 @@ export function buildAnalysisPortalCards(browserURL: string): SectionCard[] {
         {
           label: ACTION_LABEL.LEARN_MORE,
           target: ANCHOR_TARGET.SELF,
-          url: "/learn/interactive-analysis/getting-started-with-jupyter-notebooks",
+          url: "/learn/run-interactive-analyses/getting-started-with-jupyter-notebooks",
         },
       ],
       media: {

components/Home/components/Section/components/SectionDatasets/sectionDatasets.tsx

@@ -11,8 +11,7 @@ import {
 } from "./sectionDatasets.styles";
 
 const CONSORTIA_ROADMAP = "/consortia";
-const CONTRIBUTE_DATA =
-  "/learn/data-submitters/submission-guide/data-submitters-overview";
+const CONTRIBUTE_DATA = "/learn/submit-data";
 const EXPLORE_DATASETS = "/data/consortia";
 
 interface SectionDatasetsProps {

components/Home/components/Section/components/SectionHero/common/utils.ts

@@ -55,7 +55,7 @@ export function buildCarouselCards(): SectionCard[] {
         {
           label: ACTION_LABEL.LEARN_MORE,
           target: ANCHOR_TARGET.SELF,
-          url: "/learn/videos/anvil-videos#sharing-on-anvil",
+          url: "/learn/watch-videos-and-tutorials/anvil-videos",
         },
       ],
       text: "Our short video series shows how AnVIL improves collaborative science for different researcher roles.",
@@ -114,7 +114,7 @@ export function buildCarouselCards(): SectionCard[] {
         {
           label: ACTION_LABEL.LEARN_MORE,
           target: ANCHOR_TARGET.SELF,
-          url: "/learn/interactive-analysis/getting-started-with-galaxy",
+          url: "/learn/run-interactive-analyses/getting-started-with-galaxy",
         },
       ],
       text: "AnVIL has access to full Galaxy capabilities, a computational workbench used by thousands of scientists to analyze biomedical data.",

components/Home/components/Section/components/SectionHero/sectionHero.tsx

@@ -10,8 +10,8 @@ import {
   Subhead,
 } from "./sectionHero.styles";
 
-const GET_STARTED = "/learn";
-const LEARN_MORE = "/overview";
+const GET_STARTED = "/learn/get-started";
+const LEARN_MORE = "/learn";
 
 export const SectionHero = (): JSX.Element => {
   return (

components/Home/components/Section/components/SectionWorkspaces/sectionWorkspaces.tsx

@@ -3,7 +3,8 @@ import { Section, SectionSubtitle, SectionTitle } from "../../section.styles";
 import { Workspaces } from "./components/Workspaces/workspaces";
 import { Headline, SectionLayout } from "./sectionWorkspaces.styles";
 
-const EXPLORE_WORKSPACES = "/learn/analysis-workflows/using-example-workspaces";
+const EXPLORE_WORKSPACES =
+  "/learn/run-analyses-workflows/using-example-workspaces";
 
 export const SectionWorkspaces = (): JSX.Element => {
   return (

components/Layout/components/Content/components/SupportForum/supportForum.styles.ts

@@ -0,0 +1,10 @@
+import { RoundedPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
+import styled from "@emotion/styled";
+
+export const StyledPaper = styled(RoundedPaper)`
+  display: grid;
+  margin-top: 64px;
+  padding: 40px 32px;
+  place-items: center;
+  text-align: center;
+`;

components/Layout/components/Content/components/SupportForum/supportForum.tsx

@@ -0,0 +1,40 @@
+import {
+  ANCHOR_TARGET,
+  REL_ATTRIBUTE,
+} from "@databiosphere/findable-ui/lib/components/Links/common/entities";
+import {
+  TEXT_BODY_LARGE_400_2_LINES,
+  TEXT_HEADING,
+} from "@databiosphere/findable-ui/lib/theme/common/typography";
+import { Button, Typography } from "@mui/material";
+import { PATH_PARAMETERS } from "../../../../../../common/constants";
+import { StyledPaper } from "./supportForum.styles";
+
+export const SupportForum = (): JSX.Element => {
+  return (
+    <StyledPaper>
+      <Typography component="h3" variant={TEXT_HEADING}>
+        AnVIL Support Forum
+      </Typography>
+      <Typography
+        component="p"
+        color="ink.light"
+        mb={4}
+        mt={1}
+        variant={TEXT_BODY_LARGE_400_2_LINES}
+      >
+        Be sure to check out the AnVIL Community for support, plus tips & tricks
+        from our users and much more.
+      </Typography>
+      <Button
+        color="secondary"
+        variant="contained"
+        href={PATH_PARAMETERS.anvilHelpURL}
+        rel={REL_ATTRIBUTE.NO_OPENER_NO_REFERRER}
+        target={ANCHOR_TARGET.BLANK}
+      >
+        Join the forum
+      </Button>
+    </StyledPaper>
+  );
+};

components/Layout/components/Content/content.styles.ts

@@ -90,6 +90,10 @@ const muiButtonContainedPrimary = css`
   }
 `;
 
+// See https://github.com/emotion-js/emotion/issues/1105.
+// See https://github.com/emotion-js/emotion/releases/tag/%40emotion%2Fcache%4011.10.2.
+const ignoreSsrWarning =
+  "/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */";
 export const Content = styled.div<Props>`
   h1,
   h2,
@@ -146,4 +150,8 @@ export const Content = styled.div<Props>`
   ${image};
   ${muiAlert};
   ${muiButtonContainedPrimary};
+
+  > *:first-child:not(style) ${ignoreSsrWarning} {
+    margin-top: 0;
+  }
 `;

components/Layout/components/Header/components/Actions/actions.tsx

@@ -0,0 +1,11 @@
+import { Button } from "@mui/material";
+import Link from "next/link";
+import { BUTTON_PROPS } from "./constants";
+
+export const Actions = (): JSX.Element => {
+  return (
+    <Button component={Link} {...BUTTON_PROPS} href="/learn/get-started">
+      Get Started
+    </Button>
+  );
+};

components/Layout/components/Header/components/Actions/constants.ts

@@ -0,0 +1,7 @@
+import { ButtonProps } from "@mui/material";
+
+export const BUTTON_PROPS: Partial<ButtonProps> = {
+  color: "primary",
+  size: "medium",
+  variant: "contained",
+};

components/Layout/components/Main/main.styles.ts

@@ -0,0 +1,6 @@
+import { Main as DXMain } from "@databiosphere/findable-ui/lib/components/Layout/components/ContentLayout/components/Main/main";
+import styled from "@emotion/styled";
+
+export const StyledMain = styled(DXMain)`
+  flex-direction: column;
+`;

components/Layout/components/Section/components/SectionContent/components/SectionOverview/sectionOverview.styles.ts

@@ -0,0 +1,51 @@
+import { primaryMain } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
+import styled from "@emotion/styled";
+import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
+
+export const GroupOverview = styled.div`
+  .MuiDivider-root,
+  .MuiTypography-text-heading {
+    grid-column: 1 / -1;
+  }
+
+  .MuiDivider-root {
+    margin: 32px 0;
+  }
+
+  .MuiTypography-text-heading {
+    line-height: 34px;
+  }
+`;
+
+export const GroupLinks = styled.div`
+  margin-top: 8px;
+
+  ${mediaTabletUp} {
+    display: grid;
+    gap: 0 64px;
+    grid-auto-columns: 1fr;
+
+    ul + ul {
+      grid-column: 2;
+    }
+  }
+`;
+
+export const UnorderedList = styled("ul")`
+  list-style-position: inside;
+  padding-left: 0;
+
+  li {
+    margin: 4px 0;
+    padding-left: 24px; // required for list-style-position: inside; allows for market to be positioned inside the list item.
+    text-indent: -15px; // required for list-style-position: inside; centering marker; half of the 24px width and half marker width @ 6px.
+
+    > * {
+      margin-left: -6px; // required for list-style-position: inside; assists with vertical alignment of list item; difference between indent and padding adjustments and half of the marker width.
+    }
+
+    &::marker {
+      color: ${primaryMain};
+    }
+  }
+`;

components/Layout/components/Section/components/SectionContent/components/SectionOverview/sectionOverview.tsx

@@ -0,0 +1,50 @@
+import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
+import { TEXT_HEADING } from "@databiosphere/findable-ui/lib/theme/common/typography";
+import { Divider } from "@mui/material";
+import { Fragment } from "react";
+import { Heading } from "../../../../../../../common/Typography/components/Heading/heading";
+import {
+  GroupOverview,
+  GroupLinks,
+  UnorderedList,
+} from "./sectionOverview.styles";
+import { SectionOverviewProps } from "./types";
+import { splitLinks } from "./utils";
+
+export const SectionOverview = ({
+  overview,
+}: SectionOverviewProps): JSX.Element | null => {
+  if (!overview) return null;
+  return (
+    <Fragment>
+      {overview.map(({ label, links }, groupIndex) => {
+        return (
+          links.length > 0 && (
+            <GroupOverview key={groupIndex}>
+              {groupIndex > 0 && <Divider />}
+              <Heading
+                component="h2"
+                headingValue={label}
+                variant={TEXT_HEADING}
+              />
+              <GroupLinks>
+                {splitLinks(links).map(
+                  (links, linksIndex) =>
+                    links.length > 0 && (
+                      <UnorderedList key={linksIndex}>
+                        {links.map((linkProps, listIndex) => (
+                          <li key={listIndex}>
+                            <Link {...linkProps} />
+                          </li>
+                        ))}
+                      </UnorderedList>
+                    )
+                )}
+              </GroupLinks>
+            </GroupOverview>
+          )
+        );
+      })}
+    </Fragment>
+  );
+};

components/Layout/components/Section/components/SectionContent/components/SectionOverview/types.ts

@@ -0,0 +1,14 @@
+import { LinkProps } from "../../../../../../../../common/types";
+
+export interface Overview {
+  label: string;
+  links: OverviewLink[];
+}
+
+export type OverviewLink = string | LinkProps;
+
+export interface SectionOverviewProps {
+  overview: (Omit<Overview, "links"> & {
+    links: Exclude<OverviewLink, string>[];
+  })[];
+}