Merge pull request #1174 from podlove/chore/use-hash-for-cachebusting

chore(page): use commit hash for chache busting

apps/page/astro.config.mjs

@@ -2,6 +2,9 @@ import { defineConfig } from 'astro/config';
 import cloudflare from '@astrojs/cloudflare';
 import vue from '@astrojs/vue';
 import tailwind from '@astrojs/tailwind';
+import * as child from 'child_process';
+
+const commitHash = child.execSync('git rev-parse --short HEAD').toString().trim();
 
 // https://astro.build/config
 export default defineConfig({
@@ -11,5 +14,10 @@ export default defineConfig({
       enabled: true
     }
   }),
+  vite: {
+    define: {
+      'import.meta.env.VITE_COMMIT_HASH': JSON.stringify(commitHash)
+    }
+  },
   integrations: [vue({ appEntrypoint: '/src/app' }), tailwind()]
 });

apps/page/src/features/PageFooter.vue

@@ -3,10 +3,10 @@
     class="w-full bg-gray-800 p-6 mt-16 text-gray-100 font-extralight text-sm"
   >
     <div class="w-full px-8 flex flex-col md:flex-row">
-      <div class="w-full md:w-1/3 truncate text-center">
+      <div class="w-full truncate text-center" v-if="state.copyright">
         {{ t('FOOTER.COPYRIGHT', { copyright: state.copyright }) }}
       </div>
-      <div class="w-full md:w-1/3 truncate text-center" v-if="state.owner">
+      <div class="w-full truncate text-center" v-if="state.owner">
         <a
           v-if="state.mail"
           class="hover:underline"
@@ -20,21 +20,20 @@
         </span>
       </div>
 
-      <div class="w-full md:w-1/3 truncate text-center md:text-right">
+      <div class="w-full truncate text-center md:text-right">
         <a
           class="hover:underline"
           href="https://lux.podlove.org"
           target="_blank"
           rel="nofollow noopener"
-          >{{ t('FOOTER.CREATED_WITH', { name: 'Podlove Lux', buildDate }) }}</a
+          >{{ t('FOOTER.CREATED_WITH', { name: 'Podlove Lux', version: state.version }) }}</a
         >
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
 import { mapState } from 'redux-vuex';
 import { selectors } from '../logic';
 import { useTranslations } from '@podlove/utils/translate';
@@ -45,11 +44,7 @@ const state = mapState({
   copyright: selectors.podcast.copyright,
   mail: selectors.podcast.mail,
   owner: selectors.podcast.owner,
-  buildDate: selectors.runtime.buildDate,
   locale: selectors.runtime.locale,
+  version: selectors.runtime.version
 });
-
-const buildDate = computed(() =>
-  state.buildDate ? new Date(state.buildDate).toLocaleDateString(state.locale) : null
-);
 </script>

apps/page/src/i18n/messages.ts

@@ -11,7 +11,7 @@ const en = {
   },
   FOOTER: {
     COPYRIGHT: ({ copyright }: { copyright: string }) => `© ${copyright}`,
-    CREATED_WITH: ({ name, buildDate }: { name: string, buildDate: string }) => `Created with ${name} on ${buildDate}`,
+    CREATED_WITH: ({ name, version }: { name: string, version: string }) => `Created with ${name} [${version}]`,
     CONTACT: ({ name }: { name: string }) => `Contact: ${name}`,
   },
   EPISODE: {
@@ -89,7 +89,7 @@ const de: typeof en = {
   },
   FOOTER: {
     COPYRIGHT: ({ copyright }: { copyright: string }) => `© ${copyright}`,
-    CREATED_WITH: ({ name, buildDate }: { name: string, buildDate: string }) => `Erstellt mit ${name} am ${buildDate}`,
+    CREATED_WITH: ({ name, version }: { name: string, version: string }) => `Erstellt mit ${name} [${version}]`,
     CONTACT: ({ name }: { name: string }) => `Kontakt: ${name}`,
   },
   EPISODE: {

apps/page/src/logic/sagas/search.sagas.ts

@@ -11,16 +11,14 @@ import type {
 } from '../store/stores/search.store';
 import { actions } from '../store';
 import { resolveTranscripts } from '../data/feed-parser';
-import type { Episode, Person, Transcript } from '../../types/feed.types';
-// import { findPerson } from '../../lib/persons';
+import type { Episode, Transcript } from '../../types/feed.types';
 import { proxy, addQueryparams } from '../../lib/url';
 import * as indexeddb from '../../lib/indexeddb';
 
 export default ({
   selectVisible,
   selectInitialized,
   selectEpisodes,
-  // selectContributors,
   selectResults,
   selectSelectedResult,
   selectCacheKey,
@@ -29,15 +27,13 @@ export default ({
   selectVisible: (input: any) => boolean;
   selectInitialized: (input: any) => boolean;
   selectEpisodes: (input: any) => Episode[];
-  // selectContributors: (input: any) => Person[];
   selectResults: (input: any) => { id: string | number }[];
   selectSelectedResult: (input: any) => string | null;
   selectCacheKey: (input: any) => string | null;
   selectVersion: (input: any) => string | null;
 }) => {
   const EPISODES = fuzzySearch.SearcherFactory.createDefaultSearcher();
   const TRANSCRIPTS = fuzzySearch.SearcherFactory.createDefaultSearcher();
-  // const CONTRIBUTORS = fuzzySearch.SearcherFactory.createDefaultSearcher();
 
   function* createEpisodesSearchIndex(episodes: Episode[]) {
     const results = episodes.map((episode) => ({
@@ -142,31 +138,6 @@ export default ({
     yield put(actions.search.initialize('transcripts'));
   }
 
-  // function* createContributorsSearchIndex(contributors: Person[], episodes: Episode[]) {
-  //   const results = contributors.map((contributor) => {
-  //     const attendedEpisodes = episodes.filter((episode) =>
-  //       findPerson(episode.contributors, contributor.id)
-  //     );
-
-  //     return {
-  //       ...contributor,
-  //       id: `contributor-${contributor.id}`,
-  //       episode: {
-  //         title: attendedEpisodes.map(({ title }) => title).join(' '),
-  //         description: attendedEpisodes.map(({ description }) => description).join(' ')
-  //       }
-  //     };
-  //   });
-
-  //   CONTRIBUTORS.indexEntities(
-  //     flattenDeep(results),
-  //     (e: any) => e.id,
-  //     (e: any) => [e.episode.title, e.episode.description]
-  //   );
-
-  //   yield put(actions.search.initialize('contributors'));
-  // }
-
   function* createSearchIndex() {
     const episodes: Episode[] = yield select(selectEpisodes);
     // const contributors: Person[] = yield select(selectContributors);
@@ -186,10 +157,6 @@ export default ({
       (match) => match.entity
     ) as unknown as EpisodeResult[];
 
-    // const contributors = CONTRIBUTORS.getMatches(
-    //   new fuzzySearch.Query(payload || '', 5)
-    // ).matches.map((match) => match.entity) as unknown as Person[];
-
     const transcripts = TRANSCRIPTS.getMatches(
       new fuzzySearch.Query(payload || '', 5, 0.1)
     ).matches.map((match) => match.entity) as unknown as TranscriptResult[];

apps/page/src/middleware/store.ts

@@ -5,7 +5,10 @@ import { getRequestHeader } from '../lib/middleware';
 import parseFeed from '../logic/data/feed-parser';
 import type { Podcast } from '../types/feed.types';
 import { createHash } from '../lib/caching';
-import { version } from '../../package.json';
+
+const version = import.meta.env.VITE_COMMIT_HASH;
+
+console.log({ version })
 
 export const initializeStore = defineMiddleware(async ({ request, params }, next) => {
   const locale = getRequestHeader(request, 'accept-language', 'en-US');