add about and events sections

.eleventy.js

@@ -1,4 +1,5 @@
 const path = require('path')
+const fs = require('fs')
 const yaml = require('js-yaml')
 const { DateTime } = require('luxon')
 const readingTime = require('reading-time')
@@ -30,6 +31,25 @@ module.exports = function (eleventyConfig) {
     )
   )
 
+  function includeMarkdown(filePath) {
+    filePath = String(filePath)
+    const fullPath = path.resolve(process.cwd(), filePath)
+    let mdContent
+    try {
+      mdContent = fs.readFileSync(fullPath, "utf8")
+    } catch (err) {
+      console.error(`Error reading file at: ${fullPath}`, err)
+      return `<p>Error reading file at: ${fullPath}</p>`
+    }
+    return markdown.render(mdContent)
+  }
+
+  // Register as a shortcode for content files
+  eleventyConfig.addShortcode("includeMarkdown", includeMarkdown)
+  // Also register as a Nunjucks global so includes have access to it
+  eleventyConfig.addNunjucksGlobal("includeMarkdown", includeMarkdown)
+
+
   eleventyConfig.addPlugin(gitBuildPlugin, {
     repos: [
       { name: 'blog' },

docker-compose.yml

@@ -0,0 +1,13 @@
+version: '3.8'
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "8080:80"
+    volumes:
+      - .:/app
+      - /app/node_modules
+    environment:
+      - NODE_ENV=production

eleventy/parsers/markdown.js

@@ -7,7 +7,7 @@ const slugify = require('../filters/slugify')
 
 const md = markdownIt({
   html: true,
-  breaks: true,
+  breaks: false,
   linkify: true,
   typographer: true,
 })

src/_data/site.yml

@@ -42,6 +42,7 @@ navigation:
       text: Discord
       link: https://discord.redbrick.dcu.ie
 drawer: navigation
+
 home:
   hero:
     title:
@@ -55,6 +56,11 @@ home:
       secondary:
         text: Discord
         link: https://discord.redbrick.dcu.ie
+      tertiary:
+        text: Learn More!
+        link: "#about"
+    events:
+      api: https://clubsandsocs.jakefarrell.ie/dcuclubsandsocs.ie/society/redbrick
     graphic:
       image1:
         image: https://img.redbrick.dcu.ie/150x150/https://cdn.redbrick.dcu.ie/atlas/static/img/newsletter-snap.webp
@@ -75,6 +81,7 @@ home:
         alt: Discord emote
       image7:
         alt: Redbrick logo
+
   cta:
     title: Don't Miss Out
     body: Redbrick hosts events for everything tech related - from computer programming tutorials to workshops with multinational tech companies.
@@ -91,6 +98,7 @@ home:
       r3c1: https://img.redbrick.dcu.ie/1000x500/https://cdn.redbrick.dcu.ie/atlas/static/img/hecker.jpg
       r3c2: https://img.redbrick.dcu.ie/1000x500/https://cdn.redbrick.dcu.ie/atlas/static/img/cmt-24-25.jpg
       r3c3: https://img.redbrick.dcu.ie/1000x500/https://cdn.redbrick.dcu.ie/atlas/static/img/CSBallCmt24.jpg
+
   committee:
     imageURL: https://img.redbrick.dcu.ie/150x275,fit/https://cdn.redbrick.dcu.ie/atlas/
     year: cmt25-26
@@ -146,3 +154,5 @@ home:
      - name: Pearse Cope
        position: 🥇 First Year Rep.
        username: pearse
+  about:
+    heading: About Us!

src/_includes/home/sections/about.md

@@ -0,0 +1,27 @@
+*"What is Redbrick?"* - this is the age-old query which has plagued the DCU Networking Society for years.
+Redbrick
+is such a diverse society that a million monkeys working on a million typewriters for a million years might
+reproduce the works of Shakespeare, but they'll never come up with a concise explanation as to what Redbrick is.
+
+
+Simply put, Redbrick is a rather big social society with a slant on computers and technology. We host a plethora
+of techy events designed to entertain and educate anyone and everyone, including cinema trips, pub nights and
+tutorials and workshops on programming, web design and graphic design. Expect to see the return of the annual
+RedBrick Freshers' Ball *(booze! booze! booze!)* and the table quiz.
+
+Redbrick isn't just about events though; we are lucky enough to own our own servers on which we host the
+services used daily by our members: Redbrick Discord Server *(our most popular service, as it's great for
+putting off assignments until the last minute, waffling about whatever's on your mind and meeting new
+people)*,webspace *(host your own website with massive amounts of storage space)*, forums/message
+boards, the photo gallery and your own `@redbrick.dcu.ie` e-mail address. We also have our own [**wiki site**](https://wiki.redbrick.dcu.ie),
+where all members can create/edit/~~vandalise~~ pages on whatever you feel like. You can access all of these
+services from any computer connected to the Internet.
+
+
+Networking societies are to be found all over the country, and Redbrick - as part of the Intersocs network - is
+often found mingling with other nerds from Trinity, NUI Maynooth and University of Limerick, both at
+Intersocs events and in the Discord channels.
+
+
+So, if you want to make new friends, talk about anything that's on your mind, or just get twisted because you
+have nothing better to do with your time, RedBrick has something to offer you!

src/_includes/home/sections/about.njk

@@ -0,0 +1,14 @@
+<section class="relative hero min-h-50%">
+  <img class="absolute inset-0" src="https://cdn.redbrick.dcu.ie/atlas/static/img/spotlight-bg.webp" alt="" />
+  <div class="absolute inset-0 -z-50 bg-base-200"></div>
+  <div class="hero-content px-5 py-10 lg:py-20 h-full w-full flex-col md:flex-row" id="about">
+    <div class="max-w-md lg:max-w-2xl text-center md:text-start">
+      <h1 class="text-3xl lg:text-5xl font-bold">
+        About Us
+      </h1>
+      <div class="mt-4 text-md prose whitespace-normal">
+        {{ includeMarkdown("./src/_includes/home/sections/about.md") | safe }}
+      </div>
+    </div>
+  </div>
+</section>

src/_includes/home/sections/events-carousel.njk

@@ -0,0 +1,115 @@
+<div id="events-carousel"></div>
+
+<script>
+  (async function () {
+    const activities_api = '{{ site.home.hero.events.api }}/activities';
+    const events_api = '{{ site.home.hero.events.api }}/events';
+
+    try {
+      const [activitiesResponse, eventsResponse] = await Promise.all([
+        fetch(activities_api),
+        fetch(events_api)
+      ]);
+
+      if (!activitiesResponse.ok) {
+        throw new Error(`Activities API error: ${activitiesResponse.status} ${activitiesResponse.statusText}`);
+      }
+      if (!eventsResponse.ok) {
+        throw new Error(`Events API error: ${eventsResponse.status} ${eventsResponse.statusText}`);
+      }
+
+      const [activitiesData, eventsData] = await Promise.all([
+        activitiesResponse.json(),
+        eventsResponse.json()
+      ]);
+
+      const events = [...activitiesData, ...eventsData];
+      console.log('Combined events:', events);
+
+      if (events.length === 0) {
+        document.getElementById('events-carousel').innerHTML = `
+        <section class="bg-base-100">
+          <div class="px-5 pt-5 md:px-10 md:pt-10">
+            <h1 class="text-3xl font-bold">Upcoming Events:</h1>
+          </div>
+          <div class="flex p-5 md:p-10 !pt-5">
+            <p>No upcoming events at the moment. Please check back later!</p>
+          </div>
+        </section>
+        `
+        return;
+      }
+
+      const sectionHTML = `
+        <section class="bg-base-100">
+          <div class="px-5 pt-5 md:px-10 md:pt-10">
+            <h1 class="text-3xl font-bold">Upcoming Events:</h1>
+          </div>
+          <div class="flex p-5 md:p-10 !pt-5 space-x-5 md:space-x-10 overflow-x-scroll">
+            ${events.map(event => `
+            <a href="https://join.redbrick.dcu.ie">
+              <div data-cmt-trigger class="flex flex-col items-center">
+                <h2 data-cmt-title="${event.name}" class="font-bold md:text-md h-10 whitespace-nowrap">
+                  ${event.name}
+                </h2>
+                <div data-cmt-card class="indicator overflow-visible">
+                  <span class="badge badge-primary lg:badge-lg px-2 indicator-item indicator-start -translate-x-[10%] -translate-y-1/4 shadow">
+                    <small class="font-mono text-white text-xs lg:text-sm">
+                      ${event.day || 'soon &trade;'}
+                    </small>
+                  </span>
+                  <div class="relative rounded-xl border border-base-content/20 shadow-xl shadow-slate-950/20 overflow-hidden">
+<img class="-z-10 aspect-[0.75] w-60 object-cover object-center" src="${event.image || '{{ site.images.brick.src }}'}" alt="${event.name}" />
+          <div class="absolute bottom-0 w-full p-2 bg-base-200 bg-opacity-75 backdrop-blur-sm">
+            <p class="text-center md:text-lg">
+              ${event.location}
+            </p>
+          </div>
+                  </div>
+                </div>
+              </div>
+            </a>
+            `).join('')}
+          </div>
+        </section>
+      `;
+
+      document.getElementById('events-carousel').innerHTML = sectionHTML;
+    } catch (error) {
+      console.error('Error fetching or processing events:', error);
+      document.getElementById('events-carousel').innerHTML = `<p>Error loading events: ${error.message}</p>`;
+    }
+  })();
+  if (!userAgent.getDevice().type) { // is a desktop device
+    gsap.registerPlugin(ScrollTrigger)
+    gsap.registerPlugin(TextPlugin)
+    gsap.set("[data-cmt-card]", {
+      scale: 0.9,
+      opacity: 0,
+    })
+    gsap.set("[data-cmt-title]", {
+      text: "",
+    })
+    ScrollTrigger.batch("[data-cmt-trigger]", {
+      once: true,
+      end: "bottom bottom",
+      onEnter: (batch) => batch.forEach((element, i) => {
+        const stagger = 0.2
+        const cardElement = element.querySelector("[data-cmt-card]")
+        const titleElement = element.querySelector("[data-cmt-title]")
+        gsap.to(cardElement, {
+          scale: 1,
+          opacity: 1,
+          duration: 0.3,
+          ease: "power2.inOut",
+          delay: i * stagger,
+        })
+        gsap.to(titleElement, {
+          text: titleElement.dataset.cmtTitle,
+          duration: 0.75,
+          delay: 0.25 + (i * stagger),
+        })
+      }),
+    })
+  }
+</script>

src/_includes/home/sections/events.njk

@@ -0,0 +1,39 @@
+<section class="relative hero min-h-50%">
+  <div class="hero-content px-5 py-5 lg:py-10 w-full flex-col md:flex-row" id="events">
+    <div class="max-w-md lg:max-w-2xl text-center md:text-start">
+      <h1 class="text-3xl lg:text-5xl font-bold">
+        Events
+      </h1>
+      <p class="mt-4 text-md/relaxed">
+        Redbrick hosts a variety of events throughout the year, from LAN parties to workshops and talks...
+      </p>
+    </div>
+    <div class="relative -z-20 perspective-1600 w-full md:w-1/2 aspect-square">
+      <img class="hero-card absolute bottom-[62%] left-[12%] h-[32%] object-contain"
+        src="{{ site.home.hero.graphic.image1.image }}"
+        alt="{{ site.home.hero.graphic.image1.alt }}" data-events-card />
+      <img class="hero-card absolute bottom-[30%] left-[35%] h-[50%] object-contain"
+        src="{{ site.home.hero.graphic.image2.image }}"
+        alt="{{ site.home.hero.graphic.image2.alt }}" data-events-card />
+      <img class="hero-card absolute bottom-[10%] left-[10%] h-[26%] object-contain"
+        src="{{ site.home.hero.graphic.image3.image }}"
+        alt="{{ site.home.hero.graphic.image3.alt }}" data-events-card />
+      <img class="hero-card absolute bottom-[10%] left-[50%] h-[22%] object-contain"
+        src="{{ site.home.hero.graphic.image4.image }}"
+        alt="{{ site.home.hero.graphic.image4.alt }}" data-events-card />
+    </div>
+  </div>
+</section>
+{% include "home/sections/events-carousel.njk" %}
+
+<script>
+  gsap.from("[data-events-card]", {
+    opacity: 0,
+    scale: 0,
+    y: 50,
+    delay: 0.8,
+    ease: "elastic(1,1)",
+    duration: 1.25,
+    stagger: 0.2
+  })
+</script>

src/_includes/home/sections/hero.njk

@@ -19,6 +19,11 @@
           {{ site.home.hero.buttons.secondary.text }}
         </a>
       </div>
+      <div class="mt-8 flex flex-wrap gap-4 justify-center md:justify-start">
+        <a class="btn btn-neutral w-full sm:w-36" href="{{ site.home.hero.buttons.tertiary.link }}" rel="noreferrer">
+          {{ site.home.hero.buttons.tertiary.text }}
+        </a>
+        </div>
     </div>
     {% include "home/sections/hero/hero-graphic.njk" %}
   </div>

src/site/assets/main.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 @layer base {
-  body {
+  html {
     scroll-behavior: smooth;
   }
 }

src/site/index.md

@@ -4,5 +4,7 @@ layout: default.njk
 <main>
   {% include "home/sections/hero.njk" %}
   {% include "home/sections/committee.njk" %}
+  {% include "home/sections/about.njk" %}
+  {% include "home/sections/events.njk" %}
   {% include "home/sections/cta.njk" %}
-</main>
+</main>