jekyll-theme-primerpages 2.3.0

data/_sass/_main.scss

@@ -0,0 +1,274 @@
+:root {
+  --topbar-height: 150px;
+}
+
+// Needed for setting the background overlay
+body::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  background-color: var(--overlay-color);
+  /* Use the --overlay-color variable here */
+}
+
+.topbar-aware-height {
+  height: calc(100vh - var(--topbar-height, 150px));
+}
+
+.topbar-aware-top {
+  top: var(--topbar-height, 150px);
+}
+
+.avatar-user {
+  border-radius: 50% !important;
+}
+
+// Needed to support custom background with a sidebar
+.background-fixed {
+  background-attachment: fixed !important;
+}
+
+// If a user adds a custom font, this component will stop it from bleeding into GitHub components:
+.github-component {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
+}
+
+.min-height-full {
+  min-height: 100vh;
+}
+
+.img-contain {
+  object-fit: contain;
+}
+
+.img-cover {
+  object-fit: cover;
+}
+
+.Masthead .CircleBadge {
+  aspect-ratio: 1 / 1;
+  max-width: 296px;
+  position: relative;
+  overflow: hidden;
+  /* Hide any overflow to maintain circle shape */
+  margin: auto;
+}
+
+.CircleBadge img {
+  position: absolute !important;
+  height: 100% !important;
+  width: 100% !important;
+  object-fit: cover;
+  left: 0 !important;
+  top: 0 !important;
+}
+
+.image-container {
+  width: 100%;
+  /* Allow the container to adjust to the website's width */
+  // max-width: 800px; /* Set a maximum width to prevent image from exceeding 800px */
+  height: 0;
+  /* Create an aspect ratio container (initial height is 0) */
+  padding-bottom: 53.125%;
+  /* Aspect ratio (425 / 800) */
+  position: relative;
+  overflow: hidden;
+}
+
+.image-container img {
+  position: absolute;
+  width: 100%;
+  /* Fill the entire container width */
+  height: 100%;
+  /* Fill the entire container height */
+  object-fit: cover;
+  /* Scale and crop the image to cover the container */
+}
+
+.image-container iframe {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.post-tags::before {
+  content: "";
+  display: block;
+  height: 5px;
+  width: 20px;
+  background-color: var(--fgColor-default, var(--color-fg-default));
+  margin-bottom: 4px;
+}
+
+.overflow-wrap-word {
+  overflow-wrap: break-word;
+}
+
+.rounded-circle {
+  width: 100%;
+  /* Make the image fill the container */
+  height: 100%;
+  /* Make the image fill the container */
+  border-radius: 50%;
+  /* Make the div circular */
+  object-fit: cover;
+  /* Scale the image to fill the container */
+}
+
+.section-heading {
+  border-top: 5px solid var(--borderColor-default, var(--color-border-default));
+  border-bottom: 1px solid var(--borderColor-muted, var(--color-border-muted));
+  padding-top: 7px !important;
+  padding-bottom: 11px !important;
+}
+
+.social-aside {
+  width: 44px;
+  height: 44px;
+  padding: 10px;
+}
+
+.SelectMenu::before {
+  background-color: unset;
+}
+
+.SelectMenu {
+  position: absolute;
+  top: unset;
+  bottom: unset;
+}
+
+.AppHeader {
+  --AppHeader-bg: var(--bgColor-inset, var(--color-canvas-inset));
+  background: var(--AppHeader-bg);
+}
+
+.AppHeader-button {
+  position: relative;
+  display: grid;
+  grid-auto-columns: max-content;
+  width: var(--base-size-32, 32px);
+  height: var(--base-size-32, 32px);
+  color: var(--color-fg-muted, var(--fgColor-muted));
+  background: transparent;
+  border: var(--borderWidth-thin, 1px) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-medium, 6px);
+  align-items: center;
+  justify-content: center;
+}
+
+.AppHeader-link {
+  color: var(--fgColor-default, var(--color-fg-default));
+}
+
+.version-selector__trigger {
+  color: var(--fgColor-default, var(--color-fg-default));
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.version-selector__trigger:hover {
+  text-decoration: none;
+}
+
+.AppHeader .version-selector__trigger {
+  color: var(--fgColor-default, var(--color-fg-default));
+}
+
+.Header .version-selector__trigger {
+  color: var(--header-fgColor-default, var(--color-header-text));
+}
+
+.ActionListItem {
+  background-color: var(--control-transparent-bgColor-rest, #0000);
+  border-radius: var(--borderRadius-medium, 0.375rem);
+  list-style: none;
+  position: relative;
+}
+
+
+.ActionListItem-label {
+  color: var(--fgColor-default, var(--color-fg-default));
+  font-size: var(--text-body-size-medium, 0.875rem);
+  font-weight: var(--base-text-weight-normal, 400);
+  grid-area: label;
+  line-height: var(--text-body-lineHeight-medium, 1.4285);
+  position: relative;
+}
+
+.BlogHeader {
+  color: var(--header-fgColor-default, var(--color-header-text)) !important;
+  background-color: var(--header-bgColor, var(--color-header-bg)) !important;
+}
+
+.Blog {
+  background-color: var(--bgColor-default, var(--color-canvas-default)) !important;
+}
+
+.Header-link[aria-current]:not([aria-current=false]) {
+  color: var(--underlineNav-borderColor-active, var(--color-primer-border-active));
+}
+
+.awesome-nav-chevron {
+  transition: transform 0.2s ease;
+}
+
+details[open]>summary .awesome-nav-chevron {
+  transform: rotate(180deg);
+}
+
+.awesome-nav-menu-backdrop {
+  opacity: 0.6;
+  z-index: 100;
+  cursor: pointer;
+}
+
+.awesome-nav-menu-drawer {
+  z-index: 100;
+}
+
+.awesome-nav-menu-panel {
+  width: min(100vw, 22rem);
+  z-index: 110;
+}
+
+summary::-webkit-details-marker {
+  display: none;
+}
+
+@media print {
+  .BlogHeader {
+    background-color: inherit;
+    color: black !important;
+  }
+
+  .AppHeader {
+    display: none !important;
+  }
+
+  .Header {
+    display: none !important;
+  }
+
+  .Toggle {
+    display: none !important;
+  }
+
+  .Related {
+    display: none !important;
+  }
+
+  .paginate-container {
+    display: none !important;
+  }
+
+  .markdown-body {
+    font-size: 12px;
+  }
+}

data/_sass/jekyll-theme-primerpages-compat.scss

@@ -0,0 +1,5 @@
+@import url("https://unpkg.com/@primer/css@21.5.1/dist/primer.css");
+@import url("https://cdn.jsdelivr.net/npm/octicons-css/octicons.min.css");
+@import "highlight-syntax";
+@import "language-colors";
+@import "main";

data/_sass/jekyll-theme-primerpages.scss

@@ -0,0 +1,7 @@
+@use "sass:meta";
+@import url("https://unpkg.com/@primer/css@21.5.1/dist/primer.css");
+@import url("https://cdn.jsdelivr.net/npm/octicons-css/octicons.min.css");
+@include meta.load-css("highlight-syntax");
+@include meta.load-css("language-colors");
+@include meta.load-css("admonitions");
+@include meta.load-css("main");

data/assets/css/style.scss

@@ -0,0 +1,2 @@
+---
+---

data/assets/css/theme.scss

@@ -0,0 +1,16 @@
+---
+---
+{% assign jekyll_version=jekyll.version | split: "." | first %}
+{% if jekyll_version == '3' %}
+/* Jekyll version 3 detected */
+@import 'jekyll-theme-primerpages-compat';
+{% else %}
+/* Jekyll version 4+ detected */
+@use 'jekyll-theme-primerpages';
+{% endif %}
+
+:root{
+    --color-profile-text: var(--color-fg-default);
+    --color-profile-accent: var(--color-accent-fg);
+    --color-profile-bg: var(--color-canvas-default);
+}

data/assets/js/anchor-links.js

@@ -0,0 +1,47 @@
+// Fix anchor links
+document.addEventListener('DOMContentLoaded', function () {
+    // Function to handle anchor link click
+    function handleAnchorLinkClick(e) {
+        // Prevent the default behavior of the link (e.g., jumping to the anchor)
+        e.preventDefault();
+
+        // Get the target section's ID from the href attribute
+        var targetId = this.getAttribute('href').substring(1);
+
+        // Get the target section by ID
+        var targetSection = document.getElementById(targetId);
+
+        // If the target section exists, calculate the offset based on the top bar's height
+        if (targetSection) {
+            var topBarHeight = document.querySelector('.topbar').offsetHeight;
+            var offsetTop = targetSection.offsetTop - topBarHeight;
+
+            // Scroll to the target section with the calculated offset
+            window.scrollTo({
+                top: offsetTop,
+                behavior: 'smooth' // Optional: Add smooth scrolling effect
+            });
+        }
+    }
+
+    // Function to recalculate topBarHeight on window resize
+    function handleWindowResize() {
+        topBarHeight = document.querySelector('.topbar').offsetHeight;
+    }
+
+    // Get all anchor links on the page
+    var anchorLinks = document.querySelectorAll('a[href^="#"]');
+
+    // Loop through each anchor link
+    anchorLinks.forEach(function (link) {
+        // Attach a click event listener to each anchor link
+        link.addEventListener('click', handleAnchorLinkClick);
+    });
+
+    // Add event listener for window resize, debounced for efficiency
+    var resizeTimer;
+    window.addEventListener('resize', function () {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(handleWindowResize, 250);
+    });
+});

data/assets/js/mermaid.js

@@ -0,0 +1,61 @@
+document.addEventListener('DOMContentLoaded', async function () {
+  const htmlElement = document.documentElement;
+
+  function getResolvedMermaidTheme() {
+    const mode = htmlElement.getAttribute('data-color-mode');
+
+    if (mode === 'dark') return 'dark';
+    if (mode === 'light') return 'neutral';
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'neutral';
+  }
+
+  function prepareMermaidBlocks() {
+    document.querySelectorAll('pre > code.language-mermaid').forEach((code) => {
+      const source = code.textContent;
+      const container = document.createElement('div');
+
+      container.className = 'mermaid';
+      container.dataset.source = source;
+      container.textContent = source;
+
+      code.parentElement.replaceWith(container);
+    });
+  }
+
+  async function renderMermaid() {
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: getResolvedMermaidTheme()
+    });
+
+    document.querySelectorAll('.mermaid').forEach((el) => {
+      el.removeAttribute('data-processed');
+      el.textContent = el.dataset.source;
+    });
+
+    await mermaid.run({
+      querySelector: '.mermaid'
+    });
+  }
+
+  prepareMermaidBlocks();
+  await renderMermaid();
+
+  const observer = new MutationObserver(renderMermaid);
+
+  observer.observe(htmlElement, {
+    attributes: true,
+    attributeFilter: ['data-color-mode']
+  });
+
+  window
+    .matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', function () {
+      if (htmlElement.getAttribute('data-color-mode') === 'auto') {
+        renderMermaid();
+      }
+    });
+});

data/assets/js/theme-toggle.js

@@ -0,0 +1,84 @@
+document.addEventListener('DOMContentLoaded', function () {
+    var themeToggle = document.getElementById('theme-toggle');
+    var themeIcon = document.getElementById('theme-icon');
+    var htmlElement = document.getElementsByTagName('html')[0];
+
+    function getCurrentMode() {
+        return htmlElement.getAttribute('data-color-mode');
+    }
+
+    function getModeFromCookie() {
+        var cookieValue = getCookie('colorMode');
+        if (cookieValue !== null && (cookieValue === 'auto' || cookieValue === 'dark' || cookieValue === 'light')) {
+            return cookieValue;
+        } else {
+            // Default to 'auto' mode if the cookie is not set or has an invalid value
+            return 'auto';
+        }
+    }
+
+    function setCookie(name, value, days) {
+        var expires = "";
+        if (days) {
+            var date = new Date();
+            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+            expires = "; expires=" + date.toUTCString();
+        }
+
+        // Updated cookie settings
+        document.cookie = name + "=" + (value || "") + expires + "; path=/; samesite=Strict; secure";
+    }
+
+    function getCookie(name) {
+        var nameEQ = name + "=";
+        var ca = document.cookie.split(';');
+        for (var i = 0; i < ca.length; i++) {
+            var c = ca[i];
+            while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+            if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+        }
+        return null;
+    }
+
+    function getNextMode() {
+        var currentMode = getCurrentMode();
+        var nextMode;
+        if (currentMode === 'auto') {
+            nextMode = 'dark';
+        } else if (currentMode === 'dark') {
+            nextMode = 'light'
+        } else {
+            nextMode = 'auto'
+        }
+        return nextMode;
+    }
+
+    function updateTheme(nextMode) {
+        htmlElement.setAttribute('data-color-mode', nextMode);
+        updateThemeIcon(nextMode);
+        setCookie('colorMode', nextMode, 365); // Save the preference for 365 days
+    }
+
+    function updateThemeIcon(nextMode) {
+        var nextIcon;
+        if (nextMode === 'dark') {
+            nextIcon = 'moon';
+        } else if (nextMode === 'light') {
+            nextIcon = 'sun'
+        } else {
+            nextIcon = 'zap';
+        }
+        // Set the span to the themeIcon class
+        themeIcon.classList = "octicon octicon-" + nextIcon + "-24";
+        themeToggle.setAttribute("aria-label", "Color mode: " + nextMode);
+    }
+
+    themeToggle.addEventListener('click', function () {
+        updateTheme(getNextMode());
+        // updateThemeIcon(getNextMode());
+    });
+
+    // Initialize the theme icon based on the initial state
+    // updateThemeIcon(getModeFromCookie());
+    updateTheme(getModeFromCookie());
+});

data/assets/js/topbar.js

@@ -0,0 +1,19 @@
+document.addEventListener("DOMContentLoaded", function () {
+    function updateTopBarHeight() {
+        const topBar = document.querySelector('.topbar');
+        const topBarHeight = topBar ? topBar.offsetHeight : 0;
+
+        // 1. Set CSS variable for layout
+        document.documentElement.style.setProperty('--topbar-height', `${topBarHeight}px`);
+
+        // 2. Dispatch event for any JS-based listeners (timeline cards, etc)
+        document.dispatchEvent(new CustomEvent('topbarHeightUpdated', {
+            detail: { topBarHeight }
+        }));
+
+        console.log("[topbar.js] --topbar-height set to", topBarHeight);
+    }
+
+    updateTopBarHeight();
+    window.addEventListener('resize', updateTopBarHeight);
+});