Components

Core Components

ArticleTitle

⚠️

Please only use it and must use it in article layout

Show article title

Props

value:

Set title value and can input pure string or HTML string.

If no value is passed will use article title as default value

Style

Use class to custom style

Example

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

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

ArticleBlurb

⚠️

Please only use it and must use it in article layout

Show article blurb

Props

value:

Set blurb value and can input pure string or HTML string.

If no value is passed will use article blurb as default value

Style

Use class to custom style

Example

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

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

ArticleBody

⚠️

Please only use it and must use it in article layout

Show article content

Style

Use class to custom style

Example

<script setup></script>

<template>
    <ArticleBody />
</template>

ArticleHeroPhoto

⚠️

Please only use it and must use it in article layout

Show article image

Props

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

Style

Use class to custom style

About sizes and modifiers

Karbon is using nuxt-image underlay, which means that the sizes and modifiers on Karbon’s ArticleHeroPhoto have exactly same syntax with nuxt-image. Please refer to here for more info

References

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

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

Example

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

Ref

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

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

ArticleLayout

Set Article layout

Props

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

Example

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

StoripressImage

💡

It’s sharing same props from ArticleHeroPhoto except the limit that should only use inside article layout. Please reference ArticleHeroPhoto for more information

Use user-uploaded or Unsplash images, and optionally modify the image format parameters using param modifiers.

Example

<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

Use instantSearch to search and display article search results. It allows sorting of results based on the user-defined queryBy param. Users can also customise the presentation of search results by defining the templates

Props

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

💡

Reference useArticleLoader in link for the helper that implements infinite scroll

Use this Component to present content in an infinite scroll.

Props

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.

Slots

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>

Events

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

Define the format of the incoming advertisement config

Example

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,
}

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,
}

References

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

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

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

AdvertisingSlotConfig

Define the format of the slot in the advertisement config

AdvertisingProvider

Provide configuration for the advertising system. Users should use this component to set up their advertising settings before using the AdvertisingSlot component.

AdvertisingSlot

Integration advertising at a specific location within a Karbon application. To use this component, add an id attribute and place it at the desired location for the ad to be displayed.

GlobalAdvertisingProvider

Functionally similar to the AdvertisingProvider, but inserts most of the logic in the <head/> allowing ads to be preloaded.

GlobalAdvertisingSlot

Functionally similar to the AdvertisingSlot, but inserts all the logic in the <head/>. Must be used in conjunction with GlobalAdvertisingProvider.