Ghost-Admin/app/templates/settings/integrations/amp.hbs

80 lines
3.8 KiB
Handlebars

<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>
<LinkTo @route="settings.integrations" data-test-link="integrations-back">Integrations</LinkTo>
<span>{{svg-jar "arrow-right"}}</span>
AMP
</h2>
<section class="view-actions">
<GhTaskButton @task={{this.save}} @class="gh-btn gh-btn-blue gh-btn-icon" data-test-save-button={{true}} />
</section>
</GhCanvasHeader>
{{#if this.showLeaveSettingsModal}}
<GhFullscreenModal @modal="leave-settings"
@confirm={{action "leaveSettings"}}
@close={{action "toggleLeaveSettingsModal"}}
@modifier="action wide" />
{{/if}}
<section class="view-container bt b--lightgrey-d1 pt5">
<section class="app-grid">
<div class="app-cell">
<div class="bg-white mr3 display flex items-center justify-center br-pill shadow-1 pa3 dark-no-shadow">
<img class="app-icon" src="assets/img/amp.svg" />
</div>
</div>
<div class="app-cell">
<h3>AMP</h3>
<p>Accelerated Mobile Pages</p>
</div>
</section>
<div class="gh-setting-header gh-first-header">AMP configuration</div>
<div class="flex flex-column br4 shadow-1 bg-grouped-table pa5 mt2">
<div class="gh-setting-first">
<div class="gh-setting-content">
<div class="gh-setting-title">Enable AMP</div>
<div class="gh-setting-desc">Enable <a href="https://ampproject.org" target="_blank">Google Accelerated Mobile Pages</a> for your posts</div>
</div>
<div class="gh-setting-action">
<div class="for-checkbox">
<label for="amp" class="checkbox">
<input
type="checkbox"
checked={{this.settings.amp}}
id="amp"
name="amp"
onclick={{action "update" value="target.checked"}}
data-test-amp-checkbox
>
<span class="input-toggle-component"></span>
</label>
</div>
</div>
</div>
{{#liquid-if this.settings.amp class="nl5 nr5"}}
<div class="gh-setting-last gh-setting-amp-liquid">
<div class="gh-setting-content gh-setting-content--no-action">
<div class="gh-setting-title">Google Analytics Tracking ID</div>
<div class="gh-setting-desc">Tracks AMP traffic in Google Analytics, find your ID <a href="https://ghost.org/help/how-to-find-your-google-analytics-tracking-id/">here</a></div>
<div class="gh-setting-content-extended">
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="ampGtagId">
<GhTextInput
@placeholder="UA-XXXXXXX-X"
@name="amp_gtag_id"
@value={{this.settings.ampGtagId}}
@keyEvents={{hash
Enter=(action "save")
}}
/>
<GhErrorMessage @errors={{this.settings.errors}} @property="ampGtagId"/>
</GhFormGroup>
</div>
</div>
</div>
{{/liquid-if}}
</div>
</section>
</section>