Skip to content

Commit bcfe0a7

Browse files
yuhattoryuhattor
committed
updating header and featured article
1 parent 3a75ec3 commit bcfe0a7

3 files changed

Lines changed: 202 additions & 35 deletions

File tree

‎layouts/partials/head.html‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@
1818
{{ end }}
1919

2020
{{ "<!-- jQuery and Bootstrap Dependencies -->" | safeHTML }}
21-
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
22-
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
23-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
24-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
21+
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
22+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" crossorigin="anonymous"></script>
23+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
24+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
2525

2626
{{ "<!-- Main Stylesheet -->" | safeHTML }}
2727
{{ $style := resources.Get "scss/style.scss" | toCSS | minify }}
@@ -55,6 +55,21 @@
5555
{{ end }}
5656
{{ end }}
5757

58+
{{ if not .Site.IsServer }}
59+
<!-- Google Analytics 4 -->
60+
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.Params.googleAnalytics }}" crossorigin="anonymous"></script>
61+
<script>
62+
window.dataLayer = window.dataLayer || [];
63+
function gtag(){dataLayer.push(arguments);}
64+
gtag('js', new Date());
65+
gtag('config', '{{ site.Params.googleAnalytics }}', {
66+
'cookie_flags': 'SameSite=None;Secure',
67+
'anonymize_ip': true,
68+
'client_storage': 'none'
69+
});
70+
</script>
71+
{{ end }}
72+
5873
{{ "<!-- Mastodon verification code -->" | safeHTML }}
5974
<link href="https://fosstodon.org/@innersource" rel="me">
6075

‎layouts/partials/header.html‎

Lines changed: 108 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,114 @@
6060
</ul>
6161
</div>
6262
<div class="col3">
63-
{{ partial "featured-articles.html" . }}
63+
{{ if eq .Name "About" }}
64+
<ul class="menu">
65+
<li class="menu-title">Featured Information</li>
66+
</ul>
67+
<div class="featured-articles">
68+
{{ range where site.Data.featured_articles.about "visible" true }}
69+
<div class="article-card">
70+
<a href="{{ .link }}" class="article-link">
71+
<div class="article-image">
72+
<img src="{{ .image }}" alt="{{ .title }}">
73+
</div>
74+
<div class="article-content">
75+
<h4>{{ .title }}</h4>
76+
<p>{{ .description }}</p>
77+
</div>
78+
</a>
79+
</div>
80+
{{ end }}
81+
</div>
82+
{{ else if eq .Name "Activities" }}
83+
<ul class="menu">
84+
<li class="menu-title">Featured Information</li>
85+
</ul>
86+
<div class="featured-articles">
87+
{{ range where site.Data.featured_articles.activities "visible" true }}
88+
<div class="article-card">
89+
<a href="{{ .link }}" class="article-link">
90+
<div class="article-image">
91+
<img src="{{ .image }}" alt="{{ .title }}">
92+
</div>
93+
<div class="article-content">
94+
<h4>{{ .title }}</h4>
95+
<p>{{ .description }}</p>
96+
</div>
97+
</a>
98+
</div>
99+
{{ end }}
100+
</div>
101+
{{ else if eq .Name "Learning" }}
102+
<ul class="menu">
103+
<li class="menu-title">Featured Articles</li>
104+
</ul>
105+
<div class="featured-articles">
106+
{{ range where site.Data.featured_articles.learning "visible" true }}
107+
<div class="article-card">
108+
<a href="{{ .link }}" class="article-link">
109+
<div class="article-image">
110+
<img src="{{ .image }}" alt="{{ .title }}">
111+
</div>
112+
<div class="article-content">
113+
<h4>{{ .title }}</h4>
114+
<p>{{ .description }}</p>
115+
</div>
116+
</a>
117+
</div>
118+
{{ end }}
119+
</div>
120+
{{ else if eq .Name "Community" }}
121+
<ul class="menu">
122+
<li class="menu-title">Featured Activity</li>
123+
</ul>
124+
<div class="featured-articles">
125+
{{ $pages := where site.Pages "Type" "in" "redirects" }}
126+
{{ $pages = where $pages "Section" "events" }}
127+
{{ range first 1 ($pages.ByDate.Reverse) }}
128+
<div class="article-card">
129+
<a href="{{ .Params.redirect }}" class="article-link" target="_blank">
130+
<div class="article-image">
131+
<img src="{{ .Params.image }}" alt="{{ .Title }}">
132+
</div>
133+
<div class="article-content">
134+
<h4>{{ .Title }} will be held on {{ .Date.Format "January 2, 2006" }}</h4>
135+
</div>
136+
</a>
137+
</div>
138+
{{ end }}
139+
{{ range where site.Data.featured_articles.community "visible" true }}
140+
<div class="article-card">
141+
<a href="{{ .link }}" class="article-link">
142+
<div class="article-image">
143+
<img src="{{ .image }}" alt="{{ .title }}">
144+
</div>
145+
<div class="article-content">
146+
<h4>{{ .title }}</h4>
147+
</div>
148+
</a>
149+
</div>
150+
{{ end }}
151+
</div>
152+
{{ else if eq .Name "Blog & News" }}
153+
<ul class="menu">
154+
<li class="menu-title">Featured Articles</li>
155+
</ul>
156+
<div class="featured-articles">
157+
{{ range where site.Data.featured_articles.blog "visible" true }}
158+
<div class="article-card">
159+
<a href="{{ .link }}" class="article-link">
160+
<div class="article-image">
161+
<img src="{{ .image }}" alt="{{ .title }}">
162+
</div>
163+
<div class="article-content">
164+
<h4>{{ .title }}</h4>
165+
</div>
166+
</a>
167+
</div>
168+
{{ end }}
169+
</div>
170+
{{ end }}
64171
</div>
65172
</div>
66173
</div>

‎layouts/partials/menu.html‎

Lines changed: 75 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,94 @@
11
{{ if eq .Name "Schedule" }}
2-
<li class="menu-item-has-children">
2+
<li class="menu-item-has-children" id="schedule-menu-item">
33
<a href="#" style="border-bottom: 0px solid #e0e0e0;"><span>{{ .Name }}</span></a>
44
<div class="sub-menu" style="padding:0px;margin:0px;">
55
<div style="width:100%;margin:0px;padding:0px;" id="calendar-container">
6-
<div id="calendar-loading" style="text-align:center;padding:40px;color:#666;">
7-
<i class="ti-reload" style="animation: spin 2s linear infinite;display:block;font-size:24px;margin-bottom:10px;"></i>
8-
<span>Loading...</span>
6+
<div id="calendar-placeholder">
7+
<div id="calendar-loading" style="text-align:center;padding:40px;color:#666;opacity:0;transition:opacity 0.3s ease-in-out;">
8+
<i class="ti-reload" style="animation: spin 2s linear infinite;display:block;font-size:24px;margin-bottom:10px;"></i>
9+
<span>Loading...</span>
10+
</div>
911
</div>
1012
</div>
1113
</div>
1214
</li>
1315

1416
<script>
15-
document.addEventListener('DOMContentLoaded', function () {
16-
var calendarContainer = document.getElementById('calendar-container');
17-
if(calendarContainer){
18-
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
19-
const html = `<iframe src="https://calendar.google.com/calendar/embed?src=c_62694f414055ac569e5cb12dafbb0890ca22f3640b177a4b10b53171fbc9bdd4%40group.calendar.google.com&ctz=${timezone}" style="border:0; width:100%; min-height:500px;margin:0px;" frameborder="0" scrolling="no"></iframe>`
20-
calendarContainer.innerHTML = html;
17+
let calendarLoaded = false;
18+
19+
function loadCalendar() {
20+
if (calendarLoaded) return;
21+
22+
const calendarContainer = document.getElementById('calendar-container');
23+
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
24+
const iframe = document.createElement('iframe');
25+
iframe.style.border = '0';
26+
iframe.style.width = '100%';
27+
iframe.style.minHeight = '500px';
28+
iframe.style.margin = '0px';
29+
iframe.frameBorder = '0';
30+
iframe.scrolling = 'no';
31+
iframe.style.opacity = '0';
32+
iframe.style.transition = 'opacity 0.3s ease-in-out';
33+
34+
const loadingElement = document.getElementById('calendar-loading');
35+
if (loadingElement) {
36+
loadingElement.style.display = 'block';
37+
setTimeout(() => {
38+
loadingElement.style.opacity = '1';
39+
}, 50);
2140
}
2241

23-
const observer = new MutationObserver((mutations) => {
24-
mutations.forEach((mutation) => {
25-
if (mutation.addedNodes.length > 0) {
26-
const loadingElement = document.getElementById('calendar-loading');
27-
if (loadingElement) {
28-
loadingElement.style.transition = 'opacity 0.5s ease-out';
29-
loadingElement.style.opacity = '1';
30-
31-
setTimeout(() => {
32-
loadingElement.style.opacity = '0';
33-
setTimeout(() => {
34-
loadingElement.style.display = 'none';
35-
}, 500);
36-
}, 2000);
37-
}
42+
iframe.onload = function() {
43+
if (loadingElement) {
44+
loadingElement.style.opacity = '0';
45+
setTimeout(() => {
46+
loadingElement.style.display = 'none';
47+
iframe.style.opacity = '1';
48+
}, 300);
49+
}
50+
};
51+
52+
iframe.src = `https://calendar.google.com/calendar/embed?src=c_62694f414055ac569e5cb12dafbb0890ca22f3640b177a4b10b53171fbc9bdd4%40group.calendar.google.com&ctz=${timezone}`;
53+
54+
calendarContainer.appendChild(iframe);
55+
calendarLoaded = true;
56+
}
57+
58+
const menuItem = document.getElementById('schedule-menu-item');
59+
if (menuItem) {
60+
menuItem.addEventListener('mouseenter', loadCalendar);
61+
62+
const menuLink = menuItem.querySelector('a');
63+
if (menuLink) {
64+
menuLink.addEventListener('click', function(e) {
65+
if (window.innerWidth <= 991) {
66+
loadCalendar();
3867
}
3968
});
40-
});
41-
42-
if (calendarContainer) {
43-
observer.observe(calendarContainer, { childList: true, subtree: true });
4469
}
45-
});
70+
}
4671
</script>
72+
{{ else if eq .Name "Featured Articles" }}
73+
<li class="menu-item-has-children">
74+
<a href="#" style="border-bottom: 0px solid #e0e0e0;"><span>{{ .Name }}</span></a>
75+
<div class="sub-menu">
76+
{{ range $section, $articles := site.Data.featured_articles }}
77+
{{ range $articles }}
78+
{{ if .visible }}
79+
<div class="featured-article">
80+
<a href="{{ .link }}" {{ if hasPrefix .link "http" }}target="_blank"{{ end }}>
81+
<div class="featured-article-image">
82+
<img src="{{ .image }}" alt="{{ .title }}">
83+
</div>
84+
<div class="featured-article-title">{{ .title }}</div>
85+
</a>
86+
</div>
87+
{{ end }}
88+
{{ end }}
89+
{{ end }}
90+
</div>
91+
</li>
4792
{{else}}
4893
<li class="menu-item">
4994
<a href="{{ .URL | absURL }}" {{ with .Pre }} target="{{ . }}" {{ end }}><span>{{ .Name }}</span></a>

0 commit comments

Comments
 (0)