Ghost/core/frontend/helpers/link.js
Hannah Wolfe 52b924638d
Removed core @tryghost pkg usage from f/e proxy
- The frontend proxy is meant to be a way to pass critical internal pieces of Ghost core into the frontend
- These fundamental @tryghost packages are shared and can be required directly, hence there's no need to pass them via the proxy
- Reducing the surface area of the proxy reduces the proxies API
- This makes it easier to see what's left in terms of decoupling the frontend, and what will always need to be passed (e.g. api)

Note on @tryghost/social-urls:
- this is a small utility that helps create URLs for social profiles, it's a util for working with data on the frontend aka part of the sdk
- I think there should be many of these small helpers and we'll probably want to bundle them for the frontend at some point
- for now, I'm leaving these as part of the proxy, as need to figure out where they belong
2021-09-28 12:19:02 +01:00

71 lines
2.4 KiB
JavaScript

// # link helper
const {config, SafeString, localUtils} = require('../services/proxy');
const _ = require('lodash');
const errors = require('@tryghost/errors');
const tpl = require('@tryghost/tpl');
const {buildLinkClasses} = localUtils;
const messages = {
hrefIsRequired: 'The {{#link}}{{/link}} helper requires an href="" attribute.'
};
const managedAttributes = ['href', 'class', 'activeClass', 'parentActiveClass'];
function _formatAttrs(attributes) {
let attributeString = '';
Object.keys(attributes).forEach((key) => {
let value = attributes[key];
// @TODO handle non-string attributes?
attributeString += `${key}="${value}"`;
});
return attributeString;
}
module.exports = function link(options) {
options = options || {};
options.hash = options.hash || {};
options.data = options.data || {};
// If there is no href provided, this is theme dev error, so we throw an error to make this clear.
if (!_.has(options.hash, 'href')) {
throw new errors.IncorrectUsageError({
message: tpl(messages.hrefIsRequired)
});
}
// If the href attribute is empty, this is probably a dynamic data problem, hard for theme devs to track down
// E.g. {{#link for=slug}}{{/link}} in a context where slug returns an empty string
// Error's here aren't useful (same as with empty get helper filters) so we fallback gracefully
if (!options.hash.href) {
options.hash.href = '';
}
let href = options.hash.href.string || options.hash.href;
// Calculate dynamic properties
let classes = buildLinkClasses(config.get('url'), href, options);
// Remove all the attributes we don't want to do a one-to-one mapping of
managedAttributes.forEach((attr) => {
delete options.hash[attr];
});
// Setup our one-to-one mapping of attributes;
let attributes = options.hash;
// Prepare output
let classString = classes.length > 0 ? `class="${classes.join(' ')}"` : '';
let hrefString = `href="${href}"`;
let attributeString = _.size(attributes) > 0 ? _formatAttrs(attributes) : '';
let openingTag = `<a ${classString} ${hrefString} ${attributeString}>`;
let closingTag = `</a>`;
// Clean up any extra spaces
openingTag = openingTag.replace(/\s{2,}/g, ' ').replace(/\s>/, '>');
return new SafeString(`${openingTag}${options.fn(this)}${closingTag}`);
};