jekyll-theme-centos 2.52.0.beta.83 → 2.52.0.beta.85

data/_includes/base/event.html.liquid

@@ -16,10 +16,12 @@ Design Logic:
 
 Required Inputs:
 - title: Event name/title
+- start: Event start (YYYY-MM-DD for an all-day event, or YYYY-MM-DDTHH:MM
+  to give it a specific start time on that same day)
 
 Optional Inputs:
 - description: Event description text
-- date: Event date/time string
+- end: Event inclusive end (same format as start), defaults to start
 - location: Event location name
 - color: Alert color scheme (default: "secondary")
 - icon: Icon class (default: "fa-solid fa-calendar")
@@ -57,8 +59,61 @@ Data Source Hierarchy (priority):
     {%- assign event_city        = event.city        | default: with_event_schema.city.default %}
     {%- assign event_color       = event.color       | default: with_event_schema.color.default %}
     {%- assign event_location    = event.location    | default: with_event_schema.location.default %}
-    {%- assign event_date        = event.date        | default: with_event_schema.date.default %}
     {%- assign event_description = event.description | default: with_event_schema.description.default %}
+
+    {%- comment %}
+    Derive the same style of display string the old free-text `date` field
+    used to hold (e.g. "September 19 - 20, 2025") from the structured,
+    inclusive `start`/`end` ISO dates — collapsing the month/year whenever
+    both sides share it, spelling both out in full otherwise. No date
+    arithmetic here, only formatting and string comparison of the formatted
+    output; the calendar component (reading this same with_event_data) is
+    the one place that does inclusive-to-exclusive end-date arithmetic, in
+    JS. See the calendar component's event data contract documentation.
+
+    A `start` carrying a time-of-day (`YYYY-MM-DDTHH:MM`) is a same-day timed
+    event rather than a date range — it gets its own branch below that
+    appends the clock time(s) instead of running the range-collapsing logic.
+    {% endcomment %}
+    {%- assign event_start = event.start %}
+    {%- if event_start != "" and event_start != nil %}
+      {%- assign event_end = event.end | default: event_start %}
+      {%- if event_end == "" %}
+        {%- assign event_end = event_start %}
+      {%- endif %}
+      {%- if event_start contains "T" %}
+        {%- assign event_date = event_start | date: "%B %-d, %Y" %}
+        {%- assign event_start_time = event_start | date: "%-l:%M %p" %}
+        {%- if event_end != event_start %}
+          {%- assign event_end_time = event_end | date: "%-l:%M %p" %}
+          {%- assign event_date = event_date | append: ", " | append: event_start_time | append: " - " | append: event_end_time %}
+        {%- else %}
+          {%- assign event_date = event_date | append: ", " | append: event_start_time %}
+        {%- endif %}
+      {%- else %}
+        {%- assign event_start_ym = event_start | date: "%Y-%m" %}
+        {%- assign event_end_ym   = event_end   | date: "%Y-%m" %}
+        {%- assign event_start_y  = event_start | date: "%Y" %}
+        {%- assign event_end_y    = event_end   | date: "%Y" %}
+        {%- if event_start == event_end %}
+          {%- assign event_date = event_start | date: "%B %-d, %Y" %}
+        {%- elsif event_start_ym == event_end_ym %}
+          {%- assign event_date_start = event_start | date: "%B %-d" %}
+          {%- assign event_date_end   = event_end   | date: "%-d, %Y" %}
+          {%- assign event_date = event_date_start | append: " - " | append: event_date_end %}
+        {%- elsif event_start_y == event_end_y %}
+          {%- assign event_date_start = event_start | date: "%B %-d" %}
+          {%- assign event_date_end   = event_end   | date: "%B %-d, %Y" %}
+          {%- assign event_date = event_date_start | append: " - " | append: event_date_end %}
+        {%- else %}
+          {%- assign event_date_start = event_start | date: "%B %-d, %Y" %}
+          {%- assign event_date_end   = event_end   | date: "%B %-d, %Y" %}
+          {%- assign event_date = event_date_start | append: " - " | append: event_date_end %}
+        {%- endif %}
+      {%- endif %}
+    {%- else %}
+      {%- assign event_date = "" %}
+    {%- endif %}
     {%- assign event_icon        = event.icon        | default: with_event_schema.icon.default %}
     {%- assign event_image_url   = event.image_url   | default: with_event_schema.image_url.default %}
     {%- assign event_link        = event.link        | default: with_event_schema.link.default %}

data/_includes/base/head.html.liquid

@@ -11,7 +11,7 @@ Design Logic:
 - Favicon support: multiple formats (16x16, 32x32, SVG with type, Apple Touch)
 - Google Fonts: Montserrat (5 weights) and Source Code Pro (2 weights) via async stylesheet
 - Breakingnews scroll offset: dynamic CSS calculation
-- Conditional includes: OGP, Highlight.js, DataTables, FontAwesome (SVG+JS)
+- Conditional includes: OGP, Highlight.js, DataTables, FontAwesome (SVG+JS), Event Calendar
 - CSS prioritization: custom stylesheet last for override
 - Script loading: Bootstrap base first (defer), then optional extensions, then UI behaviors
 - Bootstrap and FontAwesome preloaded (high-priority fetch); CDN origins preconnected + dns-prefetched per active component
@@ -25,6 +25,7 @@ Optional Inputs:
 - page.with_ogp, page.with_fontawesome: Include OGP/Font Awesome SVG+JS (boolean)
 - page.with_breakingnews, page.with_highlight: Include breaking news/highlight
 - page.with_datatable: Include DataTables (boolean)
+- page.with_calendar: Include Event Calendar (boolean)
 - page.with_breakingnews_data: Array of breaking news items
 - page.with_backtotop: Include back-to-top button (boolean)
 - page.with_copyvalue: Include copy-to-clipboard behavior (boolean)
@@ -67,6 +68,10 @@ Optional Inputs:
 <link rel="preconnect" href="https://cdn.datatables.net" crossorigin />
 <link rel="dns-prefetch" href="https://cdn.datatables.net" />
 {%- endif %}
+{%- if page.with_calendar %}
+<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
+{%- endif %}
 <link rel="preload" href="{{ site.baseurl }}/assets/js/bootstrap.bundle.min.js" as="script" fetchpriority="high" />
 {%- include base/fontawesome.html.liquid type="preload" %}
 <link rel="preload" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Source+Code+Pro:ital,wght@0,400;0,700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'" />
@@ -121,6 +126,7 @@ Uses CSS custom properties for cleaner, more maintainable dynamic styling.
 {%- include base/fontawesome.html.liquid type="head" %}
 {%- include base/highlight.html.liquid type="head" %}
 {%- include base/datatable.html.liquid type="head" %}
+{%- include base/calendar.html.liquid type="head" %}
 
 {%- comment %} JavaScript base — Bootstrap must execute before all component scripts {%- endcomment %}
 <script src="{{ site.baseurl }}/assets/js/bootstrap.bundle.min.js" defer></script>
@@ -130,6 +136,7 @@ Uses CSS custom properties for cleaner, more maintainable dynamic styling.
 {%- include base/fontawesome.html.liquid type="script" %}
 {%- include base/highlight.html.liquid type="script" %}
 {%- include base/datatable.html.liquid type="script" %}
+{%- include base/calendar.html.liquid type="script" %}
 
 {%- comment %} JavaScript UI behavior components — depend on Bootstrap and FontAwesome SVG+JS {%- endcomment %}
 {%- include base/backtotop.html.liquid %}

data/_includes/base/link.html.liquid

@@ -64,6 +64,14 @@ Security & External Links:
   {%- assign anchor            = nil %}
   {%- assign rel_attr          = nil %}
 
+  {%- comment %} --- Security: neutralize dangerous URI schemes --- {% endcomment %}
+  {%- if link != nil -%}
+    {%- assign link_downcase = link | downcase -%}
+    {%- if link_downcase contains "javascript:" or link_downcase contains "data:" or link_downcase contains "vbscript:" -%}
+      {%- assign link = "#" -%}
+    {%- endif -%}
+  {%- endif -%}
+
   {%- comment %} === Data processing === {% endcomment %}
   {%- if link != nil -%}
     {%- assign link_char1 = link | slice: 0, 1 -%}

data/_sass/base/_calendar.scss

@@ -0,0 +1,204 @@
+// ================================================================================
+// Event Calendar (@event-calendar/build) theming
+// ================================================================================
+// Purpose: Map the CentOS color palette onto the Event Calendar library's own
+// CSS custom properties (--ec-*), instead of hand-rolling calendar styles.
+//
+// Selector specificity note: the library ships its own `.ec { --ec-*: ...; }`
+// block (see https://github.com/vkurko/calendar/blob/master/packages/core/src/styles/theme.css)
+// inside event-calendar.min.css, which this theme loads via the "CSS
+// dependencies" block in head.html.liquid — AFTER this theme's own
+// stylesheet.min.css. A same-specificity `.ec { ... }` override placed here
+// would therefore lose the cascade to the library's own later-loaded rule.
+// Prefixing with `body` bumps our selector's specificity above the
+// library's plain `.ec` rule so our values win regardless of load order
+// (the same technique this file's DataTables corrections use in
+// _customization.scss, e.g. `.content .dt-container`).
+//
+// The dark-mode toggle classes (`.ec-dark`/`.ec-auto-dark`) are applied by
+// the page to whichever element wraps the calendar — commonly `<body>`
+// itself, per this library's own docs. A `body .ec-dark .ec` selector would
+// require `.ec-dark` on a *descendant* of body and never match when body
+// carries the class directly, so the dark blocks anchor to `html` instead
+// (always an ancestor of body, regardless of which element the toggle class
+// lands on) to stay correct in both cases.
+// ================================================================================
+
+body .ec {
+  // The library defines --ec-bg-color but never applies it to .ec itself
+  // (only to specific inner elements like popups), so the calendar's outer
+  // container has no background of its own and shows whatever it's placed
+  // on through — inconsistent depending on the page's own layout. Declared
+  // once here (not repeated in the dark-mode blocks below): --ec-surface-bg-color
+  // cascades normally, so this always reads whichever value currently wins
+  // for this element, light or dark.
+  //
+  // Deliberately a separate variable from --ec-bg-color, not the same one:
+  // the library also derives --ec-day-bg-color (grid cells), .ec-sidebar,
+  // and .ec-col-head (weekday row) from --ec-bg-color. Every component's
+  // "Live example" across this theme's docs sits inside a `.text-bg-light`
+  // preview box (see e.g. components/calendar.md), painted with $light —
+  // so the outer container/toolbar use $light too, to sit flush with that
+  // surface. But feeding $light into --ec-bg-color directly also recolors
+  // the day cells and weekday header to $light, flattening the grid against
+  // its own container and losing the contrast that gives the calendar its
+  // shape. --ec-bg-color stays $white so those inner surfaces keep
+  // contrasting against the (now $light) outer one.
+  background-color: var(--ec-surface-bg-color);
+  --ec-surface-bg-color: #{$light};
+
+  --ec-bg-color: #{$white};
+  --ec-text-color: #{$body-color};
+  --ec-border-color: #{$border-color};
+
+  --ec-button-bg-color: #{$white};
+  --ec-button-border-color: #{$border-color};
+  --ec-button-text-color: #{$body-color};
+  --ec-button-active-bg-color: #{map-get($theme-colors, 'centos-purple-100')};
+  --ec-button-active-border-color: #{$primary};
+  --ec-button-active-text-color: #{$primary};
+
+  --ec-today-bg-color: #{map-get($theme-colors, 'centos-orange-50')};
+  --ec-highlight-color: #{map-get($theme-colors, 'centos-purple-50')};
+
+  --ec-event-bg-color: #{$primary};
+  --ec-event-text-color: #{$white};
+  --ec-bg-event-color: #{map-get($theme-colors, 'centos-purple-200')};
+
+  --ec-now-indicator-color: #{$danger};
+  --ec-popup-bg-color: #{$white};
+
+  // The library renders event titles as <h4 class="ec-event-title"> but only
+  // resets its font-size in list view (`.ec-list .ec-event-title`) — in every
+  // other view it falls through to this theme's Bootstrap h4 size. Match it
+  // to the calendar's own body text size (the same size the day-of-week
+  // header row uses) instead of an oversized heading.
+  //
+  // In month/all-day grid views the library also sets a `min-block-size:
+  // 1.5em` on this same element for tap-target sizing. Since it's
+  // `display: block`, that extra height just extends downward past the
+  // (now correctly-sized, single-line) text instead of centering it,
+  // leaving the name visibly top-biased in its pill. Making the title a
+  // flex container of its own single line of text centers it within
+  // whatever height the library gives it — a no-op in list/time-grid views,
+  // which don't set that min-height in the first place.
+  .ec-event-title {
+    font-size: #{$font-size-base};
+    display: flex;
+    align-items: center;
+  }
+
+  // List view's day-group heading (day name + date) is also an <h4>, hitting
+  // the same Bootstrap h4 collision as .ec-event-title above. Match it to the
+  // same body text size as the event name, kept bold (the library's own
+  // default weight for this heading) so the two rows stay visually distinct.
+  // (.ec-day-head doubles as the day-number cell in month view, so this
+  // covers both.)
+  .ec-day-head {
+    font-size: #{$font-size-base};
+    font-weight: 700;
+  }
+
+  // Headings inside the calendar (.ec-title — the "August 2026" navigation
+  // title; .ec-col-head, the Sun/Mon/… weekday row; .ec-day-head, the
+  // day-number/day-group heading above) all rely on inherited `color`, since
+  // the library never sets one itself: its own h1-h6 rule is `color:
+  // var(--bs-heading-color)`, and this theme leaves that Bootstrap variable
+  // empty (`$headings-color: null`), so the value is invalid and falls back
+  // to whatever color is inherited from the calendar's ancestors. That's
+  // normally this theme's own body color, but it silently breaks wherever
+  // the calendar is embedded inside anything that sets its own text color —
+  // e.g. this component's own doc example, wrapped in Bootstrap's
+  // `.text-bg-light` for a bordered preview box, which forces black. Set it
+  // explicitly instead of depending on inheritance, so the calendar's
+  // headings always match the page's own heading color regardless of what
+  // wraps it.
+  .ec-title,
+  .ec-col-head,
+  .ec-day-head {
+    color: var(--ec-text-color);
+  }
+
+  // List view's per-event color tag (a thin bar next to the event name) only
+  // gets an inline background color when the event data itself sets one; our
+  // example events don't, so give it the same event color used everywhere
+  // else instead of leaving it transparent/invisible.
+  .ec-event-tag {
+    background-color: var(--ec-event-bg-color);
+  }
+
+  // The toolbar (view title + nav/view-switcher buttons) sits inside
+  // .ec-header, which the library makes `position: sticky` so it stays
+  // pinned while the grid/list body scrolls underneath — but the library
+  // never gives the toolbar its own background. Left unset it stays
+  // transparent, so scrolled-under event content shows through it instead
+  // of the toolbar blending into the calendar around it. Match it to the
+  // same --ec-surface-bg-color used for .ec itself so it reads as one
+  // surface (see the --ec-surface-bg-color vs. --ec-bg-color note above).
+  //
+  // The library also spaces the toolbar from the grid/list body below with
+  // `margin-block-end: 1em`, not padding. A margin sits outside the
+  // toolbar's own border box, so that gap isn't painted by the
+  // background-color above — it shows whatever is behind the (transparent)
+  // .ec-header instead, leaving a visible seam of mismatched color between
+  // the toolbar and the calendar body. Zero out the margin and swap in the
+  // same amount of padding so the toolbar's own background extends through
+  // that space instead of leaving a gap for it to show through.
+  .ec-toolbar {
+    background-color: var(--ec-surface-bg-color);
+    margin-block-end: 0;
+    padding-block-end: 1em;
+  }
+}
+
+// Manual dark toggle (an ancestor — typically <body> itself — carries the
+// .ec-dark class).
+html .ec-dark .ec {
+  --ec-surface-bg-color: #{$dark};
+  --ec-bg-color: #{$dark};
+  --ec-text-color: #{$light};
+  --ec-border-color: #{map-get($theme-colors, 'centos-purple-800')};
+
+  --ec-button-bg-color: #{$dark};
+  --ec-button-border-color: #{map-get($theme-colors, 'centos-purple-800')};
+  --ec-button-text-color: #{$light};
+  --ec-button-active-bg-color: #{map-get($theme-colors, 'centos-purple-700')};
+  --ec-button-active-border-color: #{map-get($theme-colors, 'centos-purple-400')};
+  --ec-button-active-text-color: #{$light};
+
+  --ec-today-bg-color: #{map-get($theme-colors, 'centos-orange-900')};
+  --ec-highlight-color: #{map-get($theme-colors, 'centos-purple-900')};
+
+  --ec-event-bg-color: #{map-get($theme-colors, 'centos-purple-400')};
+  --ec-event-text-color: #{$dark};
+  --ec-bg-event-color: #{map-get($theme-colors, 'centos-purple-800')};
+
+  --ec-popup-bg-color: #{$dark};
+}
+
+// Automatic dark mode (an ancestor carries the .ec-auto-dark class and the
+// OS/browser prefers a dark color scheme) — same values as the manual toggle.
+@media (prefers-color-scheme: dark) {
+  html .ec-auto-dark .ec {
+    --ec-surface-bg-color: #{$dark};
+    --ec-bg-color: #{$dark};
+    --ec-text-color: #{$light};
+    --ec-border-color: #{map-get($theme-colors, 'centos-purple-800')};
+
+    --ec-button-bg-color: #{$dark};
+    --ec-button-border-color: #{map-get($theme-colors, 'centos-purple-800')};
+    --ec-button-text-color: #{$light};
+    --ec-button-active-bg-color: #{map-get($theme-colors, 'centos-purple-700')};
+    --ec-button-active-border-color: #{map-get($theme-colors, 'centos-purple-400')};
+    --ec-button-active-text-color: #{$light};
+
+    --ec-today-bg-color: #{map-get($theme-colors, 'centos-orange-900')};
+    --ec-highlight-color: #{map-get($theme-colors, 'centos-purple-900')};
+
+    --ec-event-bg-color: #{map-get($theme-colors, 'centos-purple-400')};
+    --ec-event-text-color: #{$dark};
+    --ec-bg-event-color: #{map-get($theme-colors, 'centos-purple-800')};
+
+    --ec-popup-bg-color: #{$dark};
+  }
+}

data/_sass/base/_customization.scss

@@ -242,7 +242,8 @@ main {
     height: 1lh;
     display: flex;
     align-items: center;
-    transform: translateX(-100%);
+    transform: translateX(calc(-100% - #{$spacer * 0.5}));
+    transition: transform 200ms ease-out, opacity 200ms ease-out;
     font-size: 1em;
     margin-left: 0 !important;
     margin-right: 0 !important;
@@ -270,13 +271,21 @@ main {
   .content > h4:hover .heading-anchor,
   .content > h5:hover .heading-anchor,
   .content > h6:hover .heading-anchor,
-  .heading-anchor:focus {
+  .content > h1 .heading-anchor:focus,
+  .content > h2 .heading-anchor:focus,
+  .content > h3 .heading-anchor:focus,
+  .content > h4 .heading-anchor:focus,
+  .content > h5 .heading-anchor:focus,
+  .content > h6 .heading-anchor:focus {
     opacity: 1;
+    transform: translateX(-100%);
   }
-  .heading-anchor.is-active,
-  .heading-anchor.is-active i {
+  .heading-anchor.is-active {
     opacity: 1 !important;
     visibility: visible !important;
+    transform: translateX(-100%) !important;
+  }
+  .heading-anchor.is-active i {
     color: var(--bs-primary);
   }
 

data/assets/css/base/stylesheet.min.scss

@@ -33,3 +33,7 @@
 
 // 6. Add additional custom code here
 @import "base/customization";
+
+// 7. Third-party component theme overrides (must load after our own
+// customizations so component-specific corrections win the cascade).
+@import "base/calendar";