@gpichot/spectacle-deck 1.2.1 → 1.2.2

package/src/components/map.tsx

@@ -1,128 +0,0 @@
-import React from "react";
-import { mdxComponentMap } from "spectacle";
-import {
-  CustomHeading,
-  CustomQuote,
-  HeadingThree,
-  HeadingTwo,
-  InlineCode,
-  Image,
-} from "./styled";
-
-import CodeStepper from "./CodeStepper/CodeStepper";
-import { QRCode } from "./QRCode";
-
-const componentsMap = {
-  ...mdxComponentMap,
-  inlineCode: (props: React.ComponentPropsWithoutRef<"code">) => (
-    <InlineCode
-      {...props}
-      style={{
-        fontWeight: 500,
-        display: "inline-block",
-      }}
-    />
-  ),
-  table: (props: React.ComponentPropsWithoutRef<"table">) => (
-    <table
-      {...props}
-      style={{
-        borderCollapse: "collapse",
-        width: "100%",
-        textAlign: "center",
-      }}
-    />
-  ),
-  tr: (props: React.ComponentPropsWithoutRef<"tr">) => (
-    <tr
-      {...props}
-      style={{
-        textAlign: "center",
-        color: "white",
-        fontFamily: 'Bitter,"Helvetica Neue",Helvetica,Arial,sans-serif',
-        fontSize: 24,
-      }}
-    />
-  ),
-  td: (props: React.ComponentPropsWithoutRef<"td">) => (
-    <td
-      {...props}
-      style={{
-        textAlign: "center",
-        padding: "0.3rem 0",
-        color: "white",
-        fontFamily: 'Bitter,"Helvetica Neue",Helvetica,Arial,sans-serif',
-        fontSize: 24,
-      }}
-    />
-  ),
-  h1: (props: React.ComponentProps<"h1">) => (
-    <CustomHeading
-      fontSize="h1"
-      color="white"
-      style={{
-        fontWeight: 500,
-        fontFamily: 'Bitter,"Helvetica Neue",Helvetica,Arial,sans-serif',
-        fontSize: 67,
-        flex: "0 1 65vw",
-        maxWidth: "65%",
-        textAlign: "left",
-      }}
-    >
-      {props.children}
-    </CustomHeading>
-  ),
-  h2: (props: React.ComponentProps<"h2">) => (
-    <HeadingTwo>{props.children}</HeadingTwo>
-  ),
-  h3: (props: React.ComponentPropsWithoutRef<"h3">) => (
-    <HeadingThree {...props} />
-  ),
-  img: (props: React.ComponentProps<typeof Image>) => <Image {...props} />,
-  pre: CodeStepper,
-  li: (props: React.ComponentProps<"li">) => (
-    <li {...props} style={{ margin: "24px 0" }} />
-  ),
-  Side: (props: React.ComponentProps<"div">) => <div {...props} />,
-  p: (props: React.ComponentProps<"p">) => {
-    const Text = mdxComponentMap.p!;
-    return (
-      <Text
-        style={{ margin: "8px 0", padding: "8px 0", lineHeight: "2rem" }}
-        {...props}
-      />
-    );
-  },
-  blockquote: (props: React.ComponentProps<"blockquote">) => (
-    <CustomQuote {...props} />
-  ),
-  a: ({ children, ...props }: React.ComponentProps<"a">) => {
-    const domain = new URL(props.href || "").hostname;
-    return (
-      <a
-        {...props}
-        style={{ color: "var(--color-secondary)", textDecoration: "none" }}
-      >
-        {children}{" "}
-        <small
-          style={{
-            color: "#ffffff44",
-          }}
-        >
-          ({domain})
-        </small>
-      </a>
-    );
-  },
-  directive: (props: React.ComponentProps<"div">) => {
-    // @ts-expect-error
-    if (props._name === "qrcode") {
-      // @ts-expect-error
-      const url = React.Children.toArray(props.children)[0].props.href;
-      return <QRCode url={url} />;
-    }
-    return <div {...props} />;
-  },
-} as const;
-
-export default componentsMap;

package/src/components/styled.tsx

@@ -1,73 +0,0 @@
-import React from "react";
-import {
-  Link as SpectacleLink,
-  Image as SpectacleImage,
-  Heading,
-  FlexBox,
-} from "spectacle";
-import styled from "styled-components";
-
-export const Link = (props: { href: string; children: React.ReactNode }) => (
-  <SpectacleLink href={props.href} target="_blank" rel="noopener noreferrer">
-    {props.children} [{props.href}]
-  </SpectacleLink>
-);
-
-const StyledImage = styled(SpectacleImage)`
-  object-fit: contain;
-  max-height: 30vh;
-  max-width: 70vw;
-`;
-
-export const Image = (props: React.ComponentProps<typeof SpectacleImage>) => (
-  <FlexBox margin="0 0" padding="0 0">
-    <StyledImage {...props} />
-  </FlexBox>
-);
-
-export const CustomHeading = styled(Heading)`
-  strong {
-    color: var(--color-secondary);
-    font-weight: 500;
-  }
-`;
-
-export const CustomQuote = styled.blockquote`
-  margin: 1rem 0;
-  padding-left: 1.5rem;
-  padding-top: 0;
-  padding-bottom: 0;
-  opacity: 0.8;
-
-  > * {
-    padding: 0 !important;
-  }
-`;
-
-export const InlineCode = styled.code`
-  filter: brightness(1.05);
-  zoom: 1.1;
-  &:before,
-  &:after {
-    content: "\`";
-    font-size: 0.8em;
-  }
-`;
-
-export const HeadingTwo = styled.h2`
-  font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
-  font-size: 55px;
-  font-weight: 400;
-`;
-
-export const HeadingThree = styled.h3`
-  font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
-  font-size: 40px;
-  font-weight: 400;
-  margin-top: 0;
-
-  strong {
-    color: var(--color-secondary);
-    font-weight: 500;
-  }
-`;

package/src/context.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-
-export type LayoutComponent = React.ComponentType<any>;
-
-export interface IPestacleContext {
-  layouts: Record<string, LayoutComponent>;
-}
-
-export const PestacleContext = React.createContext<
-  IPestacleContext | undefined
->(undefined);
-
-export function usePestacle() {
-  const context = React.useContext(PestacleContext);
-  if (!context) {
-    throw new Error("usePestacle must be used within a PestacleProvider");
-  }
-  return context;
-}
-
-export function PestacleProvider({
-  children,
-  layouts,
-}: {
-  children: React.ReactNode;
-  layouts: Record<string, LayoutComponent>;
-}) {
-  return (
-    <PestacleContext.Provider value={{ layouts }}>
-      {children}
-    </PestacleContext.Provider>
-  );
-}

package/src/index.tsx

@@ -1,127 +0,0 @@
-import React from "react";
-import { MDXProvider } from "@mdx-js/react";
-import { Deck as SpectacleDeck, Slide } from "spectacle";
-
-import Layouts from "./layouts";
-import { default as baseTheme } from "./theme";
-import { template } from "./template";
-import customComponents from "./components/map";
-import { createGlobalStyle } from "styled-components";
-import { SlideWrapper } from "./SlideWrapper";
-import { LayoutComponent, PestacleProvider } from "./context";
-import { createCssVariables } from "./colors";
-
-export * from "spectacle";
-
-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 const layouts = Layouts;
-
-interface ThemeOptions {
-  themeTokens: {
-    colors: Record<string, string>;
-  };
-}
-
-const componentsMap = {
-  ...customComponents,
-  wrapper: SlideWrapper,
-};
-export function Deck({
-  deck,
-  theme,
-  layouts = Layouts,
-}: {
-  deck: DeckType;
-  theme: ThemeOptions;
-  layouts?: Record<string, LayoutComponent>;
-}) {
-  React.useEffect(() => {
-    document.title = (deck.metadata.title as string) || "Untitled";
-  }, [deck.metadata.title]);
-
-  const GlobalStyle = React.useMemo(() => {
-    const cssVariables = createCssVariables(theme.themeTokens.colors);
-    return createGlobalStyle`
-      :root {
-        ${cssVariables}
-        --font-family: ${baseTheme.fonts.text}
-      }
-    `;
-  }, [theme]);
-
-  return (
-    <React.StrictMode>
-      <PestacleProvider layouts={layouts}>
-        <MDXProvider components={componentsMap}>
-          <GlobalStyle />
-          <SpectacleDeck
-            theme={{ ...baseTheme, ...theme.themeTokens }}
-            template={template}
-          >
-            {deck.slides.map((slide, i) => {
-              const Component = slide.slideComponent;
-              return (
-                <Slide key={i}>
-                  <Component />
-                </Slide>
-              );
-            })}
-          </SpectacleDeck>
-        </MDXProvider>
-      </PestacleProvider>
-    </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/BaseLayout.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-const DefaultLayoutHeading = styled.div`
-  background-color: #ffffff11;
-  padding: 2rem 5rem;
-  margin-bottom: 1rem;
-
-  h2 {
-    margin: 0;
-  }
-`;
-
-
-export const BaseLayout = ({
-  children,
-  title,
-  ...otherProps
-}: {
-  children: React.ReactNode;
-  title?: React.ReactNode;
-} & Omit<React.ComponentPropsWithoutRef<"div">, "title">) => {
-  return (
-    <div
-      {...otherProps}
-      style={{
-        position: "absolute",
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        display: "flex",
-        flexDirection: "column",
-        marginBottom: "5rem",
-      }}
-    >
-      {title && <DefaultLayoutHeading>{title}</DefaultLayoutHeading>}
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          height: "100%",
-          padding: "0 4rem",
-          flex: 1,
-        }}
-      >
-        {children}
-      </div>
-    </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>
-  );
-};