feat: implement getting-started page (#3329)

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/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/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/getting-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,52 @@
+import { primaryMain } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
+import styled from "@emotion/styled";
+import { Grid2Props } from "@mui/material";
+
+type Props = Grid2Props & {
+  nth: number;
+};
+
+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 StyledList = styled("ul")<Props>`
+  display: grid;
+  gap: 0 64px;
+  grid-auto-flow: dense;
+  grid-column: 1 / -1;
+  grid-template-columns: 1fr 1fr;
+  list-style-position: inside;
+  margin-top: 8px;
+  padding-left: 0;
+
+  li {
+    grid-column: 1;
+    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.
+
+    &:nth-of-type(n + ${(props) => props.nth}) {
+      grid-column: 2;
+    }
+
+    > * {
+      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,38 @@
+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, StyledList } from "./sectionOverview.styles";
+import { Props } from "./types";
+
+const MAX_ROWS = 4;
+
+export const SectionOverview = ({ overview }: Props): JSX.Element | null => {
+  if (!overview) return null;
+  return (
+    <Fragment>
+      {overview.map(({ label, links }, i) => {
+        return (
+          links.length > 0 && (
+            <GroupOverview key={i}>
+              {i > 0 && <Divider />}
+              <Heading
+                component="h2"
+                headingValue={label}
+                variant={TEXT_HEADING}
+              />
+              <StyledList nth={Math.max(MAX_ROWS, links.length / 2)}>
+                {links.map((linkProps, i) => (
+                  <li key={i}>
+                    <Link {...linkProps} />
+                  </li>
+                ))}
+              </StyledList>
+            </GroupOverview>
+          )
+        );
+      })}
+    </Fragment>
+  );
+};

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

@@ -0,0 +1,12 @@
+import { LinkProps } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
+
+export interface Overview {
+  label: string;
+  links: OverviewLink[];
+}
+
+export type OverviewLink = string | LinkProps;
+
+export interface Props {
+  overview: (Omit<Overview, "links"> & { links: LinkProps[] })[];
+}

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

@@ -0,0 +1,153 @@
+import { OutlineItem } from "@databiosphere/findable-ui/lib/components/Layout/components/Outline/outline";
+import { isURLString } from "@databiosphere/findable-ui/lib/components/Links/common/utils";
+import { LinkProps } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
+import {
+  Frontmatter,
+  FrontmatterOverview,
+} from "../../../../../../../../content/entities";
+import { isFrontmatterOverview } from "../../../../../../../../content/typeGuards";
+import { slugifyHeading } from "../../../../../../../../plugins/common/utils";
+import { OverviewLink } from "./types";
+
+const OVERVIEW_OUTLINE_DEPTH = 2;
+
+/**
+ * Maps an overview link to LinkProps.
+ * A string link is converted to a LinkProps with the title taken from the frontmatter.
+ * An undefined value is returned if the link is not found in the frontmatter, or if the title is not found.
+ * @param section - Section.
+ * @param link - Overview link.
+ * @param frontmatters - Paths with frontmatter.
+ * @returns link props.
+ */
+function getOverviewLink(
+  section: string,
+  link: OverviewLink,
+  frontmatters: [string, Frontmatter][]
+): LinkProps | undefined {
+  // Grab the configured URL from the link.
+  const url = getOverviewLinkUrl(link);
+  if (!url) return;
+  // Find the corresponding frontmatter for the link.
+  const pathFrontmatter = getPathFrontmatter(
+    section,
+    getOverviewLinkUrl(link),
+    frontmatters
+  );
+  if (!pathFrontmatter) return;
+  // Extract the title from the frontmatter.
+  const [, { title }] = pathFrontmatter;
+  if (!title) return;
+  // Return the link props.
+  return {
+    label: title,
+    url,
+  };
+}
+
+/**
+ * Gets the URL configured from an overview link.
+ * OverviewLink can be a string or LinkProps.
+ * @param link - Overview link.
+ * @returns overview link URL.
+ */
+function getOverviewLinkUrl(link: OverviewLink): string {
+  if (typeof link === "string") return link;
+  if (isURLString(link.url)) return link.url;
+  return "";
+}
+
+/**
+ * Finds the path with frontmatter tuple for a given path.
+ * Compares the given link with the path in the path with frontmatter tuples.
+ * @param section - Section.
+ * @param link - Link.
+ * @param frontmatters - Path frontmatter tuples.
+ * @returns path with frontmatter tuple.
+ */
+function getPathFrontmatter(
+  section: string,
+  link: string,
+  frontmatters: [string, Frontmatter][]
+): [string, Frontmatter] | undefined {
+  const regex = new RegExp(`^\\/${section}\\/`);
+  return frontmatters.find(([path]) => path === link.replace(regex, ""));
+}
+
+/**
+ * Maps the overview to an outline.
+ * @param overview - Overview.
+ * @returns outline.
+ */
+export function mapFrontmatterOutline(
+  overview: FrontmatterOverview["overview"]
+): FrontmatterOverview["outline"] {
+  return overview.reduce((acc, { label, links }) => {
+    if (links.length > 0) {
+      acc.push({
+        depth: OVERVIEW_OUTLINE_DEPTH,
+        hash: slugifyHeading(label),
+        value: label,
+      });
+    }
+    return acc;
+  }, [] as OutlineItem[]);
+}
+
+/**
+ * Maps the frontmatter overview to an overview comprising of LinkProps.
+ * @param section - Section.
+ * @param frontmatter - Frontmatter.
+ * @param frontmatters - Paths with frontmatter.
+ * @returns overview.
+ */
+export function mapFrontmatterOverview(
+  section: string,
+  frontmatter: FrontmatterOverview,
+  frontmatters: [string, Frontmatter][]
+): FrontmatterOverview["overview"] {
+  return frontmatter.overview.map(({ label, links }) => {
+    return { label, links: parseOverviewLinks(section, links, frontmatters) };
+  });
+}
+
+/**
+ * Maps overview links to LinkProps for display in the Link component.
+ * @param section - Section.
+ * @param links - Overview links.
+ * @param frontmatters - Paths with frontmatter.
+ * @returns link props.
+ */
+function parseOverviewLinks(
+  section: string,
+  links: OverviewLink[],
+  frontmatters: [string, Frontmatter][]
+): LinkProps[] {
+  return links.reduce((acc, link) => {
+    const overviewLink = getOverviewLink(section, link, frontmatters);
+    if (overviewLink) {
+      // Only add the link if the title exists; confirming the overview configured the link correctly.
+      acc.push(overviewLink);
+    }
+    return acc;
+  }, [] as LinkProps[]);
+}
+
+/**
+ * Returns parsed overview related frontmatter.
+ * @param section - Section.
+ * @param frontmatter - Frontmatter.
+ * @param frontmatters - Paths with frontmatter.
+ * @returns frontmatter.
+ */
+export function processOverviewFrontmatter(
+  section: string = "",
+  frontmatter: Frontmatter | undefined,
+  frontmatters: [string, Frontmatter][]
+): Frontmatter | undefined {
+  if (!frontmatter) return;
+  if (!isFrontmatterOverview(frontmatter)) return frontmatter;
+  const overview = mapFrontmatterOverview(section, frontmatter, frontmatters);
+  const outline = mapFrontmatterOutline(overview);
+  return { ...frontmatter, outline, overview };
+}

components/Layout/components/Section/components/SectionContent/sectionContent.styles.ts

@@ -0,0 +1,35 @@
+import {
+  Content,
+  ContentGrid,
+  OutlineGrid,
+  Positioner,
+} from "@databiosphere/findable-ui/lib/components/Layout/components/ContentLayout/contentLayout.styles";
+import { mediaTabletDown } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
+import styled from "@emotion/styled";
+
+export const StyledSection = styled.section`
+  flex: 1;
+  width: 100%;
+`;
+
+export const StyledContentGrid = styled(ContentGrid)`
+  padding: 64px 0;
+`;
+
+export const StyledContent = styled(Content)`
+  padding: 0 40px;
+
+  ${mediaTabletDown} {
+    padding: 0 16px;
+  }
+`;
+
+export const StyledOutlineGrid = styled(OutlineGrid)`
+  padding: 64px 0;
+`;
+
+export const StyledPositioner = styled(Positioner)`
+  max-height: ${({ headerHeight }) => `calc(100vh - ${headerHeight}px)`};
+  padding-top: 0;
+  top: ${({ headerHeight }) => `${headerHeight}px`};
+`;