Merge pull request #721 from newrelic/feat/nerd-days-page-update

Updated Nerd Days page
newrelic · Sep 9, 2020 · f86d6fd · f86d6fd
2 parents fbbc5e9 + 5c696ac
commit f86d6fd
Show file tree

Hide file tree

Showing 20 changed files with 1,287 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -49,7 +49,8 @@
     "react-middle-ellipsis": "^1.1.0",
     "react-shadow": "^18.3.0",
     "react-simple-code-editor": "^0.11.0",
-    "use-dark-mode": "^2.3.1"
+    "use-dark-mode": "^2.3.1",
+    "use-media": "^1.4.0"
   },
   "devDependencies": {
     "@newrelic/eslint-plugin-newrelic": "^0.3.0",

diff --git a/src/@newrelic/gatsby-theme-newrelic/icons/feather.js b/src/@newrelic/gatsby-theme-newrelic/icons/feather.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import defaultIcons from '@newrelic/gatsby-theme-newrelic/src/icons/feather';
+
+export default {
+  ...defaultIcons,
+  code: (
+    <>
+      <polyline points="16 18 22 12 16 6" />
+      <polyline points="8 6 2 12 8 18" />
+    </>
+  ),
+  eye: (
+    <>
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+      <circle cx="12" cy="12" r="3" />
+    </>
+  ),
+  'message-square': (
+    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+  ),
+  twitter: (
+    <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
+  ),
+};
diff --git a/src/components/Agenda/Agenda.js b/src/components/Agenda/Agenda.js
@@ -0,0 +1,85 @@
+import React, { cloneElement, Children, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/core';
+import Heading from './Heading';
+import Session from './Session';
+import Time from './Time';
+import useMedia from 'use-media';
+
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+const Agenda = ({ children, className, tracks, mobileBreakpoint }) => {
+  const isMobileScreen = useMedia({ maxWidth: mobileBreakpoint });
+
+  const sessionsByTime = Children.toArray(children)
+    .filter((child) => child.type === Session)
+    .reduce((memo, child) => {
+      const { time } = child.props;
+
+      return memo.set(
+        time,
+        memo.has(time) ? [...memo.get(time), child] : [child]
+      );
+    }, new Map());
+
+  return (
+    <div
+      className={className}
+      css={css`
+        display: grid;
+        grid-template-columns: 0.75fr repeat(${tracks.length}, 1fr);
+
+        @media screen and (max-width: ${mobileBreakpoint}) {
+          grid-template-columns: 1fr;
+        }
+      `}
+    >
+      {!isMobileScreen && (
+        <>
+          <Heading
+            css={css`
+              grid-column-start: 2;
+            `}
+          >
+            {tracks[0]}
+          </Heading>
+
+          {tracks.slice(1).map((track) => (
+            <Heading key={track}>{track}</Heading>
+          ))}
+        </>
+      )}
+
+      {Array.from(sessionsByTime).map(([time, sessions]) => (
+        <Fragment key={time}>
+          {!isMobileScreen && (
+            <Time inactive={sessions[0].props.inactive}>{time}</Time>
+          )}
+          {sessions.map((session, idx) => {
+            const trackIdx = sessions
+              .slice(0, idx)
+              .reduce((memo, session) => memo + session.props.span, 0);
+
+            return cloneElement(session, {
+              isMobileScreen,
+              track: hasOwnProperty.call(session.props, 'track')
+                ? session.props.track
+                : tracks[trackIdx],
+            });
+          })}
+        </Fragment>
+      ))}
+    </div>
+  );
+};
+
+Agenda.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  tracks: PropTypes.arrayOf(PropTypes.string).isRequired,
+  mobileBreakpoint: PropTypes.string,
+};
+
+Agenda.Session = Session;
+
+export default Agenda;
diff --git a/src/components/Agenda/Cell.js b/src/components/Agenda/Cell.js
@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+
+const Cell = styled.div`
+  padding: 1rem;
+  box-shadow: 0 0 0 1px var(--color-neutrals-400);
+  background-color: ${({ inactive }) =>
+    inactive ? 'var(--color-neutrals-100)' : '#fff'};
+
+  .dark-mode & {
+    background-color: ${({ inactive }) =>
+      inactive ? '#284049' : 'var(--color-dark-100)'};
+    box-shadow: 0 0 0 1px var(--color-dark-400);
+  }
+`;
+
+Cell.propTypes = {
+  inactive: PropTypes.bool,
+};
+
+export default Cell;
diff --git a/src/components/Agenda/Heading.js b/src/components/Agenda/Heading.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/core';
+import Cell from './Cell';
+
+const Heading = ({ children, className }) => (
+  <Cell
+    inactive
+    as="h5"
+    className={className}
+    css={css`
+      color: var(--color-teal-600);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0;
+      padding: 0.75rem;
+      text-align: center;
+      text-transform: uppercase;
+      font-size: 0.75rem;
+      font-weight: 700;
+      letter-spacing: 0.5px;
+
+      .dark-mode & {
+        color: #ade7ec;
+      }
+    `}
+  >
+    {children}
+  </Cell>
+);
+
+Heading.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export default Heading;
diff --git a/src/components/Agenda/Session.js b/src/components/Agenda/Session.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/core';
+import Cell from './Cell';
+
+const Session = ({
+  inactive,
+  time,
+  speaker,
+  title,
+  track,
+  span,
+  isMobileScreen,
+}) => (
+  <Cell
+    inactive={inactive}
+    css={css`
+      grid-column: span ${isMobileScreen ? 1 : span};
+      text-align: center;
+    `}
+  >
+    <h4
+      css={css`
+        font-size: 1rem;
+        font-weight: 700;
+        margin-bottom: 0.25rem;
+      `}
+    >
+      {title}
+    </h4>
+    <div
+      css={css`
+        display: block;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05rem;
+        font-weight: normal;
+        user-select: text;
+      `}
+    >
+      {speaker}
+    </div>
+    {isMobileScreen && (
+      <ul
+        css={css`
+          display: flex;
+          justify-content: center;
+          margin-top: 0.5rem;
+          padding: 0;
+          list-style: none;
+          font-size: 0.75rem;
+          font-weight: normal;
+        `}
+      >
+        <Badge>{time}</Badge>
+        {track && <Badge>{track}</Badge>}
+      </ul>
+    )}
+  </Cell>
+);
+
+const Badge = (props) => (
+  <li
+    css={css`
+      color: var(--color-neutrals-700);
+      margin: 0 0.25rem;
+      padding: 0.125rem 0.5rem;
+      background-color: rgba(0, 0, 0, 0.075);
+      border-radius: 3.5rem;
+
+      .dark-mode & {
+        color: var(--color-dark-700);
+        background: var(--color-dark-300);
+      }
+    `}
+    {...props}
+  />
+);
+
+Session.propTypes = {
+  inactive: PropTypes.bool,
+  time: PropTypes.string,
+  speaker: PropTypes.string,
+  title: PropTypes.string,
+  span: PropTypes.number,
+  track: PropTypes.string,
+  isMobileScreen: PropTypes.bool,
+};
+
+Session.defaultProps = {
+  span: 1,
+};
+
+export default Session;
diff --git a/src/components/Agenda/Time.js b/src/components/Agenda/Time.js
@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+import Cell from './Cell';
+
+const Time = styled(Cell)`
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  color: var(--heading-text-color);
+`;
+
+export default Time;
diff --git a/src/components/Agenda/index.js b/src/components/Agenda/index.js
@@ -0,0 +1 @@
+export { default } from './Agenda';
diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js
@@ -14,6 +14,12 @@ const FeatherIcon = ({ className, name, size = '1em', ...props }) => {
       className={cx(styles.icon, className)}
       style={{ width: size, height: size }}
     >
+      <defs>
+        <linearGradient gradientUnits="userSpaceOnUse" id="nerdDaysGradient">
+          <stop offset="0%" stopColor="#0FB7C9" />
+          <stop offset="150%" stopColor="#0069CE" />
+        </linearGradient>
+      </defs>
       {paths}
     </svg>
   ) : null;
@@ -147,6 +153,12 @@ const ICONS = {
       <path d="M16 3.13a4 4 0 0 1 0 7.75" />
     </>
   ),
+  eye: (
+    <>
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+      <circle cx="12" cy="12" r="3" />
+    </>
+  ),
 };
 
 FeatherIcon.propTypes = {

diff --git a/src/components/HopinLogo.js b/src/components/HopinLogo.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import { css } from '@emotion/core';
+
+const HopinLogo = () => {
+  return (
+    <svg
+      width="175"
+      height="50"
+      viewBox="0 0 175 50"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      css={css`
+        fill: #1d1e1f;
+
+        .dark-mode & {
+          fill: var(--heading-text-color);
+        }
+      `}
+    >
+      <title>Hopin logo</title>
+      <defs>
+        <clipPath id="clip0">
+          <rect width="175" height="50" fill="white" />
+        </clipPath>
+      </defs>
+      <g clipPath="url(#clip0)">
+        <path d="M142.331 8.42417C144.612 8.42417 146.38 6.6345 146.38 4.38592C146.38 2.18323 144.612 0.393555 142.331 0.393555C140.098 0.393555 138.236 2.18323 138.236 4.38592C138.19 6.6345 140.098 8.42417 142.331 8.42417Z" />
+        <path d="M107.43 11.2235H113.526V14.8947C115.062 12.692 118.459 10.6729 122.461 10.6729C130.046 10.6729 135.817 17.0515 135.817 24.8986C135.817 32.6996 130.046 39.1242 122.461 39.1242C118.459 39.1242 115.108 37.105 113.526 34.9023V50H107.43V11.2235ZM121.344 16.1337C116.411 16.1337 113.014 19.9425 113.014 24.8986C113.014 29.8086 116.411 33.6634 121.344 33.6634C126.23 33.6634 129.627 29.8546 129.627 24.8986C129.627 19.9884 126.23 16.1337 121.344 16.1337Z" />
+        <path d="M149.871 11.2235H155.967V14.9405C157.642 12.1872 160.806 10.6729 164.39 10.6729C170.812 10.6729 175 15.17 175 22.0992V38.5736H168.904V23.1088C168.904 18.7952 166.67 16.1796 163.133 16.1796C159.085 16.1796 155.967 19.3 155.967 25.128V38.5736H149.871V11.2235Z" />
+        <path d="M60.9865 10.6728C57.4033 10.6728 54.2387 12.1871 52.5635 14.9405V0.393555H46.4673V38.5734H52.5635V25.1278C52.5635 19.2999 55.6815 16.1795 59.73 16.1795C63.2669 16.1795 65.5004 18.7951 65.5004 23.1088V38.5734H71.5967V22.0993C71.5502 15.1699 67.4085 10.6728 60.9865 10.6728Z" />
+        <path d="M145.31 11.2236H139.214V38.5736H145.31V11.2236Z" />
+        <path d="M89.5133 39.1242C81.3229 39.1242 74.9941 32.8373 74.9941 24.8986C74.9941 16.9597 81.3229 10.6729 89.5133 10.6729C97.7037 10.6729 104.032 16.9597 104.032 24.8986C104.032 32.8373 97.7037 39.1242 89.5133 39.1242ZM89.5133 33.5257C94.3996 33.5257 97.8433 29.7627 97.8433 24.8986C97.8433 20.0343 94.3996 16.2713 89.5133 16.2713C84.5804 16.2713 81.1369 20.0343 81.1369 24.8986C81.1369 29.7627 84.5804 33.5257 89.5133 33.5257Z" />
+        <path
+          d="M24.3162 7.73582C24.2698 9.5714 22.9668 12.1871 20.7796 12.1871C19.43 12.1871 18.3132 11.0857 18.3132 9.75496V9.70907C18.2666 7.55228 17.2894 5.67082 15.7537 4.34003C14.5903 3.37634 13.1477 2.7339 11.5654 2.55034C12.915 1.17366 14.8229 0.347656 16.9171 0.347656C19.5696 0.347656 21.9896 1.862 23.3856 4.06469C24.0371 5.16603 24.3629 6.49682 24.3162 7.73582Z"
+          fill="#175FFF"
+        />
+        <path
+          d="M15.6603 7.92026C16.8237 9.38872 17.5217 12.188 15.8464 13.5646C14.7761 14.4365 13.2404 14.2989 12.3562 13.2893C10.9136 11.6832 8.91255 10.8572 6.91148 10.8113C5.3758 10.7654 3.84011 11.2243 2.53711 12.0962C2.67671 10.2147 3.5609 8.33326 5.18965 7.00247C7.28378 5.30458 10.2155 4.79979 12.7285 5.80935C13.8919 6.22235 14.9157 6.95658 15.6603 7.92026Z"
+          fill="#175FFF"
+        />
+        <path
+          d="M9.14557 13.5187C10.9605 13.8858 13.3803 15.6296 13.008 17.7405C12.7754 19.0713 11.4724 19.9432 10.1228 19.7137H10.0763C7.93563 19.3925 5.8415 20.0349 4.30582 21.274C3.14242 22.1917 2.21169 23.5225 1.79287 25.0369C0.676005 23.4767 0.164109 21.5033 0.489862 19.4384C1.00176 16.8227 2.90973 14.62 5.51575 13.7481C6.67915 13.381 7.98215 13.2892 9.14557 13.5187Z"
+          fill="#175FFF"
+        />
+        <path
+          d="M7.79563 21.961C9.42438 21.0891 12.4027 20.9056 13.473 22.7412C14.1711 23.8883 13.7522 25.4027 12.5888 26.091C10.7274 27.1925 9.56401 28.9821 9.14517 30.9554C8.86596 32.4237 9.00557 33.9839 9.70361 35.4066C7.84217 34.9477 6.12034 33.7546 5.09653 31.9648C3.74698 29.6246 3.79353 26.7335 5.18961 24.4389C5.84111 23.3835 6.7253 22.5116 7.79563 21.961Z"
+          fill="#175FFF"
+        />
+        <path
+          d="M12.2632 29.2581C12.9612 27.5602 15.1019 25.541 17.1029 26.2752C18.4059 26.7341 19.0574 28.1566 18.5921 29.3958C17.894 31.415 18.1733 33.5258 19.1505 35.2696C19.8951 36.6004 21.0119 37.6558 22.4547 38.3441C20.6862 39.1702 18.6386 39.3537 16.6841 38.6196C14.1246 37.7016 12.2632 35.4531 11.8443 32.7916C11.7047 31.5985 11.8443 30.3594 12.2632 29.2581Z"
+          fill="#175FFF"
+        />
+        <path
+          d="M20.4538 32.011C19.8489 30.2672 20.1746 27.3762 22.2223 26.642C23.5252 26.1831 24.9212 26.8256 25.3867 28.1104C26.1777 30.0837 27.76 31.552 29.6679 32.2864C31.0641 32.837 32.6929 32.9287 34.2285 32.5616C33.4375 34.3054 31.9483 35.7281 29.9937 36.4622C27.4342 37.3799 24.5025 36.8293 22.5014 35.0397C21.5708 34.1679 20.8261 33.1583 20.4538 32.011Z"
+          fill="#175FFF"
+        />
+        <path
+          d="M28.5512 28.9367C26.9691 27.9732 25.2937 25.5411 26.4105 23.7055C27.1087 22.5582 28.5978 22.1453 29.8076 22.7875C31.7158 23.7971 33.8564 23.9348 35.811 23.2923C37.2535 22.7875 38.5566 21.8698 39.4872 20.585C39.9991 22.4205 39.813 24.4396 38.7426 26.2294C37.393 28.5696 34.787 29.9923 32.088 29.9005C30.7849 29.9005 29.5285 29.5792 28.5512 28.9367Z"
+          fill="#175FFF"
+        />
+        <path
+          d="M32.7393 21.4573C30.8778 21.7327 28.0391 20.9067 27.6668 18.7957C27.3876 17.5108 28.3184 16.2259 29.6678 15.9965H29.7145C31.8551 15.5835 33.577 14.2986 34.6007 12.6007C35.3918 11.3158 35.7641 9.80144 35.6245 8.24121C37.2068 9.29665 38.4166 10.9946 38.7424 13.0137C39.2078 15.6294 38.1374 18.3827 36.0432 20.0348C35.0662 20.769 33.9026 21.3196 32.7393 21.4573Z"
+          fill="#175FFF"
+        />
+        <path
+          d="M31.0638 13.1052C29.8073 14.4819 27.1083 15.675 25.4329 14.2983C24.3627 13.4264 24.2231 11.912 25.1073 10.8566C26.4569 9.20458 26.9688 7.09369 26.6429 5.12044C26.4102 3.65198 25.7123 2.22941 24.5954 1.08218C26.5033 0.898623 28.5044 1.44929 30.1331 2.78008C32.2273 4.47798 33.2046 7.27723 32.646 9.89292C32.4133 11.086 31.855 12.2333 31.0638 13.1052Z"
+          fill="#175FFF"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default HopinLogo;