ghost 4.48.0 → 5.0.0

package/content/themes/casper/post.hbs

@@ -8,48 +8,52 @@ into the {body} tag of the default.hbs template --}}
 {{!-- Everything inside the #post block pulls data from the post --}}
 
 <main id="site-main" class="site-main">
-    <article class="article {{post_class}} {{#match @custom.post_image_width "Full"}}image-full{{else match @custom.post_image_width "=" "Small"}}image-small{{/match}}">
+<article class="article {{post_class}} {{#match @custom.post_image_style "Full"}}image-full{{else match @custom.post_image_style "=" "Small"}}image-small{{/match}}">
 
-        <header class="article-header gh-canvas">
+    <header class="article-header gh-canvas">
 
-            {{#if primary_tag}}
-            <section class="article-tag">
+        {{#if primary_tag}}
+            <section class="article-tag post-card-primary-tag">
                 <a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
             </section>
-            {{/if}}
+        {{/if}}
 
-            <h1 class="article-title">{{title}}</h1>
+        <h1 class="article-title">{{title}}</h1>
 
-            {{#if custom_excerpt}}
+        {{#if custom_excerpt}}
             <p class="article-excerpt">{{custom_excerpt}}</p>
-            {{/if}}
-
-            <div class="article-byline">
-                <section class="article-byline-content">
-                    <ul class="author-list">
-                        {{#foreach authors}}
-                        <li class="author-list-item">
-                            {{#if profile_image}}
-                            <a href="{{url}}" class="author-avatar">
-                                <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
-                            </a>
-                            {{else}}
-                            <a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
-                            {{/if}}
-                        </li>
-                        {{/foreach}}
-                    </ul>
-                    <div class="article-byline-meta">
-                        <h4 class="author-name">{{authors}}</h4>
-                        <div class="byline-meta-content">
-                            <time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
-                            <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
-                        </div>
-                    </div>
-                </section>
+        {{/if}}
+
+        <div class="article-byline">
+        <section class="article-byline-content">
+
+            <ul class="author-list">
+                {{#foreach authors}}
+                <li class="author-list-item">
+                    {{#if profile_image}}
+                    <a href="{{url}}" class="author-avatar">
+                        <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
+                    </a>
+                    {{else}}
+                    <a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
+                    {{/if}}
+                </li>
+                {{/foreach}}
+            </ul>
+
+            <div class="article-byline-meta">
+                <h4 class="author-name">{{authors}}</h4>
+                <div class="byline-meta-content">
+                    <time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
+                    <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
+                </div>
             </div>
 
-            {{#if feature_image}}
+        </section>
+        </div>
+
+        {{#match @custom.post_image_style "!=" "Hidden"}}
+        {{#if feature_image}}
             <figure class="article-image">
                 {{!-- This is a responsive image, it loads different sizes depending on device
                 https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
@@ -66,28 +70,29 @@ into the {body} tag of the default.hbs template --}}
                     <figcaption>{{feature_image_caption}}</figcaption>
                 {{/if}}
             </figure>
-            {{/if}}
-        </header>
+        {{/if}}
+        {{/match}}
 
-        <section class="gh-content gh-canvas">
-            {{content}}
-        </section>
+    </header>
 
-        {{!--
-        <section class="article-comments gh-canvas">
-            If you want to embed comments, this is a good place to paste your code!
-        </section>
-        --}}
+    <section class="gh-content gh-canvas">
+        {{content}}
+    </section>
+
+    {{!--
+    <section class="article-comments gh-canvas">
+        If you want to embed comments, this is a good place to paste your code!
+    </section>
+    --}}
 
-    </article>
+</article>
 </main>
 
 {{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
-{{#match @custom.email_signup_for_logged_out_visitors "!=" "None"}}
 {{#unless @member}}{{#if access}}
-    <section class="footer-cta {{#match @custom.email_signup_for_logged_out_visitors "Bottom of post"}}cta-alt{{/match}}">
+    <section class="footer-cta outer">
         <div class="inner">
-            {{#if @custom.email_signup_text}}<h2>{{@custom.email_signup_text}}</h2>{{/if}}
+            {{#if @custom.email_signup_text}}<h2 class="footer-cta-title">{{@custom.email_signup_text}}</h2>{{/if}}
             <a class="footer-cta-button" href="#/portal" data-portal>
                 <div class="footer-cta-input">Enter your email</div>
                 <span>Subscribe</span>
@@ -97,11 +102,10 @@ into the {body} tag of the default.hbs template --}}
         </div>
     </section>
 {{/if}}{{/unless}}
-{{/match}}
 
 
 {{!-- Read more links, just above the footer --}}
-{{#if @custom.show_recent_posts}}
+{{#if @custom.show_recent_posts_footer}}
     {{!-- The {#get} helper below fetches some of the latest posts here
     so that people have something else to read when they finish this one.
 
@@ -110,7 +114,7 @@ into the {body} tag of the default.hbs template --}}
     {{#get "posts" filter="id:-{{id}}" include="authors" limit="3" as |more_posts|}}
 
         {{#if more_posts}}
-            <aside class="read-more-wrap">
+            <aside class="read-more-wrap outer">
                 <div class="read-more inner">
                     {{#foreach more_posts}}
                         {{> "post-card"}}

package/content/themes/casper/tag.hbs

@@ -1,57 +1,52 @@
 {{!< default}}
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
-
 <main id="site-main" class="site-main outer">
-    <div class="inner posts">
-        <div class="post-feed">
-
-            {{#tag}}
-            <section class="post-card post-card-large">
-                {{#if feature_image}}
-                <div class="post-card-image-link">
-                    {{!-- This is a responsive image, it loads different sizes depending on device
-                    https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
-                    <img class="post-card-image"
-                        srcset="{{img_url feature_image size="s"}} 300w,
-                                {{img_url feature_image size="m"}} 600w,
-                                {{img_url feature_image size="l"}} 1000w,
-                                {{img_url feature_image size="xl"}} 2000w"
-                        sizes="(max-width: 1000px) 400px, 800px"
-                        src="{{img_url feature_image size="m"}}"
-                        alt="{{title}}"
-                        loading="lazy"
-                    />
+<div class="inner posts">
+    <div class="post-feed">
+
+        {{#tag}}
+        <section class="post-card post-card-large">
+
+            {{#if feature_image}}
+            <div class="post-card-image-link">
+                {{!-- This is a responsive image, it loads different sizes depending on device
+                https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+                <img class="post-card-image"
+                    srcset="{{img_url feature_image size="s"}} 300w,
+                            {{img_url feature_image size="m"}} 600w,
+                            {{img_url feature_image size="l"}} 1000w,
+                            {{img_url feature_image size="xl"}} 2000w"
+                    sizes="(max-width: 1000px) 400px, 800px"
+                    src="{{img_url feature_image size="m"}}"
+                    alt="{{title}}"
+                />
+            </div>
+            {{/if}}
+
+            <div class="post-card-content">
+            <div class="post-card-content-link">
+                <header class="post-card-header">
+                    <h2 class="post-card-title">{{name}}</h2>
+                </header>
+                <div class="post-card-excerpt">
+                    {{#if description}}
+                        {{description}}
+                    {{else}}
+                        A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% posts'}}
+                    {{/if}}
                 </div>
-                {{/if}}
-                <div class="post-card-content">
-                    <div class="post-card-content-link">
-                        <header class="post-card-header">
-                            <div class="post-card-primary-tag">Tagged</div>
-                            <h2 class="post-card-title">{{name}}</h2>
-                        </header>
-                        <div class="post-card-excerpt">
-                            <p>
-                                {{#if description}}
-                                {{description}}
-                                {{else}}
-                                A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% posts'}}
-                                {{/if}}
-                            </p>
-                        </div>
-                    </div>
-                </div>{{!--/.post-card-content--}}
-
-            </section>
-            {{/tag}}
-
-            {{#foreach posts}}
+            </div>
+            </div>
 
-                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
-                {{> "post-card"}}
+        </section>
+        {{/tag}}
 
-            {{/foreach}}
+        {{#foreach posts}}
+            {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
+            {{> "post-card"}}
+        {{/foreach}}
 
-        </div>
     </div>
+</div>
 </main>

package/core/boot.js

@@ -97,7 +97,7 @@ async function initCore({ghostServer, config, bootLogger, frontend}) {
 
     // Settings are a core concept we use settings to store key-value pairs used in critical pathways as well as public data like the site title
     debug('Begin: settings');
-    const settings = require('./server/services/settings');
+    const settings = require('./server/services/settings/settings-service');
     await settings.init();
     await settings.syncEmailSettings(config.get('hostSettings:emailVerification:verified'));
     debug('End: settings');
@@ -168,15 +168,22 @@ async function initServicesForFrontend({bootLogger}) {
     await offers.init();
     debug('End: Offers');
 
+    const frontendDataService = require('./server/services/frontend-data-service');
+    let dataService = await frontendDataService.init();
+
     debug('End: initServicesForFrontend');
+    return {dataService};
 }
 
 /**
  * Frontend is intended to be just Ghost's frontend
  */
-async function initFrontend() {
+async function initFrontend(dataService) {
     debug('Begin: initFrontend');
 
+    const proxyService = require('./frontend/services/proxy');
+    proxyService.init({dataService});
+
     const helperService = require('./frontend/services/helpers');
     await helperService.init();
 
@@ -207,7 +214,8 @@ async function initExpressApps({frontend, backend, config}) {
 
     if (frontend) {
         // SITE + MEMBERS
-        const frontendApp = require('./server/web/parent/frontend')({});
+        const urlService = require('./server/services/url');
+        const frontendApp = require('./server/web/parent/frontend')({urlService});
         parentApp.use(vhost(config.getFrontendMountPath(), frontendApp));
     }
 
@@ -228,15 +236,13 @@ async function initDynamicRouting() {
     const bridge = require('./bridge');
     bridge.init();
 
-    // We pass the frontend API version + the dynamic routes here, so that the frontend services are slightly less tightly-coupled
-    const apiVersion = bridge.getFrontendApiVersion();
+    // We pass the dynamic routes here, so that the frontend services are slightly less tightly-coupled
     const routeSettings = await routeSettingsService.loadRouteSettings();
-    debug(`Frontend API Version: ${apiVersion}`);
 
-    routing.routerManager.start(apiVersion, routeSettings);
+    routing.routerManager.start(routeSettings);
     const getRoutesHash = () => routeSettingsService.api.getCurrentHash();
 
-    const settings = require('./server/services/settings');
+    const settings = require('./server/services/settings/settings-service');
     await settings.syncRoutesHash(getRoutesHash);
 
     debug('End: Dynamic Routing');
@@ -253,9 +259,6 @@ async function initDynamicRouting() {
 async function initServices({config}) {
     debug('Begin: initServices');
 
-    const defaultApiVersion = config.get('api:versions:default');
-    debug(`Default API Version: ${defaultApiVersion}`);
-
     debug('Begin: Services');
     const stripe = require('./server/services/stripe');
     const members = require('./server/services/members');
@@ -289,7 +292,7 @@ async function initServices({config}) {
         appService.init(),
         apiVersionCompatibility.init(),
         scheduling.init({
-            apiUrl: urlUtils.urlFor('api', {version: defaultApiVersion, versionType: 'admin'}, true)
+            apiUrl: urlUtils.urlFor('api', {type: 'admin'}, true)
         })
     ]);
     debug('End: Services');
@@ -403,7 +406,7 @@ async function bootGhost({backend = true, frontend = true, server = true} = {})
 
         if (server) {
             const GhostServer = require('./server/ghost-server');
-            ghostServer = new GhostServer({url: config.getSiteUrl()});
+            ghostServer = new GhostServer({url: config.getSiteUrl(), env: config.get('env'), serverConfig: config.get('server')});
             await ghostServer.start(rootApp);
             bootLogger.log('server started');
             debug('End: load server + minimal app');
@@ -418,10 +421,10 @@ async function bootGhost({backend = true, frontend = true, server = true} = {})
         // Step 4 - Load Ghost with all its services
         debug('Begin: Load Ghost Services & Apps');
         await initCore({ghostServer, config, bootLogger, frontend});
-        await initServicesForFrontend({bootLogger});
+        const {dataService} = await initServicesForFrontend({bootLogger});
 
         if (frontend) {
-            await initFrontend();
+            await initFrontend(dataService);
         }
         const ghostApp = await initExpressApps({frontend, backend, config});
 

package/core/bridge.js

@@ -15,11 +15,14 @@ const errors = require('@tryghost/errors');
 const logging = require('@tryghost/logging');
 const tpl = require('@tryghost/tpl');
 const themeEngine = require('./frontend/services/theme-engine');
+const appService = require('./frontend/services/apps');
 const cardAssetService = require('./frontend/services/card-assets');
 const routerManager = require('./frontend/services/routing').routerManager;
 const settingsCache = require('./shared/settings-cache');
+const urlService = require('./server/services/url');
+const routeSettings = require('./server/services/route-settings');
 
-// Listen to settings.lang.edited, similar to the member service and models/base/listeners
+// Listen to settings.locale.edited, similar to the member service and models/base/listeners
 const events = require('./server/lib/common/events');
 
 const messages = {
@@ -30,9 +33,8 @@ class Bridge {
     init() {
         /**
          * When locale changes, we reload theme translations
-         * @deprecated: the term "lang" was deprecated in favor of "locale" publicly in 4.0
          */
-        events.on('settings.lang.edited', (model) => {
+        events.on('settings.locale.edited', (model) => {
             debug('Active theme init18n');
             this.getActiveTheme().initI18n({locale: model.get('value')});
         });
@@ -51,24 +53,12 @@ class Bridge {
 
     async activateTheme(loadedTheme, checkedTheme) {
         let settings = {
-            locale: settingsCache.get('lang')
+            locale: settingsCache.get('locale')
         };
         // no need to check the score, activation should be used in combination with validate.check
         // Use the two theme objects to set the current active theme
         try {
-            let previousGhostAPI;
-
-            if (this.getActiveTheme()) {
-                previousGhostAPI = this.getActiveTheme().engine('ghost-api');
-            }
-
             themeEngine.setActive(settings, loadedTheme, checkedTheme);
-            const currentGhostAPI = this.getActiveTheme().engine('ghost-api');
-
-            if (previousGhostAPI !== undefined && (previousGhostAPI !== currentGhostAPI)) {
-                events.emit('services.themes.api.changed');
-                await this.reloadFrontend();
-            }
 
             const cardAssetConfig = this.getCardAssetConfig();
             debug('reload card assets config', cardAssetConfig);
@@ -81,11 +71,6 @@ class Bridge {
         }
     }
 
-    getFrontendApiVersion() {
-        // @NOTE: we've pinned the frontend to canary in a step towards removing API versions
-        return 'canary';
-    }
-
     getCardAssetConfig() {
         if (this.getActiveTheme()) {
             return this.getActiveTheme().config('card_assets');
@@ -95,11 +80,25 @@ class Bridge {
     }
 
     async reloadFrontend() {
-        const apiVersion = this.getFrontendApiVersion();
-
-        debug('reload frontend', apiVersion);
+        debug('reload frontend');
         const siteApp = require('./frontend/web/site');
-        await siteApp.reload({apiVersion});
+
+        const routerConfig = {
+            routeSettings: await routeSettings.loadRouteSettings(),
+            urlService
+        };
+
+        await siteApp.reload(routerConfig);
+
+        // re-initialize apps (register app routers, because we have re-initialized the site routers)
+        appService.init();
+
+        // connect routers and resources again
+        urlService.queue.start({
+            event: 'init',
+            tolerance: 100,
+            requiredSubscriberCount: 1
+        });
     }
 }