✨ Minimal client extensions (#759)

no issue

- Add minimal extensibility to Ghost Admin

- Adds 3 sections of semi-flexible customisation to Ghost Admin
- Options:
   - Menu: a list of links with icons and text and hrefs, also has a title
   - Dropdown: another list of links
   - Script: a custom container and a script file

- All of this can be provided via the blog config
- Also adds 2 extra icons for use with these menus

- 🎨 Improve extensibility

ghost/admin/app/components/gh-nav-menu.js

@@ -1,5 +1,6 @@
 import Component from 'ember-component';
 import calculatePosition from 'ember-basic-dropdown/utils/calculate-position';
+import computed from 'ember-computed';
 import injectService from 'ember-service/inject';
 import {htmlSafe} from 'ember-string';
 
@@ -29,6 +30,18 @@ export default Component.extend({
         this.sendAction('onMouseEnter');
     },
 
+    showMenuExtension: computed('config.clientExtensions.menu', 'session.user.isOwner', function() {
+        return this.get('config.clientExtensions.menu') && this.get('session.user.isOwner');
+    }),
+
+    showDropdownExtension: computed('config.clientExtensions.dropdown', 'session.user.isOwner', function() {
+        return this.get('config.clientExtensions.dropdown') && this.get('session.user.isOwner');
+    }),
+
+    showScriptExtension: computed('config.clientExtensions.script', 'session.user.isOwner', function() {
+        return this.get('config.clientExtensions.script') && this.get('session.user.isOwner');
+    }),
+
     // equivalent to "left: auto; right: -20px"
     userDropdownPosition(trigger, dropdown) {
         let {horizontalPosition, verticalPosition, style} = calculatePosition(...arguments);

ghost/admin/app/templates/components/gh-nav-menu.hbs

@@ -19,6 +19,21 @@
             <li role="presentation"><a class="dropdown-item help-menu-how-to" role="menuitem" tabindex="-1" href="https://ghosthelp.zendesk.com/hc/en-us/categories/203268947-Ghost-Pro-" target="_blank">{{inline-svg "book-open"}} How to Use Ghost</a></li>
             <li role="presentation"><a class="dropdown-item help-menu-wishlist" role="menuitem" tabindex="-1" href="http://ideas.ghost.org/" target="_blank">{{inline-svg "idea"}} Wishlist</a></li>
             <li class="divider"></li>
+
+            {{#if showDropdownExtension}}
+                {{#each config.clientExtensions.dropdown.items as |menuItem| }}
+                    {{#if menuItem.divider}}
+                        <li class="divider"></li>
+                    {{else}}
+                        <li role="presentation">
+                          <a href="{{menuItem.href}}" target="_blank"
+                             class="dropdown-item js-nav-item {{menuItem.classes}}"
+                             role="menuitem" tabindex="-1">{{inline-svg menuItem.icon}}{{menuItem.text}}</a>
+                        </li>
+                    {{/if}}
+                {{/each}}
+
+            {{/if}}
             <li role="presentation">{{#link-to "signout" classNames="dropdown-item user-menu-signout" role="menuitem" tabindex="-1"}}{{inline-svg "signout"}} Sign Out{{/link-to}}</li>
         </ul>
     {{/dropdown.content}}
@@ -55,6 +70,23 @@
             <li>{{#link-to "settings.labs" classNames="gh-nav-settings-labs"}}{{inline-svg "wrench-double"}}Labs{{/link-to}}</li>
         </ul>
     {{/if}}
+
+    {{#if showMenuExtension}}
+        <ul class="gh-nav-list gh-nav-settings">
+            {{#if config.clientExtensions.menu.title}}<li class="gh-nav-list-h">{{config.clientExtensions.menu.title}}</li>{{/if}}
+            {{#each config.clientExtensions.menu.items as |menuItem| }}
+                <li>
+                    <a href="{{menuItem.href}}" target="_blank">{{inline-svg menuItem.icon}}{{menuItem.text}}</a>
+                </li>
+            {{/each}}
+        </ul>
+    {{/if}}
+
+    {{#if showScriptExtension}}
+        {{{config.clientExtensions.script.container}}}
+        <script src="{{config.clientExtensions.script.src}}"></script>
+    {{/if}}
+
 </section>
 <footer class="gh-nav-foot">
     <a class="gh-nav-foot-sitelink" href="{{config.blogUrl}}/" target="_blank">View site {{inline-svg "external"}}</a>

ghost/admin/public/assets/icons/folder.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <title>folder</title>
+    <path d="M31.313 8h-3.313v-2c0-0.375-0.313-0.688-0.688-0.688h-16.625v-2c0-0.375-0.313-0.625-0.688-0.625h-9.313c-0.375 0-0.688 0.25-0.688 0.625v22c0 2.25 1.813 4 4 4h23.313c2.625 0 4.688-2.063 4.688-4.625v-16c0-0.375-0.313-0.688-0.688-0.688zM6.688 8.688v16.625c0 1.5-1.188 2.688-2.688 2.688s-2.688-1.188-2.688-2.688v-21.313h8v2c0 0.375 0.313 0.688 0.688 0.688h16.688v1.313h-19.375c-0.375 0-0.625 0.313-0.625 0.688zM30.688 24.688c0 1.813-1.5 3.313-3.375 3.313h-20.313c0.625-0.688 1-1.625 1-2.688v-16h22.688z"></path>
+</svg>

ghost/admin/public/assets/icons/hotspot.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <title>hotspot</title>
+    <path d="M27.313 2.688c-0.25-0.25-0.688-0.25-0.938 0s-0.25 0.688 0 0.938c2.75 2.75 4.313 6.438 4.313 10.375s-1.563 7.625-4.313 10.375c-0.25 0.25-0.25 0.688 0 0.938 0.125 0.125 0.313 0.188 0.438 0.188 0.188 0 0.375-0.063 0.5-0.188 3-3 4.688-7.063 4.688-11.313s-1.688-8.313-4.688-11.313zM23.563 6.438c-0.25-0.25-0.688-0.25-0.938 0-0.313 0.313-0.313 0.688 0 0.938 1.75 1.813 2.688 4.125 2.688 6.625s-0.938 4.813-2.688 6.625c-0.313 0.25-0.313 0.688 0 0.938 0.125 0.125 0.25 0.188 0.438 0.188s0.375-0.063 0.5-0.188c2-2.063 3.125-4.688 3.125-7.563s-1.125-5.5-3.125-7.563zM1.313 14c0-3.938 1.563-7.625 4.313-10.375 0.25-0.25 0.25-0.688 0-0.938s-0.688-0.25-0.938 0c-3 3-4.688 7.063-4.688 11.313s1.688 8.313 4.688 11.313c0.125 0.125 0.313 0.188 0.5 0.188 0.125 0 0.313-0.063 0.438-0.188 0.25-0.25 0.25-0.688 0-0.938-2.75-2.75-4.313-6.438-4.313-10.375zM6.688 14c0-2.5 0.938-4.813 2.688-6.625 0.313-0.25 0.313-0.688 0-0.938-0.25-0.25-0.688-0.25-0.938 0-2 2.063-3.125 4.688-3.125 7.563s1.125 5.5 3.125 7.563c0.125 0.125 0.313 0.188 0.5 0.188s0.313-0.063 0.438-0.188c0.313-0.25 0.313-0.688 0-0.938-1.75-1.813-2.688-4.125-2.688-6.625zM16 9.313c-2.563 0-4.688 2.125-4.688 4.688 0 2.375 1.75 4.313 4 4.625v10.688c0 0.375 0.313 0.688 0.688 0.688s0.688-0.313 0.688-0.688v-10.688c2.25-0.313 4-2.25 4-4.625 0-2.563-2.125-4.688-4.688-4.688zM16 17.313c-1.813 0-3.313-1.5-3.313-3.313s1.5-3.313 3.313-3.313c1.813 0 3.313 1.5 3.313 3.313s-1.5 3.313-3.313 3.313z"></path>
+</svg>