An Interest In:
Web News this Week
- April 15, 2024
- April 14, 2024
- April 13, 2024
- April 12, 2024
- April 11, 2024
- April 10, 2024
- April 9, 2024
Some of Our Sources
- Mashable
- Web Designer Wall
- Pearsonified
- Web Designer Depot
- Web Design Ledger
- Reencoded
- Wal You
- Android Dissected
- Android Headlines
- Willems Lab
Help Webnuz
Referal links:
Build a Medium UI clone with Svelte, Materialize and Web Monetization API
In this post, I'll be taking you through how I designed a simple Medium-like UI that utilizes our svelte-monetization component.
Setting up the application
I built the app using Svelte. I made use of materializecss for the responsive design and svelte-monetization for showing/hiding ads and remove image watermarks.
Open up your terminal and run the following to generate a new svelte app.
npx degit sveltejs/template medium-cloneAdd your payment pointer in the index.html file located inside the public folder.
<meta name="monetization" content="$coil.xrptipbot.com/701298d5-481d-40ff-9945-336671ab2c42" />Next, install the following dependencies.
npm install materialize-css rollup-plugin-css-only svelte-monetization watermarkjsSetup materialize and rollup
In rollup.config.js, configure the plugin by importing it import css from 'rollup-plugin-css-only' and add the css({output: "public/build/base.css"}) to the list of plugins.
Now we can import .css files in src/main.js:
import '../node_modules/materialize-css/dist/css/materialize.css'Don't forget to update public/index.html to include the generated base.css instead of global.css:
- <link rel='stylesheet' href='/global.css'>+ <link rel='stylesheet' href='/build/base.css'>Components
Inside the src folder, add a components folder and create 3 files - Nav.svelte, Footer.svelte, and Advertisement.svelte.
Our Nav.svelte component is a simple Navbar with a title.
<nav class="white" role="navigation"> <div class="nav-wrapper container"> <a href="/" class="brand-logo black-text">Mediocre</a> </div></nav>Next, the Footer.svelte component that contains dummy text.
<footer class="page-footer grey darken-4"> <div class="container"> <div class="row"> <div class="col l4 s12"> <h5 class="white-text">Discover Mediocre</h5> <p class="grey-text text-lighten-4"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius architecto dolores voluptatum ipsa aliquid fuga asperiores vitae veniam laudantium non! </p> </div> <div class="col l4 s12"> <h5 class="white-text">Make Mediocre yours</h5> <p class="grey-text text-lighten-4"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad velit molestiae excepturi error est aperiam? </p> </div> <div class="col l4 s12"> <h5 class="white-text">Become a member</h5> <p class="grey-text text-lighten-4"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis officia consequatur repellendus dolores voluptate commodi. </p> </div> </div> </div> <div class="footer-copyright"> <div class="container">Mediocre</div> </div></footer>And lastly, the Advertisement component which should appear if the user is not web monetized.
<div class="card"> <div class="card-content"> <span class="card-title">Get unlimited access</span> <p>Become a member to keep reading.</p> <br /> <a href="https://coil.com/" class="waves-effect waves-light btn"> VISIT COIL </a> <br /> <br /> <p>Here's what you get when you upgrade to membership:</p> <br /> <p> <span style="font-weight: bold;">Unlimited access.</span> Explore Mediocre's library filled with everything you're curious about. </p> <br /> <p> <span style="font-weight: bold;">No ads.</span> There are zero ads on Mediocre and we don't sell your data. </p> <br /> <p> <span style="font-weight: bold;">Reward quality writing.</span> When you spend time reading a story, you make the author happy. </p> <br /> <p> "I love Mediocre's membership it gives me access to the stories I love by the writers I love, and it allows me to help support those writers financially." </p> <p style="font-weight: bold;">John Doe, Mediocre member</p> </div></div> Using svelte-monetization
Inside our App.svelte, let's import our components and add dummy content.
<script> import Nav from "./components/Nav.svelte"; import Footer from "./components/Footer.svelte"; import Advertisement from "./components/Advertisement.svelte"; let imageUrl = "https://i.imgur.com/tMxofag.png";</script><!-- Nav --><Nav /><!-- Main --><main> <div class="container"> <div class="section"> <h4>Lorem ipsum dolor sit amet, consectetur adipisicing</h4> <p>Oct 1, 2020 11 min read</p> <div style="text-align: center;"> <img src={imageUrl} alt="banner" class="responsive-img" /> </div> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat eveniet accusantium voluptate ex, dignissimos fuga assumenda quidem! Voluptatum, illo! Architecto sed ullam doloremque voluptatum tenetur ipsam maiores accusamus, necessitatibus voluptates laudantium facilis corrupti ut saepe praesentium, obcaecati odio nulla expedita. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat eveniet accusantium voluptate ex, dignissimos fuga assumenda quidem! Voluptatum, illo! Architecto sed ullam doloremque voluptatum tenetur ipsam maiores accusamus, necessitatibus voluptates laudantium facilis corrupti ut saepe praesentium, obcaecati odio nulla expedita. </p> <Advertisement /> </div> </div></main><!-- Footer --><Footer />Our app then will look like this.
Now the next thing that we want is to hide the Advertisement component and show full content of the article when the user is web monetized. We can now import svelte-monetization.
We will use Svelte's each block to loop over our dummy text.
<script> import Nav from "./components/Nav.svelte"; import Footer from "./components/Footer.svelte"; import Advertisement from "./components/Advertisement.svelte"; import SvelteMonetization from "svelte-monetization"; let imageUrl = "https://i.imgur.com/tMxofag.png";</script><!-- Nav --><Nav /><!-- Main --><main> <div class="container"> <div class="section"> <h4>Lorem ipsum dolor sit amet, consectetur adipisicing</h4> <p>Oct 1, 2020 11 min read</p> <div style="text-align: center;"> <img src={imageUrl} alt="banner" class="responsive-img" /> </div> <SvelteMonetization> <div slot="loading">Loading...</div> <div slot="not-monetized"> {#each [...Array(2).keys()] as item} <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat eveniet accusantium voluptate ex, dignissimos fuga assumenda quidem! Voluptatum, illo! Architecto sed ullam doloremque voluptatum tenetur ipsam maiores accusamus, necessitatibus voluptates laudantium facilis corrupti ut saepe praesentium, obcaecati odio nulla expedita. </p> {/each} <Advertisement /> </div> <div slot="monetized"> {#each [...Array(10).keys()] as item} <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat eveniet accusantium voluptate ex, dignissimos fuga assumenda quidem! Voluptatum, illo! Architecto sed ullam doloremque voluptatum tenetur ipsam maiores accusamus, necessitatibus voluptates laudantium facilis corrupti ut saepe praesentium, obcaecati odio nulla expedita. </p> {/each} </div> </SvelteMonetization> </div> </div></main><!-- Footer --><Footer />Output:
To test this, make sure you have the Coil extension installed and the Simulate Monetization bookmarklet added to your bookmarks. Steps can be seen here.
What if we want to add watermarks to our image? And remove it when user is web monetized? Good thing there's a watermarking library named watermarkjs and we can apply it to our app.
Let's import it inside App.svelte and do the code below.
<script> import { onMount } from "svelte"; import Nav from "./components/Nav.svelte"; import Footer from "./components/Footer.svelte"; import Advertisement from "./components/Advertisement.svelte"; import SvelteMonetization from "svelte-monetization"; import watermark from "watermarkjs"; const imageUrl = "https://i.imgur.com/tMxofag.png"; let src = imageUrl; const addWatermark = async () => { const text = watermark.text.center( "I'm a watermark", "38px serif", "#fff", 0.5 ); const options = { init(img) { img.crossOrigin = "anonymous"; } }; const img = await watermark([imageUrl], options).image(text); src = img.src; }; onMount(() => { addWatermark(); });</script><!-- Nav --><Nav /><!-- Main --><main> <div class="container"> <div class="section"> <h4>Lorem ipsum dolor sit amet, consectetur adipisicing</h4> <p>Oct 1, 2020 11 min read</p> <div style="text-align: center;"> <img {src} alt="banner" class="responsive-img" /> </div> <!-- Use the start event to track monetizationstart event --> <SvelteMonetization on:start={() => (src = imageUrl)}> <!-- Rest of our code --> </SvelteMonetization> </div> </div></main><!-- Footer --><Footer />We created a function called addWatermark to add a watermark to our image on load. When the start event is dispatched, meaning the user is web monetized, the watermark is removed. Our app will finally look like this.
Full code: https://github.com/sorxrob/svelte-monetization/tree/master/example
Conclusion
There you have it, if you have followed this tutorial to this point, you should have your own Medium-like UI with Web Monetization working.
The Web Monetization API is a very powerful API that will be very helpful to content creators.
If you found this post useful, please add a & both here and in my entry post.
Original Link: https://dev.to/wobsoriano/build-a-medium-ui-clone-with-svelte-materialize-and-web-monetization-api-bd7
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To