233 lines
7.3 KiB
HTML
233 lines
7.3 KiB
HTML
{{ template "base-2024.html" . }}
|
|
|
|
{{ define "extrahead" }}
|
|
<script src="{{ static "js/templates.js" }}"></script>
|
|
<script src="{{ static "js/tabs.js" }}"></script>
|
|
{{ end }}
|
|
|
|
{{ define "content" }}
|
|
|
|
{{ if not .User }}
|
|
<!--
|
|
<div class="mb3 ph3 ph0-ns">
|
|
<style>
|
|
#welcome {
|
|
background: linear-gradient(#753330, #823461); /* darker variant of jam color scheme */
|
|
color: white;
|
|
}
|
|
|
|
#welcome-logo {
|
|
font-family: 'MohaveHMN', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 4rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
#welcome-logo svg {
|
|
height: 100%;
|
|
fill: currentColor;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
#welcome-content a {
|
|
color: white !important;
|
|
text-decoration: underline;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#welcome-actions {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
#welcome-actions a {
|
|
color: white !important;
|
|
text-decoration: none;
|
|
line-height: 1.4;
|
|
font-weight: 500;
|
|
|
|
transition: background-color 50ms ease-in-out;
|
|
background-color:rgba(255, 255, 255, 0.1);
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
#welcome-actions a:hover {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
#welcome-actions a:active {
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
}
|
|
</style>
|
|
<div id="welcome" class="br3 pa3 pa4-ns bg3 f5">
|
|
<div id="welcome-logo" class="h4 mb3 mb4-ns">
|
|
{{ svg "hmn_circuit" }}
|
|
</div>
|
|
<div id="welcome-content" class="m-center" style="max-width: 51rem">
|
|
<p class="b">We are working to correct the course of the software industry.</p>
|
|
<p>We are a community of low-level programmers with high-level goals. Originally inspired by Casey Muratori's <a href="https://handmadehero.org/" target="_blank">Handmade Hero</a>, we dig deep into our systems and learn how to do things from scratch. We're not satisfied by the latest popular language or the framework of the month. Instead we care about how computers <b>actually work.</b></p>
|
|
<p>Software quality is declining, and modern development practices are making it worse. We need to change course. <b>Help us get the software industry back on track.</b></p>
|
|
</div>
|
|
<div id="welcome-actions" class="flex flex-column flex-row-ns justify-center">
|
|
<a class="ba b--white br2 pa3 ph4-ns" href="{{ .ManifestoUrl }}">Read our manifesto</a>
|
|
<a class="ba b--white br2 pa3 ph4-ns mt3 mt0-ns ml3-ns" href="{{ .Header.ProjectIndexUrl }}">View Handmade projects</a>
|
|
<a class="ba b--white br2 pa3 ph4-ns mt3 mt0-ns ml3-ns" target="_blank" href="https://discord.gg/hmn">Join our Discord</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
{{ end }}
|
|
|
|
<div class="flex justify-center pa3">
|
|
<div class="w-100 mw-site flex g3">
|
|
<!-- Sidebar -->
|
|
<div class="w5 flex flex-column g2 flex-shrink-0">
|
|
{{ if .User }}
|
|
<div class="sidebar-card bg3 link-normal">
|
|
<div onclick="collapse(event)" class="pa3 flex justify-between items-center pointer">
|
|
<span class="f7">Your projects</span>
|
|
<span class="sidebar-chevron svgicon-lite rot-180">{{ svg "chevron-down" }}</span>
|
|
</div>
|
|
<div class="sidebar-card-content">
|
|
<div class="ph3 flex flex-column g2">
|
|
{{ range .UserProjects }}
|
|
{{ template "list-project" . }}
|
|
{{ else }}
|
|
<div class="f7 pv3 tc c--dim">You have not created any projects.</div>
|
|
{{ end }}
|
|
</div>
|
|
<a class="bt mt3 pa3 flex justify-between" href="{{ .NewProjectUrl }}">
|
|
<div>Create new project</div>
|
|
<div class="svgicon-lite flex items-center">{{ svg "add" }}</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-card bg3 link-normal">
|
|
<div onclick="collapse(event)" class="pa3 flex justify-between items-center pointer">
|
|
<span class="f7">Following</span>
|
|
<span class="sidebar-chevron svgicon-lite rot-180">{{ svg "chevron-down" }}</span>
|
|
</div>
|
|
<div class="sidebar-card-content">
|
|
<div class="ph3 pb3 flex flex-column g2">
|
|
{{ range .Following }}
|
|
{{ template "list-follow" . }}
|
|
{{ else }}
|
|
<div class="f7 pv3 tc c--dim">You are not following anything.</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ else }}
|
|
<div class="bg3 link-normal">
|
|
<div class="pa3 flex flex-column g2">
|
|
<div class="b">Join the Handmade Network</div>
|
|
<div class="f6 post-content">Share your own Handmade projects with the community.</div>
|
|
</div>
|
|
<a class="bt pa3 flex justify-between" href="{{ .LoginPageUrl }}">
|
|
<div>Log in</div>
|
|
<div class="svgicon-lite flex items-center">{{ svg "chevron-right" }}</div>
|
|
</a>
|
|
</div>
|
|
{{ end }}
|
|
<div class="f7 tc link-normal">
|
|
<a href="{{ .ManifestoUrl }}">Manifesto</a> - <a href="{{ .AboutUrl }}">Our Team</a> - TODO: HISTORY
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feed -->
|
|
<div class="flex flex-column flex-grow-1 overflow-hidden">
|
|
<div id="landing-tabs">
|
|
<div class="bb mb2 flex f6">
|
|
{{ if .User }}
|
|
<div data-tab-button="following" class="tab-button ph3 pv1 pointer">Following</div>
|
|
{{ end }}
|
|
<div data-tab-button="featured" class="tab-button ph3 pv1 pointer">Featured</div>
|
|
<div data-tab-button="recent" class="tab-button ph3 pv1 pointer">Recent</div>
|
|
<div data-tab-button="news" class="tab-button ph3 pv1 pointer">News</div>
|
|
</div>
|
|
<div>
|
|
{{ if .User }}
|
|
<div data-tab="following" class="timeline">
|
|
{{ range .FollowingItems }}
|
|
{{ template "timeline_item.html" . }}
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
<div data-tab="featured" class="timeline">
|
|
{{ range .FeaturedItems }}
|
|
{{ template "timeline_item.html" . }}
|
|
{{ end }}
|
|
</div>
|
|
<div data-tab="recent" class="timeline">
|
|
{{ range .RecentItems }}
|
|
{{ template "timeline_item.html" . }}
|
|
{{ end }}
|
|
</div>
|
|
<div data-tab="news" class="timeline">
|
|
{{ range .NewsItems }}
|
|
{{ template "timeline_item.html" . }}
|
|
{{ end }}
|
|
</div>
|
|
TODO: READ MORE LINK
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function collapse(e) {
|
|
const card = e.target.closest(".sidebar-card");
|
|
const content = card.querySelector(".sidebar-card-content");
|
|
const chevron = card.querySelector(".sidebar-chevron");
|
|
|
|
const hide = !content.hidden;
|
|
|
|
content.hidden = hide;
|
|
chevron.classList.toggle("rot-180", !hide);
|
|
}
|
|
|
|
initTabs(document.querySelector("#landing-tabs"));
|
|
</script>
|
|
|
|
{{ end }}
|
|
|
|
{{ define "list-project" }}
|
|
<a class="flex g2 items-center" href="{{ .Url }}">
|
|
{{ with .Logo }}
|
|
<img class="avatar avatar-small" src="{{ . }}">
|
|
{{ else }}
|
|
<div class="avatar avatar-small"></div>
|
|
{{ end }}
|
|
<div class="truncate" title="{{ .Name }}">{{ .Name }}</div>
|
|
</a>
|
|
{{ end }}
|
|
|
|
{{ define "list-follow" }}
|
|
{{ if .User }}
|
|
<a class="flex g2 items-center" href="{{ .User.ProfileUrl }}">
|
|
{{ with .User.AvatarUrl }}
|
|
<img class="avatar avatar-user avatar-small" src="{{ . }}">
|
|
{{ else }}
|
|
<div class="avatar avatar-user avatar-small"></div>
|
|
{{ end }}
|
|
<div class="truncate" title="{{ .User.Name }}">{{ .User.Name }}</div>
|
|
</a>
|
|
{{ else if .Project }}
|
|
<a class="flex g2 items-center" href="{{ .Project.Url }}">
|
|
{{ with .Project.Logo }}
|
|
<img class="avatar avatar-small" src="{{ . }}">
|
|
{{ else }}
|
|
<div class="avatar avatar-small"></div>
|
|
{{ end }}
|
|
<div class="truncate" title="{{ .Project.Name }}">{{ .Project.Name }}</div>
|
|
</a>
|
|
{{ else }}
|
|
???
|
|
{{ end }}
|
|
{{ end }}
|