Skip to content

Commit 08b7641

Browse files
committed
change cover, fix linter errors
1 parent 2d24015 commit 08b7641

14 files changed

+162
-127
lines changed

.eslintrc.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,10 @@ module.exports = {
1717
}
1818
},
1919
rules: {
20-
'no-console': 'off',
21-
'no-param-reassign': 'off',
22-
'import/no-extraneous-dependencies': 'off',
20+
'no-console': 1,
21+
'no-param-reassign': 0,
22+
'vue/no-v-html': 0,
23+
'import/no-extraneous-dependencies': 0,
2324
'prettier/prettier': 'error'
2425
}
2526
}
40.3 KB
Loading

content/posts/pengetahuan-dasar-vuejs-bagian-1.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ author: mazipan
55
published: true
66
tags: ['Tutorial', 'Dasar', 'Serial']
77
series: true
8-
cover_image: ./images/shared/vuejs-logo.jpeg
8+
cover_image: ./images/shared/vuejs-id-logo.jpeg
99
canonical_url: false
1010
description: Berbagai pengetahuan dasar yang perlu Anda ketahui di Vue.js.
1111
---
@@ -14,9 +14,9 @@ description: Berbagai pengetahuan dasar yang perlu Anda ketahui di Vue.js.
1414
1515
Artikel ini merupakan seri lanjutan dari artikel yang sebelumnya sudah di publikasikan, baca semua seri Pengetahuan Dasar Vue.js:
1616

17-
1. [Pengetahuan Dasar Vue.js - Bagian 1](/pengetahuan-dasar-vuejs-bagian-1) **(Anda di sini)**
18-
2. Pengetahuan Dasar Vue.js - Bagian 2
19-
3. Pengetahuan Dasar Vue.js - Bagian 3
17+
1. [Pengetahuan Dasar Vue.js - Bagian 1](/pengetahuan-dasar-vuejs-bagian-1) **(Anda di sini)**
18+
2. Pengetahuan Dasar Vue.js - Bagian 2
19+
3. Pengetahuan Dasar Vue.js - Bagian 3
2020

2121
---
2222

@@ -65,8 +65,8 @@ Vue.js menggunakan syntax `{{ }}` seperti terlihat pada gambar diatas, dengan sy
6565
```html
6666
<div id="app-2">
6767
<span v-bind:title="message">
68-
Hover your mouse over me for a few seconds
69-
to see my dynamically bound title!
68+
Hover your mouse over me for a few seconds to see my dynamically bound
69+
title!
7070
</span>
7171
</div>
7272
```
@@ -82,7 +82,7 @@ Di Vue.js kita menggunakan `v-model` untuk melakukan two way binding yang biasan
8282
```html
8383
<div id="app-3">
8484
<p>{{ message }}</p>
85-
<input v-model="message">
85+
<input v-model="message" />
8686
</div>
8787
```
8888

@@ -101,7 +101,7 @@ Untuk memanggil suatu event yang telah kita buat di Javascript, Vue.js menggunak
101101
new Vue({
102102
el: '#app-4',
103103
methods: {
104-
say: function (message) {
104+
say: function(message) {
105105
alert(message)
106106
}
107107
}
@@ -120,4 +120,4 @@ Terima kasih dan semoga bermanfaat penjelasan singkatnya.
120120

121121
---
122122

123-
<small>Gambar cover oleh [Piel Bover](https://medium.com/@Pier)</small>
123+
<small>Gambar cover oleh [Piel Bover](https://medium.com/@Pier)</small>

content/posts/pengetahuan-dasar-vuejs-bagian-2.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ author: mazipan
55
published: true
66
tags: ['Tutorial', 'Dasar', 'Serial']
77
series: true
8-
cover_image: ./images/shared/vuejs-logo.jpeg
8+
cover_image: ./images/shared/vuejs-id-logo.jpeg
99
canonical_url: false
1010
description: Berbagai pengetahuan dasar yang perlu Anda ketahui di Vue.js.
1111
---
@@ -14,9 +14,9 @@ description: Berbagai pengetahuan dasar yang perlu Anda ketahui di Vue.js.
1414
1515
Artikel ini merupakan seri lanjutan dari artikel yang sebelumnya sudah di publikasikan, baca semua seri Pengetahuan Dasar Vue.js:
1616

17-
1. [Pengetahuan Dasar Vue.js - Bagian 1](/pengetahuan-dasar-vuejs-bagian-1)
18-
2. [Pengetahuan Dasar Vue.js - Bagian 2](/pengetahuan-dasar-vuejs-bagian-2) **(Anda di sini)**
19-
3. Pengetahuan Dasar Vue.js - Bagian 3
17+
1. [Pengetahuan Dasar Vue.js - Bagian 1](/pengetahuan-dasar-vuejs-bagian-1)
18+
2. [Pengetahuan Dasar Vue.js - Bagian 2](/pengetahuan-dasar-vuejs-bagian-2) **(Anda di sini)**
19+
3. Pengetahuan Dasar Vue.js - Bagian 3
2020

2121
---
2222

@@ -32,20 +32,20 @@ Vue.js mengenalkan _single file component_ dimana kita bisa membuat satu file be
3232
</template>
3333

3434
<script>
35-
module.exports = {
36-
data: function () {
37-
return {
38-
greeting: 'Hello'
35+
module.exports = {
36+
data: function() {
37+
return {
38+
greeting: 'Hello'
39+
}
3940
}
4041
}
41-
}
4242
</script>
4343

4444
<style scoped>
45-
p {
46-
font-size: 2em;
47-
text-align: center;
48-
}
45+
p {
46+
font-size: 2em;
47+
text-align: center;
48+
}
4949
</style>
5050
```
5151

@@ -81,7 +81,7 @@ vm.$data === data // => true
8181

8282
// must use function when in Vue.extend()
8383
var Component = Vue.extend({
84-
data: function () {
84+
data: function() {
8585
return { a: 1 }
8686
}
8787
})
@@ -97,7 +97,7 @@ Pembuatan methods bisa dilihat dalam gambar berikut :
9797
var vm = new Vue({
9898
data: { a: 1 },
9999
methods: {
100-
plus: function () {
100+
plus: function() {
101101
this.a++
102102
}
103103
}
@@ -129,7 +129,7 @@ Vue.component('props-demo-advanced', {
129129
type: Number,
130130
default: 0,
131131
required: true,
132-
validator: function (value) {
132+
validator: function(value) {
133133
return value >= 0
134134
}
135135
}
@@ -147,4 +147,4 @@ Terima kasih dan semoga bermanfaat penjelasan singkatnya.
147147

148148
---
149149

150-
<small>Gambar cover oleh [Piel Bover](https://medium.com/@Pier)</small>
150+
<small>Gambar cover oleh [Piel Bover](https://medium.com/@Pier)</small>

content/posts/pengetahuan-dasar-vuejs-bagian-3.md

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ author: mazipan
55
published: true
66
tags: ['Tutorial', 'Dasar', 'Serial']
77
series: true
8-
cover_image: ./images/shared/vuejs-logo.jpeg
8+
cover_image: ./images/shared/vuejs-id-logo.jpeg
99
canonical_url: false
1010
description: Berbagai pengetahuan dasar yang perlu Anda ketahui di Vue.js.
1111
---
@@ -14,9 +14,9 @@ description: Berbagai pengetahuan dasar yang perlu Anda ketahui di Vue.js.
1414
1515
Artikel ini merupakan seri lanjutan dari artikel yang sebelumnya sudah di publikasikan, baca semua seri Pengetahuan Dasar Vue.js:
1616

17-
1. [Pengetahuan Dasar Vue.js - Bagian 1](/pengetahuan-dasar-vuejs-bagian-1)
18-
2. [Pengetahuan Dasar Vue.js - Bagian 2](/pengetahuan-dasar-vuejs-bagian-2)
19-
3. [Pengetahuan Dasar Vue.js - Bagian 3](/pengetahuan-dasar-vuejs-bagian-3) **(Anda di sini)**
17+
1. [Pengetahuan Dasar Vue.js - Bagian 1](/pengetahuan-dasar-vuejs-bagian-1)
18+
2. [Pengetahuan Dasar Vue.js - Bagian 2](/pengetahuan-dasar-vuejs-bagian-2)
19+
3. [Pengetahuan Dasar Vue.js - Bagian 3](/pengetahuan-dasar-vuejs-bagian-3) **(Anda di sini)**
2020

2121
---
2222

@@ -46,7 +46,7 @@ _Filter_ harus mengembalikan nilai yang merupakan hasil dari data yang telah di
4646
new Vue({
4747
// ...
4848
filters: {
49-
capitalize: function (value) {
49+
capitalize: function(value) {
5050
if (!value) return ''
5151
value = value.toString()
5252
return value.chartAt(0).toUpperCase() + value.slice(1)
@@ -69,9 +69,12 @@ var vm = new Vue({
6969
},
7070
computed: {
7171
// a computed getter
72-
reversedMessage: function () {
72+
reversedMessage: function() {
7373
// `this` points to the vm instance
74-
return this.message.split('').reverse().join('')
74+
return this.message
75+
.split('')
76+
.reverse()
77+
.join('')
7578
}
7679
}
7780
})
@@ -92,9 +95,8 @@ var vm = new Vue({
9295
},
9396
watch: {
9497
// whenever question changes, this function will run
95-
question: function (newQuestion) {
96-
this.answer = 'Waiting for you to stop typing...',
97-
this.getAnswer()
98+
question: function(newQuestion) {
99+
;(this.answer = 'Waiting for you to stop typing...'), this.getAnswer()
98100
}
99101
}
100102
})
@@ -146,4 +148,4 @@ Terima kasih dan semoga bermanfaat penjelasan singkatnya.
146148

147149
---
148150

149-
<small>Gambar cover oleh [Piel Bover](https://medium.com/@Pier)</small>
151+
<small>Gambar cover oleh [Piel Bover](https://medium.com/@Pier)</small>

package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"build": "gridsome build",
66
"dev": "gridsome develop",
77
"develop": "gridsome develop",
8-
"explore": "gridsome explore"
8+
"explore": "gridsome explore",
9+
"lint:fix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
910
},
1011
"dependencies": {
1112
"@gridsome/plugin-google-analytics": "0.1.0",
@@ -43,7 +44,7 @@
4344
}
4445
},
4546
"lint-staged": {
46-
"*.{md,js,vue}": [
47+
"*.{js,vue}": [
4748
"prettier --write",
4849
"eslint --fix",
4950
"git add"

src/components/Author.vue

Lines changed: 40 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
<template>
2-
<div class="author">
3-
<g-image alt="Author image" class="author__image" src="~/assets/images/vuejs-id.png" width="180" height="180" blur="5" />
4-
<h1 v-if="showTitle" class="author__site-title">
5-
{{ $static.metadata.siteName }}
6-
</h1>
7-
</div>
2+
<div class="author">
3+
<g-image
4+
alt="Author image"
5+
class="author__image"
6+
src="~/assets/images/vuejs-id.png"
7+
width="180"
8+
height="180"
9+
blur="5"
10+
/>
11+
<h1 v-if="showTitle" class="author__site-title">
12+
{{ $static.metadata.siteName }}
13+
</h1>
14+
</div>
815
</template>
916

1017
<static-query>
@@ -17,36 +24,41 @@ query {
1724

1825
<script>
1926
export default {
20-
props: ['showTitle']
27+
props: {
28+
showTitle: {
29+
type: Boolean,
30+
default: true
31+
}
32+
}
2133
}
2234
</script>
2335

2436
<style lang="scss">
2537
.author {
26-
margin: 0 auto;
27-
max-width: 500px;
28-
text-align: center;
29-
padding: calc(var(--space) / 2) 0;
38+
margin: 0 auto;
39+
max-width: 500px;
40+
text-align: center;
41+
padding: calc(var(--space) / 2) 0;
3042
31-
&__image {
32-
width: 90px;
33-
height: 90px;
34-
margin-bottom: 1em;
35-
}
43+
&__image {
44+
width: 90px;
45+
height: 90px;
46+
margin-bottom: 1em;
47+
}
3648
37-
&__intro {
38-
opacity: .8;
39-
}
49+
&__intro {
50+
opacity: 0.8;
51+
}
4052
41-
&__site-title {
42-
font-size: 1.5em;
43-
}
53+
&__site-title {
54+
font-size: 1.5em;
55+
}
4456
45-
&__links {
46-
margin-top: -.5em;
47-
a {
48-
margin: 0 .5em;
49-
}
50-
}
57+
&__links {
58+
margin-top: -0.5em;
59+
a {
60+
margin: 0 0.5em;
61+
}
62+
}
5163
}
5264
</style>

src/components/Logo.vue

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
<template>
2-
<g-link class="logo" to="/">
3-
<span class="logo__text">
4-
&larr; {{ $static.metadata.siteName }}
5-
</span>
6-
</g-link>
2+
<g-link class="logo" to="/">
3+
<span class="logo__text"> &larr; {{ $static.metadata.siteName }} </span>
4+
</g-link>
75
</template>
86

97
<static-query>
@@ -16,16 +14,16 @@ query {
1614

1715
<style lang="scss">
1816
.logo {
19-
text-decoration: none;
20-
color: var(--body-color)!important;
21-
font-size: .9em;
17+
text-decoration: none;
18+
color: var(--body-color) !important;
19+
font-size: 0.9em;
2220
23-
&__image {
24-
vertical-align: middle;
25-
border-radius: 99px;
26-
height: 40px;
27-
width: 40px;
28-
margin-right: .5em;
29-
}
21+
&__image {
22+
vertical-align: middle;
23+
border-radius: 99px;
24+
height: 40px;
25+
width: 40px;
26+
margin-right: 0.5em;
27+
}
3028
}
3129
</style>

0 commit comments

Comments
 (0)