HMC
/
hmc_site_source
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial version of timeline

main
Devon 2024-11-10 03:14:08 -08:00
parent 9740585b42
commit 533b45a6f4
5 changed files with 228 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
assets/js/main.js
View File

@ -49,7 +49,8 @@
const modal = document.querySelector(`#${target}`);
if (modal) {
btn.addEventListener("click", (e) => {
toggle_modal(modal, true);
if (e.target.tagName !== 'A')
toggle_modal(modal, true);
});
}
});
@ -77,10 +78,36 @@
document.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
var modal_id = body.getAttribute("modal");
if(modal_id) toggle_modal(document.querySelector(`#${modal_id}`), false);
if (modal_id) toggle_modal(document.querySelector(`#${modal_id}`), false);
}
});
// timelines
// ----------------------------------------
const updateTimeline = (timeline) => {
const day_target = timeline.getAttribute("data-day-target");
timeline.querySelectorAll(".day-events:not(.hidden)").forEach((day_events) => { day_events.classList.toggle("hidden", true); });
timeline.querySelector(`[data-day-title="${day_target}"]`).classList.toggle("hidden", false);
timeline.querySelectorAll(`.day_listing.active`).forEach((listing) => {
listing.classList.toggle("inactive", true);
listing.classList.toggle("active", false);
});
var new_active = timeline.querySelector(`.day_listing[data-day-target="${day_target}"]`);
new_active.classList.toggle("active", true);
new_active.classList.toggle("inactive", false);
};
document.querySelectorAll(".timeline_grid_container").forEach((timeline) => {
const days = timeline.querySelector(".day-listing-container");
days.addEventListener("click", (e) => {
const day_target = e.target.getAttribute("data-day-target");
if (day_target) {
timeline.setAttribute("data-day-target", day_target);
updateTimeline(timeline);
}
});
});
// Swipers
// ----------------------------------------
const swipers = document.querySelectorAll(".swiper-slider");

14
assets/scss/custom.scss
View File

@ -50,16 +50,26 @@
}
.testimonial a,
.img_grid_container a {
.img_grid_container a,
.timeline_grid_container a {
color: var(--meetups-color) !important;
text-decoration: none;
}
.testimonial a:hover,
.img_grid_container a:hover {
.img_grid_container a:hover,
.timeline_grid_container a {
text-decoration: underline;
}
// .day_listing.active {
// }
.day_listing.inactive {
color: rgb(163, 163, 163);
}
.modal-bg a {
color: var(--meetups-color) !important;
text-decoration: none;

118
content/english/seattle/index.md
View File

@ -9,7 +9,7 @@ banner:
title: "<span class='seattle-color'>Handmade Seattle 2024</span>"
content: "We are the largest indie conferences for low-level programmers.<br> Proud to be __Fully Hybrid__.<br>"
content_bottom: "**Seattle Center**<br><span class='text-small'>Nesholm Family Lecture Hall</span><br><br><span class='underline'>**Nov 20th - 22nd, 2024**</span><br>Private Hangouts on Friday, Nov 22nd"
content_bottom_class: "mt-20 text-white"
content_bottom_class: "mt-20 mb-20 text-white"
section_class: "mb-0 pb-0"
bg_img:
parallax: false
@ -19,7 +19,7 @@ banner:
hide_banner_img: true
transition:
end: "/images/transition2.svg"
end_class: "mt-20 transform -scale-y-100 -scale-x-100"
end_class: "transform -scale-y-100 -scale-x-100"
end_color: "#fff"
end_dark: "/images/transition2.svg"
end_dark_color: "#150e31"
@ -57,6 +57,120 @@ features:
end_style: "mask-size: cover;height:150px;"
end_dark: "/images/transition3.svg"
end_dark_color: "#150e31"
timeline:
enable: false
date_class: ""
event_class: ""
timeline_class: "mb-20 mt-12"
event_img_class: ""
time_class: "text-right text-slate-200"
event_title_class: "dark:text-white text-xl"
event_subtitle_class: "text-lg text-slate-200"
day_listing_class: "text-2xl text-white no-decoration hover:meetups-color hover:cursor-pointer hover:underline"
day_listing_inactive_class: "text-gray"
top_text: ""
top_text_class: "mb-12 text-center"
bottom_text: "All times in Pacific Time, UTC-8:00 timezone."
bottom_text_class: "text-center mt-8 text-slate-300"
day_date_class: "text-center text-white text-xl mb-4 underline"
default_day: "Day 1"
days:
- title: "Day 1"
date: "Nov 20th, 2024"
title_class: "text-dark dark:text-white"
events:
- title: "Sign In"
time: "9:30 AM"
subtitle: "Show up and sign in!"
modal_target: ""
title_class: ""
subtitle_class: ""
link: ""
- title: "game engine design and the dark arts of data plumbing"
time: "10:30 AM"
subtitle: "Devon Hall"
title_class: ""
modal_target: ""
subtitle_class: ""
link: ""
- title: "Talk about why LLVM is bad"
time: "11:30 AM"
subtitle: "Negate"
title_class: ""
subtitle_class: ""
link: ""
- title: "Lunch"
time: "12:30 PM"
subtitle: ""
title_class: ""
subtitle_class: ""
link: ""
- title: "Day 2"
date: "Nov 21st, 2024"
title_class: "text-dark dark:text-white"
top_text: ""
top_text_class: "dark:text-white"
bottom_text: ""
bottom_text_class: ""
events:
- title: "Yet another thing"
time: "9:30 AM"
subtitle: "find a friend"
title_class: ""
subtitle_class: ""
link: ""
- title: "listen to a song with a super long title"
time: "10:30 AM"
subtitle: "sign some documents in a long title"
title_class: ""
subtitle_class: ""
link: ""
- title: "Help your friend fix his vim config"
time: "11:30 AM"
subtitle: "because not everyone knows vimscript"
title_class: ""
subtitle_class: ""
link: ""
- title: "Lunch"
time: "12:30 PM"
subtitle: ""
title_class: ""
subtitle_class: ""
link: ""
- title: "Day 3"
date: "Nov 22nd, 2024 (Hangouts)"
title_class: "text-dark dark:text-white"
top_text: ""
top_text_class: "dark:text-white"
bottom_text: ""
bottom_text_class: ""
events:
- title: "MoPop Mueseum"
time: "9:30 AM"
subtitle: ""
title_class: ""
subtitle_class: ""
link: ""
- title: "Flatstick Pub"
time: "1:30 PM"
subtitle: ""
title_class: ""
subtitle_class: ""
link: ""
- title: "After Party"
time: "7:30 PM"
subtitle: "@ a location"
title_class: ""
subtitle_class: ""
link: ""
- title: "Devon"
time: "9:30 AM"
subtitle: "was here"
title_class: ""
subtitle_class: ""
link: ""
img_grid:
title: ""
title_class: "text-center"

14
layouts/partials/components/features.html
View File

@ -40,6 +40,12 @@
{{ partial "image" (dict "Src" .image "Alt" "Banner" "Class" "w-1/3 h-1/3" ) }}
</figure>
{{ end }}
<!-- timeline -->
{{ if .timeline }}
{{ partial "components/timeline.html" . }}
{{ end }}
<!-- timeline -->
<h2 class="{{ .title_class }}">
{{ .title | markdownify }}
</h2>
@ -72,18 +78,18 @@
<!-- testimonials -->
{{ if .testimonials }}
{{ partial "components/testimonials.html" . }}
{{ end }}
{{ end }}
<!-- testimonials -->
<!-- img_grid -->
{{ if .img_grid }}
{{ partial "components/img_grid.html" . }}
{{ end }}
<!-- /img_grid -->
<!-- card_grid -->
{{ if .card_grid }}
{{ partial "components/card_grid.html" . }}
{{ end }}
<!-- img_grid -->
<!-- card_grid -->
<p class="mb-8 text-lg about-content">
{{ .content | markdownify }}

61
layouts/partials/components/timeline.html Normal file
View File

@ -0,0 +1,61 @@
{{ if .timeline }}
{{ if .timeline.enable }}
{{ $default_day := .timeline.default_day }}
<div
class="container relative mx-auto px-4 {{ .timeline.section_class }} timeline_grid_container {{ .timeline.timeline_class }}"
data-day-target="{{ .timeline.default_day }}">
{{ if .timeline.title }}<p class="{{ .timeline.title_class }}">{{ .timeline.title }}</p>{{ end }}
{{ if .timeline.top_text }}<p class="{{ .timeline.top_text_class }}">{{ .timeline.top_text | markdownify }}</p>{{ end }}
<div class="flex flex-wrap justify-center mx-auto columns-1 max-w-3xl min-w-32">
{{ $event_class := .timeline.event_title_class }}
{{ $event_title_class := .timeline.event_title_class }}
{{ $event_subtitle_class := .timeline.event_subtitle_class }}
{{ $event_time_class := .timeline.time_class }}
{{ $event_img_class := .timeline.img_class }}
{{ $day_date_class := .timeline.day_date_class }}
<div class="day-listing-container flex justify-center items-center w-full mb-8">
<div class="space-x-4">
{{ $day_listing_class := .timeline.day_listing_class }}
{{ $day_listing_inactive_class := .timeline.day_listing_inactive_class }}
{{ range $i, $day := .timeline.days }}
<span
class="day_listing {{ $day.listing_class }} {{ $day_listing_class }} {{ if ne $day.title $default_day }} inactive {{ else }} active {{ end }}"
data-day-target="{{ $day.title }}">{{ $day.title }}</span>
{{ end }}
</div>
</div>
<div class="day-container w-full">
{{ range $day := .timeline.days }}
<div class="day-events w-full {{ if ne $day.title $default_day }} hidden {{ end }}" data-day-title="{{ $day.title }}">
<p class="{{ $day_date_class }} {{ $day.date_class }}">{{ $day.date }}</p>
{{ range $event := $day.events }}
<div class=" {{ $event_class }} {{ $event.class }} p-2 row col-12">
<div class="col-5">
<p class="{{ $event_time_class }} {{ $event.time_class}} text-right">{{ $event.time }}</p>
</div>
<div class="col-7" {{ if $event.modal_target }} data-modal-show="{{ $event.modal_target }}" {{ end }}>
{{ if $event.link }}
<a href="{{ $event.link }}">
{{ end }}
<p class="{{ $event_title_class}} {{ $event.title_class }}">
{{ $event.title | markdownify }}
</p>
<p class="{{ $event_subtitle_class}} {{ $event.subtitle_class}}">
{{ $event.subtitle | markdownify }}
</p>
{{ if $event.link }}
</a>
{{ end }}
</div>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
<p class="{{ .timeline.bottom_text_class}}">{{ .timeline.bottom_text | markdownify }}</p>
</div>
{{ end }}
{{ end }}