create EntryHistory component and place it in EntryDisplay

.github/workflows/lighthouse-comment-formatter.cjs

@@ -45,6 +45,12 @@ const scoreSimple = (
 function makeComment(lighthouseOutputs, targetPlatform) {
   let comment = `## ⚡️Lighthouse report`;
 
+  if (targetPlatform === 'pr') {
+    comment += `
+<details><summary>Average score across ${lighthouseOutputs.manifest.length} targets: <b>${computeAverageScore(lighthouseOutputs)}%</b></summary>
+`
+  }
+
   for (const manifest of lighthouseOutputs.manifest) {
     const { url: testedUrl, summary } = manifest;
     const reportUrl = lighthouseOutputs.links[testedUrl];
@@ -69,9 +75,30 @@ ${scoreRow('PWA', summary.pwa)}
     }
   }
 
+  if (targetPlatform === 'pr') {
+    comment += `
+</details>`
+  }
+
   return comment;
 }
 
+/**
+ * @param {LighthouseOutputs} lighthouseOutputs
+ * @return {string}
+ */
+function computeAverageScore(lighthouseOutputs) {
+  let totalScore = 0;
+  for (const manifest of lighthouseOutputs.manifest) {
+    const { summary } = manifest;
+    totalScore += summary.performance / 4;
+    totalScore += summary['best-practices'] / 4;
+    totalScore += summary.seo / 4;
+    totalScore += summary.pwa / 4;
+  }
+  return ((totalScore / lighthouseOutputs.manifest.length) * 100).toFixed(1);
+}
+
 module.exports = ({ lighthouseOutputs, targetPlatform }) => {
   return makeComment(lighthouseOutputs, targetPlatform);
 };

packages/site/src/lib/components/home/SelectedDict.svelte

@@ -5,6 +5,7 @@
   import sanitize from 'xss'
   import { page } from '$app/stores'
 
+  export let lastFieldUpdatedAt: number = undefined
   export let dictionary: IDictionary
   let aboutType: IAbout
 
@@ -89,6 +90,7 @@
       <span class="i-fa6-solid-chevron-right rtl-x-flip -mt-1" />
     </Button>
   {/if}
+  {#if lastFieldUpdatedAt}<p class="mt-3 text-xs text-gray-500">This dictionary was last updated on {new Date(lastFieldUpdatedAt).toString()}</p>{/if}
 </div>
 
 <style>

packages/site/src/lib/components/home/SelectedDict.variants.ts

@@ -0,0 +1,40 @@
+// import type { Variant } from 'kitbook';
+// import type Component from './SelectedDict.svelte';
+// import type { IDictionary } from '@living-dictionaries/types';
+
+// const dictionary: IDictionary =  {
+//   'updatedBy': 'U9u2OqBEArZSFV88Xu8TlvOWbbn1',
+//   'regions': [],
+//   'entryCount': 486,
+//   'name': 'Achi',
+//   'createdBy': 'T4qikh1eTafizvpmHNcG29uRQ2j1',
+//   'points': [],
+//   'location': 'Guatemala',
+//   'alternateNames': [],
+//   'glottocode': 'achi1256',
+//   'iso6393': 'acr',
+//   'glossLanguages': [
+//     'es',
+//     'en'
+//   ],
+//   'public': true,
+//   'id': 'achi',
+// }
+
+// export const variants: Variant<Component>[] = [
+//   {
+//     name: 'Normal',
+//     languages: [],
+//     props: {
+//       dictionary,
+//     }
+//   },
+//   {
+//     name: 'Displays last update',
+//     languages: [],
+//     props: {
+//       dictionary,
+//       lastFieldUpdatedAt: 1673598370158,
+//     }
+//   },
+// ];

packages/site/src/lib/helpers/time.ts

@@ -16,6 +16,17 @@ export function printDate(date: Date | number): string {
   }).format(date)
 }
 
+export function printDateTime(date: Date | number): string {
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+  }).format(date)
+}
+
 export function printDateWithWeekday(date: Date | number): string {
   return new Intl.DateTimeFormat('en-US', {
     weekday: 'long',

packages/site/src/lib/i18n/locales/he.json

@@ -342,7 +342,7 @@
   "history": {
     "history": "הִיסטוֹרִיָה",
     "entry": "כְּנִיסָה",
-    "editor": "עוֹרֵך",
+    "editor": "עוֹרֵך"
     "action": "פְּעוּלָה",
     "field": "שָׂדֶה",
     "date": "תַאֲרִיך",

packages/site/src/lib/i18n/locales/ms.json

@@ -306,7 +306,7 @@
     "spreadsheet": "Hamparan"
   },
   "video": {
-    "video_url": "URL video",
+    "video_url": "URL Video",
     "video_credit": "Kredit video",
     "prepare_to_record_video": "Bersedia untuk Rakam dengan Mikrofon & Kamera",
     "video_info": "Terdapat dua cara untuk memaparkan video anda dalam kamus yang hidup: 1) Anda boleh merakam video anda di sini, atau memuat naik video anda yang dirakam sebelumnya ke platform kami. Kelebihan: Mudah dan hebat untuk rakaman cepat. Kelemahan: Anda hanya boleh memuat naik video sehingga 100MB supaya ia hanya perlu resolusi pendek dan rendah. 2) Mempunyai video anda pada perkhidmatan hosting yang mengkhususkan diri dalam penyimpanan video dan menghubungkan URL ke laman web kami. Kelebihan: Mudah (selagi video anda sudah dimuat naik di platform itu), video anda boleh mempunyai resolusi dan panjang yang anda inginkan. Kelemahan: Jika anda ingin merakam sesuatu yang tidak dijangka atau sangat mudah, mungkin terlalu banyak usaha untuk melakukannya dengan cara itu, dan anda mungkin ingin mengutamakan Kaedah 1.",

packages/site/src/routes/[dictionaryId]/SideMenu.svelte

@@ -6,6 +6,7 @@
   export let entry_count: number
   export let on_close: () => void
   export let is_manager: boolean
+  $: ({ can_edit } = $page.data)
 </script>
 
 <div class="md:hidden">
@@ -59,6 +60,16 @@
       {$page.data.t('dictionary.contributors')}
     </span>
   </a>
+  {#if $can_edit}
+    <a
+      href={`/${dictionary.id}/history`}
+      class:active={$page.url.pathname.includes('history')}>
+      <i class="far fa-history fa-fw" />
+      <span class="font-medium mx-2">
+        {$page.data.t('history.history')}
+      </span>
+    </a>
+  {/if}
   <a
     href={`/${dictionary.id}/grammar`}
     class:active={$page.url.pathname.includes('grammar')}>

packages/site/src/routes/[dictionaryId]/entry/[entryId]/EntryDisplay.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import type { EntryFieldValue, EntryView, IDictionary, TablesUpdate } from '@living-dictionaries/types'
+  import type { Change, EntryFieldValue, EntryView, IDictionary, TablesUpdate } from '@living-dictionaries/types'
   import { Button } from 'svelte-pieces'
   import EntryField from './EntryField.svelte'
   import EntryMedia from './EntryMedia.svelte'
+  import EntryHistory from './EntryHistory.svelte'
   import Sense from './SupaSense.svelte'
   import { page } from '$app/stores'
   import EntryDialect from '$lib/components/entry/EntryDialect.svelte'
@@ -15,6 +16,7 @@
   export let can_edit = false
   export let videoAccess = false
   export let dbOperations: DbOperations
+  export let history: Change[] = undefined
 
   const text_fields = ['morphology', 'interlinearization'] satisfies EntryFieldValue[]
 
@@ -40,6 +42,7 @@
 
   <div style="grid-area: media;">
     <EntryMedia {dictionary} {entry} {can_edit} {videoAccess} {dbOperations} />
+    {#if history?.length > 0}<EntryHistory {history} {can_edit} class="mt-5 hidden md:block" />{/if}
   </div>
 
   <div class="flex flex-col grow" style="grid-area: content;">
@@ -169,6 +172,7 @@
   </div>
 </div>
 
+{#if history?.length > 0}<EntryHistory {history} {can_edit} class="mt-3 md:hidden" />{/if}
 <style>
   .media-on-right-grid {
       grid-template-columns: 3fr 1fr;

packages/site/src/routes/[dictionaryId]/entry/[entryId]/EntryDisplay.variants.ts

@@ -124,6 +124,12 @@
 //         ],
 //       },
 //     },
+//     {
+//       'latitude': 18.933437473181115,
+//       'longitude': 83.04198437500133
+//     }
+//   ]
+// }
 //   },
 //   {
 //     name: 'Local orthographies',

packages/site/src/routes/[dictionaryId]/entry/[entryId]/EntryHistory.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { Change } from '@living-dictionaries/types'
+
+  export let history: Change[]
+  export let canEdit = false
+
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    timeZoneName: 'short',
+  })
+</script>
+
+<div class="{$$props.class} text-gray-500">
+  {#if canEdit}
+    <!-- TODO translate -->
+    <strong>Lexeme history:</strong>
+    {#each history as record}
+      <p class="m-3">{record.updatedName} edited this entry on {formatter.format(new Date(record.updatedAtMs))}</p>
+    {/each}
+  {:else}
+    <p class="m-3">Last edited on {new Date(history[0].updatedAtMs).toDateString()}</p>
+  {/if}
+</div>

packages/site/src/routes/[dictionaryId]/entry/[entryId]/EntryHistory.variants.ts

@@ -0,0 +1,72 @@
+// import type { Variant } from 'kitbook';
+// import type Component from './EntryHistory.svelte';
+// import type { Change } from '@living-dictionaries/types';
+
+// const history:Change[] = [
+//   {
+//     updatedBy: '0002',
+//     updatedName: 'Diego Córdova',
+//     entryName: 'Giraffe',
+//     entryId: '002',
+//     dictionaryId: 'banange',
+//     dictionaryName: 'Banange',
+//     previousValue: ['n'],
+//     currentValue: [],
+//     field: 'parts of speech',
+//     updatedAtMs: 1673598370158
+//   },
+//   {
+//     updatedBy: '0001',
+//     updatedName: 'Anna Luisa',
+//     entryName: 'Giraffe',
+//     entryId: '002',
+//     dictionaryId: 'banange',
+//     dictionaryName: 'Banange',
+//     previousValue: ['adj'],
+//     currentValue: ['n'],
+//     field: 'parts of speech',
+//     updatedAtMs: 1673238370158
+//   },
+//   {
+//     updatedBy: '0002',
+//     updatedName: 'Diego Córdova',
+//     entryName: 'Giraffe',
+//     entryId: '002',
+//     dictionaryId: 'banange',
+//     dictionaryName: 'Banange',
+//     previousValue: null,
+//     currentValue: ['adj'],
+//     field: 'parts of speech',
+//     updatedAtMs: 1669598370158
+//   },
+//   {
+//     updatedBy: '0001',
+//     updatedName: 'Anna Luisa',
+//     entryName: 'Giraffe',
+//     entryId: '002',
+//     dictionaryId: 'banange',
+//     dictionaryName: 'Banange',
+//     previousValue: 'Snake',
+//     currentValue: 'Giraffe',
+//     field: 'Lexeme',
+//     updatedAtMs: 1619598370128
+//   },
+// ];
+
+// export const variants: Variant<Component>[] = [
+//   {
+//     name: 'Lexeme history authorized',
+//     languages: [],
+//     props: {
+//       history,
+//       canEdit: true,
+//     },
+//   },
+//   {
+//     name: 'Lexeme history unauthorized',
+//     languages: [],
+//     props: {
+//       history,
+//     },
+//   },
+// ];

packages/site/src/routes/[dictionaryId]/history/+page.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import type { Change } from '@living-dictionaries/types'
+  import { Button, ResponsiveTable } from 'svelte-pieces'
+  import RecordRow from './RecordRow.svelte'
+  import SortRecords from './sortRecords.svelte'
+  import { getActionValue } from './getActionValue'
+  import Filter from '$lib/components/Filter.svelte'
+  import { downloadObjectsAsCSV } from '$lib/export/csv'
+  import { printDateTime } from '$lib/helpers/time'
+  import { page } from '$app/stores'
+
+  export let data
+  $: ({ dictionary, can_edit } = data)
+
+  function exportHistoryAsCSV(records: Change[]) {
+    const headers = {
+      entryName: $page.data.t('history.entry'),
+      updatedName: $page.data.t('history.editor'),
+      action: $page.data.t('history.action'),
+      previousValue: $page.data.t('history.old_value'),
+      currentValue: $page.data.t('history.new_value'),
+      field: $page.data.t('history.field'),
+      date: $page.data.t('history.date'),
+    }
+
+    const formattedUsers = records.map((record) => {
+      return {
+        entryName: record.entryName,
+        updatedName: record.updatedName,
+        action: $page.data.t(`history.${getActionValue(record)}`),
+        previousValue: JSON.stringify(record.previousValue),
+        currentValue: JSON.stringify(record.currentValue),
+        field: $page.data.t(`entry_field.${record.field}`),
+        date: printDateTime(record.updatedAtMs),
+      }
+    })
+
+    downloadObjectsAsCSV(headers, formattedUsers, `${$dictionary.id}-history`)
+  }
+</script>
+
+{#if can_edit}
+  {#if data.history?.length > 0}
+    <div class="sticky top-0 h-[calc(100vh-1.5rem)] z-2 relative flex flex-col">
+      <Filter items={data.history} let:filteredItems={filteredRecords} placeholder={$page.data.t('history.history_search')}>
+        <div slot="right">
+          <Button form="filled" color="black" class="flex items-center space-x-1" onclick={() => exportHistoryAsCSV(filteredRecords)}>
+            <i class="fas fa-download" />
+            <span class="hidden sm:inline">{$page.data.t('history.download_history')}</span>
+          </Button>
+        </div>
+        <div class="mb-1" />
+        <ResponsiveTable stickyColumn stickyHeading>
+          <SortRecords history={filteredRecords} let:sortedRecords>
+            {#each sortedRecords as record}
+              <RecordRow {record} />
+            {/each}
+          </SortRecords>
+        </ResponsiveTable>
+      </Filter>
+    </div>
+  {:else}
+    {$page.data.t('history.empty')}
+  {/if}
+{/if}

packages/site/src/routes/[dictionaryId]/history/+page.ts

@@ -0,0 +1,13 @@
+import { getCollection } from 'sveltefirets'
+import type { Change } from '@living-dictionaries/types'
+
+export async function load({ params, parent }) {
+  await parent()
+  try {
+    const history = await getCollection<Change>(`dictionaries/${params.dictionaryId}/history`)
+    return { history }
+  } catch (err) {
+    console.error(err)
+    return { history: null }
+  }
+}