feat: auto-generated thumbnails

rahmanda · Apr 11, 2022 · 99375fd · 99375fd
1 parent 9f281dc
commit 99375fd
Show file tree

Hide file tree

Showing 85 changed files with 393 additions and 7 deletions.
diff --git a/contents/blog/en/2016-09-11-why-i-use-emacs.md b/contents/blog/en/2016-09-11-why-i-use-emacs.md
@@ -5,6 +5,7 @@ slug: why-i-use-emacs
 published_date: 2016-09-11
 language: en
 type: blog
+category: tools
 translations:
   id: /blog/id/kok-kamu-pakai-emacs-sih/
 ---

diff --git a/contents/blog/en/2016-12-31-closure-in-javascript.md b/contents/blog/en/2016-12-31-closure-in-javascript.md
@@ -5,6 +5,7 @@ slug: understanding-closure-in-javascript
 published_date: 2016-12-31
 language: en
 type: blog
+category: javascript
 translations:
   id: /blog/id/memahami-closure-di-javascript/
 ---

diff --git a/contents/blog/en/2017-01-07-javascript-this.md b/contents/blog/en/2017-01-07-javascript-this.md
@@ -5,6 +5,7 @@ slug: javascript-this
 published_date: 2017-01-07
 language: en
 type: blog
+category: javascript
 translations:
   id: /blog/id/javascript-this/
 ---

diff --git a/contents/blog/en/2019-06-17-formatting-date-and-time-with-intl.md b/contents/blog/en/2019-06-17-formatting-date-and-time-with-intl.md
@@ -5,6 +5,7 @@ summary: Intl.DateTimeFormat is an easy tool to formatting date and time without
 published_date: 2019-06-17
 language: en
 type: blog
+category: javascript
 translations:
   id: /blog/id/edit-format-tanggal-dan-waktu-dengan-datetimeformat/
 ---

diff --git a/contents/blog/en/2019-06-21-improving-code-readability-with-hoisting.md b/contents/blog/en/2019-06-21-improving-code-readability-with-hoisting.md
@@ -5,6 +5,7 @@ summary: Unpopular opinion towards javascript hoisting and its usability
 published_date: 2019-06-21
 language: en
 type: blog
+category: javascript
 translations:
   id: /blog/id/peran-hoisting-dalam-meningkatkan-keterbacaan-kode/
 ---

diff --git a/contents/blog/en/2020-05-27-using-vue-prototype-for-shared-utilities.md b/contents/blog/en/2020-05-27-using-vue-prototype-for-shared-utilities.md
@@ -5,6 +5,7 @@ slug: using-vue-prototype-for-shared-utilities
 published_date: 2020-05-27
 language: en
 type: blog
+category: vue
 translations:
   id: /blog/id/menggunakan-vue-prototype-untuk-shared-utilities
 ---

diff --git a/contents/blog/en/2020-05-29-vue-portal-in-action.md b/contents/blog/en/2020-05-29-vue-portal-in-action.md
@@ -5,6 +5,7 @@ slug: vue-portal-in-action
 published_date: 2020-05-29
 language: en
 type: blog
+category: vue
 translations:
   id: /blog/id/studi-kasus-penggunaan-vue-portal/
 ---

diff --git a/contents/blog/en/2020-06-11-parsing-url-using-native-js.md b/contents/blog/en/2020-06-11-parsing-url-using-native-js.md
@@ -5,6 +5,7 @@ slug: parsing-url-using-native-js
 published_date: 2020-06-12
 language: en
 type: blog
+category: javascript
 translations:
   id: /blog/id/parsing-url-menggunakan-native-js/
 ---

diff --git a/contents/blog/en/2020-06-16-modifying-style-with-setAttribute-is-bad.md b/contents/blog/en/2020-06-16-modifying-style-with-setAttribute-is-bad.md
@@ -5,6 +5,7 @@ slug: modifying-styles-with-setAttribute-is-bad
 published_date: 2020-06-16
 language: en
 type: blog
+category: javascript
 translations:
   id: /blog/id/memodifikasi-style-dengan-setAttribute-itu-buruk/
 ---

diff --git a/contents/blog/en/2020-06-22-build-component-to-check-viewport-in-vue.md b/contents/blog/en/2020-06-22-build-component-to-check-viewport-in-vue.md
@@ -5,6 +5,7 @@ summary: I explain how to implement viewport checking as a component to gain the
 published_date: 2020-06-22
 language: en
 type: blog
+category: vue
 translations:
   id: /blog/id/membuat-komponen-untuk-mengecek-viewport-di-vue
 ---

diff --git a/.../en/2020-07-04-how-to-manage-your-folder-structure-in-JS-project-effectively.md b/.../en/2020-07-04-how-to-manage-your-folder-structure-in-JS-project-effectively.md
@@ -5,6 +5,7 @@ slug: how-to-manage-your-folder-structure-in-js-project-effectively
 published_date: 2020-07-04
 language: en
 type: blog
+category: javascript
 translations:
   id: /blog/id/bagaimana-cara-mengelola-struktur-folder-di-projek-js-dengan-efektif
 ---

diff --git a/contents/blog/id/2014-10-01-instalasi-django.md b/contents/blog/id/2014-10-01-instalasi-django.md
@@ -3,6 +3,7 @@ title: Instalasi Django, Framework Web Python
 slug: instalasi-django-framework-web-python
 published_date: 2014-10-01
 language: id
+category: python
 type: blog
 ---
 

diff --git a/contents/blog/id/2014-10-10-unchaining-django-part-1.md b/contents/blog/id/2014-10-10-unchaining-django-part-1.md
@@ -3,6 +3,7 @@ title: Unchaining Django - Part 1
 slug: unchaining-django-part-1
 published_date: 2014-10-10
 language: id
+category: python
 type: blog
 ---
 

diff --git a/contents/blog/id/2015-02-14-tips-menghadapi-proyek-kuliah.md b/contents/blog/id/2015-02-14-tips-menghadapi-proyek-kuliah.md
@@ -3,6 +3,7 @@ title: Tips Menghadapi Projek Kuliah - Ekslusif untuk Ilkom
 slug: tips-menghadapi-proyek-kuliah
 published_date: 2015-02-14
 language: id
+category: misc
 type: blog
 ---
 

diff --git a/contents/blog/id/2015-02-15-ensiklopedia-projek-kuliah.md b/contents/blog/id/2015-02-15-ensiklopedia-projek-kuliah.md
@@ -3,6 +3,7 @@ title: Ensiklopedia Projek Kuliah Ilkomerz
 slug: ensiklopedia-projek-kuliah-ilkomerz
 published_date: 2015-02-15
 language: id
+category: misc
 type: blog
 ---
 

diff --git a/contents/blog/id/2015-02-16-homestead-pengembangan-laravel.md b/contents/blog/id/2015-02-16-homestead-pengembangan-laravel.md
@@ -3,6 +3,7 @@ title: Homestead - Lingkungan Pengembangan Laravel
 slug: homestead-lingkungan-pengembangan-laravel
 published_date: 2015-02-16
 language: id
+category: laravel
 type: blog
 ---
 

diff --git a/contents/blog/id/2015-02-18-instalasi-homestead.md b/contents/blog/id/2015-02-18-instalasi-homestead.md
@@ -3,6 +3,7 @@ title: Instalasi Homestead Laravel
 slug: instalasi-homestead-laravel
 published_date: 2015-02-18
 language: id
+category: laravel
 type: blog
 ---
 

diff --git a/contents/blog/id/2015-02-21-berkenalan-dengan-python.md b/contents/blog/id/2015-02-21-berkenalan-dengan-python.md
@@ -3,6 +3,7 @@ title: Berkenalan dengan Python
 slug: berkenalan-dengan-python
 published_date: 2015-02-21
 language: id
+category: python
 type: blog
 ---
 

diff --git a/contents/blog/id/2015-03-26-mengapa-kita-butuh-preprocessor-css.md b/contents/blog/id/2015-03-26-mengapa-kita-butuh-preprocessor-css.md
@@ -3,6 +3,7 @@ title: Mengapa Kita Butuh Preprocessor CSS?
 slug: mengapa-kita-butuh-preprocessor-css
 published_date: 2015-03-26
 language: id
+category: css
 type: blog
 ---
 

diff --git a/contents/blog/id/2015-05-05-sass-dengan-gulp.md b/contents/blog/id/2015-05-05-sass-dengan-gulp.md
@@ -3,6 +3,7 @@ title: Berkenalan dengan Sass + Gulp
 slug: berkenalan-dengan-sass-gulp
 published_date: 2015-05-05
 language: id
+category: css
 type: blog
 ---
 

diff --git a/contents/blog/id/2015-05-12-membuat-tweepy-dengan-flask-1.md b/contents/blog/id/2015-05-12-membuat-tweepy-dengan-flask-1.md
@@ -3,6 +3,7 @@ title: Membuat Tweepy dengan Flask - Episode 1
 slug: membuat-tweepy-dengan-flask-ep-1
 published_date: 2015-05-12
 language: id
+category: python
 type: blog
 ---
 

diff --git a/contents/blog/id/2015-05-19-blade-templates-laravel.md b/contents/blog/id/2015-05-19-blade-templates-laravel.md
@@ -3,6 +3,7 @@ title: Blade - Mengenal Template Engine Laravel 4
 slug: blade-mengenal-template-engine-laravel-4
 published_date: 2015-05-19
 language: id
+category: laravel
 type: blog
 ---
 

diff --git a/contents/blog/id/2015-08-29-laragon-xampp-rasa-laravel.md b/contents/blog/id/2015-08-29-laragon-xampp-rasa-laravel.md
@@ -3,6 +3,7 @@ title: Laragon - XAMPP Rasa Laravel
 slug: laragon-xampp-rasa-laravel
 published_date: 2015-08-29
 language: id
+category: laravel
 type: blog
 ---
 

diff --git a/contents/blog/id/2015-11-22-membuat-tweepy-dengan-flask-2.md b/contents/blog/id/2015-11-22-membuat-tweepy-dengan-flask-2.md
@@ -3,6 +3,7 @@ title: Membuat Tweepy dengan Flask - Episode 2
 slug: membuat-tweepy-dengan-flask-ep-2
 published_date: 2015-11-22
 language: id
+category: python
 type: blog
 ---
 

diff --git a/contents/blog/id/2016-09-10-membuat-tweepy-dengan-flask-3.md b/contents/blog/id/2016-09-10-membuat-tweepy-dengan-flask-3.md
@@ -3,6 +3,7 @@ title: Membuat Tweepy dengan Flask - Episode 3
 slug: membuat-tweepy-dengan-flask-ep-3
 published_date: 2016-09-10
 language: id
+category: python
 type: blog
 ---
 

diff --git a/contents/blog/id/2016-09-11-kok-kamu-pakai-emacs-sih.md b/contents/blog/id/2016-09-11-kok-kamu-pakai-emacs-sih.md
@@ -5,6 +5,7 @@ slug: kok-kamu-pakai-emacs-sih
 published_date: 2016-09-11
 language: id
 type: blog
+category: tools
 translations:
   en: /blog/en/why-i-use-emacs/
 ---

diff --git a/contents/blog/id/2016-09-11-membangun-fitur-pencarian-dengan-laravel-scout.md b/contents/blog/id/2016-09-11-membangun-fitur-pencarian-dengan-laravel-scout.md
@@ -3,6 +3,7 @@ title: Membangun Fitur Pencarian dengan Laravel Scout
 slug: membangun-fitur-pencarian-dengan-laravel-scout
 published_date: 2016-09-11
 language: id
+category: laravel
 type: blog
 ---
 

diff --git a/contents/blog/id/2016-12-31-memahami-closure-di-javascript.md b/contents/blog/id/2016-12-31-memahami-closure-di-javascript.md
@@ -5,6 +5,7 @@ slug: memahami-closure-di-javascript
 published_date: 2016-12-31
 language: id
 type: blog
+category: javascript
 translations:
   en: /blog/en/understanding-closure-in-javascript/
 ---

diff --git a/contents/blog/id/2017-01-07-javascript-this.md b/contents/blog/id/2017-01-07-javascript-this.md
@@ -5,6 +5,7 @@ slug: javascript-this
 published_date: 2017-01-07
 language: id
 type: blog
+category: javascript
 translations:
   en: /en/javascript-this/
 ---

diff --git a/contents/blog/id/2017-02-06-instalasi-laravel-valet-di-ubuntu.md b/contents/blog/id/2017-02-06-instalasi-laravel-valet-di-ubuntu.md
@@ -3,6 +3,7 @@ title: Instalasi Laravel Valet di Ubuntu
 slug: instalasi-laravel-valet-di-ubuntu
 published_date: 2017-02-06
 language: id
+category: laravel
 type: blog
 ---
 

diff --git a/contents/blog/id/2019-02-23-kembali-menulis.md b/contents/blog/id/2019-02-23-kembali-menulis.md
@@ -4,6 +4,7 @@ slug: kembali-menulis
 summary: Tulisan-tulisan saya yang saya pikir tidak penting ternyata ada yang membaca dan mengapresiasi
 published_date: 2019-02-23
 language: id
+category: misc
 type: blog
 ---
 

diff --git a/contents/blog/id/2019-06-17-edit-format-tanggal-dengan-intl.md b/contents/blog/id/2019-06-17-edit-format-tanggal-dengan-intl.md
@@ -5,6 +5,7 @@ summary: Intl.DateTimeFormat adalah cara mudah untuk mengedit format tanggal dan
 published_date: 2019-06-17
 language: id
 type: blog
+category: javascript
 translations:
   en: /blog/en/formatting-date-and-time-with-datetimeformat/
 ---

diff --git a/contents/blog/id/2019-06-21-peran-hosting-dalam-meningkatkan-keterbacaan-kode.md b/contents/blog/id/2019-06-21-peran-hosting-dalam-meningkatkan-keterbacaan-kode.md
@@ -5,6 +5,7 @@ summary: Pendapat kurang populer terhadap hoisting dan penggunaannya
 published_date: 2019-06-21
 language: id
 type: blog
+category: javascript
 translations:
   en: /blog/en/improving-code-readability-with-hoisting/
 ---

diff --git a/contents/blog/id/2020-05-27-menggunakan-vue-prototype-untuk-shared-utilities.md b/contents/blog/id/2020-05-27-menggunakan-vue-prototype-untuk-shared-utilities.md
@@ -5,6 +5,7 @@ slug: menggunakan-vue-prototype-untuk-shared-utilities
 published_date: 2020-05-27
 language: id
 type: blog
+category: vue
 translations:
   en: /blog/en/using-vue-prototype-for-shared-utilities/
 ---

diff --git a/contents/blog/id/2020-05-29-studi-kasus-penggunaan-vue-portal.md b/contents/blog/id/2020-05-29-studi-kasus-penggunaan-vue-portal.md
@@ -5,6 +5,7 @@ slug: studi-kasus-penggunaan-vue-portal
 published_date: 2020-05-29
 language: id
 type: blog
+category: vue
 translations:
   en: /blog/en/vue-portal-in-action/
 ---

diff --git a/contents/blog/id/2020-06-12-parsing-url-menggunakan-native-js.md b/contents/blog/id/2020-06-12-parsing-url-menggunakan-native-js.md
@@ -5,6 +5,7 @@ slug: parsing-url-menggunakan-native-js
 published_date: 2020-06-12
 language: id
 type: blog
+category: javascript
 translations:
   en: /blog/en/parsing-url-using-native-js/
 ---

diff --git a/contents/blog/id/2020-06-16-memodifikasi-style-dengan-setAttribute-itu-buruk.md b/contents/blog/id/2020-06-16-memodifikasi-style-dengan-setAttribute-itu-buruk.md
@@ -6,6 +6,7 @@ slug: memodifikasi-style-dengan-setAttribute-itu-buruk
 published_date: 2020-06-16
 language: id
 type: blog
+category: javascript
 translations:
   en: /blog/en/modifying-styles-with-setAttribute-is-bad/
 ---

diff --git a/contents/blog/id/2020-06-22-membuat-komponen-untuk-mengecek-viewport-di-vue.md b/contents/blog/id/2020-06-22-membuat-komponen-untuk-mengecek-viewport-di-vue.md
@@ -5,6 +5,7 @@ summary: Saya menjelaskan bagaimana cara mengecek viewport dengan komponen untuk
 published_date: 2020-06-22
 language: id
 type: blog
+category: vue
 translations:
   en: /blog/en/building-component-to-check-viewport-in-vue
 ---

diff --git a/...020-07-04-bagaimana-cara-menstrukturisasi-folder-di-projek-js-dengan-efektif.md b/...020-07-04-bagaimana-cara-menstrukturisasi-folder-di-projek-js-dengan-efektif.md
@@ -5,6 +5,7 @@ slug: bagaimana-cara-mengelola-struktur-folder-di-projek-js-dengan-efektif
 published_date: 2020-07-04
 language: id
 type: blog
+category: javascript
 translations:
   en: /blog/en/how-to-manage-your-folder-structure-in-js-project-effectively
 ---

diff --git a/package.json b/package.json
@@ -4,7 +4,8 @@
   "scripts": {
     "build": "gridsome build",
     "develop": "gridsome develop",
-    "explore": "gridsome explore"
+    "explore": "gridsome explore",
+    "generate-thumbnails": "node scripts/generate-thumbnails.js"
   },
   "dependencies": {
     "@gridsome/plugin-google-analytics": "^0.1.0",
@@ -14,6 +15,9 @@
     "@gridsome/transformer-remark": "^0.6.0",
     "@microflash/gridsome-plugin-feed": "^1.0.7",
     "anchor-js": "^4.2.2",
+    "canvas": "^2.9.1",
+    "glob": "^7.2.0",
+    "gray-matter": "^4.0.3",
     "gridsome": "^0.7.0",
     "gridsome-plugin-robots": "^0.2.1",
     "gridsome-plugin-tailwindcss": "^2.2.43",

diff --git a/scripts/assets/Inter-ExtraBold.ttf b/scripts/assets/Inter-ExtraBold.ttf
diff --git a/scripts/assets/Inter-Medium.ttf b/scripts/assets/Inter-Medium.ttf
diff --git a/scripts/assets/r-logo-white.png b/scripts/assets/r-logo-white.png