ghost 4.23.0 → 4.26.0

package/core/frontend/src/cards/css/audio.css

@@ -0,0 +1,186 @@
+.kg-audio-card {
+    margin-top: 7vmin;
+}
+
+.kg-audio-player-container button {
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    outline: none;
+    width: 40px;
+    height: 40px;
+    float: left;
+}
+
+.kg-audio-player-container {
+    position: relative;
+    /* margin: 0 2.5% auto 2.5%; */
+    width: 100%;
+    /* max-width: 500px; */
+    height: 132px;
+    background: #fff;
+    font-family: Arial, Helvetica, sans-serif;
+    --seek-before-width: 0%;
+    --volume-before-width: 100%;
+    --buffered-width: 0%;
+    letter-spacing: -0.5px;
+}
+.kg-audio-player-container::before {
+    position: absolute;
+    content: '';
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    left: -2px;
+    top: -2px;
+    background: linear-gradient(to left, #007db5, #ff8a00);
+    z-index: -1;
+}
+.kg-audio-player-container p {
+    position: absolute;
+    top: -18px;
+    right: 5%;
+    padding: 0 5px;
+    margin: 0;
+    font-size: 24px;
+    background: #fff;
+}
+.kg-audio-play-icon {
+    margin: 20px 2.5% 10px 2.5%;
+}
+.kg-audio-player-container path {
+    stroke: #007db5;
+}
+.kg-audio-duration,
+.kg-audio-current-time {
+    display: inline-block;
+    width: 37px;
+    text-align: center;
+    font-size: 20px;
+    margin: 28.5px 0 18.5px 0;
+    float: left;
+}
+.kg-audio-player-container output {
+    display: inline-block;
+    width: 32px;
+    text-align: center;
+    font-size: 20px;
+    margin: 10px 2.5% 0 5%;
+    float: left;
+    clear: left;
+}
+.kg-audio-volume-slider {
+    margin: 10px 2.5% !important;
+    width: 58% !important;
+}
+.kg-audio-volume-slider::-webkit-slider-runnable-track {
+    background: rgba(0, 125, 181, 0.6) !important;
+}
+.kg-audio-volume-slider::-moz-range-track {
+    background: rgba(0, 125, 181, 0.6) !important;
+}
+.kg-audio-volume-slider::-ms-fill-upper {
+    background: rgba(0, 125, 181, 0.6) !important;
+}
+.kg-audio-volume-slider::before {
+    width: var(--volume-before-width) !important;
+}
+.kg-audio-mute-icon {
+    margin: 0 2.5%;
+}
+.kg-audio-player-container input[type="range"] {
+    position: relative;
+    -webkit-appearance: none;
+    width: 48%;
+    margin: 0;
+    padding: 0;
+    height: 19px;
+    margin: 30px 2.5% 20px 2.5%;
+    float: left;
+    outline: none;
+}
+.kg-audio-player-container input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
+}
+.kg-audio-player-container input[type="range"]::before {
+    position: absolute;
+    content: "";
+    top: 8px;
+    left: 0;
+    width: var(--seek-before-width);
+    height: 3px;
+    background-color: #007db5;
+    cursor: pointer;
+}
+.kg-audio-player-container input[type="range"]::-webkit-slider-thumb {
+    position: relative;
+    -webkit-appearance: none;
+    box-sizing: content-box;
+    border: 1px solid #007db5;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    background-color: #fff;
+    cursor: pointer;
+    margin: -7px 0 0 0;
+}
+.kg-audio-player-container input[type="range"]:active::-webkit-slider-thumb {
+    transform: scale(1.2);
+    background: #007db5;
+}
+.kg-audio-player-container input[type="range"]::-moz-range-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
+}
+.kg-audio-player-container input[type="range"]::-moz-range-progress {
+    background-color: #007db5;
+}
+.kg-audio-player-container input[type="range"]::-moz-focus-outer {
+    border: 0;
+}
+.kg-audio-player-container input[type="range"]::-moz-range-thumb {
+    box-sizing: content-box;
+    border: 1px solid #007db5;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    background-color: #fff;
+    cursor: pointer;
+}
+.kg-audio-player-container input[type="range"]:active::-moz-range-thumb {
+    transform: scale(1.2);
+    background: #007db5;
+}
+
+.kg-audio-player-container input[type="range"]::-ms-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    background: transparent;
+    border: solid transparent;
+    color: transparent;
+}
+.kg-audio-player-container input[type="range"]::-ms-fill-lower {
+    background-color: #007db5;
+}
+.kg-audio-player-container input[type="range"]::-ms-fill-upper {
+    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
+}
+.kg-audio-player-container input[type="range"]::-ms-thumb {
+    box-sizing: content-box;
+    border: 1px solid #007db5;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    background-color: #fff;
+    cursor: pointer;
+}
+.kg-audio-player-container input[type="range"]:active::-ms-thumb {
+    transform: scale(1.2);
+    background: #007db5;
+}

package/core/frontend/src/cards/css/blockquote.css

@@ -0,0 +1,27 @@
+blockquote.kg-blockquote-alt {
+  background: none;
+  font-size: 1.6em;
+  line-height: 1.7em;
+  text-align: center;
+  padding: 0.5em 2.5em 0.75em;
+}
+
+blockquote.kg-blockquote-alt::before {
+  display: none;
+}
+
+@media (max-width: 800px) {
+  blockquote.kg-blockquote-alt {
+    font-size: 1.4em;
+    padding-left: 2em;
+    padding-right: 2em;
+  }
+}
+
+@media (max-width: 600px) {
+  blockquote.kg-blockquote-alt {
+    font-size: 1.2em;
+    padding-left: 1.75em;
+    padding-right: 1.75em;
+  } 
+}

package/core/frontend/src/cards/css/bookmark.css

@@ -21,6 +21,7 @@
     align-items: flex-start;
     justify-content: flex-start;
     padding: 20px;
+    overflow: hidden;
 }
 
 .kg-bookmark-title {
@@ -49,6 +50,7 @@
     width: 100%;
     font-size: 1.4rem;
     font-weight: 500;
+    white-space: nowrap;
 }
 
 .kg-bookmark-metadata > *:not(img) {
@@ -84,6 +86,11 @@
     margin: 0 6px;
 }
 
+.kg-bookmark-metadata > span:last-of-type {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .kg-bookmark-thumbnail {
     position: relative;
     flex-grow: 1;

package/core/frontend/src/cards/css/button.css

@@ -6,6 +6,10 @@
     justify-content: center;
 }
 
+.kg-button-card.kg-align-left {
+    justify-content: flex-start;
+}
+
 a.kg-btn {
     display: flex;
     position: static;

package/core/frontend/src/cards/css/callout.css

@@ -1,50 +1,58 @@
-.kg-card-callout {
+.kg-callout-card {
     display: flex;
-    align-items: center;
-    padding: 20px 28px;
+    padding: 1.2em 1.6em;
     border-radius: 3px;
 }
 
-.kg-card-callout-grey {
+.kg-callout-card-grey {
     background: rgba(124, 139, 154, 0.13);
 }
 
-.kg-card-callout-white {
+.kg-callout-card-white {
     background: transparent;
     box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
 }
 
-.kg-card-callout-blue {
+.kg-callout-card-blue {
     background: rgba(33, 172, 232, 0.12);
 }
 
-.kg-card-callout-green {
+.kg-callout-card-green {
     background: rgba(52, 183, 67, 0.12);
 }
 
-.kg-card-callout-yellow {
+.kg-callout-card-yellow {
     background: rgba(240, 165, 15, 0.13);
 }
 
-.kg-card-callout-red {
+.kg-callout-card-red {
     background: rgba(209, 46, 46, 0.11);
 }
 
-.kg-card-callout-pink {
+.kg-callout-card-pink {
     background: rgba(225, 71, 174, 0.11);
 }
 
-.kg-card-callout-purple {
+.kg-callout-card-purple {
     background: rgba(135, 85, 236, 0.12);
 }
 
-.kg-card-callout-accent {
+.kg-callout-card-accent {
     background: var(--ghost-accent-color);
     color: #fff;
 }
 
+.kg-callout-card-accent a {
+    color: #fff;
+}
+
 .kg-callout-emoji {
-    padding-right: 12px;
-    line-height: 1.6;
-    font-size: 2rem;
+    padding-right: .8em;
+    line-height: 1.3em;
+    font-size: 1.2em;
 }
+
+.kg-callout-text {
+    font-size: .95em;
+    line-height: 1.5em;
+}

package/core/frontend/src/cards/css/gallery.css

@@ -1,8 +1,12 @@
+.kg-gallery-card {
+    --gap: 1.2rem;
+}
+
 .kg-image-card:not(.kg-card-hascaption) + .kg-image-card,
 .kg-image-card:not(.kg-card-hascaption) + .kg-gallery-card,
 .kg-gallery-card:not(.kg-card-hascaption) + .kg-image-card,
 .kg-gallery-card:not(.kg-card-hascaption) + .kg-gallery-card {
-    margin-top: 1.2rem;
+    margin-top: var(--gap);
 }
 
 .kg-gallery-container {
@@ -23,9 +27,15 @@
 }
 
 .kg-gallery-row:not(:first-of-type) {
-    margin: 1.2rem 0 0;
+    margin: var(--gap) 0 0;
 }
 
 .kg-gallery-image:not(:first-of-type) {
-    margin: 0 0 0 1.2rem;
+    margin: 0 0 0 var(--gap);
 }
+
+@media (max-width: 600px) {
+    .kg-gallery-card {
+        --gap: 0.6rem;
+    }
+}

package/core/frontend/src/cards/css/toggle.css

@@ -1,8 +1,30 @@
+.kg-toggle-card+.kg-toggle-card {
+    margin-top: 1em;
+}
+
 .kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content{
-    visibility: hidden;
-    opacity: 0;
+    height: auto;
+    opacity: 1;
+    transition: opacity 1s ease, top .35s ease;
+    top: 0;
+    position: relative;
+}
+
+.kg-toggle-content {
     height: 0;
-    padding: 0;
+    overflow: hidden;
+    transition: opacity .5s ease, top .35s ease;
+    opacity: 0;
+    top: -0.5em;
+    position: relative;
+}
+
+.kg-toggle-content p:first-of-type {
+    margin-top: 0.5em;
+}
+
+.kg-toggle-content p {
+    font-size: 0.95em;
 }
 
 .kg-toggle-card[data-kg-toggle-state="close"] svg {
@@ -10,14 +32,13 @@
 }
 
 .kg-toggle-card {
-    border: 1px solid rgba(127, 127, 127, 0.15);
+    background: transparent;
+    box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
     border-radius: 4px;
-    padding: 20px;
+    padding: 1.2em;
 }
 
 .kg-toggle-heading {
-    font-size: 2rem;
-    font-weight: 600;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
@@ -30,18 +51,30 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-left: 16px;
+    margin-left: 1em;
+    background: none;
+    border: 0;
 }
 
 .kg-toggle-heading svg {
     width: 14px;
-    color: rgba(127, 127, 127, 0.4);
-    transition: transform 0.3s;
-    transform: rotate(180deg);
+    color: rgba(124, 139, 154, 0.5);
+    transition: all 0.3s;
+    transform: rotate(-180deg);
 }
 
-.kg-toggle-content {
-    display: flex;
-    transition: opacity 0.3s;
-    padding-top: 8px;
+.kg-toggle-heading path {
+    fill: none;
+    stroke: currentcolor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 1.5;
+    fill-rule: evenodd;
 }
+
+.kg-toggle-heading-text {
+    margin-top: 0;
+    margin-bottom: 0;
+    line-height: 1.3em;
+    font-size: 1.1em;
+}

package/core/frontend/src/cards/js/audio.js

@@ -0,0 +1,137 @@
+const handleAudioPlayer = function (audioElementContainer) {
+    const audioPlayerContainer = audioElementContainer.querySelector('.kg-audio-player-container');
+    const playIconContainer = audioElementContainer.querySelector('.kg-audio-play-icon');
+    const seekSlider = audioElementContainer.querySelector('.kg-audio-seek-slider');
+    const volumeSlider = audioElementContainer.querySelector('.kg-audio-volume-slider');
+    const muteIconContainer = audioElementContainer.querySelector('.kg-audio-mute-icon');
+    const playbackRateContainer = audioElementContainer.querySelector('.kg-audio-playback-rate');
+    const audio = audioElementContainer.querySelector('audio');
+    const durationContainer = audioElementContainer.querySelector('.kg-audio-duration');
+    const currentTimeContainer = audioElementContainer.querySelector('.kg-audio-current-time');
+    const outputContainer = audioElementContainer.querySelector('.kg-audio-volume-output');
+    let playState = 'play';
+    let muteState = 'unmute';
+    let playbackRate = 1.0;
+    let raf = null;
+
+    audio.src = audioElementContainer.getAttribute('data-kg-audio-src');
+
+    const whilePlaying = () => {
+        seekSlider.value = Math.floor(audio.currentTime);
+        currentTimeContainer.textContent = calculateTime(seekSlider.value);
+        audioPlayerContainer.style.setProperty('--seek-before-width', `${seekSlider.value / seekSlider.max * 100}%`);
+        raf = requestAnimationFrame(whilePlaying);
+    }
+
+    const showRangeProgress = (rangeInput) => {
+        if (rangeInput === seekSlider) {
+            audioPlayerContainer.style.setProperty('--seek-before-width', rangeInput.value / rangeInput.max * 100 + '%');
+        }
+        else {
+            audioPlayerContainer.style.setProperty('--volume-before-width', rangeInput.value / rangeInput.max * 100 + '%');
+        }
+    }
+
+    const calculateTime = (secs) => {
+        const minutes = Math.floor(secs / 60);
+        const seconds = Math.floor(secs % 60);
+        const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
+        return `${minutes}:${returnedSeconds}`;
+    }
+
+    const displayDuration = () => {
+        durationContainer.textContent = calculateTime(audio.duration);
+    }
+
+    const setSliderMax = () => {
+        seekSlider.max = Math.floor(audio.duration);
+    }
+
+    const displayBufferedAmount = () => {
+        if (audio.buffered.length > 0) {
+            const bufferedAmount = Math.floor(audio.buffered.end(audio.buffered.length - 1));
+            audioPlayerContainer.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`);
+        }
+    }
+
+    if (audio.readyState > 0) {
+        displayDuration();
+        setSliderMax();
+        displayBufferedAmount();
+    } else {
+        audio.addEventListener('loadedmetadata', () => {
+            displayDuration();
+            setSliderMax();
+            displayBufferedAmount();
+        });
+    }
+
+    playIconContainer.addEventListener('click', () => {
+        if (playState === 'play') {
+            audio.play();
+            requestAnimationFrame(whilePlaying);
+            playState = 'pause';
+            playIconContainer.textContent = '||';
+        } else {
+            audio.pause();
+            cancelAnimationFrame(raf);
+            playState = 'play';
+            playIconContainer.textContent = '>';
+        }
+    });
+
+    muteIconContainer.addEventListener('click', () => {
+        if (muteState === 'unmute') {
+            audio.muted = true;
+            muteState = 'mute';
+            muteIconContainer.textContent = 'UM';
+        } else {
+            audio.muted = false;
+            muteState = 'unmute';
+            muteIconContainer.textContent = 'M';
+        }
+    });
+
+    playbackRateContainer.addEventListener('click', () => {
+        if (playbackRate === 1.0) {
+            audio.playbackRate = 2;
+            playbackRate = 2;
+            playbackRateContainer.textContent = '2x';
+        } else {
+            audio.playbackRate = 1.0;
+            playbackRate = 1.0;
+            playbackRateContainer.textContent = '1x';
+        }
+    });
+
+    audio.addEventListener('progress', displayBufferedAmount);
+
+    seekSlider.addEventListener('input', (e) => {
+        showRangeProgress(e.target);
+        currentTimeContainer.textContent = calculateTime(seekSlider.value);
+        if (!audio.paused) {
+            cancelAnimationFrame(raf);
+        }
+    });
+
+    seekSlider.addEventListener('change', () => {
+        audio.currentTime = seekSlider.value;
+        if (!audio.paused) {
+            requestAnimationFrame(whilePlaying);
+        }
+    });
+
+    volumeSlider.addEventListener('input', (e) => {
+        const value = e.target.value;
+        showRangeProgress(e.target);
+        outputContainer.textContent = value;
+        audio.volume = value / 100;
+    });
+}
+
+const audioCardElements = document.querySelectorAll('.kg-audio-card');
+
+for (let i = 0; i < audioCardElements.length; i++) {
+    handleAudioPlayer(audioCardElements[i]);
+}
+

package/core/frontend/web/middleware/error-handler.js

@@ -0,0 +1,93 @@
+const hbs = require('express-hbs');
+const _ = require('lodash');
+const tpl = require('@tryghost/tpl');
+const sentry = require('../../../shared/sentry');
+
+const config = require('../../../shared/config');
+const helpers = require('../../services/routing/helpers');
+
+// @TODO: make this properly shared code
+const shared = require('../../../server/web/shared/middleware/error-handler');
+
+const messages = {
+    oopsErrorTemplateHasError: 'Oops, seems there is an error in the error template.',
+    encounteredError: 'Encountered the error: ',
+    whilstTryingToRender: 'whilst trying to render an error page for the error: '
+};
+
+const escapeExpression = hbs.Utils.escapeExpression;
+
+/**
+ * This is a bare minimum setup, which allows us to render the error page
+ * It uses the {{asset}} helper, and nothing more
+ */
+const createHbsEngine = () => {
+    const engine = hbs.create();
+    engine.registerHelper('asset', require('../../helpers/asset'));
+
+    return engine.express4();
+};
+
+const errorFallbackMessage = err => `<h1>${tpl(messages.oopsErrorTemplateHasError)}</h1>
+     <p>${tpl(messages.encounteredError)}</p>
+     <pre>${escapeExpression(err.message || err)}</pre>
+     <br ><p>${tpl(messages.whilstTryingToRender)}</p>
+     ${err.statusCode} <pre>${escapeExpression(err.message || err)}</pre>`;
+
+const themeErrorRenderer = (err, req, res, next) => {
+    // If the error code is explicitly set to STATIC_FILE_NOT_FOUND,
+    // Skip trying to render an HTML error, and move on to the basic error renderer
+    // We do this because customised 404 templates could reference the image that's missing
+    // A better long term solution might be to do this based on extension
+    if (err.code === 'STATIC_FILE_NOT_FOUND') {
+        return next(err);
+    }
+
+    // Renderer begin
+    // Format Data
+    const data = {
+        message: err.message,
+        // @deprecated Remove in Ghost 5.0
+        code: err.statusCode,
+        statusCode: err.statusCode,
+        errorDetails: err.errorDetails || []
+    };
+
+    // Template
+    // @TODO: very dirty !!!!!!
+    helpers.templates.setTemplate(req, res);
+
+    // It can be that something went wrong with the theme or otherwise loading handlebars
+    // This ensures that no matter what res.render will work here
+    // @TODO: split the error handler for assets, admin & theme to refactor this away
+    if (_.isEmpty(req.app.engines)) {
+        res._template = 'error';
+        req.app.engine('hbs', createHbsEngine());
+        req.app.set('view engine', 'hbs');
+        req.app.set('views', config.get('paths').defaultViews);
+    }
+
+    // @TODO use renderer here?!
+    // Render Call - featuring an error handler for what happens if rendering fails
+    res.render(res._template, data, (_err, html) => {
+        if (!_err) {
+            return res.send(html);
+        }
+
+        // re-attach new error e.g. error template has syntax error or misusage
+        req.err = _err;
+
+        // And then try to explain things to the user...
+        // Cheat and output the error using handlebars escapeExpression
+        return res.status(500).send(errorFallbackMessage(_err));
+    });
+};
+
+module.exports.handleThemeResponse = [
+    // Make sure the error can be served
+    shared.prepareError,
+    // Handle the error in Sentry
+    sentry.errorHandler,
+    // Render the error using theme template
+    themeErrorRenderer
+];