@gpichot/spectacle-deck 1.1.7 → 1.2.1

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],
+};

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    /* Target node 14 */
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM"],
+    "target": "ES2020",
+    "skipLibCheck": true,
+
+    /* Transpile with esbuild */
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noFallthroughCasesInSwitch": true,
+    "useUnknownInCatchVariables": true,
+
+    // Options
+    "outDir": "dist",
+    "baseUrl": "./src",
+    "esModuleInterop": true,
+    "declaration": true,
+    "jsx": "react",
+    "types": ["./src/node.d.ts"],
+  },
+  "include": ["src/**/*"],
+  "files": ["src/style.d.ts"],
+}

package/components/Timeline.styled.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export declare const TimelineItemContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
-export declare const TimelineItemContentPhantom: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
-    ref?: import("react").Ref<HTMLDivElement>;
-}, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>, keyof import("react").Component<any, {}, any>>;
-export declare const TimelineItemBody: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
-export declare const TimelineItemTitle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/components/styled.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-import { Image as SpectacleImage } from "spectacle";
-export declare const Link: (props: {
-    href: string;
-    children: React.ReactNode;
-}) => React.JSX.Element;
-export declare const Image: (props: React.ComponentProps<typeof SpectacleImage>) => React.JSX.Element;
-export declare const CustomHeading: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<any, never>> | (import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<any, never>> & Omit<styled_components.StyledComponent<"div", any, any, never>, keyof React.Component<any, {}, any>>);
-export declare const CustomQuote: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, never>>;
-export declare const InlineCode: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, never>>;
-export declare const HeadingTwo: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>;
-export declare const HeadingThree: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>;

package/layouts/SectionLayout.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const SectionLayout: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/layouts/styled.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const SVGObject: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>, never>>;