Initial implementation of event pages

13 files changed, 296 insertions, 21 deletions

diff --git a/content/events.md b/content/events.md
deleted file mode 100644
index 240a8f0..0000000
--- a/content/events.md
+++ /dev/null
@@ -1,9 +0,0 @@
-+++
-title = "Events"
-+++
-
-{{ list_events(group="upcoming") }}
-
-{{ list_events(group="recent") }}
-
-{{ list_events(group="past") }}
diff --git a/content/events/_index.md b/content/events/_index.md
new file mode 100644
index 0000000..970bda3
--- /dev/null
+++ b/content/events/_index.md
@@ -0,0 +1,8 @@
++++
+title = "Events"
+sort_by = "date"
+template = "events.html"
+page_template = "event-page.html"
++++
+
+
diff --git a/content/events/meetup-39.md b/content/events/meetup-39.md
new file mode 100644
index 0000000..21ec2d3
--- /dev/null
+++ b/content/events/meetup-39.md
@@ -0,0 +1,16 @@
++++
+title = "Meetup #39"
+date = 2023-08-30
++++
+
+## An introduction to Spin, a serverless WebAssembly framework written in Rust
+
+by Mikkel Hegnhøj
+
+{{ youtube(id="xPgmXRg3O0Y") }}
+
+## Rust embedded at Espressif
+
+by Scott Mabin
+
+{{ youtube(id="gdmUhzJfgzk") }}
diff --git a/content/events/meetup-40.md b/content/events/meetup-40.md
new file mode 100644
index 0000000..5a438a8
--- /dev/null
+++ b/content/events/meetup-40.md
@@ -0,0 +1,20 @@
++++
+title = "Meetup #40"
+date = 2023-09-28
++++
+
+## Send is not about ownership
+
+by Alice Ryhl
+
+{{ youtube(id="eRxqX5_UxaY") }}
+
+{{ slides_link(title="Link to slides", url="https://docs.google.com/presentation/d/1qut4u-FGMzeW9QRq1ya3EoHHU2qvaJkUlW_3fYV0AtA/") }}
+
+## impl Trait: look ma', no generics!
+
+by Jon Gjengset
+
+{{ youtube(id="CWiz_RtA1Hw") }}
+
+{{ slides_link(title="Link to slides", url="https://docs.google.com/presentation/d/1U27Yr8MniRMUfxfPlwYt3wkYm6EtTWv42slYGRdgW1M/") }}
diff --git a/static/styles.css b/static/styles.css
index 2c28d05..31b0c5d 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -111,7 +111,7 @@ main h1:first-of-type {
 }
 
 h1 {
-  font-size: 2rem;
+  font-size: 2.2rem;
   font-weight: 500;
   color: var(--primary-text-color);
   margin-top: 1.5rem;
@@ -119,7 +119,7 @@ h1 {
 }
 
 h2 {
-  font-size: 1.3rem;
+  font-size: 1.4rem;
   font-weight: 500;
   color: var(--primary-text-color);
   margin-top: 1.5rem;
@@ -196,6 +196,10 @@ aside {
   overflow: auto;
 }
 
+.content {
+  flex-grow: 1;
+}
+
 .content pre {
   overflow-x: auto;
   padding: 1.25em 1.5em;
@@ -250,19 +254,81 @@ aside {
   opacity: 0.8;
 }
 
-.page-events h2 {
+.section-events h2 {
   color: var(--secondary-text-color); 
   margin-top: 3rem;
+  margin-bottom: 1rem;
 }
 
-.page-events h3 {
+.section-events h3 {
   font-size: 1.5rem;
-  margin-top: 3rem;
-  margin-bottom: 0;
+  margin-top: .5rem;
+  margin-bottom: .5rem;
 }
 
-.page-events h2 + h3 {
-  margin-top: 1.5rem;
+.event-page-link {
+  padding-left: 1rem;
+}
+
+.event-page-link {
+  display: block;
+  padding-left: 2rem;
+}
+
+details summary { 
+  cursor: pointer;
+  width: 100%;
+  padding-left: 1rem;
+}
+
+details summary:hover {
+  background: #303030;
+}
+
+details summary > * {
+  display: inline-block;
+}
+
+details {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+details[open] {
+  background: #303030;
+}
+
+dl {
+  padding-left: 2rem;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: .5rem;
+}
+
+dd:last-child {
+  padding-top: 1rem;
+  margin-left: 0;
+}
+
+.youtube-container {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 56.25%;
+  margin: 1.5rem 0;
+}
+
+.youtube-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 @media screen and (min-width: 768px) {
@@ -285,4 +351,4 @@ aside {
   .toc {
     display: block;
   }
-}
\ No newline at end of file
+}
diff --git a/templates/base.html b/templates/base.html
index 3c435c5..1e1f2d6 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -7,14 +7,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>🦀</text></svg>" />
     <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="../styles.css">
+    <link rel="stylesheet" href="/styles.css">
 </head>
 
 <body>
     {% block header %}
     <header>
         <nav>
-            <img class="logo" src="../cph-rs-ferris.png">
+            <img class="logo" src="/cph-rs-ferris.png">
             <a href="./">
                 <h1>Copenhagen Rust Community</h1>
             </a>
@@ -22,7 +22,7 @@
     </header>
     {% endblock header %}
 
-    <main {% if page %}class="page-{{page.slug}}"{% endif %}>
+    <main {% if page %}class="page-{{page.slug}}"{% endif %} {% if section %}class="section-{{section.title | lower}}"{% endif %}>
         {% block sidebar %}
         {% endblock sidebar %}
         <div class="content">
diff --git a/templates/event-page.html b/templates/event-page.html
new file mode 100644
index 0000000..d807e31
--- /dev/null
+++ b/templates/event-page.html
@@ -0,0 +1,28 @@
+{% extends "base.html" %}
+{% import "macros.html" as macros %}
+
+{% block content %}
+<h1 class="title">
+  {{ page.title }}
+</h1>
+
+{% set meetups = load_data(path="events.toml") %}
+{% set upcoming = meetups['upcoming'] %}
+{% set all_events = meetups['recent'] | concat(with=upcoming) %}
+
+{% set event = all_events | filter(attribute="title", value=page.title) | first %}
+
+{% if event %}
+    <details>
+        <summary>
+            <h3>Details about this event</h3>
+        </summary>
+        {{ macros::event_attributes(event=event) }}
+    </details>
+{% else %}
+    No data found for this event.
+{% endif %}
+
+{{ page.content | safe }}
+
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/events.html b/templates/events.html
new file mode 100644
index 0000000..afa9747
--- /dev/null
+++ b/templates/events.html
@@ -0,0 +1,67 @@
+{% extends "base.html" %}
+{% import "macros.html" as macros %}
+
+{% block sidebar %}
+{% set toc = ['upcoming', 'recent', 'past'] %}
+<aside class="toc">
+    {% if section.toc %}{% set toc = section.toc %}{% elif page.toc %}{% set toc = page.toc %}{% endif %}
+    {% if toc %}
+    <div class="toc-sticky">
+        <div class="toc-item">
+            <a href="#events">Events</a>
+        </div>
+        {% for h in toc %}
+        <div class="toc-item-child">
+            <a href="#{{h}}">{{ h | capitalize }}</a>
+        </div>
+        {% endfor %}
+    </div>
+    {% endif %}
+</aside>
+{% endblock sidebar %}
+
+{% block content %}
+<h1 class="title">
+  {{ section.title }}
+</h1>
+
+{{ section.content | safe }}
+
+{% set groups = ['upcoming', 'recent', 'past'] %}
+{% set meetups = load_data(path="events.toml") %}
+
+{% for group in groups %}
+
+    {% if meetups[group] %}
+    <section>
+        <h2 id="{{group}}">{{ group | capitalize }}</h2>
+
+        {% for event in meetups[group] %}
+        {% set event_page = section.pages | filter(attribute="title", value=event.title) | first%}
+        
+        {% if event_page %}
+            <a class="event-page-link" href="events/{{ event_page.slug }}">
+                <h3>
+                    {{ event_page.title }}
+                </h3>
+            </a>
+        {% else %}
+            <article>
+                <details>
+                    <summary>
+                        <h3>
+                            {{ event.title }}
+                        </h3>
+                    </summary>
+                
+                    {{ macros::event_attributes(event=event) }}
+                </details>
+            </article>
+            {% endif %}
+        {% endfor %}
+    </section>
+    {% endif %}
+
+{% endfor %}
+
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/macros.html b/templates/macros.html
new file mode 100644
index 0000000..47b07e2
--- /dev/null
+++ b/templates/macros.html
@@ -0,0 +1,42 @@
+{% macro event_attributes(event) %}
+<dl>
+    {% if event.url %}
+    <dt>
+        Event link
+    </dt>
+    <dd>
+        <a href="{{ event.url }}">{{ event.title}} on Meetup.com</a>
+    </dd>
+    {% endif %}
+    
+    <dt>
+        Date
+    </dt>
+    <dd>
+        {% if event.date %}
+        <time datetime="{{ event.date }}">{{ event.date | date(format="%A, %e %B %Y", timezone="Europe/Berlin") }}</time>  
+        {% else %}
+        (No date found)
+        {% endif %}
+    </dd>
+
+    <dt>
+        Venue
+    </dt>
+    <dd>
+        {% if event.venue %}
+            {{ event.venue }} – {% endif %}
+            {% if event.address %}{{ event.address }}
+        {% else %}
+            (No venue)  
+        {% endif %}
+    </dd>
+    
+    {% if event.content -%}
+    <dt>Description</dt>
+    <dd>
+        <blockquote>{{ event.content | safe }}</blockquote>
+    </dd>
+    {% endif %}
+</dl>
+{% endmacro event_attributes %}
\ No newline at end of file
diff --git a/templates/shortcodes/get_event.html b/templates/shortcodes/get_event.html
new file mode 100644
index 0000000..1526685
--- /dev/null
+++ b/templates/shortcodes/get_event.html
@@ -0,0 +1,18 @@
+{% set meetups = load_data(path="events.toml") %}
+
+{% if meetups['recent'] %}
+## {{ 'recent' | capitalize }}
+
+{% for item in meetups['recent'] %}
+### {{ item.title }}
+
+{% if item.event_page %}yo{% endif %}
+
+{% if item.url %}**Link:** [Meetup.com]({{ item.url }}){% endif %}  
+**Date:** {% if item.date %}<time datetime="{{ item.date }}">{{ item.date | date(format="%A, %e %B %Y", timezone="Europe/Berlin") }}</time>  {% else %}(No date found)  {% endif %}
+**Venue:** {% if item.venue %}{{ item.venue }} – {% endif %}{% if item.address %}{{ item.address }}   {% else %}(No venue)  {% endif %}
+{% if item.content -%}**Description:**<blockquote>{{ item.content | safe }}</blockquote>{% endif %}
+
+{% endfor %}
+{% endif %}
+
diff --git a/templates/shortcodes/list_events.md b/templates/shortcodes/list_events.html
index 1b887c7..aa59de8 100644
--- a/templates/shortcodes/list_events.md
+++ b/templates/shortcodes/list_events.html
@@ -6,6 +6,8 @@
 {% for item in meetups[group] %}
 ### {{ item.title }}
 
+{% if item.event_page %}yo{% endif %}
+
 {% if item.url %}**Link:** [Meetup.com]({{ item.url }}){% endif %}  
 **Date:** {% if item.date %}<time datetime="{{ item.date }}">{{ item.date | date(format="%A, %e %B %Y", timezone="Europe/Berlin") }}</time>  {% else %}(No date found)  {% endif %}
 **Venue:** {% if item.venue %}{{ item.venue }} – {% endif %}{% if item.address %}{{ item.address }}   {% else %}(No venue)  {% endif %}
@@ -13,3 +15,4 @@
 
 {% endfor %}
 {% endif %}
+
diff --git a/templates/shortcodes/slides_link.html b/templates/shortcodes/slides_link.html
new file mode 100644
index 0000000..49271ff
--- /dev/null
+++ b/templates/shortcodes/slides_link.html
@@ -0,0 +1,5 @@
+<a 
+class="button"
+href="{{url}}">
+    {{title}}
+</a>
\ No newline at end of file
diff --git a/templates/shortcodes/youtube.html b/templates/shortcodes/youtube.html
new file mode 100644
index 0000000..573e269
--- /dev/null
+++ b/templates/shortcodes/youtube.html
@@ -0,0 +1,11 @@
+<div class="youtube-container">
+    <iframe 
+        src="https://www.youtube-nocookie.com/embed/{{id}}{% if autoplay %}?autoplay=1{% endif %}" 
+        frameborder="0"
+        title="YouTube embed"
+        webkitallowfullscreen
+        mozallowfullscreen 
+        allowfullscreen
+    >
+    </iframe>
+</div>