self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-04-14 11:18:47 +02:00
Code Issues Releases Activity

Doc: Improved caching of asset URLs

Browse Source
This commit is contained in:
Laurent Cozic 2021-10-25 16:49:21 +01:00
parent 2d85363f5e
commit 82227b268e
4 changed files with 43 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Assets/WebsiteAssets/templates/front.mustache
View File

@ -11,7 +11,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="Joplin, the open source note-taking application" /> <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 <link
rel="stylesheet" rel="stylesheet"
href="{{cssBaseUrl}}/bootstrap5.0.2.min.css" href="{{cssBaseUrl}}/bootstrap5.0.2.min.css"
@ -29,7 +29,7 @@
rel="preload" rel="preload"
as="script" as="script"
></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> <title>Joplin</title>
</head> </head>
<body class="front-page website-env-{{env}}"> <body class="front-page website-env-{{env}}">
@ -376,7 +376,7 @@
rel="preload" rel="preload"
as="script" as="script"
></script> ></script>
<script src="{{jsBaseUrl}}/script.js?t={{buildTime}}"></script> <script src="{{{assetUrls.js.script}}}"></script>
{{> analytics}} {{> analytics}}
</body> </body>
</html> </html>

6
Assets/WebsiteAssets/templates/main-new.mustache
View File

@ -29,7 +29,7 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
href="{{cssBaseUrl}}/bootstrap5.0.2.min.css" href="{{cssBaseUrl}}/bootstrap5.0.2.min.css"
as="style" as="style"
/> />
<link rel="stylesheet" href="{{cssBaseUrl}}/fontawesome-all.min.css?t={{buildTime}}"> <link rel="stylesheet" href="{{{assetUrls.css.fontawesome}}}">
<link <link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
rel="stylesheet" rel="stylesheet"
@ -37,7 +37,7 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
media="all" media="all"
onload="this.media='all'; this.onload = null" 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> <title>{{pageTitle}}</title>
<script <script
@ -79,7 +79,7 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
{{> footer}} {{> footer}}
</div> </div>
<script src="{{jsBaseUrl}}/script.js?t={{buildTime}}"></script> <script src="{{{assetUrls.js.script}}}"></script>
{{> analytics}} {{> analytics}}
</body> </body>

43
packages/tools/website/build.ts
View File

@ -2,15 +2,15 @@ import * as fs from 'fs-extra';
import { insertContentIntoFile, rootDir } from '../tool-utils'; import { insertContentIntoFile, rootDir } from '../tool-utils';
import { pressCarouselItems } from './utils/pressCarousel'; import { pressCarouselItems } from './utils/pressCarousel';
import { getMarkdownIt, loadMustachePartials, markdownToPageHtml, renderMustache } from './utils/render'; 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 { getPlans, loadStripeConfig } from '@joplin/lib/utils/joplinCloud';
import { shuffle } from '@joplin/lib/array'; import { shuffle } from '@joplin/lib/array';
const dirname = require('path').dirname; const dirname = require('path').dirname;
const glob = require('glob'); const glob = require('glob');
const path = require('path'); const path = require('path');
const md5File = require('md5-file/promise');
const env = Env.Prod; const env = Env.Prod;
const buildTime = Date.now();
const websiteAssetDir = `${rootDir}/Assets/WebsiteAssets`; const websiteAssetDir = `${rootDir}/Assets/WebsiteAssets`;
const mainTemplateHtml = fs.readFileSync(`${websiteAssetDir}/templates/main-new.mustache`, 'utf8'); const mainTemplateHtml = fs.readFileSync(`${websiteAssetDir}/templates/main-new.mustache`, 'utf8');
@ -58,15 +58,31 @@ function tocHtml() {
return 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 { return {
env, env,
baseUrl: baseUrl, baseUrl,
imageBaseUrl: `${baseUrl}/images`, imageBaseUrl: `${baseUrl}/images`,
cssBaseUrl: `${baseUrl}/css`, cssBaseUrl,
jsBaseUrl: `${baseUrl}/js`, jsBaseUrl,
tocHtml: tocHtml(), tocHtml: tocHtml(),
yyyy: (new Date()).getFullYear().toString(), yyyy: (new Date()).getFullYear().toString(),
templateHtml: mainTemplateHtml, templateHtml: mainTemplateHtml,
@ -77,7 +93,7 @@ function defaultTemplateParams(): TemplateParams {
navbar: { navbar: {
isFrontPage: false, isFrontPage: false,
}, },
buildTime, assetUrls,
}; };
} }
@ -86,7 +102,7 @@ function renderPageToHtml(md: string, targetPath: string, templateParams: Templa
md = md.replace(/# Joplin\n/, ''); md = md.replace(/# Joplin\n/, '');
templateParams = { templateParams = {
...defaultTemplateParams(), ...defaultTemplateParams(templateParams.assetUrls),
...templateParams, ...templateParams,
}; };
@ -189,6 +205,7 @@ async function main() {
const sponsors = await loadSponsors(); const sponsors = await loadSponsors();
const partials = await loadMustachePartials(partialDir); const partials = await loadMustachePartials(partialDir);
const assetUrls = await getAssetUrls();
const readmeMd = makeHomePageMd(); const readmeMd = makeHomePageMd();
@ -199,7 +216,7 @@ async function main() {
// HELP PAGE // 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 // FRONT PAGE
@ -221,6 +238,7 @@ async function main() {
isFrontPage: true, isFrontPage: true,
}, },
showToc: false, showToc: false,
assetUrls,
}); });
// ============================================================= // =============================================================
@ -231,7 +249,7 @@ async function main() {
const planPageFaqHtml = getMarkdownIt().render(planPageFaqMd, {}); const planPageFaqHtml = getMarkdownIt().render(planPageFaqMd, {});
const planPageParams: PlanPageParams = { const planPageParams: PlanPageParams = {
...defaultTemplateParams(), ...defaultTemplateParams(assetUrls),
partials, partials,
templateHtml: plansTemplateHtml, templateHtml: plansTemplateHtml,
plans: getPlans(stripeConfig), plans: getPlans(stripeConfig),
@ -242,7 +260,7 @@ async function main() {
const planPageContentHtml = renderMustache('', planPageParams); const planPageContentHtml = renderMustache('', planPageParams);
renderPageToHtml('', `${rootDir}/docs/plans/index.html`, { renderPageToHtml('', `${rootDir}/docs/plans/index.html`, {
...defaultTemplateParams(), ...defaultTemplateParams(assetUrls),
pageName: 'plans', pageName: 'plans',
partials, partials,
showToc: false, showToc: false,
@ -277,6 +295,7 @@ async function main() {
...source[2], ...source[2],
templateHtml: mainTemplateHtml, templateHtml: mainTemplateHtml,
partials, partials,
assetUrls,
}); });
} }
} }

7
packages/tools/website/utils/types.ts
View File

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