feat: render markdown in calendar event descriptions

.gitignore

@@ -5,4 +5,5 @@ resources/
 .DS_Store
 .hugo_build.lock
 content/de/calendar.md
-content/en/calendar.md
+content/en/calendar.md
+node_modules

README.md

@@ -2,51 +2,57 @@
 
 Staging: https://staging.x-hain.de [![status-badge](https://ci.x-hain.de/api/badges/xHain-hackspace/xhain-website/status.svg?branch=staging)](https://ci.x-hain.de/xHain-hackspace/xhain-website)
 
-Production: https://www.x-hain.de  [![status-badge](https://ci.x-hain.de/api/badges/xHain-hackspace/xhain-website/status.svg?branch=main)](https://ci.x-hain.de/xHain-hackspace/xhain-website)
+Production: https://www.x-hain.de [![status-badge](https://ci.x-hain.de/api/badges/xHain-hackspace/xhain-website/status.svg?branch=main)](https://ci.x-hain.de/xHain-hackspace/xhain-website)
 
 ## Getting started
 
 ### Install Hugo
 
 #### Mac OS
 
-* Install brew (for installing the rest): ``/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"``
-* Install go: ``brew install go``
-* Install hugo: ``brew install hugo``
+- Install brew (for installing the rest): `/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"`
+- Install go: `brew install go`
+- Install hugo: `brew install hugo`
 
 #### For Windows/Linux
 
-* Install hugo: [Hugo Website](https://gohugo.io)
+- Install hugo: [Hugo Website](https://gohugo.io)
 
 ### Pull Submodules (eg. Theme)
 
-* Initial pull submodule xhain-theme: ``git submodule update --init --recursive``
-* Submodule update: ``git submodule foreach git pull origin master``
+- Initial pull submodule xhain-theme: `git submodule update --init --recursive`
+- Submodule update: `git submodule foreach git pull origin master`
+
+### Install Dependencies
+
+We use NPM to manage dependencies. Install these by running:
+
+`npm install`
 
 ### Generate Site
 
-* Run hugo to generate HTML: ``hugo``
-* Run hugo for local development:
+- Run hugo to generate HTML: `hugo`
+- Run hugo for local development:
 
-   ``hugo server --config config.toml,home.toml``
+    `hugo server --config config.toml,home.toml`
 
-  or
+    or
 
-  ``hugo server --config config.toml,home.toml -w --cleanDestinationDir``
+    `npm run dev`
 
 ## Content Editing
 
 ### New Post
 
-* create new post (using archetypes):
+- create new post (using archetypes):
 
-  ``hugo new de/post/YYYY-MM-DD_title.de.md -k post``
+    `hugo new de/post/YYYY-MM-DD_title.de.md -k post`
 
-  or
+    or
 
-  ``hugo new en/post/YYYY-MM-DD_title.en.md -k post``
+    `hugo new en/post/YYYY-MM-DD_title.en.md -k post`
 
-* just edit new post in the "content"-folder
+- just edit new post in the "content"-folder
 
 ## Calendar
 

assets/css/_calendar.scss

@@ -145,8 +145,8 @@
             padding: 0.8rem 1rem;
             border-radius: 0.3rem;
             font-size: 0.9rem;
+            line-height: 1.5em;
             margin-top: 0.5em;
-            word-break: break-word;
             hyphens: auto;
 
             .time {
@@ -168,6 +168,11 @@
                 }
             }
 
+            .title {
+                display: block;
+                overflow: hidden;
+            }
+
             .location {
                 margin: 1em 0;
                 width: max-content;
@@ -199,6 +204,10 @@
 
             &:hover {
                 color: $link-color;
+
+                .title {
+                    text-decoration: underline;
+                }
             }
         }
     }

assets/css/main.scss

@@ -80,7 +80,7 @@ body {
 
 a {
     color: $secondary-color;
-    text-decoration: none;
+    text-underline-offset: 0.15em;
 }
 
 a:hover {
@@ -175,6 +175,11 @@ nav {
     font-family: $font-family-brand;
 }
 
+header a,
+nav a {
+    text-decoration: none;
+}
+
 main {
     img,
     video,

assets/js/calendar.js

@@ -1,3 +1,5 @@
+import { marked } from "marked";
+
 // global DOM elements and variables
 const activeEventInterval = 1000 * 60 * 10; // 10 minutes
 let $calendar = null;
@@ -125,7 +127,11 @@ function setupModal() {
 }
 
 function openModal(eventElement) {
-    const eventData = { ...eventElement.dataset };
+    const eventData = {
+        ...eventElement.dataset,
+        // parse markdown in the description
+        description: marked.parse(eventElement.dataset.description),
+    };
     $overlay.innerHTML = renderModal(modalTemplate, eventData);
     showModal();
 }

layouts/calendar/list.html

@@ -82,4 +82,5 @@ <h1 id="article-title">{{ .Title }}</h1>
         aria-modal="true"
     ></div>
 </main>
+
 {{ end }}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "xhain-website",
+  "version": "1.0.0",
+  "description": "Staging: https://staging.x-hain.de [![status-badge](https://ci.x-hain.de/api/badges/xHain-hackspace/xhain-website/status.svg?branch=staging)](https://ci.x-hain.de/xHain-hackspace/xhain-website)",
+  "main": "index.js",
+  "scripts": {
+    "dev": "hugo server --config config.toml,home.toml",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xHain-hackspace/xhain-website.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/xHain-hackspace/xhain-website/issues"
+  },
+  "homepage": "https://github.com/xHain-hackspace/xhain-website#readme",
+  "dependencies": {
+    "marked": "^12.0.2"
+  }
+}