feat: add newsletter to blog posts page

src/components/NewsLetter.astro

@@ -0,0 +1,39 @@
+---
+const { listmonkInstance, listuuid } = Astro.props;
+
+const inputId = Astro.props.listuuid.substring(0,5)
+---
+<details>
+<summary>Subscribe to newsletter</summary>
+    <form method="post" action={`https://${listmonkInstance}/subscription/form`} class="listmonk-form">
+        <div>
+            <input type="hidden" name="nonce" />
+
+            <input type="email" name="email" required placeholder="E-mail" />
+            <input type="text" name="name" placeholder="Name (optional)" />
+            <input id={inputId} type="checkbox" name="l" checked="checked" value={listuuid} hidden />
+
+            <input type="submit" value="Subscribe" />
+        </div>
+    </form>
+</details>
+<style>
+    input[type="email"], input[type="text"], input[type="submit"] {
+        display: block;
+    }
+    input[type="email"], input[type="text"] {
+        margin: 0.5rem 0;
+        background-color: #fefefe;
+        color: #111;
+        border: unset;
+        height: 1.5rem;
+    }
+    input[type="submit"] {
+        background-color: var(--terminal-green);
+        color: var(--bg-color);
+        border: unset;
+        padding: 0.2rem;
+        height: 1.5rem;
+        cursor: pointer;
+    }
+</style>

src/config.ts

@@ -28,14 +28,19 @@ export const siteConfig = {
     searchEngine: 'duckduckgo', // 'google', 'duckduckgo', 'bing' (broken until M1cr0$0ft get support for it), defaults to 'google'
     // content
     displayAvatar: true, // display author avatar in the article list and info line of article page
+    newsletter: {
+        enabled: false, // enable newsletter subscription in post list page
+        type: 'listmonk', //  only 'listmonk' is supported for now, more will be added later
+        listmonk: {
+            instanceDomain: 'listmonk.yourdomain.com', // the domain of your listmonk instance
+            listuuid: '3546fc35-fd75-4163-936a-114514191981', // the id of the list to subscribe to, can be found in the listmonk admin panel
+        }
+    },
     // encryption
     // the global password to encrypt/decrypt the content, if set, all <ProtectedContent/> without specifying a password will be encrypted with this password
     // To use an environment variable to set the password, replace the value with `import.meta.env.CONTENT_PASSWORD`
     // (or process.env.CONTENT_PASSWORD, CONTENT_PASSWORD can be any string) and set the environment variable in your deployment service.
     contentPassword: 'p1easeChangeMe!',
-    // footer
-    // yes you can write html safely here
-    customFooter: '<i>I have no mouth, and I must SCREAM</i>',
     // comments
     comments: {
         type: 'artalk', // 'artalk','giscus','fediverse','email','hatsu'
@@ -83,6 +88,9 @@ export const siteConfig = {
             instanceDomain: '',
         }
     },
+    // footer
+    // yes you can write html safely here
+    customFooter: '<i>I have no mouth, and I must SCREAM</i>',
     // umami analytics
     // by enabling this, you can track the visitors of your site
     siteAnalytics: {

src/pages/blog.astro

@@ -1,6 +1,8 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import { getCollection } from 'astro:content';
+import NewsLetter from "../components/NewsLetter.astro";
+import {siteConfig} from "../config";
 
 const posts = await getCollection('posts');
 posts.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime());
@@ -38,6 +40,7 @@ posts.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDat
         <br />
         <a href="/rss.xml" style="margin-left: 1rem;">Subscribe to RSS feed</a>
       </p>
+      {siteConfig.newsletter.enabled && <NewsLetter listmonkInstance={siteConfig.newsletter.listmonk.instanceDomain} listuuid={siteConfig.newsletter.listmonk.listuuid} />}
     </div>
   </div>
 </Layout>