- \r\n {LinkItem(\"\", currentCategory)}\r\n {LinkItem(\"features\", currentCategory)}\r\n {LinkItem(\"setup\", currentCategory)}\r\n {LinkItem(\"general\", currentCategory)}\r\n {LinkItem(\"case-studies\", currentCategory)}\r\n {LinkItem(\"tips\", currentCategory)}\r\n {LinkItem(\"news\", currentCategory)}\r\n
\r\n -1?'0px':'40px'}}>\r\n \r\n \r\n \r\n Tags {\" \"}\r\n
\r\n \r\n \r\n \r\n {basePath === \"/blog/category/case-studies/\" //for case study category\r\n ? totalCaseStudyTags.map((tag) => (\r\n \r\n {tag}\r\n 1 ? \"inline-block\" : \"none\",\r\n }}\r\n >\r\n {tagCounts[tag]}\r\n \r\n \r\n ))\r\n : totalCaseStudyTags.indexOf(splitBasePathResult) > -1 //for case study and tag from case study category\r\n ? totalCaseStudyTags.map((tag) => (\r\n \r\n {tag}\r\n 1 ? \"inline-block\" : \"none\",\r\n }}\r\n >\r\n {tagCounts[tag]}\r\n \r\n \r\n ))\r\n : totalTags.map((\r\n tag //for all tags in blog\r\n ) => (\r\n \r\n {tag}\r\n 1\r\n ? \"inline-block\"\r\n : \"none\",\r\n }}\r\n >\r\n {tag === \"Releases\"\r\n ? tagCountsReleases[tag]\r\n : tagCounts[tag]}\r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import React from \"react\"\r\nimport { useStaticQuery, graphql, Link } from \"gatsby\"\r\nimport '../styles/main.css'\r\nimport styles from './announcements.module.css';\r\n\r\nconst query = graphql`\r\nquery AnnouncementsQuery {\r\n allIndexYaml(limit: 3) {\r\n edges {\r\n node {\r\n version \r\n id\r\n published(formatString: \"MMMM DD , YYYY\")\r\n other\r\n tags\r\n category\r\n\r\n }\r\n }\r\n }\r\n}\r\n`;\r\n\r\nexport default function Announcements() {\r\n\r\n const data = useStaticQuery(query);\r\n\r\n return (\r\n \r\n Tags {\" \"}\r\n {\r\n handleClick(0);\r\n }}\r\n >\r\n {chevronUpIcon}\r\n \r\n {chevronDownIcon}\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n}","import React, { useState, useEffect } from 'react'\r\n// import Modal from 'react-bootstrap/Modal'\r\n// import Button from 'react-bootstrap/Button'\r\nimport styles from \"./blogmodal.module.css\"\r\nimport \"../styles/main.css\";\r\n\r\nexport default function BlogModal() {\r\n\r\n const subscribeStyles = {\r\n fontWeight: \"bold\"\r\n }\r\n\r\n const shouldPerventModal = () => {\r\n let emailCookieValue = readCookie('email');\r\n let modalClosed = window.sessionStorage.getItem(\"modalclosed\") != null;\r\n return !!modalClosed || !!emailCookieValue;\r\n }\r\n\r\n const [show, setShow] = useState(false);\r\n const [showMobileButton, setShowMobileButton] = useState(false);\r\n\r\n const onTriggerModal = (event) => {\r\n if (!shouldPerventModal() && (!event.relatedTarget || !event.toElement)) {\r\n setShowMobileButton(false);\r\n handleModalShow();\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n let isMobile = window.orientation !== undefined;\r\n setShowMobileButton(isMobile && !shouldPerventModal());\r\n const handleEventListener = (element, event) => {\r\n element.addEventListener(event, onTriggerModal);\r\n return () => {\r\n element.removeEventListener(event, onTriggerModal);\r\n }\r\n }\r\n if (isMobile) {\r\n let isMobileButton = document.getElementById('isMobile');\r\n return handleEventListener(isMobileButton, 'click');\r\n }\r\n else {\r\n return handleEventListener(window, 'mouseout');\r\n }\r\n }, []); // this should run only once, hence []\r\n\r\n function createCookie(key, value) {\r\n let d = new Date();\r\n d.setFullYear(d.getFullYear() + 1);\r\n let expiration = d.toGMTString();\r\n let cookie = escape(key) + \"=\" + escape(value) + \";expires=\" + expiration + \";\";\r\n document.cookie = cookie;\r\n }\r\n\r\n function readCookie(name) {\r\n let key = name + \"=\";\r\n let cookies = document.cookie.split(';');\r\n for (let i = 0; i < cookies.length; i++) {\r\n let cookie = cookies[i];\r\n while (cookie.charAt(0) === ' ') {\r\n cookie = cookie.substring(1, cookie.length);\r\n }\r\n if (cookie.indexOf(key) === 0) {\r\n return cookie.substring(key.length, cookie.length);\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n let arr = [];\r\n function submitForm(e) {\r\n e.preventDefault();\r\n let requestBody = {};\r\n let emailValue = document.getElementById('email').value;\r\n requestBody['email'] = emailValue;\r\n let json = JSON.stringify(requestBody);\r\n arr.push(requestBody);\r\n let xhr = new XMLHttpRequest();\r\n let url = window.self.location.origin + \"/api/contact/blog\";\r\n let message = document.getElementById('message');\r\n xhr.onreadystatechange = function () {\r\n if (xhr.readyState === 4 && xhr.status === 200) {\r\n createCookie('email', emailValue);\r\n message.innerHTML = \"Thank you for your feedback.\";\r\n message.style.color = \"green\";\r\n message.style.display = \"block\";\r\n setTimeout(handleModalClose, 1500);\r\n }\r\n else {\r\n message.innerHTML = \"Some error occured.\";\r\n message.style.color = \"red\";\r\n message.style.display = \"block\";\r\n }\r\n }\r\n xhr.open(\"POST\", url, false);\r\n xhr.setRequestHeader(\"content-type\", \"application/json\");\r\n xhr.send(json);\r\n }\r\n\r\n if (typeof document === 'undefined') return null; // As a workaround - document is not available during server side rendering in Gatsby\r\n\r\n function closeModal() {\r\n window.sessionStorage[\"modalclosed\"] = \"true\";\r\n handleModalClose();\r\n }\r\n\r\n function handleModalClose() {\r\n let toastStyle = document.getElementById('subscribeForm').style;\r\n toastStyle.bottom = -60;\r\n toastStyle.animationDuration = '0.5s';\r\n toastStyle.animationFillMode = 'forwards';\r\n toastStyle.animationTimingFunction = 'ease-out';\r\n toastStyle.animationName = 'slideout';\r\n setTimeout(() => setShow(false), 500);\r\n }\r\n\r\n function handleModalShow() {\r\n setShow(true);\r\n let toastStyle = document.getElementById('subscribeForm').style;\r\n toastStyle.animationDuration = '0.5s';\r\n toastStyle.animationFillMode = 'forwards';\r\n toastStyle.animationTimingFunction = 'ease-in';\r\n toastStyle.animationName = 'slidein';\r\n }\r\n\r\n return (\r\n <>\r\n \r\n \r\n {show &&\r\n \r\n\r\n }\r\n\r\n\r\n \r\n\r\n )\r\n}\r\n","import React, { useEffect } from \"react\";\r\nimport { graphql } from \"gatsby\";\r\n//mport Header from \"../components/Header.js\";\r\nimport SheetkraftFooter from \"../components/SheetkraftFooter.js\";\r\nimport LetsTalk from \"../components/LetsTalk\";\r\nimport TagCloud from \"../components/TagCloud\";\r\nimport Announcements from \"../components/Announcements\";\r\nimport BlogNavBar from \"../components/BlogNavBar\";\r\nimport { Link } from \"gatsby\";\r\n//import SearchApi from 'js-worker-search'\r\nimport Slide from \"react-reveal/Slide\";\r\nimport \"../styles/main.css\";\r\nimport { Helmet } from \"react-helmet\";\r\nimport styles from \"./blog.module.css\";\r\nimport BlogModal from \"../components/BlogModal\";\r\n\r\nimport AnchorLink from 'react-anchor-link-smooth-scroll'\r\n\r\nfunction PaginationLinks({ numPages, currentPage, basePath }) {\r\n if (numPages === 1) return null;\r\n return (\r\n \r\n Announcements\r\n
\r\n\r\n {\r\n data.allIndexYaml.edges.map(({ node }) => (\r\n\r\n\r\n \r\n
\r\n
\r\n
\r\n\r\n ))\r\n }\r\n Read All\r\n \r\n {'Version ' + node.version + ' has been released'}\r\n
\r\n \r\n\r\n Posted on {node.published}\r\n
\r\n\r\n
\r\n
- \r\n {Array.from({ length: numPages }, (_, i) => {\r\n let isCurrent = currentPage === i + 1;\r\n let style = isCurrent\r\n ? { color: \"red\", fontWeight: \"bold\", borderColor: \"red\" }\r\n : {};\r\n let to = i === 0 ? basePath : `${basePath}${i + 1}/`;\r\n return (\r\n
- \r\n \r\n {i + 1}\r\n \r\n \r\n );\r\n })}\r\n
\r\n
\r\n );\r\n}\r\n\r\nfunction BlogAnnouncement({ node }) {\r\n return (\r\n \r\n \r\n
\r\n\r\n {node.frontmatter.title}
\r\n \r\n\r\n {node.frontmatter.published} by\r\n
{node.excerpt}
\r\n\r\n \r\n Continue Reading\r\n \r\n\r\n {node.frontmatter.tags.map((tag, index) => {\r\n return (\r\n { funct(tag,data)}}**/\r\n >\r\n {tag}\r\n \r\n );\r\n })}\r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default props => {\r\n let { data, pageContext } = props;\r\n let { currentPage, numPages, category, tag, author } = pageContext;\r\n\r\n //For pagination\r\n let basePath = category\r\n ? `/blog/category/${category}/`\r\n : tag\r\n ? `/blog/tag/${tag}/`\r\n : author\r\n ? `/blog/author/${author}/`\r\n : `/blog/`;\r\n\r\n useEffect(() => {\r\n document.addEventListener(\"scroll\", scrollHandler);\r\n return () => {\r\n document.removeEventListener(\"scroll\", scrollHandler);\r\n };\r\n });\r\n\r\n const scrollHandler = () => {\r\n let y = document.getElementsByClassName(\"sk-adaptive-header\")[0];\r\n if (window.pageYOffset > 0) {\r\n y.classList.add(\"sk-is-sticky\");\r\n } else {\r\n y.classList.remove(\"sk-is-sticky\");\r\n }\r\n };\r\n\r\n const gotoContactBlog = {\r\n position: 'fixed',\r\n top: '47%',\r\n left: '0px',\r\n background: '#4472c4',\r\n color: '#fff',\r\n padding: '10px',\r\n transition: 'linear .2s',\r\n zIndex: '2',\r\n cursor: 'pointer'\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n Version {node.version} has been released\r\n
\r\n \r\n\r\n {node.published} by\r\n SheetKraft Bot\r\n
\r\n\r\n{node.excerpt}
\r\n\r\n \r\n Continue Reading\r\n \r\n\r\n\r\n \r\n {node.tags}\r\n \r\n
\r\n \r\n \r\n SheetKraft - Blog \r\n \r\n\r\n
\r\n < i className=\"fa fa-phone\"> \r\n
\r\n );\r\n};\r\n","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React from 'react';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport SafeAnchor from './SafeAnchor';\nvar defaultProps = {\n variant: 'primary',\n active: false,\n disabled: false,\n type: 'button'\n};\nvar Button = React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n variant = _ref.variant,\n size = _ref.size,\n active = _ref.active,\n className = _ref.className,\n block = _ref.block,\n type = _ref.type,\n as = _ref.as,\n props = _objectWithoutPropertiesLoose(_ref, [\"bsPrefix\", \"variant\", \"size\", \"active\", \"className\", \"block\", \"type\", \"as\"]);\n\n var prefix = useBootstrapPrefix(bsPrefix, 'btn');\n var classes = classNames(className, prefix, active && 'active', prefix + \"-\" + variant, block && prefix + \"-block\", size && prefix + \"-\" + size);\n\n if (props.href) {\n return /*#__PURE__*/React.createElement(SafeAnchor, _extends({}, props, {\n as: as,\n ref: ref,\n className: classNames(classes, props.disabled && 'disabled')\n }));\n }\n\n if (ref) {\n props.ref = ref;\n }\n\n if (!as) {\n props.type = type;\n }\n\n var Component = as || 'button';\n return /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n className: classes\n }));\n});\nButton.displayName = 'Button';\nButton.defaultProps = defaultProps;\nexport default Button;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport React from 'react';\nimport createChainedFunction from './createChainedFunction';\n\nfunction isTrivialHref(href) {\n return !href || href.trim() === '#';\n}\n/**\n * There are situations due to browser quirks or Bootstrap CSS where\n * an anchor tag is needed, when semantically a button tag is the\n * better choice. SafeAnchor ensures that when an anchor is used like a\n * button its accessible. It also emulates input `disabled` behavior for\n * links, which is usually desirable for Buttons, NavItems, DropdownItems, etc.\n */\n\n\nvar SafeAnchor = React.forwardRef(function (_ref, ref) {\n var _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'a' : _ref$as,\n disabled = _ref.disabled,\n onKeyDown = _ref.onKeyDown,\n props = _objectWithoutPropertiesLoose(_ref, [\"as\", \"disabled\", \"onKeyDown\"]);\n\n var handleClick = function handleClick(event) {\n var href = props.href,\n onClick = props.onClick;\n\n if (disabled || isTrivialHref(href)) {\n event.preventDefault();\n }\n\n if (disabled) {\n event.stopPropagation();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n };\n\n var handleKeyDown = function handleKeyDown(event) {\n if (event.key === ' ') {\n event.preventDefault();\n handleClick(event);\n }\n };\n\n if (isTrivialHref(props.href)) {\n props.role = props.role || 'button'; // we want to make sure there is a href attribute on the node\n // otherwise, the cursor incorrectly styled (except with role='button')\n\n props.href = props.href || '#';\n }\n\n if (disabled) {\n props.tabIndex = -1;\n props['aria-disabled'] = true;\n }\n\n return /*#__PURE__*/React.createElement(Component, _extends({\n ref: ref\n }, props, {\n onClick: handleClick,\n onKeyDown: createChainedFunction(handleKeyDown, onKeyDown)\n }));\n});\nSafeAnchor.displayName = 'SafeAnchor';\nexport default SafeAnchor;","// extracted by mini-css-extract-plugin\nmodule.exports = {\"skAdaptiveHeader\":\"blogNavBar-module--skAdaptiveHeader--1BStJ\",\"brand\":\"blogNavBar-module--brand--o6Dj6\",\"home\":\"blogNavBar-module--home--3uAIf\",\"sklogo\":\"blogNavBar-module--sklogo--3En44\",\"blogLink\":\"blogNavBar-module--blogLink--1phT6\",\"ul\":\"blogNavBar-module--ul--36oGh\"};"],"sourceRoot":""}\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n\r\n \r\n {[\r\n ...data.allMarkdownRemark.edges.map(({ node }) => [\r\n node.frontmatter.published,\r\n
\r\n \r\n
\r\n \r\n {category !== \"announcements\" && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n