Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kodbruket/vsf-storyblok-sync
Storyblok integration for Vue Storefront
https://github.com/kodbruket/vsf-storyblok-sync
Last synced: about 1 month ago
JSON representation
Storyblok integration for Vue Storefront
- Host: GitHub
- URL: https://github.com/kodbruket/vsf-storyblok-sync
- Owner: Nordicwebteamvue
- License: mit
- Created: 2019-03-20T08:19:51.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T20:47:12.000Z (almost 2 years ago)
- Last Synced: 2024-05-22T17:34:06.660Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 20.9 MB
- Stars: 32
- Watchers: 6
- Forks: 16
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vuestorefront - Storyblok integration (visual editor)
README
# vsf-storyblok-sync [](https://travis-ci.org/kodbruket/vsf-storyblok-sync)
> Example usage in Storyblok with demo components
## Vue Storefront UI
### Installation
Copy `packages/vsf-storyblok-module` to `vue-storefront/src/modules`.
Add the following to `vue-storefront/src/modules/index.ts`
```
import { extendModule } from '@vue-storefront/core/lib/module'
...
import { Storyblok, urlExtend } from './vsf-storyblok-module';
extendModule(urlExtend)
export const registerModules: VueStorefrontModule[] = [
...
Storyblok
]
```
### Config
```
"storyblok": {
"endpoint": "http://localhost:8080/api/ext/vsf-storyblok-extension"
}
```
### Usage
See the `/theme` folder for a demo implementation.
Notable paths:
* `components/storyblok` - Directory with a few demo components
* `index.js` - How to register components
### Built in components
#### ``
To be used with the `Weblink/Storylink` field type (https://www.storyblok.com/docs/terminology/field-type)
`{{ item.title }}`
#### ``
Wrapper around the Storyblok Image Server API - https://www.storyblok.com/docs/image-service
##### Props
`height`
Height in pixels
`width`
Width in pixels
`src`
Original path to image from `Image` Field Type
`div`
If set to true you can instead use this component as a div with background. Example: `My content here`
`smart`
A smart filter that crops around the focal point, which is determined by a smart algorithm
`fit-in`
The fit-in argument specifies that the image should not be auto-cropped but auto-resized (shrunk) to fit inside an imaginary box of width and height, instead.
`filters`
Array of filters to apply. For example ``
`lazy`
If true the image will be lazy loaded. Does not work if `div` is `true`
#### ``
Parse and convert the Storyblok RichText field into html - https://www.storyblok.com/docs/richtext-field
``
##### Props
`text`
JSON object from Storyblok RichText field
## Vue Storefront API
Copy `packages/vsf-storyblok-extension` to `vue-storefront-api/src/api/extensions`.
### Config
```
"registeredExtensions": ["vsf-storyblok-extension"],
...
"storyblok": {
"previewToken": "__API_KEY_HERE__",
"hookSecret": "__SECRET_CHANGE_ME__",
"invalidate": "http://localhost:3000/invalidate?tag=storyblok&key=aeSu7aip"
}
```
## Reference
### `previewToken`
Go to `https://app.storyblok.com/#!/me/spaces/YOUR_SPACE_ID/edit?tab=api` and generate a preview token.
On the backend we use it to fetch posts when the webhook is polled. In the UI it's used for the preview functionality in Storyblok.
### `endpoint`
The URL the UI tries to fetch stories from
### `settings.appendStoreCodeFromHeader`
If set to true it will append the `x-vs-store-code` to the storyblok url. E.g. www.mysite.dk/foo with `x-vs-store-code=dk` would request the story `/dk/foo`.
### `hookSecret`
If this field is defined you have to provide this secret as a query param for your webhook. For example:
`http://localhost:8080/api/ext/vsf-storyblok-extension/hook`
would be
`http://localhost:8080/api/ext/vsf-storyblok-extension/hook?secret=__SECRET_CHANGE_ME__`
from our example config above. The secret is never needed in development mode.
### `invalidate`
URL to call after hook has been called
## Webhook
To sync all posts there's a hook available at `http://localhost:8080/api/ext/vsf-storyblok-extension/hook`
Follow the Storyblok documentation to enable it: https://www.storyblok.com/docs/Guides/using-storyblok-webhooks
## Development
```
git clone --recurse-submodules http://github.com/kodbruket/vsf-storyblok-sync.git
docker-compose up
```
Visit http://localhost:3000/ci to see it in action
### Seed products
```
docker-compose exec storefront-api yarn mage2vs import
docker-compose exec storefront-api yarn restore
docker-compose exec storefront-api yarn migrate
```