diff --git a/ghost/admin/app/models/setting.js b/ghost/admin/app/models/setting.js index 538d5a19b7..2a0ffdf228 100644 --- a/ghost/admin/app/models/setting.js +++ b/ghost/admin/app/models/setting.js @@ -29,5 +29,13 @@ export default Model.extend(ValidationEngine, { return {isActive: true}; } }), - membersSubscriptionSettings: attr('string') + membersSubscriptionSettings: attr('string'), + metaTitle: attr('string'), + metaDescription: attr('string'), + twitterTitle: attr('string'), + twitterDescription: attr('string'), + twitterImage: attr('string'), + ogTitle: attr('string'), + ogDescription: attr('string'), + ogImage: attr('string') }); diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css index 9bfaccc42c..78a052898b 100644 --- a/ghost/admin/app/styles/layouts/settings.css +++ b/ghost/admin/app/styles/layouts/settings.css @@ -70,6 +70,26 @@ margin: 1px 0 0 0; } +.gh-setting-content-extended label { + display: block; + font-size: 1.25rem; + font-weight: 600; + color: var(--darkgrey); + margin-bottom: 4px; +} + +.gh-setting-content-extended textarea { + font-size: 1.5rem; + line-height: 1.4em; + max-width: initial; +} + +.gh-setting-content-extended .gh-image-uploader { + margin: 0; + border: 1px solid var(--lightgrey); +} + + /* Images */ .gh-setting-action-smallimg { @@ -693,7 +713,7 @@ margin-left: -17px; } -.theme-fatal-error .theme-validation-type-label::before, +.theme-fatal-error .theme-validation-type-label::before, .theme-error .theme-validation-type-label::before { background: color-mod(var(--red) alpha(0.85)); } @@ -764,4 +784,4 @@ p.theme-validation-details { .blog-logo, .blog-icon { background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ERectangle%3C/title%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23E6EEF2' d='M0 0h24v24H0z'/%3E%3Cpath fill='%23D8E2E8' d='M0 0h12v12H0zM12 12h12v12H12z'/%3E%3C/g%3E%3C/svg%3E"); -} \ No newline at end of file +} diff --git a/ghost/admin/app/styles/spirit/_flexbox.css b/ghost/admin/app/styles/spirit/_flexbox.css index 5002be7cd7..5f42d59ff7 100644 --- a/ghost/admin/app/styles/spirit/_flexbox.css +++ b/ghost/admin/app/styles/spirit/_flexbox.css @@ -72,6 +72,10 @@ .flex-shrink-0 { flex-shrink: 0; } .flex-shrink-1 { flex-shrink: 1; } +.flex-basis-1-2 { flex-basis: 50%; } +.flex-basis-2-3 { flex-basis: 67%; } +.flex-basis-1-3 { flex-basis: 33%; } + @media (--breakpoint-not-small) { .flex-ns { display: flex; } .inline-flex-ns { display: inline-flex; } @@ -129,6 +133,10 @@ .flex-shrink-0-ns { flex-shrink: 0; } .flex-shrink-1-ns { flex-shrink: 1; } + + .flex-basis-1-2-ns { flex-basis: 50%; } + .flex-basis-2-3-ns { flex-basis: 67%; } + .flex-basis-1-3-ns { flex-basis: 33%; } } @media (--breakpoint-medium) { .flex-m { display: flex; } @@ -187,6 +195,10 @@ .flex-shrink-0-m { flex-shrink: 0; } .flex-shrink-1-m { flex-shrink: 1; } + + .flex-basis-1-2-m { flex-basis: 50%; } + .flex-basis-2-3-m { flex-basis: 67%; } + .flex-basis-1-3-m { flex-basis: 33%; } } @media (--breakpoint-large) { @@ -247,4 +259,8 @@ .flex-shrink-0-l { flex-shrink: 0; } .flex-shrink-1-l { flex-shrink: 1; } + + .flex-basis-1-2-l { flex-basis: 50%; } + .flex-basis-2-3-l { flex-basis: 67%; } + .flex-basis-1-3-l { flex-basis: 33%; } } diff --git a/ghost/admin/app/templates/settings/general.hbs b/ghost/admin/app/templates/settings/general.hbs index 4a0f0976e9..6f6139f889 100644 --- a/ghost/admin/app/templates/settings/general.hbs +++ b/ghost/admin/app/templates/settings/general.hbs @@ -98,7 +98,6 @@
Publication identity
-
{{#gh-uploader @@ -199,6 +198,202 @@
+
Site meta settings
+
+
+
+
+
Meta data
+
Extra content for search engines
+
+
+ +
+
+ {{#liquid-if metaDataOpen}} +
+
+
+ {{#gh-form-group errors=this.settings.errors hasValidated=this.settings.hasValidated property="metaTitle"}} + + {{gh-text-input + 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" + }} + {{gh-error-message errors=this.settings.errors property="metaTitle" data-test-error="metaTitle"}} +

Recommended: 70 characters. You’ve used {{gh-count-down-characters this.settings.metaTitle 70}}

+ {{/gh-form-group}} + {{#gh-form-group errors=this.settings.errors hasValidated=this.settings.hasValidated property="metaDescription"}} + + {{gh-textarea + 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" + }} + {{gh-error-message errors=this.settings.errors property="metaDescription" data-test-error="metaDescription"}} +

Recommended: 156 characters. You’ve used {{gh-count-down-characters this.settings.metaDescription 156}}

+ {{/gh-form-group}} +
+
+ +
+
{{truncate (or this.settings.metaTitle this.settings.title) 70}}
+
{{truncate this.config.blogUrl 70}}
+
{{truncate (or this.settings.metaDescription this.settings.description) 300}}
+
+
+
+
+ {{/liquid-if}} +
+
+
+
+
Twitter card
+
Customise structured data of your site for Twitter
+
+
+ +
+
+ {{#liquid-if twitterCardOpen}} +
+
+
+ {{#gh-form-group}} + {{gh-image-uploader-with-preview + image=this.settings.twitterImage + text="Add Twitter image" + allowUnsplash=true + update=(action (mut this.settings.twitterImage)) + remove=(action (mut this.settings.twitterImage "")) + }} + {{/gh-form-group}} + {{#gh-form-group errors=this.settings.errors hasValidated=this.settings.hasValidated property="twitterTitle"}} + + {{gh-text-input + 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" + }} + {{gh-error-message errors=this.settings.errors property="twitterTitle" data-test-error="twitterTitle"}} + {{/gh-form-group}} + {{#gh-form-group errors=this.settings.errors hasValidated=this.settings.hasValidated property="twitterDescription"}} + + {{gh-textarea + 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" + }} + {{gh-error-message errors=this.settings.errors property="twitterDescription" data-test-error="twitterDescription"}} + {{/gh-form-group}} +
+
+ +
+ {{#if this.settings.twitterImage}} +
+ {{/if}} +
+
{{or this.settings.twitterTitle this.settings.title}}
+
{{truncate (or this.settings.twitterDescription this.settings.description) 155}}
+
+
+ {{this.config.blogDomain}} +
+
+
+
+
+
+
+
+
+ {{/liquid-if}} +
+
+
+
+
Facebook card
+
Customise structured data of your site
+
+
+ +
+
+ {{#liquid-if facebookCardOpen}} +
+
+
+ {{#gh-form-group}} + {{gh-image-uploader-with-preview + image=this.settings.ogImage + text="Add Facebook image" + allowUnsplash=true + update=(action (mut this.settings.ogImage)) + remove=(action (mut this.settings.ogImage "")) + }} + {{/gh-form-group}} + {{#gh-form-group errors=this.settings.errors hasValidated=this.settings.hasValidated property="ogTitle"}} + + {{gh-text-input + 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" + }} + {{gh-error-message errors=this.settings.errors property="ogTitle" data-test-error="ogTitle"}} + {{/gh-form-group}} + {{#gh-form-group errors=this.settings.errors hasValidated=this.settings.hasValidated property="ogDescription"}} + + {{gh-textarea + 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" + }} + {{gh-error-message errors=this.settings.errors property="ogDescription" data-test-error="ogDescription"}} + {{/gh-form-group}} +
+
+ +
+ {{#if this.settings.ogImage}} +
+ {{/if}} +
+
{{truncate (or this.settings.ogTitle this.settings.title) 88}}
+
{{truncate (or this.settings.ogDescription this.settings.description) 300}}
+
+
+ {{this.config.blogDomain}} +
+
+
+
+
+
+
+
+ {{/liquid-if}} +
+
+
Social accounts