@@ -0,0 +1,157 @@
1+{% extends "base.html" %}
2+{% import "macros/macros.html" as macros %}
3+
4+{% block title %}
5+ <meta name="og:title" content="Events - {{ config.title }}">
6+ <title>Events - {{ config.title }}</title>
7+{% endblock title %}
8+
9+{% block description %}
10+ <meta name="og:description" content="Events facilitated by the Urbit Foundation.">
11+ <meta name="description" content="Events facilitated by the Urbit Foundation.">
12+{% endblock description %}
13+
14+{% block content %}
15+{% set posts = get_section(path="events/_index.md") %}
16+<!-- header -->
17+<nav class="mt4 full fourth-1-lg mb3 mb0-m mb0-l mb0-xl fixed-xl">
18+ <a class="gray3" href="/">Urbit</a>
19+ <span class="gray3"> / </span>
20+ <a href="/events/">Events</a>
21+
22+ {% include "partials/navigation-search.html" %}
23+
24+ <ol id="event_months" class="pa0" style="position: sticky; top: 0;"></ol>
25+
26+</nav>
27+<section class="full c4-12-lg pt4">
28+
29+ <section id="upcoming" class="grid12"></section>
30+
31+ <section id="past" class="grid12"></section>
32+
33+ {% for page in posts.pages %}
34+ <article data-date="{{ page.date }}" id="event-{{ page.slug }}" class="event mb4 c1-10-lg full {% if page.extra.pinned %}bg-gray4 na3 pa3{% endif %}">
35+ <a href="{{ page.permalink }}" class="no-underline bb-0 grid12">
36+ <h1 class="full">{{ page.title }}</h1>
37+ <div class="measure-wide full c1-8-lg">
38+ {% if page.extra.description %}
39+ <p class="lh-copy">{{ page.extra.description }}</p>
40+ {% endif %}
41+ {{ macros::event_metadata(page=page, classes="mt2")}}
42+ </div>
43+ {% if page.extra.image %}
44+ <img class="db mv2 h4 ba obj-cover full c8-13-lg" src="{{ page.extra.image }}" />
45+ {% endif %}
46+ </a>
47+ </article>
48+ {% endfor %}
49+
50+ <script>
51+ const upcoming = document.getElementById('upcoming');
52+ const past = document.getElementById('past');
53+ const upcomingEvents = [];
54+ const pastEvents = [];
55+ Array.from(document.querySelectorAll('article[data-date')).forEach(function (article) {
56+ article.parentElement.removeChild(article);
57+ const articleDate = Date.parse(article.dataset.date);
58+ if(articleDate - Date.now() > 0) {
59+ upcomingEvents.push([articleDate, article]);
60+ } else {
61+ pastEvents.push([articleDate, article]);
62+ }
63+ });
64+
65+ upcomingEvents.sort(function (articleA, articleB) {
66+ return articleA[0] - articleB[0];
67+ });
68+
69+ pastEvents.sort(function (articleA, articleB) {
70+ return articleB[0] - articleA[0];
71+ });
72+
73+ const upcomingHeader = document.createElement('h2');
74+ upcomingHeader.className = 'mb4 full';
75+ upcomingHeader.innerText = 'Upcoming Events';
76+ upcoming.appendChild(upcomingHeader);
77+
78+ upcomingEvents.forEach(function (event) {
79+ upcoming.appendChild(event[1]);
80+ });
81+
82+ const pastHeader = document.createElement('h2');
83+ pastHeader.className = 'mb4 full';
84+ pastHeader.innerText = 'Past Events';
85+ past.appendChild(pastHeader);
86+
87+ pastEvents.forEach(function (event) {
88+ past.appendChild(event[1]);
89+ });
90+ </script>
91+
92+ <script>
93+ const monthMap = [
94+ 'January',
95+ 'February',
96+ 'March',
97+ 'April',
98+ 'May',
99+ 'June',
100+ 'July',
101+ 'August',
102+ 'September',
103+ 'October',
104+ 'November',
105+ 'December',
106+ ];
107+ const wrapper = document.getElementById('event_months');
108+ const years = {};
109+ Array.from(document.querySelectorAll('article[data-date]')).forEach(function (event) {
110+ const date = new Date(Date.parse(event.dataset.date));
111+ const year = date.getFullYear();
112+ if (!years.hasOwnProperty(year)) {
113+ years[year] = {};
114+ }
115+ const month = date.getMonth();
116+ if (!years[year].hasOwnProperty(month)) {
117+ years[year][month] = [];
118+ }
119+ years[year][month].push(event.id);
120+ });
121+ Object.keys(years).reverse().forEach(function (year) {
122+ const yearItem = document.createElement('li');
123+ yearItem.className = 'pt2';
124+ const header = document.createElement('span');
125+ header.className = 'f5';
126+ header.innerText = year;
127+ yearItem.appendChild(header);
128+ const monthList = document.createElement('ol');
129+ monthList.className = 'pa0 months';
130+ yearItem.appendChild(monthList);
131+ Object.keys(years[year]).reverse().forEach(function (month) {
132+ const monthItem = document.createElement('li');
133+ monthItem.className = 'pt1';
134+ const header = document.createElement('span');
135+ header.className = 'f6';
136+ header.innerText = monthMap[month];
137+ monthItem.appendChild(header);
138+ const articleList = document.createElement('ol');
139+ articleList.className = 'pa0 articles';
140+ monthItem.appendChild(articleList);
141+ monthList.appendChild(monthItem);
142+ years[year][month].forEach(function (id) {
143+ const articleItem = document.createElement('li');
144+ const link = document.createElement('a');
145+ link.className = 'bb f6 gray1';
146+ link.href = `#${id}`;
147+ link.innerText = document.getElementById(id).querySelector('h1').innerText;
148+ articleItem.appendChild(link);
149+ articleList.appendChild(articleItem);
150+ });
151+ });
152+ wrapper.appendChild(yearItem);
153+ });
154+ </script>
155+</section>
156+{% include "partials/footer.html" %}
157+{% endblock content %}