404 lines
24 KiB
Handlebars
404 lines
24 KiB
Handlebars
<div class="gh-main-section">
|
||
<h4 class="gh-main-section-header small bn">Basic settings</h4>
|
||
<section class="gh-main-section-block">
|
||
<div class="gh-main-section-content grey columns-2">
|
||
<div>
|
||
<div class="gh-tag-settings-multiprop">
|
||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="name" class="mr2 flex-auto">
|
||
<label for="tag-name">Name</label>
|
||
<GhTextInput
|
||
@id="tag-name"
|
||
@name="name"
|
||
@value={{this.scratchTag.name}}
|
||
@tabindex="1"
|
||
@focus-out={{action "setProperty" "name" this.scratchTag.name}}
|
||
/>
|
||
<span class="error">
|
||
<GhErrorMessage @errors={{this.tag.errors}} @property="name" />
|
||
<GhErrorMessage @errors={{this.tag.errors}} @property="accentColor" data-test-error="accentColor" />
|
||
</span>
|
||
<p class="description">
|
||
Start with # to create internal tags
|
||
<a href="https://ghost.org/help/organising-content/#private-tags" target="_blank" rel="noopener noreferrer">Learn more</a>
|
||
</p>
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="accentColor" class="gh-tag-settings-colorcontainer">
|
||
<label for="accent-color">Color</label>
|
||
<div class="input-color">
|
||
<input
|
||
type="text"
|
||
placeholder="15171A"
|
||
name="accent-color"
|
||
autocorrect="off"
|
||
maxlength="6"
|
||
value={{this.accentColor}}
|
||
class="gh-input"
|
||
{{on "input" (perform this.debounceUpdateAccentColor)}}
|
||
{{on "blur" this.updateAccentColor}}
|
||
data-test-input="accentColor"
|
||
/>
|
||
<div class="color-picker-horizontal-divider"></div>
|
||
<div
|
||
class="color-box-container"
|
||
style={{this.accentColorBgStyle}}
|
||
>
|
||
<input
|
||
type="color"
|
||
name="accent-color"
|
||
class="color-picker"
|
||
value="{{this.accentColorPickerValue}}"
|
||
{{on "input" (perform this.debounceUpdateAccentColor)}}
|
||
>
|
||
</div>
|
||
</div>
|
||
</GhFormGroup>
|
||
</div>
|
||
|
||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="slug">
|
||
<label for="tag-slug">Slug</label>
|
||
<GhTextInput
|
||
@value={{this.scratchTag.slug}}
|
||
@id="tag-slug"
|
||
@name="slug"
|
||
@tabindex="2"
|
||
@focus-out={{action "setProperty" "slug" this.scratchTag.slug}}
|
||
/>
|
||
<GhUrlPreview @prefix="tag" @slug={{this.scratchTag.slug}} @tagName="p" @classNames="description" />
|
||
<GhErrorMessage @errors={{this.activeTag.errors}} @property="slug" />
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup @class="no-margin" @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="description">
|
||
<label for="tag-description">Description</label>
|
||
<GhTextarea
|
||
@id="tag-description"
|
||
@name="description"
|
||
@class="gh-tag-details-textarea"
|
||
@tabindex="3"
|
||
@value={{this.scratchTag.description}}
|
||
@focus-out={{action "setProperty" "description" this.scratchTag.description}}
|
||
/>
|
||
<GhErrorMessage @errors={{this.tag.errors}} @property="description" />
|
||
<p>Maximum: <b>500</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.description 500}}</p>
|
||
</GhFormGroup>
|
||
</div>
|
||
<GhFormGroup @class="gh-tag-image-uploader no-margin" @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="featureImage">
|
||
<label for="tag-image">Tag image</label>
|
||
<GhImageUploaderWithPreview
|
||
@image={{this.tag.featureImage}}
|
||
@text="Upload tag image"
|
||
@allowUnsplash={{true}}
|
||
@update={{action "setCoverImage"}}
|
||
@remove={{action "clearCoverImage"}}
|
||
/>
|
||
</GhFormGroup>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<section class="gh-expandable">
|
||
<div class="gh-expandable-block">
|
||
<div class="gh-expandable-header">
|
||
<div>
|
||
<h4 class="gh-expandable-title">Meta data</h4>
|
||
<p class="gh-expandable-description">Extra content for search engines.</p>
|
||
</div>
|
||
<button type="button" class="gh-btn gh-btn-expand" {{action (toggle "metadataOpen" this)}}><span>{{if this.metadataOpen "Close" "Expand"}}</span></button>
|
||
</div>
|
||
|
||
<div class="gh-expandable-content">
|
||
{{#liquid-if this.metadataOpen}}
|
||
<div class="gh-setting-content-extended">
|
||
<div class="gh-seo-settings">
|
||
<div class="gh-seo-settings-left flex-basis-1-2-m flex-basis-2-3-l">
|
||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="metaTitle">
|
||
<label for="meta-title">Meta title</label>
|
||
<GhTextInput
|
||
@id="meta-title"
|
||
@name="metaTitle"
|
||
@placeholder={{this.scratchTag.name}}
|
||
@tabindex="4"
|
||
@value={{this.scratchTag.metaTitle}}
|
||
@focus-out={{action "setProperty" "metaTitle" this.scratchTag.metaTitle}}
|
||
/>
|
||
<GhErrorMessage @errors={{this.tag.errors}} @property="metaTitle" />
|
||
<p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.metaTitle 70}}</p>
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="metaDescription">
|
||
<label for="meta-description">Meta description</label>
|
||
<GhTextarea
|
||
@id="meta-description"
|
||
@name="metaDescription"
|
||
@class="gh-tag-details-textarea"
|
||
@placeholder={{this.scratchTag.description}}
|
||
@tabindex="5"
|
||
@value={{this.scratchTag.metaDescription}}
|
||
@focus-out={{action "setProperty" "metaDescription" this.scratchTag.metaDescription}}
|
||
/>
|
||
<GhErrorMessage @errors={{this.tag.errors}} @property="metaDescription" />
|
||
<p>Recommended: <b>156</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.metaDescription 156}}</p>
|
||
</GhFormGroup>
|
||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="canonicalUrl">
|
||
<label for="canonical-url">Canonical URL</label>
|
||
<GhTextInput
|
||
@id="canonical-url"
|
||
@name="canonicalUrl"
|
||
@tabindex="4"
|
||
@value={{this.scratchTag.canonicalUrl}}
|
||
@focus-out={{action "validateCanonicalUrl"}}
|
||
/>
|
||
<GhErrorMessage @errors={{this.tag.errors}} @property="canonicalUrl" />
|
||
</GhFormGroup>
|
||
</div>
|
||
<div class="flex-basis-1-2-m flex-basis-1-3-l">
|
||
<label>Search Engine Result Preview</label>
|
||
<div class="gh-seo-container">
|
||
<div class="gh-seo-preview">
|
||
<div class="flex mb7">
|
||
{{svg-jar "google"}}
|
||
<div class="gh-seo-search-bar">{{svg-jar "google-search"}}</div>
|
||
</div>
|
||
<div class="gh-seo-preview-link">{{this.seoURL}}</div>
|
||
<div class="gh-seo-preview-title">{{this.seoTitle}}</div>
|
||
<div class="gh-seo-preview-desc">{{this.seoDescription}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{/liquid-if}}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gh-expandable-block">
|
||
<div class="gh-expandable-header">
|
||
<div>
|
||
<h4 class="gh-expandable-title">Twitter card</h4>
|
||
<p class="gh-expandable-description">Customized structured data for Twitter.</p>
|
||
</div>
|
||
<button type="button" class="gh-btn gh-btn-expand" {{action (toggle "twitterMetadataOpen" this)}}><span>{{if this.twitterMetadataOpen "Close" "Expand"}}</span></button>
|
||
</div>
|
||
|
||
<div class="gh-expandable-content">
|
||
{{#liquid-if this.twitterMetadataOpen}}
|
||
<div class="gh-setting-content-extended">
|
||
<div class="gh-twitter-settings">
|
||
<div class="gh-twitter-settings-left flex-basis-1-2-m flex-basis-2-3-l">
|
||
<GhFormGroup @class="gh-tag-image-uploader" @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="twitterImage">
|
||
<label for="twitter-image">Twitter image</label>
|
||
<GhImageUploaderWithPreview
|
||
@image={{this.tag.twitterImage}}
|
||
@text="Add Twitter image"
|
||
@allowUnsplash={{true}}
|
||
@update={{action "setTwitterImage"}}
|
||
@remove={{action "clearTwitterImage"}}
|
||
/>
|
||
</GhFormGroup>
|
||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="twitterTitle">
|
||
<label for="twitter-title">Twitter title</label>
|
||
<GhTextInput
|
||
@id="twitter-title"
|
||
@name="twitterTitle"
|
||
@placeholder={{this.scratchTag.name}}
|
||
@tabindex="4"
|
||
@value={{this.scratchTag.twitterTitle}}
|
||
@focus-out={{action "setProperty" "twitterTitle" this.scratchTag.twitterTitle}}
|
||
/>
|
||
<GhErrorMessage @errors={{this.tag.errors}} @property="twitterTitle" />
|
||
<p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.twitterTitle 70}}</p>
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="twitterDesctiption">
|
||
<label for="twitter-description">Twitter description</label>
|
||
<GhTextarea
|
||
@id="twitter-description"
|
||
@name="twitterDescription"
|
||
@class="gh-tag-details-textarea"
|
||
@placeholder={{this.scratchTag.description}}
|
||
@tabindex="5"
|
||
@value={{this.scratchTag.twitterDescription}}
|
||
@focus-out={{action "setProperty" "twitterDescription" this.scratchTag.twitterDescription}}
|
||
/>
|
||
<GhErrorMessage @errors={{this.tag.errors}} @property="twitterDescription" />
|
||
<p>Recommended: <b>125</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.twitterDescription 125}}</p>
|
||
</GhFormGroup>
|
||
</div>
|
||
<div class="flex-basis-1-2-m flex-basis-1-3-l">
|
||
<label>Twitter preview</label>
|
||
<div class="gh-twitter-container">
|
||
<div class="flex ma4">
|
||
<span>{{svg-jar "social-twitter" class="social-icon"}}</span>
|
||
<div class="w-100">
|
||
<span class="gh-social-og-title">{{or this.settings.metaTitle this.settings.title}}</span>
|
||
<span class="gh-social-og-time">12 hrs</span>
|
||
<div class="flex flex-column mt2 mb3">
|
||
<span class="gh-social-og-desc w-100 mb2" />
|
||
<span class="gh-social-og-desc w-60" />
|
||
</div>
|
||
<div class="gh-social-twitter-post-preview">
|
||
{{#if this.twitterImage}}
|
||
<div class="gh-social-twitter-preview-image" style={{background-image-style this.twitterImage}}></div>
|
||
{{/if}}
|
||
<div class="gh-social-twitter-preview-content">
|
||
<div class="gh-social-twitter-preview-title">{{this.twitterTitle}}</div>
|
||
<div class="gh-social-twitter-preview-desc">{{truncate this.twitterDescription}}</div>
|
||
<div class="gh-social-twitter-preview-meta">
|
||
{{svg-jar "twitter-link"}}
|
||
{{this.config.blogDomain}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="gh-social-twitter-reactions">
|
||
<div class="flex items-center">{{svg-jar "twitter-comment"}}2</div>
|
||
<div class="flex items-center">{{svg-jar "twitter-retweet"}}11</div>
|
||
<div class="flex items-center">{{svg-jar "twitter-like"}}32</div>
|
||
<div class="flex items-center">{{svg-jar "twitter-share"}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{/liquid-if}}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gh-expandable-block">
|
||
<div class="gh-expandable-header">
|
||
<div>
|
||
<h4 class="gh-expandable-title">Facebook card</h4>
|
||
<p class="gh-expandable-description">Customize Open Graph data.</p>
|
||
</div>
|
||
<button type="button" class="gh-btn gh-btn-expand" {{action (toggle "facebookMetadataOpen" this)}}><span>{{if this.facebookMetadataOpen "Close" "Expand"}}</span></button>
|
||
</div>
|
||
|
||
<div class="gh-expandable-content">
|
||
{{#liquid-if this.facebookMetadataOpen}}
|
||
<div class="gh-setting-content-extended">
|
||
<div class="gh-og-settings">
|
||
<div class="gh-og-settings-left flex-basis-1-2-m flex-basis-2-3-l">
|
||
<GhFormGroup @class="gh-tag-image-uploader" @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="ogImage">
|
||
<label for="og-image">Facebook image</label>
|
||
<GhImageUploaderWithPreview
|
||
@image={{this.tag.ogImage}}
|
||
@text="Add Facebook image"
|
||
@allowUnsplash={{true}}
|
||
@update={{action "setOgImage"}}
|
||
@remove={{action "clearOgImage"}}
|
||
/>
|
||
</GhFormGroup>
|
||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="metaTitle">
|
||
<label for="og-title">Facebook title</label>
|
||
<GhTextInput
|
||
@id="og-title"
|
||
@name="ogTitle"
|
||
@placeholder={{this.scratchTag.name}}
|
||
@tabindex="4"
|
||
@value={{this.scratchTag.ogTitle}}
|
||
@focus-out={{action "setProperty" "ogTitle" this.scratchTag.ogTitle}}
|
||
/>
|
||
<GhErrorMessage @errors={{this.tag.errors}} @property="ogTitle" />
|
||
<p>Recommended: <b>100</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.ogTitle 100}}</p>
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="ogDescription">
|
||
<label for="og-description">Facebook description</label>
|
||
<GhTextarea
|
||
@id="og-description"
|
||
@name="ogDescription"
|
||
@class="gh-tag-details-textarea"
|
||
@placeholder={{this.scratchTag.description}}
|
||
@tabindex="5"
|
||
@value={{this.scratchTag.ogDescription}}
|
||
@focus-out={{action "setProperty" "ogDescription" this.scratchTag.ogDescription}}
|
||
/>
|
||
<GhErrorMessage @errors={{this.tag.errors}} @property="ogDescription" />
|
||
<p>Recommended: <b>65</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.ogDescription 65}}</p>
|
||
</GhFormGroup>
|
||
</div>
|
||
<div class="flex-basis-1-2-m flex-basis-1-3-l">
|
||
<label>Facebook preview</label>
|
||
<div class="gh-og-container">
|
||
<div class="flex ma3 mb2">
|
||
<span>{{svg-jar "social-facebook" class="social-icon"}}</span>
|
||
<div>
|
||
<div class="gh-social-og-title">{{or this.settings.metaTitle this.settings.title}}</div>
|
||
<div class="gh-social-og-time">12 hrs</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-column ma3 mt2">
|
||
<span class="gh-social-og-desc w-100 mb2" />
|
||
<span class="gh-social-og-desc w-60" />
|
||
</div>
|
||
<div class="gh-social-og-preview">
|
||
{{#if this.facebookImage}}
|
||
<div class="gh-social-og-preview-image" style={{background-image-style this.facebookImage}}></div>
|
||
{{/if}}
|
||
<div class="gh-social-og-preview-bookmark">
|
||
{{!-- Ensures description is hidden if title exceeds one line --}}
|
||
<div class="gh-social-og-preview-content">
|
||
<div class="gh-social-og-preview-meta">
|
||
{{this.config.blogDomain}}
|
||
</div>
|
||
<div class="gh-social-og-preview-title">{{truncate this.facebookTitle}}</div>
|
||
<div class="gh-social-og-preview-desc">{{truncate this.facebookDescription}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="gh-social-og-reactions">
|
||
<span class="gh-social-og-likes">{{svg-jar "facebook-like" class="z-999"}}{{svg-jar "facebook-heart" class="nl1"}}182</span>
|
||
<span class="gh-social-og-comments">7 comments</span>
|
||
<span class="gh-social-og-comments ml2">2 shares</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{/liquid-if}}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gh-expandable-block">
|
||
<div class="gh-expandable-header">
|
||
<div>
|
||
<h4 class="gh-expandable-title">Code injection</h4>
|
||
<p class="gh-expandable-description">Add styles/scripts to the header and footer.</p>
|
||
</div>
|
||
<button type="button" class="gh-btn gh-btn-expand" {{action (toggle "codeInjectionOpen" this)}}><span>{{if this.codeInjectionOpen "Close" "Expand"}}</span></button>
|
||
</div>
|
||
|
||
<div class="gh-expandable-content">
|
||
{{#liquid-if this.codeInjectionOpen}}
|
||
<div class="gh-main-section">
|
||
<GhFormGroup @class="gh-main-section-block settings-code" @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="codeinjectionHead">
|
||
<label for="codeinjection-head" class="gh-tag-setting-codeheader">Tag header <code class="fw4 ml1">\{{ghost_head}}</code></label>
|
||
<GhCmEditor @value={{this.scratchTag.codeinjectionHead}}
|
||
@id="tag-setting-codeinjection-head"
|
||
@class="gh-tag-setting-codeinjection"
|
||
@name="tag-setting-codeinjection-head"
|
||
@focusOut={{action "setProperty" "codeinjectionHead" this.scratchTag.codeinjectionHead}}
|
||
@stopEnterKeyDownPropagation="true"
|
||
@update={{action (mut this.scratchTag.codeinjectionHead)}}
|
||
/>
|
||
<GhErrorMessage @errors={{this.tag.errors}} @property="codeinjectionHead"/>
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup @class="gh-main-section-block settings-code" @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="codeinjectionFoot">
|
||
<label for="codeinjection-foot"class="gh-tag-setting-codeheader">Tag footer <code class="fw4 ml1">\{{ghost_foot}}</code></label>
|
||
<GhCmEditor @value={{this.scratchTag.codeinjectionFoot}}
|
||
@id="tag-setting-codeinjection-foot"
|
||
@class="gh-tag-setting-codeinjection"
|
||
@name="tag-setting-codeinjection-foot"
|
||
@focusOut={{action "setProperty" "codeinjectionFoot" this.scratchTag.codeinjectionFoot}}
|
||
@stopEnterKeyDownPropagation="true"
|
||
@update={{action (mut this.scratchTag.codeinjectionFoot)}}
|
||
/>
|
||
<GhErrorMessage @errors={{this.tag.errors}} @property="codeinjectionFoot"/>
|
||
</GhFormGroup>
|
||
</div>
|
||
{{/liquid-if}}
|
||
</div>
|
||
</div>
|
||
</section> |