site: Add all-time graph

site/app.js

@@ -678,6 +678,67 @@ const addMonthsUTC = (date, delta) =>
 const daysInMonthUTC = (date) =>
   new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 0)).getUTCDate();
 
+const renderAllTimeUptime = (windowEntries, rangeEnd) => {
+  if (!window.UptimeHistoryChart || typeof window.UptimeHistoryChart.render !== 'function') {
+    console.warn('UptimeHistoryChart module not loaded; skipping all-time render.');
+    return;
+  }
+  window.UptimeHistoryChart.render(windowEntries, rangeEnd);
+};
+
+const setupUptimeViewToggle = () => {
+  const panel = document.querySelector('.hero-panel');
+  const toggle = document.getElementById('uptimeViewToggle');
+  const buttons = toggle ? Array.from(toggle.querySelectorAll('.view-toggle-btn')) : [];
+  const views = {
+    '90d': document.getElementById('uptimeView90d'),
+    all: document.getElementById('uptimeViewAll'),
+  };
+  const title = document.getElementById('uptimeViewTitle');
+  const titleByView = {
+    '90d': 'Last 90 days uptime',
+    all: 'All-time uptime',
+  };
+  if (!panel || !toggle || buttons.length === 0 || !views['90d'] || !views.all) {
+    return;
+  }
+
+  const setView = (view) => {
+    if (!views[view]) return;
+    panel.dataset.uptimeView = view;
+    if (title && titleByView[view]) {
+      title.textContent = titleByView[view];
+    }
+    Object.entries(views).forEach(([key, node]) => {
+      const active = key === view;
+      node.hidden = !active;
+    });
+    buttons.forEach((btn) => {
+      const active = btn.dataset.view === view;
+      btn.setAttribute('aria-selected', String(active));
+      btn.tabIndex = active ? 0 : -1;
+    });
+  };
+
+  buttons.forEach((btn) => {
+    btn.addEventListener('click', () => setView(btn.dataset.view));
+    btn.addEventListener('keydown', (event) => {
+      if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') return;
+      event.preventDefault();
+      const direction = event.key === 'ArrowRight' ? 1 : -1;
+      const currentIndex = buttons.findIndex(
+        (b) => b.getAttribute('aria-selected') === 'true',
+      );
+      const nextIndex = (currentIndex + direction + buttons.length) % buttons.length;
+      const nextBtn = buttons[nextIndex];
+      setView(nextBtn.dataset.view);
+      nextBtn.focus();
+    });
+  });
+
+  setView('90d');
+};
+
 const render = async () => {
   const [incidentsText, windowsText] = await Promise.all([
     fetch(INCIDENTS_URL).then((res) => res.text()),
@@ -764,6 +825,8 @@ const render = async () => {
   const uptimePercent = document.getElementById('uptimePercent');
   uptimePercent.textContent = `${(uptime * 100).toFixed(2)}% uptime`;
 
+  renderAllTimeUptime(windowEntries, rangeEnd);
+
   const uptimeBars = document.getElementById('uptimeBars');
   const uptimeTooltip = document.getElementById('uptimeTooltip');
   const heroPanel = document.querySelector('.hero-panel');
@@ -1308,6 +1371,8 @@ const renderIncidentCard = (incident, compact = false) => {
   return card;
 };
 
+setupUptimeViewToggle();
+
 render().catch((error) => {
   console.error(error);
   const status = document.getElementById('statusHeadline');

site/index.html

@@ -65,32 +65,94 @@ <h1>The Missing GitHub Status Page</h1>
 
     <main>
       <section class="hero panel-raise" data-animate>
-        <div class="hero-panel hero-panel-full">
+        <div class="hero-panel hero-panel-full" data-uptime-view="90d">
           <div class="hero-panel-header">
-            <h3>Last 90 days uptime</h3>
+            <h3 id="uptimeViewTitle" class="hero-panel-title">Last 90 days uptime</h3>
+            <div
+              class="view-toggle"
+              role="tablist"
+              aria-label="Uptime view"
+              id="uptimeViewToggle"
+            >
+              <button
+                class="view-toggle-btn"
+                type="button"
+                role="tab"
+                data-view="90d"
+                aria-selected="true"
+                aria-controls="uptimeView90d"
+                id="uptimeViewBtn90d"
+              >
+                90 days
+              </button>
+              <button
+                class="view-toggle-btn"
+                type="button"
+                role="tab"
+                data-view="all"
+                aria-selected="false"
+                aria-controls="uptimeViewAll"
+                id="uptimeViewBtnAll"
+                tabindex="-1"
+              >
+                All time
+              </button>
+            </div>
             <div class="status-meta" id="statusMeta">
               <span class="status-meta-item" id="lastUpdated">Last updated —</span>
               <span class="divider" aria-hidden="true"></span>
               <span class="status-meta-item" id="incidentCount">0 incidents in last 90 days</span>
             </div>
           </div>
-          <div class="uptime-row">
-            <div class="uptime-label">
-              <span>GitHub Platform</span>
-              <span class="uptime-percent" id="uptimePercent">—</span>
+          <div
+            class="uptime-view"
+            id="uptimeView90d"
+            role="tabpanel"
+            aria-labelledby="uptimeViewBtn90d"
+          >
+            <div class="uptime-row">
+              <div class="uptime-label">
+                <span>GitHub Platform</span>
+                <span class="uptime-percent" id="uptimePercent">—</span>
+              </div>
+              <div class="uptime-bars" id="uptimeBars"></div>
+              <div class="uptime-tooltip" id="uptimeTooltip" aria-hidden="true"></div>
+              <div class="uptime-axis">
+                <span>90 days ago</span>
+                <span>Today</span>
+              </div>
             </div>
-            <div class="uptime-bars" id="uptimeBars"></div>
-            <div class="uptime-tooltip" id="uptimeTooltip" aria-hidden="true"></div>
-            <div class="uptime-axis">
-              <span>90 days ago</span>
-              <span>Today</span>
+            <div class="legend" id="legend">
+              <span class="legend-item"><span class="dot operational"></span>Operational</span>
+              <span class="legend-item"><span class="dot maintenance"></span>Maintenance</span>
+              <span class="legend-item"><span class="dot minor"></span>Minor</span>
+              <span class="legend-item"><span class="dot major"></span>Major</span>
             </div>
           </div>
-          <div class="legend" id="legend">
-            <span class="legend-item"><span class="dot operational"></span>Operational</span>
-            <span class="legend-item"><span class="dot maintenance"></span>Maintenance</span>
-            <span class="legend-item"><span class="dot minor"></span>Minor</span>
-            <span class="legend-item"><span class="dot major"></span>Major</span>
+          <div
+            class="uptime-view uptime-view-all"
+            id="uptimeViewAll"
+            role="tabpanel"
+            aria-labelledby="uptimeViewBtnAll"
+            hidden
+          >
+            <div class="uptime-row uptime-row-all">
+              <div class="uptime-label">
+                <span>GitHub Platform · all time</span>
+                <span class="uptime-percent" id="uptimePercentAll">—</span>
+              </div>
+              <figure class="uptime-history-figure">
+                <div
+                  class="uptime-history-chart"
+                  id="uptimeHistoryImage"
+                  role="img"
+                  aria-label="GitHub Platform 90-day rolling uptime since project start"
+                ></div>
+                <figcaption class="uptime-history-caption" id="uptimeHistoryCaption">
+                  90-day rolling uptime since the project began on Jun 11, 2022.
+                </figcaption>
+              </figure>
+            </div>
           </div>
           <div class="hero-footer">
             <div class="hero-attribution">
@@ -231,6 +293,7 @@ <h3>About this mirror</h3>
       </p>
     </footer>
 
+    <script src="uptime-history-chart.js" defer></script>
     <script src="app.js" defer></script>
     <script>
       (() => {

site/styles.css

@@ -681,8 +681,8 @@ main {
 }
 
 .hero-panel-header {
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 16px;
   margin-bottom: 16px;
@@ -694,12 +694,116 @@ main {
   font-size: 1.35rem;
 }
 
+.hero-panel-title {
+  margin: 0;
+  justify-self: start;
+  min-width: 0;
+}
+
+.hero-panel-header > .view-toggle {
+  justify-self: center;
+}
+
+.hero-panel-header > .status-meta {
+  justify-self: end;
+}
+
+.view-toggle {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px;
+  gap: 2px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--icon-button-bg);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
+}
+
+.view-toggle-btn {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  padding: 5px 12px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
+  white-space: nowrap;
+}
+
+.view-toggle-btn:hover {
+  color: var(--ink);
+}
+
+.view-toggle-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.view-toggle-btn[aria-selected="true"] {
+  color: var(--ink);
+  background: var(--card);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(15, 23, 42, 0.04);
+}
+
+@media (prefers-color-scheme: dark) {
+  .view-toggle {
+    box-shadow: inset 0 1px 0 rgba(240, 246, 252, 0.05);
+  }
+  .view-toggle-btn[aria-selected="true"] {
+    background: rgba(240, 246, 252, 0.08);
+    box-shadow: none;
+  }
+}
+
 .uptime-row {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
+.uptime-row-all {
+  gap: 14px;
+}
+
+.uptime-history-figure {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.uptime-history-chart {
+  display: block;
+  width: 100%;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--card);
+  padding: 4px;
+  overflow: hidden;
+}
+
+.uptime-history-chart svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.uptime-history-caption {
+  font-size: 0.82rem;
+  color: var(--muted);
+  text-align: center;
+}
+
+.hero-panel[data-uptime-view="all"] .hero-share,
+.hero-panel[data-uptime-view="all"] .hero-share-feedback {
+  display: none;
+}
+
 .uptime-label {
   display: flex;
   justify-content: space-between;
@@ -2042,8 +2146,13 @@ details ul {
 
 @media (max-width: 520px) {
   .hero-panel-header {
-    flex-direction: column;
-    align-items: flex-start;
+    grid-template-columns: 1fr;
+    justify-items: start;
+  }
+
+  .hero-panel-header > .view-toggle,
+  .hero-panel-header > .status-meta {
+    justify-self: start;
   }
 
   html[data-status-meta="stacked"] .divider,