Redirect blog posts to /blog/:slug

- Remove unused folder - Remove newsletter - Remove photoswipe
ariona · May 29, 2020 · 70f5056 · 70f5056
1 parent cc78af8
commit 70f5056
Show file tree

Hide file tree

Showing 9 changed files with 509 additions and 49 deletions.
diff --git a/package.json b/package.json
@@ -8,7 +8,9 @@
     "@vuepress/plugin-google-analytics": "^1.5.0",
     "@vuepress/plugin-search": "^1.5.0",
     "axios": "^0.19.2",
+    "critters-webpack-plugin": "^2.5.0",
     "dayjs": "^1.8.27",
+    "html-webpack-plugin": "^4.3.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "md5": "^2.2.1",

diff --git a/site/.vuepress/components/Gallery.vue b/site/.vuepress/components/Gallery.vue
@@ -1,13 +1,17 @@
 <template>
-  <client-only>
-    <vue-picture-swipe :class="`gallery ${'frame-' + frame}`" :items="pictures"></vue-picture-swipe>
-  </client-only>
+  <div class="gallery">
+    <figure v-for="image in pictures">
+      <a target="_blank" :href="image.src">
+        <img-lazy :src="image.thumbnail" :alt="image.filename"/>
+      </a>
+    </figure>
+  </div>
 </template>
 
 <script>
-import VuePictureSwipe from 'vue-picture-swipe';
+// import VuePictureSwipe from 'vue-picture-swipe';
 export default {
-  components: { VuePictureSwipe },
+  // components: { VuePictureSwipe },
   props: {
     folder: String,
     images: Array,
@@ -30,7 +34,7 @@ export default {
 
 </script>
 <style lang="scss">
-.my-gallery{
+.gallery{
   display: flex;
   flex-wrap: wrap;
   margin: 60px -10px;

diff --git a/site/.vuepress/config.js b/site/.vuepress/config.js
@@ -1,3 +1,5 @@
+const Critters = require('critters-webpack-plugin');
+
 module.exports = {
   title: 'ariona.net', // Title for the site. This will be displayed in the navbar.
   head: [
@@ -68,7 +70,7 @@ module.exports = {
             id: 'post',
             dirname: '_posts',
             path: '/blog/',
-            itemPermalink: '/:slug',
+            itemPermalink: '/blog/:slug',
             pagination: {
               lengthPerPage: 10,
               prevText: 'Sebelumnya',
@@ -130,5 +132,5 @@ module.exports = {
         'ga': 'UA-22811026-1'
       }
     ]
-  ]
+  ],
 }
diff --git a/site/.vuepress/public/_redirects b/site/.vuepress/public/_redirects
@@ -6,4 +6,87 @@
 /3-tips-agar-desain-anda-menarik                             /tips-agar-desain-anda-menarik
 /10-website-sumber-inspirasi-desain                          /website-sumber-inspirasi-desain
 /5-aplikasi-web-server-pilihan-untuk-perangkat-android-anda  /aplikasi-web-server-pilihan-untuk-perangkat-android-anda
-/5-situs-untuk-membuat-background-pattern                    /situs-untuk-membuat-background-pattern
+/5-situs-untuk-membuat-background-pattern                    /situs-untuk-membuat-background-pattern
+
+/situs-pencarian-icon-terbaik                                /blog/situs-pencarian-icon-terbaik
+/online-image-editor-just-like-photoshop                     /blog/online-image-editor-just-like-photoshop
+/permasalahan-yang-membingungkan-bagi-css-newbie             /blog/permasalahan-yang-membingungkan-bagi-css-newbie
+/efek-fade-in-pada-css-sprite                                /blog/efek-fade-in-pada-css-sprite
+/text-editor-pilihan                                         /blog/text-editor-pilihan
+/membuat-css3-generator                                      /blog/membuat-css3-generator
+/bermain-main-dengan-css3-box-shadow                         /blog/bermain-main-dengan-css3-box-shadow
+/bermain-main-dengan-css3-text-shadow                        /blog/bermain-main-dengan-css3-text-shadow
+/photoshop-action-cara-untuk-menghemat-waktu-anda            /blog/photoshop-action-cara-untuk-menghemat-waktu-anda
+/gratisan-koleksi-photoshop-actions                          /blog/gratisan-koleksi-photoshop-actions
+/di-dunia-it-kuliah-saja-belum-cukup                         /blog/di-dunia-it-kuliah-saja-belum-cukup
+/dokumentasi-ilmu-dengan-nge-blog                            /blog/dokumentasi-ilmu-dengan-nge-blog
+/software-gratis-terbaik                                     /blog/software-gratis-terbaik
+/belajar-pemrograman-mulai-dari-mana                         /blog/belajar-pemrograman-mulai-dari-mana
+/tips-agar-desain-anda-menarik                               /blog/tips-agar-desain-anda-menarik
+/responsive-webdesign-apa-dan-bagaimana                      /blog/responsive-webdesign-apa-dan-bagaimana
+/bermain-main-dengan-css3-font-face                          /blog/bermain-main-dengan-css3-font-face
+/zen-coding-cara-cepat-menulis-kode-html-css                 /blog/zen-coding-cara-cepat-menulis-kode-html-css
+/membuat-efek-parallax-dengan-jquery                         /blog/membuat-efek-parallax-dengan-jquery
+/bermain-main-dengan-css3-transition                         /blog/bermain-main-dengan-css3-transition
+/membuat-garis-putus-putus-di-photoshop                      /blog/membuat-garis-putus-putus-di-photoshop
+/bermain-main-dengan-css3-border-radius                      /blog/bermain-main-dengan-css3-border-radius
+/kesalahan-dalam-mempelajari-framework                       /blog/kesalahan-dalam-mempelajari-framework
+/apa-itu-json                                                /blog/apa-itu-json
+/bermain-main-dengan-css3-filter                             /blog/bermain-main-dengan-css3-filter
+/membuat-buku-virtual-dengan-turn-js                         /blog/membuat-buku-virtual-dengan-turn-js
+/website-sumber-inspirasi-desain                             /blog/website-sumber-inspirasi-desain
+/koleksi-wallpaper-bertema-ramadhan                          /blog/koleksi-wallpaper-bertema-ramadhan
+/membuat-desain-web-minimalis-dengan-photoshop               /blog/membuat-desain-web-minimalis-dengan-photoshop
+/sekilas-tentang-semantik-dalam-html                         /blog/sekilas-tentang-semantik-dalam-html
+/zen-coding-cara-cepat-menulis-kode-html-css-bagian-2        /blog/zen-coding-cara-cepat-menulis-kode-html-css-bagian-2
+/membuat-desain-web-minimalis-konversi-desain-ke-html        /blog/membuat-desain-web-minimalis-konversi-desain-ke-html
+/membuat-live-html-css-text-editor                           /blog/membuat-live-html-css-text-editor
+/presentasi-fundamental-html                                 /blog/presentasi-fundamental-html
+/membuat-desain-web-minimalis-slicing-dan-penambahan-css     /blog/membuat-desain-web-minimalis-slicing-dan-penambahan-css
+/aplikasi-web-server-pilihan-untuk-perangkat-android-anda    /blog/aplikasi-web-server-pilihan-untuk-perangkat-android-anda
+/optimasi-gambar-untuk-web                                   /blog/optimasi-gambar-untuk-web
+/css3-transform                                              /blog/css3-transform
+/animate-css-cara-mudah-menambahkan-animasi-css3             /blog/animate-css-cara-mudah-menambahkan-animasi-css3
+/mengenal-css-preprocessors-dan-sass                         /blog/mengenal-css-preprocessors-dan-sass
+/membuat-dropdown-menu-dengan-css                            /blog/membuat-dropdown-menu-dengan-css
+/teknik-dasar-membuat-overlay                                /blog/teknik-dasar-membuat-overlay
+/tips-pencarian-google                                       /blog/tips-pencarian-google
+/link-link-pilihan-minggu-ini-1                              /blog/link-link-pilihan-minggu-ini-1
+/membuat-bentuk-segitiga-dengan-css                          /blog/membuat-bentuk-segitiga-dengan-css
+/mengenal-lebih-dalam-css-pseudo-element                     /blog/mengenal-lebih-dalam-css-pseudo-element
+/uji-seberapa-cepat-loading-web-anda                         /blog/uji-seberapa-cepat-loading-web-anda
+/situs-untuk-membuat-background-pattern                      /blog/situs-untuk-membuat-background-pattern
+/membuat-css-tooltip                                         /blog/membuat-css-tooltip
+/link-link-pilihan-minggu-ini-2                              /blog/link-link-pilihan-minggu-ini-2
+/caniuse-com-agar-tidak-ragu-menggunakan-html5-css3          /blog/caniuse-com-agar-tidak-ragu-menggunakan-html5-css3
+/efek-redup-dengan-css3-box-shadow                           /blog/efek-redup-dengan-css3-box-shadow
+/link-link-pilihan-minggu-ini-3                              /blog/link-link-pilihan-minggu-ini-3
+/teknik-teknik-penting-dalam-html-css-javascript             /blog/teknik-teknik-penting-dalam-html-css-javascript
+/membuat-html5-speech-input                                  /blog/membuat-html5-speech-input
+/internet-explorer-hack                                      /blog/internet-explorer-hack
+/efek-kertas-terselip-dengan-css                             /blog/efek-kertas-terselip-dengan-css
+/perbedaan-wordpress-com-dan-wordpress-org                   /blog/perbedaan-wordpress-com-dan-wordpress-org
+/mengorganisasi-css-dengan-smacss                            /blog/mengorganisasi-css-dengan-smacss
+/kenapa-layer-layer-photoshop-anda-harus-terorganisir        /blog/kenapa-layer-layer-photoshop-anda-harus-terorganisir
+/kolaborasi-manis-antara-sass-dan-compass                    /blog/kolaborasi-manis-antara-sass-dan-compass
+/tutorial-git                                                /blog/tutorial-git
+/wordpress-meetup-ke-3-bersama-matt-mullenweg                /blog/wordpress-meetup-ke-3-bersama-matt-mullenweg
+/github-pages-solusi-gratis-untuk-situs-statis               /blog/github-pages-solusi-gratis-untuk-situs-statis
+/aplikasi-pilihan-untuk-web-designer-dan-developer           /blog/aplikasi-pilihan-untuk-web-designer-dan-developer
+/memperbaiki-bug-css-di-internet-explorer-8                  /blog/memperbaiki-bug-css-di-internet-explorer-8
+/membuat-mega-menu-dengan-css                                /blog/membuat-mega-menu-dengan-css
+/lupakan-css-prefix-gunakan-autoprefixer                     /blog/lupakan-css-prefix-gunakan-autoprefixer
+/menyesuaikan-warna-element-dengan-warna-background          /blog/menyesuaikan-warna-element-dengan-warna-background
+/menambahkan-dukungan-retina-display-pada-web                /blog/menambahkan-dukungan-retina-display-pada-web
+/mobile-remote-debugging-di-android-dan-iphone               /blog/mobile-remote-debugging-di-android-dan-iphone
+/mengenal-css3-viewport-unit                                 /blog/mengenal-css3-viewport-unit
+/menguasai-flexbox-layout                                    /blog/menguasai-flexbox-layout
+/mengenal-css-variable                                       /blog/mengenal-css-variable
+/link-link-pilihan-minggu-ini-4                              /blog/link-link-pilihan-minggu-ini-4
+/menguasai-flexbox-layout-bagian-2                           /blog/menguasai-flexbox-layout-bagian-2
+/link-link-pilihan-minggu-ini-5                              /blog/link-link-pilihan-minggu-ini-5
+/menguasai-flexbox-layout-study-kasus                        /blog/menguasai-flexbox-layout-study-kasus
+/link-link-pilihan-minggu-ini-6                              /blog/link-link-pilihan-minggu-ini-6
+/memahami-cara-kerja-css                                     /blog/memahami-cara-kerja-css
+/link-link-pilihan-minggu-ini-7                              /blog/link-link-pilihan-minggu-ini-7
+/mencicipi-property-backdrop-filter                          /blog/mencicipi-property-backdrop-filter
diff --git a/site/.vuepress/theme/fonts/ariona.svg b/site/.vuepress/theme/fonts/ariona.svg
diff --git a/site/.vuepress/theme/layouts/Homepage.vue b/site/.vuepress/theme/layouts/Homepage.vue
@@ -4,8 +4,7 @@
     <div data-scroll-section class="homepage-hero">
       <span class="hello-bg">HELLO</span>
       <div class="container">
-        <h2 class="hero-text">I am a Frontend developer who loves to translate designs files into Web Application <br/>– Based in Bandung - Indonesia</h2>
-
+        <div class="hero-text">I am a Frontend developer who loves to translate designs files into Web Application <br/>– Based in Bandung - Indonesia</div>
       </div>
     </div>
 
@@ -154,6 +153,7 @@ export default {
     border-bottom: none;
     padding-bottom: 0;
     user-select: none;
+    color: var(--darkTextColor);
 
     @media screen and (max-width: 768px) {
       font-size: 1.5em;