Skip to content

Commit

Permalink
Merge pull request #2 from magebitcom/2.0.0
Browse files Browse the repository at this point in the history
2.0.0
  • Loading branch information
KristofersOzolinsMagebit authored Feb 25, 2021
2 parents 20ccdaa + c0de313 commit 6c76369
Show file tree
Hide file tree
Showing 9 changed files with 101 additions and 173 deletions.
98 changes: 0 additions & 98 deletions API/vue-storefront-instagram-api/index.js

This file was deleted.

73 changes: 73 additions & 0 deletions API/vue-storefront-instagram-api/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import { Router } from 'express'
import { apiStatus } from '../../../lib/util'
import cache from '../../../lib/cache-instance'
import { Magento2Client } from 'magento2-rest-client'
import { sha3_224 } from 'js-sha3'

export function extendClient (client: Magento2Client) {
client.addMethods('instagram', restClient => ({
getPosts () {
return restClient.get('/magebit-instagramfeed/media')
}
}))
}

async function saveToCache (req: any, result: any) {
if (!cache) return

try {
await (cache as any).set(
'api:' + sha3_224(`${JSON.stringify(req.body)}${req.url}`),
result,
['instagram'],
1800
)
} catch (e) {
console.error('Failed to cache instagram:', e)
}
}

async function loadFromCache (req: any) {
if (!cache) return false

const data = await (cache as any).get(
'api:' + sha3_224(`${JSON.stringify(req.body)}${req.url}`)
)

return data
}

module.exports = ({ config }) => {
const api = Router()
const client = Magento2Client(config.magento2.api)
extendClient(client)

api.get('/feed', async (req, res) => {
const { width, height } = req.query;
const cached = await loadFromCache(req)

if (cached) {
res.setHeader('X-VS-Cache', 'Hit')
return apiStatus(res, cached)
}

try {
const posts = await client.instagram.getPosts()

const items = posts.map(post => {
post.media_url_thumb = `${config.server.url || ''}/img/?url=${encodeURIComponent(post.thumbnail_url || post.media_url)}&width=${width || 200}&height=${height || 200}&action=fit`;
return post
})

if (config.server.useOutputCache) {
saveToCache(req, items)
}

return apiStatus(res, items)
} catch (e) {
apiStatus(res, 'Failed to fetch posts: ' + e.message, 500)
}
})

return api
}
13 changes: 3 additions & 10 deletions API/vue-storefront-instagram-api/package.json
Original file line number Diff line number Diff line change
@@ -1,17 +1,10 @@
{
"name": "vue-storefront-instagram-api",
"version": "1.2.0",
"version": "2.0.0",
"description": "Standalone offline ready instagram feed extension for Vue Storefront",
"main": "index.js",
"keywords": [],
"author": "Lorens Milovanovs- Lācis <lorens.milovanovs.lacis@magebit.com>",
"author": "Magebit <info@magebit.com>",
"license": "MIT",
"dependencies": {
"express": "^4.16.3",
"request": "^2.88.0"
},
"devDependencies": {
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1"
}
"dependencies": {}
}
5 changes: 5 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

#### [2.0.0] - 2020-25-02

##### Updated
- Module now uses Instagram's Basic display api

#### [1.3.0] - 2020-19-11

##### Updated
Expand Down
65 changes: 13 additions & 52 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,16 @@ Standalone offline ready instagram feed extension for Vue Storefront. Works with

## Installation

#### Magento2 module
Version 2 of VSF Instagram Feed requires you to install our [magento module](https://github.com/magebitcom/vsf-instagram-feed-m2)
It's a basic wrapper around Instagram's Basic Display API

You can install it with composer:
- `composer require magebit/vsf-instagram-feed`

For manual installation check the module's repository:
https://github.com/magebitcom/vsf-instagram-feed-m2

#### Repository file structure
- [vue storefront](/) - vue-instagram-feed module
- [vue-storefront-api](/API/vue-storefront-instagram-api/) - vue-instagram-feed-api module
Expand Down Expand Up @@ -46,7 +56,6 @@ export function registerClientModules () {

```json
"instagram": {
"limit": 8,
"thumbnails": {
"width": 200,
"height": 200
Expand All @@ -57,7 +66,6 @@ export function registerClientModules () {
- To load instagram data, you need to dispatch `instagram-feed/get` action:
```js
this.$store.dispatch('instagram-feed/get', {
limit: config.instagram.limit,
width: config.instagram.thumbnails.width,
height: config.instagram.thumbnails.height
})
Expand All @@ -74,7 +82,6 @@ To make sure instagram data is available during SSR, add tis dispatch to `before
await Promise.all([
...
vm.$store.dispatch('instagram-feed/get', {
limit: config.instagram.limit,
width: config.instagram.thumbnails.width,
height: config.instagram.thumbnails.height
})
Expand All @@ -90,7 +97,6 @@ To make sure instagram data is available during SSR, add tis dispatch to `before
await Promise.all([
...
store.dispatch('instagram-feed/get', {
limit: config.instagram.limit,
width: config.instagram.thumbnails.width,
height: config.instagram.thumbnails.height
})
Expand All @@ -108,16 +114,7 @@ To make sure instagram data is available during SSR, add tis dispatch to `before
window._sharedData.entry_data.ProfilePage[0].graphql.user.id
```
- Add `vue-storefront-instagram-api` to the list of `registeredExtensions` in your config file.
- Also, in the config, add an `instagram` property to the `extensions` list with the following information:

```json
"extensions": {
"instagram": {
"profile": "CLIENT_INSTAGRAM_USERNAME",
"id": "CLIENT_INSTAGRAM_PROFILE_ID"
}
}
```
- To return absolute image urls, also add `server.url` field to your api config:
```json
"server": {
Expand All @@ -133,12 +130,11 @@ Here are some examples on how to use instagram feed in your project.
- **instagram**
- **width** (int) required - Thumbnail width
- **height** (int) required - Thumbnail height
- **limit** (int) required - Instagram image limit

These values will be used to construct a URL to the instagram feed VUE-API extension:

```
project.local:8080/api/ext/vue-storefront-instagram-api/feed?limit=5&width=370&height=370
project.local:8080/api/ext/vue-storefront-instagram-api/feed?width=370&height=370
```
This returns a JSON object with feed items
Expand All @@ -153,9 +149,7 @@ import { mapGetters } from 'vuex'
computed: {
...mapGetters({
feed: 'instagram-feed/media',
hasItems: 'instagram-feed/hasItems',
username: 'instagram-feed/username',
bio: 'instagram-feed/bio'
hasItems: 'instagram-feed/hasItems'
})
}
}
Expand Down Expand Up @@ -188,7 +182,7 @@ Here's a simple component you can use in the default theme
<a :href="media.pemalink">
<img
class="tile-image"
v-lazy="media.image"
v-lazy="media.media_url_thumb"
:alt="media.caption"
>
</a>
Expand Down Expand Up @@ -234,39 +228,6 @@ export default {
</script>
```

### Capybara example
In Capybara you can use the built-in `a-images-grid.vue` atom and it will work just fine!

![Capybara](https://i.imgur.com/2H58yGu.png)

- **pages/Home.vue**

```vue
<template>
<!-- ... -->
<SfSection
:title-heading="$t('Instagram feed')"
subtitle-heading="@magebitcom"
class="section"
>
<AImagesGrid :images="feed" />
</SfSection>
<!-- ... -->
</template>
<script>
export default {
// ...
computed: {
...mapGetters({
feed: 'instagram-feed/media'
})
}
// ...
}
</script>
```

## Contributing
Found a bug, have a feature suggestion or just want to help in general?
Contributions are very welcome! Check out the [list of active issues](https://github.com/magebitcom/vsf-instagram-feed/issues) or submit one yourself.
Expand Down
4 changes: 1 addition & 3 deletions mixins/InstagramFeed.js → mixins/InstagramFeed.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ export default {
computed: {
...mapGetters({
feed: 'instagram-feed/media',
hasItems: 'instagram-feed/hasItems',
username: 'instagram-feed/username',
bio: 'instagram-feed/bio'
hasItems: 'instagram-feed/hasItems'
})
}
}
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"name": "vue-storefront-instagram-feed",
"version": "1.2.0",
"version": "2.0.0",
"description": "Standalone offline ready instagram feed extension for Vue Storefront",
"main": "index.ts",
"keywords": [],
"author": "Lorens Milovanovs- Lācis <lorens.milovanovs.lacis@magebit.com>",
"author": "Magebit <info@magebit.com>",
"license": "MIT"
}
Loading

0 comments on commit 6c76369

Please sign in to comment.