### Thumbnail URL Generation Example

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/endpoints.md

Provides an example of input parameters and the resulting generated thumbnail URL.

```text
Input:
  - media_url: https://scontent.xx.fbcdn.net/v/example.jpg
  - width: 370
  - height: 370
  - server.url: http://localhost:8080

Output:
  - media_url_thumb: http://localhost:8080/img/?url=https%3A%2F%2Fscontent.xx.fbcdn.net%2Fv%2Fexample.jpg&width=370&height=370&action=fit
```

--------------------------------

### Vuex Module Instantiation Example

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/types.md

An example of instantiating a Vuex module with specific state and root types. This shows how to provide the state, mutations, actions, and getters for a module.

```typescript
const module: Module<InstagramFeedState, RootState> = {
  namespaced: true,
  state: { media: [] },
  mutations: { /* ... */ },
  actions: { /* ... */ },
  getters: { /* ... */ }
}
```

--------------------------------

### StorefrontModule Implementation Example

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/types.md

Demonstrates how to implement a Vue Storefront module using the StorefrontModule type. This example shows registering the Instagram feed module within the application's store.

```typescript
import { StorefrontModule } from '@vue-storefront/core/lib/modules'

const InstagramFeed: StorefrontModule = function ({ store }) {
  store.registerModule(KEY, module)
}
```

--------------------------------

### Install Magento2 Module

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/OVERVIEW.md

Use Composer to install the Magento2 module for the Instagram feed integration.

```bash
composer require magebit/vsf-instagram-feed
```

--------------------------------

### Example Instagram Feed Configuration

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/types.md

A sample JSON configuration for the Instagram feed, demonstrating how to specify the API endpoint and thumbnail dimensions. This configuration is accessed in the application's store setup.

```json
{
  "instagram": {
    "endpoint": "http://project.local:8080/api/ext/vue-storefront-instagram-api/feed",
    "thumbnails": {
      "width": 200,
      "height": 200
    }
  }
}
```

--------------------------------

### Example GET Request for Instagram Feed

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/endpoints.md

This snippet shows an example of a GET request to the Instagram feed endpoint, including query parameters for image dimensions.

```http
GET /api/ext/vue-storefront-instagram-api/feed?width=370&height=370 HTTP/1.1
Host: project.local:8080
```

--------------------------------

### Example API Configuration

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/endpoints.md

This JSON object shows an example configuration for the VSF Instagram Feed API. It includes settings for the Magento2 backend API URL and token, as well as server URL and output cache enablement.

```json
{
  "magento2": {
    "api": {
      "url": "https://magento.example.com",
      "token": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9..."
    }
  },
  "server": {
    "url": "http://localhost:8080",
    "useOutputCache": true
  }
}
```

--------------------------------

### VSF API Config Usage Example

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/api-reference/api-endpoint.md

Example of how to configure the Instagram Feed API module within the VSF API extensions configuration.

```typescript
// In VSF API extensions config
import InstagramFeedAPI from './extensions/vue-storefront-instagram-api'

export const extensions = [
  {
    name: 'instagram',
    module: InstagramFeedAPI
  }
]
```

--------------------------------

### Example Frontend Request and Response

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/api-reference/api-endpoint.md

Demonstrates how a frontend application can request Instagram feed posts and the expected JSON response format, including generated thumbnail URLs.

```bash
# Frontend request
GET /api/ext/vue-storefront-instagram-api/feed?width=370&height=370

# Response
{
  "code": 200,
  "result": [
    {
      "id": "17999...",
      "caption": "Summer vibes 🌞",
      "media_url": "https://instagram.com/",
      "media_url_thumb": "http://localhost:8080/img/?url=https%3A%2F%2F...&width=370&height=370&action=fit",
      "permalink": "https://instagram.com/p/"
    }
  ]
}
```

--------------------------------

### Test Frontend Module

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/INTEGRATION-GUIDE.md

After starting the development server, verify module registration in Vue DevTools, check the store state for 'instagram-feed.media', and test the 'instagram-feed/media' getter.

```bash
cd vue-storefront
npm run dev

# Open browser and check:
# 1. Is module registered? (check Vue DevTools)
# 2. Store state: this.$store.state['instagram-feed'].media
# 3. Getters: this.$store.getters['instagram-feed/media']
```

--------------------------------

### Cache Header Example

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/endpoints.md

This header indicates that the response was served from the cache.

```http
X-VS-Cache: Hit
```

--------------------------------

### Install Magento2 Module

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/INTEGRATION-GUIDE.md

Install the Magebit Instagram Feed extension using Composer and upgrade/clean Magento cache. This provides the necessary REST endpoint.

```bash
composer require magebit/vsf-instagram-feed
php bin/magento setup:upgrade
php bin/magento cache:clean
```

--------------------------------

### Vuex Store Access Examples

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/EXPORTS.md

Demonstrates how to access state, getters, mutations, and actions within the 'instagram-feed' Vuex module. Shows direct access and usage with mapGetters and mapActions.

```typescript
// Module namespace
'instagram-feed'

// State
store.state['instagram-feed'].media

// Getters
store.getters['instagram-feed/media']
store.getters['instagram-feed/hasItems']

// Mutations
store.commit('instagram-feed/SET_INSTAGRAM_FEED', payload)

// Actions
store.dispatch('instagram-feed/get', { width: 200, height: 200 })
```

```typescript
import { mapGetters } from 'vuex'

computed: {
  ...mapGetters({
    feed: 'instagram-feed/media',
    hasItems: 'instagram-feed/hasItems'
  })
}
```

```typescript
import { mapActions } from 'vuex'

methods: {
  ...mapActions({
    getFeed: 'instagram-feed/get'
  }),
  async loadFeed() {
    await this.getFeed({ width: 200, height: 200 })
  }
}
```

--------------------------------

### API Configuration Example

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/OVERVIEW.md

This JSON snippet illustrates the configuration for the API module, including Magento2 API details and server settings. It is used for connecting to the Magento2 backend and configuring the server URL.

```json
{
  "magento2": {
    "api": {
      "url": "https://magento.example.com",
      "token": "Bearer ..."
    }
  },
  "server": {
    "url": "http://localhost:8080",
    "useOutputCache": true
  }
}
```

--------------------------------

### Example Error Response for Instagram Feed

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/endpoints.md

Provides an example of a JSON error response, illustrating a connection refused error.

```json
{
  "code": 500,
  "message": "Failed to fetch posts: Connect ECONNREFUSED 127.0.0.1:3000"
}
```

--------------------------------

### Usage Example for InstagramFeed Mixin

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/api-reference/vue-mixin.md

Demonstrates how to use the InstagramFeed mixin in a Vue component and trigger the feed fetch action.

```typescript
import InstagramFeed from 'src/modules/vue-storefront-instagram-feed/mixins/InstagramFeed'

export default {
  name: 'InstagramComponent',
  mixins: [InstagramFeed],
  mounted() {
    // Trigger feed fetch
    this.$store.dispatch('instagram-feed/get', {
      width: 200,
      height: 200
    })
  }
}
```

--------------------------------

### Magento2Client Extension Example

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/types.md

Illustrates how to initialize and extend the Magento2 REST client with custom methods, specifically for fetching Instagram posts. This requires the client configuration and the extendClient function.

```typescript
import { Magento2Client } from 'magento2-rest-client'

const client = Magento2Client(config.magento2.api)
extendClient(client)
const posts = await client.instagram.getPosts()
```

--------------------------------

### Instagram Feed Configuration

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/api-reference/vuex-store.md

Example of the required configuration for the Instagram feed action, specifying the API endpoint.

```json
{
  "instagram": {
    "endpoint": "http://project.local:8080/api/ext/vue-storefront-instagram-api/feed"
  }
}
```

--------------------------------

### Monitoring Cache Errors with Log Grep

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/errors.md

This example demonstrates how to monitor cache save errors in production by grepping server logs for a specific error message. It shows a command to tail logs and filter for 'Failed to cache instagram'.

```bash
// Check server logs for errors
// In production: grep logs for "Failed to cache instagram"
// Example: tail -f /var/log/vsf-api.log | grep "Failed to cache instagram"
```

--------------------------------

### Install Magento2 Extension for Instagram Feed

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/configuration.md

Install the Magebit Instagram Feed Magento2 extension using Composer or by manually placing the files. This step is required for the module to function correctly with Magento2.

```bash
composer require magebit/vsf-instagram-feed
php bin/magento setup:upgrade
```

--------------------------------

### Verify Instagram Module Configuration

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/OVERVIEW.md

Inspect the Instagram module's configuration parameters, such as the API endpoint and thumbnail settings, directly from the application's config object. This is useful for confirming setup.

```typescript
import config from 'config'
console.log('Instagram endpoint:', config.instagram.endpoint)
console.log('Thumbnail size:', config.instagram.thumbnails)
```

--------------------------------

### Vuex Module with InstagramFeedState

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/types.md

Example of how to define a Vuex module using the InstagramFeedState as its state type. This is useful for integrating the Instagram feed functionality into a Vue Storefront application.

```typescript
import { Module } from 'vuex'
import InstagramFeedState from '../types/InstagramFeedState'

export const module: Module<InstagramFeedState, RootState> = {
  // Module definition
}
```

--------------------------------

### GET /api/ext/vue-storefront-instagram-api/feed

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/endpoints.md

Retrieves a list of Instagram media posts. Allows specifying width and height for thumbnail generation.

```APIDOC
## GET /api/ext/vue-storefront-instagram-api/feed

### Description
Retrieves a list of Instagram media posts. Allows specifying width and height for thumbnail generation.

### Method
GET

### Endpoint
/api/ext/vue-storefront-instagram-api/feed

### Parameters
#### Query Parameters
- **width** (number) - Required - Width of the thumbnail image in pixels. Used to generate the `media_url_thumb` property.
- **height** (number) - Required - Height of the thumbnail image in pixels. Used to generate the `media_url_thumb` property.

### Request Example
```
GET /api/ext/vue-storefront-instagram-api/feed?width=370&height=370 HTTP/1.1
Host: project.local:8080
```

### Response
#### Success Response (200)
- **code** (number) - 200
- **result** (Array<InstagramMediaPost>) - An array of Instagram media posts.

#### Result Schema
- **id** (string) - Unique Instagram media post identifier
- **caption** (string | null) - Post caption/description from Instagram
- **media_url** (string) - Full-size image URL from Instagram Basic Display API
- **thumbnail_url** (string | null) - Optional thumbnail image URL from Magento2
- **permalink** (string) - Link to the Instagram post
- **media_url_thumb** (string) - Generated thumbnail URL with specified width/height for image resizing service
- (additional fields) (any) - Other fields from Instagram API response passed through unchanged

#### Response Example
```json
{
  "code": 200,
  "result": [
    {
      "id": "18099... (Instagram ID)",
      "caption": "Summer vibes 🌞 Check out our collection",
      "media_url": "https://scontent.xx.fbcdn.net/v/",
      "thumbnail_url": null,
      "permalink": "https://www.instagram.com/p/ABC123DEF/",
      "media_url_thumb": "http://localhost:8080/img/?url=https%3A%2F%2Fscontent.xx.fbcdn.net%2Fv%2F...&width=370&height=370&action=fit"
    }
  ]
}
```

#### Error Response (500)
- **code** (number) - 500
- **message** (string) - Error message describing the failure

#### Error Response Example
```json
{
  "code": 500,
  "message": "Failed to fetch posts: Connect ECONNREFUSED 127.0.0.1:3000"
}
```
```

--------------------------------

### Handling Errors in Client Store Actions

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/errors.md

This example demonstrates how to handle potential errors when dispatching a store action to fetch Instagram posts. Note that the store action itself does not throw errors; errors should be checked via the HTTP response.

```typescript
// When calling the store action
try {
  await this.$store.dispatch('instagram-feed/get', {
    width: 200,
    height: 200
  })
  const feed = this.$store.getters['instagram-feed/media']
  if (feed.length === 0) {
    console.warn('No Instagram posts available')
  }
} catch (error) {
  // Note: The store action does NOT throw errors
  // Check the response via HTTP call instead
  console.error('Failed to fetch Instagram feed')
}
```

--------------------------------

### Commit SET_INSTAGRAM_FEED Mutation

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/api-reference/vuex-store.md

Example of committing the `SET_INSTAGRAM_FEED` mutation to update the store's media array with new Instagram posts.

```javascript
store.commit('instagram-feed/SET_INSTAGRAM_FEED', [
  { id: '1', caption: 'Post 1', media_url: 'https://...' },
  { id: '2', caption: 'Post 2', media_url: 'https://...' }
])
```

--------------------------------

### get Action

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/api-reference/vuex-store.md

Fetches Instagram feed data from the configured API endpoint and commits it to state. It includes basic caching by only fetching if the `hasItems` getter returns false.

```APIDOC
## get Action

### Description
Fetches Instagram feed data from the configured API endpoint and commits it to state. Implements basic caching—only fetches if `hasItems` getter returns false.

### Method
`dispatch`

### Parameters
#### Path Parameters
(None)

#### Query Parameters
- **width** (number) - Required - Thumbnail width in pixels for image resizing.
- **height** (number) - Required - Thumbnail height in pixels for image resizing.

### Request Example
```javascript
// In a Vue component
await this.$store.dispatch('instagram-feed/get', {
  width: 200,
  height: 200
})
```

### Response
#### Success Response
- **any[]** - The media getter value (may be empty if fetch is in progress).

### Behavior
1. Checks if `hasItems` getter is true (data already loaded).
2. If no items exist, fetches from `config.instagram.endpoint?width={width}&height={height}`.
3. Expects JSON response with shape `{ result: any[] }`.
4. Commits `SET_INSTAGRAM_FEED` mutation with `res.result`.
5. Returns current media via getter.

### Error Handling
Fetch errors are logged to console. No promise rejection or error propagation occurs.

### Configuration Required
The action expects `config.instagram.endpoint` to be set in Vue Storefront config:

```json
{
  "instagram": {
    "endpoint": "http://project.local:8080/api/ext/vue-storefront-instagram-api/feed"
  }
}
```
```

--------------------------------

### Integrate Instagram Feed Component in a Page

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/INTEGRATION-GUIDE.md

This example shows how to import and use the InstagramFeedSection component within a Vue.js page. Ensure the component path is correctly set up in your project.

```vue
<!-- pages/Home.vue -->
<template>
  <div class="home-page">
    <section class="hero">
      <h1>Welcome</h1>
    </section>
    
    <InstagramFeedSection />
    
    <section class="footer">
      <p>© 2024 My Store</p>
    </section>
  </div>
</template>

<script>
import InstagramFeedSection from '@/components/InstagramFeedSection.vue'

export default {
  name: 'Home',
  components: {
    InstagramFeedSection
  }
}
</script>
```

--------------------------------

### Example Success Response Body for Instagram Feed

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/endpoints.md

Illustrates a typical JSON response body for a successful request to the Instagram feed endpoint, showing post details and generated thumbnail URLs.

```json
{
  "code": 200,
  "result": [
    {
      "id": "18099... (Instagram ID)",
      "caption": "Summer vibes 🌞 Check out our collection",
      "media_url": "https://scontent.xx.fbcdn.net/v/",
      "thumbnail_url": null,
      "permalink": "https://www.instagram.com/p/ABC123DEF/",
      "media_url_thumb": "http://localhost:8080/img/?url=https%3A%2F%2Fscontent.xx.fbcdn.net%2Fv%2F...&width=370&height=370&action=fit"
    },
    {
      "id": "18088... (Instagram ID)",
      "caption": "New arrivals available now",
      "media_url": "https://scontent.xx.fbcdn.net/v/",
      "thumbnail_url": null,
      "permalink": "https://www.instagram.com/p/XYZ789GHI/",
      "media_url_thumb": "http://localhost:8080/img/?url=https%3A%2F%2Fscontent.xx.fbcdn.net%2Fv%2F...&width=370&height=370&action=fit"
    }
  ]
}
```

--------------------------------

### Capybara Theme Instagram Feed Integration

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/API/vue-storefront-instagram-api/README.md

This example demonstrates using the `AImagesGrid` component with the Instagram feed data in the Capybara theme. It assumes the feed data is available via Vuex getters.

```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>
```

--------------------------------

### Test API Endpoint

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/INTEGRATION-GUIDE.md

Send a GET request to the Instagram feed API endpoint with specified width and height parameters. The expected response includes a 'code' of 200 and a 'result' array.

```bash
curl "http://localhost:8080/api/ext/vue-storefront-instagram-api/feed?width=200&height=200"

# Should return:
# {
#   "code": 200,
#   "result": [...] 
# }
```

--------------------------------

### Development Configuration (local.json)

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/configuration.md

Configuration for the development environment, specifying local endpoint and thumbnail dimensions.

```json
{
  "instagram": {
    "endpoint": "http://localhost:8080/api/ext/vue-storefront-instagram-api/feed",
    "thumbnails": {
      "width": 200,
      "height": 200
    }
  }
}
```

--------------------------------

### Configuration Flow

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/ARCHITECTURE.md

Visualizes how application configuration files and environment variables are read and utilized by different parts of the application.

```plaintext
Application Config Files
├─ config/local.json
├─ config/docker.json
└─ config/production.json
        │
        ├─ config.instagram.*
        │   └─ read by: store/index.ts:21
        │
        └─ config.magento2.api, config.server.*
            └─ read by: API/index.ts:42, 58, 62

Environment Variables
└─ (if configured in VSF setup)
```

--------------------------------

### Express Router GET Route

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/types.md

Defines a GET route handler using the Express Router. This is used to set up API endpoints for the Instagram feed, specifying the path and the asynchronous handler function.

```typescript
import { Router } from 'express'

const api = Router()
api.get('/feed', async (req, res) => {
  // Handle request
})
export default api
```

--------------------------------

### Initialize Instagram API Module

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/EXPORTS.md

Import and initialize the Instagram API module with configuration. Use the returned router to mount the API endpoints within your application.

```typescript
import InstagramAPI from './extensions/vue-storefront-instagram-api'

const router = InstagramAPI({ config })
app.use('/api/ext/vue-storefront-instagram-api', router)
```

--------------------------------

### Configure Optimal Thumbnail Sizes

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/INTEGRATION-GUIDE.md

Set appropriate thumbnail dimensions to reduce image file size and memory usage. Avoid excessively large sizes.

```json
{
  "instagram": {
    "thumbnails": {
      "width": 200,
      "height": 200
    }
  }
}
```

--------------------------------

### GET /feed

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/EXPORTS.md

Retrieves the Instagram feed. This endpoint is exposed via the module's router.

```APIDOC
## GET /feed

### Description
Retrieves the Instagram feed.

### Method
GET

### Endpoint
/feed

### Parameters
#### Query Parameters
None explicitly documented.

#### Request Body
None explicitly documented.

### Request Example
None explicitly documented.

### Response
#### Success Response (200)
- **feed** (array) - The Instagram feed data.

#### Response Example
```json
{
  "feed": [
    {
      "media_url": "https://example.com/image.jpg",
      "caption": "Example post"
    }
  ]
}
```
```

--------------------------------

### Check Magento2 Instagram Module Status

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/INTEGRATION-GUIDE.md

Verify that the Magento2 Instagram feed module is installed and enabled.

```bash
# In Magento2
php bin/magento module:status | grep -i instagram
# Should show: Magebit_InstagramFeed
```

--------------------------------

### Frontend Module Dependencies

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/ARCHITECTURE.md

Illustrates the entry point and module imports for the frontend Instagram Feed component, including its reliance on the store and other core modules.

```plaintext
index.ts (entry point)
  ├─ store/index.ts
  │   ├─ types/InstagramFeedState.ts
  │   ├─ store/mutation-types.ts
  │   ├─ isomorphic-fetch
  │   ├─ config (application config)
  │   └─ RootState (vue-storefront/core)
  │
  └─ StorefrontModule (vue-storefront/core)

mixins/InstagramFeed.ts
  ├─ vuex (mapGetters)
  └─ (used by components, returns getters)
```

--------------------------------

### Get Instagram Feed

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/ARCHITECTURE.md

Fetches the latest Instagram feed posts. Supports optional width and height parameters for thumbnail generation.

```APIDOC
## GET /api/ext/vue-storefront-instagram-api/feed

### Description
Fetches a list of Instagram posts. This endpoint can be used to retrieve media items to display in a feed.

### Method
GET

### Endpoint
/api/ext/vue-storefront-instagram-api/feed

### Parameters
#### Query Parameters
- **width** (number) - Optional - The desired width for generated thumbnails.
- **height** (number) - Optional - The desired height for generated thumbnails.

### Response
#### Success Response (200)
- **code** (number) - The HTTP status code, expected to be 200 for success.
- **result** (array) - An array of Instagram media objects.
  - **id** (string) - The unique identifier for the Instagram post.
  - **caption** (string) - The caption of the Instagram post.
  - **media_url** (string) - The URL of the full-size media.
  - **media_url_thumb** (string) - The URL of the generated thumbnail.
  - **permalink** (string) - The direct link to the Instagram post.

#### Response Example
{
  "code": 200,
  "result": [
    {
      "id": "string",
      "caption": "string",
      "media_url": "string",
      "media_url_thumb": "string",
      "permalink": "string"
    }
  ]
}

#### Error Response (500)
- **code** (number) - The HTTP status code, expected to be 500 for errors.
- **message** (string) - A message describing the error.

#### Error Response Example
{
  "code": 500,
  "message": "string"
}
```

--------------------------------

### Test Caching

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/INTEGRATION-GUIDE.md

Measure the response time for the first request (cache miss) and compare it with the second request (cache hit). A cache hit should be significantly faster and include the 'X-VS-Cache: Hit' header.

```bash
# First request (cache miss)
time curl "http://localhost:8080/api/ext/vue-storefront-instagram-api/feed?width=200&height=200"

# Second request (cache hit)
time curl "http://localhost:8080/api/ext/vue-storefront-instagram-api/feed?width=200&height=200"
# Should be much faster and include: X-VS-Cache: Hit
```

--------------------------------

### GET /api/ext/vue-storefront-instagram-api/feed

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/FILE-MANIFEST.txt

Retrieves the Instagram feed. This endpoint provides the feed data, including thumbnail URLs, and details on its caching behavior.

```APIDOC
## GET /api/ext/vue-storefront-instagram-api/feed

### Description
Retrieves the Instagram feed data.

### Method
GET

### Endpoint
/api/ext/vue-storefront-instagram-api/feed

### Parameters
#### Query Parameters
- **request** (object) - Optional - Parameters for the feed request.

### Response
#### Success Response (200)
- **items** (array) - List of Instagram media posts.
- **total** (number) - Total number of items in the feed.

#### Response Example
{
  "items": [
    {
      "id": "1234567890",
      "media_url": "https://example.com/media/image.jpg",
      "thumbnail_url": "https://example.com/media/thumb.jpg",
      "caption": "A beautiful post."
    }
  ],
  "total": 10
}
```

--------------------------------

### Configure Local API Extension Settings

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/INTEGRATION-GUIDE.md

Configure the Magento 2 API connection and server settings for local development.

```json
{
  "magento2": {
    "api": {
      "url": "http://localhost:3000",
      "token": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9..."
    }
  },
  "server": {
    "url": "http://localhost:8080",
    "useOutputCache": false
  }
}
```

--------------------------------

### GET /feed

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/api-reference/api-endpoint.md

Fetches Instagram feed posts and returns them with thumbnail URLs. Supports query parameters for thumbnail dimensions and includes caching mechanisms.

```APIDOC
## GET /feed

### Description
Fetches Instagram feed posts and returns them with thumbnail URLs. Implements caching with a 30-minute TTL.

### Method
GET

### Endpoint
/feed

### Parameters
#### Query Parameters
- **width** (number) - Required - Thumbnail image width in pixels
- **height** (number) - Required - Thumbnail image height in pixels

### Response
#### Success Response (200 OK)
- **code** (number) - HTTP status code, should be 200
- **result** (array) - An array of Instagram media post objects. Each object may contain:
  - **id** (string) - The unique identifier for the media.
  - **caption** (string) - The caption of the media post.
  - **media_url** (string) - The direct URL to the media.
  - **thumbnail_url** (string) - Optional. A URL for a thumbnail of the media.
  - **permalink** (string) - The direct URL to the media on Instagram.
  - **media_url_thumb** (string) - Generated thumbnail URL with specified width and height.

#### Response Example
{
  "code": 200,
  "result": [
    {
      "id": "17999...",
      "caption": "Summer vibes 🌞",
      "media_url": "https://instagram.com/...",
      "media_url_thumb": "http://localhost:8080/img/?url=https%3A%2F%2F...&width=370&height=370&action=fit",
      "permalink": "https://instagram.com/p/"
    }
  ]
}

#### Error Response (500)
- **code** (number) - HTTP status code, should be 500
- **message** (string) - Error message with details
```

--------------------------------

### Import InstagramFeed and KEY

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/EXPORTS.md

Import the main InstagramFeed function and the KEY constant from the extension's index file.

```typescript
import { InstagramFeed, KEY } from './vue-storefront-instagram-feed'
```

--------------------------------

### Module Initialization

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/api-reference/api-endpoint.md

Exports the module initialization function that creates and returns the Express router for the Instagram Feed API. This function takes a configuration object and returns a configured Express router instance.

```APIDOC
## Module Initialization

### Description
Initializes the Instagram Feed API module by creating and returning an Express router. This router is designed to be mounted within the Vue Storefront API extensions.

### Function Signature
```typescript
module.exports = ({ config }): Router
```

### Parameters
#### Config Object
- **config** (`object`) - Required - The Vue Storefront API configuration object.
  - **config.magento2.api** (`object`) - Required - Configuration for the Magento2 REST API.
  - **config.server** (`object`) - Required - Server configuration, must include a `url` property.
    - **config.server.useOutputCache** (`boolean`) - Optional - Enables output caching. Defaults to `false`.

### Returns
- `Router` - An Express router instance configured with the `/feed` route, ready to be mounted.

### Behavior
1. Creates a Magento2 client using `config.magento2.api`.
2. Extends the client with `extendClient()`.
3. Creates and configures an Express router with a `/feed` route.
4. Returns the router for the VSF API to mount.

### Usage Example (VSF API Config)
```typescript
// In VSF API extensions config
import InstagramFeedAPI from './extensions/vue-storefront-instagram-api'

export const extensions = [
  {
    name: 'instagram',
    module: InstagramFeedAPI
  }
]
```
```

--------------------------------

### Configure SSR with beforeRouteEnter

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/INTEGRATION-GUIDE.md

Use this method for initial data fetching on the client-side during the first navigation when SSR is enabled. Ensure the module is registered and data is dispatched to the store.

```typescript
beforeRouteEnter (to, from, next) {
  if (!isServer && !from.name) {
    // Only client-side, first navigation
    Promise.all([
      // ... other async data
      store.dispatch('instagram-feed/get', {
        width: config.instagram.thumbnails.width,
        height: config.instagram.thumbnails.height
      })
    ]).then(() => {
      next(vm => {
        // Navigation complete
      })
    })
  } else {
    next()
  }
}
```

--------------------------------

### Enable Debug Logging for Instagram Feed

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/INTEGRATION-GUIDE.md

Add console logs within the Vuex store's 'get' action to debug feed fetching and data processing.

```typescript
// In store/index.ts, add logging
actions: {
  get ({ getters, commit }, { width, height }) {
    const url = `${config.instagram.endpoint}?width=${width}&height=${height}`
    console.log('Fetching from:', url)
    
    fetch(url)
      .then(res => {
        console.log('Response:', res)
        return res.json()
      })
      .then(res => {
        console.log('Data:', res)
        commit(types.SET_INSTAGRAM_FEED, res.result)
      })
      .catch(err => console.error('Fetch error:', err))
  }
}
```

--------------------------------

### Instagram Feed API Endpoint Response Schema

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/EXPORTS.md

Defines the structure of the response from the `GET /api/ext/vue-storefront-instagram-api/feed` endpoint. Includes status code, results, and potential error messages.

```typescript
{
  code: 200 | 500,
  result?: any[],
  message?: string
}
```

--------------------------------

### Cache Error Handling Strategy

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/ARCHITECTURE.md

Explains how cache errors are managed, focusing on logging and non-blocking behavior.

```text
Cache Error (API/index.ts)
├─ Caught, logged to console
├─ Non-blocking (response still returned)
└─ API continues without caching
```

--------------------------------

### Production Configuration (production.json)

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/configuration.md

Configuration for the production environment, using a public API endpoint and larger thumbnail dimensions.

```json
{
  "instagram": {
    "endpoint": "https://api.example.com/api/ext/vue-storefront-instagram-api/feed",
    "thumbnails": {
      "width": 370,
      "height": 370
    }
  }
}
```

--------------------------------

### Import All Exports from Instagram Feed Module

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/EXPORTS.md

Demonstrates how to import all available exports from the main Instagram Feed module, including the main export, a key constant, the store module, mutation types, state types, mixins, and API modules.

```typescript
// Frontend module entry
import { InstagramFeed, KEY } from './vue-storefront-instagram-feed'

// Store module
import { module as instagramStoreModule } from './store'

// Mutation types
import * as mutationTypes from './store/mutation-types'

// State type
import InstagramFeedState from './types/InstagramFeedState'

// Mixin
import InstagramFeedMixin from './mixins/InstagramFeed'

// API
import InstagramAPI from './extensions/vue-storefront-instagram-api'
```

--------------------------------

### Copy API Module Files

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/INTEGRATION-GUIDE.md

Copy the Instagram API extension module to your Vue Storefront API project's extensions directory.

```bash
# From VSF module
cp -r vue-storefront/src/modules/vue-storefront-instagram-feed/API/vue-storefront-instagram-api \
  vue-storefront-api/src/extensions/
```

--------------------------------

### API Request for Instagram Feed

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/ARCHITECTURE.md

Illustrates the HTTP GET request format used to fetch the Instagram feed. It includes query parameters for specifying desired image dimensions.

```http
GET /api/ext/vue-storefront-instagram-api/feed?width=370&height=370
```

--------------------------------

### VSF API Endpoint Call

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/OVERVIEW.md

The frontend makes an HTTP GET request to the VSF API endpoint to retrieve Instagram feed data. This includes query parameters for customization.

```javascript
fetch(config.instagram.endpoint + query params)
```

--------------------------------

### Configure Production API Extension Settings

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/INTEGRATION-GUIDE.md

Configure the Magento 2 API connection and server settings for production. Ensure to replace placeholder values with your actual API token and URLs.

```json
{
  "magento2": {
    "api": {
      "url": "https://magento.example.com",
      "token": "Bearer <your-api-token>"
    }
  },
  "server": {
    "url": "https://api.example.com",
    "useOutputCache": true
  }
}
```

--------------------------------

### Express Route Handler for Instagram Feed

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/api-reference/api-endpoint.md

Handles GET requests to the /feed endpoint to fetch Instagram posts. It includes query parameter handling, caching, and response formatting.

```typescript
router.get('/feed', async (req, res): Promise<void>
```

--------------------------------

### Module Initialization Function

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/api-reference/api-endpoint.md

Exports the module initialization function that creates and returns the Express router. It configures the Magento2 client and sets up the '/feed' route.

```typescript
module.exports = ({ config }): Router
```

--------------------------------

### SSR Instagram Feed Data

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/API/vue-storefront-instagram-api/README.md

Ensure Instagram data is available during Server-Side Rendering (SSR) by dispatching the `instagram-feed/get` action in `beforeRouteEnter` and `asyncData`. This example shows integration within `Home.vue`.

```javascript
import config from 'config'

beforeRouteEnter (to, from, next) {
    if (!isServer && !from.name) {
        ...
        await Promise.all([
          ...
          vm.$store.dispatch('instagram-feed/get', {
            limit: config.instagram.limit,
            width: config.instagram.thumbnails.width,
            height: config.instagram.thumbnails.height
          })
        ])
        ...
      })
    } else {
      next()
    }
  },
  async asyncData ({ store, route }) {
    ...
    await Promise.all([
      ...
      store.dispatch('instagram-feed/get', {
        limit: config.instagram.limit,
        width: config.instagram.thumbnails.width,
        height: config.instagram.thumbnails.height
      })
     ...
    ])
  }
```

--------------------------------

### API Fetch Error Handling Strategy

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/ARCHITECTURE.md

Illustrates how API fetch errors are handled, leading to silent failures and unchanged state on the frontend.

```text
API Fetch Error (store/index.ts)
├─ Silent failure (no catch block)
├─ State remains unchanged (media stays [])
└─ Component shows loading state or empty message
```

--------------------------------

### Verify Server URL Resolution

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/configuration.md

Check if the server URL resolves correctly and is accessible from client-side applications. This ensures basic network connectivity to your server.

```bash
curl "http://localhost:8080/"
```

--------------------------------

### KEY Constant

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/api-reference/module-registration.md

The namespace key used for registering the Vuex module and accessing store state, actions, and getters.

```APIDOC
## KEY

### Description
The namespace key used for registering the Vuex module and accessing store state/actions/getters.

### Value
`'instagram-feed'`

### Usage Example
```typescript
// Access media from store
const media = store.state['instagram-feed'].media

// Dispatch action
store.dispatch('instagram-feed/get', { width: 200, height: 200 })

// Access getter
const feed = store.getters['instagram-feed/media']
```
```

--------------------------------

### Use New Mutation SET_INSTAGRAM_LOADING in Store

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/api-reference/mutation-constants.md

Shows how to incorporate the new SET_INSTAGRAM_LOADING mutation into the store's mutations object.

```typescript
mutations: {
  [types.SET_INSTAGRAM_FEED] (state, payload) {
    state.media = payload
  },
  [types.SET_INSTAGRAM_LOADING] (state, isLoading) {
    state.isLoading = isLoading
  }
}
```

--------------------------------

### Get Instagram Profile ID via Console

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/API/vue-storefront-instagram-api/README.md

Retrieve your Instagram profile ID by opening your browser's developer tools and executing a JavaScript snippet in the console on your Instagram profile page.

```javascript
window._sharedData.entry_data.ProfilePage[0].graphql.user.id
```

--------------------------------

### Generated Thumbnail URL Format

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/types.md

Shows the format for a generated thumbnail URL, which includes the base image URL and resizing parameters for width, height, and action. This is used for creating responsive image thumbnails.

```typescript
http://localhost:8080/img/?url=https%3A%2F%2F...&width=370&height=370&action=fit
```

--------------------------------

### API Module Dependencies

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/ARCHITECTURE.md

Details the dependencies for the API module, including frameworks like express, clients, hashing utilities, cache instances, and configuration sources.

```plaintext
API/vue-storefront-instagram-api/index.ts
  ├─ express (Router, routing)
  ├─ magento2-rest-client (client creation)
  ├─ js-sha3 (SHA3 hashing for cache keys)
  ├─ ../../../lib/util (apiStatus function)
  ├─ ../../../lib/cache-instance (Redis cache)
  │   └─ redis (cache backend)
  └─ config (magento2.api, server.url, server.useOutputCache)
```

--------------------------------

### SSR Instagram Feed Data Loading

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/README.md

Ensure Instagram data is available during Server-Side Rendering (SSR) by dispatching the 'instagram-feed/get' action in both `beforeRouteEnter` and `asyncData` methods. This example shows integration within a Home.vue component.

```javascript
import config from 'config'

beforeRouteEnter (to, from, next) {
    if (!isServer && !from.name) {
        ...
        await Promise.all([
          ...
          vm.$store.dispatch('instagram-feed/get', {
            width: config.instagram.thumbnails.width,
            height: config.instagram.thumbnails.height
          })
        ])
        ...
      })
    } else {
      next()
    }
  },
  async asyncData ({ store, route }) {
    ...
    await Promise.all([
      ...
      store.dispatch('instagram-feed/get', {
        width: config.instagram.thumbnails.width,
        height: config.instagram.thumbnails.height
      })
     ...
    ])
  }
```

--------------------------------

### Configure Instagram Thumbnails

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/API/vue-storefront-instagram-api/README.md

Set the Instagram image limit and thumbnail dimensions in your `config/docker.json` and `config/production.json` files. These values can be adjusted as needed.

```json
"instagram": {
    "limit": 8,
    "thumbnails": {
      "width": 200,
      "height": 200
    }
  }
```

--------------------------------

### Accessing Instagram Feed Data with mapGetters

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/README.md

Demonstrates how to access Instagram feed data from the Vuex store using `mapGetters`. Ensure the `instagram-feed` module is registered.

```javascript
import { mapGetters } from 'vuex'

...
{
  computed: {
    ...mapGetters({
      feed: 'instagram-feed/media',
      hasItems: 'instagram-feed/hasItems'
    })
  }
}
```

--------------------------------

### Enable Server-Side Output Caching

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/INTEGRATION-GUIDE.md

Enable server-side output caching to improve response times. This configuration should be applied in your server settings.

```json
{
  "server": {
    "useOutputCache": true
  }
}
```

--------------------------------

### Minimal Configuration for Testing

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/configuration.md

This JSON object represents the essential configuration settings for testing the VSF Instagram Feed extension. It specifies the VSF API endpoint, thumbnail dimensions, Magento 2 API details, and server settings.

```json
{
  "instagram": {
    "endpoint": "http://localhost:8080/api/ext/vue-storefront-instagram-api/feed",
    "thumbnails": {
      "width": 200,
      "height": 200
    }
  },
  "magento2": {
    "api": {
      "url": "http://localhost:3000",
      "token": "Bearer test-token-123"
    }
  },
  "server": {
    "url": "http://localhost:8080",
    "useOutputCache": false
  }
}
```

--------------------------------

### Verify Instagram Feed Module File Existence

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/INTEGRATION-GUIDE.md

Check if the Instagram feed module's index file exists in the specified path.

```bash
# Check file exists
ls vue-storefront/src/modules/vue-storefront-instagram-feed/index.ts
```

--------------------------------

### High-Level System Design Diagram

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/ARCHITECTURE.md

This diagram illustrates the architecture of the VSF Instagram Feed extension, showing the interaction between the user browser, Vue Storefront API Server, Magento2 Backend, Redis Cache, and the Instagram Basic Display API.

```mermaid
graph TD
    subgraph User Browser
        subgraph Vue.js Application
            subgraph Vue Component + InstagramFeed Mixin
                direction TB
                A[Computed: feed (via getter)]
                B[Computed: hasItems (via getter)]
                C[Template: Render media from feed]
            end
            D(Dispatch Action)
            E(instagram-feed/get)
            subgraph Vuex Store (instagram-feed module)
                direction TB
                F[State: media: InstagramMediaPost[]]
                G[Action: get(width, height)]
                H[Getters: media: () => state.media]
                I[Getters: hasItems: () => state.media.length > 0]
            end
            J(HTTP Fetch)
            K(GET /api/ext/vue-storefront-instagram-api/feed)
            L(?width=X&height=Y)
        end
    end
    M(Network)
    subgraph Vue Storefront API Server
        subgraph Express Router
            N(GET /api/ext/vue-storefront-instagram-api/feed)
            O(1. Parse width, height from query params)
            P(2. Check Redis cache)
            Q(HIT: Return cached response + X-VS-Cache:Hit)
            R(MISS: Continue to Magento2)
            S(3. Call client.instagram.getPosts())
            T(4. Transform: Add media_url_thumb to each post)
            U(5. Save to cache (if enabled))
            V(6. Return response: { code: 200, result: [...] })
        end
        W(Magento2 Client /)
        X(Redis Cache Instance)
        Y(↓)
        Z(↓)
        AA(↓)
        BB(↓)
    end
    CC(Magento2 Backend)
    DD(Instagram Basic Display API (via M2))
    EE(Redis Cache)
    FF(/rest/V1/magebit-instagramfeed/media)
    GG(TTL: 1800s)
    HH(Tag: feed)

    subgraph Vue.js Application
        C --> D
        D --> E
        E --> G
        G --> H
        G --> I
        I --> J
        J --> K
        K --> L
    end

    subgraph Vuex Store (instagram-feed module)
        G --> F
        G --> H
        G --> I
    end

    J --> M
    M --> N

    subgraph Express Router
        N --> O
        O --> P
        P --> Q
        P --> R
        R --> S
        S --> T
        T --> U
        U --> V
    end

    W --> CC
    X --> EE
    Y --> CC
    Z --> EE
    AA --> DD
    BB --> EE

    CC --> FF
    CC --> DD
    EE --> GG
    EE --> HH

```

--------------------------------

### Configure VSF-API Server URL

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/README.md

Add the 'server.url' field to your VSF-API configuration to ensure absolute image URLs are returned. This should match your VSF-API's running address.

```json
"server": {
  "url": "http://localhost:8080"
}
```

--------------------------------

### Instagram Feed State Transition Diagram

Source: https://github.com/magebitcom/vsf-instagram-feed/blob/master/_autodocs/ARCHITECTURE.md

Visualizes the flow of data and state changes within the Instagram Feed module, from initialization and data fetching to state updates and component rendering.

```text
┌──────────────────────────────────────────────────┐
│  Store Initialization                            │
│  media: []                                       │
│  getters.hasItems: false                        │
└──────────────────────┬──────────────────────────┘
                       │
                       │ dispatch('instagram-feed/get')
                       ↓
┌──────────────────────────────────────────────────┐
│  Action: get                                     │
│  Check: getters.hasItems                         │
│  ├─ if true → return current media (skip fetch) │
│  └─ if false → continue                          │
└──────────────────────┬──────────────────────────┘
                       │
                       ↓
┌──────────────────────────────────────────────────┐
│  HTTP Fetch                                      │
│  GET /api/ext/vue-storefront-instagram-api/feed │
│  ?width={width}&height={height}                  │
└──────────────────────┬──────────────────────────┘
                       │
         ┌─────────────┴─────────────┐
         ↓                           ↓
    ┌─────────┐             ┌──────────────────┐
    │ Success │             │ Error            │
    │ (JSON)  │             │ (silent fail)    │
    └────┬────┘             └──────────────────┘
         │
         ↓
┌──────────────────────────────────────────────────┐
│  Parse response.result array                     │
└──────────────────────┬──────────────────────────┘
                       │
                       ↓
┌──────────────────────────────────────────────────┐
│  Commit: SET_INSTAGRAM_FEED                      │
│  state.media = response.result                   │
└──────────────────────┬──────────────────────────┘
                       │
                       ↓
┌──────────────────────────────────────────────────┐
│  Updated State                                   │
│  media: [{ ... }, { ... }, ...]                 │
│  getters.hasItems: true                         │
│  getters.media: [...]                           │
└──────────────────────┬──────────────────────────┘
                       │
                       ↓
┌──────────────────────────────────────────────────┐
│  Vue Component Updates                           │
│  Computed properties recalculate                 │
│  Template re-renders with new data              │
└──────────────────────────────────────────────────┘
```