73 lines
2.0 KiB
HTML
73 lines
2.0 KiB
HTML
{{ template "base.html" . }}
|
|
|
|
{{ define "extrahead" }}
|
|
<script src="{{ static "js/templates.js" }}"></script>
|
|
{{ end }}
|
|
|
|
{{ define "content" }}
|
|
{{ template "showcase_templates.html" }}
|
|
|
|
<div class="content-block">
|
|
<div class="ph2 ph0-ns pb4">
|
|
<div class="optionbar">
|
|
<div class="tc tl-l w-100 pb2">
|
|
<h2 class="di-l mr2-l">Community Showcase</h2>
|
|
<ul class="list dib-l">
|
|
<li class="dib-ns ma0 ph2">
|
|
<a href="{{ .ShowcaseAtomFeedUrl }}"><span class="icon big">4</span> Showcase Feed</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="showcase-container" class="mh2 mh0-ns pb4"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<template id="showcase-month">
|
|
<h3 data-tmpl="dateHeader" class="mt3 f4 fw5">Unknown Date</h3>
|
|
<div data-tmpl="itemsContainer" class="month-container"></div>
|
|
</template>
|
|
|
|
<script>
|
|
const showcaseItems = JSON.parse("{{ .ShowcaseItems }}");
|
|
|
|
const monthTemplate = makeTemplateCloner('showcase-month');
|
|
const showcaseContainer = document.querySelector('#showcase-container');
|
|
|
|
const itemsByMonth = []; // array of arrays
|
|
|
|
let currentMonth = null;
|
|
let currentYear = null;
|
|
let currentMonthItems = [];
|
|
for (const item of showcaseItems) {
|
|
const date = new Date(item.date * 1000);
|
|
|
|
if (date.getMonth() !== currentMonth || date.getFullYear() !== currentYear) {
|
|
// rolled over to new month
|
|
if (currentMonthItems.length > 0) {
|
|
itemsByMonth.push(currentMonthItems);
|
|
}
|
|
|
|
currentMonth = date.getMonth();
|
|
currentYear = date.getFullYear();
|
|
currentMonthItems = [];
|
|
}
|
|
|
|
currentMonthItems.push(item);
|
|
}
|
|
if (currentMonthItems.length > 0) {
|
|
itemsByMonth.push(currentMonthItems);
|
|
}
|
|
|
|
for (const monthItems of itemsByMonth) {
|
|
const month = monthTemplate();
|
|
|
|
const firstDate = new Date(monthItems[0].date * 1000);
|
|
month.dateHeader.textContent = firstDate.toLocaleDateString([], { month: 'long', year: 'numeric' });
|
|
|
|
initShowcaseContainer(month.root.querySelector('.month-container'), monthItems);
|
|
showcaseContainer.appendChild(month.root);
|
|
}
|
|
</script>
|
|
{{ end }}
|