feat: umami

lcandy2 · Dec 5, 2024 · 338967f · 338967f
1 parent a6e583b
commit 338967f
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 38 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "lit": "^3.2.0",
     "million": "^3.1.11",
     "next": "14.2.5",
+    "next-umami": "^0.0.4",
     "notistack": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/_libs/umami-provider.tsx b/src/app/_libs/umami-provider.tsx
@@ -0,0 +1,23 @@
+import UmamiProvider from 'next-umami';
+import { ReactNode } from 'react';
+
+interface UmamiProviderProps {
+  children: ReactNode;
+}
+
+export default function WPNUmamiProvider({ children }: UmamiProviderProps) {\
+  const websiteId = process.env.NEXT_PUBLIC_UMAMI_ID;
+\
+  if (!websiteId) {
+    return <>{children}</>;
+  }
+\
+  return (
+    <UmamiProvider
+      websiteId={websiteId}
+      src={process.env.NEXT_PUBLIC_UMAMI_SRC}
+    >
+      {children}
+    </UmamiProvider>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -10,6 +10,7 @@ import Footer from './_libs/components/footer';
 import * as Fonts from '@/app/_libs/fonts/fonts';
 import { Analytics } from '@vercel/analytics/react';
 import Script from 'next/script';
+import WPNUmamiProvider from './_libs/umami-provider';
 
 const APP_NAME = APP_MANIFEST.name;
 const APP_DEFAULT_TITLE = APP_MANIFEST.name;
@@ -136,48 +137,50 @@ export default function RootLayout({
           }}
         >
           <Experimental_CssVarsProvider theme={MuiTheme}>
-            <section className="flex flex-col sm:mb-l">
-              <div className="h-header block">
-                <Header />
-              </div>
-              <div className="grow flex flex-col justify-start sm:ml-xl sm:mr-l transition-all duration-md ease-md">
-                <div className="grow transition-all duration-md ease-md box-border overflow-auto w-full h-content-sm sm:h-content bg-surface sm:rounded-shape-xl rounded-t-shape-xl">
-                  <div className="pt-xl scrollbar-track-primary scrollbar-thin overflow-y-auto h-full rounded-[inherit] box-border">
-                    <div className="grow flex flex-row items-start box-border px-xl w-full h-full">
-                      <div className="flex flex-col w-full h-full text-on-surface">
-                        <main className="grow block w-full">
-                          {children}
-                          {modal}
-                        </main>
-                        <Footer />
+            <WPNUmamiProvider websiteId={process.env.UMAMI_ID}>
+              <section className="flex flex-col sm:mb-l">
+                <div className="h-header block">
+                  <Header />
+                </div>
+                <div className="grow flex flex-col justify-start sm:ml-xl sm:mr-l transition-all duration-md ease-md">
+                  <div className="grow transition-all duration-md ease-md box-border overflow-auto w-full h-content-sm sm:h-content bg-surface sm:rounded-shape-xl rounded-t-shape-xl">
+                    <div className="pt-xl scrollbar-track-primary scrollbar-thin overflow-y-auto h-full rounded-[inherit] box-border">
+                      <div className="grow flex flex-row items-start box-border px-xl w-full h-full">
+                        <div className="flex flex-col w-full h-full text-on-surface">
+                          <main className="grow block w-full">
+                            {children}
+                            {modal}
+                          </main>
+                          <Footer />
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </section>
-            <section id="modal-root" />
-            <Analytics />
-            {process.env.CFTOKEN && (
-              <Script
-                defer
-                src="https://static.cloudflareinsights.com/beacon.min.js"
-                data-cf-beacon={`{"token": "${process.env.CFTOKEN}"}`}
-              ></Script>
-            )}
-            {process.env.MSID && (
-              <Script
-                type="text/javascript"
-                strategy="lazyOnload"
-                id="clarity-script"
-              >
-                {`(function(c,l,a,r,i,t,y){
+              </section>
+              <section id="modal-root" />
+              <Analytics />
+              {process.env.CFTOKEN && (
+                <Script
+                  defer
+                  src="https://static.cloudflareinsights.com/beacon.min.js"
+                  data-cf-beacon={`{"token": "${process.env.CFTOKEN}"}`}
+                ></Script>
+              )}
+              {process.env.MSID && (
+                <Script
+                  type="text/javascript"
+                  strategy="lazyOnload"
+                  id="clarity-script"
+                >
+                  {`(function(c,l,a,r,i,t,y){
               c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
               t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
               y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
             })(window, document, "clarity", "script", "${process.env.MSID}");`}
-              </Script>
-            )}
+                </Script>
+              )}
+            </WPNUmamiProvider>
           </Experimental_CssVarsProvider>
         </AppRouterCacheProvider>
       </body>