@enhanced-dom/slides 0.0.6 → 0.1.0

package/components/icon.component.d.ts

@@ -0,0 +1,8 @@
+import { type DetailedHTMLProps, HTMLAttributes } from 'react';
+import { IconWebComponent, type IconWebComponentAttributes } from '@enhanced-dom/icon';
+import { IconDefinition } from '@fortawesome/fontawesome-common-types';
+declare type IconComponentProps = IconWebComponentAttributes<IconDefinition> & DetailedHTMLProps<HTMLAttributes<IconWebComponent>, IconWebComponent>;
+export declare const Icon: import("react").ComponentType<IconComponentProps> & {
+    renderer: import("@enhanced-dom/webcomponent").IRenderingEngine;
+} & Record<string, AnalyserNode>;
+export {};

package/components/{shell/scroll-top/icon.component.js → icon.component.js}

@@ -1,8 +1,7 @@
-import { withReactAdapter } from '@enhanced-dom/react';
 import { IconWebComponent } from '@enhanced-dom/icon';
 import { FontawesomeIconRenderer } from '@enhanced-dom/fontawesome';
+import { withReactAdapter } from '@enhanced-dom/react';
 IconWebComponent.addIconInterpreter('fa5', new FontawesomeIconRenderer());
-IconWebComponent.register();
 export const Icon = withReactAdapter({
     type: IconWebComponent,
 });

package/components/index.d.ts

@@ -1,2 +1,2 @@
-export * from './toc.component';
+export * from './toc';
 export * from './shell';

package/components/index.js

@@ -1,2 +1,2 @@
-export * from './toc.component';
+export * from './toc';
 export * from './shell';

package/components/scroll-top/scroll-top.component.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from 'react';
+export declare const ScrollTop: ({ children }: {
+    children?: ReactNode;
+}) => import("react").JSX.Element;

package/components/scroll-top/scroll-top.component.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { useCallback, useState } from 'react';
+import ReactCardFlip from 'react-card-flip';
+import { faArrowAltCircleUp } from '@fortawesome/free-regular-svg-icons';
+import * as styles from './scroll-top.style.pcss';
+import { Icon } from '../icon.component';
+const getBodyScroll = () => {
+    return document.body.scrollTop !== 0 || document.documentElement.scrollTop !== 0;
+};
+const scrollToTop = () => {
+    if (getBodyScroll()) {
+        window.scrollBy(0, -50);
+        requestAnimationFrame(scrollToTop);
+    }
+};
+const scrollOnKey = (e) => {
+    if (e.altKey || e.shiftKey || e.ctrlKey || e.key !== 'Enter') {
+        return;
+    }
+    e.stopPropagation();
+    e.preventDefault();
+    scrollToTop();
+};
+export const ScrollTop = ({ children }) => {
+    const [isFlipped, setFlipped] = useState(false);
+    const showButton = useCallback(() => {
+        if (getBodyScroll()) {
+            setFlipped(true);
+        }
+    }, [setFlipped]);
+    const showFront = useCallback(() => {
+        setFlipped(false);
+    }, [setFlipped]);
+    const buttonContents = children ? (_jsxs(ReactCardFlip, { isFlipped: isFlipped, flipDirection: "horizontal", children: [_jsx("div", { className: styles.brandingFront, children: children }), _jsx("div", { className: styles.brandingBack, children: _jsx(Icon, { className: styles.scrollIcon, config: { ...faArrowAltCircleUp, namespace: 'fa5' } }) })] })) : (_jsx("div", { className: styles.brandingBack, children: _jsx(Icon, { className: styles.scrollIcon, config: { ...faArrowAltCircleUp, namespace: 'fa5' } }) }));
+    return (_jsx("div", { className: styles.branding, tabIndex: 0, role: "button", onClick: scrollToTop, onFocus: showButton, onBlur: showFront, onMouseEnter: showButton, onMouseLeave: showFront, onKeyDown: scrollOnKey, children: buttonContents }));
+};

package/components/scroll-top/scroll-top.style.pcss

@@ -0,0 +1,52 @@
+.branding {
+  width: 3rem;
+  height: 3rem;
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 1;
+  border-radius: 50%;
+  color: var(--theme-ui-colors-highlight, inherit);
+
+  &:focus,
+  &:active {
+    /* stylelint-disable-next-line unit-allowed-list */
+    box-shadow: inset 0 0 1px 1px var(--theme-ui-colors-dark-text, inherit);
+    outline: none;
+  }
+
+  > div {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  &-back {
+    height: 100%;
+    width: 100%;
+    background-color: transparent;
+    font-size: 2rem;
+    color: var(--theme-uicolors-highlight, inherit);
+    cursor: pointer;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 0.5rem;
+  }
+
+  &-front {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 0.5rem;
+  }
+}
+
+.scroll-icon {
+  display: flex;
+  align-items: center;
+}

package/components/scroll-top/scroll-top.style.pcss.d.ts

@@ -0,0 +1,4 @@
+export const branding: string
+export const brandingBack: string
+export const brandingFront: string
+export const scrollIcon: string

package/components/shell/header.component.d.ts

@@ -1,5 +1,8 @@
-export declare const ShellHeader: ({ title, author, date }: {
+/// <reference types="react" />
+export declare const ShellHeader: ({ title, author, profileLink, date, variant, }: {
     title: string;
     author: string;
+    profileLink?: string;
     date: string;
-}) => import("theme-ui/jsx-runtime").JSX.Element;
+    variant?: string;
+}) => import("react").JSX.Element;

package/components/shell/header.component.js

@@ -1,19 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-import { Themed } from 'theme-ui';
-import { SizeVariableNames, ColorVariableNames } from '../../theme';
-export const ShellHeader = ({ title, author, date }) => {
-    return (_jsxs("div", Object.assign({ sx: { position: 'relative' } }, { children: [_jsx("div", Object.assign({ sx: {
-                    position: ['static', 'absolute'],
-                    width: '100%',
-                    height: ['auto', '100%'],
-                    right: ['auto', SizeVariableNames.FULL_CONTENT_WIDTH],
-                    color: ['text', ColorVariableNames.LIGHT_TEXT],
-                } }, { children: _jsx("div", Object.assign({ sx: {
-                        float: ['none', 'right'],
-                        display: ['block', 'inline-block'],
-                        textAlign: ['left', 'right'],
-                    } }, { children: _jsx(Themed.h1, Object.assign({ sx: { paddingBottom: '80px' } }, { children: title }), void 0) }), void 0) }), void 0),
-            _jsx("div", { children: _jsxs(Themed.p, Object.assign({ sx: { paddingTop: 1 } }, { children: [_jsx(Themed.a, Object.assign({ href: "/", sx: { textDecoration: 'none', color: 'inherit', border: 'none' } }, { children: author }), void 0),
-                        _jsx("br", {}, void 0),
-                        _jsx("span", Object.assign({ sx: { fontSize: 1 } }, { children: date }), void 0)] }), void 0) }, void 0)] }), void 0));
+import { Themed } from '@theme-ui/mdx';
+export const ShellHeader = ({ title, author, profileLink, date, variant = 'default', }) => {
+    return (_jsxs("header", { children: [_jsx(Themed.h1, { children: title }), _jsxs(Themed.p, { sx: { variant: `styles.shell.${variant}.Author` }, children: [profileLink ? (_jsx(Themed.a, { href: "/", sx: { textDecoration: 'none', color: 'inherit', border: 'none' }, children: author })) : (author), _jsx("br", {}), _jsx("span", { sx: { fontSize: 1 }, children: date })] })] }));
 };

package/components/shell/shell.component.d.ts

@@ -1,15 +1,17 @@
-/** @jsxFrag React.Fragment */
-import { Theme } from 'theme-ui';
-import React from 'react';
+import { type Theme } from 'theme-ui';
+import { type ComponentProps, type FC, type ReactNode } from 'react';
+import { MDXProvider } from '@mdx-js/react';
 import { ShellHeader } from './header.component';
 declare const BrandingSlot: ({ children }: {
-    children: any;
-}) => any;
-declare const ContentsSlot: React.FC<React.ComponentProps<typeof ShellHeader>>;
-export declare const Shell: React.FC<{
+    children?: ReactNode;
+}) => import("react").JSX.Element;
+declare const ContentsSlot: FC<ComponentProps<typeof ShellHeader>>;
+export declare const Shell: FC<{
     theme?: Theme;
+    variant?: string;
 }> & {
     Branding: typeof BrandingSlot;
     Contents: typeof ContentsSlot;
+    mdxComponents: ComponentProps<typeof MDXProvider>['components'];
 };
 export {};

package/components/shell/shell.component.js

@@ -1,44 +1,37 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-/** @jsxFrag React.Fragment */
-import { Themed, ThemeProvider } from 'theme-ui';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { ThemeUIProvider } from 'theme-ui';
+import { Themed } from '@theme-ui/mdx';
 import { Global } from '@emotion/react';
-import React from 'react';
-import defaultTheme, { ColorVariableNames, SizeVariableNames } from '../../theme';
+import { Children as ReactChildren } from 'react';
+import { MDXProvider } from '@mdx-js/react';
+import defaultTheme from '../../theme';
 import { ShellHeader } from './header.component';
-import { ScrollTop } from './scroll-top';
+import { ScrollTop } from '../scroll-top';
+import { Heading2 } from '../toc';
 const BrandingSlot = ({ children }) => {
-    return children || null;
+    return _jsx(_Fragment, { children: children });
 };
 const ContentsSlot = ({ children, ...rest }) => {
-    return (_jsxs(_Fragment, { children: [_jsx(ShellHeader, Object.assign({}, rest), void 0), children || null] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx(ShellHeader, { ...rest }), children || null] }));
 };
-const getBranding = (children) => React.Children.toArray(children).find((item) => { var _a; return ((_a = item) === null || _a === void 0 ? void 0 : _a.type) === BrandingSlot; });
-const getContents = (children) => React.Children.toArray(children).find((item) => { var _a; return ((_a = item) === null || _a === void 0 ? void 0 : _a.type) === ContentsSlot; });
-export const Shell = ({ children, theme, }) => {
+const getBranding = (children) => ReactChildren.toArray(children).find((item) => (item === null || item === void 0 ? void 0 : item.type) === BrandingSlot);
+const getContents = (children) => ReactChildren.toArray(children).find((item) => (item === null || item === void 0 ? void 0 : item.type) === ContentsSlot);
+export const Shell = ({ children, theme, variant = 'default' }) => {
+    var _a, _b, _c, _d, _e;
     const branding = getBranding(children);
     const contents = getContents(children);
-    return (_jsx(ThemeProvider, Object.assign({ theme: theme }, { children: _jsxs(Themed.root, Object.assign({ sx: {
-                display: 'flex',
-                width: '100vw',
-            } }, { children: [_jsx(Global, { styles: {
-                        body: { margin: 0, overflowX: 'hidden' },
-                    } }, void 0),
-                _jsx("aside", { sx: {
-                        bg: ColorVariableNames.DARK_BACKGROUND,
-                        color: ColorVariableNames.LIGHT_TEXT,
-                        width: [0, '40vw'],
-                        minHeight: '100vh',
-                    } }, void 0),
-                _jsx("div", Object.assign({ sx: { bg: ColorVariableNames.BACKGROUND, color: ColorVariableNames.TEXT, width: ['100vw', '60vw'] } }, { children: _jsxs("main", Object.assign({ sx: {
-                            py: [5, SizeVariableNames.TOP_MARGIN],
-                            pl: [0, SizeVariableNames.INNER_MARGIN],
-                            width: [SizeVariableNames.CONTENT, SizeVariableNames.CONTENT],
-                            maxWidth: ['80%', 'none'],
-                            mx: ['auto', 0],
-                        } }, { children: [contents, branding ? _jsx(ScrollTop, { children: branding }, void 0) : null] }), void 0) }), void 0)] }), void 0) }), void 0));
+    return (_jsx(ThemeUIProvider, { theme: theme, children: _jsxs(Themed.root, { sx: {
+                variant: `styles.shell.${variant}.Root`,
+            }, children: [_jsx(Global, { styles: {
+                        ...((_b = (_a = theme.styles.global) === null || _a === void 0 ? void 0 : _a[variant]) !== null && _b !== void 0 ? _b : {}),
+                        body: { margin: 0, overflowX: 'hidden', ...((_e = (_d = (_c = theme.styles.global) === null || _c === void 0 ? void 0 : _c[variant]) === null || _d === void 0 ? void 0 : _d.body) !== null && _e !== void 0 ? _e : {}) },
+                    } }), _jsx("aside", {}), _jsxs("main", { children: [_jsx(MDXProvider, { components: Shell.mdxComponents, disableParentContext: true, children: contents }), branding ? _jsx(ScrollTop, { children: branding.props.children ? branding : null }) : null] })] }) }));
 };
 Shell.defaultProps = {
     theme: defaultTheme,
 };
+Shell.mdxComponents = {
+    h2: Heading2,
+};
 Shell.Branding = BrandingSlot;
 Shell.Contents = ContentsSlot;

package/components/toc/heading2.component.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Heading2: ({ children, id, className, ...forwarded }: React.BaseHTMLAttributes<HTMLElement> & {
+    children: string;
+    variant: string;
+}) => React.JSX.Element;

package/components/toc/heading2.component.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import classnames from 'classnames';
+import { faLink } from '@fortawesome/free-solid-svg-icons';
+import { faClipboard } from '@fortawesome/free-regular-svg-icons';
+import * as styles from './toc.style.pcss';
+import { Icon } from '../icon.component';
+export const Heading2 = ({ children, id, className, ...forwarded }) => {
+    const anchorRef = id !== null && id !== void 0 ? id : children.toLowerCase().replace(/\s/, '-');
+    const url = useMemo(() => {
+        const modifiedUrl = new URL(window.location.href);
+        modifiedUrl.hash = anchorRef;
+        return modifiedUrl;
+    }, [anchorRef]);
+    const [copied, setCopied] = useState(false);
+    const handleCopyLink = useCallback(() => {
+        navigator.clipboard.writeText(url.toString());
+        setCopied(true);
+    }, [url, setCopied]);
+    const handleKeyboardCopy = useCallback((e) => {
+        const hasModifier = e.altKey || e.ctrlKey || e.metaKey || e.shiftKey;
+        const isActionKey = e.key == ' ' || e.key == 'Enter';
+        if (!hasModifier && isActionKey) {
+            e.stopPropagation();
+            e.preventDefault();
+            handleCopyLink();
+        }
+    }, [handleCopyLink]);
+    const iconConfig = useMemo(() => ({ ...(copied ? faClipboard : faLink), namespace: 'fa5' }), [copied]);
+    const handleCopyReset = useCallback(() => {
+        setCopied(false);
+    }, [setCopied]);
+    return (_jsx("h2", { className: classnames(styles.heading, className), ...forwarded, tabIndex: 0, onKeyDown: handleKeyboardCopy, onBlur: handleCopyReset, 
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+        role: "link", children: _jsxs("a", { id: anchorRef, className: styles.anchor, href: url.toString(), children: [children, _jsx(Icon, { onClick: copied ? undefined : handleCopyLink, config: iconConfig, className: classnames(styles.icon, { [styles.copied]: copied }), title: copied ? 'Copied to clipboard!' : 'Copy link' })] }) }));
+};

package/components/toc/index.d.ts

@@ -0,0 +1,2 @@
+export * from './toc.component';
+export * from './heading2.component';

package/components/toc/index.js

@@ -0,0 +1,2 @@
+export * from './toc.component';
+export * from './heading2.component';

package/components/toc/toc.component.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface TocItemProps {
+    heading: string;
+    to?: string;
+    explanation?: string;
+}
+export declare const Toc: ({ headings }: {
+    headings: TocItemProps[];
+}) => React.JSX.Element;
+export {};

package/components/toc/toc.component.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+const TocItem = ({ heading, to, explanation }) => {
+    const anchor = to !== null && to !== void 0 ? to : heading;
+    return (_jsxs("li", { children: [_jsx("a", { href: `#${anchor.toLowerCase().replace(/\s/, '-')}`, children: _jsx("b", { children: heading }) }), explanation ? ': ' : '', explanation] }));
+};
+export const Toc = ({ headings }) => (_jsx("ul", { children: headings.map((h, idx) => (_jsx(TocItem, { ...h }, idx))) }));

package/components/toc/toc.style.pcss

@@ -0,0 +1,70 @@
+.heading {
+  display: flex;
+  justify-content: flex-start;
+
+  .anchor {
+    cursor: default;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 0.5rem;
+    border: none;
+    outline: none;
+
+    .icon {
+      visibility: hidden;
+      font-size: 1rem;
+
+      &:hover {
+        color: var(--theme-ui-colors-highlight, inherit);
+
+        &.copied {
+          color: inherit;
+        }
+      }
+    }
+
+    &:hover,
+    &:focus,
+    &:active,
+    &:focus-within,
+    &:focus-visible {
+      outline: none;
+      color: inherit;
+      /* stylelint-disable-next-line unit-allowed-list */
+      box-shadow: 0 1px 0 0;
+
+      .icon {
+        visibility: visible;
+        cursor: pointer;
+
+        &.copied {
+          cursor: inherit;
+        }
+      }
+    }
+  }
+
+  &:hover,
+  &:focus,
+  &:active,
+  &:focus-within,
+  &:focus-visible {
+    outline: none;
+
+    .anchor {
+      color: inherit;
+      /* stylelint-disable-next-line unit-allowed-list */
+      box-shadow: 0 1px 0 0;
+
+      .icon {
+        visibility: visible;
+        cursor: pointer;
+
+        &.copied {
+          cursor: inherit;
+        }
+      }
+    }
+  }
+}

package/components/toc/toc.style.pcss.d.ts

@@ -0,0 +1,4 @@
+export const heading: string
+export const icon: string
+export const copied: string
+export const anchor: string

package/index.d.ts

@@ -1,2 +1,2 @@
 export * from './components';
-export { default as defaultTheme } from './theme';
+export { default as defaultTheme, ColorVariableNames, SizeVariableNames, FontVariableNames, variables as defaultThemeVariables, } from './theme';

package/index.js

@@ -1,2 +1,2 @@
 export * from './components';
-export { default as defaultTheme } from './theme';
+export { default as defaultTheme, ColorVariableNames, SizeVariableNames, FontVariableNames, variables as defaultThemeVariables, } from './theme';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enhanced-dom/slides",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "description": "Basic building blocks for html slides",
   "keywords": [],
   "repository": "https://github.com/enhanced-dom/slides.git",
@@ -8,27 +8,29 @@
   "author": "CD9B4A105290E17E0948E021DF4105107C88693C59C0B891CCC08366C51AEA990902A6A156AC87D88A2FC41422A5E1C3C4071F251F19441C4516000EC25F87DF",
   "main": "index.js",
   "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@enhanced-dom/fontawesome": "^0.0.3",
-    "@enhanced-dom/gatsby-waves": "^0.0.1",
-    "@enhanced-dom/icon": "^0.0.4",
-    "@enhanced-dom/react": "^0.0.6",
-    "@fontsource/montserrat": "^4.5.10",
-    "@theme-ui/typography": "^0.14.5",
-    "deepmerge": "^4.2.2",
+    "@emotion/react": "^11.11.3",
+    "@enhanced-dom/fontawesome": "^0.1.0",
+    "@enhanced-dom/gatsby-waves": "^0.1.0",
+    "@enhanced-dom/icon": "^0.1.0",
+    "@enhanced-dom/react": "^0.1.0",
+    "@fontsource/montserrat": "^5.0.16",
+    "@fontsource/noto-serif": "^5.0.18",
+    "@mdx-js/react": "^3.0.1",
+    "@theme-ui/typography": "^0.16.2",
+    "deepmerge": "^4.3.1",
     "lodash.pick": "^4.4.0",
-    "react-card-flip": "^1.1.1",
+    "react-card-flip": "^1.2.2",
     "typography-theme-wordpress-2016": "^0.16.19"
   },
   "devDependencies": {
-    "@enhanced-dom/lint": "^0.0.7",
-    "@enhanced-dom/webpack": "^0.0.7",
-    "@types/lodash.pick": "^4.4.6",
-    "@types/react": "^17.0.8",
-    "@types/react-dom": "^17.0.5"
+    "@enhanced-dom/lint": "^0.1.4",
+    "@enhanced-dom/webpack": "^0.1.0",
+    "@types/lodash.pick": "^4.4.9",
+    "@types/react": "^17.0.75",
+    "@types/react-dom": "^17.0.25"
   },
   "engines": {
-    "node": ">=14.17.0",
-    "npm": ">=8.0.0"
+    "node": ">=18",
+    "npm": ">=10"
   }
 }

package/theme.d.ts

@@ -1,47 +1,48 @@
 import '@fontsource/montserrat';
+import '@fontsource/noto-serif';
 export declare enum ColorVariableNames {
-    BACKGROUND = "background",
-    TEXT = "text",
-    DARK_BACKGROUND = "darkBackground",
-    LIGHT_TEXT = "lightText",
+    LIGHT_BACKGROUND = "light-background",
+    DARK_TEXT = "dark-text",
+    DARK_BACKGROUND = "dark-background",
+    LIGHT_TEXT = "light-text",
     HIGHLIGHT = "highlight",
-    MUTED = "muted",
-    LIGHTER_BLUE = "lighterBlue",
-    LIGHT_BLUE = "lightBlue",
-    HEADING = "heading"
+    CODE_KEYWORDS = "code-keywords"
 }
 export declare enum SizeVariableNames {
-    CONTENT = "content",
-    INNER_MARGIN = "innerMargin",
-    CENTRAL_GAP = "centralGap",
+    CONTENT_WIDTH = "content",
+    SECTION_SLEEVE = "sectionSleeve",
     TOP_MARGIN = "topMargin",
-    FULL_CONTENT = "fullContent",
-    FULL_CONTENT_WIDTH = "fullContentWidth"
+    SECTION_GAP = "sectionGap",
+    PARAGRAPH_GAP = "paragraphGap",
+    STEP_HEIGHT = "stepHeight",
+    ASIDE_WIDTH = "asideWidth"
 }
 export declare enum FontVariableNames {
     BODY = "body",
+    HEADING = "heading",
     MONOSPACE = "monospace"
 }
 export declare const variables: {
     colors: {
-        background: string;
-        text: string;
-        darkBackground: string;
-        lightText: string;
-        muted: string;
-        lighterBlue: string;
-        heading: string;
-        lightBlue: string;
+        "light-background": string;
+        "dark-text": string;
+        "dark-background": string;
+        "light-text": string;
+        highlight: string;
+        "code-keywords": string;
     };
     sizes: {
-        content: number;
-        innerMargin: number;
-        topMargin: number;
-        centralGap: number;
-        fullContentWidth: number;
+        content: string;
+        sectionSleeve: string;
+        topMargin: string;
+        sectionGap: string;
+        paragraphGap: string;
+        stepHeight: string;
+        asideWidth: string;
     };
     fonts: {
         body: string;
+        heading: string;
         monospace: string;
     };
 };

package/theme.js

@@ -3,202 +3,221 @@ import { toTheme } from '@theme-ui/typography';
 import typography from 'typography-theme-wordpress-2016';
 import merge from 'deepmerge';
 import '@fontsource/montserrat';
+import '@fontsource/noto-serif';
 import pick from 'lodash.pick';
-import { blogTheme } from '@enhanced-dom/gatsby-waves';
 const typographyTheme = toTheme(typography);
 export var ColorVariableNames;
 (function (ColorVariableNames) {
-    ColorVariableNames["BACKGROUND"] = "background";
-    ColorVariableNames["TEXT"] = "text";
-    ColorVariableNames["DARK_BACKGROUND"] = "darkBackground";
-    ColorVariableNames["LIGHT_TEXT"] = "lightText";
+    ColorVariableNames["LIGHT_BACKGROUND"] = "light-background";
+    ColorVariableNames["DARK_TEXT"] = "dark-text";
+    ColorVariableNames["DARK_BACKGROUND"] = "dark-background";
+    ColorVariableNames["LIGHT_TEXT"] = "light-text";
     ColorVariableNames["HIGHLIGHT"] = "highlight";
-    ColorVariableNames["MUTED"] = "muted";
-    ColorVariableNames["LIGHTER_BLUE"] = "lighterBlue";
-    ColorVariableNames["LIGHT_BLUE"] = "lightBlue";
-    ColorVariableNames["HEADING"] = "heading";
+    ColorVariableNames["CODE_KEYWORDS"] = "code-keywords";
 })(ColorVariableNames || (ColorVariableNames = {}));
 export var SizeVariableNames;
 (function (SizeVariableNames) {
-    SizeVariableNames["CONTENT"] = "content";
-    SizeVariableNames["INNER_MARGIN"] = "innerMargin";
-    SizeVariableNames["CENTRAL_GAP"] = "centralGap";
+    SizeVariableNames["CONTENT_WIDTH"] = "content";
+    SizeVariableNames["SECTION_SLEEVE"] = "sectionSleeve";
     SizeVariableNames["TOP_MARGIN"] = "topMargin";
-    SizeVariableNames["FULL_CONTENT"] = "fullContent";
-    SizeVariableNames["FULL_CONTENT_WIDTH"] = "fullContentWidth";
+    SizeVariableNames["SECTION_GAP"] = "sectionGap";
+    SizeVariableNames["PARAGRAPH_GAP"] = "paragraphGap";
+    SizeVariableNames["STEP_HEIGHT"] = "stepHeight";
+    SizeVariableNames["ASIDE_WIDTH"] = "asideWidth";
 })(SizeVariableNames || (SizeVariableNames = {}));
 export var FontVariableNames;
 (function (FontVariableNames) {
     FontVariableNames["BODY"] = "body";
+    FontVariableNames["HEADING"] = "heading";
     FontVariableNames["MONOSPACE"] = "monospace";
 })(FontVariableNames || (FontVariableNames = {}));
 export const variables = {
     colors: {
-        [ColorVariableNames.BACKGROUND]: '#f1f5f8',
-        [ColorVariableNames.TEXT]: '#3D4851',
+        [ColorVariableNames.LIGHT_BACKGROUND]: '#f1f5f8',
+        [ColorVariableNames.DARK_TEXT]: '#3D4851',
         [ColorVariableNames.DARK_BACKGROUND]: '#3D4851',
         [ColorVariableNames.LIGHT_TEXT]: 'white',
-        [ColorVariableNames.MUTED]: '#3D4851',
-        [ColorVariableNames.LIGHTER_BLUE]: '#ebfcf6',
-        [ColorVariableNames.HEADING]: '#e2001a',
-        [ColorVariableNames.LIGHT_BLUE]: '#aaf6d9',
+        [ColorVariableNames.HIGHLIGHT]: '#e2001a',
+        [ColorVariableNames.CODE_KEYWORDS]: '#aaf6d9',
     },
     sizes: {
-        [SizeVariableNames.CONTENT]: 420,
-        [SizeVariableNames.INNER_MARGIN]: 85,
-        [SizeVariableNames.TOP_MARGIN]: 256,
-        [SizeVariableNames.CENTRAL_GAP]: 85 * 2,
-        [SizeVariableNames.FULL_CONTENT_WIDTH]: 85 * 2 + 420,
+        [SizeVariableNames.CONTENT_WIDTH]: '420px',
+        [SizeVariableNames.SECTION_SLEEVE]: '85px',
+        [SizeVariableNames.TOP_MARGIN]: '256px',
+        [SizeVariableNames.SECTION_GAP]: '28px',
+        [SizeVariableNames.PARAGRAPH_GAP]: '20px',
+        [SizeVariableNames.STEP_HEIGHT]: '400px',
+        [SizeVariableNames.ASIDE_WIDTH]: '40vw',
     },
     fonts: {
         [FontVariableNames.BODY]: 'Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif',
-        [FontVariableNames.MONOSPACE]: `Consolas, Menlo, Monaco, source-code-pro, Courier New, monospace`,
+        [FontVariableNames.HEADING]: 'Noto Serif, serif',
+        [FontVariableNames.MONOSPACE]: 'Consolas, Menlo, Monaco, source-code-pro, Courier New, monospace',
     },
 };
 const theme = merge.all([
-    blogTheme,
     typographyTheme,
     {
         colors: variables.colors,
+        breakpoints: ['1000px'],
         space: {
             ...typographyTheme.space,
-            ...pick(variables.sizes, [
-                SizeVariableNames.INNER_MARGIN,
-                SizeVariableNames.TOP_MARGIN,
-                SizeVariableNames.FULL_CONTENT_WIDTH,
-                SizeVariableNames.CENTRAL_GAP,
-            ]),
+            ...variables.sizes,
         },
-        sizes: pick(variables.sizes, [SizeVariableNames.CONTENT]),
+        sizes: pick(variables.sizes, [
+            SizeVariableNames.CONTENT_WIDTH,
+            SizeVariableNames.ASIDE_WIDTH,
+            SizeVariableNames.SECTION_SLEEVE,
+            SizeVariableNames.TOP_MARGIN,
+        ]),
         fonts: variables.fonts,
         styles: {
-            root: {
-                fontFamily: FontVariableNames.BODY,
-            },
-            a: {
-                color: 'inherit',
-                textDecoration: 'none',
-                borderBottom: '1px solid',
-                borderColor: ColorVariableNames.MUTED,
-            },
-            li: {
-                marginBottom: '4px',
-                code: {
-                    fontSize: `inherit`,
+            global: {
+                body: {
+                    fontFamily: FontVariableNames.BODY,
                 },
-            },
-            pre: {
-                variant: `prism`,
-                fontFamily: FontVariableNames.MONOSPACE,
-                tabSize: 2,
-                hyphens: `none`,
-                overflow: `auto`,
-                borderRadius: 10,
-                p: 0,
-                pl: 2,
-                color: ColorVariableNames.TEXT,
-                backgroundColor: ColorVariableNames.BACKGROUND,
-                marginBottom: '28px',
-                whiteSpace: 'pre-wrap',
-            },
-            code: {
-                fontFamily: FontVariableNames.MONOSPACE,
-                fontSize: `inherit`,
-            },
-            h1: {
-                fontStyle: 'italic',
-                color: ColorVariableNames.HEADING,
-            },
-            h2: {
-                marginTop: '60px',
-                fontStyle: 'italic',
-            },
-            h3: {
-                marginTop: '4px',
-            },
-            inlineCode: {
-                borderRadius: `0.3em`,
-                paddingTop: `0.15em`,
-                paddingBottom: `0.05em`,
-                paddingX: `0.2em`,
-            },
-            hr: {
-                borderColor: ColorVariableNames.MUTED,
-            },
-            p: {
-                marginBottom: '20px',
-                marginTop: '20px',
-                code: {
-                    fontSize: `inherit`,
-                },
-            },
-            blockquote: {
-                color: `inherit`,
-                borderLeftColor: `inherit`,
-                opacity: 0.8,
-                '&.translation': {
-                    fontSize: `1em`,
+                img: {
+                    objectFit: 'contain',
+                    margin: 0,
+                    maxWidth: '100%',
+                    maxHeight: '100%',
                 },
             },
             waves: {
                 default: {
                     Wave: {
-                        width: ['100%', variables.sizes[SizeVariableNames.CONTENT] * 2 + variables.sizes[SizeVariableNames.CENTRAL_GAP]],
-                        // marginTop: "40px",
-                        marginLeft: [0, -(variables.sizes[SizeVariableNames.CONTENT] + variables.sizes[SizeVariableNames.CENTRAL_GAP])],
-                        marginBottom: '28px',
+                        width: '100vw',
+                        marginLeft: [
+                            0,
+                            `calc(-${variables.sizes[SizeVariableNames.ASIDE_WIDTH]} - ${variables.sizes[SizeVariableNames.SECTION_SLEEVE]})`,
+                        ],
+                        marginBottom: SizeVariableNames.SECTION_GAP,
                         position: 'relative',
                         display: ['block', 'flex'],
                     },
                     ScrollerContainer: {
-                        paddingTop: ['80px', 0],
-                        width: ['auto', SizeVariableNames.CONTENT],
-                        marginLeft: [0, SizeVariableNames.CENTRAL_GAP],
+                        paddingTop: [SizeVariableNames.SECTION_SLEEVE, 0],
+                        paddingRight: SizeVariableNames.SECTION_SLEEVE,
+                        paddingBottom: [SizeVariableNames.SECTION_SLEEVE, 0],
+                        paddingLeft: [SizeVariableNames.SECTION_SLEEVE, 0],
+                        width: '100%',
+                        marginLeft: [0, SizeVariableNames.SECTION_SLEEVE],
                     },
                     ScrollerStep: {
                         position: 'relative',
                         padding: 0,
-                        minHeight: '400px',
+                        minHeight: SizeVariableNames.STEP_HEIGHT,
                         display: 'flex',
                         alignItems: 'center',
                         borderLeft: 0,
                     },
                     ScrollerProgress: {
-                        backgroundColor: ColorVariableNames.MUTED,
+                        backgroundColor: ColorVariableNames.DARK_TEXT,
                         borderRadius: '3px',
                         position: 'absolute',
                         left: '-24px',
                     },
                     StickerContainer: {
-                        width: ['100vw', SizeVariableNames.CONTENT],
-                        marginLeft: ['calc(50% - 50vw)', 0],
-                        position: ['sticky', 'static'],
-                        top: [0, 'auto'],
+                        minWidth: ['100vw', SizeVariableNames.ASIDE_WIDTH],
+                        maxWidth: ['100vw', SizeVariableNames.ASIDE_WIDTH],
+                        position: 'sticky',
+                        top: ['0', '10vh'],
                         zIndex: [1, 'auto'],
-                        height: ['50vh', 'auto'],
-                        paddingRight: [0, SizeVariableNames.INNER_MARGIN],
+                        height: ['30vh', 'auto'],
+                        maxHeight: ['50vh', '80vh'],
+                        display: 'flex',
+                        flexDirection: ['row', 'column'],
+                        justifyContent: 'space-around',
+                        alignItems: 'center',
                         backgroundColor: ColorVariableNames.DARK_BACKGROUND,
                         color: ColorVariableNames.LIGHT_TEXT,
-                    },
-                    Sticker: {
-                        position: ['static', 'sticky'],
-                        width: '100%',
-                        height: ['100%', '80vh'],
-                        maxHeight: ['100%', '80vh'],
-                        top: ['auto', '2rem'],
-                        marginLeft: [0, variables.sizes.innerMargin],
+                        paddingRight: SizeVariableNames.SECTION_SLEEVE,
+                        paddingLeft: SizeVariableNames.SECTION_SLEEVE,
+                        a: {
+                            border: 'none',
+                        },
                     },
                     StickerStep: {
-                        position: 'absolute',
+                        position: 'relative',
                         height: '100%',
                         width: '100%',
                         display: 'flex',
                         justifyContent: 'center',
                     },
                     // this is used to select the active scroller step
+                    // 0.8 the step that is at 80% the screen height
                     // 0.5 selects the step that is at half the screen height
-                    // 0.7 the step that is at 70% the screen height
-                    focus: [0.7, 0.5],
+                    focus: [0.8, 0.5],
+                },
+            },
+            shell: {
+                default: {
+                    Root: {
+                        display: 'flex',
+                        width: '100vw',
+                        h1: {
+                            marginLeft: [SizeVariableNames.SECTION_SLEEVE, 0],
+                            color: ColorVariableNames.HIGHLIGHT,
+                        },
+                        h2: {
+                            marginLeft: [SizeVariableNames.SECTION_SLEEVE, 0],
+                            marginTop: '60px',
+                        },
+                        h3: {
+                            marginLeft: [SizeVariableNames.SECTION_SLEEVE, 0],
+                            marginTop: '4px',
+                        },
+                        hr: {
+                            borderColor: ColorVariableNames.DARK_TEXT,
+                        },
+                        a: {
+                            color: 'inherit',
+                            textDecoration: 'none',
+                            borderBottom: '1px solid',
+                            borderColor: ColorVariableNames.DARK_TEXT,
+                            '&:visited': {
+                                color: 'inherit',
+                            },
+                            '&:hover': {
+                                color: ColorVariableNames.HIGHLIGHT,
+                            },
+                        },
+                        aside: {
+                            bg: ColorVariableNames.DARK_BACKGROUND,
+                            color: ColorVariableNames.LIGHT_TEXT,
+                            minWidth: [0, SizeVariableNames.ASIDE_WIDTH],
+                            maxWidth: ['100vw', SizeVariableNames.ASIDE_WIDTH],
+                            minHeight: '100vh',
+                        },
+                        main: {
+                            py: [5, SizeVariableNames.TOP_MARGIN],
+                            pl: [0, SizeVariableNames.SECTION_SLEEVE],
+                            bg: ColorVariableNames.LIGHT_BACKGROUND,
+                            color: ColorVariableNames.DARK_TEXT,
+                            width: ['100vw', '100%'],
+                            mx: ['auto', 0],
+                        },
+                        header: {
+                            position: 'relative',
+                            paddingX: [SizeVariableNames.SECTION_SLEEVE, 0],
+                            display: 'flex',
+                            flexDirection: ['row-reverse', 'column'],
+                            alignItems: ['center', 'flex-start'],
+                            justifyContent: ['space-between', 'start'],
+                        },
+                    },
+                    Author: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        paddingTop: [1, undefined],
+                    },
+                    Title: {
+                        position: ['relative', 'static'],
+                        width: '100%',
+                        height: ['auto', '100%'],
+                        right: ['auto', `calc(100vw - ${variables.sizes[SizeVariableNames.CONTENT_WIDTH]}})`],
+                        color: ['text', ColorVariableNames.LIGHT_TEXT],
+                    },
                 },
             },
             CodeSurfer: {
@@ -206,29 +225,17 @@ const theme = merge.all([
                     color: ColorVariableNames.LIGHT_TEXT,
                     backgroundColor: ColorVariableNames.DARK_BACKGROUND,
                 },
-                code: {
-                    color: ColorVariableNames.LIGHT_TEXT,
-                    backgroundColor: ColorVariableNames.DARK_BACKGROUND,
-                },
                 tokens: {
+                    'builtin changed keyword punctuation operator tag deleted string attr-value char number inserted': {
+                        color: ColorVariableNames.CODE_KEYWORDS,
+                    },
                     'comment cdata doctype': {
                         fontStyle: 'italic',
                     },
-                    'builtin changed keyword punctuation operator tag deleted string attr-value char number inserted': {
-                        color: ColorVariableNames.LIGHT_BLUE,
-                    },
                 },
             },
         },
     },
 ]);
-theme.breakpoints = ['1000px'];
-theme.prism = {
-    '.builtin, .changed, .keyword, .punctuation, .operator, .tag, .deleted, .string, .attr-value, .char, .number, .inserted': {
-        color: '#0f8f5e',
-    },
-    '.comment, .cdata, .doctype': {
-        fontStyle: 'italic',
-    },
-};
+theme.mergeWith = (otherTheme) => merge.all([theme, otherTheme]);
 export default theme;

package/components/shell/scroll-top/icon.component.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import { IconWebComponent, IIconConfig } from '@enhanced-dom/icon';
-import { IconDefinition } from '@fortawesome/fontawesome-common-types';
-declare type IconConfigType = IIconConfig<IconDefinition>;
-declare interface IconAttributes extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<IconWebComponent>, IconWebComponent>, 'class' | 'style'> {
-    className?: string;
-    style?: React.CSSProperties;
-    config: IconConfigType;
-}
-export declare const Icon: import("react").ComponentType<IconAttributes> & {
-    renderer: import("@enhanced-dom/icon").MultiIconRenderer;
-} & Record<string, AnalyserNode>;
-export {};

package/components/shell/scroll-top/scroll-top.component.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ScrollTop: React.FunctionComponent;

package/components/shell/scroll-top/scroll-top.component.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-import React from 'react';
-import ReactCardFlip from 'react-card-flip';
-import { faArrowAltCircleUp } from '@fortawesome/free-regular-svg-icons';
-import * as styles from './scroll-top.style.pcss';
-import { Icon } from './icon.component';
-const getBodyScroll = () => {
-    return document.body.scrollTop !== 0 || document.documentElement.scrollTop !== 0;
-};
-const scrollToTop = () => {
-    if (getBodyScroll()) {
-        window.scrollBy(0, -50);
-        requestAnimationFrame(scrollToTop);
-    }
-};
-const scrollOnKey = (e) => {
-    if (e.altKey || e.shiftKey || e.ctrlKey || e.key !== 'Enter') {
-        return;
-    }
-    e.stopPropagation();
-    e.preventDefault();
-    scrollToTop();
-};
-export const ScrollTop = ({ children }) => {
-    const [isFlipped, setFlipped] = React.useState(false);
-    const showButton = React.useCallback(() => {
-        if (getBodyScroll()) {
-            setFlipped(true);
-        }
-    }, [setFlipped]);
-    const showFront = React.useCallback(() => {
-        setFlipped(false);
-    }, [setFlipped]);
-    const buttonContents = children ? (_jsxs(ReactCardFlip, Object.assign({ isFlipped: isFlipped, flipDirection: "horizontal" }, { children: [_jsx("div", { children: children }, void 0),
-            _jsx("div", Object.assign({ className: styles.brandingBack }, { children: _jsx(Icon, { config: { ...faArrowAltCircleUp, namespace: 'fa5' } }, void 0) }), void 0)] }), void 0)) : (_jsx("div", Object.assign({ className: styles.brandingBack }, { children: _jsx(Icon, { config: { ...faArrowAltCircleUp, namespace: 'fa5' } }, void 0) }), void 0));
-    return (_jsx("div", Object.assign({ className: styles.branding, tabIndex: 0, role: "button", onClick: scrollToTop, onFocus: showButton, onBlur: showFront, onMouseEnter: showButton, onMouseLeave: showFront, onKeyPress: scrollOnKey }, { children: buttonContents }), void 0));
-};

package/components/shell/scroll-top/scroll-top.style.pcss

@@ -1,25 +0,0 @@
-.branding {
-  width: 3rem;
-  height: 3rem;
-  position: fixed;
-  bottom: 2.5rem;
-  right: 2.5rem;
-  z-index: 1;
-  outline-color: #e2001a;
-  color: #e2001a;
-
-  > div {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-  }
-
-  &-back {
-    background-color: transparent;
-    font-size: 2rem;
-    color: #e2001a;
-    cursor: pointer;
-  }
-}

package/components/shell/scroll-top/scroll-top.style.pcss.d.ts

@@ -1,2 +0,0 @@
-export const branding: string;
-export const brandingBack: string;

package/components/toc.component.d.ts

@@ -1,14 +0,0 @@
-interface TocItemProps {
-    heading: string;
-    to?: string;
-    explanation?: string;
-}
-export declare const Toc: {
-    ({ headings }: {
-        headings: TocItemProps[];
-    }): import("theme-ui/jsx-runtime").JSX.Element;
-    Heading: ({ heading }: {
-        heading: string;
-    }) => import("theme-ui/jsx-runtime").JSX.Element;
-};
-export {};

package/components/toc.component.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-const Heading = ({ heading }) => (_jsxs("h2", { children: [heading, _jsx("a", Object.assign({ href: `#${heading.toLowerCase().replace(/\s/, '-')}`, style: { display: 'none' }, id: heading.toLowerCase().replace(/\s/, '-') }, { children: '' }), void 0)] }, void 0));
-const TocItem = ({ heading, to, explanation }) => {
-    const anchor = to !== null && to !== void 0 ? to : heading;
-    return (_jsxs("li", { children: [_jsx("a", Object.assign({ href: `#${anchor.toLowerCase().replace(/\s/, '-')}` }, { children: _jsx("em", { children: heading }, void 0) }), void 0), explanation ? ': ' : '', explanation] }, void 0));
-};
-export const Toc = ({ headings }) => (_jsx("ul", { children: headings.map((h, idx) => (_jsx(TocItem, Object.assign({}, h), idx))) }, void 0));
-Toc.Heading = Heading;