Merge branch 'main' into chart-ssr-loading-state

.changeset/chatty-pugs-sleep.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/component-utilities': patch
+---
+
+Explicitly set font family for chart theme

.changeset/giant-lizards-help.md

@@ -0,0 +1,6 @@
+---
+'@evidence-dev/core-components': patch
+'@evidence-dev/components': patch
+---
+
+Add LastRefreshed component

.changeset/yellow-cows-perform.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/evidence': patch
+---
+
+fix hard refresh on first project boot

packages/component-utilities/src/echartsThemes.js

@@ -12,8 +12,8 @@ const light_legendPageTextColor = uiColours.grey500;
 const light_tooltipBorderColor = uiColours.grey400;
 const light_tooltipBackgroundColor = 'white';
 const light_tooltipTextColor = uiColours.grey900;
-const light_titleColor = uiColours.grey700;
-const light_subtitleColor = uiColours.grey600;
+const light_titleColor = uiColours.grey800;
+const light_subtitleColor = uiColours.grey700;
 
 // Dark Mode Theme
 const dark_axisBaselineColor = uiColours.grey500;
@@ -34,6 +34,9 @@ const dark_subtitleColor = uiColours.grey400;
 
 export const evidenceThemeLight = {
 	darkMode: false, // if true, echarts will automatically update the font colour to work better on dark background
+	textStyle: {
+		fontFamily: 'sans-serif'
+	},
 	grid: {
 		left: '0%',
 		right: '4%',
@@ -445,6 +448,9 @@ export const evidenceThemeLight = {
 
 export const evidenceThemeDark = {
 	darkMode: true, // if true, echarts will automatically update the font colour to work better on dark background
+	textStyle: {
+		fontFamily: 'sans-serif'
+	},
 	grid: {
 		left: '0%',
 		right: '4%',

packages/core-components/src/lib/unsorted/ui/LastRefreshed.svelte

@@ -0,0 +1,43 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	import { version } from '$app/environment';
+	const timestamp = Number(version);
+
+	export let prefix = 'Last refreshed';
+
+	function timeAgo(startTimestamp, endTimestamp) {
+		const secondsAgo = Math.floor((endTimestamp - startTimestamp) / 1000);
+
+		if (secondsAgo < 60) {
+			return secondsAgo === 1 ? '1 second ago' : `${secondsAgo} seconds ago`;
+		} else if (secondsAgo < 3600) {
+			const minutesAgo = Math.round(secondsAgo / 60);
+			return minutesAgo === 1 ? '1 min ago' : `${minutesAgo} mins ago`;
+		} else if (secondsAgo < 86400) {
+			const hoursAgo = (secondsAgo / 3600).toFixed(1);
+			return hoursAgo === '1' ? '1 hour ago' : `${hoursAgo} hours ago`;
+		} else if (secondsAgo < 604800) {
+			const daysAgo = Math.round(secondsAgo / 86400);
+			return daysAgo === 1 ? '1 day ago' : `${daysAgo} days ago`;
+		} else if (secondsAgo < 2592000) {
+			const weeksAgo = Math.round(secondsAgo / 604800);
+			return weeksAgo === 1 ? '1 week ago' : `${weeksAgo} weeks ago`;
+		} else if (secondsAgo < 31536000) {
+			const monthsAgo = Math.round(secondsAgo / 2592000);
+			return monthsAgo === 1 ? '1 month ago' : `${monthsAgo} months ago`;
+		} else {
+			const yearsAgo = Math.round(secondsAgo / 31536000);
+			return yearsAgo === 1 ? '1 year ago' : `${yearsAgo} years ago`;
+		}
+	}
+
+	const varTimeAgo = timeAgo(timestamp, Date.now());
+</script>
+
+<p class="text-sm py-1 cursor-text" title={new Date(timestamp).toLocaleString()}>
+	{prefix}
+	{varTimeAgo}
+</p>

packages/core-components/src/lib/unsorted/ui/index.js

@@ -9,6 +9,7 @@ export { default as Details } from './Details.svelte';
 export { default as DownloadData } from './DownloadData.svelte';
 export { default as EmailSignup } from './EmailSignup.svelte';
 export { default as Header } from './Header.svelte';
+export { default as LastRefreshed } from './LastRefreshed.svelte';
 export { default as LoadingIndicator } from './LoadingIndicator.svelte';
 export { default as LoadingSkeleton } from './LoadingSkeleton.svelte';
 export { default as Logo } from './Logo.svelte';

packages/evidence/scripts/build-template.js

@@ -43,7 +43,7 @@ fsExtra.outputFileSync(
     {
         plugins: [sveltekit()],
         optimizeDeps: {
-            include: ['echarts-stat', 'echarts'],
+            include: ['echarts-stat', 'echarts', '@evidence-dev/core-components', '@evidence-dev/component-utilities/stores', '@evidence-dev/component-utilities/formatting', '@evidence-dev/component-utilities/globalContexts'],
             exclude: ['svelte-icons', 'svelte-tiny-linked-charts']
         },
         ssr: {

sites/docs/docs/guides/system-requirements.md

@@ -12,8 +12,10 @@ Evidence is a Node.js application; it requires Node.js and npm to run.
 
 Check your versions with `node -v` and `npm -v`
 
-<a class="external" href="https://nodejs.org/en/download">Download Node.js + NPM</a>
+**Note:** if you are installing NodeJS for the first time, make sure to download the **LTS version** (LTS = long-term support)
+
+<a class="external" href="https://nodejs.org/en/download">Download Node.js + NPM (LTS version)</a>
 
 ## Updating
 
-Update to the latest npm version with `npm install -g npm@latest`
+Update to the latest npm version with `npm install -g npm@latest`

sites/example-project/src/pages/ui-components/last-refreshed/+page.md

@@ -0,0 +1,17 @@
+# Last Refreshed
+
+### Default
+
+```svelte
+<LastRefreshed/>
+```
+
+<LastRefreshed/>
+
+### Custom Prefix
+
+```svelte
+<LastRefreshed prefix="Updated"/>
+```
+
+<LastRefreshed prefix="Updated"/>