Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
const Fieldtype = {
mixins: [window.Storyblok.plugin],
data() {
return {
advancedOpen: false
}
},
template: `<div>
<div class="uk-margin-small-bottom">
Google preview
<div style="margin: 5px 0 15px; padding: 10px; color: #000; background: #fff; border: 1px solid #CCC;">
<div style="color:blue;text-decoration:underline">{{ model.title || 'Write a title' }}</div>
<div style="color:green">yoursite.com/example</div>
<div>{{ model.description || 'Write a description' }}</div>
</div>
</div>
<div class="uk-margin-small-bottom">
<label class="uk-form-label">Title</label>
<input v-model="model.title" class="uk-width-1-1" type="text" name="title">
<span class="uk-text-muted form__hint"></span>
</div>
<div class="uk-margin-small-bottom">
<label class="uk-form-label">Description</label>
<textarea v-model="model.description" class="uk-width-1-1" type="text" name="description"></textarea>
<span class="uk-text-muted form__hint">A one to two sentence description for this object.</span>
</div>
<a class="link" href="#" @click.prevent="advancedOpen = !advancedOpen">Show/Hide advanced</a>
<div class="uk-margin-top" v-if="advancedOpen">
<div>
<a class="uk-float-right link" href=https://ogp.me/ target=_blank title="What is Open Graph?">What is Open Graph?</a>
</div>
<div class="uk-margin-small-bottom">
<label class="uk-form-label">OG Title</label>
<input v-model="model.og_title" class="uk-width-1-1" type="text" name="og_title">
<span class="uk-text-muted form__hint">The title of your object.</span>
</div>
<div class="uk-margin-small-bottom">
<label class="uk-form-label">OG Description</label>
<textarea v-model="model.og_description" class="uk-width-1-1" type="text" name="og_description"></textarea>
<span class="uk-text-muted form__hint">A one to two sentence description of your object.</span>
</div>
<div class="uk-margin-small-bottom">
<label class="uk-form-label">OG Image</label>
<div v-if="model.og_image" class="uk-flex uk-flex-middle uk-margin-bottom">
<img :src="model.og_image" class="image" />
<div class="util__break-all">
<a data-uk-tooltip title="Remove" class="image__btn" v-if="model" v-on:click.prevent="model.og_image = ''"><i class="uk-icon-minus-circle"></i></a>
</div>
</div>
<sb-asset-selector :uid="uid" field="og_image"></sb-asset-selector>
<span class="uk-text-muted form__hint">An image URL which should represent your object.</span>
</div>
<hr>
<div>
<a class="uk-float-right link" href=https://dev.twitter.com/cards/getting-started target=_blank title="What is a Twitter Card?">
What is a Twitter Card?
</a>
</div>
<div class="uk-margin-small-bottom">
<label class="uk-form-label">Twitter Title</label>
<input v-model="model.twitter_title" class="uk-width-1-1" type="text" name="twitter_title">
<span class="uk-text-muted form__hint">The title of your object.</span>
</div>
<div class="uk-margin-small-bottom">
<label class="uk-form-label">Twitter Description</label>
<textarea v-model="model.twitter_description" class="uk-width-1-1" type="text" name="twitter_description"></textarea>
<span class="uk-text-muted form__hint">A one to two sentence description of your object.</span>
</div>
<div class="uk-margin-small-bottom">
<label class="uk-form-label">Twitter Image</label>
<div v-if="model.twitter_image" class="uk-flex uk-flex-middle uk-margin-bottom">
<img :src="model.twitter_image" class="image" />
<div class="util__break-all">
<a data-uk-tooltip title="Remove" class="image__btn" v-if="model" v-on:click.prevent="model.twitter_image = ''"><i class="uk-icon-minus-circle"></i></a>
</div>
</div>
<sb-asset-selector :uid="uid" field="twitter_image"></sb-asset-selector>
<span class="uk-text-muted form__hint">An image URL which should represent your object.</span>
</div>
</div>
</div>`,
methods: {
initWith() {
return {
plugin: 'seo_metatags',
title: '',
description: '',
og_title: '',
og_description: '',
og_image: '',
twitter_title: '',
twitter_description: '',
twitter_image: ''
}
},
pluginCreated() {
console.log('plugin:created')
}
},
watch: {
'model': {
handler: function (value) {
this.$emit('changed-model', value);
},
deep: true
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment