diff --git a/content/projects.yml b/content/projects.yml index e3bf4cd..56da6e4 100644 --- a/content/projects.yml +++ b/content/projects.yml @@ -27,6 +27,9 @@ - React - Ethereum - Web3 + - 3Box + - Polygon + - Binance Smart Chain - title: 'Ocean Protocol - IPFS Integration' slug: '/oceanprotocol-ipfs/' diff --git a/gatsby-browser.js b/gatsby-browser.js index 0559d3f..d72a0f8 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -2,6 +2,7 @@ import wrapPageElementWithLayout from './src/helpers/wrapPageElement' // Global styles import './src/styles/global.css' +import './src/styles/_toast.css' // IntersectionObserver polyfill for gatsby-image (Safari, IE) if (typeof window !== 'undefined' && !window.IntersectionObserver) { @@ -27,11 +28,9 @@ export const shouldUpdateScroll = ({ // Display a message when a service worker updates // https://www.gatsbyjs.org/docs/add-offline-support-with-a-service-worker/#displaying-a-message-when-a-service-worker-updates export const onServiceWorkerUpdateReady = () => { - const answer = window.confirm( - 'This application has been updated. ' + - 'Reload to display the latest version?' - ) - if (answer === true) { - window.location.reload() - } + const div = document.createElement('div') + div.id = 'toast' + div.classList.add('alert', 'alert-info') + div.innerHTML = `` + document.body.append(div) } diff --git a/src/styles/_toast.css b/src/styles/_toast.css new file mode 100644 index 0000000..649aba8 --- /dev/null +++ b/src/styles/_toast.css @@ -0,0 +1,41 @@ +#toast { + position: sticky; + z-index: 10; + bottom: var(--spacer); + left: calc(var(--spacer) / 2); + right: calc(var(--spacer) / 2); + margin: 0 auto; + width: fit-content; + font-size: var(--font-size-small); + padding: 0; + animation: animation 0.2s ease-out backwards; + background: var(--body-background-color); + border-radius: var(--border-radius); + border: var(--stroke-width) solid transparent; + box-shadow: var(--box-shadow); +} + +#toast button { + font-family: inherit; + font-weight: inherit; + font-size: inherit; + color: inherit; + background: inherit; + border: none; + cursor: pointer; + margin: 0; + padding: calc(var(--spacer) / 3) var(--spacer); +} + +#toast button span { + color: var(--link-color); +} + +@keyframes animation { + 0% { + transform: translateY(-3rem); + } + 100% { + transform: translateY(0); + } +}