Truncate content with fade out effect
What you'll build
You will learn how to use a Surface component workflow to truncate article content with a fade-out effect. The Edge Worker transforms the HTML before it reaches the user, showing only the first two paragraphs.
1. Prerequisites
- You will need a Component Workflow in a Surface
2. Add a component
const : = async ({ }) => {
return {
: {
: [
{
: "html",
: `
<style>
#article {
mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}
</style>
`,
},
],
: {
: "p:nth-child(2)",
},
},
};
};
export default ;Result
You will only see the first two paragraphs of your article.