mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 09:03:12 +03:00
464e601c4d
no issue Adds new FirstPromoter integration on the integrations page. FirstPromoter enables sites to launch their own members referral program, and integration allows Site admins to directly add their FirstPromoter tracking ID in the settings to enable FirstPromoter script on their site.
252 lines
13 KiB
Handlebars
252 lines
13 KiB
Handlebars
<section class="gh-canvas">
|
|
<GhCanvasHeader class="gh-canvas-header">
|
|
<h2 class="gh-canvas-title" data-test-screen-title>
|
|
Integrations
|
|
</h2>
|
|
</GhCanvasHeader>
|
|
|
|
<div class="integrations-directory">
|
|
<a class="id-item" href="https://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://ghost.org/integrations/google/" 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://ghost.org/integrations/ulysses/" target="_blank" rel="noopener noreferrer">
|
|
<div class="id-item-logo id-ulysses">
|
|
<img class="w-100 h-100" style="object-fit:contain;" src="assets/img/ulysses.png" alt="Ulysses Icon" />
|
|
</div>
|
|
<div class="f8 mt1">Ulysses</div>
|
|
</a>
|
|
<a class="id-item" href="https://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://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://ghost.org/integrations/plausible/" target="_blank" rel="noopener noreferrer">
|
|
<div class="id-item-logo id-plausible">
|
|
<img class="w-100 h-100" style="object-fit:contain;padding:1px 0;" src="assets/img/plausible.png" alt="Plausible Icon" />
|
|
</div>
|
|
<div class="f8 mt1">Plausible</div>
|
|
</a>
|
|
<a class="id-item" href="https://ghost.org/integrations/github/" target="_blank" rel="noopener noreferrer">
|
|
<div class="id-item-logo id-github">
|
|
<img class="w-100 h-100" style="object-fit:contain;" src="assets/img/github.svg" alt="GitHub Icon" />
|
|
</div>
|
|
<div class="f8 mt1">GitHub</div>
|
|
</a>
|
|
<a class="id-item" href="https://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" /> --}}
|
|
{{svg-jar "circle-ellipsis" class="w5"}}
|
|
</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 pb1">Built-in integrations</span>
|
|
<div class="apps-grid">
|
|
<div class="apps-grid-cell" data-test-app="zapier">
|
|
<LinkTo @route="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/zapier.svg);background-size:36px;"></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>
|
|
</LinkTo>
|
|
</div>
|
|
|
|
<div class="apps-grid-cell" data-test-app="slack">
|
|
<LinkTo @route="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); background-size: 36px;"></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 this.settings.slack.isActive}}
|
|
<span class="gh-badge" data-test-app-status>Active</span>
|
|
{{else}}
|
|
<span data-test-app-status>Configure</span>
|
|
{{/if}}
|
|
{{svg-jar "arrow-right"}}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</LinkTo>
|
|
</div>
|
|
|
|
<div class="apps-grid-cell" data-test-app="amp">
|
|
<LinkTo @route="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/amp.svg); background-size: 36px;"></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 this.settings.amp}}
|
|
<span class="gh-badge" data-test-app-status>Active</span>
|
|
{{else}}
|
|
<span data-test-app-status>Configure</span>
|
|
{{/if}}
|
|
{{svg-jar "arrow-right"}}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</LinkTo>
|
|
</div>
|
|
|
|
<div class="apps-grid-cell" data-test-app="unsplash">
|
|
<LinkTo @route="settings.integrations.unsplash" data-test-link="unsplash">
|
|
<article class="apps-card-app">
|
|
<div class="apps-card-left">
|
|
<figure class="apps-card-app-icon id-unsplash" style="background-image:url(assets/icons/unsplash.svg); background-size:30px;"></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 this.settings.unsplash.isActive}}
|
|
<span class="gh-badge" data-test-app-status>Active</span>
|
|
{{else}}
|
|
<span data-test-app-status>Configure</span>
|
|
{{/if}}
|
|
{{svg-jar "arrow-right"}}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</LinkTo>
|
|
</div>
|
|
<div class="apps-grid-cell" data-test-app="firstpromoter">
|
|
<LinkTo @route="settings.integrations.firstpromoter" data-test-link="firstpromoter">
|
|
<article class="apps-card-app">
|
|
<div class="apps-card-left">
|
|
<figure class="apps-card-app-icon id-unsplash" style="background-image:url(assets/icons/firstpromoter.png); background-size:30px;"></figure>
|
|
<div class="apps-card-meta">
|
|
<h3 class="apps-card-app-title">FirstPromoter</h3>
|
|
<p class="apps-card-app-desc">Launch your member referral program</p>
|
|
</div>
|
|
</div>
|
|
<div class="gh-card-right">
|
|
<div class="apps-configured">
|
|
{{#if this.settings.firstpromoter}}
|
|
<span class="gh-badge" data-test-app-status>Active</span>
|
|
{{else}}
|
|
<span data-test-app-status>Configure</span>
|
|
{{/if}}
|
|
{{svg-jar "arrow-right"}}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</LinkTo>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section class="apps-grid-container">
|
|
|
|
<span class="apps-grid-title pb1">Custom integrations</span>
|
|
<div class="apps-grid">
|
|
{{#each this.integrations as |integration|}}
|
|
<div class="apps-grid-cell" data-test-custom-integration>
|
|
<LinkTo @route="settings.integration" @model={{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="nudge-left--6 w9 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>
|
|
</LinkTo>
|
|
</div>
|
|
{{else}}
|
|
<div class="flex flex-column justify-center items-center mih30 miw-100" data-test-blank="custom-integrations">
|
|
{{#if this.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>
|
|
<LinkTo @route="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>
|
|
</LinkTo>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
{{/each}}
|
|
|
|
{{#if this.integrations}}
|
|
<div class="apps-grid-cell new-integration-cell">
|
|
<LinkTo @route="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>
|
|
</LinkTo>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
{{outlet}}
|