Merge pull request #76 from until-tsukuba/add-upcomingevents

予定されているイベント一覧をトップページに表示するコンポーネントを追加

Author: oageo

.eleventy.js

@@ -22,6 +22,13 @@ export default (eleventyConfig) => {
   eleventyConfig.addNunjucksFilter("date", function(str) {
     return new Date(str);
   });
+  eleventyConfig.addNunjucksFilter("futureEvents", (events, limit) => {
+    const now = new Date();
+    return events
+      .filter(event => new Date(event.data.dtstart) >= now)
+      .sort((a, b) => new Date(a.data.dtstart) - new Date(b.data.dtstart))
+      .slice(0, limit);
+  });
 
   return {
     dir: {

src/_includes/components/upcoming-events.njk

@@ -0,0 +1,25 @@
+{%- set eventLimit = eventsListLimit | default(3) %} {# デフォルト値は3 #}
+{%- set upcoming = collections.event | futureEvents(eventLimit) %}
+
+{%- if upcoming.length > 0 %}
+    <div>
+    {%- for event in upcoming %}
+        <a href="{{ event.url | htmlBaseUrl }}">
+            <article>
+                <h2>{{ event.data.title }}</h2>
+                <p>{{ event.data.summary }}</p>
+                <p>
+                    <time datetime="{{ event.data.dtstart }}">{{ event.data.dtstart }}</time>
+                    〜
+                    <time datetime="{{ event.data.dtend }}">{{ event.data.dtend }}</time>
+                </p>
+                <p>場所: {{ event.data.location }}</p>
+            </article>
+        </a>
+    {%- endfor %}
+    </div>
+{%- else %}
+    <div>
+        <p>現在予定されているイベントはありません。</p>
+    </div>
+{%- endif %}

src/index.html src/index.njksrc/index.html renamed to src/index.njk

@@ -27,6 +27,13 @@ <h1>活動</h1>
             <li>サブドメイン貸し出しサービス: <a href="https://www.tsukuba.dev">tsukuba.dev</a>の運営</li>
         </ul>
     </section>
+    <section>
+        <h1>直近のイベント予定</h1>
+        {%- set eventsListLimit = 3 %}
+        {% include "components/upcoming-events.njk" %}
+        <hr>
+        <p><a href="{{ "/events" | htmlBaseUrl }}">全てのイベントを確認する</a>（<a href="{{ "/feed.xml" | htmlBaseUrl }}">RSS Feed</a> / <a href="{{ "/events.ics" | htmlBaseUrl }}">iCal</a>）</p>
+    </section>
     <section>
         <h1>UNTIL.に参加するには</h1>
         <p>UNTIL.はDiscordを使って活動しています。UNTIL. Discordに参加するには4つの方法があります:</p>