empayre/fleet
14
0
Fork 0
mirror of https://github.com/empayre/fleet.git synced 2024-11-06 08:55:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Website: Update build script to support relative image links (#5674)

Browse Source 
* website: modify image links to point to assets folder

* website: update links to article images

* update comments

* revert sailsrc change

* Update build-static-content.js

* suggested changes from review
This commit is contained in:
Eric 2022-05-12 10:21:44 -05:00 committed by GitHub
parent 69e2646bc6
commit fba695be86
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 46 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
website/scripts/build-static-content.js vendored
View File

@ -276,6 +276,33 @@ module.exports = {
});//∞
// Modify images in the /articles folder
if (sectionRepoPath === 'articles/') {
// modifying relative links e.g. `../website/assets/images/articles/foo-200x300@2x.png`
htmlString = htmlString.replace(/((?<=(src))="(\.\/[^"]+|\.\.\/[^"]+)?")/g, (srcString)=>{
let oldRelPath = srcString.match(/="(\.\/[^"]+|\.\.\/[^"]+)"/)[1];
let referencedPageSourcePath = path.resolve(path.join(topLvlRepoPath, sectionRepoPath, pageRelSourcePath), '../', oldRelPath);
// If the relative link goes to the image is in the website's assets folder (`website/assets/`) we'll modify the relative link
// to work on fleetdm.com e.g. ('../website/assets/images/articles/foo-300x900@2x.png' -> '/images/articles/foo-200x300@2x.png')
let isWebsiteAsset = referencedPageSourcePath.match(/(?<=\/website\/assets)(\/images\/(.+))/g)[0];
if(isWebsiteAsset) {
return '="'+isWebsiteAsset+'"';
} else {
// If the relative link doesn't go to the `website/assets/` folder, we'll throw an error.
throw new Error(`Failed compiling markdown content: An article page has an invalid image link ${srcString} at "${path.join(topLvlRepoPath, pageSourcePath)}". To resolve, ensure this image has been added to 'website/assets/images/articles/' and link to it using a relative link e.g. '../website/assets/images/articles/foo-200x300@2x.png' OR a link to the image on fleetdm.com e.g. 'https://fleetdm.com/images/articles/foo-200x300@2x.png`);
}
});//∞
// Modify links to images hosted on fleetdm.com to link directly to the file in the `website/assets/` folder
htmlString = htmlString.replace(/((?<=(src))="https?:\/\/([^"]+)")/g, (srcString)=>{
let isExternal = ! srcString.match(/=\"https?:\/\/([^\.|blog]+\.)*fleetdm\.com/g);
if (!isExternal) {
return srcString.replace(/=\"https?:\/\//, '').replace(/^fleetdm\.com/, '="');
}
});//∞
}
// Extract metadata from markdown.
// > • Parsing meta tags (consider renaming them to just <meta>- or by now there's probably a more standard way of embedding semantics in markdown files; prefer to use that): https://github.com/uncletammy/doc-templater/blob/2969726b598b39aa78648c5379e4d9503b65685e/lib/compile-markdown-tree-from-remote-git-repo.js#L180-L183
// > See also https://github.com/mikermcneil/machinepack-markdown/blob/5d8cee127e8ce45c702ec9bbb2b4f9bc4b7fafac/machines/parse-docmeta-tags.js#L42-L47
@ -373,9 +400,25 @@ module.exports = {
}
if(embeddedMetadata.articleImageUrl) {
// Checking the value of `articleImageUrl` meta tags, and throwing an error if it is not a link to an image.
let isValidImageUrl = embeddedMetadata.articleImageUrl.match(/^https?:\/\/(.+)(\.png|\.jpg|\.jpeg)$/g);
if(!isValidImageUrl) {
throw new Error(`Failed compiling markdown content: An article page has an invalid a articleImageUrl meta tag (<meta name="articleImageUrl" value="${embeddedMetadata.articleImageUrl}">) at "${path.join(topLvlRepoPath, pageSourcePath)}". To resolve, change the value of the meta tag to be a URL`);
let isValidImage = embeddedMetadata.articleImageUrl.match(/^(https?:\/\/|\.\.)(.+)(\.png|\.jpg|\.jpeg)$/g);
if(!isValidImage) {
throw new Error(`Failed compiling markdown content: An article page has an invalid a articleImageUrl meta tag (<meta name="articleImageUrl" value="${embeddedMetadata.articleImageUrl}">) at "${path.join(topLvlRepoPath, pageSourcePath)}". To resolve, change the value of the meta tag to be a URL or repo relative link to an image`);
}
let isURL = embeddedMetadata.articleImageUrl.match(/https?:\/\/(.+)/g);
let isExternal = ! embeddedMetadata.articleImageUrl.match(/https?:\/\/([^\.|blog]+\.)*fleetdm\.com/g);
let inWebsiteAssetFolder = embeddedMetadata.articleImageUrl.match(/(?<=\.\.\/website\/assets)(\/images\/(.+))/g);
// Modifying the value of the `articleImageUrl` meta tag
if (isURL) {
if (!isExternal) { // If the image is hosted on fleetdm.com, we'll modify the meta value to reference the file directly in the `website/assets/` folder
embeddedMetadata.articleImageUrl = embeddedMetadata.articleImageUrl.replace(/https?:\/\//, '').replace(/^fleetdm\.com/, '');
} else { // If the value is a link to an image that is not hosted on fleetdm.com, we won't modify it.
// TODO: Enable this error once our Medium articles and their assets have been fully migrated.
// throw new Error(`Failed compiling markdown content: An article page has an invalid a articleImageUrl meta tag (<meta name="articleImageUrl" value="${embeddedMetadata.articleImageUrl}">) at "${path.join(topLvlRepoPath, pageSourcePath)}". To resolve, change the value of the meta tag to be an image that will be hosted on fleetdm.com`);
}
} else if(inWebsiteAssetFolder) { // If the `articleImageUrl` value is a relative link to the `website/assets/` folder, we'll modify the value to link directly to that folder.
embeddedMetadata.articleImageUrl = embeddedMetadata.articleImageUrl.replace(/^\.\.\/website\/assets/g, '');
} else { // If the value is not a url and the relative link does not go to the 'website/assets/' folder, we'll throw an error.
throw new Error(`Failed compiling markdown content: An article page has an invalid a articleImageUrl meta tag (<meta name="articleImageUrl" value="${embeddedMetadata.articleImageUrl}">) at "${path.join(topLvlRepoPath, pageSourcePath)}". To resolve, change the value of the meta tag to be a URL or repo relative link to an image in the 'website/assets/images' folder`);
}
}
// For article pages, we'll attach the category to the `rootRelativeUrlPath`.