@remotion/promo-pages 4.0.361 → 4.0.363

package/dist/components/homepage/VideoApps.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { BlueButton } from './layout/Button';
+import { useColorMode } from './layout/use-color-mode';
+import { Spacer } from './Spacer';
+import { YouAreHere } from './YouAreHere';
+const row = {
+    display: 'flex',
+    flexDirection: 'row',
+};
+const flex = {
+    flex: 1,
+};
+const list = {
+    listStyleType: 'none',
+    textAlign: 'center',
+    paddingLeft: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+};
+const hr = {
+    width: 20,
+    textAlign: 'center',
+    borderTop: 0,
+    marginTop: 10,
+    marginBottom: 10,
+};
+const docsButton = {
+    textDecoration: 'none',
+};
+const StepTitle = ({ children }) => {
+    return (_jsx("div", { className: "text-center text-xl font-semibold fontbrand mt-2", children: children }));
+};
+const Subtitle = ({ children }) => {
+    return (_jsx("div", { className: "text-center text-base fontbrand text-[var(--subtitle)]", children: children }));
+};
+const Pane = ({ children }) => {
+    return (_jsx("div", { className: "border-effect bg-pane flex-1 p-3 rounded-lg min-h-[500px] flex flex-col text-center", children: children }));
+};
+export const VideoApps = ({ active }) => {
+    const { colorMode } = useColorMode();
+    const [src, setSrc] = useState('/img/player-example.png');
+    const [src2, setSrc2] = useState('/img/player-example-dark.png');
+    useEffect(() => {
+        if (colorMode === 'dark') {
+            setSrc('/img/player-example-dark.png');
+        }
+        else {
+            setSrc('/img/player-example.png');
+        }
+    }, [colorMode]);
+    useEffect(() => {
+        setSrc2(colorMode === 'dark' ? '/img/cluster-dark.png' : '/img/cluster.png');
+    }, [colorMode]);
+    return (_jsx("div", { className: "w-full", children: _jsxs("div", { className: 'flex flex-col lg:flex-row gap-2', children: [_jsxs(Pane, { children: [active === 'remotion' ? _jsx(YouAreHere, {}) : null, _jsx(StepTitle, { children: "Remotion" }), _jsx(Subtitle, { children: "Make videos programmatically" }), _jsx("br", {}), _jsx("div", { style: {
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                flex: 1,
+                            }, children: _jsx("img", { className: "max-w-[300px]", src: "/img/writeinreact.png" }) }), _jsxs("ul", { style: list, children: [_jsx("li", { children: "Use the Web to create graphics" }), _jsx("hr", { style: hr }), _jsx("li", { children: "Consume user input and APIs" }), _jsx("hr", { style: hr }), _jsx("li", { children: "Render real MP4 videos" })] }), _jsxs("div", { style: row, children: [active === 'remotion' ? null : (_jsxs(_Fragment, { children: [_jsx("div", { style: flex, children: _jsx("a", { style: docsButton, href: "/", children: _jsx(BlueButton, { loading: false, size: "sm", children: "Learn more" }) }) }), _jsx(Spacer, {}), _jsx(Spacer, {})] })), _jsx("div", { style: flex, children: _jsx("a", { style: docsButton, href: "/docs", children: _jsx(BlueButton, { className: "w-full", loading: false, size: "sm", children: "Read docs" }) }) })] })] }), _jsxs(Pane, { children: [active === 'player' ? _jsx(YouAreHere, {}) : null, _jsx(StepTitle, { children: "Remotion Player" }), _jsx(Subtitle, { children: "Embeddable interactive videos" }), _jsx("br", {}), _jsx("div", { style: {
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                flex: 1,
+                            }, children: _jsx("img", { className: "max-w-[300px]", src: src }) }), _jsxs("ul", { style: list, children: [_jsx("li", { children: "Preview videos in the browser" }), _jsx("hr", { style: hr }), _jsx("li", { children: "React to user input" }), _jsx("hr", { style: hr }), _jsx("li", { children: "Customize look and behavior" })] }), _jsxs("div", { style: row, children: [active === 'player' ? null : (_jsxs(_Fragment, { children: [_jsx("div", { style: flex, children: _jsx("a", { style: docsButton, href: "/player", children: _jsx(BlueButton, { className: "w-full", loading: false, size: "sm", children: "Learn more" }) }) }), _jsx(Spacer, {}), _jsx(Spacer, {})] })), _jsx("div", { style: flex, children: _jsx("a", { style: docsButton, href: "/docs/player", children: _jsx(BlueButton, { className: "w-full", loading: false, size: "sm", children: "Read docs" }) }) })] })] }), _jsxs(Pane, { children: [active === 'lambda' ? _jsx(YouAreHere, {}) : null, _jsx(StepTitle, { children: "Remotion Lambda" }), _jsx(Subtitle, { children: "Render at scale" }), _jsx("br", {}), _jsx("div", { style: {
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                flex: 1,
+                            }, children: _jsx("img", { className: "max-w-[300px]", src: src2 }) }), _jsx("div", { className: "flex-1" }), _jsxs("ul", { style: list, children: [_jsx("li", { children: "Render videos in the cloud" }), _jsx("hr", { style: hr }), _jsx("li", { children: "Scale according to your volume" }), _jsx("hr", { style: hr }), _jsx("li", { children: "Fast because distributed" })] }), _jsxs("div", { style: row, children: [active === 'lambda' ? null : (_jsxs(_Fragment, { children: [_jsx("div", { style: flex, children: _jsx("a", { style: docsButton, href: "/lambda", children: _jsx(BlueButton, { className: "w-full", loading: false, size: "sm", children: "Learn more" }) }) }), _jsx(Spacer, {}), _jsx(Spacer, {})] })), _jsx("div", { style: flex, children: _jsx("a", { style: docsButton, href: "/docs/lambda", children: _jsx(BlueButton, { className: "w-full", loading: false, size: "sm", children: "Read docs" }) }) })] })] })] }) }));
+};

package/dist/components/homepage/VideoAppsShowcase.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const VideoAppsShowcase: React.FC;
+export default VideoAppsShowcase;

package/dist/components/homepage/VideoAppsShowcase.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { IsMutedIcon, NotMutedIcon, PausedIcon, PlayingIcon } from './Demo/icons';
+import { MuxVideo } from './MuxVideo';
+import { SectionTitle } from './VideoAppsTitle';
+const tabs = [
+    'Music visualization',
+    'Captions',
+    'Screencast',
+    'Year in review',
+];
+const videoApps = [
+    {
+        title: 'Banger.Show',
+        description: 'The all-in-one 3D visual creation tool for ambitious artists. Seamlessly craft visuals that match your sound and propel your brand forward.',
+        link: 'https://banger.show?ref=remotion',
+        videoWidth: 1080,
+        videoHeight: 1080,
+        muxId: 'Kg02XHfkR6x8400BtO4Ica54XlSPimmmTRpqDHHUaeACk',
+        buttonText: 'Banger.Show website',
+    },
+    {
+        title: 'Submagic',
+        description: 'A video editor for creating short-form content fast. Designed for creators, teams and agencies, it accelerates video editing with AI-powered features such as descriptions, zooms, sound effects and music.',
+        additionalInfo: '',
+        link: 'https://www.submagic.co/?ref=remotion',
+        videoWidth: 540,
+        videoHeight: 1080,
+        muxId: 'pxqGEjlBBntnXrEe4v00pYUBw3FPgUPKumfhSym00Vs004',
+        buttonText: 'Submagic website',
+    },
+    {
+        title: 'Remotion Recorder',
+        description: 'The Remotion Recorder is a video production tool built entirely in JavaScript. Create high-quality videos that feel native on each platform while only editing them once.',
+        link: 'https://www.remotion.dev/recorder',
+        videoWidth: 1080,
+        videoHeight: 1080,
+        muxId: 'pHlwqDZFUH00Aubo9M001ty3gZ6YW8z689XTd9R479ayE',
+        buttonText: 'More infos',
+    },
+    {
+        title: 'GitHub Unwrapped',
+        description: 'Your coding year in review. Get a personalized video of your GitHub activity.',
+        additionalInfo: 'Uncover your go-to language, peak productivity hours, and track your GitHub impact – all in one video.',
+        link: 'https://githubunwrapped.com/',
+        videoWidth: 1080,
+        videoHeight: 1080,
+        muxId: 'OwQFvqomOR00q6yj5SWwaA7DBg01NaCPKcOvczoZqCty00',
+        buttonText: 'GitHub Unwrapped website',
+    },
+];
+const icon = {
+    height: 16,
+    marginLeft: 10,
+};
+const VideoAppsShowcase = () => {
+    const [activeTab, setActiveTab] = useState(0);
+    const [isMuted, setIsMuted] = useState(true);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const videoRef = useRef(null);
+    const containerRef = useRef(null);
+    // Remove the intersection observer autoplay logic
+    useEffect(() => {
+        const video = videoRef.current;
+        if (video) {
+            video.pause();
+            setIsPlaying(false);
+            video.currentTime = 0;
+            video.load();
+        }
+    }, [activeTab]);
+    const handlePlayPause = () => {
+        if (videoRef.current) {
+            if (videoRef.current.paused) {
+                const playPromise = videoRef.current.play();
+                if (playPromise !== undefined) {
+                    playPromise
+                        .then(() => {
+                        setIsPlaying(true);
+                    })
+                        .catch((error) => {
+                        // eslint-disable-next-line no-console
+                        console.error('Playback error:', error);
+                        setIsPlaying(false);
+                    });
+                }
+            }
+            else {
+                videoRef.current.pause();
+                setIsPlaying(false);
+            }
+        }
+    };
+    const handleMuteToggle = () => {
+        if (videoRef.current) {
+            const newMutedState = !videoRef.current.muted;
+            videoRef.current.muted = newMutedState;
+            setIsMuted(newMutedState);
+        }
+    };
+    return (_jsxs("div", { ref: containerRef, children: [_jsx(SectionTitle, { children: "Use Cases" }), _jsx("div", { className: 'grid justify-center grid-flow-col grid-rows-1 gap-2.5 justify-self-center mb-4 w-[90vw] md:w-auto -mt-4', children: tabs.map((tab, index) => (_jsx("button", { type: "button", "data-active": index === activeTab, className: `bg-transparent border-none m-0 p-0 lg:mx-3 my-4 cursor-pointer text-base fontbrand font-bold transition-colors text-muted data-[active=true]:text-brand`, onClick: () => setActiveTab(index), children: tab }, tab))) }), _jsx("div", { className: 'card flex p-0 overflow-hidden', children: _jsxs("div", { className: 'flex-1 flex flex-col lg:flex-row justify-center', children: [_jsxs("div", { className: 'w-full max-w-[500px] aspect-square relative overflow-hidden bg-[#eee] cursor-pointer', onClick: handlePlayPause, children: [_jsx(MuxVideo, { ref: videoRef, muxId: videoApps[activeTab].muxId, className: 'absolute left-0 top-0 w-full h-full object-contain rounded-sm rounded-tr-none rounded-br-none', loop: true, playsInline: true, muted: isMuted }), _jsx("button", { type: "button", className: 'absolute bottom-2.5 left-2.5 bg-white text-black rounded-full w-8 h-8 flex justify-center items-center text-base cursor-pointer transition-colors border-2 border-black border-solid', onClick: (e) => {
+                                        e.stopPropagation();
+                                        handlePlayPause();
+                                    }, children: isPlaying ? (_jsx(PlayingIcon, { style: {
+                                            width: 12,
+                                            height: 20,
+                                            marginLeft: '2px',
+                                            marginTop: '1px',
+                                        } })) : (_jsx(PausedIcon, { style: {
+                                            width: 14,
+                                            height: 16,
+                                            marginLeft: '2px',
+                                            marginTop: '0.5px',
+                                        } })) }), _jsx("button", { type: "button", className: 'absolute bottom-2.5 right-2.5 bg-white text-black rounded-full w-8 h-8 flex justify-center items-center text-base cursor-pointer transition-colors border-2 border-black border-solid', onClick: (e) => {
+                                        e.stopPropagation();
+                                        handleMuteToggle();
+                                    }, children: isMuted ? (_jsx(IsMutedIcon, { style: {
+                                            width: 16,
+                                            height: 16,
+                                            marginTop: '1px',
+                                        } })) : (_jsx(NotMutedIcon, { style: {
+                                            width: 16,
+                                            height: 16,
+                                            marginTop: '1px',
+                                        } })) })] }), _jsxs("div", { className: 'p-6 flex-1 flex flex-col h-full', children: [_jsx("div", { className: "text-4xl font-bold fontbrand mt-0", children: videoApps[activeTab].title }), _jsx("div", { className: "text-muted mt-4 text-base fontbrand", children: videoApps[activeTab].description }), videoApps[activeTab].additionalInfo ? (_jsx("div", { className: "text-muted mt-4 text-base fontbrand", children: videoApps[activeTab].additionalInfo })) : null, _jsx("div", { className: "h-5" }), _jsxs("a", { className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center", href: videoApps[activeTab].link, children: [videoApps[activeTab].buttonText, _jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("path", { fill: "currentColor", d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z" }) })] })] })] }) }), _jsx("div", { style: {
+                    marginTop: '1rem',
+                    justifyContent: 'center',
+                    display: 'flex',
+                }, children: _jsxs("div", { style: {
+                        fontFamily: 'GTPlanar',
+                    }, children: ["For more examples see our", ' ', _jsx("a", { href: "/showcase", className: "bluelink", children: "Showcase page" }), "."] }) })] }));
+};
+export default VideoAppsShowcase;

package/dist/components/homepage/VideoAppsTitle.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SectionTitle: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/components/homepage/VideoAppsTitle.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SectionTitle = ({ children, }) => {
+    return (_jsx("div", { className: 'text-center', children: _jsx("h2", { className: 'fontbrand text-4xl', children: children }) }));
+};

package/dist/components/homepage/VideoPlayerWithControls.d.ts

@@ -0,0 +1,20 @@
+import type Plyr from 'plyr';
+import 'plyr/dist/plyr.css';
+import './video-player.css';
+export interface HTMLVideoElementWithPlyr extends HTMLVideoElement {
+    plyr: Plyr;
+}
+type Props = {
+    readonly playbackId: string;
+    readonly poster: string;
+    readonly currentTime?: number;
+    readonly onLoaded: () => void;
+    readonly onError: (error: ErrorEvent) => void;
+    readonly onSize: (dim: {
+        width: number;
+        height: number;
+    }) => void;
+    readonly autoPlay?: boolean;
+};
+export declare const VideoPlayerWithControls: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLVideoElementWithPlyr>>;
+export {};

package/dist/components/homepage/VideoPlayerWithControls.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable no-console */
+/* eslint-disable react/require-default-props */
+import Hls from 'hls.js';
+// eslint-disable-next-line no-restricted-imports
+import 'plyr/dist/plyr.css';
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import './video-player.css';
+const useCombinedRefs = function (...refs) {
+    const targetRef = useRef(null);
+    useEffect(() => {
+        refs.forEach((ref) => {
+            if (!ref)
+                return;
+            if (typeof ref === 'function') {
+                ref(targetRef.current);
+            }
+            else {
+                ref.current = targetRef.current;
+            }
+        });
+    }, [refs]);
+    return targetRef;
+};
+export const VideoPlayerWithControls = forwardRef(({ playbackId, poster, currentTime, onLoaded, onError, onSize, autoPlay }, ref) => {
+    const videoRef = useRef(null);
+    const metaRef = useCombinedRefs(ref, videoRef);
+    const playerRef = useRef(null);
+    const [playerInitTime] = useState(Date.now());
+    const videoError = useCallback((event) => onError(event), [onError]);
+    const onImageLoad = useCallback((event) => {
+        const [w, h] = [event.target.width, event.target.height];
+        if (w && h) {
+            onSize({ width: w, height: h });
+            onLoaded();
+        }
+        else {
+            onLoaded();
+            console.error('Error getting img dimensions', event);
+        }
+    }, [onLoaded, onSize]);
+    /*
+     * See comment above -- we're loading the poster image just so we can grab the dimensions
+     * which determines styles for the player
+     */
+    useEffect(() => {
+        const img = new Image();
+        img.onload = (evt) => onImageLoad(evt);
+        img.src = poster;
+    }, [onImageLoad, poster]);
+    useEffect(() => {
+        const video = videoRef.current;
+        const src = `https://stream.mux.com/${playbackId}.m3u8`;
+        let hls;
+        hls = null;
+        if (video) {
+            video.addEventListener('error', videoError);
+            const Plyr = require('plyr');
+            playerRef.current = new Plyr(video, {
+                previewThumbnails: {
+                    enabled: true,
+                    src: `https://image.mux.com/${playbackId}/storyboard.vtt`,
+                },
+                storage: { enabled: false },
+                fullscreen: {
+                    iosNative: true,
+                },
+                captions: { active: true, language: 'auto', update: true },
+            });
+            if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                // This will run in safari, where HLS is supported natively
+                video.src = src;
+            }
+            else if (Hls.isSupported()) {
+                // This will run in all other modern browsers
+                hls = new Hls();
+                hls.loadSource(src);
+                hls.attachMedia(video);
+                hls.on(Hls.Events.ERROR, (_event, data) => {
+                    if (data.fatal) {
+                        videoError(new ErrorEvent('HLS.js fatal error'));
+                    }
+                });
+            }
+            else {
+                console.error('This is an old browser that does not support MSE https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API');
+            }
+        }
+        return () => {
+            if (video) {
+                video.removeEventListener('error', videoError);
+            }
+            if (hls) {
+                hls.destroy();
+            }
+        };
+    }, [playbackId, playerInitTime, videoError, videoRef]);
+    useEffect(() => {
+        const video = videoRef.current;
+        if (currentTime && video) {
+            video.currentTime = currentTime;
+        }
+    }, [currentTime]);
+    return (_jsx("div", { className: "video-container", children: _jsx("video", { ref: metaRef, autoPlay: autoPlay, poster: poster, controls: true, playsInline: true }) }));
+});

package/dist/components/homepage/WriteInReact.d.ts

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

package/dist/components/homepage/WriteInReact.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChooseTemplate } from './ChooseTemplate';
+import { GetStarted } from './GetStartedStrip';
+export const WriteInReact = () => {
+    return (_jsxs("div", { children: [_jsx("h1", { className: "text-5xl lg:text-[5em] text-center fontbrand font-black leading-none ", style: {
+                    textShadow: '0 5px 30px var(--background)',
+                }, children: "Make videos programmatically." }), _jsxs("p", { style: {
+                    textShadow: '0 5px 30px var(--background)',
+                }, className: "font-medium text-center text-lg", children: ["Create real MP4 videos with React. ", _jsx("br", {}), "Parametrize content, render server-side and build applications."] }), _jsx("br", {}), _jsx("div", { children: _jsx(GetStarted, {}) }), _jsx("br", {}), _jsx("br", {}), _jsx(ChooseTemplate, {})] }));
+};

package/dist/components/homepage/YouAreHere.d.ts

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

package/dist/components/homepage/YouAreHere.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const container = {
+    width: '100%',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    position: 'relative',
+};
+const label = {
+    backgroundColor: 'var(--ifm-color-primary)',
+    fontWeight: 'bold',
+    color: 'white',
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 4,
+    paddingBottom: 4,
+    borderRadius: 6,
+    fontSize: 13,
+    position: 'absolute',
+    marginTop: -25,
+};
+export const YouAreHere = () => {
+    return (_jsx("div", { style: container, children: _jsx("div", { style: label, children: "YOU ARE HERE" }) }));
+};

package/dist/components/homepage/layout/Button.d.ts

@@ -0,0 +1,19 @@
+import type { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import React from 'react';
+type ExtraProps = {
+    readonly size: Size;
+    readonly background: string;
+    readonly hoverColor?: string;
+    readonly color: string;
+    readonly loading: boolean;
+};
+type Size = 'sm' | 'bg';
+type Props = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & ExtraProps;
+type MandatoryProps = Omit<ExtraProps, 'background' | 'color' | 'hoverColor'>;
+type PrestyledProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & MandatoryProps;
+export declare const Button: React.FC<Props>;
+export declare const BlueButton: React.FC<PrestyledProps>;
+export declare const PlainButton: React.FC<PrestyledProps>;
+export declare const RedButton: React.FC<PrestyledProps>;
+export declare const ClearButton: React.FC<PrestyledProps>;
+export {};

package/dist/components/homepage/layout/Button.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { opacify } from 'polished';
+import { cn } from '../../../cn';
+import { RED, UNDERLAY_RED } from './colors';
+export const Button = (props) => {
+    var _a, _b, _c;
+    const { children, loading, hoverColor, color, size, className, ...other } = props;
+    const actualDisabled = other.disabled || loading;
+    return (_jsx("button", { type: "button", className: cn('text-base rounded-lg font-bold appearance-none border-2 border-solid border-black border-b-4 font-sans flex flex-row items-center justify-center ', className), disabled: actualDisabled, ...other, style: {
+            ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
+            padding: (_c = (_b = props.style) === null || _b === void 0 ? void 0 : _b.padding) !== null && _c !== void 0 ? _c : (props.size === 'sm' ? '10px 16px' : '16px 22px'),
+            color: props.color,
+            cursor: props.disabled ? 'default' : 'pointer',
+            backgroundColor: props.background,
+            opacity: props.disabled ? 0.7 : 1,
+        }, children: children }));
+};
+export const BlueButton = (props) => {
+    return _jsx(Button, { ...props, background: "var(--blue-underlay)", color: "white" });
+};
+export const PlainButton = (props) => {
+    return (_jsx(Button, { ...props, background: "var(--plain-button)", color: "var(--text-color)" }));
+};
+export const RedButton = (props) => {
+    return (_jsx(Button, { ...props, background: UNDERLAY_RED, hoverColor: opacify(0.1, UNDERLAY_RED), color: RED }));
+};
+export const ClearButton = (props) => {
+    return (_jsx(Button, { ...props, background: "transparent", color: "var(--text-color)", hoverColor: "var(--clear-hover)" }));
+};

package/dist/components/homepage/layout/colors.d.ts

@@ -0,0 +1,13 @@
+export declare const PALETTE: {
+    BOX_STROKE: string;
+    TEXT_COLOR: string;
+    BORDER_COLOR: string;
+    BRAND: string;
+};
+export declare const FONTS: {
+    GTPLANAR: string;
+};
+export declare const UNDERLAY_BLUE: string;
+export declare const RED = "#e74c3c";
+export declare const UNDERLAY_RED: string;
+export declare const BLUE_TEXT: string;

package/dist/components/homepage/layout/colors.js

@@ -0,0 +1,14 @@
+import { darken, transparentize } from 'polished';
+export const PALETTE = {
+    BOX_STROKE: 'var(--box-stroke)',
+    TEXT_COLOR: 'var(--text-color)',
+    BORDER_COLOR: 'var(--border-color)',
+    BRAND: 'var(--ifm-color-primary)',
+};
+export const FONTS = {
+    GTPLANAR: 'GTPlanar',
+};
+export const UNDERLAY_BLUE = transparentize(0.85, '#42e9f5');
+export const RED = '#e74c3c';
+export const UNDERLAY_RED = transparentize(0.9, RED);
+export const BLUE_TEXT = darken(0.3, '#42e9f5');

package/dist/components/homepage/layout/use-color-mode.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { type ReactNode } from 'react';
+type ContextValue = {
+    /** Current color mode. */
+    readonly colorMode: ColorMode;
+    /** Set new color mode. */
+    readonly setColorMode: (colorMode: ColorMode) => void;
+};
+export type ColorMode = 'light' | 'dark';
+export declare const ColorModeProvider: ({ children, colorMode, setColorMode, }: {
+    readonly children: React.ReactNode;
+    readonly setColorMode: (colorMode: ColorMode) => void;
+    readonly colorMode: ColorMode;
+}) => ReactNode;
+export declare function useColorMode(): ContextValue;
+export {};

package/dist/components/homepage/layout/use-color-mode.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { useContext, useMemo } from 'react';
+const Context = React.createContext(undefined);
+export const ColorModeProvider = ({ children, colorMode, setColorMode, }) => {
+    const value = useMemo(() => {
+        return { colorMode, setColorMode };
+    }, [colorMode, setColorMode]);
+    return _jsx(Context.Provider, { value: value, children: children });
+};
+export function useColorMode() {
+    const context = useContext(Context);
+    if (context === null || context === undefined) {
+        throw new Error('ColorModeProvider');
+    }
+    return context;
+}

package/dist/components/homepage/layout/use-el-size.d.ts

@@ -0,0 +1,5 @@
+export type Size = {
+    width: number;
+    height: number;
+};
+export declare const useElementSize: (ref: HTMLElement | null) => Size | null;

package/dist/components/homepage/layout/use-el-size.js

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+export const useElementSize = (ref) => {
+    const [size, setSize] = useState(null);
+    const observer = useMemo(() => {
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        return new ResizeObserver((entries) => {
+            setSize({
+                width: entries[0].contentRect.width,
+                height: entries[0].contentRect.height,
+            });
+        });
+    }, []);
+    const updateSize = useCallback(() => {
+        if (ref === null) {
+            return;
+        }
+        const rect = ref.getClientRects();
+        setSize({
+            width: rect[0].width,
+            height: rect[0].height,
+        });
+    }, [ref]);
+    useEffect(() => {
+        updateSize();
+        if (!observer) {
+            return;
+        }
+        if (ref) {
+            observer.observe(ref);
+        }
+        return () => {
+            if (ref) {
+                observer.unobserve(ref);
+            }
+        };
+    }, [observer, ref, updateSize]);
+    return size;
+};

package/dist/components/homepage/layout/use-mobile-layout.d.ts

@@ -0,0 +1 @@
+export declare const useMobileLayout: () => boolean;

package/dist/components/homepage/layout/use-mobile-layout.js

@@ -0,0 +1,6 @@
+import { useElementSize } from './use-el-size';
+export const useMobileLayout = () => {
+    var _a;
+    const containerSize = useElementSize(typeof document === 'undefined' ? null : document.body);
+    return ((_a = containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) !== null && _a !== void 0 ? _a : Infinity) < 900;
+};

package/dist/components/icons/blank.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const Blank: React.FC<SVGProps<SVGSVGElement>>;

package/dist/components/icons/blank.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Blank = (props) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", ...props, children: _jsx("path", { fill: "currentColor", d: "M0 64C0 28.65 28.65 0 64 0H220.1C232.8 0 245.1 5.057 254.1 14.06L369.9 129.9C378.9 138.9 384 151.2 384 163.9V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V64zM352 192H240C213.5 192 192 170.5 192 144V32H64C46.33 32 32 46.33 32 64V448C32 465.7 46.33 480 64 480H320C337.7 480 352 465.7 352 448V192zM347.3 152.6L231.4 36.69C229.4 34.62 226.8 33.18 224 32.48V144C224 152.8 231.2 160 240 160H351.5C350.8 157.2 349.4 154.6 347.3 152.6z" }) }));
+};

package/dist/components/icons/clone.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const CloneIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/components/icons/clone.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CloneIcon = (props) => (_jsx("svg", { ...props, viewBox: "0 0 512 512", children: _jsx("path", { fill: "currentcolor", d: "M288 448L64 448l0-224 64 0 0-64-64 0c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l224 0c35.3 0 64-28.7 64-64l0-64-64 0 0 64zm-64-96l224 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L224 0c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64z" }) }));

package/dist/components/icons/code-hike.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const CodeHike: React.FC<SVGProps<SVGSVGElement>>;

package/dist/components/icons/code-hike.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CodeHike = (props) => {
+    return (_jsxs("svg", { ...props, viewBox: "-100 -100 200 200", fill: "currentColor", children: [_jsx("path", { d: "M 70 60 L 42 -27 L 72 -27 L 100 60 Z" }), _jsx("path", { d: "M 20.419540229885058 40.05357142857142 L 42 -27 L 72 -27 L 50.41954022988506 40.05357142857142 Z" }), _jsx("path", { d: "M 20.419540229885058 40.05357142857142 L -15 -70 L 15 -70 L 50.41954022988506 40.05357142857142 Z" }), _jsx("path", { d: "M -50.41954022988506 40.05357142857142 L -15 -70 L 15 -70 L -20.419540229885058 40.05357142857142 Z" }), _jsx("path", { d: "M -50.41954022988506 40.05357142857142 L -72 -27 L -42 -27 L -20.419540229885058 40.05357142857142 Z" }), _jsx("path", { d: "M -100 60 L -72 -27 L -42 -27 L -70 60 Z" })] }));
+};

package/dist/components/icons/cubes.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const Cubes: React.FC<SVGProps<SVGSVGElement>>;

package/dist/components/icons/cubes.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Cubes = (props) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: _jsx("path", { fill: "currentColor", d: "M239.5 5.018C250.1 1.106 261.9 1.106 272.5 5.018L480.5 81.28C499.4 88.22 512 106.2 512 126.4V385.7C512 405.8 499.4 423.8 480.5 430.7L272.5 506.1C261.9 510.9 250.1 510.9 239.5 506.1L31.48 430.7C12.57 423.8 0 405.8 0 385.7V126.4C0 106.2 12.57 88.22 31.48 81.28L239.5 5.018zM261.5 35.06C257.1 33.76 254 33.76 250.5 35.06L44.14 110.7L256 193.1L467.9 110.7L261.5 35.06zM42.49 400.7L240 473.1V222L32 140.3V385.7C32 392.4 36.19 398.4 42.49 400.7V400.7zM272 473.1L469.5 400.7C475.8 398.4 480 392.4 480 385.7V140.3L272 222V473.1z" }) }));
+};

package/dist/components/icons/js.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const JSIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/components/icons/js.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const JSIcon = (props) => {
+    return (_jsx("svg", { className: "svg-inline--fa fa-js-square fa-w-14", viewBox: "0 0 448 512", ...props, children: _jsx("path", { fill: "currentColor", d: "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM243.8 381.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z" }) }));
+};