Update home

package.json

@@ -12,6 +12,7 @@
     "compression": "^1.7.1",
     "exceljs": "^4.2.1",
     "polka": "next",
+    "prettier": "^2.2.1",
     "sirv": "^1.0.0"
   },
   "devDependencies": {

src/locales/en.json

@@ -55,6 +55,10 @@
     "calculator": {
       "title": "🧮 Calculate Character and Weapons ascension material and talent book! All the calculations can be added to the Todo list, it will show you how much resin you need too!",
       "detail": "Calculator"
+    },
+    "twitter": {
+      "title": "Follow my Twitter, will occasionally post sneak peak what I currently develop and latest update to paimon.moe!",
+      "detail": "Follow Twitter"
     }
   },
   "characters": {

src/locales/id.json

@@ -55,6 +55,10 @@
     "calculator": {
       "title": "🧮 Hitung Ascension dan Talent Book Karakter dan Senjata! Semua hasil perhitungan bisa ditambahkan ke daftar todo, dan juga akan menampilkan berapa resin yang kamu perlukan!",
       "detail": "Kalkulator"
+    },
+    "twitter": {
+      "title": "Follow my Twitter, akan post tentang apa yang lagi di develop dan update terbaru tentang paimon.moe!",
+      "detail": "Follow Twitter"
     }
   },
   "characters": {

src/routes/_index/twitter.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { mdiChevronRight, mdiTwitter } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import Icon from '../../components/Icon.svelte';
+</script>
+
+<div class="bg-item rounded-xl p-4 flex flex-col items-start">
+  <p class="text-white ml-2">
+    {$t('home.twitter.title')}
+  </p>
+  <a
+    href="https://twitter.com/MadeBaruna"
+    target="_blank"
+    class="flex justify-end items-center self-end lg:self-start text-white mt-4 bg-background-secondary rounded-xl py-2 px-4
+    hover:bg-background transition-colors duration-100"
+  >
+  <Icon path={mdiTwitter} className="mr-2" />
+    {$t('home.twitter.detail')}
+    <Icon path={mdiChevronRight} />
+  </a>
+</div>

src/routes/index.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from 'svelte';
   import debounce from 'lodash/debounce';
+  import { locale } from 'svelte-i18n';
 
   import Masonry from '../components/Masonry.svelte';
 
@@ -12,6 +13,7 @@
   import Item from './_index/item.svelte';
   import Calculator from './_index/calculator.svelte';
   import Discord from './_index/discord.svelte';
+  import Twitter from './_index/twitter.svelte';
 
   let refreshLayout;
 
@@ -22,7 +24,13 @@
   onMount(() => {
     setTimeout(() => {
       refreshLayout();
-    }, 1);
+    }, 1000);
+
+    locale.subscribe(() => {
+      setTimeout(() => {
+        refreshLayout();
+      }, 1);
+    });
   });
 </script>
 
@@ -46,6 +54,7 @@
     <Event on:done={onDone} />
     <Item on:done={onDone} />
     <Discord on:done={onDone} />
+    <Twitter on:done={onDone} />
     <Calculator on:done={onDone} />
   </Masonry>
 </div>

yarn.lock

@@ -2493,6 +2493,11 @@ postcss@^8.1.2:
     nanoid "^3.1.12"
     source-map "^0.6.1"
 
+prettier@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
+  integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
+
 pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"