feat: add measles white paper to learn section (#911)

app/components/Docs/components/Content/content.styles.ts

@@ -1,13 +1,14 @@
 import { SectionContent } from "../../../content/content.styles";
 import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { PALETTE } from "@databiosphere/findable-ui/lib/styles/common/constants/palette";
+import { FONT } from "@databiosphere/findable-ui/lib/styles/common/constants/font";
 
-// 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 StyledSectionContent = styled(SectionContent)`
-  margin-top: 0;
+interface Props {
+  offset: number;
+}
 
+const heading = ({ offset }: Props) => css`
   h1,
   h2,
   h3,
@@ -21,6 +22,95 @@ export const StyledSectionContent = styled(SectionContent)`
     }
   }
 
+  h1 {
+    font: ${FONT.HEADING_LARGE};
+    margin: 0 0 8px;
+    scroll-margin-top: ${offset + 24}px;
+  }
+
+  h2 {
+    font: ${FONT.HEADING};
+    margin: 32px 0 16px;
+    scroll-margin-top: ${offset + 32}px;
+  }
+
+  h3 {
+    font: ${FONT.HEADING_SMALL};
+    margin: 32px 0 16px;
+    scroll-margin-top: ${offset + 32}px;
+  }
+
+  h4 {
+    font: ${FONT.BODY_LARGE_500};
+    margin: 24px 0 16px;
+    scroll-margin-top: ${offset + 24}px;
+  }
+`;
+
+const iframe = css`
+  iframe {
+    aspect-ratio: 16/ 9;
+    border: none;
+    display: block;
+    height: auto;
+    margin: 16px 0;
+    width: 100%;
+  }
+`;
+
+const image = css`
+  img {
+    border: 1px solid ${PALETTE.SMOKE_MAIN};
+    border-radius: 6px;
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  figure {
+    figcaption {
+      margin-top: 24px;
+    }
+    img {
+      margin: 0;
+    }
+  }
+`;
+
+const muiAlert = css`
+  .MuiAlert-root {
+    margin: 24px 0;
+    padding: 24px;
+
+    .MuiAlert-icon {
+      padding: 4px 0;
+    }
+
+    .MuiAlert-message {
+      font: ${FONT.BODY_LARGE_400_2_LINES};
+      gap: 16px;
+
+      .MuiAlertTitle-root {
+        font: ${FONT.HEADING_SMALL};
+      }
+    }
+  }
+`;
+
+// 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 StyledSectionContent = styled(SectionContent, {
+  shouldForwardProp: (prop) => prop !== "offset",
+})<Props>`
+  margin-top: 0;
+  min-width: 0;
+
+  ${heading}
+  ${iframe}
+  ${image}
+  ${muiAlert}
+
   > *:first-child:not(style) ${ignoreSsrWarning} {
     margin-top: 0;
   }

app/components/Docs/components/Content/content.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { StyledSectionContent } from "./content.styles";
+import { useLayoutDimensions } from "@databiosphere/findable-ui/lib/providers/layoutDimensions/hook";
+
+export interface ContentProps {
+  children: ReactNode | ReactNode[];
+}
+
+export const Content = ({ children }: ContentProps): JSX.Element => {
+  const { dimensions } = useLayoutDimensions();
+  return (
+    <StyledSectionContent offset={dimensions.header.height}>
+      {children}
+    </StyledSectionContent>
+  );
+};

app/components/Docs/components/SectionContent/sectionContent.styles.ts

@@ -0,0 +1,46 @@
+import {
+  ContentGrid,
+  OutlineGrid,
+  Positioner,
+} from "@databiosphere/findable-ui/lib/components/Layout/components/ContentLayout/contentLayout.styles";
+import { bpUp1366 } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
+import styled from "@emotion/styled";
+import { sectionLayout } from "../../../Layout/components/AppLayout/components/Section/section.styles";
+import { ContentLayout } from "@databiosphere/findable-ui/lib/components/Layout/components/ContentLayout/contentLayout.styles";
+
+export const StyledContentLayout = styled(ContentLayout)`
+  ${bpUp1366} {
+    grid-template-areas: "content";
+    grid-template-columns: 1fr;
+  }
+
+  ${({ theme }) => theme.breakpoints.up(1728)} {
+    grid-template-areas: "navigation content outline";
+    grid-template-columns: 280px 1fr 280px;
+  }
+`;
+
+export const StyledContentGrid = styled(ContentGrid)`
+  ${sectionLayout}
+  display: grid;
+  padding: 64px 16px;
+  width: calc(100% - 32px);
+`;
+
+export const StyledOutlineGrid = styled(OutlineGrid)`
+  padding: 64px 0;
+
+  ${bpUp1366} {
+    display: none;
+  }
+
+  ${({ theme }) => theme.breakpoints.up(1728)} {
+    display: block;
+  }
+`;
+
+export const StyledPositioner = styled(Positioner)`
+  max-height: ${({ headerHeight }) => `calc(100vh - ${headerHeight}px)`};
+  padding-top: 0;
+  top: ${({ headerHeight }) => `${headerHeight}px`};
+`;

app/components/Docs/components/SectionContent/sectionContent.tsx

@@ -0,0 +1,47 @@
+import { PANEL_BACKGROUND_COLOR } from "@databiosphere/findable-ui/lib/components/Layout/components/ContentLayout/common/entities";
+import { Outline } from "@databiosphere/findable-ui/lib/components/Layout/components/ContentLayout/contentLayout.styles";
+import { ContentViewProps } from "@databiosphere/findable-ui/lib/views/ContentView/contentView";
+import {
+  StyledContentGrid,
+  StyledContentLayout,
+  StyledOutlineGrid,
+  StyledPositioner,
+} from "./sectionContent.styles";
+import { useLayoutDimensions } from "@databiosphere/findable-ui/lib/providers/layoutDimensions/hook";
+import { StaticProps } from "../../../../docs/common/staticGeneration/types";
+import { Section } from "../../../../components/content/content.styles";
+
+export const SectionContent = ({
+  content,
+  outline,
+  slug,
+}: Omit<StaticProps, "mdxSource" | "outline"> &
+  Pick<ContentViewProps, "content" | "outline">): JSX.Element => {
+  const { dimensions } = useLayoutDimensions();
+  return (
+    <Section border>
+      <StyledContentLayout
+        hasNavigation={false}
+        panelColor={PANEL_BACKGROUND_COLOR.DEFAULT}
+      >
+        <StyledContentGrid
+          headerHeight={0}
+          panelColor={PANEL_BACKGROUND_COLOR.DEFAULT}
+        >
+          {content}
+        </StyledContentGrid>
+        {outline && (
+          <StyledOutlineGrid
+            key={slug.join("")}
+            headerHeight={0}
+            panelColor={PANEL_BACKGROUND_COLOR.DEFAULT}
+          >
+            <StyledPositioner headerHeight={dimensions.header.height}>
+              <Outline>{outline}</Outline>
+            </StyledPositioner>
+          </StyledOutlineGrid>
+        )}
+      </StyledContentLayout>
+    </Section>
+  );
+};

app/components/Docs/components/common/Link/link.tsx

@@ -0,0 +1,20 @@
+import { TypographyWordBreak } from "@databiosphere/findable-ui/lib/components/common/Typography/TypographyWordBreak/TypographyWordBreak";
+import { Link as DXLink } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
+
+/**
+ * Basic anchor link component, used by MDX for all anchor links.
+ * Takes in children and href as props, and passes them to the DXLink component.
+ */
+
+export const Link = ({
+  ...props /* Spread props to allow for anchor link specific props e.g. "href". */
+}): JSX.Element => {
+  const { children, href, ...linkProps } = props;
+  return (
+    <DXLink
+      label={<TypographyWordBreak>{children}</TypographyWordBreak>}
+      url={href}
+      {...linkProps}
+    />
+  );
+};

app/components/Docs/components/common/Table/table.styles.ts

@@ -0,0 +1,40 @@
+import { PALETTE } from "@databiosphere/findable-ui/lib/styles/common/constants/palette";
+import styled from "@emotion/styled";
+import { TableContainer } from "@mui/material";
+import { FONT } from "@databiosphere/findable-ui/lib/styles/common/constants/font";
+
+export const StyledTableContainer = styled(TableContainer)`
+  margin: 24px 0;
+
+  .MuiTable-root {
+    min-width: calc(390px - 32px);
+
+    tr {
+      td,
+      th {
+        border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
+        padding: 12px;
+
+        &:first-of-type {
+          padding-left: 0;
+        }
+
+        &:last-of-type {
+          padding-right: 0;
+        }
+      }
+
+      th {
+        font: ${FONT.BODY_500};
+
+        &:empty {
+          padding: 0;
+        }
+      }
+
+      td {
+        font: ${FONT.BODY_400};
+      }
+    }
+  }
+`;

app/components/Docs/components/common/Table/table.tsx

@@ -0,0 +1,10 @@
+import { Table as MTable } from "@mui/material";
+import { StyledTableContainer } from "./table.styles";
+
+export const Table = ({ ...props }): JSX.Element => {
+  return (
+    <StyledTableContainer>
+      <MTable>{props.children}</MTable>
+    </StyledTableContainer>
+  );
+};

app/components/Docs/components/common/Video/video.tsx

@@ -0,0 +1,12 @@
+export const Video = ({ ...props }): JSX.Element | null => {
+  return (
+    <iframe
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowFullScreen
+      height="100%"
+      sandbox="allow-scripts allow-same-origin allow-presentation"
+      width="100%"
+      {...props}
+    />
+  );
+};

app/docs/common/mdx/constants.ts

@@ -1,8 +1,18 @@
 import { MDXComponents } from "mdx/types";
 import { AnchorLink } from "@databiosphere/findable-ui/lib/components/common/AnchorLink/anchorLink";
 import { SectionOverview } from "../../../components/Docs/components/SectionOverview/sectionOverview";
+import { Figure } from "../../../components/common/Figure/figure";
+import { Link } from "../../../components/Docs/components/common/Link/link";
+import { Alert } from "@databiosphere/findable-ui/lib/components/common/Alert/alert";
+import { Video } from "../../../components/Docs/components/common/Video/video";
+import { Table } from "../../../components/Docs/components/common/Table/table";
 
 export const MDX_COMPONENTS: MDXComponents = {
+  Alert,
   AnchorLink,
+  Figure,
   SectionOverview,
+  Video,
+  a: Link,
+  table: Table,
 };

app/docs/common/staticGeneration/utils.ts

@@ -0,0 +1,37 @@
+import { GetStaticPropsResult } from "next/types";
+import { StaticProps } from "./types";
+
+/**
+ * Processes the outline for the given static props.
+ * Frontmatter outline takes precedence over static props outline.
+ * Outline items with depth > 1 and < 4 are returned.
+ * @param props - Static props.
+ * @returns Processed outline.
+ */
+function sanitizeOutline(props: StaticProps): StaticProps["outline"] {
+  const { frontmatter, outline } = props;
+
+  if (!frontmatter || frontmatter.enableOutline === false) return null;
+  if (!outline || !outline.length) return null;
+
+  return outline;
+}
+
+/**
+ * Processes the static props for the given static props context.
+ * @param props - Static props context.
+ * @returns Processed static props.
+ */
+export function sanitizeStaticProps(
+  props: GetStaticPropsResult<StaticProps>
+): GetStaticPropsResult<StaticProps> {
+  if ("props" in props) {
+    return {
+      props: {
+        ...props.props,
+        outline: sanitizeOutline(props.props),
+      },
+    };
+  }
+  return props;
+}

app/docs/learn/featured-analyses.mdx

@@ -10,7 +10,7 @@ overview:
   - label: "Variant Calling"
     links:
       - label: "From data to publication in a browser with BRC-Analytics: Evolutionary dynamics of coding overlaps in measles virus"
-        url: ""
+        url: "/learn/featured-analyses/evolutionary-dynamics-of-coding-overlaps-in-measles"
 title: Featured Analyses
 ---