Doc: Improved caching of asset URLs

2025-10-31 00:07:48 +02:00 · 2021-10-25 16:49:21 +01:00
parent 2d85363f5e
commit 82227b268e
4 changed files with 43 additions and 19 deletions
--- a/Assets/WebsiteAssets/templates/front.mustache
+++ b/Assets/WebsiteAssets/templates/front.mustache
@@ -11,7 +11,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="theme-color" content="#000000" />
 		<meta name="description" content="Joplin, the open source note-taking application" />
-		<link rel="stylesheet" href="{{cssBaseUrl}}/fontawesome-all.min.css?t={{buildTime}}">
+		<link rel="stylesheet" href="{{{assetUrls.css.fontawesome}}}">
 		<link
 			rel="stylesheet"
 			href="{{cssBaseUrl}}/bootstrap5.0.2.min.css"
@@ -29,7 +29,7 @@
 			rel="preload"
 			as="script"
 		></script>
-		<link rel="stylesheet" href="{{cssBaseUrl}}/site.css?t={{buildTime}}" as="style" />
+		<link rel="stylesheet" href="{{{assetUrls.css.site}}}" as="style" />
 		<title>Joplin</title>
 	</head>
 	<body class="front-page website-env-{{env}}">
@@ -376,7 +376,7 @@
 			rel="preload"
 			as="script"
 		></script>
-		<script src="{{jsBaseUrl}}/script.js?t={{buildTime}}"></script>
+		<script src="{{{assetUrls.js.script}}}"></script>
 		{{> analytics}}
 	</body>
 </html>
--- a/Assets/WebsiteAssets/templates/main-new.mustache
+++ b/Assets/WebsiteAssets/templates/main-new.mustache
@@ -29,7 +29,7 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
 			href="{{cssBaseUrl}}/bootstrap5.0.2.min.css"
 			as="style"
 		/>
-		<link rel="stylesheet" href="{{cssBaseUrl}}/fontawesome-all.min.css?t={{buildTime}}">
+		<link rel="stylesheet" href="{{{assetUrls.css.fontawesome}}}">
 		<link
 			href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
 			rel="stylesheet"
@@ -37,7 +37,7 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
 			media="all"
 			onload="this.media='all'; this.onload = null"
 		/>
-		<link rel="stylesheet" href="{{cssBaseUrl}}/site.css?t={{buildTime}}" as="style" />
+		<link rel="stylesheet" href="{{{assetUrls.css.site}}}" as="style" />
 		<title>{{pageTitle}}</title>

 		<script
@@ -79,7 +79,7 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
 			{{> footer}}
 		</div>

-		<script src="{{jsBaseUrl}}/script.js?t={{buildTime}}"></script>
+		<script src="{{{assetUrls.js.script}}}"></script>

 		{{> analytics}}
 	</body>
--- a/packages/tools/website/build.ts
+++ b/packages/tools/website/build.ts
@@ -2,15 +2,15 @@ import * as fs from 'fs-extra';
 import { insertContentIntoFile, rootDir } from '../tool-utils';
 import { pressCarouselItems } from './utils/pressCarousel';
 import { getMarkdownIt, loadMustachePartials, markdownToPageHtml, renderMustache } from './utils/render';
-import { Env, OrgSponsor, PlanPageParams, Sponsors, TemplateParams } from './utils/types';
+import { AssetUrls, Env, OrgSponsor, PlanPageParams, Sponsors, TemplateParams } from './utils/types';
 import { getPlans, loadStripeConfig } from '@joplin/lib/utils/joplinCloud';
 import { shuffle } from '@joplin/lib/array';
 const dirname = require('path').dirname;
 const glob = require('glob');
 const path = require('path');
+const md5File = require('md5-file/promise');

 const env = Env.Prod;
-const buildTime = Date.now();

 const websiteAssetDir = `${rootDir}/Assets/WebsiteAssets`;
 const mainTemplateHtml = fs.readFileSync(`${websiteAssetDir}/templates/main-new.mustache`, 'utf8');
@@ -58,15 +58,31 @@ function tocHtml() {
 	return tocHtml_;
 }

-function defaultTemplateParams(): TemplateParams {
-	const baseUrl = '';
+const baseUrl = '';
+const cssBasePath = `${websiteAssetDir}/css`;
+const cssBaseUrl = `${baseUrl}/css`;
+const jsBasePath = `${websiteAssetDir}/js`;
+const jsBaseUrl = `${baseUrl}/js`;

+async function getAssetUrls(): Promise<AssetUrls> {
+	return {
+		css: {
+			fontawesome: `${cssBaseUrl}/fontawesome-all.min.css?h=${await md5File(`${cssBasePath}/fontawesome-all.min.css`)}`,
+			site: `${cssBaseUrl}/site.css?h=${await md5File(`${cssBasePath}/site.css`)}`,
+		},
+		js: {
+			script: `${jsBaseUrl}/script.js?h=${await md5File(`${jsBasePath}/script.js`)}`,
+		},
+	};
+}
+
+function defaultTemplateParams(assetUrls: AssetUrls): TemplateParams {
 	return {
 		env,
-		baseUrl: baseUrl,
+		baseUrl,
 		imageBaseUrl: `${baseUrl}/images`,
-		cssBaseUrl: `${baseUrl}/css`,
-		jsBaseUrl: `${baseUrl}/js`,
+		cssBaseUrl,
+		jsBaseUrl,
 		tocHtml: tocHtml(),
 		yyyy: (new Date()).getFullYear().toString(),
 		templateHtml: mainTemplateHtml,
@@ -77,7 +93,7 @@ function defaultTemplateParams(): TemplateParams {
 		navbar: {
 			isFrontPage: false,
 		},
-		buildTime,
+		assetUrls,
 	};
 }

@@ -86,7 +102,7 @@ function renderPageToHtml(md: string, targetPath: string, templateParams: Templa
 	md = md.replace(/# Joplin\n/, '');

 	templateParams = {
-		...defaultTemplateParams(),
+		...defaultTemplateParams(templateParams.assetUrls),
 		...templateParams,
 	};

@@ -189,6 +205,7 @@ async function main() {

 	const sponsors = await loadSponsors();
 	const partials = await loadMustachePartials(partialDir);
+	const assetUrls = await getAssetUrls();

 	const readmeMd = makeHomePageMd();

@@ -199,7 +216,7 @@ async function main() {
 	// HELP PAGE
 	// =============================================================

-	renderPageToHtml(readmeMd, `${rootDir}/docs/help/index.html`, { sourceMarkdownFile: 'README.md', partials, sponsors });
+	renderPageToHtml(readmeMd, `${rootDir}/docs/help/index.html`, { sourceMarkdownFile: 'README.md', partials, sponsors, assetUrls });

 	// =============================================================
 	// FRONT PAGE
@@ -221,6 +238,7 @@ async function main() {
 			isFrontPage: true,
 		},
 		showToc: false,
+		assetUrls,
 	});

 	// =============================================================
@@ -231,7 +249,7 @@ async function main() {
 	const planPageFaqHtml = getMarkdownIt().render(planPageFaqMd, {});

 	const planPageParams: PlanPageParams = {
-		...defaultTemplateParams(),
+		...defaultTemplateParams(assetUrls),
 		partials,
 		templateHtml: plansTemplateHtml,
 		plans: getPlans(stripeConfig),
@@ -242,7 +260,7 @@ async function main() {
 	const planPageContentHtml = renderMustache('', planPageParams);

 	renderPageToHtml('', `${rootDir}/docs/plans/index.html`, {
-		...defaultTemplateParams(),
+		...defaultTemplateParams(assetUrls),
 		pageName: 'plans',
 		partials,
 		showToc: false,
@@ -277,6 +295,7 @@ async function main() {
 			...source[2],
 			templateHtml: mainTemplateHtml,
 			partials,
+			assetUrls,
 		});
 	}
 }
--- a/packages/tools/website/utils/types.ts
+++ b/packages/tools/website/utils/types.ts
@@ -40,6 +40,11 @@ interface NavBar {
 	isFrontPage: boolean;
 }

+export interface AssetUrls {
+	css: Record<string, string>;
+	js: Record<string, string>;
+}
+
 export interface TemplateParams {
 	env?: Env;
 	baseUrl?: string;
@@ -64,7 +69,7 @@ export interface TemplateParams {
 	contentHtml?: string;
 	navbar?: NavBar;
 	showJoplinCloudLinks?: boolean;
-	buildTime?: number;
+	assetUrls: AssetUrls;
 }

 export interface PlanPageParams extends TemplateParams {