Merge pull request #4 from DVDAGames/feature/newsletter

feat: add mailerlite newsletter form
DVDAGames · May 3, 2024 · 63794c1 · 63794c1
2 parents 95fe033 + 4b9c12a
commit 63794c1
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 22 deletions.
diff --git a/src/app/_components/footer.tsx b/src/app/_components/footer.tsx
@@ -7,26 +7,27 @@ export function Footer() {
   return (
     <footer className="bg-neutral-50 border-t border-neutral-200">
       <Container>
-        <div className="py-28 flex flex-col lg:flex-row items-center">
-          <div className="flex flex-col lg:w-1/2">
-            <h3 className="text-4xl lg:text-[2.5rem] font-bold tracking-tighter leading-tight text-center lg:text-left mb-10 lg:mb-0 lg:pr-4">
-              Get in Touch
-            </h3>
-            <div className="">hello [at] dvdagames.com</div>
-          </div>
-          <div className="flex flex-col lg:w-1/2 items-end">
-            <ul className="flex flex-row">
-              <li className="mr-3">
-                <a href={`https://github.com/dvdagames/`}>GitHub</a>
-              </li>
-              <li className="mr-3">
-                <a href={`https://twitter.com/dvdagames`}>Twitter</a>
-              </li>
-              <li>
-                <a href={`https://dvdagames.itch.io`}>Itch.io</a>
-              </li>
-            </ul>
+        <div className="py-28 flex flex-col">
+          <div className="flex flow-row w-full justify-between lg:text-left mb-10 lg:mb-0">
+            <div className="flex flex-col lg:w-1/2">
+              <h3 className="text-4xl lg:text-[2.5rem] font-bold tracking-tighter leading-tight">Get in Touch</h3>
+              <div className="">hello [at] dvdagames.com</div>
+            </div>
+            <div className="flex flex-col lg:w-1/2 items-end">
+              <ul className="flex flex-row">
+                <li className="mr-3">
+                  <a href={`https://github.com/dvdagames/`}>GitHub</a>
+                </li>
+                <li className="mr-3">
+                  <a href={`https://twitter.com/dvdagames`}>Twitter</a>
+                </li>
+                <li>
+                  <a href={`https://dvdagames.itch.io`}>Itch.io</a>
+                </li>
+              </ul>
+            </div>
           </div>
+          <div className="flex flex-col w-full ml-embedded mt-10 mb-10" data-form="Ac69hd"></div>
         </div>
       </Container>
       <section className="fixed flex bottom-0 right-0 justify-start items-center w-full min-h-[64px]">

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -4,7 +4,7 @@ import Header from "@/app/_components/header";
 import Container from "@/app/_components/container";
 import { PostTitle } from "@/app/_components/post-title";
 
-export function About(): React.ReactElement {
+export default async function About() {
   return (
     <main>
       <Container>
@@ -28,5 +28,3 @@ export function About(): React.ReactElement {
     </main>
   );
 }
-
-export default About;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { IBM_Plex_Mono } from "next/font/google";
+import Script from "next/script";
 
 import EasterEgg from "@/app/_components/easter-egg";
 import Footer from "@/app/_components/footer";
@@ -20,6 +21,7 @@ export const metadata: Metadata = {
   },
 };
 
+// @ts-disable
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -39,6 +41,14 @@ export default function RootLayout({
         <meta name="theme-color" content="#000" />
         <link rel="alternate" type="application/rss+xml" href="/feed.xml" />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css" />
+        <Script id="mailer-lite">
+          {`(function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[])
+            .push(arguments);},l=d.createElement(e),l.async=1,l.src=u,
+            n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);})
+            (window,document,'script','https://assets.mailerlite.com/js/universal.js','ml');
+            ml('account', '932293')`}
+          ;
+        </Script>
       </head>
       <body className={ibm.className}>
         <div className="min-h-screen">{children}</div>