Components

Core Components

ArticleTitle

• value:
• Set title value and can input pure string or HTML string.
• If no value is passed will use article title as default value

<script setup>
const title = 'article Title'
// const title = '<div>title</div>'
</script>

<template>
    <ArticleTitle :value="title" />
</template>

ArticleBlurb

• value:
• Set blurb value and can input pure string or HTML string.
• If no value is passed will use article blurb as default value

<script setup>
const blurb = 'article blurb'
// const blurb = '<div>blurb</div>'
</script>

<template>
    <ArticleBlurb :value="blurb" />
</template>

ArticleBody

<script setup></script>

<template>
    <ArticleBody />
</template>

ArticleHeroPhoto

• src: Set image URL

• alt: Set image alt

• width/height: Set the width/height of the image.

• sizes: Specify responsive sizes.

• modifiers: We support unsplash modifiers

1. Unsplash: https://v1.image.nuxtjs.org/providers/unsplash

2. Custom provider: https://v1.image.nuxtjs.org/advanced/custom-provider

<script setup></script>

<template>
    <ArticleHeroPhoto 
			src="https://picsum.photos/800/600" 
			alt="photo"
			width="500"
      height="500"
      sizes="sm:100vw md:50vw lg:400px"
      :modifiers="{ flip: true, quality: 5, blur: 25 }" 
		/>
</template>

1. unsplash: https://v1.image.nuxtjs.org/providers/unsplash

2. custom provider: https://v1.image.nuxtjs.org/advanced/custom-provider

ArticleLayout

• article: Use saved layout

• layout: Pass a layout name to use the specific layout

• resolveLayout: If you need more control, you can pass a function which accept an article, and then return a layout name. This function has higher priority over layout

<template>
    <ArticleLayout :article="article" :resolve-layout="(article) => 'your-layout-name'" />
</template>

StoripressImage

<template>
  <StoripressImage 
		src="https://images.unsplash.com/photo-1661961111247-e218f67d1cd2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyMzc2NzF8MXwxfGFsbHwxfHx8fHx8Mnx8MTY2OTAxOTM4Mw&ixlib=rb-4.0.3"
    width="500"
    height="500"
    :

StoripressSearch

• v-model: Specify search value

• queryBy: Specify how to sort the search results

Example of v-model and queryBy in use.

<script lang="ts" setup>
const queryBy = 'title'
const searchInput = ref('')
</script>

<template>
	<StoripressSearch v-slot="props" v-model="searchInput" :query-by="queryBy">
		<div>
			<input v-model="searchInput" placeholder="Type something to search..." />
		</div>
    <div v-if="props.items.length === 0">
      <h1>We’re sorry, we couldn’t find any articles!</h1>
      <h2>Why don't you try searching for something else?</h2>
    </div>
    <div v-else class="grid grid-cols-1 gap-6 pb-24 lg:grid-cols-3">
      <div v-for=" item in props.items" :key="item.id">
        {{ item.title }}
      </div>
    </div>
  </StoripressSearch>
</template>

InfiniteScroll

• source: Required
• An AsyncGenerator is passed in as an argument and the Generator object created via source returns a set of content data each time .next() is called.

• as: Optional
• Default: 'div'
• Specifies the HTML tag for the component's root element.

• distance: Optional
• Default: 50
• The distance (in pixels) from the bottom of the scroll container at which the loadMore function should be triggered.

• el: Optional
• Default: document (the whole page)
• The scroll container element. The InfiniteScroll will observe the scroll events on this element.

1. Height Setting: The scroll container (el) needs to have a defined height to establish the scrolling context. Without a specified height, the scroll events might not behave as expected, leading to issues with the loading mechanism.

2. Overflow Setting: Applying the overflow property (e.g., overflow: auto or overflow: scroll) to the scroll container (el) ensures that the content within it becomes scrollable when the number of items exceeds the container's visible area. This enables the InfiniteScroll component to accurately detect when the user has scrolled to the bottom and initiate the loading of additional content.

• default

You can retrieve data for each article by using #default="article" in the <template />, defining how each article should be rendered.

If not specified, it will use the default ArticleLayout component as the render component for each article.

Example of slots in use

<InfiniteScroll :source="createLoadMore" @done="onDone">
	<template #default="article">
    <h1>{{ article.title }}</h1>
  </template>
</InfiniteScroll>

• loading

Through this slot setting, you can define how to display a loading indicator or animation when data is being retrieved.

Example of loading in use

<InfiniteScroll :source="createLoadMore" @done="onDone">
	<template #loading>
    <div>Loading...</div>
  </template>
</InfiniteScroll>

• moreLoaded: Triggered each time more content is read, sending back the latest data.

• done: There is no more content to read.

Example of moreLoaded and done ins use

<script lang="ts" setup>
async function* GenSource() {
  const articles = await getAllArticles()
  for (const article of articles) {
    yield article
  }
}

const onMoreLoaded = (article) => console.log(`article ${article.id} is added.`)

const onDone = () => console.log(`all articles added.`)
</script>

<template>
  <InfiniteScroll :source="GenSource" @more-loaded="onMoreLoaded" @done="onDone" />
</template>

Advertising Components

AdvertisingConfig

1. To use Google Publisher Tag(GPT), we need to set up the content of the slots and set usePrebid and useAPS to be false.

const gptConfig = {
  slots: [
    {
      id: 'banner-ad',
      path: '/6355419/Travel/Europe/France/Paris',
      sizes: [[300, 250]],
    },
  ],
  usePrebid: false,
  useAPS: false,
}

2. To use Prebid, we need to set usePrebid to be true and set up the format of Prebid in slots.

const div_1_sizes = [
  [300, 250],
  [300, 600],
]

const prebidConfig = {
  slots: [
    {
      id: 'prebid-1',
      path: '/19968336/header-bid-tag-0',
      sizes: div_1_sizes,
      prebid: [
        {
          mediaTypes: {
            banner: {
              sizes: div_1_sizes,
            },
          },
          bids: [
            {
              bidder: 'appnexus',
              params: {
                placementId: 13144370,
              },
            },
          ],
        },
      ],
    },
  ],
  usePrebid: true,
  useAPS: false,
}

1. GPT: https://developers.google.com/publisher-tag/guides/get-started

2. prebid: https://docs.prebid.org/prebid/prebidjs.html

3. react-advertising: https://github.com/KijijiCA/react-advertising/wiki

AdvertisingSlotConfig

AdvertisingProvider

AdvertisingSlot

GlobalAdvertisingProvider

GlobalAdvertisingSlot