Skip to content

Instantly share code, notes, and snippets.

@Chuloo
Last active March 29, 2022 23:24
Show Gist options
  • Save Chuloo/68921c6b9729ca2da7ee03fab1dab60c to your computer and use it in GitHub Desktop.
Save Chuloo/68921c6b9729ca2da7ee03fab1dab60c to your computer and use it in GitHub Desktop.
A sample blog page
<template>
<section class="section">
<div class="section__details">
<div class="section__details-info">
<h1>{{ title }}</h1>
<div class="section__details-img">
<img
src="https://res.cloudinary.com/terieyenike/image/upload/v1644896156/vvasmj6onychxlkkynua.png"
alt="anime character"
/>
<p>Written by {{ name }}</p>
</div>
</div>
<div class="section__details-content">
<p>
{{ body }}
</p>
</div>
</div>
</section>
</template>
<script>
export default {
data() {
return {
title: 'Create an image loading placeholder in nuxtJS',
name: 'Teri',
body: `In today's world, where optimization and loading time is crucial for
websites, loading placeholders are developed to improve the waiting
experience of users on a webpage. This article will discuss how to
create a loading placeholder image that shows a lightweight version of
an image, whether pixelated, blurry etc., before the target or
original image is displayed. We will be using NuxtJS, an open-source
front-end framework built on top of Vue that features file-system
routing, and it delivers both static-site generation (SSG) and
on-demand server rendering.`,
date: 'March 26, 2022',
};
},
};
</script>
<style scoped>
.section {
padding: 2.5em 0;
}
.section__details-info h1 {
margin-bottom: 0.5em;
text-transform: capitalize;
font-family: Padauk, sans-serif;
font-weight: 700;
}
.section__details-img {
display: flex;
align-items: center;
margin-bottom: 2em;
}
.section__details-img img {
width: 2.5rem;
border-radius: 100%;
border: 1px solid black;
}
.section__details-img p {
margin-left: 0.75em;
}
@media screen and (min-width: 768px) {
.section__details-content {
width: 85%;
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment