Spectral Web Services
Making {{ghost_head}} better
Know how I'm always griping about ghost_head being a monolith? I did something about it!
Introducing new options for {{ghost_head}}!
Those of you who've been reading for a while may have noticed that I'm bothered by {{ghost_head}}. I mean, it does a ton of awesome and useful stuff, but the fact that it's one beast of a monolith means that it's also a barrier to being able to do other interesting and useful things.
Cathy Sarisky, Ghost Expert
I did one client job that needed {{ghost_head}} replaced, and wished for the ability to adjust it without needing to completely omit it.
A year passed, and then, after some consultation with the Ghost team, we settled on adding a head_excludes flag in the theme's package.json.
I'm super excited about this, because it's going to give anyone with the ability to load a custom theme super powers. You can load a custom version of Portal. You can replace sodo-search with a custom-built search that uses Algolia as the back end. You can not load the card assets on the front page if you don't have full post content on the front page. You can load customized metadata and schema. You can hide the 'generator' giveaway that you're a Ghost site and should really bump versions.
All the things, and all available to anyone who can upload a custom theme.
Mini-docs:
To use the new feature, add an array of unwanted ghost_head features to the theme's package.json, i.e.:"head_excludes": [ "portal", "tinybirdtracker" ],
| Key | What it excludes | Additional Info/Why you should or shouldn't. |
|---|---|---|
| (empty array) | No changes to current behavior | |
| all | All of ghost_head | (Probably a bad idea) |
| search | The built-in sodo-search script | Includes adding the click event listener on buttons |
| portal | The Portal script | Handles sign-in and sign-up, payments, tips, memberships, etc, and all the portal data-attributes. |
| announcement | The announcement bar javascript | If you'd like to use the announcement bar admin settings but not have it mess up your CLS metric, this is for you. |
| webmention | Used by Recommendations | |
| generator | Reveals that your site is a Ghost site and what version | Turning this off may be desirable for security |
| metadata | Skips HTML tags for meta description, favicon, canonical url, robots, referrer | Important for SEO |
| rss | Your RSS feed link | |
| schema | The LD+JSON schema | Important for SEO |
| cardassets | Loads cards.min.css and .js | Needed on any page with a post body, unless your theme replaces them all. Assets can also be selectively loaded with the card_assets override |
| commentcounts | Loads the comment_counts helper | Needed if the page is using {{comments}} or data-ghost-comment-count attribute |
| memberattribution | Member attribution javascript | Required for tracking sources of new sign-ups |
| tinybirdtracker | New feature! | TODO: write something about this |
| prevnext | Prev/next links | Required for infinite scroll, helps some search engines (but not Google) navigate your site. |
| socialdata | Produces the og: and twitter: attributes for social media sharing and previews | Required for good social media cards |
| stripe | Stripe script loading | Used for fraud prevention (see https://docs.stripe.com/js/including) |
| ctastyles | Removes the call to action (CTA) styles | Used for member signup and CTA cards - may be overwritten by your theme already |
| codeinjectionhead | Removes all codeinjection from the head | (All sources, not just global.) |
| amp | The amp link | (headed for deprecation) |
Technical bits:
For those of you curious, here's the pull request:
TryGhostHow hard was it to do? Here's my lines added/removed:
OK, it wasn't actually quite as bad as it looks, since it's 2.5k of new test snapshots and almost 500 lines of new tests. It took longer to write the tests than the original feature, for sure. (Testing revealed a bug that would have been a problem for Ghost Pro users, so it was all worth it. I think...)
I'm super excited to see what you build with this. Drop me a comment below, especially if you're now loading a custom version of Portal, in pink!
