[PR] #38 from LS-KR: Random person

[+] Click to visit a random person

src/components.d.ts

@@ -31,6 +31,7 @@ declare module 'vue' {
     MDX: typeof import('./components/MDX.vue')['default']
     PhotoScroll: typeof import('./components/PhotoScroll.vue')['default']
     ProfileCard: typeof import('./components/ProfileCard.vue')['default']
+    RandomPerson: typeof import('./components/RandomPerson.vue')['default']
     RecaptchaV2: typeof import('./components/RecaptchaV2.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/components/RandomPerson.vue

@@ -0,0 +1,77 @@
+<template>
+    <button class="random shadow" v-on:click="rand">
+        <div class="iconR">🔀</div>
+        <div class="textR">{{ i18n.random }}</div>
+    </button>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component';
+import { getLang, i18n, dataHost } from '../logic/config';
+import { PersonMeta } from '../logic/data';
+import urljoin from 'url-join';
+import { info } from '../logic/utils';
+import { fetchWithLang } from '../logic/helper';
+
+@Options({ components: {} })
+export default class RandomPerson extends Vue {
+    lang = getLang();
+    i18n = i18n[getLang()];
+    people: PersonMeta[] = null as never as PersonMeta[];
+
+    created(): void {
+        info(`Language: ${this.lang}`);
+        fetchWithLang(urljoin(dataHost, 'people-list.json'))
+            .then((it) => it.text())
+            .then((it) => {
+                this.people = JSON.parse(it);
+                // console.log(it)
+                // console.log(this.people)
+            });
+    }
+
+    rand() {
+        if (!this.people) return;
+        const p = this.people[Math.floor(this.people.length * Math.random())];
+        this.$router.push(`/profile/${p.id}`);
+    }
+}
+</script>
+
+<style lang="sass" scoped>
+@import "../css/colors"
+
+.random
+    display: flexbox
+    background: $color-bg-6
+    border-radius: 20px
+    border-style: solid
+    border-width: 1px
+    border-color: $color-text-light
+    padding: 10px
+    width: fit-content
+    gap: 8px
+    align-items: center
+    color: $color-text-main
+
+    filter: drop-shadow(0 2px 3px rgba(188 140 68 / 0.2))
+
+    .iconR
+        font-size: 2em
+        color: rgba(188 140 60 / 0.5)
+        background: transparent
+        font-family: 'Hua', '851', 'STXINGKA', Avenir, Helvetica, Arial, sans-serif
+        display: inline-block
+
+    .textR
+        font-size: 1.65em
+        margin-left: 10px
+        font-family: '851'
+        vertical-align: middle
+        display: inline-block
+        padding-bottom: 0.6rem
+
+.shadow:hover
+    box-shadow: 15px 15px 15px -5px rgba(166 134 89 / 0.3)
+    border-color: $color-text-special
+</style>

src/logic/config.ts

@@ -96,6 +96,7 @@ export const i18n = {
         "nav_comment_placeholder": "Add a message... (Markdown supported)",
         "nav_comment_status": "chars (draft saved)",
         "nav_comment_in_reply_to": "In reply to",
+        "random": "Click here to visit a random page",
     },
     "zh_hans": {
         "nav_home": "首页",
@@ -125,6 +126,7 @@ export const i18n = {
         "nav_comment_placeholder": "添加留言... （支持 Markdown）",
         "nav_comment_status": "字（已存草稿）",
         "nav_comment_in_reply_to": "回复",
+        "random": "随机看望一位朋友",
     },
     "zh_hant": {
         "nav_home": "首頁",
@@ -154,6 +156,7 @@ export const i18n = {
         "nav_comment_placeholder": "添加留言... （支援 Markdown）",
         "nav_comment_status": "字（草案已儲存）",
         "nav_comment_in_reply_to": "回覆",
+        "random": "點一下這裏查看一個隨機頁面",
     }
 }
 

src/views/Home.vue

@@ -3,6 +3,8 @@
     <div id="home" :class="clicked ? 'clicked' : ''">
         <div class="introduction markdown-content" v-html="htmlTop" />
 
+        <RandomPerson />
+
         <div id="profiles" class="unselectable" v-if="people">
             <div class="profile" v-for="(p, i) in people" :key="i">
                 <div class="back"/>