Components
API reference for components
Components
Core Components
ArticleTitle
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
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
Show article content
Style
Use class
to custom style
Example
<script setup></script> <template> <ArticleBody /> </template>
ArticleHeroPhoto
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 supportunsplash
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
- 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
- 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 anarticle
, and then return a layout name. This function has higher priority overlayout
Example
<template>
<ArticleLayout :article="article" :resolve-layout="(article) => 'your-layout-name'" />
</template>
StoripressImage
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
<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
useArticleLoader
in link for the helper that implements infinite scrollUse this Component to present content in an infinite scroll.
This component is implemented using useInfiniteScroll
from the VueUse
library. For further information, you can refer to: https://vueuse.org/core/useInfiniteScroll/#useinfinitescroll
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.
- 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.
About el
el
prop in the InfiniteScroll
component, please ensure that you also explicitly set the height
and overflow
properties for the provided elementThe InfiniteScroll
component relies on observing scroll events within the specified scroll container (el
). In order to accurately determine the scroll position and trigger the loading of more content, the following considerations must be taken into account:
- 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.
- Overflow Setting: Applying the
overflow
property (e.g.,overflow: auto
oroverflow: 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 theInfiniteScroll
component to accurately detect when the user has scrolled to the bottom and initiate the loading of additional content.
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.
<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.
<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.
<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
anduseAPS
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
- 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
.
Last updated on January 16, 2023