202 lines
10 KiB
HTML
202 lines
10 KiB
HTML
{{ template "base.html" . }}
|
|
|
|
{{ define "content" }}
|
|
This is the index page.
|
|
{{ end }}
|
|
|
|
{{/*
|
|
{{ define "extrahead" }}
|
|
<link rel="stylesheet" type="text/css" href="{{ static "landing.css" }}"/>
|
|
<script type="text/javascript" src="{{ static "util.js" }}"></script>
|
|
<style type="text/css">
|
|
{{ range _, $col := .RecentPostColumns }}
|
|
{{ range _, $entry := $col }}
|
|
{{ $themeDim := eq .Theme "dark" | ternary (darken .Color 0.5) (brighten .Color 0.2) }}
|
|
{{ $themeDimmer := eq .Theme "dark" | ternary (darken .Color 0.65) (brighten .Color 0.4) }}
|
|
{{ $themeDimmest := eq .Theme "dark" | ternary (darken .Color 0.8) (brighten .Color 0.6) }}
|
|
|
|
{{ $linkColor := eq .Theme "dark" | ternary (brighten .Color 0.1) (darken .Color 0.2) }}
|
|
{{ $linkHoverColor := eq .Theme "dark" | ternary (brighten .Color 0.2) (darken .Color 0.1) }}
|
|
|
|
{{ eq .Theme "dark" }}
|
|
#p{{ .Project.Subdomain }} .unread a { color: #{% rgb_accent entry.project.color_1 0.55 %}; }
|
|
#p{{ .Project.Subdomain }} .unread a:hover { color: #{% rgb_accent entry.project.color_1 0.65 %}; }
|
|
#p{{ .Project.Subdomain }} .unread .avatar-icon { border: 2px solid #{% rgb_accent entry.project.color_1 0.55 %}; }
|
|
#p{{ .Project.Subdomain }} .thread:nth-of-type(even) { background-color:#{% rgb_accent entry.project.color_1 0.14 False 0.03%}; }
|
|
#p{{ .Project.Subdomain }} .forum .post:nth-of-type(even) { background-color:#{% rgb_accent entry.project.color_1 0.14 False 0.03 %}; }
|
|
#p{{ .Project.Subdomain }} .blog .post:nth-of-type(even) { background-color:#{% rgb_accent entry.project.color_1 0.14 False 0.03 %}; }
|
|
{{ else }}
|
|
#p{{ .Project.Subdomain }} .unread a { color: #{% rgb_accent entry.project.color_1 0.35 %}; }
|
|
#p{{ .Project.Subdomain }} .unread a:hover { color: #{% rgb_accent entry.project.color_1 0.45 %}; }
|
|
#p{{ .Project.Subdomain }} .unread .avatar-icon { border: 2px solid #{% rgb_accent entry.project.color_1 0.35 %}; }
|
|
#p{{ .Project.Subdomain }} .thread:nth-of-type(even) { background-color:#{% rgb_accent entry.project.color_1 0.94 False 0.2 %}; }
|
|
#p{{ .Project.Subdomain }} .forum .post:nth-of-type(even) { background-color:#{% rgb_accent entry.project.color_1 0.94 False 0.2 %}; }
|
|
#p{{ .Project.Subdomain }} .blog .post:nth-of-type(even) { background-color:#{% rgb_accent entry.project.color_1 0.94 False 0.2 %}; }
|
|
{{ end }}
|
|
#p{{ .Project.Subdomain }} .thread.more { background-color:transparent; }
|
|
{{ end }}
|
|
{{ end }}
|
|
</style>
|
|
<script type="text/javascript" src="{% static 'templates.js' %}?v={% cachebust %}"></script>
|
|
<script type="text/javascript" src="{% static 'timeline.js' %}?v={% cachebust %}"></script>
|
|
<script type="text/javascript" src="{% static 'showcase.js' %}?v={% cachebust %}"></script>
|
|
{{ end }}
|
|
|
|
{% block columns %}
|
|
{% include "showcase/js_templates.html" %}
|
|
{% include "timeline/js_templates.html" %}
|
|
<div class="content-block pb3">
|
|
<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="{% url 'showcase' %}">View all</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="showcase relative overflow-hidden">
|
|
<div id="showcase-items" class="flex relative pl3 pl0-ns"></div>
|
|
<div class="arrow-container left">
|
|
<a href="javascript:void(0)" class="arrow svgicon svgicon-nofix" onclick="scrollShowcase('left')">{% svg 'chevron-left' %}</a>
|
|
</div>
|
|
<div class="arrow-container right">
|
|
<a href="javascript:void(0)" class="arrow svgicon svgicon-nofix" onclick="scrollShowcase('right')">{% svg 'chevron-right' %}</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="c--dimmer i pv2 ph3 ph0-ns">
|
|
This is a selection of recent work done by community members. Want to participate? <a href="https://discord.gg/hxWxDee" target="_blank">Join us on Discord.</a>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const timelineData = JSON.parse("{{ showcase_timeline_json|escapejs }}");
|
|
|
|
const showcaseEl = document.querySelector('#showcase-items');
|
|
for (const item of timelineData.items) {
|
|
const [itemEl, addThumbnail] = makeShowcaseItem(item);
|
|
addThumbnail();
|
|
itemEl.container.classList.add('mr3');
|
|
showcaseEl.appendChild(itemEl.root);
|
|
}
|
|
|
|
function rem2px(rem) {
|
|
return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
}
|
|
|
|
function scrollShowcase(direction = null) {
|
|
const ITEM_WIDTH = showcaseEl.querySelector('.showcase-item').getBoundingClientRect().width;
|
|
const ITEM_SPACING = rem2px(1);
|
|
|
|
const showcaseWidth = showcaseEl.getBoundingClientRect().width;
|
|
const numVisible = showcaseWidth / (ITEM_WIDTH + ITEM_SPACING);
|
|
const scrollMagnitude = Math.floor(numVisible) - 1;
|
|
const scrollDirection = (direction === 'right' ? 1 : (direction === 'left' ? -1 : 0));
|
|
const scrollAmount = scrollMagnitude * scrollDirection;
|
|
|
|
const minIndex = 0;
|
|
const maxIndex = timelineData.items.length - Math.floor(numVisible);
|
|
|
|
const currentScrollIndex = parseInt(showcaseEl.getAttribute('data-scroll-index'), 10) || 0;
|
|
const newScrollIndex = Math.max(minIndex, Math.min(maxIndex, currentScrollIndex + scrollAmount));
|
|
|
|
showcaseEl.style.transform = `translateX(${-newScrollIndex * (ITEM_WIDTH + ITEM_SPACING)}px)`;
|
|
showcaseEl.setAttribute('data-scroll-index', newScrollIndex);
|
|
|
|
const leftArrowEl = document.querySelector('.arrow-container.left');
|
|
const rightArrowEl = document.querySelector('.arrow-container.right');
|
|
|
|
leftArrowEl.classList.toggle('hide', newScrollIndex === minIndex);
|
|
rightArrowEl.classList.toggle('hide', newScrollIndex === maxIndex);
|
|
}
|
|
scrollShowcase(); // force a scroll as an easy way to initialize styles
|
|
|
|
window.addEventListener('resize', () => scrollShowcase());
|
|
</script>
|
|
|
|
<div class="content-block">
|
|
<div class="optionbar pb2">
|
|
<div class="tc tl-l w-100">
|
|
<h2 class="di-l mr2-l">Around the Network</h2>
|
|
<ul class="list dib-l">
|
|
<li class="dib-ns ma0 ph2">
|
|
<a href="{% url 'feed' %}">View all posts on HMN</a>
|
|
</li>
|
|
<li class="dib-ns ma0 ph2">
|
|
<a href="{% url 'podcast' %}">Podcast</a>
|
|
</li>
|
|
<!-- <li class="dib-ns ma0 ph2">
|
|
<a href="{% url 'streams' %}">See who's live</a>
|
|
</li> -->
|
|
<li class="dib-ns ma0 ph2">
|
|
<a href="/blogs/p/1138-%5Btutorial%5D_handmade_network_irc" target="_blank">Chat in IRC</a>
|
|
</li>
|
|
<li class="dib-ns ma0 ph2">
|
|
<a href="https://discord.gg/hxWxDee" target="_blank">Chat on Discord</a>
|
|
</li>
|
|
<li class="dib-ns ma0 ph2">
|
|
<a href="https://handmadedev.show/" target="_blank">See the Show</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% spaceless %}
|
|
<div class="content-block news cf">
|
|
{% for col in recent_post_columns %}
|
|
<div class="fl w-100 w-50-l">
|
|
<div class="mw7 mw-none-l center-layout">
|
|
{% if forloop.counter == 1 %}
|
|
<div class="pt3">
|
|
{% include "blog_index_thread_list_entry.html" with post=featured_post align_top=True %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% for entry in col %}
|
|
{% with proj=entry.project posts=entry.posts %}
|
|
<div class="pt3" id="p{{proj.slug}}">
|
|
<a
|
|
href="{% url 'cover_page' subdomain=proj.slug %}"
|
|
{% if user|get_theme == 'dark' %}
|
|
style="color:#{% rgb_accent proj.color_1 0.55 %};"
|
|
{% else %}
|
|
style="color:#{% rgb_accent proj.color_1 0.25 %};"
|
|
{% endif %}
|
|
>
|
|
<h2 class="ph3">{{ proj.name }}</h2>
|
|
</a>
|
|
|
|
{% if entry.featured and proj.slug != "hmn" %}
|
|
{% with post=entry.featured.0 has_read=entry.featured.1 %}
|
|
{% if post.category.kind == 5 and post.parent == None %}
|
|
{% include "thread_list_entry.html" with thread=post.thread %}
|
|
{% else %}
|
|
{% include "blog_index_thread_list_entry.html" with align_top=True %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
{% endif %}
|
|
|
|
{% for post, has_read in posts %}
|
|
{% if forloop.counter0 < max_posts %}
|
|
{% include "thread_list_entry.html" with thread=post.thread %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% with more=posts|length|add:-5|clamp_lower:0 %}
|
|
{% if more > 0 %}
|
|
<div class="ph3 thread unread more">
|
|
<a class="title"
|
|
href="{% url 'project_forum' subdomain=proj.slug %}"
|
|
>{{ more }} more recently →</a>
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
</div>
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endspaceless %}
|
|
{% endblock %}
|
|
*/}} |