Improve asset version (#16)

Author: jurijat

esbuild.config.js

@@ -2,6 +2,7 @@ import * as esbuild from "esbuild";
 
 const isProduction = process.env.NODE_ENV === "production";
 const isWatch = process.argv.includes("--watch");
+const assetVersion = new Date().toISOString().slice(0, 10).replace(/-/g, '');
 
 const config = {
   entryPoints: ["src/main.js"],
@@ -18,6 +19,7 @@ const config = {
       isProduction ? "production" : "development",
     ),
     "import.meta.env.BASE_PATH": JSON.stringify(process.env.BASE_PATH || ""),
+    "import.meta.env.ASSET_VERSION": JSON.stringify(assetVersion),
   },
 };
 

scripts/build-html.js

@@ -1,13 +1,15 @@
 import { readFileSync, writeFileSync, mkdirSync } from 'fs';
 
 const baseUrl = process.env.BASE_URL || 'https://conference.openapis.org';
+const assetVersion = new Date().toISOString().slice(0, 10).replace(/-/g, '');
 
 // Ensure dist directory exists
 mkdirSync('dist', { recursive: true });
 
 // Read, replace, and write
 let html = readFileSync('src/index.html', 'utf-8');
 html = html.replace(/__BASE_URL__/g, baseUrl);
+html = html.replace(/__ASSET_VERSION__/g, assetVersion);
 writeFileSync('dist/index.html', html);
 
-console.log(`✅ HTML built with BASE_URL=${baseUrl}`);
+console.log(`✅ HTML built with BASE_URL=${baseUrl}, ASSET_VERSION=${assetVersion}`);

src/components/AgendaModal.js

@@ -183,11 +183,15 @@ export class AgendaModal {
         <!-- Desktop: horizontal layout -->
         <div class="hidden tablet:flex items-center justify-between">
           <div class="flex items-center gap-4">
-            <img
+            ${
+              speaker.avatar
+                ? `<img
               src="${speaker.avatar}"
               alt="${speaker.name}"
               class="w-20 h-20 rounded-full object-cover"
-            />
+            />`
+                : `<div class="w-20 h-20 rounded-full bg-primary-gray/30"></div>`
+            }
             <div>
               <div class="flex items-center gap-2">
                 <span class="font-bold text-text-primary uppercase tracking-wider leading-5">${
@@ -216,11 +220,15 @@ export class AgendaModal {
 
         <!-- Mobile: vertical layout -->
         <div class="tablet:hidden">
-          <img
+          ${
+            speaker.avatar
+              ? `<img
             src="${speaker.avatar}"
             alt="${speaker.name}"
             class="w-12 h-12 object-cover mb-4 rounded-full"
-          />
+          />`
+              : `<div class="w-12 h-12 mb-4 rounded-full bg-primary-gray/30"></div>`
+          }
           <div class="flex items-center gap-2 mb-1">
             <span class="font-bold text-text-primary uppercase tracking-wider">${
               speaker.name

src/components/AgendaRenderer.js

@@ -209,14 +209,14 @@ export class AgendaRenderer {
               item.speakers && item.speakers.length === 2
                 ? this.renderTwoSpeakers(item.speakers)
                 : item.speakers && item.speakers.length > 0
-                ? item.speakers
-                    .map((speaker) => this.renderSpeakerInfo(speaker))
-                    .join("")
-                : item.badge
-                ? `<div class="text-xs flex items-center text-primary-gray desktop:text-sm desktop-xxl:text-[16px] font-normal uppercase desktop-xl:-ml-6 desktop-xl:-mb-6 desktop-xxl:-ml-12 desktop-xxl:-mb-12 desktop-xl:h-20 tracking-widest group-hover:text-text-on-green transition-colors duration-200 ease-in-out">
+                  ? item.speakers
+                      .map((speaker) => this.renderSpeakerInfo(speaker))
+                      .join("")
+                  : item.badge
+                    ? `<div class="text-xs flex items-center text-primary-gray desktop:text-sm desktop-xxl:text-[16px] font-normal uppercase desktop-xl:-ml-6 desktop-xl:-mb-6 desktop-xxl:-ml-12 desktop-xxl:-mb-12 desktop-xl:h-20 tracking-widest group-hover:text-text-on-green transition-colors duration-200 ease-in-out">
                       ${item.badge}
                     </div>`
-                : ""
+                    : ""
             }
           </div>
 
@@ -270,7 +270,7 @@ export class AgendaRenderer {
       const widths = this.calculateThreeBlockPercents(
         section.items[0].title,
         section.items[1].title,
-        section.items[2].title
+        section.items[2].title,
       );
 
       itemsHtml = `
@@ -297,7 +297,7 @@ export class AgendaRenderer {
       if (section.items.length > 3) {
         const remainingWidths = this.calculateBlockPercents(
           section.items[3].title,
-          ""
+          "",
         );
 
         itemsHtml += `
@@ -314,7 +314,7 @@ export class AgendaRenderer {
           if (pair.length === 2) {
             const widths = this.calculateBlockPercents(
               pair[0].title,
-              pair[1].title
+              pair[1].title,
             );
             return `
             <div class="flex flex-col md:flex-row w-full h-auto tablet:h-[252px] desktop:h-[490px] pair-container">

src/config.js

@@ -4,8 +4,8 @@
  * Provides base path handling for assets
  */
 
-// Asset version for cache busting - increment when deploying changes
-const ASSET_VERSION = Date.now();
+// Asset version for cache busting - set to current date during build (YYYYMMDD format)
+const ASSET_VERSION = import.meta.env.ASSET_VERSION || Date.now();
 
 // BASE_PATH kept for backwards compatibility if used elsewhere
 const BASE_PATH = import.meta.env.BASE_PATH || "";

src/data/agenda.js

@@ -20,7 +20,6 @@ export const agendaSections = [
         description:
           "Join 600+ developers building new apps, bots — in person or online. Participants can build any app of their choice and will compete for $12,500+ in cash, products and prizes. Put yourself in the center of the developer world!",
         speakers: [],
-        icon: asset("/images/hackathon.svg"),
         disableHover: true,
       },
       {
@@ -244,7 +243,6 @@ export const agendaSections = [
         description:
           "Official DeveloperWeek Closing Ceremony. Join us for closing remarks and a celebration of the day's achievements.",
         speakers: [],
-        icon: asset("/images/closing.svg"),
         disableHover: true,
       },
     ],

src/index.html

@@ -51,7 +51,7 @@
     />
 
     <!-- Favicon -->
-    <link rel="icon" href="./images/favicons/favicon.png?v=2" />
+    <link rel="icon" href="./images/favicons/favicon.png?v=__ASSET_VERSION__" />
 
     <!-- License for San Jose background image -->
     <!-- Photo: "San Jose, California" by David Sawyer -->
@@ -81,7 +81,7 @@
     />
 
     <!-- Stylesheets -->
-    <link rel="stylesheet" href="./output.css?v=2" />
+    <link rel="stylesheet" href="./output.css?v=__ASSET_VERSION__" />
 
     <!-- Theme Color -->
     <meta name="theme-color" content="#47c552" />
@@ -100,7 +100,7 @@
       <div class="max-w-[2440px] w-full">
         <!-- Header Hero Section -->
         <header
-          class="flex flex-col tablet:flex-row h-[667px] tablet:min-h-0 tablet:h-[clamp(640px,50vw+160px,900px)] text-text-primary overflow-hidden desktop:h-[max(min(100vh,1166px),794px)] desktop-xl:h-[max(min(100vh,1117px),900px)] desktop-xxl:h-[max(min(100vh,1280px),1117px)]"
+          class="flex flex-col tablet:flex-row h-[700px] tablet:min-h-0 tablet:h-[clamp(640px,50vw+160px,900px)] text-text-primary overflow-hidden desktop:h-[max(min(100vh,1166px),794px)] desktop-xl:h-[max(min(100vh,1117px),900px)] desktop-xxl:h-[max(min(100vh,1280px),1117px)]"
         >
           <!-- Left Content Container (2/3) -->
           <div
@@ -120,7 +120,7 @@
               >
                 <a href="https://openapis.org" target="_blank" rel="noopener">
                   <img
-                    src="./images/logo.svg?v=2"
+                    src="./images/logo.svg?v=__ASSET_VERSION__"
                     alt="OpenAPI Conference Logo"
                     class="w-40 tablet:w-[160px] tablet:h-[42px] desktop-xl:w-[273px] desktop-xl:h-[72px] h-10.5"
                   />
@@ -135,7 +135,7 @@
                   rel="noopener noreferrer"
                 >
                   <img
-                    src="./images/developer_week_logo.svg?v=2"
+                    src="./images/developer_week_logo.svg?v=__ASSET_VERSION__"
                     alt="Developer Week Logo"
                     class="w-[82px] h-2 tablet:w-[149px] tablet:h-4 desktop-xxl:w-[119px] desktop-xxl:h-[62px]"
                   />
@@ -196,7 +196,7 @@
               rel="noopener noreferrer"
               class="tablet:hidden p-4 relative h-[152px] -mt-6 rounded-b-4xl overflow-hidden bg-cover bg-center block cursor-pointer"
               style="
-                background-image: url(&quot;./images/background/background_top_right_san_jose.jpg?v=2&quot;);
+                background-image: url(&quot;./images/background/background_top_right_san_jose.jpg?v=__ASSET_VERSION__&quot;);
               "
             >
               <!-- Dark Overlay -->
@@ -303,7 +303,7 @@
               <div
                 class="w-full h-full absolute bg-cover bg-center bg-pan-slow"
                 style="
-                  background-image: url(&quot;./images/background/background_top_right_san_jose.jpg?v=2&quot;);
+                  background-image: url(&quot;./images/background/background_top_right_san_jose.jpg?v=__ASSET_VERSION__&quot;);
                 "
               ></div>
 
@@ -540,7 +540,7 @@
     </div>
 
     <!-- JavaScript -->
-    <script type="module" src="./main.js?v=2"></script>
+    <script type="module" src="./main.js?v=__ASSET_VERSION__"></script>
 
     <script
       async