Ghost-Admin/app/templates/components/gh-post-settings-menu.hbs

<div class="settings-menu-container">
    <div id="entry-controls">
        <div class="{{if isViewingSubview 'settings-menu-pane-out-left' 'settings-menu-pane-in'}} settings-menu settings-menu-pane">
            <div class="settings-menu-header">
                <h4>Post Settings</h4>
                <button class="close settings-menu-header-action" {{action "closeMenus" target=ui}} data-test-close-settings-menu>
                    {{svg-jar "close"}}<span class="hidden">Close</span>
                </button>
            </div>
            <div class="settings-menu-content">
                {{gh-image-uploader-with-preview
                    image=post.featureImage
                    text="Upload post image"
                    allowUnsplash=true
                    update=(action "setCoverImage")
                    remove=(action "clearCoverImage")
                }}
                <form>
                <div class="form-group">
                    <label for="url">Post URL</label>
                    {{!-- new posts don't have a preview link --}}
                    {{#unless post.isNew}}
                        {{#if post.isPublished}}
                        <a class="post-view-link" target="_blank" href="{{post.absoluteUrl}}">
                            View post {{svg-jar "external"}}
                        </a>
                        {{else}}
                        <a class="post-view-link" target="_blank" href="{{post.previewUrl}}">
                            Preview {{svg-jar "external"}}
                        </a>
                        {{/if}}
                    {{/unless}}

                    <div class="gh-input-icon gh-icon-link">
                        {{svg-jar "link"}}
                        {{gh-text-input
                            class="post-setting-slug"
                            id="url"
                            name="post-setting-slug"
                            value=(readonly slugValue)
                            input=(action (mut slugValue) value="target.value")
                            focus-out=(action "updateSlug" slugValue)
                            stopEnterKeyDownPropagation=true}}
                    </div>
                    {{gh-url-preview slug=slugValue tagName="p" classNames="description"}}
                </div>

                <div class="form-group">
                    {{#if (or post.isDraft post.isPublished post.pastScheduledTime)}}
                        <label>Publish Date</label>
                    {{else}}
                        <label>Scheduled Date</label>
                        <p>Use the publish menu to re-schedule</p>
                    {{/if}}
                    {{gh-date-time-picker
                        date=post.publishedAtBlogDate
                        time=post.publishedAtBlogTime
                        setDate=(action "setPublishedAtBlogDate")
                        setTime=(action "setPublishedAtBlogTime")
                        errors=post.errors
                        dateErrorProperty="publishedAtBlogDate"
                        timeErrorProperty="publishedAtBlogTime"
                        maxDate='now'
                        disabled=post.isScheduled
                        static=true
                    }}
                </div>

                {{#unless session.user.isContributor}}
                <div class="form-group">
                    <label for="tag-input">Tags</label>
                    {{gh-psm-tags-input post=post triggerId="tag-input"}}
                </div>
                {{/unless}}

                {{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="customExcerpt"}}
                    <label for="custom-excerpt">Excerpt</label>
                    {{gh-textarea
                        class="post-setting-custom-excerpt"
                        id="custom-excerpt"
                        name="post-setting-custom-excerpt"
                        value=(readonly customExcerptScratch)
                        input=(action (mut customExcerptScratch) value="target.value")
                        focus-out=(action "setCustomExcerpt" customExcerptScratch)
                        stopEnterKeyDownPropagation="true"
                        data-test-field="custom-excerpt"}}
                    {{gh-error-message errors=post.errors property="customExcerpt" data-test-error="custom-excerpt"}}
                {{/gh-form-group}}

                {{#unless session.user.isAuthorOrContributor}}
                    {{#gh-form-group class="for-select" errors=post.errors hasValidated=post.hasValidated property="authors" data-test-input="authors"}}
                        <label for="author-list">Authors</label>
                        {{gh-psm-authors-input selectedAuthors=post.authors updateAuthors=(action "changeAuthors") triggerId="author-list"}}
                        {{gh-error-message errors=post.errors property="authors" data-test-error="authors"}}
                    {{/gh-form-group}}
                {{/unless}}

                <ul class="nav-list nav-list-block">
                    <li class="nav-list-item" {{action "showSubview" "meta-data"}} data-test-button="meta-data">
                        <button type="button">
                            <b>Meta Data</b>
                            <span>Extra content for search engines</span>
                        </button>
                        {{svg-jar "arrow-right"}}
                    </li>
                    <li class="nav-list-item" {{action "showSubview" "twitter-data"}} data-test-button="twitter-data">
                        <button type="button">
                            <b>Twitter Card</b>
                            <span>Customise structured data for Twitter</span>
                        </button>
                        {{svg-jar "arrow-right"}}
                    </li>
                    <li class="nav-list-item" {{action "showSubview" "facebook-data"}} data-test-button="facebook-data">
                        <button type="button">
                            <b>Facebook Card</b>
                            <span>Customise Open Graph data</span>
                        </button>
                        {{svg-jar "arrow-right"}}
                    </li>
                    <li class="nav-list-item" {{action "showSubview" "codeinjection"}} data-test-button="codeinjection">
                        <button type="button">
                            <b>Code Injection</b>
                            <span>Add styles/scripts to the header &amp; footer</span>
                        </button>
                        {{svg-jar "arrow-right"}}
                    </li>
                </ul>

                <div class="form-group for-checkbox">
                    <label class="checkbox" for="static-page" {{action "togglePage" bubbles="false"}}>
                        <input
                            type="checkbox"
                            checked={{post.page}}
                            class="gh-input post-setting-static-page"
                            name="static-page"
                            id="static-page"
                            onclick={{action (mut post.page) value="target.checked"}}
                            data-test-checkbox="static-page"
                        >
                        <span class="input-toggle-component"></span>
                        <p>Turn this post into a page</p>
                    </label>

                    <label class="checkbox" for="featured" {{action "toggleFeatured" bubbles="false"}}>
                        <input
                            type="checkbox"
                            checked={{post.featured}}
                            class="gh-input post-settings-featured"
                            onclick={{action (mut post.featured) value="target.checked"}}
                            data-test-checkbox="featured"
                        >
                        <span class="input-toggle-component"></span>
                        <p>Feature this post</p>
                    </label>
                </div>

                {{gh-psm-template-select
                    post=post
                    onTemplateSelect=(action (mut post.customTemplate))}}

                {{#unless post.isNew}}
                    <button type="button" class="gh-btn gh-btn-link gh-btn-icon settings-menu-delete-button" {{action "deletePost"}}><span>{{svg-jar "trash"}} Delete Post</span></button>
                {{/unless}}

                </form>
            </div>{{! .settings-menu-content }}
        </div>{{! .post-settings-menu }}

        <div class="{{if isViewingSubview 'settings-menu-pane-in' 'settings-menu-pane-out-right'}} settings-menu settings-menu-pane">
            <div class="active">
                {{#if isViewingSubview}}
                    {{#if (eq subview "meta-data")}}
                        <div class="settings-menu-header subview">
                            <button {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
                            <h4>Meta Data</h4>
                            <div style="width:23px;"></div>
                        </div>

                        <div class="settings-menu-content">
                            <form {{action "discardEnter" on="submit"}}>
                                {{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="metaTitle"}}
                                    <label for="meta-title">Meta Title</label>
                                    {{gh-text-input
                                        class="post-setting-meta-title"
                                        id="meta-title"
                                        name="post-setting-meta-title"
                                        value=(readonly metaTitleScratch)
                                        input=(action (mut metaTitleScratch) value="target.value")
                                        focus-out=(action "setMetaTitle" metaTitleScratch)
                                        stopEnterKeyDownPropagation=true
                                        data-test-field="meta-title"}}
                                    <p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters metaTitleScratch 70}}</p>
                                    {{gh-error-message errors=post.errors property="meta-title"}}
                                {{/gh-form-group}}

                                {{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="metaDescription"}}
                                    <label for="meta-description">Meta Description</label>
                                    {{gh-textarea
                                        class="post-setting-meta-description"
                                        id="meta-description"
                                        name="post-setting-meta-description"
                                        value=(readonly metaDescriptionScratch)
                                        input=(action (mut metaDescriptionScratch) value="target.value")
                                        focus-out=(action "setMetaDescription" metaDescriptionScratch)
                                        stopEnterKeyDownPropagation="true"
                                        data-test-field="meta-description"}}
                                    <p>Recommended: <b>156</b> characters. You’ve used {{gh-count-down-characters metaDescriptionScratch 156}}</p>
                                    {{gh-error-message errors=post.errors property="meta-description"}}
                                {{/gh-form-group}}

                                <div class="form-group">
                                    <label>Search Engine Result Preview</label>
                                    <div class="seo-preview">
                                        <div class="seo-preview-title">{{truncate seoTitle 70}}</div>
                                        <div class="seo-preview-link">{{truncate seoURL 70}}</div>
                                        <div class="seo-preview-description">{{truncate seoDescription 300}}</div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    {{/if}}

                    {{#if (eq subview "twitter-data")}}
                        <div class="settings-menu-header subview">
                            <button {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
                            <h4>Twitter Card</h4>
                            <div style="width:23px;"></div>
                        </div>

                        <div class="settings-menu-content">

                            <form {{action "discardEnter" on="submit"}}>
                                {{gh-image-uploader-with-preview
                                    image=post.twitterImage
                                    text="Add Twitter image"
                                    allowUnsplash=true
                                    update=(action "setTwitterImage")
                                    remove=(action "clearTwitterImage")
                                }}
                                {{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="twitterTitle"}}
                                    <label for="twitter-title">Twitter Title</label>
                                    {{gh-text-input
                                        class="post-setting-twitter-title"
                                        id="twitter-title"
                                        name="post-setting-twitter-title"
                                        placeholder=(truncate twitterTitle 40)
                                        value=(readonly twitterTitleScratch)
                                        input=(action (mut twitterTitleScratch) value="target.value")
                                        focus-out=(action "setTwitterTitle" twitterTitleScratch)
                                        stopEnterKeyDownPropagation=true
                                        data-test-field="twitter-title"}}
                                    {{gh-error-message errors=post.errors property="twitterTitle" data-test-error="twitter-title"}}
                                {{/gh-form-group}}

                                {{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="twitterDescription"}}
                                    <label for="twitter-description">Twitter Description</label>
                                    {{gh-textarea
                                        class="post-setting-twitter-description"
                                        id="twitter-description"
                                        name="post-setting-twitter-description"
                                        placeholder=(truncate twitterDescription 155)
                                        stopEnterKeyDownPropagation="true"
                                        value=(readonly twitterDescriptionScratch)
                                        input=(action (mut twitterDescriptionScratch) value="target.value")
                                        focus-out=(action "setTwitterDescription" twitterDescriptionScratch)
                                        data-test-field="twitter-description"}}
                                    {{gh-error-message errors=post.errors property="twitterDescription" data-test-error="twitter-description"}}
                                {{/gh-form-group}}

                                <div class="form-group">
                                    <label>Preview</label>
                                    <div class="gh-twitter-preview">
                                        {{#if twitterImage}}
                                        <div class="gh-twitter-preview-image" style={{twitterImageStyle}}></div>
                                        {{/if}}
                                        <div class="gh-twitter-preview-content">
                                            <div class="gh-twitter-preview-title">{{twitterTitle}}</div>
                                            <div class="gh-twitter-preview-description">{{truncate twitterDescription 155}}</div>
                                            <div class="gh-twitter-preview-footer">
                                                <div class="gh-twitter-preview-footer-left">
                                                    {{config.blogDomain}}
                                                </div>
                                                <div class="gh-twitter-preview-footer-right">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </form>
                        </div>
                    {{/if}}

                    {{#if (eq subview "facebook-data")}}
                        <div class="settings-menu-header subview">
                            <button {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
                            <h4>Facebook Card</h4>
                            <div style="width:23px;"></div>
                        </div>

                        <div class="settings-menu-content">
                            <form {{action "discardEnter" on="submit"}}>
                                {{gh-image-uploader-with-preview
                                    image=post.ogImage
                                    text="Add Facebook image"
                                    allowUnsplash=true
                                    update=(action "setOgImage")
                                    remove=(action "clearOgImage")
                                }}
                                {{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="ogTitle"}}
                                    <label for="og-title">Facebook Title</label>
                                    {{gh-text-input
                                        class="post-setting-og-title"
                                        id="og-title"
                                        name="post-setting-og-title"
                                        placeholder=(truncate facebookTitle 40)
                                        value=(readonly ogTitleScratch)
                                        input=(action (mut ogTitleScratch) value="target.value")
                                        focus-out=(action "setOgTitle" ogTitleScratch)
                                        stopEnterKeyDownPropagation=true
                                        data-test-field="og-title"}}
                                    {{gh-error-message errors=post.errors property="ogTitle" data-test-error="og-title"}}
                                {{/gh-form-group}}

                                {{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="ogDescription"}}
                                    <label for="og-description">Facebook Description</label>
                                    {{gh-textarea
                                        class="post-setting-og-description"
                                        id="og-description"
                                        name="post-setting-og-description"
                                        placeholder=(truncate facebookDescription 160)
                                        value=(readonly ogDescriptionScratch)
                                        input=(action (mut ogDescriptionScratch) value="target.value")
                                        focus-out=(action "setOgDescription" ogDescriptionScratch)
                                        stopEnterKeyDownPropagation="true"
                                        data-test-field="og-description"}}
                                    {{gh-error-message errors=post.errors property="ogDescription" data-test-error="og-description"}}
                                {{/gh-form-group}}

                                <div class="form-group">
                                    <label>Preview</label>
                                    <div class="gh-og-preview">
                                        {{#if facebookImage}}
                                        <div class="gh-og-preview-image" style={{facebookImageStyle}}></div>
                                        {{/if}}
                                        <div class="gh-og-preview-content">
                                            <div class="gh-og-preview-title">{{truncate facebookTitle 88}}</div>
                                            <div class="gh-og-preview-description">{{truncate facebookDescription 300}}</div>
                                            <div class="gh-og-preview-footer">
                                                <div class="gh-og-preview-footer-left">
                                                    {{config.blogDomain}} <span class="gh-og-preview-footer-left-divider">|</span> by <span class="gh-og-preview-footer-author">{{post.author.name}}</span>
                                                </div>
                                                <div class="gh-og-preview-footer-right">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </form>
                        </div>
                    {{/if}}

                    {{#if (eq subview "codeinjection")}}
                        <div class="settings-menu-header subview">
                            <button {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
                            <h4>Code Injection</h4>
                            <div style="width:23px;"></div>
                        </div>

                        <div class="settings-menu-content settings-menu-content-codeinjection">
                            <form {{action "discardEnter" on="submit"}}>
                                {{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="codeinjectionHead"}}
                                    <label for="codeinjection-head">Post Header <code>\{{ghost_head}}</code></label>
                                    {{gh-cm-editor codeinjectionHeadScratch
                                        id="post-setting-codeinjection-head"
                                        class="post-setting-codeinjection"
                                        name="post-setting-codeinjection-head"
                                        focusOut=(action "setHeaderInjection" codeinjectionHeadScratch)
                                        stopEnterKeyDownPropagation="true"
                                        update=(action (mut codeinjectionHeadScratch))
                                        data-test-field="codeinjection-head"}}
                                    {{gh-error-message errors=post.errors property="codeinjectionHead" data-test-error="codeinjection-head"}}
                                {{/gh-form-group}}

                                {{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="codeinjectionFoot"}}
                                    <label for="codeinjection-foot">Post Footer <code>\{{ghost_foot}}</code></label>
                                    {{gh-cm-editor codeinjectionFootScratch
                                        id="post-setting-codeinjection-foot"
                                        class="post-setting-codeinjection"
                                        name="post-setting-codeinjection-foot"
                                        focusOut=(action "setFooterInjection" codeinjectionFootScratch)
                                        stopEnterKeyDownPropagation="true"
                                        update=(action (mut codeinjectionFootScratch))
                                        data-test-field="codeinjection-foot"}}
                                    {{gh-error-message errors=post.errors property="codeinjectionFoot" data-test-error="codeinjection-foot"}}
                                {{/gh-form-group}}
                            </form>
                        </div>
                    {{/if}}
                {{/if}}
            </div>
        </div>
    </div>
</div>

{{!--
    _showThrobbers is on a timer so that throbbers don't get positioned until
    the slide-in animation has finished and it gets toggled when the meta
    pane is shown
--}}
{{#if _showThrobbers}}
    {{gh-tour-item "static-post"
        target="label[for='static-page'] p"
        throbberAttachment="middle middle"
        throbberOffset="0px 33px"
        popoverTriangleClass="bottom-right"
    }}

    {{gh-tour-item "featured-post"
        target="label[for='featured'] p"
        throbberAttachment="middle middle"
        throbberOffset="0px -20px"
        popoverTriangleClass="bottom-right"
    }}
{{/if}}