2021-03-14 20:49:58 +00:00
{{ template "base.html" . }}
{{ define "content" }}
2021-04-11 21:46:06 +00:00
< 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 >
{{/* TODO: Make a better IRC intro page because the current one is trash anyway */}}
{{/*
< 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 >
< div class = "content-block news cf" >
{{ range $i, $col := .PostColumns }}
< div class = "fl w-100 w-50-l" >
< div class = "mw7 mw-none-l center-layout" >
{{ if eq $i 0 }}
< div class = "pt3" >
Wow, a featured post!
{{/* {% include "blog_index_thread_list_entry.html" with post=featured_post align_top=True %} */}}
< / div >
{{ end }}
{{ range $entry := $col }}
{{ $proj := $entry.Project }}
{{ $posts := $entry.Posts }}
< div class = "pt3" id = "p{{ $proj.Subdomain }}" > {{/* TODO: Is this ID used for anything? */}}
< a { { / * TODO: Replace this special-case style with a CSS class * / } }
href="{{ projecturl "/" $proj }}"
style="color: #{{ eq $.Theme "dark" | ternary (brighten $proj.Color1 0.1) (darken $proj.Color1 0.2) }}"
>
< h2 class = "ph3" > {{ $proj.Name }}< / h2 >
< / a >
{{/* TODO: What is this?
{% 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 %}
*/}}
{{ range $posts }}
< div >
{{ .Post.Preview }}
< / div >
{{/*
{% if forloop.counter0 < max_posts % }
{% include "thread_list_entry.html" with thread=post.thread %}
{% endif %}
*/}}
{{ end }}
{{/*
{% 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 >
{{ end }}
< / div >
< / div >
{{ end }}
< / div >
2021-03-14 20:49:58 +00:00
{{ end }}
2021-03-31 03:55:19 +00:00
{{/*
{{ 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 %}
*/}}