Merge branch 'main' of github.com:kochie/me.kochie.io

.github/workflows/coveralls.yml

@@ -1,7 +1,9 @@
-on: ['push', 'pull_request']
-
 name: Test Coveralls
 
+on:
+  pull_request:
+    branches: [main]
+
 jobs:
   build:
     name: Build
@@ -10,7 +12,7 @@ jobs:
       FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout
 
       - uses: pnpm/action-setup@v2
         id: pnpm-install
@@ -19,7 +21,7 @@ jobs:
           run_install: false
 
       - name: Use Node.js 18.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node
         with:
           node-version: 18.x
           cache: 'pnpm'
@@ -30,6 +32,6 @@ jobs:
           pnpm run test-coverage
 
       - name: Coveralls
-        uses: coverallsapp/github-action@master
+        uses: coverallsapp/github-action
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/jest-test.yml

@@ -4,7 +4,6 @@
 name: Jest Test
 
 on:
-  push:
   pull_request:
     branches: [main]
 
@@ -27,7 +26,7 @@ jobs:
           version: latest
           run_install: false
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'

.github/workflows/next-build.yml

@@ -4,7 +4,6 @@
 name: Next Build
 
 on:
-  push:
   pull_request:
     branches: [main]
 
@@ -20,9 +19,9 @@ jobs:
         node-version: [16.x, 17.x, 18.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node
         with:
           node-version: ${{ matrix.node-version }}
       - uses: pnpm/action-setup@v2

package.json

@@ -77,7 +77,6 @@
     "jest-environment-jsdom": "^29.4.3",
     "next": "^13.2.1",
     "next-compose-plugins": "^2.2.1",
-    "next-offline": "^5.0.5",
     "next-pwa": "^5.6.0",
     "next-seo": "^5.15.0",
     "postcss": "^8.4.21",

src/components/Connections/Connections.tsx

@@ -1,58 +1,63 @@
 import React, { ReactElement } from 'react'
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import {
-  findIconDefinition,
-  IconLookup,
-  IconName,
-} from '@fortawesome/fontawesome-svg-core'
+  faGithub,
+  faGitlab,
+  faInstagram,
+  faLinkedin,
+  faMastodon,
+  faMedium,
+  faTwitter,
+} from '@fortawesome/free-brands-svg-icons'
 
 interface Connection {
-  icon: IconName
+  icon: IconDefinition
   href: string
   name: string
   color: string
 }
 
 const connections: Connection[] = [
   {
-    icon: 'linkedin',
+    icon: faLinkedin,
     href: 'https://linkedin.com/in/rkkochie',
     name: 'rkkochie',
     color: 'hover:text-linkedin',
   },
   {
-    icon: 'twitter',
+    icon: faTwitter,
     href: 'https://twitter.com/kochie',
     name: 'kochie',
     color: 'hover:text-twitter',
   },
   {
-    icon: 'instagram',
+    icon: faInstagram,
     href: 'https://instagram.com/rkkochie',
     name: 'rkkochie',
     color: 'hover:text-instagram',
   },
   {
-    icon: 'github',
+    icon: faGithub,
     href: 'https://github.com/kochie',
     name: 'kochie',
     color: 'hover:text-github',
   },
   {
-    icon: 'medium-m',
+    icon: faMedium,
     href: 'https://medium.com/@kochie',
     name: 'kochie',
     color: 'hover:text-medium',
   },
   {
-    icon: 'gitlab',
+    icon: faGitlab,
     href: 'https://gitlab.com/kochie',
     name: 'kochie',
     color: 'hover:text-gitlab',
   },
   {
-    icon: 'mastodon',
+    icon: faMastodon,
     href: 'https://melb.social/@kochie',
     name: 'kochie',
     color: 'hover:text-mastodon',
@@ -63,20 +68,16 @@ export default function Connections(): ReactElement {
   return (
     <div className="text-wheat pt-12 flex xl:flex-col flex-row items-center gap-3">
       {connections.map((connection) => {
-        const lookup: IconLookup = {
-          prefix: 'fab',
-          iconName: connection.icon,
-        }
-        const iconDefinition = findIconDefinition(lookup)
+        const iconDefinition = connection.icon
         return (
           <div
             className="w-9 transform-gpu transition duration-200 ease-in-out hover:scale-110"
-            key={connection.icon}
+            key={connection.name}
           >
             <a
               href={connection.href}
               className={connection.color}
-              aria-label={connection.icon}
+              aria-label={connection.name}
             >
               <FontAwesomeIcon
                 icon={iconDefinition}

src/components/Footer/Footer.tsx

@@ -2,9 +2,7 @@ import React, { ReactElement } from 'react'
 
 import style from './footer.module.css'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { findIconDefinition } from '@fortawesome/fontawesome-svg-core'
-
-// import "animate.css";
+import { faCopyright, faGuitar } from '@fortawesome/pro-duotone-svg-icons'
 
 export default function Footer(): ReactElement {
   const playSound = (): void => {
@@ -25,25 +23,11 @@ export default function Footer(): ReactElement {
       <footer className="bg-gray-400 dark:bg-gray-900 text-gray-900 dark:text-gray-100 grid grid-cols-3 text-sm lg:text-base px-4 lg:px-24 py-12 items-center">
         <div className={style.name}>
           Robert Koch
-          <FontAwesomeIcon
-            icon={findIconDefinition({
-              prefix: 'fad',
-              iconName: 'copyright',
-            })}
-            size="1x"
-            className="mx-1"
-          />
+          <FontAwesomeIcon icon={faCopyright} size="1x" className="mx-1" />
           {2020}
         </div>
         <div id="guitar" className={style.guitar}>
-          <FontAwesomeIcon
-            onClick={playSound}
-            icon={findIconDefinition({
-              prefix: 'fad',
-              iconName: 'guitar',
-            })}
-            size="2x"
-          />
+          <FontAwesomeIcon onClick={playSound} icon={faGuitar} size="2x" />
         </div>
         <div className={style.update}>
           <span>

src/components/Theme/ThemeButton.tsx

@@ -1,27 +1,14 @@
 import React, { ReactElement } from 'react'
 
-// import styles from './theme.module.css'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { findIconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { THEME, useTheme } from './context'
+import {
+  faLightbulbSlash,
+  faLightbulbOn,
+  faCogs,
+} from '@fortawesome/pro-duotone-svg-icons'
 
 const ThemeButton = (): ReactElement => {
-  const bulbOff = findIconDefinition({
-    prefix: 'fad',
-    iconName: 'lightbulb-slash',
-  })
-
-  const bulbOn = findIconDefinition({
-    prefix: 'fad',
-    iconName: 'lightbulb-on',
-  })
-
-  const cogs = findIconDefinition({
-    prefix: 'fad',
-    iconName: 'cogs',
-  })
-  // const currentIcon = useRef<HTMLDivElement>(null)
-
   const [theme, setTheme] = useTheme()
 
   const bulbOffDiv = (
@@ -33,7 +20,11 @@ const ThemeButton = (): ReactElement => {
       aria-label="Dark Theme"
       tabIndex={0}
     >
-      <FontAwesomeIcon icon={bulbOff} size={'2x'} className="fa-stack-1x" />
+      <FontAwesomeIcon
+        icon={faLightbulbSlash}
+        size={'2x'}
+        className="fa-stack-1x"
+      />
     </div>
   )
   const bulbOnDiv = (
@@ -45,7 +36,11 @@ const ThemeButton = (): ReactElement => {
       aria-label="Light Theme"
       tabIndex={0}
     >
-      <FontAwesomeIcon icon={bulbOn} size={'2x'} className="fa-stack-1x" />
+      <FontAwesomeIcon
+        icon={faLightbulbOn}
+        size={'2x'}
+        className="fa-stack-1x"
+      />
     </div>
   )
   const systemDiv = (
@@ -57,7 +52,7 @@ const ThemeButton = (): ReactElement => {
       aria-label="System Theme"
       tabIndex={0}
     >
-      <FontAwesomeIcon icon={cogs} size={'2x'} className="fa-stack-1x" />
+      <FontAwesomeIcon icon={faCogs} size={'2x'} className="fa-stack-1x" />
     </div>
   )
 
@@ -92,7 +87,11 @@ const ThemeButton = (): ReactElement => {
             className="w-full h-full fa-stack bg-gray-900 dark:bg-white rounded-full duration-300 animate"
             title={'Dark Theme'}
           >
-            <FontAwesomeIcon icon={bulbOff} size="lg" className="fa-stack-1x" />
+            <FontAwesomeIcon
+              icon={faLightbulbSlash}
+              size="lg"
+              className="fa-stack-1x"
+            />
           </div>
         </div>
 
@@ -102,7 +101,11 @@ const ThemeButton = (): ReactElement => {
             className="w-full h-full fa-stack bg-gray-900 dark:bg-white rounded-full duration-300 animate"
             title={'Light Theme'}
           >
-            <FontAwesomeIcon icon={bulbOn} size="lg" className="fa-stack-1x" />
+            <FontAwesomeIcon
+              icon={faLightbulbOn}
+              size="lg"
+              className="fa-stack-1x"
+            />
           </div>
         </div>
 
@@ -112,7 +115,7 @@ const ThemeButton = (): ReactElement => {
             className="w-full h-full fa-stack bg-gray-900 dark:bg-white rounded-full duration-300 animate"
             title={'System Theme'}
           >
-            <FontAwesomeIcon icon={cogs} size="lg" className="fa-stack-1x" />
+            <FontAwesomeIcon icon={faCogs} size="lg" className="fa-stack-1x" />
           </div>
         </div>
       </div>

src/pages/_app.tsx

@@ -1,23 +1,17 @@
 import React, { ReactElement, useEffect } from 'react'
 import { AppProps } from 'next/app'
-// import { init } from '../utils/sentry'
-import { fab } from '@fortawesome/free-brands-svg-icons'
-import { fas, faComment } from '@fortawesome/free-solid-svg-icons'
-import { library, config } from '@fortawesome/fontawesome-svg-core'
-import { fad } from '@fortawesome/pro-duotone-svg-icons'
+import { config } from '@fortawesome/fontawesome-svg-core'
 import * as Fathom from 'fathom-client'
 
 import '@fortawesome/fontawesome-svg-core/styles.css'
 import 'tailwindcss/tailwind.css'
 import '../assets/styles/global.css'
+
 import { ThemeButton, ThemeProvider } from '@/components/Theme'
-import Head from '@/components/Head'
 import { useRouter } from 'next/dist/client/router'
 
 config.autoAddCss = false // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
 
-library.add(fab, fas, fad, faComment)
-
 // init()
 
 function App({ Component, pageProps }: AppProps): ReactElement {