Merge pull request #54 from samliew/copilot/refactor-codebase-for-vercel

Deploy site to Vercel.

Author: samliew

.github/workflows/main.yml

@@ -1,19 +1,20 @@
-name: Glitch Deploy
+# Vercel handles deployments automatically via its Git integration.
+# Connect this repo to a Vercel project at: https://vercel.com/new
+# See: https://vercel.com/docs/deployments/git
+#
+# This workflow is intentionally left as a placeholder.
+# You can safely delete this file once Vercel deployment is confirmed working.
 
-# Glitch Project: https://glitch.com/edit/#!/se-timeline
-# Get Glitch token: (JSON.parse(localStorage.getItem('cachedUser'))).persistentToken
+name: Deploy Info
 
 on:
   push:
     branches:
       - main
 
 jobs:
-  sync:
+  info:
     runs-on: ubuntu-latest
     steps:
-      - name: Deploy to Glitch Project
-        uses: kanadgupta/glitch-sync@main
-        with:
-          auth-token: "${{ secrets.glitch_auth_token }}"
-          project-id: "${{ secrets.glitch_project_id }}"
+      - name: Deployment note
+        run: echo "This site is deployed to Vercel automatically via Git integration."

.github/workflows/validate-json.yml

@@ -4,14 +4,24 @@ on:
   pull_request:
     paths:
       - "**.json"
+      - "!.vscode/**"
 
 jobs:
   test:
     name: Validate JSON
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v5
       - name: json-syntax-check
-        uses: limitusus/json-syntax-check@v2
-        with:
-          pattern: "\\.json$"
+        run: |
+          status=0
+          for f in $(find . -name '*.json' -not -path './.git/*' -not -path './.vscode/*'); do
+            if ! python3 -m json.tool "$f" > /dev/null 2>&1; then
+              echo "❌ Invalid JSON: $f"
+              python3 -m json.tool "$f" || true
+              status=1
+            else
+              echo "✅ Valid JSON: $f"
+            fi
+          done
+          exit $status

.gitignore

@@ -0,0 +1 @@
+version.txt

README.md

@@ -1,22 +1,21 @@
 # The Stack Exchange Timeline
 
-[![Glitch Deploy](https://github.com/samliew/se-timeline/actions/workflows/main.yml/badge.svg?branch=main)](https://github.com/samliew/se-timeline/actions/workflows/main.yml) [![Licence](https://img.shields.io/github/license/samliew/se-timeline?color=blue)](https://github.com/samliew/se-timeline/blob/main/LICENCE) [![GitHub commit activity](https://img.shields.io/github/commit-activity/m/samliew/se-timeline)](https://github.com/samliew/se-timeline/pulse)
+[![Build](https://github.com/samliew/se-timeline/actions/workflows/main.yml/badge.svg?branch=main)](https://github.com/samliew/se-timeline/actions/workflows/main.yml) [![Validation](https://github.com/samliew/se-timeline/actions/workflows/validate-json.yml/badge.svg)](https://github.com/samliew/se-timeline/actions/workflows/validate-json.yml)
+[![Licence](https://img.shields.io/github/license/samliew/se-timeline?color=blue)](https://github.com/samliew/se-timeline/blob/main/LICENCE) [![GitHub commit activity](https://img.shields.io/github/commit-activity/m/samliew/se-timeline)](https://github.com/samliew/se-timeline/pulse)
 
-This is currently hosted on [Glitch](https://glitch.com), at [se-timeline.glitch.me](https://se-timeline.glitch.me).
+This is a static site deployed to [Vercel](https://vercel.com). Pushing to the `main` branch triggers an automatic deployment via Vercel's Git integration.
 
 ## Contributing
 
 Please direct any queries & feedback by [creating an issue on GitHub](https://github.com/samliew/se-timeline/issues).
 
-You can also contribute to updating the events using the instructions below, then opening a pull request. After review and merging to the main branch, a GitHub action will then automatically update the Glitch project.
-
-Don't worry about making mistakes, a GitHub action will run on any pull request to validate changes to the JSON file, and the PR can only be merged if it passes.
+You can also contribute to updating the events using the instructions below, then opening a pull request. After review and merging to the main branch, Vercel will automatically deploy the updated site. Don't worry about making mistakes—a GitHub action will run on pull requests to validate changes to the JSON file, and the changes can only be merged if it passes.
 
 ### Updating Events
 
 The timeline data is stored in the [timeline_data.json](https://github.com/samliew/se-timeline/blob/main/timeline_data.json) file as JSON.
 
-If you are unsure how to manually edit the event data using JSON, you should use the [Event Editor](https://se-timeline.glitch.me/event-editor) to import an existing event or create a new one, following which you can paste the output in a new "Update Timeline" [issue](https://github.com/samliew/se-timeline/issues/new/choose).
+If you are unsure how to manually edit the event data using JSON, you should use the [Event Editor](/event-editor) to import an existing event or create a new one, following which you can paste the output in a new "Update Timeline" [issue](https://github.com/samliew/se-timeline/issues/new/choose).
 
 ### Event Object Properties
 

assets/js/editor.js

@@ -395,7 +395,8 @@ const toSlug = str => str?.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-
   if (linkedDropdown && importDropdown) {
     let currentYear;
 
-    const { items } = await $.getJSON('/timeline_data.json');
+    const version = await fetch('/version.txt').then(r => r.ok ? r.text() : '').then(t => t.trim()).catch(() => '');
+    const { items } = await $.getJSON('/timeline_data.json' + (version ? '?v=' + version : ''));
     items.forEach(event => {
 
       // Assumes items are already sorted by year

assets/js/script.js

@@ -117,7 +117,8 @@ const buildTimeline = async () => {
   const timelineEl = document.querySelector('#timeline > .events-container');
   timelineEl.querySelectorAll('.year-group').forEach(v => v.remove());
 
-  const { items } = await $.getJSON('./timeline_data.json');
+  const version = await fetch('./version.txt').then(r => r.ok ? r.text() : '').then(t => t.trim()).catch(() => '');
+  const { items } = await $.getJSON('./timeline_data.json' + (version ? '?v=' + version : ''));
   items.forEach(event => {
 
     // Assumes items are already sorted by year

index.html

@@ -36,13 +36,11 @@ <h1 class="main-title mobile-only">SE Timeline</h1>
     </a>
     <div class="header-right">
       <div>
-        <select id="year-picker" class="year-picker w-select">
-          <option>2021</option>
-        </select>
+        <select id="year-picker" class="year-picker w-select"></select>
       </div>
     </div>
   </header>
-  <aside id="sidebar" class="sidebar sidebar-open"><a href="#" class="current-year">2021</a><a href="#">2020</a><a href="#">2019</a><a href="#">2018</a><a href="#">2017</a><a href="#">2016</a><a href="#">2015</a><a href="#">2014</a><a href="#">2013</a><a href="#">2012</a><a href="#">2011</a><a href="#">2010</a><a href="#">2009</a><a href="#">2008</a></aside>
+  <aside id="sidebar" class="sidebar"></aside>
   <aside class="filter-container">
     <div class="filter-section-title">show:</div>
     <div class="filters">

vercel.json

@@ -0,0 +1,34 @@
+{
+  "cleanUrls": true,
+  "trailingSlash": false,
+  "buildCommand": "echo ${VERCEL_GIT_COMMIT_SHA:-dev} > version.txt",
+  "headers": [
+    {
+      "source": "/assets/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    },
+    {
+      "source": "/timeline_data.json",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    },
+    {
+      "source": "/version.txt",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=0, must-revalidate"
+        }
+      ]
+    }
+  ]
+}