feature: newsletter

package.json

@@ -19,6 +19,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@nyariv/sandboxjs": "^0.8.23",
     "@payloadcms/db-postgres": "^3.22.0",
     "@payloadcms/next": "^3.22.0",
     "@payloadcms/richtext-lexical": "^3.22.0",

src/compositions/PublicationAndNewsletter/NewsletterItem.tsx

@@ -0,0 +1,22 @@
+import styles from "./newsletteritem.module.scss"
+
+type NewsletterItemProps = {
+  title: string;
+  pubDate: string;
+  link: string
+}
+
+export const NewsletterItem = ({title, pubDate, link}: NewsletterItemProps) => {
+  const date = new Date(pubDate);
+
+  return (
+    <div>
+      <div className={styles.date}>{date.toLocaleDateString()}</div>
+      <div>
+        <a
+          className={styles.title}
+          href={link} target={"_blank"}>{title}</a>
+      </div>
+    </div>
+  )
+}

src/compositions/PublicationAndNewsletter/PublicationAndNewsletter.tsx

@@ -0,0 +1,79 @@
+import { Section } from '@/components/Section/Section'
+import { Container } from '@/components/Container/Container'
+import { Row } from '@/components/Flex/Row'
+import { Col } from '@/components/Flex/Col'
+import { Title } from '@/components/Title/Title'
+import { NewsletterItem } from '@/compositions/PublicationAndNewsletter/NewsletterItem'
+import styles from "./styles.module.scss"
+import Image from 'next/image'
+import nordlicht from "./nordlicht.png"
+import envelope from "./envelope.svg"
+import Sandbox from '@nyariv/sandboxjs'
+
+type NewsletterData = {
+  guid: string,
+  title: string,
+  link: string,
+  pubDate: string,
+}
+
+export const PublicationAndNewsletter = async () => {
+
+  let archiveData: NewsletterData[] = []
+
+  try {
+    const response = await fetch(
+      'https://s3-eu-west-1.amazonaws.com/files.crsend.com/37000/37866/rss/mailings.js',
+      { cache: "force-cache", next: { revalidate: 3600 }}
+    );
+    const jsContent = await response.text();
+
+    // safe (?) alternative to `eval()`
+    const sandbox = new Sandbox();
+    const scope: {cr_archive: NewsletterData[] } = { cr_archive: [] };
+    const exec = sandbox.compile(jsContent);
+    exec(scope).run();
+
+    archiveData = scope.cr_archive.slice(0, 3);
+
+  } catch {
+    console.error("Could not fetch newsletters. Please check PublicationAndNewsletter component")
+  }
+
+  return (
+    <Section backgroundColor={"off-white"}>
+      <Container>
+        <Row alignItems={"center"}>
+          <Col>
+            <a href={"https://storage.googleapis.com/dreikoenige/documents/nordlicht76-web.pdf"} target={"_blank"}>
+              <Image
+                className={styles.image}
+                src={nordlicht}
+                height={500}
+                alt={"Pfarreimagazin Ausgabe 67"}
+              />
+            </a>
+          </Col>
+          <Col>
+            <div className={styles.titleContainer}>
+              <Image src={envelope} alt={"Newsletter icon"}/>
+              <Title
+                title={"Newsletter aus dem Bistum"}
+                size={"md"}
+              />
+            </div>
+
+              {archiveData.map((item) => (
+                <NewsletterItem
+                  key={item.guid}
+                  title={item.title}
+                  link={item.link}
+                  pubDate={item.pubDate}>
+                </NewsletterItem>
+              ))}
+          </Col>
+        </Row>
+      </Container>
+    </Section>
+  )
+}

src/compositions/PublicationAndNewsletter/envelope.svg

@@ -0,0 +1 @@
+<svg fill="#728F8D" height="50px" width="50px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 382.117 382.117" xml:space="preserve" stroke="#4d4d4d"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M336.764,45.945H45.354C20.346,45.945,0,65.484,0,89.5v203.117c0,24.016,20.346,43.555,45.354,43.555h291.41 c25.008,0,45.353-19.539,45.353-43.555V89.5C382.117,65.484,361.772,45.945,336.764,45.945z M336.764,297.72H45.354 c-3.676,0-6.9-2.384-6.9-5.103V116.359l131.797,111.27c2.702,2.282,6.138,3.538,9.676,3.538l22.259,0.001 c3.536,0,6.974-1.257,9.677-3.539l131.803-111.274v176.264C343.664,295.336,340.439,297.72,336.764,297.72z M191.059,192.987 L62.87,84.397h256.378L191.059,192.987z"></path> </g></svg>

src/compositions/PublicationAndNewsletter/newsletteritem.module.scss

@@ -0,0 +1,8 @@
+.date {
+  font-size: 16px;
+  margin-top: 25px;
+}
+
+.title {
+  color: inherit;
+}

src/compositions/PublicationAndNewsletter/styles.module.scss

@@ -0,0 +1,10 @@
+.image {
+  border: 30px solid #f8f8f8;
+  margin-bottom: 10px;
+}
+
+.titleContainer {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}

src/pageComponents/Home/Home.tsx

@@ -20,6 +20,7 @@ import { CollapsibleImageWithText } from '@/compositions/CollapsibleImageWithTex
 import { MoreInformation } from '@/pageComponents/Home/MoreInformation'
 import { Button } from '@/components/Button/Button'
 import styles from "./styles.module.scss"
+import { PublicationAndNewsletter } from '@/compositions/PublicationAndNewsletter/PublicationAndNewsletter'
 
 type HomeProps = {
   events: Event[],
@@ -155,6 +156,8 @@ export const Home = ({
         </Section>
       </ContentWithSlider>
 
+      <PublicationAndNewsletter />
+
       <ContactSection
         title={'Kontakt'}
         description={'Haben Sie Fragen zum Glauben, zu den Sakramenten oder unseren Angeboten? Benötigen Sie Hilfe in einer schwierigen Situation oder möchten Sie einfach Ihre Gedanken mit uns teilen?\n' +

yarn.lock

@@ -3582,6 +3582,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@nyariv/sandboxjs@npm:^0.8.23":
+  version: 0.8.23
+  resolution: "@nyariv/sandboxjs@npm:0.8.23"
+  checksum: 10c0/b0b7513a950c72e087fa90d779dd14f05158334be3961d6af3b10f29f9f94f52543a7d0879b180247f43144d31a80b11ae53c1e225c9de2fd653a915dec55b23
+  languageName: node
+  linkType: hard
+
 "@one-ini/wasm@npm:0.1.1":
   version: 0.1.1
   resolution: "@one-ini/wasm@npm:0.1.1"
@@ -8198,6 +8205,7 @@ __metadata:
   resolution: "drei-koenige-v3@workspace:."
   dependencies:
     "@chromatic-com/storybook": "npm:^1.6.1"
+    "@nyariv/sandboxjs": "npm:^0.8.23"
     "@payloadcms/db-postgres": "npm:^3.22.0"
     "@payloadcms/next": "npm:^3.22.0"
     "@payloadcms/richtext-lexical": "npm:^3.22.0"