Refactored

vue-storefront-api/src/api/extensions/vue-storefront-instagram-api/README.md → API/vue-storefront-instagram-api/README.md

@@ -15,12 +15,12 @@ Standalone offline ready instagram feed extension for Vue Storefront. Works with
 ### Installation
 
 #### Repository file structure
-- [vue storefront](/vue-storefront/) - vue-instagram-feed module
-- [vue-storefront-api](/vue-storefront-api/) - vue-instagram-feed-api module
+- [vue storefront](/) - vue-instagram-feed module
+- [vue-storefront-api](/API/vue-storefront-instagram-api/) - vue-instagram-feed-api module
 
 #### Setting up VSF module
-- Copy content of `vue-storefront` directory to the project root folder
-- Register module in `src/modules/client.ts`
+- Clone this repository in `vue-storefront/src/modules` directory
+- Register module in `src/modules/client.ts` (or `theme/config.modules.ts` for capybara)
 
 ```js
 ...
@@ -99,15 +99,15 @@ To make sure instagram data is available during SSR, add tis dispatch to `before
 ```
 
 #### Setting up VSF-API module
-- Copy content of `vue-storefront-api` directory to the root of project directory
-- Get instagram profile ID:
-- [Here](https://www.instafollowers.co/find-instagram-user-id)
-- Or Go to https://instagram.com/{INSTAGRAM_USERNAME}/ open developer tools and paste this in the console:
-```js
-window._sharedData.entry_data.ProfilePage[0].graphql.user.id
-```
-- Add "vue-storefront-instagram-api" to the list of `registeredExtensions` in your `development.json` and `production.json` config file.
-- Add an `instagram` property to the `extensions` list with the following information:
+- Move content from `src/modules/instragram-feed/API` to `vue-storefront-api/src/extensions`
+- **Get instagram profile ID**:
+  - [Here](https://www.instafollowers.co/find-instagram-user-id)
+  - Or go to https://instagram.com/{INSTAGRAM_USERNAME}/ open developer tools and paste this in the console:
+    ```js
+    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": {
@@ -266,7 +266,13 @@ export default {
 </script>
 ```
 
+---
+
+![Magebit](https://magebit.com/img/magebit-logo-2x.png)
+
 ## Authors
 
 * **Lorens Milovanovs- Lācis** (lorens.milovanovs.lacis@magebit.com)
 * **Kristofers Ozoliņš** (kristofers.ozolins@magebit.com)
+
+

vue-storefront-api/src/api/extensions/vue-storefront-instagram-api/index.js → API/vue-storefront-instagram-api/index.js

@@ -1,13 +1,16 @@
 import { Router } from 'express'
 import request from 'request'
 
+// This might change in the future, but most libraries use it
+const QUERY_ID = '17888483320059182'
+
 module.exports = ({ config }) => {
   const api = Router();
 
   api.get('/feed', (req, res) => {
     const { limit, width, height } = req.query;
     const { profile, id } = config.extensions.instagram;
-    const url = `https://www.instagram.com/graphql/query/?query_id=17888483320059182&variables={"id":${id},"first":${limit},"after":null}`
+    const url = `https://www.instagram.com/graphql/query/?query_id=${QUERY_ID}&variables={"id":${id},"first":${limit},"after":null}`
 
     request(
       {

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ##### Updated
 - New shiny README.md
 - Renamed `media_url` and `media_url_hq` to `image` and `image_hq` respectively so that the feed works out-of-the-box with capybara images grid
+- Moved graphql query id to a constant, since it might change in the future
 
 ##### Fixed
 - Fixed an error when item caption was not set

README.md

@@ -15,12 +15,12 @@ Standalone offline ready instagram feed extension for Vue Storefront. Works with
 ### Installation
 
 #### Repository file structure
-- [vue storefront](/vue-storefront/) - vue-instagram-feed module
-- [vue-storefront-api](/vue-storefront-api/) - vue-instagram-feed-api module
+- [vue storefront](/) - vue-instagram-feed module
+- [vue-storefront-api](/API/vue-storefront-instagram-api/) - vue-instagram-feed-api module
 
 #### Setting up VSF module
-- Copy content of `vue-storefront` directory to the project root folder
-- Register module in `src/modules/client.ts`
+- Clone this repository in `vue-storefront/src/modules` directory
+- Register module in `src/modules/client.ts` (or `theme/config.modules.ts` for capybara)
 
 ```js
 ...
@@ -97,17 +97,17 @@ To make sure instagram data is available during SSR, add tis dispatch to `before
     ])
   },
 ```
-    
+
 #### Setting up VSF-API module
-- Copy content of `vue-storefront-api` directory to the root of project directory
-- Get instagram profile ID:
-- [Here](https://www.instafollowers.co/find-instagram-user-id)
-- Or Go to https://instagram.com/{INSTAGRAM_USERNAME}/ open developer tools and paste this in the console:
-```js
-window._sharedData.entry_data.ProfilePage[0].graphql.user.id
-```
-- Add "vue-storefront-instagram-api" to the list of `registeredExtensions` in your `development.json` and `production.json` config file.
-- Add an `instagram` property to the `extensions` list with the following information:
+- Move content from `src/modules/instragram-feed/API` to `vue-storefront-api/src/extensions`
+- **Get instagram profile ID**:
+  - [Here](https://www.instafollowers.co/find-instagram-user-id)
+  - Or go to https://instagram.com/{INSTAGRAM_USERNAME}/ open developer tools and paste this in the console:
+    ```js
+    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": {
@@ -122,7 +122,7 @@ window._sharedData.entry_data.ProfilePage[0].graphql.user.id
 "server": {
   "url": "http://localhost:8080"
 }
-``` 
+```
 
 ### Usage and features
 Here are some examples on how to use instagram feed in your project.