Updated marketplace themes (#1852)

refs https://github.com/TryGhost/Team/issues/480

- switched marketplace themes to a selection of Ghost's own free themes
- added install and preview buttons for all
- show theme screenshot in the install modal if it's a known theme

app/components/modal-delete-theme.hbs

@@ -4,7 +4,7 @@
 <a class="close" href="" role="button" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
 
 <div class="modal-body">
-    <p>You're about to delete "<strong>{{this.theme.label}}</strong>". This is permanent! We warned you, k? Maybe <a href="#" {{action this.download}}>Download your theme before continuing</a></p>
+    <p>You're about to delete "<strong>{{this.theme.label}}</strong>". This is permanent! We warned you, k? Maybe <a href="#" {{action this.download}}>download your theme before continuing</a></p>
 </div>
 
 <div class="modal-footer">

app/components/modal-install-theme.hbs

@@ -19,8 +19,7 @@
     <div class="modal-body">
         {{#if this.isReady}}
             <p>
-                Are you sure you want to install <strong>{{this.themeName}}</strong> from
-                <a href="https://github.com/{{this.model.ref}}" target="_blank" rel="noopener noreferrer">https://github.com/{{this.model.ref}}</a>?
+                You're about to install <strong>{{this.themeName}}</strong> from the theme directory.
             </p>
             {{#if this.willOverwriteExisting}}
                 <p>
@@ -28,6 +27,12 @@
                     Any custom changes will be lost.
                 </p>
             {{/if}}
+
+            {{#if this.marketplaceTheme.shortImage}}
+                <div class="theme-validation-screenshot relative">
+                    <img style="object-fit:contain;" src={{this.marketplaceTheme.shortImage}} alt="Edition Theme" />
+                </div>
+            {{/if}}
         {{/if}}
 
         {{#if this.willOverwriteDefault}}

app/components/modal-install-theme.js

@@ -6,6 +6,8 @@ import {inject as service} from '@ember/service';
 import {task} from 'ember-concurrency-decorators';
 import {tracked} from '@glimmer/tracking';
 
+import {MARKETPLACE_THEMES} from 'ghost-admin/controllers/settings/theme';
+
 // TODO: update modals to work fully with Glimmer components
 @classic
 export default class ModalInstallThemeComponent extends ModalBase {
@@ -24,6 +26,10 @@ export default class ModalInstallThemeComponent extends ModalBase {
         return this.model.ref.split('/')[1];
     }
 
+    get marketplaceTheme() {
+        return MARKETPLACE_THEMES.find(theme => theme.name.toLowerCase() === this.themeName.toLowerCase());
+    }
+
     get currentThemeNames() {
         return this.model.themes.mapBy('name');
     }

app/controllers/settings/theme.js

@@ -7,6 +7,40 @@ import {isThemeValidationError} from 'ghost-admin/services/ajax';
 import {notEmpty} from '@ember/object/computed';
 import {inject as service} from '@ember/service';
 
+export const MARKETPLACE_THEMES = [{
+    name: 'Edition',
+    category: 'Newsletter',
+    url: 'https://github.com/TryGhost/Edition',
+    previewUrl: 'https://edition.ghost.io',
+    ref: 'TryGhost/Edition',
+    image: 'assets/img/themes/Edition.jpg',
+    shortImage: 'assets/img/themes/Edition-cut.jpg'
+}, {
+    name: 'Alto',
+    category: 'Blog',
+    url: 'https://github.com/TryGhost/Alto',
+    previewUrl: 'https://alto.ghost.io',
+    ref: 'TryGhost/Alto',
+    image: 'assets/img/themes/Alto.jpg',
+    shortImage: 'assets/img/themes/Alto-cut.jpg'
+}, {
+    name: 'London',
+    category: 'Photography',
+    url: 'https://github.com/TryGhost/London',
+    previewUrl: 'https://london.ghost.io',
+    ref: 'TryGhost/London',
+    image: 'assets/img/themes/London.jpg',
+    shortImage: 'assets/img/themes/London-cut.jpg'
+}, {
+    name: 'Ease',
+    category: 'Documentation',
+    url: 'https://github.com/TryGhost/Ease',
+    previewUrl: 'https://edition.ghost.io',
+    ref: 'TryGhost/Ease',
+    image: 'assets/img/themes/Ease.jpg',
+    shortImage: 'assets/img/themes/Ease-cut.jpg'
+}];
+
 export default Controller.extend({
     config: service(),
     ghostPaths: service(),
@@ -22,6 +56,7 @@ export default Controller.extend({
 
     init() {
         this._super(...arguments);
+        this.marketplaceThemes = MARKETPLACE_THEMES;
     },
 
     showDeleteThemeModal: notEmpty('themeToDelete'),

app/styles/layouts/settings.css

@@ -390,7 +390,7 @@
 }
 
 .td-item img {
-    box-shadow: 0 0 1px rgba(0,0,0,.02), 0 9px 25px -12px rgba(0,0,0,0.5);
+    box-shadow: 0 0 1px rgba(0,0,0,.02), 0 9px 25px -10px rgba(0,0,0,0.2);
     transition: all .8s ease;
     border-radius: 3px;
 }
@@ -405,7 +405,7 @@
 }
 
 .td-item:hover img {
-    box-shadow: 0 0 1px rgba(0,0,0,.02), 0 19px 35px -18px rgba(0,0,0,.4);
+    box-shadow: 0 0 1px rgba(0,0,0,.02), 0 19px 35px -14px rgba(0,0,0,.2);
     transition: all .3s ease;
 }
 
@@ -420,9 +420,10 @@
 .td-item-desc span {
     display: inline-flex;
     align-items: center;
+    margin-left: 4px;
     text-transform: none;
     font-weight: 400;
-    font-size: 0.9em;
+    font-size: 1em;
     color: color-mod(var(--midgrey) l(-5%));
 }
 
@@ -1066,6 +1067,12 @@ p.theme-validation-details {
     font-size: 1.3rem;
 }
 
+.theme-validation-screenshot img {
+    margin-bottom: 2rem;
+    border: 1px solid var(--main-color-area-divider);
+    border-radius: 3px;
+}
+
 
 /* Publication identity
 /* ---------------------------------------------------------- */

app/templates/settings/theme.hbs

@@ -15,44 +15,24 @@
     {{/if}}
 
     <section class="view-container">
+        <div class="gh-setting-header gh-first-header">Ghost theme directory</div>
         <div class="gh-theme-directory-container">
             <div class="theme-directory">
-                <a class="td-item" href="https://github.com/TryGhost/Massively" target="_blank" rel="noopener noreferrer">
-                    <div class="td-item-screenshot relative">
-                        <img style="object-fit:contain;" src="assets/img/themes/massively.jpg" alt="Massively Theme" />
-                        <div class="td-item-overlay">
-                            <LinkTo class="td-item-action gh-btn gh-btn-black mb4" @route="settings.theme.install" @query={{hash source="github" ref="TryGhost/Massively"}}><span>Install</span></LinkTo>
-                            <a href="https://massively.ghost.io" class="td-item-action gh-btn" target="_blank" rel="noopener"><span>Preview</span></a>
+                {{#each this.marketplaceThemes as |theme|}}
+                    <a class="td-item" href={{theme.url}} target="_blank" rel="noopener noreferrer">
+                        <div class="td-item-screenshot relative">
+                            <img style="object-fit:contain;" src={{theme.image}} alt="{{theme.name}} Theme" />
+                            <div class="td-item-overlay">
+                                <LinkTo class="td-item-action gh-btn gh-btn-black mb4" @route="settings.theme.install" @query={{hash source="github" ref=theme.ref}}><span>Install</span></LinkTo>
+                                <a href={{theme.previewUrl}} class="td-item-action gh-btn" target="_blank" rel="noopener"><span>Preview</span></a>
+                            </div>
                         </div>
-                    </div>
-                    <div class="td-item-desc">
-                        <div>Massively <span>— Free</span></div>
-                    </div>
-                </a>
-                <a class="td-item" href="https://themeforest.net/item/nurui-multipurpose-ghost-blog-theme/22243886" target="_blank" rel="noopener noreferrer">
-                    <div class="td-item-screenshot">
-                        <img style="object-fit:contain;" src="assets/img/themes/nurui.jpg" alt="Nurui Theme" />
-                    </div>
-                    <div class="td-item-desc">
-                        <div>Nurui <span>— Premium</span></div>
-                    </div>
-                </a>
-                <a class="td-item" href="https://themeforest.net/item/pacific-big-bold-photographydriven-theme/19774541" target="_blank" rel="noopener noreferrer">
-                    <div class="td-item-screenshot">
-                        <img style="object-fit:contain;" src="assets/img/themes/pacific.jpg" alt="Pacific Theme" />
-                    </div>
-                    <div class="td-item-desc">
-                        <div>Pacific <span>— Premium</span></div>
-                    </div>
-                </a>
-                <a class="td-item" href="https://www.hauntedthemes.com/" target="_blank" rel="noopener noreferrer">
-                    <div class="td-item-screenshot">
-                        <img style="object-fit:contain;" src="assets/img/themes/farafra.jpg" alt="Farafra Theme" />
-                    </div>
-                    <div class="td-item-desc">
-                        <div>Farafra <span>— Premium</span></div>
-                    </div>
-                </a>
+                        <div class="td-item-desc">
+                            <div>{{theme.name}}</div>
+                            <span>• {{theme.category}}</span>
+                        </div>
+                    </a>
+                {{/each}}
                 <a class="td-item" href="https://ghost.org/marketplace/" target="_blank" rel="noopener noreferrer">
                     <div class="td-item-empty">
                         {{svg-jar "circle-ellipsis" class="w5"}}
@@ -60,14 +40,6 @@
                         <div class="midgrey f7">Explore more free and premium themes on our Marketplace</div>
                     </div>
                 </a>
-                <a class="td-item" href="https://themeforest.net/item/sente-magazine-ghost-blog-theme/21019644" target="_blank" rel="noopener noreferrer">
-                    <div class="td-item-screenshot">
-                        <img style="object-fit:contain;" src="assets/img/themes/sente.jpg" alt="Sente Theme" />
-                    </div>
-                    <div class="td-item-desc">
-                        <div>Sente <span>— Premium</span></div>
-                    </div>
-                </a>
             </div>
         </div>