replace kofi button with react-kofi, plus all that config stuff

.githooks/pre-push

@@ -4,6 +4,7 @@
 if grep -q '"workspaces":' package.json; then
     echo "Error: package.json contains a workspaces section. Push aborted."
     echo "Please remove the workspaces section before pushing."
+    echo "To do this, run './switch-mode.sh npm', recommit, then push again."
     exit 1
 fi
 

README.md

@@ -129,5 +129,10 @@ There is a script in the root of the repo to switch between npm packages and loc
 
 - `./switch-mode.sh local` to switch to local development mode
 - `./switch-mode.sh npm` to switch to npm packages mode
+- `./switch-mode.sh src` to switch to src mode 
 
 switch-mode will update the package.json in the root directory to point to the correct version of the package.
+
+#### Path aliases:
+* the `~` in the jsconfig.json is a path alias for the node_modules folder. This is to allow the use of the local packages in the src mode.
+* the `@` in the jsconfig.json is a path alias for the project root. 

app/typr/PageContent.js

@@ -11,8 +11,8 @@ import {
 } from "@/lib/typr-demo/indexedDB"; // Import the IndexedDB utility
 
 
-
-import "tiptypr/dist/styles.css";
+import "~/react-kofi/dist/kofi.css";
+import "~/tiptypr/dist/styles.css";
 import Tiptypr from "tiptypr";
 // import Head from 'next/head';
 
@@ -42,7 +42,8 @@ import { defaultProps } from "tiptypr";
 import { customDeepMerge } from "@/lib/typr-demo/customDeepMerge";
 import IndexedDBBrowser from "@/components/typr-demo/IndexedDBBrowser";
 import { openDB } from "idb";
-import KoFiDialog from "@/components/ko-fi-button/KoFiDialog";
+// import KoFiDialog from "@/components/ko-fi-button/KoFiDialog";
+import {KoFiDialog} from "react-kofi";
 
 const avatarOptions = [
   {
@@ -628,7 +629,7 @@ function DemoPageContent() {
                   Graeme
                 </a>
               </p>
-              <KoFiDialog color="#53b1e6" label={"Support me"} />
+              <KoFiDialog color="#53b1e6" label={"Support me"}/>
             </div>
           </div>
           <DemoCodeDialog

components/authorBio.js

@@ -1,12 +1,11 @@
 import SocialShare from "@/components/SocialShare";
 import Image from "next/image";
-import dynamic from "next/dynamic";
+// import dynamic from "next/dynamic";
 import { DribbbleLogo, GithubLogo, TwitterLogo } from "./icons";
 
-const KoFiButton = dynamic(
-  () => import("@/components/ko-fi-button/Ko-Fi-Button"),
-  { ssr: false }
-);
+
+import '~/react-kofi/dist/kofi.css';
+import {KoFiButton} from "react-kofi";
 
 export default function AuthorBio({ author, slug, title }) {
   const pic = author?.avatar?.data?.attributes?.url