@gpichot/spectacle-deck 1.2.1 → 1.2.3

package/src/layouts/QuoteLayout.tsx

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

@@ -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,82 +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: 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

@@ -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: 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

@@ -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;
-`;

package/src/layouts/utils.ts

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

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

package/src/style.d.ts

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

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

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

@@ -1,29 +0,0 @@
-{
-  "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"],
-}