@azerion/bunosaurus-plugin-ideal-image 0.0.0-stage → 4.0.0

package/README.md

@@ -1,3 +1,7 @@
-# Temporary Holding Version
+# `@docusaurus/plugin-ideal-image`
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Docusaurus Plugin to generate an almost ideal image (responsive, lazy-loading, and low quality placeholder).
+
+## Usage
+
+See [plugin-ideal-image documentation](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-ideal-image).

package/lib/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 type { LoadContext, Plugin, OptionValidationContext } from '@docusaurus/types';
+import type { PluginOptions } from '@docusaurus/plugin-ideal-image';
+export default function pluginIdealImage(context: LoadContext, options: PluginOptions): Plugin<void>;
+export declare function validateOptions({ validate, options, }: OptionValidationContext<PluginOptions, PluginOptions>): PluginOptions;

package/lib/index.js

@@ -0,0 +1,75 @@
+"use strict";
+/**
+ * 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = pluginIdealImage;
+exports.validateOptions = validateOptions;
+const utils_validation_1 = require("@docusaurus/utils-validation");
+const theme_translations_1 = require("@docusaurus/theme-translations");
+function pluginIdealImage(context, options) {
+    const { i18n: { currentLocale }, } = context;
+    return {
+        name: 'docusaurus-plugin-ideal-image',
+        getThemePath() {
+            return '../lib/theme';
+        },
+        getTypeScriptThemePath() {
+            return '../src/theme';
+        },
+        getDefaultCodeTranslationMessages() {
+            return (0, theme_translations_1.readDefaultCodeTranslationMessages)({
+                locale: currentLocale,
+                name: 'plugin-ideal-image',
+            });
+        },
+        configureWebpack(_config, isServer) {
+            const { disableInDev, ...loaderOptions } = options;
+            if (disableInDev && process.env.NODE_ENV !== 'production') {
+                return {};
+            }
+            return {
+                mergeStrategy: {
+                    'module.rules': 'prepend',
+                },
+                module: {
+                    rules: [
+                        {
+                            test: /\.(?:png|jpe?g)$/i,
+                            with: { type: { not: 'text' } },
+                            // We don't want to use the image loader for non-React source code
+                            // ie we don't want to use ideal image loader for CSS files...
+                            // See https://github.com/facebook/docusaurus/issues/10862
+                            issuer: {
+                                and: [/\.(?:tsx?|jsx?|mdx?)$/i],
+                            },
+                            use: [
+                                require.resolve('@docusaurus/lqip-loader'),
+                                {
+                                    loader: require.resolve('@docusaurus/responsive-loader'),
+                                    options: {
+                                        // Don't emit for server-side rendering
+                                        emitFile: !isServer,
+                                        // eslint-disable-next-line @typescript-eslint/no-require-imports
+                                        adapter: require('@docusaurus/responsive-loader/sharp'),
+                                        name: 'assets/ideal-img/[name].[hash:hex:7].[width].[ext]',
+                                        ...loaderOptions,
+                                    },
+                                },
+                            ],
+                        },
+                    ],
+                },
+            };
+        },
+    };
+}
+function validateOptions({ validate, options, }) {
+    const pluginOptionsSchema = utils_validation_1.Joi.object({
+        disableInDev: utils_validation_1.Joi.boolean().default(true),
+    }).unknown();
+    return validate(pluginOptionsSchema, options);
+}

package/lib/theme/IdealImage/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 type { ReactNode } from 'react';
+import type { Props } from '@theme/IdealImage';
+export default function IdealImage(props: Props): ReactNode;

package/lib/theme/IdealImage/index.js

@@ -0,0 +1,96 @@
+/**
+ * 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 {translate} from '@docusaurus/Translate';
+import ReactIdealImage from '@theme/IdealImageLegacy';
+// Adopted from https://github.com/endiliey/react-ideal-image/blob/master/src/components/helpers.js#L59-L65
+function bytesToSize(bytes) {
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  if (bytes === 0) {
+    return 'n/a';
+  }
+  const scale = Math.floor(Math.log(bytes) / Math.log(1024));
+  if (scale === 0) {
+    return `${bytes} ${sizes[scale]}`;
+  }
+  return `${(bytes / 1024 ** scale).toFixed(1)} ${sizes[scale]}`;
+}
+// Adopted from https://github.com/endiliey/react-ideal-image/blob/master/src/components/IdealImage/index.js#L43-L75
+function getMessage(icon, state) {
+  switch (icon) {
+    case 'noicon':
+    case 'loaded':
+      return null;
+    case 'loading':
+      return translate({
+        id: 'theme.IdealImageMessage.loading',
+        message: 'Loading...',
+        description: 'When the full-scale image is loading',
+      });
+    case 'load': {
+      // We can show `alt` here
+      const {pickedSrc} = state;
+      const {size} = pickedSrc;
+      const sizeMessage = size ? ` (${bytesToSize(size)})` : '';
+      return translate(
+        {
+          id: 'theme.IdealImageMessage.load',
+          message: 'Click to load{sizeMessage}',
+          description:
+            'To prompt users to load the full image. sizeMessage is a parenthesized size figure.',
+        },
+        {sizeMessage},
+      );
+    }
+    case 'offline':
+      return translate({
+        id: 'theme.IdealImageMessage.offline',
+        message: 'Your browser is offline. Image not loaded',
+        description: 'When the user is viewing an offline document',
+      });
+    case 'error': {
+      const {loadInfo} = state;
+      if (loadInfo === 404) {
+        return translate({
+          id: 'theme.IdealImageMessage.404error',
+          message: '404. Image not found',
+          description: 'When the image is not found',
+        });
+      }
+      return translate({
+        id: 'theme.IdealImageMessage.error',
+        message: 'Error. Click to reload',
+        description: 'When the image fails to load for unknown error',
+      });
+    }
+    default:
+      throw new Error(`Wrong icon: ${icon}`);
+  }
+}
+export default function IdealImage(props) {
+  const {img, ...propsRest} = props;
+  // In dev env just use regular img with original file
+  if (typeof img === 'string' || 'default' in img) {
+    return (
+      // eslint-disable-next-line jsx-a11y/alt-text
+      <img src={typeof img === 'string' ? img : img.default} {...propsRest} />
+    );
+  }
+  return (
+    <ReactIdealImage
+      {...propsRest}
+      height={img.src.height ?? 100}
+      width={img.src.width ?? 100}
+      placeholder={{lqip: img.preSrc}}
+      src={img.src.src}
+      srcSet={img.src.images.map((image) => ({
+        ...image,
+        src: image.path,
+      }))}
+      getMessage={getMessage}
+    />
+  );
+}

package/lib/theme/IdealImageLegacy/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+Copyright (c) 2017 stereobooster
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/lib/theme/IdealImageLegacy/README.md

@@ -0,0 +1,13 @@
+# Legacy React IdealImage lib
+
+This is legacy code from an npm package we forked, then internalized
+
+See also:
+
+- https://github.com/slorber/docusaurus-react-ideal-image
+- https://github.com/endiliey/react-ideal-image
+- https://github.com/stereobooster/react-ideal-image
+
+---
+
+TODO: we need to clean it up, remove what we don't need, and maintain it up to date

package/lib/theme/IdealImageLegacy/components/Icon/Download.d.ts

@@ -0,0 +1,2 @@
+declare const Download: (props: any) => import("react").JSX.Element;
+export default Download;

package/lib/theme/IdealImageLegacy/components/Icon/Download.js

@@ -0,0 +1,14 @@
+// This icon is from "material design icons"
+// It is licensed under Apache License 2.0
+// Full text is available here
+// https://github.com/google/material-design-icons/blob/master/LICENSE
+import Icon from './index';
+
+const Download = (props) => (
+  <Icon
+    {...props}
+    path="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
+  />
+);
+
+export default Download;

package/lib/theme/IdealImageLegacy/components/Icon/Loading.d.ts

@@ -0,0 +1,2 @@
+declare const Loading: (props: any) => import("react").JSX.Element;
+export default Loading;

package/lib/theme/IdealImageLegacy/components/Icon/Loading.js

@@ -0,0 +1,14 @@
+// This icon is from "material design icons"
+// It is licensed under Apache License 2.0
+// Full text is available here
+// https://github.com/google/material-design-icons/blob/master/LICENSE
+import Icon from './index';
+
+const Loading = (props) => (
+  <Icon
+    {...props}
+    path="M6,2V8H6V8L10,12L6,16V16H6V22H18V16H18V16L14,12L18,8V8H18V2H6M16,16.5V20H8V16.5L12,12.5L16,16.5M12,11.5L8,7.5V4H16V7.5L12,11.5Z"
+  />
+);
+
+export default Loading;

package/lib/theme/IdealImageLegacy/components/Icon/Offline.d.ts

@@ -0,0 +1,2 @@
+declare const Offline: (props: any) => import("react").JSX.Element;
+export default Offline;

package/lib/theme/IdealImageLegacy/components/Icon/Offline.js

@@ -0,0 +1,14 @@
+// This icon is from "material design icons"
+// It is licensed under Apache License 2.0
+// Full text is available here
+// https://github.com/google/material-design-icons/blob/master/LICENSE
+import Icon from './index';
+
+const Offline = (props) => (
+  <Icon
+    {...props}
+    path="M19.35 10.04C18.67 6.59 15.64 4 12 4c-1.48 0-2.85.43-4.01 1.17l1.46 1.46C10.21 6.23 11.08 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3 0 1.13-.64 2.11-1.56 2.62l1.45 1.45C23.16 18.16 24 16.68 24 15c0-2.64-2.05-4.78-4.65-4.96zM3 5.27l2.75 2.74C2.56 8.15 0 10.77 0 14c0 3.31 2.69 6 6 6h11.73l2 2L21 20.73 4.27 4 3 5.27zM7.73 10l8 8H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h1.73z"
+  />
+);
+
+export default Offline;

package/lib/theme/IdealImageLegacy/components/Icon/Warning.d.ts

@@ -0,0 +1,2 @@
+declare const Warning: (props: any) => import("react").JSX.Element;
+export default Warning;

package/lib/theme/IdealImageLegacy/components/Icon/Warning.js

@@ -0,0 +1,14 @@
+// This icon is from "material design icons"
+// It is licensed under Apache License 2.0
+// Full text is available here
+// https://github.com/google/material-design-icons/blob/master/LICENSE
+import Icon from './index';
+
+const Warning = (props) => (
+  <Icon
+    {...props}
+    path="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+  />
+);
+
+export default Warning;

package/lib/theme/IdealImageLegacy/components/Icon/index.d.ts

@@ -0,0 +1,7 @@
+declare const Icon: ({ size, fill, className, path }: {
+    className: any;
+    fill?: string | undefined;
+    path: any;
+    size?: number | undefined;
+}) => import("react").JSX.Element;
+export default Icon;

package/lib/theme/IdealImageLegacy/components/Icon/index.js

@@ -0,0 +1,24 @@
+// import PropTypes from 'prop-types'
+
+const Icon = ({size = 24, fill = '#000', className, path}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    className={className}>
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path fill={fill} d={path} />
+  </svg>
+);
+
+/*
+Icon.propTypes = {
+  size: PropTypes.number,
+  fill: PropTypes.string,
+  className: PropTypes.string,
+  path: PropTypes.string.isRequired,
+}
+ */
+
+export default Icon;

package/lib/theme/IdealImageLegacy/components/IdealImage/index.d.ts

@@ -0,0 +1,46 @@
+import { Component } from 'react';
+declare const defaultShouldAutoDownload: ({ connection, size, threshold, possiblySlowNetwork, }: {
+    connection: any;
+    possiblySlowNetwork: any;
+    size: any;
+    threshold: any;
+}) => boolean;
+declare const defaultGetMessage: (icon: any, state: any) => "404. Image not found" | "Click to load" | "Error. Click to reload" | "Loading..." | "Your browser is offline. Image not loaded" | (string | import("react").JSX.Element)[] | null;
+declare const defaultGetIcon: (state: any) => string;
+export default class IdealImage extends Component {
+    state: {
+        loadState: string;
+        connection: {
+            downlink: any;
+            rtt: any;
+            effectiveType: any;
+        } | null;
+        onLine: boolean;
+        overThreshold: boolean;
+        inViewport: boolean;
+        userTriggered: boolean;
+        possiblySlowNetwork: boolean;
+    };
+    updateConnection: (() => void) | undefined;
+    possiblySlowNetworkListener: ((e: any) => void) | undefined;
+    updateOnlineStatus: (() => void) | undefined;
+    loader: Promise<any> | undefined;
+    constructor(props: any);
+    static defaultProps: {
+        shouldAutoDownload: typeof defaultShouldAutoDownload;
+        getMessage: typeof defaultGetMessage;
+        getIcon: typeof defaultGetIcon;
+        loader: string;
+    };
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onClick: () => void;
+    clear(): void;
+    cancel(userTriggered: any): void;
+    loadStateChange(loadState: any, userTriggered: any, loadInfo?: null): void;
+    load: (userTriggered: any) => void;
+    onEnter: () => void;
+    onLeave: () => void;
+    render(): import("react").JSX.Element;
+}
+export {};