First attempt for toast that shows on SW update

Housekeeping
And other stuff

gatsby-browser.js

@@ -10,7 +10,7 @@ const { getLocale, getLanguage } = require('./src/utils/locale')
 const printCorporateMessage = require('./gatsby/browser/corporateMessage')
 const setDefaultTime = require('./gatsby/browser/defaultTime')
 
-require('./src/styles/app.scss')
+require('./src/styles/app.scss') // main styling
 
 // module.exports.wrapPageElement = require('./gatsby/wrapPageElement')
 module.exports.wrapRootElement = require('./gatsby/wrapRootElement')
@@ -28,7 +28,7 @@ module.exports.onInitialClientRender = () => {
   printCorporateMessage()
 }
 
-// exports.onRouteUpdate = ({ location }) => {
-//   const path = location.pathname + location.search + location.hash
-//   console.info('Track pageview of:', path)
-// }
+module.exports.onServiceWorkerUpdateReady = () => {
+  console.info('NEW VERSION AVAILABLE')
+  // window.location.reload()
+}

gatsby/wrapRootElement.js

@@ -1,10 +1,13 @@
 const React = require('react')
 
-const { ThemeProvider } = require('../src/store/theme')
-const { HistoryProvider } = require('../src/store/history')
+const { ThemeProvider } = require('../src/provider/theme')
+const { HistoryProvider } = require('../src/provider/history')
+const { ToastProvider } = require('../src/provider/toast')
 
 module.exports = ({ element }) => (
   <ThemeProvider>
-    <HistoryProvider>{element}</HistoryProvider>
+    <HistoryProvider>
+      <ToastProvider>{element}</ToastProvider>
+    </HistoryProvider>
   </ThemeProvider>
 )

src/components/Breadcrumb.jsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 import { Breadcrumb as BreadcrumbPlugin } from 'gatsby-plugin-breadcrumb'
 
-import { HistoryContext } from '../store/history'
+import { HistoryContext } from '../provider/history'
 
 const Breadcrumb = () => {
   const { location, crumbLabel, crumbs } = useContext(HistoryContext)

src/components/Code.jsx

@@ -1,9 +1,10 @@
 import React, { useState, useContext } from 'react'
+import Highlight, { defaultProps } from 'prism-react-renderer'
 import copy from 'copy-text-to-clipboard'
+
 import { normalize } from '../utils/normalize'
 import { lightTheme, darkTheme } from './CodeThemes'
-import Highlight, { defaultProps } from 'prism-react-renderer'
-import { ThemeContext, Mode } from '../store/theme'
+import { ThemeContext, Mode } from '../provider/theme'
 
 const highlightStart = (line) => {
   return line.some((token) => token.content.includes('highlight-start'))

src/components/Icon.jsx

@@ -2,7 +2,6 @@ import React, { createElement } from 'react'
 
 const icons = {}
 
-// TODO: check if this does not increase the overall bundlesize
 function importAll(resolve) {
   resolve.keys().forEach((file) => {
     const ext = /(?:\.([^.]+))?$/.exec(file)

src/components/MyAge.jsx

@@ -4,7 +4,7 @@ import dayjs from 'dayjs'
 import { getElapsedTime } from '../utils/helper'
 
 const MyAge = () => {
-  const dob = dayjs('1996-06-13 18:32:13')
+  const dob = dayjs('1996-06-13 10:20:00')
   const dobI18N = dob.format('LLLL')
   const dobISO = dob.format('YYYY-MM-DD')
   const age = getElapsedTime(dobISO).years

src/components/Navigation.jsx

@@ -12,11 +12,13 @@ const Navigation = () => {
   const menuLinks = useMenuLinks()
 
   useEffect(() => {
-    return globalHistory.listen(({ action }) => {
+    const unsubscribe = globalHistory.listen(({ action }) => {
       if (action === 'PUSH') {
         setOpen(false)
       }
     })
+
+    return () => unsubscribe()
   })
 
   const toggleNav = () => {

src/components/Status.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { capitalizeString } from '../utils/transform'
+import { capitalizeString } from '../utils/helper'
 
 const Status = ({ state }) => {
   const stateTransformed = capitalizeString(state)

src/components/ThemeSwitch.jsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 import { animated, useTransition, config } from '@react-spring/web'
 
-import { ThemeContext, modes, Mode } from '../store/theme'
+import { ThemeContext, modes, Mode } from '../provider/theme'
 import { Light, Dark, AutoLight, AutoDark } from './ThemeIcons'
 
 const ThemeSwitch = () => {

src/components/Toast.jsx

@@ -0,0 +1,40 @@
+import React, { useEffect } from 'react'
+
+import Icon from './Icon'
+
+function Toast({ children, type, labelClose, labelAccept, onClose, onAccept }) {
+  useEffect(() => {
+    if (type === 'toast') {
+      // TODO: add progress bar
+      const id = setTimeout(() => onClose(), 3000)
+      return () => clearTimeout(id)
+    }
+  })
+
+  return type === 'prompt' ? (
+    <div className="toast">
+      <div className="toast__text">{children}</div>
+      <div className="toast__actions">
+        <button onClick={() => onClose()} className="btn btn--small">
+          {labelClose}
+        </button>
+        <button onClick={() => onAccept()} className="btn btn--small">
+          {labelAccept}
+        </button>
+      </div>
+    </div>
+  ) : (
+    <div className="toast">
+      <div className="toast__text">{children}</div>
+      <button
+        onClick={() => onClose()}
+        className="toast__btn-close reset"
+        title={labelClose}
+      >
+        <Icon name="close" />
+      </button>
+    </div>
+  )
+}
+
+export default Toast

src/hooks/use-toast.js

@@ -0,0 +1,11 @@
+import { useContext } from 'react'
+
+import { ToastContext } from '../provider/toast'
+
+function useToast() {
+  const { add, remove } = useContext(ToastContext)
+
+  return { add, remove }
+}
+
+export default useToast

src/provider/toast.js

@@ -0,0 +1,51 @@
+import React, { createContext, useState } from 'react'
+import uniqueString from 'unique-string'
+import Toast from '../components/Toast'
+
+const ToastContext = createContext([])
+const ToastConsumer = ToastContext.Consumer
+
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([])
+
+  const toastOptions = {
+    type: 'toast', // toast/prompt
+    labelClose: 'Close',
+    labelAccept: 'Accept',
+    onClose: () => {},
+    onAccept: () => {},
+  }
+
+  const add = (content, options) => {
+    const id = uniqueString()
+    options = { ...toastOptions, ...options }
+    setToasts([...toasts, { id, content, options }])
+    return id // toast id
+  }
+  const remove = (id) => {
+    setToasts(toasts.filter((t) => t.id !== id))
+  }
+
+  return (
+    <ToastContext.Provider value={{ add, remove, toasts }}>
+      {children}
+
+      <div className="toasts-wrapper">
+        {toasts.map((t) => (
+          <Toast
+            key={t.id}
+            type={t.options.type}
+            labelClose={t.options.labelClose}
+            labelAccept={t.options.labelAccept}
+            onClose={() => t.options.onClose(() => remove(t.id))}
+            onAccept={() => t.options.onAccept(() => remove(t.id))}
+          >
+            {t.content}
+          </Toast>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  )
+}
+
+export { ToastProvider, ToastConsumer, ToastContext }

src/scripts/lightbox.js

@@ -10,6 +10,7 @@
 
 import VanillaClickOutside from 'vanilla-click-outside'
 
+// TODO: this can now be a component
 const Lightbox = {
   isZoomed: false,
   margin: 0,

src/styles/_breakpoints.scss

@@ -1,7 +1,6 @@
 // Destinations to check, after editing `$grid-breakpoints`:
 // src/utils/responsive.js
-// src/fragments/sharp.js
-// gatsby/config/commonRemark.js
+// gatsby-config.js#gatsby-remark-images
 
 $grid-breakpoints: (
   xs: 0,

src/styles/app.scss

@@ -47,13 +47,15 @@
 @import 'components/language';
 @import 'components/logo';
 @import 'components/my-age';
+@import 'components/no-script';
 @import 'components/overlay';
 @import 'components/portfolio';
 @import 'components/quote';
 @import 'components/scroll-to-top';
 @import 'components/separator';
 @import 'components/status';
 @import 'components/theme-switch';
+@import 'components/toast';
 @import 'components/tooltip';
 
 // ------------------------------

src/styles/components/_button.scss

@@ -10,10 +10,11 @@ button {
 }
 
 .btn {
-  display: inline-block;
   position: relative;
   padding: 10px 18px;
   transition: color 200ms ease-in-out;
+  border: 0;
+  background: transparent;
   color: var(--text-color-normal);
   font-size: var(--text-sm);
   font-weight: var(--font-bold);
@@ -25,4 +26,15 @@ button {
   &:hover {
     color: var(--text-color-richer);
   }
+
+  &--small {
+    padding: 6px 12px;
+    font-size: var(--text-xs);
+
+    @include border-left-right(10px);
+  }
+
+  &--inline {
+    display: inline-block;
+  }
 }

src/styles/components/_no-script.scss

@@ -0,0 +1,4 @@
+#gatsby-noscript {
+  position: fixed;
+  font-size: var(--text-xxl);
+}

src/styles/components/_toast.scss

@@ -0,0 +1,44 @@
+.toasts-wrapper {
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  left: 0px;
+  flex-direction: column;
+  margin: var(--spacing-sm);
+}
+
+.toast {
+  position: relative;
+  width: 300px;
+  max-width: 100%;
+  margin-top: var(--spacing-sm);
+  padding: var(--spacing-sm);
+  background: var(--color-primary);
+  color: var(--color-dark);
+
+  &__text {
+    font-size: var(--text-md);
+  }
+
+  &__actions {
+    display: flex;
+    margin-top: var(--spacing-sm);
+    column-gap: var(--spacing-xs);
+
+    button {
+      flex: 1;
+      color: var(--text-color-dark);
+    }
+  }
+
+  &__btn-close {
+    display: flex;
+    position: absolute;
+    top: var(--spacing-xs);
+    right: var(--spacing-xs);
+
+    .icon {
+      --icon-size: 12px;
+    }
+  }
+}

src/sw.js

@@ -0,0 +1,2 @@
+/* globals workbox */
+/* eslint-disable no-restricted-globals */