203 lines
9.1 KiB
HTML
203 lines
9.1 KiB
HTML
<header id="site-header" class="mb3 bb bw1 b--theme-dark">
|
|
<a href="#content-start" class="sr-focusable" id="content-jump">Jump to Content</a>
|
|
<div class="user-options flex justify-center justify-end-ns relative">
|
|
{{ if .User }}
|
|
{{ if .User.IsStaff }}
|
|
<a class="admin-panel pa2" href="{{ .Header.AdminUrl }}"><span class="icon-settings"> Admin</span></a>
|
|
{{ end }}
|
|
<div>
|
|
<a class="dib pv2 pl2" href="{{ .Header.UserProfileUrl }}">{{ .User.Username }}</a>
|
|
<a class="dib pv2 pr2" href="{{ .Header.UserSettingsUrl }}">(settings)</a>
|
|
</div>
|
|
<a class="logout pa2" href="{{ .Header.LogoutActionUrl }}"><span class="icon-logout"></span> Log Out</a>
|
|
{{ else }}
|
|
<a class="register pa2" id="register-link" href="{{ .Header.RegisterUrl }}">Register</a>
|
|
<a class="login pa2" id="login-link" href="{{ .LoginPageUrl }}">Log in</a>
|
|
<div id="login-popup" class="pa3 bt bb ba-ns bw1 b--theme-dark">
|
|
<form action="{{ .Header.LoginActionUrl }}" method="post" class="ma0 flex flex-column">
|
|
<input type="text" name="username" class="w-100" value="" placeholder="Username" />
|
|
<input type="password" name="password" class="w-100 mt1" value="" placeholder="Password" />
|
|
<a class="db mt1" href="{{ .Header.ForgotPasswordUrl }}">Forgot your password?</a>
|
|
<input type="hidden" name="redirect" value="{{ $.CurrentUrl }}">
|
|
<div class="mt2">
|
|
<input type="submit" value="Log In" class="w-100" />
|
|
</div>
|
|
<div class="mt3 tc">
|
|
<div class="b mb1">Third-party login</div>
|
|
<div class="flex flex-column g1">
|
|
<a href="{{ .Header.LoginWithDiscordUrl }}" class="db br2 overflow-hidden flex" title="Log in with Discord">
|
|
<img
|
|
src="{{ static "discord-login.svg" }}"
|
|
alt="Log in with Discord"
|
|
>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
<div class="menu-bar flex flex-column flex-row-ns justify-between w-100 {{ if .IsProjectPage }}project{{ end }}">
|
|
<div class="flex flex-column flex-row-ns items-center w-100">
|
|
{{ $itemsClass := "items self-stretch flex items-center justify-center justify-start-ns ml2-ns ml3-l" }}
|
|
{{ if .Header.Project }}
|
|
<a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo small bg-theme-dark flex-shrink-0">
|
|
Hand
|
|
made
|
|
</a>
|
|
<a href="{{ .Project.Url }}" class="flex-shrink-0">
|
|
<h2 class="mb0 mt2 mt0-ns mh3 mr0-ns tc tl-ns">{{ .Project.Name }}</h2>
|
|
</a>
|
|
{{ with .Header.Project }}
|
|
<div class="{{ $itemsClass }} w-100">
|
|
{{ if .HasBlog }}
|
|
<div class="root-item flex-shrink-0">
|
|
<a href="{{ .BlogUrl }}">Blog</a>
|
|
</div>
|
|
{{ end }}
|
|
{{ if .HasForums }}
|
|
<div class="root-item flex-shrink-0">
|
|
<a href="{{ .ForumsUrl }}">Forums</a>
|
|
</div>
|
|
{{ end }}
|
|
{{ if .HasEpisodeGuide }}
|
|
<div class="root-item flex-shrink-0">
|
|
<a href="{{ .EpisodeGuideUrl }}">Episode Guide</a>
|
|
</div>
|
|
{{ end }}
|
|
{{ if .CanEdit }}
|
|
<div class="flex-grow-1 dn db-ns"></div>
|
|
<div class="root-item flex-shrink-0">
|
|
<a href="{{ .EditUrl }}">Edit Project</a>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
{{ else }}
|
|
<a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo big bg-theme-dark">
|
|
Handmade
|
|
</a>
|
|
<div class="{{ $itemsClass }}">
|
|
<div class="root-item">
|
|
<a href="{{ .Header.ProjectIndexUrl }}">Projects</a>
|
|
</div>
|
|
<div class="root-item">
|
|
<a aria-expanded="false" aria-controls="events-submenu" class="menu-dropdown-js" href="#">
|
|
Events <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div>
|
|
</a>
|
|
<div class="submenu b--theme-dark" id="events-submenu">
|
|
<a href="{{ .Header.JamsUrl }}">Jams</a>
|
|
<a href="{{ .Header.ConferencesUrl }}">Conferences</a>
|
|
<a href="{{ .Header.FishbowlUrl }}">Fishbowls</a>
|
|
<a href="{{ .Header.PodcastUrl }}">Podcast</a>
|
|
<a href="https://guide.handmade-seattle.com/s" target="_blank">Handmade Dev Show</a>
|
|
{{/*<a href="{{ .Header.CalendarUrl }}">Calendar</a>*/}}
|
|
</div>
|
|
</div>
|
|
<div class="root-item">
|
|
<a href="{{ .Header.ForumsUrl }}">Forums</a>
|
|
</div>
|
|
<div class="root-item">
|
|
<a aria-expanded="false" aria-controls="resource-submenu" class="menu-dropdown-js" href="#">
|
|
Resources <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div>
|
|
</a>
|
|
<div class="submenu b--theme-dark" id="resource-submenu">
|
|
<a href="{{ .Header.EducationUrl }}">Education</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
<div class="dn flex-ns items-center f3">
|
|
<a class="svgicon svgicon-nofix" href="https://twitter.com/handmade_net/" target="_blank">{{ svg "twitter" }}</a>
|
|
<a class="svgicon svgicon-nofix ml2" href="https://discord.gg/hmn" target="_blank">{{ svg "discord" }}</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div id="content-start"></div>
|
|
<script type="text/javascript">
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const header = document.querySelector('#site-header');
|
|
|
|
// set up dropdown stuff for mobile / touch
|
|
{
|
|
const rootItems = header.querySelectorAll('.root-item');
|
|
|
|
function clearDropdowns() {
|
|
for (const item of rootItems) {
|
|
item.classList.remove('clicked');
|
|
}
|
|
}
|
|
|
|
function clickDropdown(el) {
|
|
header.classList.add('clicked');
|
|
|
|
if (el.classList.contains('clicked')) {
|
|
clearDropdowns();
|
|
} else {
|
|
clearDropdowns();
|
|
el.classList.add('clicked');
|
|
}
|
|
}
|
|
|
|
for (const item of rootItems) {
|
|
if (item.querySelector('.submenu')) {
|
|
item.addEventListener('click', e => {
|
|
clickDropdown(item);
|
|
e.stopPropagation();
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// dropdown accessiblity
|
|
{
|
|
const dropdowns = document.querySelectorAll('.menu-dropdown-js');
|
|
|
|
for(let i = 0; i < dropdowns.length; i++) {
|
|
let dropdown = dropdowns[i];
|
|
dropdown.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
for(let j = 0; j < dropdowns.length; j++){
|
|
let each = dropdowns[j];
|
|
if(each != dropdown){
|
|
each.setAttribute("aria-expanded", false);
|
|
}
|
|
}
|
|
// getAttribute returns a string so we have to do it this way
|
|
var toSetTo = dropdown.getAttribute("aria-expanded") == "false" ? "true" : "false";
|
|
dropdown.setAttribute("aria-expanded", toSetTo);
|
|
console.log(dropdown);
|
|
});
|
|
}
|
|
}
|
|
|
|
// set up login form
|
|
{
|
|
const loginPopup = document.getElementById("login-popup");
|
|
const loginLink = document.getElementById("login-link");
|
|
|
|
if (loginPopup !== null) {
|
|
loginLink.onclick = (e) => {
|
|
e.preventDefault();
|
|
loginPopup.classList.toggle("open");
|
|
}
|
|
}
|
|
|
|
const dtf = new Intl.DateTimeFormat([], {
|
|
dateStyle: "full",
|
|
timeStyle: "short",
|
|
});
|
|
|
|
for (const time of document.querySelectorAll('time')) {
|
|
const d = new Date(Date.parse(time.dateTime));
|
|
if (time.getAttribute("data-type") == "content") {
|
|
time.textContent = dtf.format(d);
|
|
} else {
|
|
time.title = dtf.format(d);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|