✨ Added new theme directory links to Ghost Admin (#1078)

* Add new theme directory links to Ghost Admin

* Dark mode fixes

ghost/admin/app/styles/app-dark.css

@@ -339,3 +339,10 @@ input,
 .subscribers-table table .gh-btn svg {
     fill: var(--darkgrey);
 }
+
+.id-mailchimp img,
+.id-typeform img,
+.id-buffer img,
+.id-more img {
+    filter: invert(100%);
+}

ghost/admin/app/styles/layouts/apps.css

@@ -34,7 +34,6 @@
     text-decoration: none;
     color: var(--darkgrey);
     border: var(--lightgrey) 1px solid;
-    background: #fff;
     border-radius: 6px;
     transition: all .8s ease;
 }

ghost/admin/app/styles/layouts/settings.css

@@ -131,6 +131,212 @@
     margin-top: 25px;
 }
 
+/* Theme Directory
+/* ---------------------------------------------------------- */
+
+.gh-theme-directory-container {
+    border-top: var(--lightgrey) 1px solid;
+    padding: 25px 0 0;
+}
+
+.theme-directory {
+    display: grid;
+    justify-content: space-between;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    grid-gap: 25px;
+    max-width: 1200px;
+    margin: 0 0 4vw;
+}
+
+.td-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    text-align: center;
+    text-decoration: none;
+    color: var(--darkgrey);
+    transition: all .8s ease;
+}
+
+.td-item:nth-child(6) {
+    display: none;
+}
+
+.td-item img {
+    box-shadow: 0 0 1px rgba(0,0,0,.02), 0 8px 26px -5px rgba(0,0,0,.2);
+    transition: all .8s ease;
+}
+
+.td-item:hover {
+    transform: translateY(-1.5%);
+    transition: all .3s ease;
+}
+
+.td-item:hover img {
+    box-shadow: 0 0 1px rgba(0,0,0,.02), 0 10px 40px -5px rgba(0,0,0,.15);
+    transition: all .3s ease;
+}
+
+.td-item-desc {
+    display: flex;
+    width: 100%;
+    margin-top: 10px;
+    text-transform: uppercase;
+    font-weight: 700;
+}
+
+.td-item-desc span {
+    display: inline-flex;
+    align-items: center;
+    text-transform: none;
+    font-weight: 300;
+    font-size: 0.9em;
+    color: color-mod(var(--midgrey) l(-5%));
+}
+
+.td-cta {
+    display: grid;
+    justify-content: space-between;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 25px;
+    margin: 2vw 0 4vw;
+}
+
+.td-cta-box {
+    display: flex;
+    width: 100%;
+    padding: 14px;
+    text-decoration: none;
+    color: var(--darkgrey);
+    border: var(--lightgrey) 1px solid;
+    border-radius: 6px;
+    transition: all .8s ease;
+}
+
+.td-cta-box:hover {
+    transform: translateY(-2%);
+    box-shadow: 0 0 1px rgba(0,0,0,.02), 0 8px 26px -4px rgba(0,0,0,.08);
+    transition: all .3s ease;
+}
+
+.td-cta-icon {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 60px;
+    width: 60px;
+    background: var(--midgrey);
+    border-radius: 6px;
+}
+
+.td-cta-icon svg {
+    height: 28px;
+    width: 28px;
+    fill: #fff;
+}
+
+.td-cta-marketplace .td-cta-icon {
+    background: var(--purple);
+}
+
+.td-cta-marketplace .td-cta-icon svg path {
+    stroke: #fff;
+}
+
+.td-cta-docs .td-cta-icon {
+    background: var(--blue);
+}
+
+.td-cta-content-wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.td-cta-content {
+    display: flex;
+    flex-direction: column;
+    margin: 0 0 0 14px;
+}
+
+.td-cta-content p {
+    margin: 0;
+    color: color-mod(var(--midgrey) l(-5%));
+    line-height: 1.3em;
+}
+
+.td-cta-arrow {
+    flex-shrink: 0;
+    align-self: center;
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+.td-cta-arrow svg {
+    margin-left: 20px;
+    height: 20px;
+    opacity: 0.5;
+}
+
+.td-cta-arrow svg path {
+    fill: var(--midgrey);
+}
+
+@media (max-width: 1400px) {
+    .theme-directory {
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+    .td-item:nth-child(5),
+    .td-item:nth-child(6) {
+        display: none;
+    }
+}
+
+@media (max-width: 1200px) {
+    .td-cta {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 1100px) {
+    .theme-directory {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+    .td-item:nth-child(4) {
+        display: none;
+    }
+}
+
+@media (max-width: 1000px) {
+    .theme-directory {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+    .td-item:nth-child(4),
+    .td-item:nth-child(5),
+    .td-item:nth-child(6) {
+        display: flex;
+    }
+}
+
+@media (max-width: 600px) {
+    .theme-directory {
+        grid-template-columns: 1fr 1fr;
+        margin-bottom: 25px;
+    }
+    .td-item:nth-child(5),
+    .td-item:nth-child(6) {
+        display: none;
+    }
+    .td-cta {
+        margin: 50px 0;
+    }
+}
+
 
 /* Navigation
 /* ---------------------------------------------------------- */

ghost/admin/app/templates/settings/design.hbs

@@ -14,6 +14,7 @@
     {{/if}}
 
     <section class="view-container">
+
         <div class="gh-setting-header">Navigation</div>
         <div class="gh-blognav-container">
             <form id="settings-navigation" class="gh-blognav" novalidate="novalidate">
@@ -28,8 +29,90 @@
             </form>
         </div>
 
-        <div class="gh-setting-header">Themes</div>
+        <div class="gh-setting-header">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">
+                        <img style="object-fit:contain;" src="assets/img/themes/massively.jpg" alt="Massively Theme" />
+                    </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>
+                <a class="td-item" href="https://themeforest.net/item/valkyrie-a-highly-visual-ghost-blog/22576630" target="_blank" rel="noopener noreferrer">
+                    <div class="td-item-screenshot">
+                        <img style="object-fit:contain;" src="assets/img/themes/valkyrie.jpg" alt="Valkyrie Theme" />
+                    </div>
+                    <div class="td-item-desc">
+                        <div>Valkyrie <span>— Premium</span></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 class="td-cta">
+                <a class="td-cta-box td-cta-marketplace" href="https://marketplace.ghost.org" target="_blank" rel="noopener">
+                    <div class="td-cta-icon">{{svg-jar "store"}}</div>
+                    <div class="td-cta-content-wrapper">
+                        <div class="td-cta-content">
+                            <h4>Theme Marketplace</h4>
+                            <p>Explore a huge range of free and premium themes for Ghost with a range of design and layout options</p>
+                        </div>
+                        <div class="td-cta-arrow">
+                            {{svg-jar "arrow-right"}}
+                        </div>
+                    </div>
+                </a>
+                <a class="td-cta-box td-cta-docs" href="https://marketplace.ghost.org" target="_blank" rel="noopener">
+                    <div class="td-cta-icon">{{svg-jar "book-open"}}</div>
+                    <div class="td-cta-content-wrapper">
+                        <div class="td-cta-content">
+                            <h4>Developer Docs</h4>
+                            <p>Build your own custom Ghost theme from scratch using our comprehensive Handlebars.js SDK</p>
+                        </div>
+                        <div class="td-cta-arrow">
+                            {{svg-jar "arrow-right"}}
+                        </div>
+                    </div>
+                </a>
+            </div>
+        </div>
+
+        <div class="gh-setting-header">Installed Themes</div>
         <div class="gh-themes-container">
+
             {{gh-theme-table
                 themes=themes
                 activateTheme=(action "activateTheme")

ghost/admin/app/templates/settings/integrations.hbs

@@ -5,49 +5,49 @@
 
     <div class="integrations-directory">
         <a class="id-item" href="https://docs.ghost.org/integrations/disqus/" target="_blank" rel="noopener noreferrer">
-            <div class="id-item-logo">
+            <div class="id-item-logo id-disqus">
                 <img class="w-100 h-100" style="object-fit:contain;" src="assets/img/disqus.svg" alt="Disqus Icon" />
             </div>
             <div class="f8 mt1">Disqus</div>
         </a>
         <a class="id-item" href="https://docs.ghost.org/integrations/google-analytics/" target="_blank" rel="noopener noreferrer">
-            <div class="id-item-logo">
+            <div class="id-item-logo id-analytics">
                 <img class="w-100 h-100" style="object-fit:contain;padding:1px 0;" src="assets/img/google-analytics.png" alt="Google Analytics Icon" />
             </div>
             <div class="f8 mt1">Analytics</div>
         </a>
         <a class="id-item" href="https://docs.ghost.org/integrations/mailchimp/" target="_blank" rel="noopener noreferrer">
-            <div class="id-item-logo">
+            <div class="id-item-logo id-mailchimp">
-                <img class="w-100 h-100" style="object-fit:contain;" src="assets/img/mailchimp.png" alt="Mailchimp Icon" />
+                <img class="w-100 h-100" style="object-fit:contain;" src="assets/img/mailchimp.svg" alt="Mailchimp Icon" />
             </div>
             <div class="f8 mt1">Mailchimp</div>
         </a>
         <a class="id-item" href="https://docs.ghost.org/integrations/typeform/" target="_blank" rel="noopener noreferrer">
-            <div class="id-item-logo">
+            <div class="id-item-logo id-typeform">
                 <img class="w-100 h-100" style="object-fit:contain;" src="assets/img/typeform.svg" alt="Typeform Icon" />
             </div>
             <div class="f8 mt1">Typeform</div>
         </a>
         <a class="id-item" href="https://docs.ghost.org/integrations/youtube/" target="_blank" rel="noopener noreferrer">
-            <div class="id-item-logo">
+            <div class="id-item-logo id-youtube">
                 <img class="w-100 h-100" style="object-fit:contain;" src="assets/img/youtube.png" alt="YouTube Icon" />
             </div>
             <div class="f8 mt1">YouTube</div>
         </a>
         <a class="id-item" href="https://docs.ghost.org/integrations/buffer/" target="_blank" rel="noopener noreferrer">
-            <div class="id-item-logo">
+            <div class="id-item-logo id-buffer">
                 <img class="w-100 h-100" style="object-fit:contain;padding:1px 0;" src="assets/img/buffer.png" alt="Buffer Icon" />
             </div>
             <div class="f8 mt1">Buffer</div>
         </a>
         <a class="id-item" href="https://docs.ghost.org/integrations/revue/" target="_blank" rel="noopener noreferrer">
-            <div class="id-item-logo">
+            <div class="id-item-logo id-revue">
                 <img class="w-100 h-100" style="object-fit:contain;padding:1px 0;" src="assets/img/revue.svg" alt="Revue Icon" />
             </div>
             <div class="f8 mt1">Revue</div>
         </a>
         <a class="id-item" href="https://docs.ghost.org/integrations/" target="_blank" rel="noopener noreferrer">
-            <div class="id-item-logo">
+            <div class="id-item-logo id-more">
                 <img class="w-100 h-100" style="object-fit:contain;padding:0 8px;" src="assets/img/more.png" alt="Three dots" />
             </div>
             <div class="f8 mt1">More</div>

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

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none" d="M21.502 10.333v12.167h-19v-12.187"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none" d="M4.502 13.5h8v6h-8zM14.502 13.5h5v9h-5zM21.502 2.5h-19l-2 4h23zM23.502 7.5c0 1.657-1.343 3-3 3-.826 0-1.457-.46-2-1-.708 1.125-2.073 2-3.5 2-1.196 0-2.267-.528-3-1.36-.732.833-1.804 1.36-3 1.36-1.427 0-2.792-.875-3.5-2-.542.54-1.174 1-2 1-1.657 0-3-1.343-3-3v-1h23v1zM5.502 9.5v-3l1-4M12.002 10.146v-7.646M18.502 9.5v-3l-1-4"/><path d="M17.502 18c-.276 0-.5.224-.5.5 0 .277.224.5.5.5s.5-.223.5-.5c0-.276-.224-.5-.5-.5z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none" d="M21.502 10.333v12.167h-19v-12.187"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none" d="M4.502 13.5h8v6h-8zM14.502 13.5h5v9h-5zM21.502 2.5h-19l-2 4h23zM23.502 7.5c0 1.657-1.343 3-3 3-.826 0-1.457-.46-2-1-.708 1.125-2.073 2-3.5 2-1.196 0-2.267-.528-3-1.36-.732.833-1.804 1.36-3 1.36-1.427 0-2.792-.875-3.5-2-.542.54-1.174 1-2 1-1.657 0-3-1.343-3-3v-1h23v1zM5.502 9.5v-3l1-4M12.002 10.146v-7.646M18.502 9.5v-3l-1-4"/><path d="M17.502 18c-.276 0-.5.224-.5.5 0 .277.224.5.5.5s.5-.223.5-.5c0-.276-.224-.5-.5-.5z"/></g></svg>