Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions layouts/calendar/baseof.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
<!doctype html>
<html itemscope itemtype="http://schema.org/WebPage" lang="{{ .Site.Language.Lang }}" class="no-js">
<html {{ if hugo.IsProduction }}data-isproduction="true"{{ end }} itemscope itemtype="http://schema.org/WebPage" lang="{{ .Site.Language.Lang }}" class="no-js">
<head>
{{ partial "head.html" . }}
<link href='{{ .Site.BaseURL }}/css/fullcalendar/main.min.css' rel='stylesheet' />
<link href='{{ .Site.BaseURL }}/css/calendar-responsive.css' rel='stylesheet' />
<script src='{{ .Site.BaseURL }}/js/fullcalendar/main.min.js'></script>
<script src='{{ .Site.BaseURL }}/js/calendar.js'></script>
<script>
renderCalendar();
{{ $apiKey := getenv "HUGO_GOOGLE_CALENDAR_API_KEY" | default "" }}
{{ if hugo.IsProduction }}
{{ if not $apiKey }}
{{ errorf "HUGO_GOOGLE_CALENDAR_API_KEY environment variable is required for production builds" }}
{{ end }}
{{ end }}
renderCalendar({{ $apiKey | js }});
</script>
</head>
<body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
Expand Down
23 changes: 20 additions & 3 deletions static/js/calendar.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,29 @@ function openEvent(event) {
return false;
};

function renderCalendar() {
document.addEventListener('DOMContentLoaded', function () {
function renderCalendar(apiKey) {
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');

if (!calendarEl) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A trick: we can set eg data-isproduction on the root <html> element. But we only do that for production builds, and then client side we know if a calendar / API key is expected.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

like this?

<html {{ if hugo.IsProduction }}data-isproduction="true"{{ end }}>

console.error('Calendar element not found. Cannot render calendar.');
return;
}

var isProduction = document.documentElement.getAttribute('data-isproduction') === 'true';

if (!apiKey) {
if (isProduction) {
console.error('Google Calendar API key is missing in production. Calendar will not render.');
} else {
console.warn('Google Calendar API key is missing. Calendar will not render.');
}
calendarEl.innerHTML = '<div>Community Calendar is not available in this environment (missing API Key).</div>';
return;
}

var calendar = new FullCalendar.Calendar(calendarEl, {
googleCalendarApiKey: 'AIzaSyDn_UhFPLDgxouI5nc8hOULFY25EjwGR44',
googleCalendarApiKey: apiKey,
events: {
googleCalendarId: 'calendar@kubernetes.io'
},
Expand Down