mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-01 13:54:35 +03:00
c4a8a1cbaa
no issue Updated custom integrations section for a more balanced and consistent design: - removed green "New custom integration" button and added a fixed bottom row in the custom integrations list - added "Custom integrations" heading to the list - synced webhooks design with this pattern
226 lines
12 KiB
Handlebars
226 lines
12 KiB
Handlebars
<section class="gh-canvas">
|
|
<header class="gh-canvas-header">
|
|
<h2 class="gh-canvas-title" data-test-screen-title>Integrations</h2>
|
|
</header>
|
|
|
|
<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 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 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 id-mailchimp">
|
|
<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 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 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 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 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 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>
|
|
</a>
|
|
</div>
|
|
|
|
<section class="apps-grid-container">
|
|
|
|
{{!-- TODO: move fully to spirit and normalize spacing --}}
|
|
<span class="apps-grid-title pb2">Built-in integrations</span>
|
|
<div class="apps-grid">
|
|
<div class="apps-grid-cell" data-test-app="zapier">
|
|
{{#link-to "settings.integrations.zapier" data-test-link="zapier"}}
|
|
<article class="apps-card-app">
|
|
<div class="apps-card-left">
|
|
<figure class="apps-card-app-icon" style="background-image:url(assets/img/zapiericon.png);background-size:45px;"></figure>
|
|
<div class="apps-card-meta">
|
|
<h3 class="apps-card-app-title">Zapier</h3>
|
|
<p class="apps-card-app-desc">Automation for your favourite apps</p>
|
|
</div>
|
|
</div>
|
|
<div class="gh-card-right">
|
|
<div class="apps-configured">
|
|
<span data-test-app-status>Configure</span>
|
|
{{svg-jar "arrow-right"}}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
{{/link-to}}
|
|
</div>
|
|
|
|
<div class="apps-grid-cell" data-test-app="slack">
|
|
{{#link-to "settings.integrations.slack" data-test-link="slack"}}
|
|
<article class="apps-card-app">
|
|
<div class="apps-card-left">
|
|
<figure class="apps-card-app-icon" style="background-image:url(assets/img/slackicon.png)"></figure>
|
|
<div class="apps-card-meta">
|
|
<h3 class="apps-card-app-title">Slack</h3>
|
|
<p class="apps-card-app-desc">A messaging app for teams</p>
|
|
</div>
|
|
</div>
|
|
<div class="gh-card-right">
|
|
<div class="apps-configured">
|
|
{{#if settings.slack.isActive}}
|
|
<span class="green" data-test-app-status>Active</span>
|
|
{{else}}
|
|
<span data-test-app-status>Configure</span>
|
|
{{/if}}
|
|
{{svg-jar "arrow-right"}}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
{{/link-to}}
|
|
</div>
|
|
|
|
<div class="apps-grid-cell" data-test-app="amp">
|
|
{{#link-to "settings.integrations.amp" data-test-link="amp"}}
|
|
<article class="apps-card-app">
|
|
<div class="apps-card-left">
|
|
<figure class="apps-card-app-icon" style="background-image:url(assets/img/ampicon.png)"></figure>
|
|
<div class="apps-card-meta">
|
|
<h3 class="apps-card-app-title">AMP</h3>
|
|
<p class="apps-card-app-desc">Google Accelerated Mobile Pages</p>
|
|
</div>
|
|
</div>
|
|
<div class="gh-card-right">
|
|
<div class="apps-configured">
|
|
{{#if settings.amp}}
|
|
<span class="green" data-test-app-status>Active</span>
|
|
{{else}}
|
|
<span data-test-app-status>Configure</span>
|
|
{{/if}}
|
|
{{svg-jar "arrow-right"}}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
{{/link-to}}
|
|
</div>
|
|
|
|
<div class="apps-grid-cell" data-test-app="unsplash">
|
|
{{#link-to "settings.integrations.unsplash" data-test-link="unsplash"}}
|
|
<article class="apps-card-app">
|
|
<div class="apps-card-left">
|
|
<figure class="apps-card-app-icon" style="background-image:url(assets/icons/unsplash.svg);background-size:38px;"></figure>
|
|
<div class="apps-card-meta">
|
|
<h3 class="apps-card-app-title">Unsplash</h3>
|
|
<p class="apps-card-app-desc">Beautiful, free photos</p>
|
|
</div>
|
|
</div>
|
|
<div class="gh-card-right">
|
|
<div class="apps-configured">
|
|
{{#if settings.unsplash.isActive}}
|
|
<span class="green" data-test-app-status>Active</span>
|
|
{{else}}
|
|
<span data-test-app-status>Configure</span>
|
|
{{/if}}
|
|
{{svg-jar "arrow-right"}}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
{{/link-to}}
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section class="apps-grid-container pt6">
|
|
|
|
<span class="apps-grid-title pb2">Custom integrations</span>
|
|
<div class="apps-grid">
|
|
{{#each integrations as |integration|}}
|
|
<div class="apps-grid-cell" data-test-custom-integration>
|
|
{{#link-to "settings.integration" integration data-test-integration=integration.id}}
|
|
<article class="apps-card-app">
|
|
<div class="apps-card-left">
|
|
<figure class="apps-card-app-icon flex items-center" style={{integration-icon-style integration}}>
|
|
{{#unless integration.iconImage}}
|
|
{{svg-jar "integration" class="w-100 stroke-darkgrey"}}
|
|
{{/unless}}
|
|
</figure>
|
|
<div class="apps-card-meta">
|
|
<h3 class="apps-card-app-title" data-test-text="name">
|
|
{{integration.name}}
|
|
</h3>
|
|
<p class="apps-card-app-desc" data-test-text="description">
|
|
{{integration.description}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="gh-card-right">
|
|
<div class="apps-configured">
|
|
<span>Configure</span>
|
|
{{svg-jar "arrow-right"}}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
{{/link-to}}
|
|
</div>
|
|
{{else}}
|
|
<div class="flex flex-column justify-center items-center mih30 miw-100" data-test-blank="custom-integrations">
|
|
{{#if fetchIntegrations.isRunning}}
|
|
<div class="gh-loading-spinner"></div>
|
|
{{else}}
|
|
<div class="flex flex-column items-center pa5 pt15 pb15">
|
|
<p class="ma0 pa0 tc midgrey lh-title mt2">
|
|
Create your own custom Ghost integrations with dedicated API keys & webhooks
|
|
</p>
|
|
{{#link-to "settings.integrations.new" class="" data-test-button="new-integration"}}
|
|
<div class="flex items-center pa2 pt1">
|
|
{{svg-jar "add" class="w3 h3 fill-blue-d1"}}
|
|
<span class="db ml1 blue nudge-bottom--1">Add custom integration</span>
|
|
</div>
|
|
{{/link-to}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
{{/each}}
|
|
|
|
{{#if integrations}}
|
|
<div class="apps-grid-cell new-integration-cell">
|
|
{{#link-to "settings.integrations.new" class="" data-test-button="new-integration"}}
|
|
<article class="apps-card-app">
|
|
<div class="flex items-center">
|
|
{{svg-jar "add" class="w3 h3 fill-blue-d1"}}
|
|
<span class="db ml1 blue nudge-bottom--1 fw4">Add custom integration</span>
|
|
</div>
|
|
</article>
|
|
{{/link-to}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
{{outlet}} |