add nerd101

_includes/header.css

@@ -1,3 +1,12 @@
+html {
+  scroll-padding-top: 108px;
+}
+@media (width < 1024px) {
+  html {
+    scroll-padding-top: 84px;
+  }
+}
+
 header {
   z-index: 1000;
   display: flex;

_includes/nerd101.css

@@ -0,0 +1,42 @@
+table {
+  width: 100%;
+  background-color: #f5f5f5;
+}
+
+@media (width < 640px) {
+  table {
+    display: block;
+    overflow-x: scroll;
+  }
+}
+
+thead tr,
+tbody tr:nth-of-type(even) {
+  background: #efefef;
+}
+
+tbody td {
+  vertical-align: top;
+  padding: 3px 6px;
+}
+
+p .icon,
+td .icon {
+  height: 1.1em;
+  vertical-align: text-bottom;
+  fill: currentColor;
+}
+
+.annotation {
+  background-color: rgba(255, 139, 0, 0.06);
+  border: 1px solid #ff8b00;
+  border-radius: 3px;
+  width: fit-content;
+  padding: .5em 1em;
+  font-weight: 500;
+}
+
+.annotation .icon {
+  color: #ff8b00;
+  margin-right: .5em;
+}

_includes/nerd101.njk

@@ -0,0 +1,79 @@
+---
+layout: page.njk
+---
+{{ content | safe }}
+
+<section>
+  <h2>
+    {{ "Schedule" if lang == "en" else "Zeitplan" }}
+  </h2>
+
+  <p>
+    {% icon "solid:video", title="Livestream" %}
+    {% if lang == "en" %}
+    indicates, that the talk will be live streamed.
+    {% else %}
+    zeigt an, dass der Vortrag gestreamt wird.
+    {% endif %}
+  </p>
+
+  <table>
+    <thead>
+      <tr>
+        <th scope="column">{{ "Topic" if lang == "en" else "Thema" }}</th>
+        <th scope="column">{{ "Level" if lang == "en" else "Niveau" }}</th>
+        <th scope="column">{{ "Language" if lang == "en" else "Sprache" }}</th>
+        <th scope="column">{{ "Time" if lang == "en" else "Zeit" }}</th>
+        <th scope="column">{{ "Room" if lang == "en" else "Raum" }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for talk in nerd101.talks %}
+      <tr>
+        <td>
+          {% if talk.livestream %}
+            {% icon "solid:video", title="Livestream" %}
+          {% endif %}
+          <a href="#{{talk.title | localized | slugify}}">
+            {{ talk.title | localized }}
+          </a>
+        </td>
+        <td>{{ talk.level| localized }}</td>
+        <td>{{ talk.language | localized }}</td>
+        <td>{{ talk.start }}</td>
+        <td>
+          <a href="{{ nerd101.rooms[talk.room] }}" target="_blank" rel="noreferrer">
+            {{ talk.room }}
+          </a>
+        </td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</section>
+
+<section>
+  <h2>
+    {{ "Descriptions" if lang == "en" else "Beschreibungen" }}
+  </h2>
+
+  {% for talk in nerd101.talks %}
+  <h3 id="{{ talk.title | localized | slugify }}">
+    {{ talk.title | localized }}
+  </h3>
+
+  <p>{{ talk.description | localized | mdInline | safe }}</p>
+
+  {% if talk.annotation %}
+  <p class="annotation">
+    {% icon "solid:exclamation", title=("Notice" if lang == "en" else "Hinweis") %}
+    {{ talk.annotation | localized | mdInline | safe }}
+  </p>
+  {% endif %}
+
+  {% endfor %}
+</section>
+
+{% css %}
+  {% include "nerd101.css" %}
+{% endcss %}

_includes/page.css

@@ -114,6 +114,7 @@ a.btn:hover {
 }
 
 :root {
+  scroll-behavior: smooth;
   font-size: 12px;
   --page-width: 1280px;
   --color-text: #495057;

_includes/program.njk

@@ -1,10 +1,6 @@
 ---js
 {
   layout: "page.njk",
-  getLocalized: function(item) {
-    if (typeof item === "string") return item;
-    return item[this.ctx.lang];
-  },
   toDate: function(dateStr) {
     return new Date(dateStr);
   }
@@ -23,7 +19,7 @@
       <div class="timeslot-container">
         <h3 id="{{date}}_{{loop.index}}">
           {% if event.livestream %}{% icon "solid:video", title="Livestream" %}{% endif %}
-          {{ getLocalized(event.title) }}
+          {{ event.title | localized }}
         </h3>
 
         <div class="timeslot-time">
@@ -34,19 +30,19 @@
           <span class="full">{{ event.start }}{{ " – " + event.end if event.end }}</span>
         </div>
 
-        <p>{{ getLocalized(event.description) | mdInline | safe }}</p>
+        <p>{{ event.description | localized | mdInline | safe }}</p>
 
         {% if event.annotation %}
         <p class="annotation">
           {% icon "solid:exclamation", title=("Notice" if lang == "en" else "Hinweis") %}
-          {{ getLocalized(event.annotation) | mdInline | safe }}
+          {{ event.annotation | localized | mdInline | safe }}
         </p>
         {% endif %}
 
         {% if event.location %}
         <p class="location">
           {% icon "solid:location-dot", title=("Location" if lang == "en" else "Veranstaltungsort") %}
-          {{ getLocalized(event.location) | mdInline | safe }}
+          {{ event.location | localized | mdInline | safe }}
         </p>
         {% endif %}