@gpichot/spectacle-deck 1.2.0 → 1.2.1

package/src/layouts/Default3Layout.tsx

@@ -0,0 +1,159 @@
+import React from "react";
+import styled from "styled-components";
+import { Margins } from "./utils";
+
+function MultipleHexagons({ position }: { position: "left" | "right" }) {
+  return (
+    <svg
+      viewBox={`${position === "left" ? "0" : "2"} 0 12 20`}
+      width="12"
+      height="20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M 3.913 5.381 L 2.063 4.314 L 2.063 2.173 L 3.913 1.103 L 5.761 2.173 L 5.761 4.314 L 3.913 5.381 Z M 2.38 4.128 L 3.913 5.014 L 5.444 4.128 L 5.444 2.356 L 3.913 1.47 L 2.38 2.356 L 2.38 4.128 Z"
+        fill="#F49676"
+      />
+      <path
+        d="M 8.047 5.401 L 6.197 4.334 L 6.197 2.193 L 8.047 1.123 L 9.895 2.193 L 9.895 4.334 L 8.047 5.401 Z M 6.514 4.148 L 8.047 5.034 L 9.578 4.148 L 9.578 2.376 L 8.047 1.49 L 6.514 2.376 L 6.514 4.148 Z"
+        fill="#F49676"
+      />
+      <path
+        d="M 8.071 4.548 L 6.956 3.905 L 6.956 2.615 L 8.071 1.97 L 9.184 2.615 L 9.184 3.905 L 8.071 4.548 Z"
+        fill="#F49676"
+      />
+      <path
+        d="M 5.982 8.898 L 4.132 7.831 L 4.132 5.69 L 5.982 4.62 L 7.83 5.69 L 7.83 7.831 L 5.982 8.898 Z M 4.449 7.645 L 5.982 8.531 L 7.513 7.645 L 7.513 5.873 L 5.982 4.987 L 4.449 5.873 L 4.449 7.645 Z"
+        fill="#F49676"
+      />
+      <path
+        d="M 6.006 8.045 L 4.891 7.402 L 4.891 6.112 L 6.006 5.467 L 7.119 6.112 L 7.119 7.402 L 6.006 8.045 Z"
+        fill="#F49676"
+      />
+      <path
+        d="M 8.056 12.323 L 6.206 11.256 L 6.206 9.115 L 8.056 8.045 L 9.904 9.115 L 9.904 11.256 L 8.056 12.323 Z M 6.523 11.07 L 8.056 11.956 L 9.587 11.07 L 9.587 9.298 L 8.056 8.412 L 6.523 9.298 L 6.523 11.07 Z"
+        fill="#F49676"
+      />
+      <path
+        d="M 8.08 11.47 L 6.965 10.827 L 6.965 9.537 L 8.08 8.892 L 9.193 9.537 L 9.193 10.827 L 8.08 11.47 Z"
+        fill="#F49676"
+      />
+      <path
+        d="M 10.101 8.878 L 8.251 7.811 L 8.251 5.67 L 10.101 4.6 L 11.949 5.67 L 11.949 7.811 L 10.101 8.878 Z M 8.568 7.625 L 10.101 8.511 L 11.632 7.625 L 11.632 5.853 L 10.101 4.967 L 8.568 5.853 L 8.568 7.625 Z"
+        fill="#F49676"
+      />
+      <path
+        d="M 10.125 8.025 L 9.01 7.382 L 9.01 6.092 L 10.125 5.447 L 11.238 6.092 L 11.238 7.382 L 10.125 8.025 Z"
+        fill="#F49676"
+      />
+      <path
+        d="M 12.077 12.301 L 10.227 11.234 L 10.227 9.093 L 12.077 8.023 L 13.925 9.093 L 13.925 11.234 L 12.077 12.301 Z M 10.544 11.048 L 12.077 11.934 L 13.608 11.048 L 13.608 9.276 L 12.077 8.39 L 10.544 9.276 L 10.544 11.048 Z"
+        fill="#F49676"
+      />
+      <path
+        d="M 12.101 11.448 L 10.986 10.805 L 10.986 9.515 L 12.101 8.87 L 13.214 9.515 L 13.214 10.805 L 12.101 11.448 Z"
+        fill="#F49676"
+      />
+      <path
+        d="M 10.062 15.781 L 8.212 14.714 L 8.212 12.573 L 10.062 11.503 L 11.91 12.573 L 11.91 14.714 L 10.062 15.781 Z M 8.529 14.528 L 10.062 15.414 L 11.593 14.528 L 11.593 12.756 L 10.062 11.87 L 8.529 12.756 L 8.529 14.528 Z"
+        fill="#F49676"
+      />
+      <path
+        d="M 8.029 19.193 L 6.179 18.126 L 6.179 15.985 L 8.029 14.915 L 9.877 15.985 L 9.877 18.126 L 8.029 19.193 Z M 6.496 17.94 L 8.029 18.826 L 9.56 17.94 L 9.56 16.168 L 8.029 15.282 L 6.496 16.168 L 6.496 17.94 Z"
+        fill="#F49676"
+      />
+      <path
+        d="M 6.068 15.716 L 4.218 14.649 L 4.218 12.508 L 6.068 11.438 L 7.916 12.508 L 7.916 14.649 L 6.068 15.716 Z M 4.535 14.463 L 6.068 15.349 L 7.599 14.463 L 7.599 12.691 L 6.068 11.805 L 4.535 12.691 L 4.535 14.463 Z"
+        fill="#F49676"
+      />
+      <path
+        d="M 6.092 14.863 L 4.977 14.22 L 4.977 12.93 L 6.092 12.285 L 7.205 12.93 L 7.205 14.22 L 6.092 14.863 Z"
+        fill="#F49676"
+      />
+      <path
+        d="M 4.011 12.393 L 2.161 11.326 L 2.161 9.185 L 4.011 8.115 L 5.859 9.185 L 5.859 11.326 L 4.011 12.393 Z M 2.478 11.14 L 4.011 12.026 L 5.542 11.14 L 5.542 9.368 L 4.011 8.482 L 2.478 9.368 L 2.478 11.14 Z"
+        fill="#F49676"
+      />
+      <path
+        d="M 2.083 15.773 L 0.233 14.706 L 0.233 12.565 L 2.083 11.495 L 3.931 12.565 L 3.931 14.706 L 2.083 15.773 Z M 0.55 14.52 L 2.083 15.406 L 3.614 14.52 L 3.614 12.748 L 2.083 11.862 L 0.55 12.748 L 0.55 14.52 Z"
+        fill="#F49676"
+      />
+      <path
+        d="M 2.107 14.92 L 0.992 14.277 L 0.992 12.987 L 2.107 12.342 L 3.22 12.987 L 3.22 14.277 L 2.107 14.92 Z"
+        fill="#F49676"
+      />
+      <path
+        d="M 3.966 19.231 L 2.116 18.164 L 2.116 16.023 L 3.966 14.953 L 5.814 16.023 L 5.814 18.164 L 3.966 19.231 Z M 2.433 17.978 L 3.966 18.864 L 5.497 17.978 L 5.497 16.206 L 3.966 15.32 L 2.433 16.206 L 2.433 17.978 Z"
+        fill="#F49676"
+      />
+      <path
+        d="M 3.99 18.378 L 2.875 17.735 L 2.875 16.445 L 3.99 15.8 L 5.103 16.445 L 5.103 17.735 L 3.99 18.378 Z"
+        fill="#F49676"
+      />
+    </svg>
+  );
+}
+
+const Default3SideContainer = styled.div`
+  svg {
+    height: 100%;
+    width: auto;
+    path {
+      fill: #ffffff22;
+      transition: fill 3s;
+      &:hover {
+        fill: #ffffffbb;
+      }
+    }
+  }
+`;
+const Default2LayoutContainer = styled.div`
+  h2,
+  h3 {
+    text-align: left;
+    color: white;
+  }
+`;
+export const Default3Layout = ({
+  children,
+  position = "right",
+}: {
+  children: React.ReactNode;
+  position?: "left" | "right";
+}) => {
+  const isReversed = position === "left";
+  return (
+    <Default2LayoutContainer
+      style={{
+        display: "flex",
+        position: "absolute",
+        flexDirection: isReversed ? "row-reverse" : "row",
+        inset: 0,
+        alignItems: "center",
+      }}
+    >
+      <Default3SideContainer
+        style={{
+          flex: 1,
+          height: "100%",
+          padding: "2rem",
+          transform: isReversed
+            ? "scale(2) translate(25%, 4%)"
+            : "scale(2) translate(-25%, 15%)",
+        }}
+      >
+        <MultipleHexagons position={position} />
+      </Default3SideContainer>
+      <div
+        style={{
+          flex: 4,
+          marginLeft: isReversed ? Margins.horizontal : "2rem",
+          marginRight: isReversed ? "2rem" : Margins.horizontal,
+        }}
+      >
+        {children}
+      </div>
+    </Default2LayoutContainer>
+  );
+};

package/src/layouts/MainSectionLayout.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+import { FlexBox } from "spectacle";
+
+import frontImage from "../front.png";
+
+export const MainSectionLayout = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return (
+    <FlexBox
+      height="100%"
+      width="100%"
+      flexDirection="row"
+      style={{
+        position: "absolute",
+        inset: "none",
+        right: 0,
+        top: 0,
+        bottom: 0,
+      }}
+    >
+      <div style={{ paddingLeft: "8rem", flex: 1 }}>{children}</div>
+      <div style={{ flex: "0 0", height: "100%", paddingLeft: "5rem" }}>
+        <img src={frontImage} alt="Front" style={{ height: "100%" }} />
+      </div>
+    </FlexBox>
+  );
+};

package/src/layouts/QuoteLayout.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import styled from "styled-components";
+import { getMatchingMdxType } from "./utils";
+import { BaseLayout } from "./BaseLayout";
+
+function invariant(condition: any, message: string) {
+  if (!condition) {
+    throw new Error(message);
+  }
+}
+
+const QuoteBaseLayout = styled.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  .blockquote > * {
+    border-left: 0;
+  }
+  .blockquote {
+  text-align: justify;
+    position: relative;
+  }
+  .blockquote > :first-child {
+    &:before {
+      content: "“";
+      position: absolute;
+      font-size: 16rem;
+      left: -5rem;
+      font-family: serif;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #ffffff22;
+    }
+    &:after {
+      content: "”";
+      position: absolute;
+      font-size: 16rem;
+      right: 3rem;
+      bottom: -5rem;
+      font-family: serif;
+      color: #ffffff22;
+      pointer-events: none;
+    }
+  }
+  .blockquote * {
+    line-height: 3.5rem !important;
+    font-size: 2.5rem;
+  }
+  .source {
+    font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    box-sizing: border-box;
+    width: 100%;
+    margin-top: 4rem;
+    text-align: right;
+    font-size: 2rem;
+    a {
+      text-decoration: none;
+      color: #ffffff77;
+    }
+  }
+`;
+export function QuoteLayout({
+  children,
+  author,
+  sourceUrl,
+}: {
+  children: React.ReactNode;
+  author: string;
+  sourceUrl?: string;
+}) {
+  const [blockquote, rest] = getMatchingMdxType(children, "blockquote");
+  invariant(rest, "QuoteLayout can only have one blockquote");
+  return (
+    <QuoteBaseLayout>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          justifyContent: "center",
+          textAlign: "center",
+          margin: "0 4rem 0 12rem",
+        }}
+      >
+        <div
+          style={{
+            flex: 1,
+            padding: "0 12rem 0 2rem",
+            boxSizing: "border-box",
+          }}
+          className="blockquote"
+        >
+          {blockquote}
+        </div>
+        <div className="source" style={{ flex: 1, padding: "0 4rem" }}>
+          {
+            <a href={sourceUrl} target="_blank" rel="noopener noreferrer">
+              {author}
+            </a>
+          }
+        </div>
+      </div>
+    </QuoteBaseLayout>
+  );
+}

package/src/layouts/SectionLayout.tsx

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const SectionLayout = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  padding-left: 9rem;
+
+  h2 {
+    color: white;
+  }
+`;

package/src/layouts/SideCodeLayout.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { ColumnsLayout } from "./columns";
+import { Margins, getCodeChildren } from "./utils";
+import styled from "styled-components";
+
+const CodeSide = styled.div`
+  pre {
+    font-size: 0.9rem;
+  }
+`;
+
+export function SidedCodeLayout({
+  children,
+  position = "right",
+}: {
+  children: React.ReactNode;
+  position?: "left" | "right";
+}) {
+  const [code, rest] = getCodeChildren(children);
+
+  return (
+    <ColumnsLayout reverse={position === "left"}>
+      <div
+        style={{
+          marginLeft: Margins.horizontal,
+          paddingRight: Margins.horizontalInternal,
+        }}
+      >
+        {rest}
+      </div>
+      <CodeSide
+        style={{
+          backgroundColor: "#1d2021",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+        }}
+      >
+        {code}
+      </CodeSide>
+    </ColumnsLayout>
+  );
+}

package/src/layouts/SideImageLayout.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import styled from "styled-components";
+import { SVGObject } from "./styled";
+import { getMatchingMdxType } from "./utils";
+import { Image } from "../components/Image";
+
+const DivWithHeading = styled.div`
+  h2 {
+    margin-top: 0;
+  }
+  h2 strong {
+    color: var(--color-secondary);
+    font-weight: 400;
+  }
+`;
+
+/**
+ * Parse a ratio like 6/5
+ */
+function parseRatio(ratio: string) {
+  const [a, b] = ratio.split("/");
+  return { left: parseInt(a), right: parseInt(b) };
+}
+
+export const SidedImageLayout = ({
+  children,
+  image,
+  position,
+  height,
+  ratio: ratioProp,
+}: {
+  children: React.ReactNode;
+  image?: string;
+  position?: "left" | "right";
+  ratio?: string;
+  height?: number;
+}) => {
+  const isReversed = position === "left";
+  const [component, rest] = getMatchingMdxType(children, "Image") || image;
+  const ratio = parseRatio(ratioProp || "6/4");
+
+  if (!image && !component.length) {
+    console.error("No image provided for SidedImageLayout");
+    return null;
+  }
+  return (
+    <DivWithHeading
+      style={{
+        display: "flex",
+        flexDirection: isReversed ? "row-reverse" : "row",
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: 0,
+        top: 0,
+      }}
+    >
+      <div
+        style={{
+          flex: `${ratio.left || 6} 0`,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          padding: isReversed ? "0 7rem 0 4rem" : "0 4rem 0 7rem",
+        }}
+      >
+        {rest}
+      </div>
+      <div
+        style={{
+          flex: `${ratio.right || 4} 0`,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          backgroundColor: "white",
+        }}
+      >
+        {component || <Image src={image} />}
+      </div>
+    </DivWithHeading>
+  );
+};

package/src/layouts/SideLayout.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { ColumnsLayout } from "./columns";
+import { Margins, getMatchingMdxType } from "./utils";
+
+export function SideLayout({
+  children,
+  position = "right",
+}: {
+  children: React.ReactNode;
+  position?: "right" | "left";
+}) {
+  const [side, rest] = getMatchingMdxType(children, "Side");
+  return (
+    <ColumnsLayout reverse={position === "left"}>
+      <div style={{ marginLeft: Margins.horizontal }}>{rest}</div>
+      <div
+        style={{
+          marginLeft: Margins.horizontalInternal,
+          padding: `0 ${Margins.vertical}`,
+          backgroundColor: "#00000044",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          height: "100%",
+        }}
+      >
+        {side}
+      </div>
+    </ColumnsLayout>
+  );
+}

package/src/layouts/columns.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import styled from "styled-components";
+
+const DivWithHeading = styled.div`
+  h2 {
+    margin-top: 0;
+  }
+  h2 strong {
+    color: var(--color-secondary);
+    font-weight: 400;
+  }
+`;
+
+const ColumnsContainer = styled(DivWithHeading)`
+  display: flex;
+  flex-direction: row;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  alignitems: center;
+`;
+
+export function ColumnsLayout({
+  children,
+  reverse,
+}: {
+  children: React.ReactNode;
+  reverse?: boolean;
+}) {
+  const childrenArray = React.Children.toArray(children);
+  return (
+    <ColumnsContainer
+      style={{
+        flexDirection: reverse ? "row-reverse" : "row",
+      }}
+    >
+      {childrenArray.map((child, i) => (
+        <div
+          key={i}
+          style={{
+            flex: 1,
+            height: "100%",
+            display: "flex",
+            flexFlow: "column",
+            justifyContent: "center",
+            boxSizing: "border-box",
+          }}
+        >
+          {child}
+        </div>
+      ))}
+    </ColumnsContainer>
+  );
+}

package/src/layouts/index.tsx

@@ -0,0 +1,19 @@
+import { CenteredLayout } from "./CenteredLayout";
+import { Default3Layout } from "./Default3Layout";
+import { MainSectionLayout } from "./MainSectionLayout";
+import { QuoteLayout } from "./QuoteLayout";
+import { SectionLayout } from "./SectionLayout";
+import { SidedCodeLayout } from "./SideCodeLayout";
+import { SidedImageLayout } from "./SideImageLayout";
+import { SideLayout } from "./SideLayout";
+
+export default {
+  mainSection: MainSectionLayout,
+  centered: CenteredLayout,
+  default3: Default3Layout,
+  quote: QuoteLayout,
+  sidedCode: SidedCodeLayout,
+  sidedImage: SidedImageLayout,
+  side: SideLayout,
+  section: SectionLayout,
+};

package/src/layouts/styled.ts

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const SVGObject = styled.object`
+  padding: 3rem 2rem;
+  box-sizing: border-box;
+  background-color: white;
+`;

package/src/layouts/utils.ts

@@ -0,0 +1,66 @@
+import React from "react";
+
+export const Margins = {
+  vertical: "4rem",
+  horizontal: "7rem",
+  horizontalInternal: "2rem",
+};
+
+export function getHeading(children: React.ReactNode) {
+  const allChild = React.Children.toArray(children);
+  if (allChild.length === 0) return [null, allChild];
+  const [candidate, ...rest] = allChild;
+  if (!React.isValidElement(candidate)) return [null, allChild];
+  if (["h2", "h3"].includes(candidate.props.originalType)) {
+    return [candidate, rest];
+  }
+  return [null, allChild];
+}
+
+export function getCode(children: React.ReactNode) {
+  const allChild = React.Children.toArray(children);
+
+  if (allChild.length === 0) return [null, allChild];
+
+  const index = allChild.findIndex((child) => {
+    if (!React.isValidElement(child)) return false;
+    return child.props.originalType === "pre";
+  });
+
+  if (index === -1) return [null, allChild];
+
+  const candidate = allChild[index];
+  const rest = allChild.filter((_, i) => i !== index);
+  return [candidate, rest];
+}
+
+export function getMatchingMdxType(children: React.ReactNode, mdxType: string) {
+  const allChild = React.Children.toArray(children);
+
+  const matchFn = (child: React.ReactNode) => {
+    if (!React.isValidElement(child)) return false;
+    if (typeof child.type !== "function") return false;
+    if (child.type.name === mdxType) return true;
+    if ("mdxType" in child.type === false) return false;
+
+    return child.type.mdxType === mdxType;
+  };
+
+  const matches = allChild.filter(matchFn);
+
+  const rest = allChild.filter((child) => !matchFn(child));
+
+  return [matches, rest];
+}
+
+export function getCodeChildren(children: React.ReactNode) {
+  const [code, rest] = getCode(children);
+  if (code) return [code, rest];
+
+  const [codeStepper, rest2] = getMatchingMdxType(children, "CodeStepper");
+  if (codeStepper.length > 0) return [codeStepper, rest2];
+
+  const [codes, rest3] = getMatchingMdxType(children, "FilePane");
+
+  return [codes, rest3];
+}

package/src/node.d.ts

@@ -0,0 +1,5 @@
+interface ImportMeta {
+  env: {
+    DEV: boolean;
+  };
+}

package/src/style.d.ts

@@ -0,0 +1,10 @@
+// Typings for .module.scss
+declare module "*.module.scss" {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module "*.png" {
+  const content: any;
+  export default content;
+}

package/src/template.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Box, FullScreen } from "spectacle";
+
+export const template = ({ slideNumber, numberOfSlides }) => {
+  const percentage = (slideNumber / numberOfSlides) * 100;
+  return (
+    <div style={{ position: "absolute", bottom: 0, left: 0, right: 0 }}>
+      <Box padding="0 0 0.5em 0.7em">
+        <FullScreen />
+      </Box>
+
+      <div style={{ width: "100%", height: "4px", background: "#ffffff11" }}>
+        <div
+          style={{
+            width: `${percentage}%`,
+            height: "2px",
+            background: "#ffffff77",
+            transition: "width 0.3s ease",
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/src/theme.ts

@@ -0,0 +1,28 @@
+import "@fontsource/bitter/300.css";
+import "@fontsource/bitter/400.css";
+import "@fontsource/bitter/500.css";
+import "@fontsource/bitter/700.css";
+
+export default {
+  colors: {
+    //primary: "white",
+    primary: "rgb(43,19,90)",
+
+    secondary: "rgb(86,212,248)",
+    // secondary: "#F49676",
+    // tertiary: "#042F3B",
+    tertiary: "rgb(43,19,90)",
+  },
+  fonts: {
+    header: 'Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif',
+    text: 'Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif',
+  },
+  fontSizes: {
+    h1: "48px",
+    h2: "32px",
+    h3: "24px",
+    text: "24px",
+    monospace: "16px",
+  },
+  space: [8, 16, 24],
+};