mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 09:03:12 +03:00
Updated UX for accessing Audit log
refs. https://github.com/TryGhost/Toolbox/issues/356 - The entry for Audit log had been temporarily put on the top level Settings screen. Instead it's now accessible from Settings / General from a generic About box which had been moved from the What's new page. This also required to update the layout of the What's new page a little bit.
This commit is contained in:
Peter Zimon
parent
3831d8d479
commit
b3d2f2ef1f
@ -1366,11 +1366,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gh-expandable-header .gh-expandable-description {
|
.gh-expandable-header .gh-expandable-description {
|
||||||
margin: 0;
|
margin: 4px 0 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: var(--midgrey);
|
color: var(--midgrey);
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
line-height: 1.45em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-expandable-content {
|
.gh-expandable-content {
|
||||||
|
|||||||
@ -510,6 +510,15 @@
|
|||||||
|
|
||||||
/* General
|
/* General
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
.gh-general-settings {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 1fr;
|
||||||
|
grid-gap: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-general-settings .gh-expandable-header .gh-expandable-description {
|
||||||
|
max-width: 620px;
|
||||||
|
}
|
||||||
|
|
||||||
.gh-seo-settings {
|
.gh-seo-settings {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -557,6 +566,19 @@
|
|||||||
margin-right: 32px;
|
margin-right: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gh-general-settings .gh-seo-settings {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-general-settings .gh-seo-settings .form-group {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-general-settings .gh-seo-settings-left,
|
||||||
|
.gh-general-settings .gh-seo-container {
|
||||||
|
max-width: 591px;
|
||||||
|
}
|
||||||
|
|
||||||
.gh-twitter-settings {
|
.gh-twitter-settings {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
@ -596,6 +618,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gh-general-settings .gh-twitter-settings {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-general-settings .gh-twitter-settings .form-group {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-general-settings .gh-twitter-settings-left,
|
||||||
|
.gh-general-settings .gh-twitter-container {
|
||||||
|
max-width: 591px;
|
||||||
|
}
|
||||||
|
|
||||||
.gh-og-settings {
|
.gh-og-settings {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
@ -635,6 +670,85 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gh-general-settings .gh-og-settings {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-general-settings .gh-og-settings .form-group {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-general-settings .gh-og-settings-left,
|
||||||
|
.gh-general-settings .gh-og-container {
|
||||||
|
max-width: 591px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-general-settings .gh-about-box {
|
||||||
|
margin-top: 19px;
|
||||||
|
position: relative;
|
||||||
|
top: unset;
|
||||||
|
right: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-general-settings .gh-copyright-info {
|
||||||
|
border-top: none;
|
||||||
|
max-width: 350px;
|
||||||
|
margin-top: 12px;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-about-links {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
margin-top: 12px;
|
||||||
|
padding-top: 12px;
|
||||||
|
border-top: 1px solid var(--lightgrey-l2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-about-links li {
|
||||||
|
margin: 0 0 4px;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
line-height: 1.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-about-links li a span {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-about-links li a span svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-about-links li a {
|
||||||
|
color: var(--middarkgrey);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-about-links li a:hover {
|
||||||
|
color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-about-links:last-of-type {
|
||||||
|
margin-bottom: -12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-about-links .calendar-icon {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-about-links li a:hover .hover-stroke path {
|
||||||
|
stroke: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-about-links li a:hover .hover-fill path {
|
||||||
|
fill: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
/* Navigation
|
/* Navigation
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
/* About /ghost/settings/about/
|
/* About /ghost/settings/about/
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
||||||
.gh-about-logo svg {
|
.gh-about-logo svg {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 120px;
|
width: 120px;
|
||||||
@ -19,6 +18,15 @@
|
|||||||
grid-gap: 80px;
|
grid-gap: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gh-whats-new-canvas .gh-about-container {
|
||||||
|
display: flex;
|
||||||
|
grid-template-columns: unset;
|
||||||
|
grid-gap: unset;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 920px;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
.gh-about-box {
|
.gh-about-box {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 96px;
|
top: 96px;
|
||||||
@ -124,11 +132,17 @@
|
|||||||
border-top: 1px solid var(--lightgrey-l2);
|
border-top: 1px solid var(--lightgrey-l2);
|
||||||
padding-top: 16px;
|
padding-top: 16px;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
|
line-height: 1.45em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* What's new */
|
/* What's new */
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
.gh-whats-new-canvas .gh-canvas-header-content {
|
||||||
|
border-bottom: 1px solid var(--whitegrey);
|
||||||
|
margin-bottom: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
.gh-whats-new {
|
.gh-whats-new {
|
||||||
flex-grow: 2;
|
flex-grow: 2;
|
||||||
color: var(--darkgrey);
|
color: var(--darkgrey);
|
||||||
@ -215,24 +229,35 @@
|
|||||||
max-width: 620px;
|
max-width: 620px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gh-whats-new-canvas .gh-wn-content {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
.gh-wn-entry h4 {
|
.gh-wn-entry h4 {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: 0.3px;
|
letter-spacing: 0;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin: 24px 0 4px;
|
margin: 24px 0 4px;
|
||||||
color: var(--midlightgrey);
|
color: var(--midlightgrey);
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-wn-entry h1 {
|
.gh-wn-entry h1 {
|
||||||
font-size: 3.1rem;
|
font-size: 3.7rem;
|
||||||
line-height: 1.3em;
|
line-height: 1.3em;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0px;
|
letter-spacing: -0.021em;
|
||||||
color: var(--black);
|
color: var(--black);
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gh-whats-new-canvas .gh-wn-entry h1,
|
||||||
|
.gh-whats-new-canvas .gh-wn-entry h4 {
|
||||||
|
max-width: 620px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.gh-wn-entry h2 {
|
.gh-wn-entry h2 {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
font-size: 1.9rem;
|
font-size: 1.9rem;
|
||||||
|
|||||||
@ -82,16 +82,6 @@
|
|||||||
<p>Testing ground for new features</p>
|
<p>Testing ground for new features</p>
|
||||||
</div>
|
</div>
|
||||||
</LinkTo>
|
</LinkTo>
|
||||||
|
|
||||||
{{#if (feature 'auditLog')}}
|
|
||||||
<LinkTo class="gh-setting-group" @route="settings.audit-log" data-test-nav="audit-log">
|
|
||||||
<span class="blue">{{svg-jar "TODO"}}</span>
|
|
||||||
<div>
|
|
||||||
<h4>Audit log</h4>
|
|
||||||
<p>View staff user actions</p>
|
|
||||||
</div>
|
|
||||||
</LinkTo>
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -17,429 +17,513 @@
|
|||||||
@modifier="action wide" />
|
@modifier="action wide" />
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
|
<div class="{{if (feature 'auditLog') "gh-general-settings"}}">
|
||||||
<div class="gh-main-section">
|
<div>
|
||||||
<h4 class="gh-main-section-header small bn">Publication info</h4>
|
<div class="gh-main-section">
|
||||||
<section class="gh-expandable">
|
<h4 class="gh-main-section-header small bn">Publication info</h4>
|
||||||
<div class="gh-expandable-block">
|
<section class="gh-expandable">
|
||||||
<div class="gh-expandable-header">
|
<div class="gh-expandable-block">
|
||||||
<div>
|
<div class="gh-expandable-header">
|
||||||
<h4 class="gh-expandable-title">Title & description</h4>
|
<div>
|
||||||
<p class="gh-expandable-description">The details used to identify your publication around the web</p>
|
<h4 class="gh-expandable-title">Title & description</h4>
|
||||||
</div>
|
<p class="gh-expandable-description">The details used to identify your publication around the web</p>
|
||||||
<button type="button" class="gh-btn" {{action (toggle "pubInfoOpen" this)}} data-test-toggle-pub-info><span>{{if this.pubInfoOpen "Close" "Expand"}}</span></button>
|
|
||||||
</div>
|
|
||||||
<div class="gh-expandable-content">
|
|
||||||
{{#liquid-if this.pubInfoOpen}}
|
|
||||||
<div class="gh-setting-content-extended">
|
|
||||||
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="title">
|
|
||||||
<GhTextInput
|
|
||||||
@value={{readonly this.settings.title}}
|
|
||||||
@input={{action (mut this.settings.title) value="target.value"}}
|
|
||||||
@focus-out={{action "validate" "title" target=this.settings}}
|
|
||||||
data-test-title-input={{true}}
|
|
||||||
/>
|
|
||||||
<GhErrorMessage @errors={{this.settings.errors}} @property="title" />
|
|
||||||
<p>The name of your site</p>
|
|
||||||
</GhFormGroup>
|
|
||||||
|
|
||||||
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="description" @class="description-container">
|
|
||||||
<GhTextInput
|
|
||||||
@value={{readonly this.settings.description}}
|
|
||||||
@input={{action (mut this.settings.description) value="target.value"}}
|
|
||||||
@focus-out={{action "validate" "description" target=this.settings}}
|
|
||||||
data-test-description-input={{true}}
|
|
||||||
/>
|
|
||||||
<GhErrorMessage @errors={{this.settings.errors}} @property="description"/>
|
|
||||||
<p>Used in your theme, meta data and search results</p>
|
|
||||||
</GhFormGroup>
|
|
||||||
</div>
|
|
||||||
{{/liquid-if}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gh-expandable-block">
|
|
||||||
<div class="gh-expandable-header">
|
|
||||||
<div>
|
|
||||||
<h4 class="gh-expandable-title">Site timezone</h4>
|
|
||||||
<p class="gh-expandable-description">Set the time and date of your publication, used for all published posts</p>
|
|
||||||
</div>
|
|
||||||
<button type="button" class="gh-btn" {{action (toggle "timezoneOpen" this)}} data-test-toggle-timezone><span>{{if this.timezoneOpen "Close" "Expand"}}</span></button>
|
|
||||||
</div>
|
|
||||||
<div class="gh-expandable-content">
|
|
||||||
{{#liquid-if this.timezoneOpen}}
|
|
||||||
<div class="gh-setting-content-extended">
|
|
||||||
<GhTimezoneSelect
|
|
||||||
@timezone={{this.settings.timezone}}
|
|
||||||
@availableTimezones={{this.availableTimezones}}
|
|
||||||
@update={{action "setTimezone"}} />
|
|
||||||
</div>
|
|
||||||
{{/liquid-if}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gh-expandable-block">
|
|
||||||
<div class="gh-expandable-header">
|
|
||||||
<div>
|
|
||||||
<h4 class="gh-expandable-title">Publication Language</h4>
|
|
||||||
<p class="gh-expandable-description">Set the language/locale which is used on your site</p>
|
|
||||||
</div>
|
|
||||||
<button type="button" class="gh-btn" {{action (toggle "langOpen" this)}} data-test-toggle-lang><span>{{if this.langOpen "Close" "Expand"}}</span></button>
|
|
||||||
</div>
|
|
||||||
<div class="gh-expandable-content">
|
|
||||||
{{#liquid-if this.langOpen}}
|
|
||||||
<div class="gh-setting-content-extended">
|
|
||||||
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="locale">
|
|
||||||
<GhTextInput
|
|
||||||
@value={{readonly this.settings.locale}}
|
|
||||||
@input={{action (mut this.settings.locale) value="target.value"}}
|
|
||||||
@focus-out={{action "validate" "locale" target=this.settings}}
|
|
||||||
data-test-input="locale"
|
|
||||||
/>
|
|
||||||
<GhErrorMessage @errors={{this.settings.errors}} @property="locale" />
|
|
||||||
<p>Default: English (<strong>en</strong>); you can add translation files to your theme for <a href="https://ghost.org/docs/themes/helpers/translate/" target="_blank" rel="noopener noreferrer">any language</a></p>
|
|
||||||
</GhFormGroup>
|
|
||||||
</div>
|
|
||||||
{{/liquid-if}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gh-main-section">
|
|
||||||
<h4 class="gh-main-section-header small bn">Site meta settings</h4>
|
|
||||||
<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" {{action (toggle "metaDataOpen" this)}} data-test-toggle-meta><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.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="metaTitle">
|
|
||||||
<label for="metaTitle">Meta title</label>
|
|
||||||
<GhTextInput
|
|
||||||
@id="metaTitle"
|
|
||||||
@type="text"
|
|
||||||
@placeholder={{truncate this.settings.title 70}}
|
|
||||||
@value={{readonly this.settings.metaTitle}}
|
|
||||||
@input={{action (mut this.settings.metaTitle) value="target.value"}}
|
|
||||||
data-test-input="metaTitle"
|
|
||||||
/>
|
|
||||||
<GhErrorMessage @errors={{this.settings.errors}} @property="metaTitle" data-test-error="metaTitle" />
|
|
||||||
<p>Recommended: <b>70</b> characters. You’ve used <b>{{gh-count-down-characters this.settings.metaTitle 70}}</b></p>
|
|
||||||
</GhFormGroup>
|
|
||||||
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="metaDescription">
|
|
||||||
<label for="metaDescription">Meta description</label>
|
|
||||||
<GhTextarea
|
|
||||||
@id="metaDescription"
|
|
||||||
@type="text"
|
|
||||||
@placeholder={{truncate this.settings.description 300}}
|
|
||||||
@value={{readonly this.settings.metaDescription}}
|
|
||||||
@input={{action (mut this.settings.metaDescription) value="target.value"}}
|
|
||||||
data-test-input="metaDescription"
|
|
||||||
/>
|
|
||||||
<GhErrorMessage @errors={{this.settings.errors}} @property="metaDescription" data-test-error="metaDescription" />
|
|
||||||
<p>Recommended: <b>156</b> characters. You’ve used <b>{{gh-count-down-characters this.settings.metaDescription 156}}</b></p>
|
|
||||||
</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 mb6">
|
|
||||||
{{svg-jar "google"}}
|
|
||||||
<div class="gh-seo-search-bar">{{svg-jar "google-search"}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="gh-seo-preview-link">{{this.config.blogDomain}}</div>
|
|
||||||
<div class="gh-seo-preview-title">{{or this.settings.metaTitle this.settings.title}}</div>
|
|
||||||
<div class="gh-seo-preview-desc">
|
|
||||||
{{truncate (or this.settings.metaDescription this.settings.description) 159}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<button type="button" class="gh-btn" {{action (toggle "pubInfoOpen" this)}} data-test-toggle-pub-info><span>{{if this.pubInfoOpen "Close" "Expand"}}</span></button>
|
||||||
</div>
|
</div>
|
||||||
{{/liquid-if}}
|
<div class="gh-expandable-content">
|
||||||
</div>
|
{{#liquid-if this.pubInfoOpen}}
|
||||||
</div>
|
<div class="gh-setting-content-extended">
|
||||||
|
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="title">
|
||||||
<div class="gh-expandable-block">
|
|
||||||
<div class="gh-expandable-header">
|
|
||||||
<div>
|
|
||||||
<h4 class="gh-expandable-title">Twitter card</h4>
|
|
||||||
<p class="gh-expandable-description">Customize structured data of your site for Twitter</p>
|
|
||||||
</div>
|
|
||||||
<button type="button" class="gh-btn" {{action (toggle "twitterCardOpen" this)}} data-test-toggle-twitter><span>{{if this.twitterCardOpen "Close" "Expand"}}</span></button>
|
|
||||||
</div>
|
|
||||||
<div class="gh-expandable-content">
|
|
||||||
{{#liquid-if this.twitterCardOpen}}
|
|
||||||
<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">
|
|
||||||
<label>Twitter image</label>
|
|
||||||
<GhFormGroup>
|
|
||||||
<GhImageUploaderWithPreview
|
|
||||||
@image={{this.settings.twitterImage}}
|
|
||||||
@text="Add Twitter image"
|
|
||||||
@allowUnsplash={{true}}
|
|
||||||
@update={{action (mut this.settings.twitterImage)}}
|
|
||||||
@remove={{action (mut this.settings.twitterImage) ""}}
|
|
||||||
/>
|
|
||||||
</GhFormGroup>
|
|
||||||
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="twitterTitle">
|
|
||||||
<label for="twitterTitle">Twitter title</label>
|
|
||||||
<GhTextInput
|
<GhTextInput
|
||||||
@id="twitterTitle"
|
@value={{readonly this.settings.title}}
|
||||||
@type="text"
|
@input={{action (mut this.settings.title) value="target.value"}}
|
||||||
@placeholder={{truncate this.settings.title 70}}
|
@focus-out={{action "validate" "title" target=this.settings}}
|
||||||
@value={{readonly this.settings.twitterTitle}}
|
data-test-title-input={{true}}
|
||||||
@input={{action (mut this.settings.twitterTitle) value="target.value"}}
|
|
||||||
data-test-input="twitterTitle"
|
|
||||||
/>
|
/>
|
||||||
<GhErrorMessage @errors={{this.settings.errors}} @property="twitterTitle" data-test-error="twitterTitle" />
|
<GhErrorMessage @errors={{this.settings.errors}} @property="title" />
|
||||||
|
<p>The name of your site</p>
|
||||||
</GhFormGroup>
|
</GhFormGroup>
|
||||||
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="twitterDescription">
|
|
||||||
<label for="twitterDescription">Twitter description</label>
|
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="description" @class="description-container">
|
||||||
<GhTextarea
|
<GhTextInput
|
||||||
@id="twitterDescription"
|
@value={{readonly this.settings.description}}
|
||||||
@placeholder={{truncate this.settings.description 300}}
|
@input={{action (mut this.settings.description) value="target.value"}}
|
||||||
@value={{readonly this.settings.twitterDescription}}
|
@focus-out={{action "validate" "description" target=this.settings}}
|
||||||
@input={{action (mut this.settings.twitterDescription) value="target.value"}}
|
data-test-description-input={{true}}
|
||||||
data-test-input="twitterDescription"
|
|
||||||
/>
|
/>
|
||||||
<GhErrorMessage @errors={{this.settings.errors}} @property="twitterDescription" data-test-error="twitterDescription" />
|
<GhErrorMessage @errors={{this.settings.errors}} @property="description"/>
|
||||||
|
<p>Used in your theme, meta data and search results</p>
|
||||||
</GhFormGroup>
|
</GhFormGroup>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-basis-1-2-m flex-basis-1-3-l">
|
{{/liquid-if}}
|
||||||
<label>Twitter preview</label>
|
</div>
|
||||||
<div class="gh-twitter-container">
|
</div>
|
||||||
<div class="flex ma4">
|
|
||||||
<span>{{svg-jar "social-twitter" class="social-icon"}}</span>
|
<div class="gh-expandable-block">
|
||||||
<div class="w-100">
|
<div class="gh-expandable-header">
|
||||||
<span class="gh-social-og-title">{{or this.settings.metaTitle this.settings.title}}</span>
|
<div>
|
||||||
<span class="gh-social-og-time">12 hrs</span>
|
<h4 class="gh-expandable-title">Site timezone</h4>
|
||||||
<div class="flex flex-column mt2 mb3">
|
<p class="gh-expandable-description">Set the time and date of your publication, used for all published posts</p>
|
||||||
<span class="gh-social-og-desc w-100 mb2" />
|
</div>
|
||||||
<span class="gh-social-og-desc w-60" />
|
<button type="button" class="gh-btn" {{action (toggle "timezoneOpen" this)}} data-test-toggle-timezone><span>{{if this.timezoneOpen "Close" "Expand"}}</span></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="gh-social-twitter-post-preview">
|
<div class="gh-expandable-content">
|
||||||
{{#if this.settings.twitterImage}}
|
{{#liquid-if this.timezoneOpen}}
|
||||||
<div class="gh-social-twitter-preview-image" style={{background-image-style this.settings.twitterImage}}></div>
|
<div class="gh-setting-content-extended">
|
||||||
{{/if}}
|
<GhTimezoneSelect
|
||||||
<div class="gh-social-twitter-preview-content">
|
@timezone={{this.settings.timezone}}
|
||||||
<div class="gh-social-twitter-preview-title">{{or this.settings.twitterTitle this.settings.title}}</div>
|
@availableTimezones={{this.availableTimezones}}
|
||||||
<div class="gh-social-twitter-preview-desc">{{truncate (or this.settings.twitterDescription this.settings.description)}}</div>
|
@update={{action "setTimezone"}} />
|
||||||
<div class="gh-social-twitter-preview-meta">
|
</div>
|
||||||
{{svg-jar "twitter-link"}}
|
{{/liquid-if}}
|
||||||
{{this.config.blogDomain}}
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gh-expandable-block">
|
||||||
|
<div class="gh-expandable-header">
|
||||||
|
<div>
|
||||||
|
<h4 class="gh-expandable-title">Publication Language</h4>
|
||||||
|
<p class="gh-expandable-description">Set the language/locale which is used on your site</p>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="gh-btn" {{action (toggle "langOpen" this)}} data-test-toggle-lang><span>{{if this.langOpen "Close" "Expand"}}</span></button>
|
||||||
|
</div>
|
||||||
|
<div class="gh-expandable-content">
|
||||||
|
{{#liquid-if this.langOpen}}
|
||||||
|
<div class="gh-setting-content-extended">
|
||||||
|
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="locale">
|
||||||
|
<GhTextInput
|
||||||
|
@value={{readonly this.settings.locale}}
|
||||||
|
@input={{action (mut this.settings.locale) value="target.value"}}
|
||||||
|
@focus-out={{action "validate" "locale" target=this.settings}}
|
||||||
|
data-test-input="locale"
|
||||||
|
/>
|
||||||
|
<GhErrorMessage @errors={{this.settings.errors}} @property="locale" />
|
||||||
|
<p>Default: English (<strong>en</strong>); you can add translation files to your theme for <a href="https://ghost.org/docs/themes/helpers/translate/" target="_blank" rel="noopener noreferrer">any language</a></p>
|
||||||
|
</GhFormGroup>
|
||||||
|
</div>
|
||||||
|
{{/liquid-if}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gh-main-section">
|
||||||
|
<h4 class="gh-main-section-header small bn">Site meta settings</h4>
|
||||||
|
<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" {{action (toggle "metaDataOpen" this)}} data-test-toggle-meta><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.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="metaTitle">
|
||||||
|
<label for="metaTitle">Meta title</label>
|
||||||
|
<GhTextInput
|
||||||
|
@id="metaTitle"
|
||||||
|
@type="text"
|
||||||
|
@placeholder={{truncate this.settings.title 70}}
|
||||||
|
@value={{readonly this.settings.metaTitle}}
|
||||||
|
@input={{action (mut this.settings.metaTitle) value="target.value"}}
|
||||||
|
data-test-input="metaTitle"
|
||||||
|
/>
|
||||||
|
<GhErrorMessage @errors={{this.settings.errors}} @property="metaTitle" data-test-error="metaTitle" />
|
||||||
|
<p>Recommended: <b>70</b> characters. You’ve used <b>{{gh-count-down-characters this.settings.metaTitle 70}}</b></p>
|
||||||
|
</GhFormGroup>
|
||||||
|
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="metaDescription">
|
||||||
|
<label for="metaDescription">Meta description</label>
|
||||||
|
<GhTextarea
|
||||||
|
@id="metaDescription"
|
||||||
|
@type="text"
|
||||||
|
@placeholder={{truncate this.settings.description 300}}
|
||||||
|
@value={{readonly this.settings.metaDescription}}
|
||||||
|
@input={{action (mut this.settings.metaDescription) value="target.value"}}
|
||||||
|
data-test-input="metaDescription"
|
||||||
|
/>
|
||||||
|
<GhErrorMessage @errors={{this.settings.errors}} @property="metaDescription" data-test-error="metaDescription" />
|
||||||
|
<p>Recommended: <b>156</b> characters. You’ve used <b>{{gh-count-down-characters this.settings.metaDescription 156}}</b></p>
|
||||||
|
</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 mb6">
|
||||||
|
{{svg-jar "google"}}
|
||||||
|
<div class="gh-seo-search-bar">{{svg-jar "google-search"}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-seo-preview-link">{{this.config.blogDomain}}</div>
|
||||||
|
<div class="gh-seo-preview-title">{{or this.settings.metaTitle this.settings.title}}</div>
|
||||||
|
<div class="gh-seo-preview-desc">
|
||||||
|
{{truncate (or this.settings.metaDescription this.settings.description) 159}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="gh-social-twitter-reactions">
|
</div>
|
||||||
<div class="flex items-center">{{svg-jar "twitter-comment"}}2</div>
|
</div>
|
||||||
<div class="flex items-center">{{svg-jar "twitter-retweet"}}11</div>
|
</div>
|
||||||
<div class="flex items-center">{{svg-jar "twitter-like"}}32</div>
|
{{/liquid-if}}
|
||||||
<div class="flex items-center">{{svg-jar "twitter-share"}}</div>
|
</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">Customize structured data of your site for Twitter</p>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="gh-btn" {{action (toggle "twitterCardOpen" this)}} data-test-toggle-twitter><span>{{if this.twitterCardOpen "Close" "Expand"}}</span></button>
|
||||||
|
</div>
|
||||||
|
<div class="gh-expandable-content">
|
||||||
|
{{#liquid-if this.twitterCardOpen}}
|
||||||
|
<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">
|
||||||
|
<label>Twitter image</label>
|
||||||
|
<GhFormGroup>
|
||||||
|
<GhImageUploaderWithPreview
|
||||||
|
@image={{this.settings.twitterImage}}
|
||||||
|
@text="Add Twitter image"
|
||||||
|
@allowUnsplash={{true}}
|
||||||
|
@update={{action (mut this.settings.twitterImage)}}
|
||||||
|
@remove={{action (mut this.settings.twitterImage) ""}}
|
||||||
|
/>
|
||||||
|
</GhFormGroup>
|
||||||
|
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="twitterTitle">
|
||||||
|
<label for="twitterTitle">Twitter title</label>
|
||||||
|
<GhTextInput
|
||||||
|
@id="twitterTitle"
|
||||||
|
@type="text"
|
||||||
|
@placeholder={{truncate this.settings.title 70}}
|
||||||
|
@value={{readonly this.settings.twitterTitle}}
|
||||||
|
@input={{action (mut this.settings.twitterTitle) value="target.value"}}
|
||||||
|
data-test-input="twitterTitle"
|
||||||
|
/>
|
||||||
|
<GhErrorMessage @errors={{this.settings.errors}} @property="twitterTitle" data-test-error="twitterTitle" />
|
||||||
|
</GhFormGroup>
|
||||||
|
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="twitterDescription">
|
||||||
|
<label for="twitterDescription">Twitter description</label>
|
||||||
|
<GhTextarea
|
||||||
|
@id="twitterDescription"
|
||||||
|
@placeholder={{truncate this.settings.description 300}}
|
||||||
|
@value={{readonly this.settings.twitterDescription}}
|
||||||
|
@input={{action (mut this.settings.twitterDescription) value="target.value"}}
|
||||||
|
data-test-input="twitterDescription"
|
||||||
|
/>
|
||||||
|
<GhErrorMessage @errors={{this.settings.errors}} @property="twitterDescription" data-test-error="twitterDescription" />
|
||||||
|
</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.settings.twitterImage}}
|
||||||
|
<div class="gh-social-twitter-preview-image" style={{background-image-style this.settings.twitterImage}}></div>
|
||||||
|
{{/if}}
|
||||||
|
<div class="gh-social-twitter-preview-content">
|
||||||
|
<div class="gh-social-twitter-preview-title">{{or this.settings.twitterTitle this.settings.title}}</div>
|
||||||
|
<div class="gh-social-twitter-preview-desc">{{truncate (or this.settings.twitterDescription this.settings.description)}}</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{{/liquid-if}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{/liquid-if}}
|
|
||||||
</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 structured data of your site</p>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="gh-btn" {{action (toggle "facebookCardOpen" this)}} data-test-toggle-facebook><span>{{if this.facebookCardOpen "Close" "Expand"}}</span></button>
|
||||||
|
</div>
|
||||||
|
<div class="gh-expandable-content">
|
||||||
|
{{#liquid-if this.facebookCardOpen}}
|
||||||
|
<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">
|
||||||
|
<label>Facebook image</label>
|
||||||
|
<GhFormGroup>
|
||||||
|
<GhImageUploaderWithPreview
|
||||||
|
@image={{this.settings.ogImage}}
|
||||||
|
@text="Add Facebook image"
|
||||||
|
@allowUnsplash={{true}}
|
||||||
|
@update={{action (mut this.settings.ogImage)}}
|
||||||
|
@remove={{action (mut this.settings.ogImage) ""}}
|
||||||
|
/>
|
||||||
|
</GhFormGroup>
|
||||||
|
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="ogTitle">
|
||||||
|
<label for="ogTitle">Facebook title</label>
|
||||||
|
<GhTextInput
|
||||||
|
@id="ogTitle"
|
||||||
|
@type="text"
|
||||||
|
@placeholder={{truncate this.settings.title 70}}
|
||||||
|
@value={{readonly this.settings.ogTitle}}
|
||||||
|
@input={{action (mut this.settings.ogTitle) value="target.value"}}
|
||||||
|
data-test-input="ogTitle"
|
||||||
|
/>
|
||||||
|
<GhErrorMessage @errors={{this.settings.errors}} @property="ogTitle" data-test-error="ogTitle" />
|
||||||
|
</GhFormGroup>
|
||||||
|
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="ogDescription">
|
||||||
|
<label for="ogDescription">Facebook description</label>
|
||||||
|
<GhTextarea
|
||||||
|
@id="ogDescription"
|
||||||
|
@placeholder={{truncate this.settings.description 300}}
|
||||||
|
@value={{readonly this.settings.ogDescription}}
|
||||||
|
@input={{action (mut this.settings.ogDescription) value="target.value"}}
|
||||||
|
data-test-input="ogDescription"
|
||||||
|
/>
|
||||||
|
<GhErrorMessage @errors={{this.settings.errors}} @property="ogDescription" data-test-error="ogDescription" />
|
||||||
|
</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.settings.ogImage}}
|
||||||
|
<div class="gh-social-og-preview-image" style={{background-image-style this.settings.ogImage}}></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 (or this.settings.ogTitle this.settings.title)}}</div>
|
||||||
|
<div class="gh-social-og-preview-desc">{{truncate (or this.settings.ogDescription this.settings.description)}}</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">Social accounts</h4>
|
||||||
|
<p class="gh-expandable-description">Link your social accounts for full structured data and rich card support</p>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="gh-btn" {{action (toggle "socialOpen" this)}} data-test-toggle-social><span>{{if this.socialOpen "Close" "Expand"}}</span></button>
|
||||||
|
</div>
|
||||||
|
<div class="gh-expandable-content">
|
||||||
|
{{#liquid-if this.socialOpen}}
|
||||||
|
<div class="gh-setting-content-extended">
|
||||||
|
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="facebook">
|
||||||
|
<GhTextInput
|
||||||
|
@type="url"
|
||||||
|
@placeholder="https://www.facebook.com/ghost"
|
||||||
|
@autocorrect="off"
|
||||||
|
@value={{readonly this.settings.facebook}}
|
||||||
|
@input={{action (mut this._scratchFacebook) value="target.value"}}
|
||||||
|
@focus-out={{action "validateFacebookUrl"}}
|
||||||
|
data-test-facebook-input={{true}}
|
||||||
|
/>
|
||||||
|
<GhErrorMessage @errors={{this.settings.errors}} @property="facebook" data-test-facebook-error=true />
|
||||||
|
<p>URL of your publication's Facebook Page</p>
|
||||||
|
</GhFormGroup>
|
||||||
|
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="twitter">
|
||||||
|
<GhTextInput
|
||||||
|
@type="url"
|
||||||
|
@placeholder="https://twitter.com/ghost"
|
||||||
|
@autocorrect="off"
|
||||||
|
@value={{readonly this.settings.twitter}}
|
||||||
|
@input={{action (mut this._scratchTwitter) value="target.value"}}
|
||||||
|
@focus-out={{action "validateTwitterUrl"}}
|
||||||
|
data-test-twitter-input={{true}}
|
||||||
|
/>
|
||||||
|
<GhErrorMessage @errors={{this.settings.errors}} @property="twitter" data-test-twitter-error=true />
|
||||||
|
<p>URL of your publication's Twitter profile</p>
|
||||||
|
</GhFormGroup>
|
||||||
|
</div>
|
||||||
|
{{/liquid-if}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="gh-expandable-block">
|
<div class="gh-main-section">
|
||||||
<div class="gh-expandable-header">
|
<h4 class="gh-main-section-header small bn">Advanced settings</h4>
|
||||||
<div>
|
<section class="gh-expandable">
|
||||||
<h4 class="gh-expandable-title">Facebook card</h4>
|
<div class="gh-expandable-block">
|
||||||
<p class="gh-expandable-description">Customize structured data of your site</p>
|
<div class="gh-expandable-header">
|
||||||
</div>
|
<div>
|
||||||
<button type="button" class="gh-btn" {{action (toggle "facebookCardOpen" this)}} data-test-toggle-facebook><span>{{if this.facebookCardOpen "Close" "Expand"}}</span></button>
|
<h4 class="gh-expandable-title">Make this site private</h4>
|
||||||
</div>
|
<p class="gh-expandable-description">
|
||||||
<div class="gh-expandable-content">
|
Enable protection with a simple shared password. All search engine optimization and social features will be disabled.
|
||||||
{{#liquid-if this.facebookCardOpen}}
|
</p>
|
||||||
<div class="gh-setting-content-extended">
|
</div>
|
||||||
<div class="gh-og-settings">
|
<div class="for-switch">
|
||||||
<div class="gh-og-settings-left flex-basis-1-2-m flex-basis-2-3-l">
|
<label class="switch" for="settings-private">
|
||||||
<label>Facebook image</label>
|
<input
|
||||||
<GhFormGroup>
|
type="checkbox"
|
||||||
<GhImageUploaderWithPreview
|
checked={{this.settings.isPrivate}}
|
||||||
@image={{this.settings.ogImage}}
|
id="settings-private"
|
||||||
@text="Add Facebook image"
|
onclick={{action "toggleIsPrivate" value="target.checked"}}
|
||||||
@allowUnsplash={{true}}
|
data-test-private-checkbox
|
||||||
@update={{action (mut this.settings.ogImage)}}
|
>
|
||||||
@remove={{action (mut this.settings.ogImage) ""}}
|
<span class="input-toggle-component"></span>
|
||||||
/>
|
</label>
|
||||||
</GhFormGroup>
|
</div>
|
||||||
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="ogTitle">
|
</div>
|
||||||
<label for="ogTitle">Facebook title</label>
|
<div class="gh-expandable-content">
|
||||||
|
{{#if this.settings.isPrivate}}
|
||||||
|
<div class="gh-setting-content-extended pt4 pb4">
|
||||||
|
<span class="avoid-break-out">
|
||||||
|
A private RSS feed is available at
|
||||||
|
<a href="{{this.privateRSSUrl}}" target="_blank" rel="noopener noreferrer">{{this.privateRSSUrl}}</a>
|
||||||
|
</span>
|
||||||
|
<GhFormGroup @class="no-margin pt2" @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="password">
|
||||||
<GhTextInput
|
<GhTextInput
|
||||||
@id="ogTitle"
|
@value={{readonly this.settings.password}}
|
||||||
@type="text"
|
@name="general[password]"
|
||||||
@placeholder={{truncate this.settings.title 70}}
|
@focus-out={{action "validate" "password" target=this.settings}}
|
||||||
@value={{readonly this.settings.ogTitle}}
|
@input={{action (mut this.settings.password) value="target.value"}}
|
||||||
@input={{action (mut this.settings.ogTitle) value="target.value"}}
|
data-test-password-input={{true}}
|
||||||
data-test-input="ogTitle"
|
|
||||||
/>
|
/>
|
||||||
<GhErrorMessage @errors={{this.settings.errors}} @property="ogTitle" data-test-error="ogTitle" />
|
<GhErrorMessage @errors={{this.settings.errors}} @property="password" data-test-password-error=true />
|
||||||
</GhFormGroup>
|
<p>Set the password for this site</p>
|
||||||
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="ogDescription">
|
|
||||||
<label for="ogDescription">Facebook description</label>
|
|
||||||
<GhTextarea
|
|
||||||
@id="ogDescription"
|
|
||||||
@placeholder={{truncate this.settings.description 300}}
|
|
||||||
@value={{readonly this.settings.ogDescription}}
|
|
||||||
@input={{action (mut this.settings.ogDescription) value="target.value"}}
|
|
||||||
data-test-input="ogDescription"
|
|
||||||
/>
|
|
||||||
<GhErrorMessage @errors={{this.settings.errors}} @property="ogDescription" data-test-error="ogDescription" />
|
|
||||||
</GhFormGroup>
|
</GhFormGroup>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-basis-1-2-m flex-basis-1-3-l">
|
{{/if}}
|
||||||
<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.settings.ogImage}}
|
|
||||||
<div class="gh-social-og-preview-image" style={{background-image-style this.settings.ogImage}}></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 (or this.settings.ogTitle this.settings.title)}}</div>
|
|
||||||
<div class="gh-social-og-preview-desc">{{truncate (or this.settings.ogDescription this.settings.description)}}</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>
|
</div>
|
||||||
{{/liquid-if}}
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="gh-expandable-block">
|
{{#if (feature 'auditLog')}}
|
||||||
<div class="gh-expandable-header">
|
<div class="gh-about-box">
|
||||||
<div>
|
<section class="gh-env-details gh-about-box grey">
|
||||||
<h4 class="gh-expandable-title">Social accounts</h4>
|
<div class="gh-about-logo">
|
||||||
<p class="gh-expandable-description">Link your social accounts for full structured data and rich card support</p>
|
{{svg-jar "ghost-logo-orb" alt="Ghost"}}
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="gh-btn" {{action (toggle "socialOpen" this)}} data-test-toggle-social><span>{{if this.socialOpen "Close" "Expand"}}</span></button>
|
|
||||||
</div>
|
|
||||||
<div class="gh-expandable-content">
|
|
||||||
{{#liquid-if this.socialOpen}}
|
|
||||||
<div class="gh-setting-content-extended">
|
|
||||||
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="facebook">
|
|
||||||
<GhTextInput
|
|
||||||
@type="url"
|
|
||||||
@placeholder="https://www.facebook.com/ghost"
|
|
||||||
@autocorrect="off"
|
|
||||||
@value={{readonly this.settings.facebook}}
|
|
||||||
@input={{action (mut this._scratchFacebook) value="target.value"}}
|
|
||||||
@focus-out={{action "validateFacebookUrl"}}
|
|
||||||
data-test-facebook-input={{true}}
|
|
||||||
/>
|
|
||||||
<GhErrorMessage @errors={{this.settings.errors}} @property="facebook" data-test-facebook-error=true />
|
|
||||||
<p>URL of your publication's Facebook Page</p>
|
|
||||||
</GhFormGroup>
|
|
||||||
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="twitter">
|
|
||||||
<GhTextInput
|
|
||||||
@type="url"
|
|
||||||
@placeholder="https://twitter.com/ghost"
|
|
||||||
@autocorrect="off"
|
|
||||||
@value={{readonly this.settings.twitter}}
|
|
||||||
@input={{action (mut this._scratchTwitter) value="target.value"}}
|
|
||||||
@focus-out={{action "validateTwitterUrl"}}
|
|
||||||
data-test-twitter-input={{true}}
|
|
||||||
/>
|
|
||||||
<GhErrorMessage @errors={{this.settings.errors}} @property="twitter" data-test-twitter-error=true />
|
|
||||||
<p>URL of your publication's Twitter profile</p>
|
|
||||||
</GhFormGroup>
|
|
||||||
</div>
|
|
||||||
{{/liquid-if}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
{{#if this.upgradeStatus.message}}
|
||||||
</div>
|
<section class="gh-upgrade-notification">
|
||||||
|
<p>
|
||||||
|
<strong>Update available!</strong> {{this.upgradeStatus.message}}
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
<div class="gh-main-section">
|
<ul class="gh-env-list">
|
||||||
<h4 class="gh-main-section-header small bn">Advanced settings</h4>
|
{{#if this.linkToGitHubReleases}}
|
||||||
<section class="gh-expandable">
|
<li><strong>Version:</strong> <a href="https://github.com/TryGhost/Ghost/releases/tag/v{{this.config.version}}" target="_blank" rel="noopener noreferrer">{{this.config.version}}</a></li>
|
||||||
<div class="gh-expandable-block">
|
{{else}}
|
||||||
<div class="gh-expandable-header">
|
<li><strong>Version:</strong> {{this.config.version}}</li>
|
||||||
<div>
|
{{/if}}
|
||||||
<h4 class="gh-expandable-title">Make this site private</h4>
|
{{#if this.showSystemInfo}}
|
||||||
<p class="gh-expandable-description">
|
<li><strong>Environment:</strong> <span class="ttc">{{this.config.environment}}</span></li>
|
||||||
Enable protection with a simple shared password. All search engine optimization and social features will be disabled.
|
<li class="gh-env-list-database-type"><strong>Database:</strong> {{this.config.database}}</li>
|
||||||
</p>
|
<li><strong>Mail:</strong> {{#if this.config.mail}}{{this.config.mail}}{{else}}Native{{/if}}</li>
|
||||||
</div>
|
{{/if}}
|
||||||
<div class="for-switch">
|
{{#if (enable-developer-experiments)}}
|
||||||
<label class="switch" for="settings-private">
|
<li><strong>Developer experiments:</strong> <span class="gh-badge">Enabled</span></li>
|
||||||
<input
|
{{/if}}
|
||||||
type="checkbox"
|
</ul>
|
||||||
checked={{this.settings.isPrivate}}
|
|
||||||
id="settings-private"
|
{{#if (and this.showSystemInfo this.showDatabaseWarning)}}
|
||||||
onclick={{action "toggleIsPrivate" value="target.checked"}}
|
<div class="gh-env-error">
|
||||||
data-test-private-checkbox
|
You are running an unsupported database in production. Please <a href="https://ghost.org/docs/faq/supported-databases/" target="_blank" rel="noopener noreferrer">upgrade to MySQL 8</a>.
|
||||||
>
|
|
||||||
<span class="input-toggle-component"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="gh-expandable-content">
|
|
||||||
{{#if this.settings.isPrivate}}
|
|
||||||
<div class="gh-setting-content-extended pt4 pb4">
|
|
||||||
<span class="avoid-break-out">
|
|
||||||
A private RSS feed is available at
|
|
||||||
<a href="{{this.privateRSSUrl}}" target="_blank" rel="noopener noreferrer">{{this.privateRSSUrl}}</a>
|
|
||||||
</span>
|
|
||||||
<GhFormGroup @class="no-margin pt2" @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="password">
|
|
||||||
<GhTextInput
|
|
||||||
@value={{readonly this.settings.password}}
|
|
||||||
@name="general[password]"
|
|
||||||
@focus-out={{action "validate" "password" target=this.settings}}
|
|
||||||
@input={{action (mut this.settings.password) value="target.value"}}
|
|
||||||
data-test-password-input={{true}}
|
|
||||||
/>
|
|
||||||
<GhErrorMessage @errors={{this.settings.errors}} @property="password" data-test-password-error=true />
|
|
||||||
<p>Set the password for this site</p>
|
|
||||||
</GhFormGroup>
|
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
|
<ul class="gh-about-links">
|
||||||
|
<li>
|
||||||
|
<a href="https://ghost.org/docs/" target="_blank" rel="noopener noreferrer">
|
||||||
|
<span>
|
||||||
|
{{svg-jar "book-open" class="fill-middarkgrey hover-fill"}}
|
||||||
|
User documentation
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://forum.ghost.org/" target="_blank" rel="noopener noreferrer">
|
||||||
|
<span>
|
||||||
|
{{svg-jar "help" class="stroke-middarkgrey hover-stroke"}}
|
||||||
|
Get help with Ghost
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://ghost.org/docs/contributing/" target="_blank" rel="noopener noreferrer">
|
||||||
|
<span>
|
||||||
|
{{svg-jar "brackets" class="stroke-middarkgrey hover-stroke"}}
|
||||||
|
Get involved
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul class="gh-about-links">
|
||||||
|
<li>
|
||||||
|
<LinkTo @route="settings.audit-log" data-test-nav="audit-log">
|
||||||
|
<span>
|
||||||
|
{{svg-jar "calendar-stroke" class="calendar-icon stroke-middarkgrey hover-stroke"}}
|
||||||
|
Audit log
|
||||||
|
</span>
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<div class="gh-copyright-info">
|
||||||
|
Copyright © 2013 – {{this.copyrightYear}} Ghost Foundation, released under the <a href="https://github.com/TryGhost/Ghost/blob/master/LICENSE" target="_blank" rel="noopener noreferrer">MIT license</a>. <a href="https://ghost.org/" target="_blank" rel="noopener noreferrer">Ghost</a> is a registered trademark of <a href="https://ghost.org/trademark/" target="_blank" rel="noopener noreferrer">Ghost Foundation Ltd</a>.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{{outlet}}
|
{{outlet}}
|
||||||
@ -1,22 +1,26 @@
|
|||||||
<section class="gh-canvas js-settings-content" {{scroll-top}}>
|
<section class="gh-canvas js-settings-content {{if (feature 'auditLog') "gh-whats-new-canvas"}}" {{scroll-top}}>
|
||||||
<GhCanvasHeader class="gh-canvas-header">
|
<GhCanvasHeader class="gh-canvas-header">
|
||||||
<h2 class="gh-whats-new-heading">{{svg-jar "gift"}} What's new?</h2>
|
<h2 class="gh-whats-new-heading">{{svg-jar "gift"}} What's new?</h2>
|
||||||
<div class="gh-about-header-actions">
|
{{#if (not (feature 'auditLog'))}}
|
||||||
<a class="gh-btn gh-btn-outline" href="https://ghost.org/docs/" target="_blank" rel="noopener noreferrer"><span>User documentation</span></a>
|
<div class="gh-about-header-actions">
|
||||||
<a class="gh-btn gh-btn-outline" href="https://forum.ghost.org/" target="_blank" rel="noopener noreferrer"><span>Get help with Ghost</span></a>
|
<a class="gh-btn gh-btn-outline" href="https://ghost.org/docs/" target="_blank" rel="noopener noreferrer"><span>User documentation</span></a>
|
||||||
<a class="gh-btn gh-btn-black" href="https://ghost.org/docs/contributing/" target="_blank" rel="noopener noreferrer"><span>Get involved</span></a>
|
<a class="gh-btn gh-btn-outline" href="https://forum.ghost.org/" target="_blank" rel="noopener noreferrer"><span>Get help with Ghost</span></a>
|
||||||
</div>
|
<a class="gh-btn gh-btn-black" href="https://ghost.org/docs/contributing/" target="_blank" rel="noopener noreferrer"><span>Get involved</span></a>
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
</GhCanvasHeader>
|
</GhCanvasHeader>
|
||||||
<section class="view-container">
|
<section class="view-container">
|
||||||
<div class="gh-about-container">
|
<div class="gh-about-container">
|
||||||
<section class="gh-whats-new gh-about-box" {{did-insert (perform this.whatsNew.updateLastSeen)}}>
|
<section class="gh-whats-new gh-about-box" {{did-insert (perform this.whatsNew.updateLastSeen)}}>
|
||||||
{{#each this.whatsNew.entries as |entry|}}
|
{{#each this.whatsNew.entries as |entry|}}
|
||||||
<a href="{{entry.url}}" class="gh-wn-entry" {{scroll-to shouldScroll=(eq entry.slug this.entry)}}>
|
<div class="gh-wn-entry" {{scroll-to shouldScroll=(eq entry.slug this.entry)}}>
|
||||||
<h4>{{moment-format entry.published_at "DD MMMM YYYY"}}</h4>
|
<a href="{{entry.url}}">
|
||||||
<h1>{{entry.title}}</h1>
|
<h4>{{moment-format entry.published_at "DD MMMM YYYY"}}</h4>
|
||||||
{{#if entry.feature_image}}
|
<h1>{{entry.title}}</h1>
|
||||||
<img class="mb5" src={{entry.feature_image}}>
|
{{#if entry.feature_image}}
|
||||||
{{/if}}
|
<img class="mb5" src={{entry.feature_image}}>
|
||||||
|
{{/if}}
|
||||||
|
</a>
|
||||||
<div class="gh-wn-content">
|
<div class="gh-wn-content">
|
||||||
{{#if entry.custom_excerpt}}
|
{{#if entry.custom_excerpt}}
|
||||||
<p>{{entry.custom_excerpt}}</p>
|
<p>{{entry.custom_excerpt}}</p>
|
||||||
@ -25,7 +29,7 @@
|
|||||||
{{{entry.html}}}
|
{{{entry.html}}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
<a class="green" href="https://ghost.org/changelog" target="_blank" rel="noopener noreferrer">See all updates →</a>
|
<a class="green" href="https://ghost.org/changelog" target="_blank" rel="noopener noreferrer">See all updates →</a>
|
||||||
</section>
|
</section>
|
||||||
@ -36,6 +40,7 @@
|
|||||||
<a class="gh-btn gh-btn-black" href="https://ghost.org/docs/contributing/" target="_blank" rel="noopener noreferrer"><span>Get involved</span></a>
|
<a class="gh-btn gh-btn-black" href="https://ghost.org/docs/contributing/" target="_blank" rel="noopener noreferrer"><span>Get involved</span></a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{{#if (not (feature 'auditLog'))}}
|
||||||
<section class="gh-env-details gh-about-box grey">
|
<section class="gh-env-details gh-about-box grey">
|
||||||
<div class="gh-about-logo">
|
<div class="gh-about-logo">
|
||||||
{{svg-jar "ghost-logo-orb" alt="Ghost"}}
|
{{svg-jar "ghost-logo-orb" alt="Ghost"}}
|
||||||
@ -75,6 +80,7 @@
|
|||||||
Copyright © 2013 – {{this.copyrightYear}} Ghost Foundation, released under the <a href="https://github.com/TryGhost/Ghost/blob/master/LICENSE" target="_blank" rel="noopener noreferrer">MIT license</a>. <a href="https://ghost.org/" target="_blank" rel="noopener noreferrer">Ghost</a> is a registered trademark of <a href="https://ghost.org/trademark/" target="_blank" rel="noopener noreferrer">Ghost Foundation Ltd</a>.
|
Copyright © 2013 – {{this.copyrightYear}} Ghost Foundation, released under the <a href="https://github.com/TryGhost/Ghost/blob/master/LICENSE" target="_blank" rel="noopener noreferrer">MIT license</a>. <a href="https://ghost.org/" target="_blank" rel="noopener noreferrer">Ghost</a> is a registered trademark of <a href="https://ghost.org/trademark/" target="_blank" rel="noopener noreferrer">Ghost Foundation Ltd</a>.
|
||||||
</footer>
|
</footer>
|
||||||
</section>
|
</section>
|
||||||
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
1
ghost/admin/public/assets/icons/calendar-stroke.svg
Normal file
1
ghost/admin/public/assets/icons/calendar-stroke.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>calendar</title><rect class="a" x="0.752" y="3.75" width="22.5" height="19.5" rx="1.5" ry="1.5"/><line class="a" x1="0.752" y1="9.75" x2="23.252" y2="9.75"/><line class="a" x1="6.752" y1="6" x2="6.752" y2="0.75"/><line class="a" x1="17.252" y1="6" x2="17.252" y2="0.75"/></svg>
|
||||||
|
After Width: | Height: | Size: 468 B |
Loading…
Reference in New Issue
Block a user