@gpichot/spectacle-deck 1.1.1 → 1.1.3

package/src/index.tsx

@@ -1,109 +0,0 @@
-import React from "react";
-import { MDXProvider } from "@mdx-js/react";
-import { Deck as SpectacleDeck, Slide } from "spectacle";
-
-import Layouts from "./layouts";
-import theme from "./theme";
-import { template } from "./template";
-import customComponents from "./components/map";
-
-export { default as FilePane } from "./components/FilePane";
-export { ItemsColumn } from "./components/ItemsColumn";
-export { Doc, DocItem } from "./components/DocumentationItem";
-export { Image } from "./components/Image";
-export {
-  default as HorizontalList,
-  HorizontalListItem,
-} from "./components/HorizontalList";
-export { default as Timeline, TimelineItem } from "./components/Timeline";
-export { IconBox } from "./components/IconBox";
-
-export type SlideType = {
-  metadata: Record<string, unknown> & { layout?: string };
-  slideComponent: React.ElementType<unknown>;
-};
-
-export type DeckType = {
-  metadata: Record<string, unknown>;
-  slides: SlideType[];
-};
-
-export function PassThrough({ children }: { children: React.ReactNode }) {
-  return <>{children}</>;
-}
-
-export function Layout({
-  children,
-  frontmatter,
-}: {
-  children: React.ReactNode;
-  frontmatter: { layout?: string };
-}) {
-  const layout = frontmatter?.layout || "default";
-  const Layout = layout in Layouts ? Layouts[layout] : null;
-
-  if (layout && !Layout) {
-    console.warn(`Layout ${layout} not found`);
-  }
-
-  if (Layout) {
-    return <Layout {...frontmatter}>{children}</Layout>;
-  }
-
-  return <>{children}</>;
-}
-
-const componentsMap = {
-  ...customComponents,
-  wrapper: Layout,
-};
-export function Deck({ deck }: { deck: DeckType }) {
-  React.useEffect(() => {
-    document.title = (deck.metadata.title as string) || "Untitled";
-  }, [deck.metadata.title]);
-  return (
-    <React.StrictMode>
-      <MDXProvider components={componentsMap}>
-        <SpectacleDeck theme={theme} template={template}>
-          {deck.slides.map((slide, i) => {
-            const Component = slide.slideComponent;
-            return (
-              <Slide key={i}>
-                <Component />
-              </Slide>
-            );
-          })}
-        </SpectacleDeck>
-      </MDXProvider>
-    </React.StrictMode>
-  );
-}
-
-export function Danger({ children }: { children: React.ReactNode }) {
-  return <div style={{ color: "red" }}>{children}</div>;
-}
-
-export function Information({ children }: { children: React.ReactNode }) {
-  return <div style={{ color: "orange" }}>{children}</div>;
-}
-
-export function Success({ children }: { children: React.ReactNode }) {
-  return <div style={{ color: "green" }}>{children}</div>;
-}
-export function Warning({ children }: { children: React.ReactNode }) {
-  return <div style={{ color: "yellow" }}>{children}</div>;
-}
-
-export function Side({ children }: { children: React.ReactNode }) {
-  return <div>{children}</div>;
-}
-
-Side.mdxType = "Side";
-
-export function Documentation({ children }: { children: React.ReactNode }) {
-  return <div>{children}</div>;
-}
-
-export function Box({ children }: { children: React.ReactNode }) {
-  return <div>{children}</div>;
-}

package/src/layouts/CenteredLayout.tsx

@@ -1,40 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { Margins, getHeading } from "./utils";
-
-const CenteredLayoutContent = styled.div`
-  h2,
-  h3 {
-  }
-`;
-export const CenteredLayout = (
-  props: React.ComponentPropsWithoutRef<"div">
-) => {
-  const [heading, rest] = getHeading(props.children);
-  return (
-    <div
-      {...props}
-      style={{
-        height: "100%",
-        display: "flex",
-        flexFlow: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        margin: `0 ${Margins.horizontal}`,
-      }}
-    >
-      {rest}
-      <CenteredLayoutContent
-        style={{
-          position: "absolute",
-          opacity: 0.8,
-          marginBottom: "2rem",
-          marginTop: "2rem",
-          bottom: 0,
-        }}
-      >
-        {heading}
-      </CenteredLayoutContent>
-    </div>
-  );
-};

package/src/layouts/Default3Layout.tsx

@@ -1,159 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,99 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { getMatchingMdxType } from "./utils"; 
-
-function invariant(condition: any, message: string) {
-  if (!condition) {
-    throw new Error(message);
-  }
-}
-
-const QuoteBaseLayout = styled.div  `
-  .blockquote > * {
-    border-left: 0;
-  }
-  .blockquote {
-    position: relative;
-  }
-  .blockquote > :first-child {
-    &:before {
-      content: "“";
-      position: absolute;
-      font-size: 16rem;
-      left: -9rem;
-      font-family: serif;
-      top: 2rem;
-      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,
-  url,
-}: {
-  children: React.ReactNode;
-  author: string;
-  url?: 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 10%",
-        }}
-      >
-        <div
-          style={{
-            flex: 1,
-            padding: "0 8rem 0 0",
-            boxSizing: "border-box",
-          }}
-          className="blockquote"
-        >
-          {blockquote}
-        </div>
-        <div className="source" style={{ flex: 1, padding: "0 2rem" }}>
-          {
-            <a href={url} target="_blank" rel="noopener noreferrer">
-              {author}
-            </a>
-          }
-        </div>
-      </div>
-    </QuoteBaseLayout>
-  );
-}

package/src/layouts/SectionLayout.tsx

@@ -1,14 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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: #f49676;
-    font-weight: 400;
-  }
-`;
-
-export const SidedImageLayout = ({
-  children,
-  image,
-  position,
-  height,
-}: {
-  children: React.ReactNode;
-  image?: string;
-  position?: "left" | "right";
-  height?: number;
-}) => {
-  const isReversed = position === "left";
-  const [component, rest] = getMatchingMdxType(children, "Image") || image;
-
-  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: 1,
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          padding: isReversed ? "0 7rem 0 4rem" : "0 4rem 0 7rem",
-        }}
-      >
-        {rest}
-      </div>
-      <div
-        style={{
-          flex: 1,
-          maxWidth: "40vw",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          backgroundColor: "white",
-        }}
-      >
-        {component || <Image src={image} />}
-      </div>
-    </DivWithHeading>
-  );
-};

package/src/layouts/SideLayout.tsx

@@ -1,31 +0,0 @@
-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

@@ -1,56 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-const DivWithHeading = styled.div`
-  h2 {
-    margin-top: 0;
-  }
-  h2 strong {
-    color: #f49676;
-    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

@@ -1,19 +0,0 @@
-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

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