Skip to content

Instantly share code, notes, and snippets.

View storyblok-service.ts
...
init(): void {
if (!this.client) {
this.initClient();
}
this.initTranslationsFetching();
this.listenToRouteChange();
if (window.location != window.parent.location) {
@onefriendaday
onefriendaday / Plugin.js
Created May 18, 2020
Example of asset selector
View Plugin.js
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `<div>
<sb-asset-selector :uid="uid" field="example">
</sb-asset-selector>
{{model.example}}
</div>`,
methods: {
initWith() {
return {
@onefriendaday
onefriendaday / Plugin.js
Last active Apr 29, 2020
Track changes with get-context
View Plugin.js
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `<div><input class="uk-width-1-1" v-model="model.example" /></div>`,
methods: {
initWith() {
return {
plugin: 'example_plugin',
example: 'Hello world!'
}
},
View richtextfield.js
const StoryblokClient = require('storyblok-js-client')
const Storyblok = new StoryblokClient({
accessToken: 'YOUR_TOKEN'
})
Storyblok.setComponentResolver((component, blok) => {
switch(component) {
case 'my_button':
return `<button>${blok.button_text}</button>`
break;
@onefriendaday
onefriendaday / custom_sb_directive.js
Created Feb 5, 2020
Users a parameter check to only make elements of current story editable.
View custom_sb_directive.js
Vue.directive('my-editable', {
bind: function(el, binding) {
if (typeof binding.value._editable === 'undefined') {
return
}
var options = JSON.parse(binding.value._editable.replace('<!--#storyblok#', '').replace('-->', ''))
if (options.id != window.storyblok.getParam('_storyblok')) {
return
View Richttext.vue
// For Nuxtjs and Gridsome:
<template>
<div>
<div v-html="richtext"></div>
</div>
</template>
<script>
export default {
props: ['text'],
@onefriendaday
onefriendaday / Fieldtype.js
Created Sep 30, 2019
Example for getting filtered selectbox
View Fieldtype.js
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `<div><select v-model="model.example"><option :value="item.uuid" :key="item.uuid" v-for="item in stories">{{item.name}}</option></select></div>`,
data() {
return {stories: []}
},
methods: {
initWith() {
return {
@onefriendaday
onefriendaday / Fieldtype.js
Created Sep 17, 2019
Custom colopicker example
View Fieldtype.js
const Fieldtype = {
mixins: [window.Storyblok.plugin],
data() {
return {
loading: true,
open: false,
colors: ['#F64272', '#F6648B', '#F493A7', '#F891A6', '#FFCCD5', '']
}
},
template: `<div>
View replaceAllImages.js
export default function replaceAll(tree) {
var traverse = function (jtree) {
if (jtree.constructor === String) {
jtree = jtree.replace(new RegExp('a.storyblok.com', 'g'), 'img2.storyblok.com')
} else (jtree.constructor === Array) {
for (var item = 0; item < jtree.length; item++) {
traverse(jtree[item])
}
} else if (jtree.constructor === Object) {
for (var treeItem in jtree) {
View pages_controller.rb
class PagesController < ApplicationController
def index
response.headers['X-FRAME-OPTIONS'] = 'ALLOWALL'
client = Storyblok::Client.new(
logger: logger,
cache_version: Time.now.to_i,
token: 'Dv2ok3DqODzzb8QUuN2XCgtt',
version: 'draft'
)
You can’t perform that action at this time.