@justeat/f-content-cards
Advanced tools
Content cards component
This component requires Braze SDK credentials and an associated User ID to invoke calls to the Braze service.
If credentials are not provided the component will attempt to use any instances of appboy that have been initialised on window.appboy.
This component requires Vue to render. This can either be implemented as part of an existing Vue application or as a micro front-end.
If implementing Vue as part of a static application, we recommend using the following CDN:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
More information can be found at https://vuejs.org/v2/guide/installation.html#Direct-lt-script-gt-Include
This package is a lerna monorepo that makes use of yarn workspaces.
yarn can be installed with the following curl script:
curl -o- -L https://yarnpkg.com/install.sh | bash
More information can be found at https://classic.yarnpkg.com/en/docs/install/#mac-stable
This package can be installed using npm or yarn:
# npm
$ npm i @justeat/f-content-cards
# yarn
$ yarn add @justeat/f-content-cards
You can import it in your Vue SFC like this (please note that styles have to be imported separately):
import ContentCards from '@justeat/f-content-cards';
import '@justeat/f-content-cards/dist/f-content-cards.css';
export default {
components: {
ContentCards
}
}
If you are using Webpack, you can import the component dynamically to separate the header bundle from the main bundle.client.js:
import '@justeat/f-content-cards/dist/f-content-cards.css';
export default {
components: {
...
ContentCards: () => import(/* webpackChunkName: "f-content-cards" */ '@justeat/f-content-cards')
}
}
This module can be ran as a micro front-end for applications that don't make use of the Vue framework.
The following rudimentary example can be used as a guide for implementing this component in an existing static application:
<!doctype html>
<html lang="en">
<head>
<title>Content Cards Example</title>
<link rel="stylesheet" href="node_modules/@justeat/f-content-cards/dist/f-content-cards.css">
</head>
<body>
<div data-content-card>
<content-cards />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="node_modules/@justeat/f-content-cards/dist/f-content-cards.umd.min.js"></script>
<script>
(function() {
if (typeof Vue === 'undefined') return null;
Vue.config.devtools = false;
Vue.config.productionTip = false;
return new Vue({
el: '[data-content-card]',
});
})()
</script>
</body>
</html>
The following props can be used to configure the component:
api-keyType: string Required: false
The Braze SDK api key.
If no apiKey is provided the component will look for an existing appboy implementation at
window.appboy.
user-idType: string Required: false
The Braze User ID associated to the current authenticated user.
If no userId is provided the component will look for an existing appboy implementation at
window.appboy.
enabled-content-cardsType: array Required: false
An array of custom content card types to display.
If no array is passed the component will default to showing all supported content card types.
pushToDataLayerType: function Required: false
A callback for feeding back analytics regarding content cards to the consuming application
If no function is passed then this will be replaced with a noop function
testIdType: string Required: false
Indicates the test id attribute of the component root element.
If this is missing or nully, all child components will also be rendered without test id attributes.
Start by cloning the repository and installing the required dependencies:
$ git clone git@github.com:justeat/fozzie-components.git
$ cd fozzie-components
$ yarn
Change directory to the f-content-cards package:
$ cd packages/f-content-cards
This package comes with a demo application which can be accessed as follows:
Please ensure you are in the f-content-card directory as outlined in the above instructions.
$ yarn demo
Storybook can be used to develop new and existing components.
To start storybook:
Please ensure you are in the f-content-card directory as outlined in the above instructions.
# cd to the storybook package
$ cd ../storybook
# Run storybook
$ yarn storybook:serve
This will build and serve storybook at http://localhost:6006.
Feel free to submit issues and enhancement requests.
Please use Fozzie Components Issues specific bugs and errors.
Our versioning format is based on Keep a Changelog and this project adheres to Semantic Versioning.
For more information on versioning and previous examples please see the CHANGELOG.
Once your change has been merged you must tag, push and deploy your changes using yarn publish or npm publish.
# Checkout master
$ git checkout master
# Check your PR was the last commit
$ git log
# Add a tag (Replacing 0.0.0 with the version)
$ git tag f-content-card@0.0.0
# Push tags
$ git push --tags
# Optional: cd to f-content-cards package
$ cd packages/f-content-cards
# Publish
$ yarn publish
This project is licensed under the Apache v2.0 License - see the LICENSE file for details.
FAQs
Fozzie Content Cards
The npm package @justeat/f-content-cards receives a total of 97 weekly downloads. As such, @justeat/f-content-cards popularity was classified as not popular.
We found that @justeat/f-content-cards demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 29 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."