Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

gatsby-image

Package Overview
Dependencies
Maintainers
2
Versions
310
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gatsby-image - npm Package Compare versions

Comparing version 1.1.0-alpha.e5586916 to 1.1.0-alpha.e66c6c9c

434

index.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inherits2 = require("babel-runtime/helpers/inherits");
var _react = _interopRequireDefault(require("react"));
var _inherits3 = _interopRequireDefault(_inherits2);
var _propTypes = _interopRequireDefault(require("prop-types"));
var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _extends2 = require("babel-runtime/helpers/extends");
var _extends3 = _interopRequireDefault(_extends2);
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _propTypes = require("prop-types");
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// Handle legacy names for image queries.
var convertProps = function convertProps(props) {
var convertedProps = (0, _extends3.default)({}, props);
var convertedProps = (0, _extends2.default)({}, props);
if (convertedProps.responsiveResolution) {

@@ -42,2 +28,3 @@ convertedProps.resolutions = convertedProps.responsiveResolution;

}
if (convertedProps.responsiveSizes) {

@@ -49,10 +36,11 @@ convertedProps.sizes = convertedProps.responsiveSizes;

return convertedProps;
};
}; // Cache if we've seen an image before so we don't both with
// lazy-loading & fading in on subsequent mounts.
// Cache if we've seen an image before so we don't both with
// lazy-loading & fading in on subsequent mounts.
var imageCache = {};
var inImageCache = function inImageCache(props) {
var convertedProps = convertProps(props);
// Find src
var convertedProps = convertProps(props); // Find src
var src = convertedProps.sizes ? convertedProps.sizes.src : convertedProps.resolutions.src;

@@ -68,3 +56,3 @@

var io = void 0;
var io;
var listeners = [];

@@ -86,3 +74,5 @@

});
}, { rootMargin: "200px" });
}, {
rootMargin: "200px"
});
}

@@ -99,2 +89,3 @@

var isWebpSupportedCache = null;
var isWebpSupported = function isWebpSupported() {

@@ -106,2 +97,3 @@ if (isWebpSupportedCache !== null) {

var elem = typeof window !== "undefined" ? window.document.createElement("canvas") : {};
if (elem.getContext && elem.getContext("2d")) {

@@ -118,18 +110,17 @@ isWebpSupportedCache = elem.toDataURL("image/webp").indexOf("data:image/webp") === 0;

var _props$opacity = props.opacity,
opacity = _props$opacity === undefined ? "" : _props$opacity,
opacity = _props$opacity === void 0 ? "" : _props$opacity,
src = props.src,
srcSet = props.srcSet,
_props$sizes = props.sizes,
sizes = _props$sizes === undefined ? "" : _props$sizes,
sizes = _props$sizes === void 0 ? "" : _props$sizes,
_props$title = props.title,
title = _props$title === undefined ? "" : _props$title,
title = _props$title === void 0 ? "" : _props$title,
_props$alt = props.alt,
alt = _props$alt === undefined ? "" : _props$alt,
alt = _props$alt === void 0 ? "" : _props$alt,
_props$width = props.width,
width = _props$width === undefined ? "" : _props$width,
width = _props$width === void 0 ? "" : _props$width,
_props$height = props.height,
height = _props$height === undefined ? "" : _props$height,
height = _props$height === void 0 ? "" : _props$height,
_props$transitionDela = props.transitionDelay,
transitionDelay = _props$transitionDela === undefined ? "" : _props$transitionDela;
transitionDelay = _props$transitionDela === void 0 ? "" : _props$transitionDela;
return "<img width=" + width + " height=" + height + " src=\"" + src + "\" srcset=\"" + srcSet + "\" alt=\"" + alt + "\" title=\"" + title + "\" sizes=\"" + sizes + "\" style=\"position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:" + transitionDelay + ";opacity:" + opacity + ";width:100%;height:100%;object-fit:cover;objectPosition:center\"/>";

@@ -142,6 +133,5 @@ };

_props$transitionDela2 = props.transitionDelay,
transitionDelay = _props$transitionDela2 === undefined ? "" : _props$transitionDela2,
otherProps = (0, _objectWithoutProperties3.default)(props, ["opacity", "onLoad", "transitionDelay"]);
return _react2.default.createElement("img", (0, _extends3.default)({}, otherProps, {
transitionDelay = _props$transitionDela2 === void 0 ? "" : _props$transitionDela2,
otherProps = (0, _objectWithoutProperties2.default)(props, ["opacity", "onLoad", "transitionDelay"]);
return _react.default.createElement("img", (0, _extends2.default)({}, otherProps, {
onLoad: onLoad,

@@ -164,23 +154,23 @@ style: {

Img.propTypes = {
opacity: _propTypes2.default.number,
transitionDelay: _propTypes2.default.string,
onLoad: _propTypes2.default.func
opacity: _propTypes.default.number,
transitionDelay: _propTypes.default.string,
onLoad: _propTypes.default.func
};
var Image = function (_React$Component) {
(0, _inherits3.default)(Image, _React$Component);
var Image =
/*#__PURE__*/
function (_React$Component) {
(0, _inheritsLoose2.default)(Image, _React$Component);
function Image(props) {
(0, _classCallCheck3.default)(this, Image);
var _this;
// If this browser doesn't support the IntersectionObserver API
_this = _React$Component.call(this, props) || this; // If this browser doesn't support the IntersectionObserver API
// we default to start downloading the image right away.
var _this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call(this, props));
var isVisible = true;
var imgLoaded = true;
var IOSupported = false;
var IOSupported = false; // If this image has already been loaded before then we can assume it's
// already in the browser cache so it's cheap to just show directly.
// If this image has already been loaded before then we can assume it's
// already in the browser cache so it's cheap to just show directly.
var seenBefore = inImageCache(props);

@@ -192,5 +182,5 @@

IOSupported = true;
}
} // Always don't render image while server rendering
// Always don't render image while server rendering
if (typeof window === "undefined") {

@@ -206,8 +196,9 @@ isVisible = false;

};
_this.handleRef = _this.handleRef.bind(_this);
_this.handleRef = _this.handleRef.bind((0, _assertThisInitialized2.default)(_this));
return _this;
}
Image.prototype.handleRef = function handleRef(ref) {
var _proto = Image.prototype;
_proto.handleRef = function handleRef(ref) {
var _this2 = this;

@@ -217,3 +208,6 @@

listenToIntersections(ref, function () {
_this2.setState({ isVisible: true, imgLoaded: false });
_this2.setState({
isVisible: true,
imgLoaded: false
});
});

@@ -223,3 +217,3 @@ }

Image.prototype.render = function render() {
_proto.render = function render() {
var _this3 = this;

@@ -233,8 +227,10 @@

_convertProps$style = _convertProps.style,
style = _convertProps$style === undefined ? {} : _convertProps$style,
style = _convertProps$style === void 0 ? {} : _convertProps$style,
sizes = _convertProps.sizes,
resolutions = _convertProps.resolutions,
backgroundColor = _convertProps.backgroundColor;
backgroundColor = _convertProps.backgroundColor,
Tag = _convertProps.Tag;
var bgColor = void 0;
var bgColor;
if (typeof backgroundColor === "boolean") {

@@ -247,84 +243,75 @@ bgColor = "lightgray";

if (sizes) {
var image = sizes;
var image = sizes; // Use webp by default if browser supports it
// Use webp by default if browser supports it
if (image.srcWebp && image.srcSetWebp && isWebpSupported()) {
image.src = image.srcWebp;
image.srcSet = image.srcSetWebp;
}
} // The outer div is necessary to reset the z-index to 0.
// The outer div is necessary to reset the z-index to 0.
return _react2.default.createElement(
"div",
{
className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper",
style: {
zIndex: 0,
// Let users set component to be absolutely positioned.
position: style.position === "absolute" ? "initial" : "relative"
}
},
_react2.default.createElement(
"div",
{
className: (className ? className : "") + " gatsby-image-wrapper",
style: (0, _extends3.default)({
position: "relative",
overflow: "hidden",
zIndex: 1
}, style),
ref: this.handleRef
},
_react2.default.createElement("div", {
style: {
width: "100%",
paddingBottom: 100 / image.aspectRatio + "%"
}
}),
image.base64 && _react2.default.createElement(Img, {
return _react.default.createElement(Tag, {
className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper",
style: {
zIndex: 0,
// Let users set component to be absolutely positioned.
position: style.position === "absolute" ? "initial" : "relative"
}
}, _react.default.createElement(Tag, {
className: (className ? className : "") + " gatsby-image-wrapper",
style: (0, _extends2.default)({
position: "relative",
overflow: "hidden",
zIndex: 1
}, style),
ref: this.handleRef
}, _react.default.createElement(Tag, {
style: {
width: "100%",
paddingBottom: 100 / image.aspectRatio + "%"
}
}), image.base64 && _react.default.createElement(Img, {
alt: alt,
title: title,
src: image.base64,
opacity: !this.state.imgLoaded ? 1 : 0,
transitionDelay: "0.25s"
}), image.tracedSVG && _react.default.createElement(Img, {
alt: alt,
title: title,
src: image.tracedSVG,
opacity: !this.state.imgLoaded ? 1 : 0,
transitionDelay: "0.25s"
}), bgColor && _react.default.createElement(Tag, {
title: title,
style: {
backgroundColor: bgColor,
position: "absolute",
top: 0,
bottom: 0,
opacity: !this.state.imgLoaded ? 1 : 0,
transitionDelay: "0.35s",
right: 0,
left: 0
}
}), this.state.isVisible && _react.default.createElement(Img, {
alt: alt,
title: title,
srcSet: image.srcSet,
src: image.src,
sizes: image.sizes,
opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0,
onLoad: function onLoad() {
_this3.state.IOSupported && _this3.setState({
imgLoaded: true
});
_this3.props.onLoad && _this3.props.onLoad();
}
}), _react.default.createElement("noscript", {
dangerouslySetInnerHTML: {
__html: noscriptImg((0, _extends2.default)({
alt: alt,
title: title,
src: image.base64,
opacity: !this.state.imgLoaded ? 1 : 0,
transitionDelay: "0.25s"
}),
image.tracedSVG && _react2.default.createElement(Img, {
alt: alt,
title: title,
src: image.tracedSVG,
opacity: !this.state.imgLoaded ? 1 : 0,
transitionDelay: "0.25s"
}),
bgColor && _react2.default.createElement("div", {
title: title,
style: {
backgroundColor: bgColor,
position: "absolute",
top: 0,
bottom: 0,
opacity: !this.state.imgLoaded ? 1 : 0,
transitionDelay: "0.35s",
right: 0,
left: 0
}
}),
this.state.isVisible && _react2.default.createElement(Img, {
alt: alt,
title: title,
srcSet: image.srcSet,
src: image.src,
sizes: image.sizes,
opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0,
onLoad: function onLoad() {
_this3.state.IOSupported && _this3.setState({ imgLoaded: true });
_this3.props.onLoad && _this3.props.onLoad();
}
}),
_react2.default.createElement("noscript", {
dangerouslySetInnerHTML: {
__html: noscriptImg((0, _extends3.default)({ alt: alt, title: title }, image))
}
})
)
);
title: title
}, image))
}
})));
}

@@ -334,3 +321,3 @@

var _image = resolutions;
var divStyle = (0, _extends3.default)({
var divStyle = (0, _extends2.default)({
position: "relative",

@@ -346,77 +333,68 @@ overflow: "hidden",

delete divStyle.display;
}
} // Use webp by default if browser supports it
// Use webp by default if browser supports it
if (_image.srcWebp && _image.srcSetWebp && isWebpSupported()) {
_image.src = _image.srcWebp;
_image.srcSet = _image.srcSetWebp;
}
} // The outer div is necessary to reset the z-index to 0.
// The outer div is necessary to reset the z-index to 0.
return _react2.default.createElement(
"div",
{
className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper",
style: {
zIndex: 0,
// Let users set component to be absolutely positioned.
position: style.position === "absolute" ? "initial" : "relative"
}
},
_react2.default.createElement(
"div",
{
className: (className ? className : "") + " gatsby-image-wrapper",
style: divStyle,
ref: this.handleRef
},
_image.base64 && _react2.default.createElement(Img, {
return _react.default.createElement(Tag, {
className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper",
style: {
zIndex: 0,
// Let users set component to be absolutely positioned.
position: style.position === "absolute" ? "initial" : "relative"
}
}, _react.default.createElement(Tag, {
className: (className ? className : "") + " gatsby-image-wrapper",
style: divStyle,
ref: this.handleRef
}, _image.base64 && _react.default.createElement(Img, {
alt: alt,
title: title,
src: _image.base64,
opacity: !this.state.imgLoaded ? 1 : 0,
transitionDelay: "0.35s"
}), _image.tracedSVG && _react.default.createElement(Img, {
alt: alt,
title: title,
src: _image.tracedSVG,
opacity: !this.state.imgLoaded ? 1 : 0,
transitionDelay: "0.25s"
}), bgColor && _react.default.createElement(Tag, {
title: title,
style: {
backgroundColor: bgColor,
width: _image.width,
opacity: !this.state.imgLoaded ? 1 : 0,
transitionDelay: "0.25s",
height: _image.height
}
}), this.state.isVisible && _react.default.createElement(Img, {
alt: alt,
title: title,
width: _image.width,
height: _image.height,
srcSet: _image.srcSet,
src: _image.src,
opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0,
onLoad: function onLoad() {
_this3.setState({
imgLoaded: true
});
_this3.props.onLoad && _this3.props.onLoad();
}
}), _react.default.createElement("noscript", {
dangerouslySetInnerHTML: {
__html: noscriptImg((0, _extends2.default)({
alt: alt,
title: title,
src: _image.base64,
opacity: !this.state.imgLoaded ? 1 : 0,
transitionDelay: "0.35s"
}),
_image.tracedSVG && _react2.default.createElement(Img, {
alt: alt,
title: title,
src: _image.tracedSVG,
opacity: !this.state.imgLoaded ? 1 : 0,
transitionDelay: "0.25s"
}),
bgColor && _react2.default.createElement("div", {
title: title,
style: {
backgroundColor: bgColor,
width: _image.width,
opacity: !this.state.imgLoaded ? 1 : 0,
transitionDelay: "0.25s",
height: _image.height
}
}),
this.state.isVisible && _react2.default.createElement(Img, {
alt: alt,
title: title,
width: _image.width,
height: _image.height,
srcSet: _image.srcSet,
src: _image.src,
opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0,
onLoad: function onLoad() {
_this3.setState({ imgLoaded: true });
_this3.props.onLoad && _this3.props.onLoad();
}
}),
_react2.default.createElement("noscript", {
dangerouslySetInnerHTML: {
__html: noscriptImg((0, _extends3.default)({
alt: alt,
title: title,
width: _image.width,
height: _image.height
}, _image))
}
})
)
);
height: _image.height
}, _image))
}
})));
}

@@ -428,25 +406,27 @@

return Image;
}(_react2.default.Component);
}(_react.default.Component);
Image.defaultProps = {
fadeIn: true,
alt: ""
alt: "",
Tag: "div"
};
Image.propTypes = {
responsiveResolution: _propTypes2.default.object,
responsiveSizes: _propTypes2.default.object,
resolutions: _propTypes2.default.object,
sizes: _propTypes2.default.object,
fadeIn: _propTypes2.default.bool,
title: _propTypes2.default.string,
alt: _propTypes2.default.string,
className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]), // Support Glamor's css prop.
outerWrapperClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
style: _propTypes2.default.object,
position: _propTypes2.default.string,
backgroundColor: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.bool]),
onLoad: _propTypes2.default.func
responsiveResolution: _propTypes.default.object,
responsiveSizes: _propTypes.default.object,
resolutions: _propTypes.default.object,
sizes: _propTypes.default.object,
fadeIn: _propTypes.default.bool,
title: _propTypes.default.string,
alt: _propTypes.default.string,
className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
// Support Glamor's css prop.
outerWrapperClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
style: _propTypes.default.object,
position: _propTypes.default.string,
backgroundColor: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
onLoad: _propTypes.default.func,
Tag: _propTypes.default.string
};
exports.default = Image;
var _default = Image;
exports.default = _default;

36

package.json
{
"name": "gatsby-image",
"version": "1.1.0-alpha.e5586916",
"description": "Lazy-loading React image component with optional support for the blur-up effect.",
"main": "index.js",
"scripts": {
"build": "babel src --out-dir . --ignore __tests__",
"watch": "babel -w src --out-dir . --ignore __tests__",
"prepublish": "cross-env NODE_ENV=production npm run build"
"version": "1.1.0-alpha.e66c6c9c",
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
},
"dependencies": {
"@babel/runtime": "^7.0.0-beta.38",
"prop-types": "^15.6.0"
},
"devDependencies": {
"@babel/cli": "^7.0.0-beta.38",
"@babel/core": "^7.0.0-beta.38",
"cross-env": "^5.0.5"
},
"homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme",
"keywords": [
"gatsby",
"gatsby-component",
"react-component"
],
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
"license": "MIT",
"dependencies": {
"babel-runtime": "^6.26.0",
"prop-types": "^15.6.0"
"main": "index.js",
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby.git"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"cross-env": "^5.0.5"
"scripts": {
"build": "babel src --out-dir . --ignore __tests__",
"prepublish": "cross-env NODE_ENV=production npm run build",
"watch": "babel -w src --out-dir . --ignore __tests__"
}
}

49

README.md

@@ -9,3 +9,5 @@ # gatsby-image

capabilities with advanced image loading techniques to easily and completely
optimize image loading for your sites.
optimize image loading for your sites. `gatsby-image` uses
[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)
to power its image transformations.

@@ -35,3 +37,3 @@ _Warning: gatsby-image is **not** a drop-in replacement for `<img/>`. It's

Doing this consistantly across a site feels like sisyphean labor. You manually
Doing this consistently across a site feels like sisyphean labor. You manually
optimize your images and then… several images are swapped in at the last minute

@@ -61,4 +63,26 @@ or a design-tweak shaves 100px of width off your images.

This is what a component using `gatsby-images` looks like.
## Install
`npm install --save gatsby-image`
Depending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.
```
npm install --save gatsby-transformer-sharp
npm install --save gatsby-plugin-sharp
```
Then in your `gatsby-config.js`:
```
plugins: [
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`
];
```
## How to use
This is what a component using `gatsby-image` looks like:
```jsx

@@ -79,3 +103,3 @@ import React from "react";

childImageSharp {
# Specify the image processing steps right in the query
# Specify the image processing specifications right in the query.
# Makes it trivial to update as your page's design changes.

@@ -91,2 +115,4 @@ resolutions(width: 125, height: 125) {

For another explanation of how to get started with gatsby-image, see this blog post by community member Kyle Gill [Image Optimization Made Easy with Gatsby.js](https://medium.com/@kyle.robert.gill/ridiculously-easy-image-optimization-with-gatsby-js-59d48e15db6e)
## Two types of responsive images

@@ -150,4 +176,8 @@

* `GatsbyContentfulResolutions_noBase64`
* `GatsbyContentfulResolutions_withWebp`
* `GatsbyContentfulResolutions_withWebp_noBase64`
* `GatsbyContentfulSizes`
* `GatsbyContentfulSizes_noBase64`
* `GatsbyContentfulSizes_withWebp`
* `GatsbyContentfulSizes_withWebp_noBase64`

@@ -229,9 +259,14 @@ ### gatsby-source-datocms

| `alt` | `string` | Passed to the `img` element |
| `className` | `string\|object` | Passed to the wrapper div. Object is needed to support Glamor's css prop |
| `outerWrapperClassName` | `string\|object` | Passed to the outer wrapper div. Object is needed to support Glamor's css prop |
| `style` | `object` | Spread into the default styles in the wrapper div |
| `className` | `string\|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |
| `outerWrapperClassName` | `string\|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |
| `style` | `object` | Spread into the default styles in the wrapper element |
| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |
| `backgroundColor` | `string\|bool` | Set a colored background placeholder. If true, uses "lightgray" for the color. You can also pass in any valid color string. |
| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |
| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |
## Image processing arguments
[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like
`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.
## Some other stuff to be aware of

@@ -238,0 +273,0 @@ 

.babelrc

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc