ilonacodes/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>With Vue</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
    <div class="wrapper">
        <p>Hi there! 👋</p>
        <p>I would like to share some frontend tips and tricks that
            I have already applied to some of my projects.</p>
        <p>Happily coming back with <br/> my
            <link-previewer
                    href="https://dev.to/ilonacodes/frontend-shorts-vue-js-vanilla-js-digital-dices-og"
                    text="frontend shorts"
                    preview-img="https://dev-to-uploads.s3.amazonaws.com/i/3zp478dfafzy1mgfaevn.jpg"
                    preview-title="Frontend Shorts: Vue.js + Vanilla.js — Digital Dices"
                    preview-text="Let me show you how you can implement a dice-rolling simulator in less than 30 minutes of your time on the front-end."
            ></link-previewer>
            series on
            <link-previewer
                    href="https://dev.to"
                    text="dev.to."
                    preview-img="https://thepracticaldev.s3.amazonaws.com/i/6hqmcjaxbgbon8ydw93z.png"
                    preview-title="DEV Community 👩‍💻👨‍💻"
                    preview-text="Where programmers share ideas and help each other grow—A constructive and inclusive social network."
            ></link-previewer>
            Let me show you how...
        </p>
    </div>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

<script>
    Vue.component('link-previewer', {
        props: ['href', 'text', 'previewTitle', 'previewImg', 'previewText'],

        data() {
            return {
                shown: false
            };
        },

        methods: {
            show() {
                this.shown = true;
            },

            hide() {
                this.shown = false;
            }
        },

        //language=HTML
        template: `
            <a v-bind:href="href"
               v-on:mouseover="show"
               v-on:mouseleave="hide"
               class="link-with-preview"
            >
                {{ text }}
                <div class="card"
                     v-bind:class="{'card-show': shown}">
                    <img v-bind:src="previewImg" alt=""
                         class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">{{ previewTitle }}</h5>
                        <div class="card-text">
                            {{ previewText }}
                        </div>
                    </div>
                </div>
            </a>
        `
    });

    const app = new Vue({
        el: '#app'
    });
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>With Vue</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="index.css">
	</head>
	<body>
	<div id="app">
	<div class="wrapper">
	<p>Hi there! 👋</p>
	<p>I would like to share some frontend tips and tricks that
	I have already applied to some of my projects.</p>
	<p>Happily coming back with <br/> my
	<link-previewer
	href="https://dev.to/ilonacodes/frontend-shorts-vue-js-vanilla-js-digital-dices-og"
	text="frontend shorts"
	preview-img="https://dev-to-uploads.s3.amazonaws.com/i/3zp478dfafzy1mgfaevn.jpg"
	preview-title="Frontend Shorts: Vue.js + Vanilla.js — Digital Dices"
	preview-text="Let me show you how you can implement a dice-rolling simulator in less than 30 minutes of your time on the front-end."
	></link-previewer>
	series on
	<link-previewer
	href="https://dev.to"
	text="dev.to."
	preview-img="https://thepracticaldev.s3.amazonaws.com/i/6hqmcjaxbgbon8ydw93z.png"
	preview-title="DEV Community 👩‍💻👨‍💻"
	preview-text="Where programmers share ideas and help each other grow—A constructive and inclusive social network."
	></link-previewer>
	Let me show you how...
	</p>
	</div>

	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

	<script>
	Vue.component('link-previewer', {
	props: ['href', 'text', 'previewTitle', 'previewImg', 'previewText'],

	data() {
	return {
	shown: false
	};
	},

	methods: {
	show() {
	this.shown = true;
	},

	hide() {
	this.shown = false;
	}
	},

	//language=HTML
	template: `
	<a v-bind:href="href"
	v-on:mouseover="show"
	v-on:mouseleave="hide"
	class="link-with-preview"
	>
	{{ text }}
	<div class="card"
	v-bind:class="{'card-show': shown}">
	<img v-bind:src="previewImg" alt=""
	class="card-img-top">
	<div class="card-body">
	<h5 class="card-title">{{ previewTitle }}</h5>
	<div class="card-text">
	{{ previewText }}
	</div>
	</div>
	</div>
	</a>
	`
	});

	const app = new Vue({
	el: '#app'
	});
	</script>

	</body>
	</html>