serp-preview
Version:
Show how your website will appear in searchs engine results
122 lines (86 loc) • 4.16 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _templateObject6() {
var data = _taggedTemplateLiteral(["\n text-decoration: none;\n color: #1a0dab;\n outline: 0;\n\n &:hover h3 {\n text-decoration: underline;\n }\n"]);
_templateObject6 = function _templateObject6() {
return data;
};
return data;
}
function _templateObject5() {
var data = _taggedTemplateLiteral(["\n font-size: 14px;\n color: #3C4043;\n font-style: normal;\n -webkit-text-size-adjust: none;\n"]);
_templateObject5 = function _templateObject5() {
return data;
};
return data;
}
function _templateObject4() {
var data = _taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n top: 0;\n padding-top: 1px;\n padding-bottom: 1px;\n line-height: 1.3;\n display: inline-block;\n white-space: nowrap;\n overflow: hidden;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n width: 100%;\n"]);
_templateObject4 = function _templateObject4() {
return data;
};
return data;
}
function _templateObject3() {
var data = _taggedTemplateLiteral(["\n color: #3C4043;\n line-height: 1.58;\n font-size: 14px;\n word-wrap: break-word;\n\n & em {\n font-weight: bold;\n font-style: normal;\n }\n"]);
_templateObject3 = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2() {
var data = _taggedTemplateLiteral(["\n display: inline-block;\n font-weight: normal;\n font-size: 20px;\n line-height: 1.3;\n margin: 0 0 3px 0;\n padding: 4px 0 0;\n"]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = _taggedTemplateLiteral(["\n position: relative;\n font-family: arial, sans-serif;\n text-align: left;\n max-width: 600px;\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var Wrapper = _styledComponents["default"].div(_templateObject());
var Title = _styledComponents["default"].h3(_templateObject2());
var Description = _styledComponents["default"].div(_templateObject3());
var Url = _styledComponents["default"].cite(_templateObject4());
var UrlText = _styledComponents["default"].span(_templateObject5());
var Link = _styledComponents["default"].a(_templateObject6());
var formatUrl = function formatUrl(url) {
return url.replace(/https?:\/\//, '').replace(/\//g, ' › ');
};
var GooglePreview = function GooglePreview(_ref) {
var title = _ref.title,
description = _ref.description,
url = _ref.url,
link = _ref.link;
return /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(Link, {
href: link
}, /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(Title, null, title), /*#__PURE__*/_react["default"].createElement(Url, null, /*#__PURE__*/_react["default"].createElement(UrlText, null, formatUrl(url)))), /*#__PURE__*/_react["default"].createElement(Description, null, description));
};
GooglePreview.defaultProps = {
description: null,
link: '#'
};
GooglePreview.propTypes = {
/** Title */
title: _propTypes["default"].string.isRequired,
/** Meta Description */
description: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
/** Url */
url: _propTypes["default"].string.isRequired,
/** Link for src */
link: _propTypes["default"].string
};
var _default = GooglePreview;
exports["default"] = _default;