Merge pull request #3 from bestpika/master

[@] 重構喇
tasi788 · May 29, 2020 · 857c5ed · 857c5ed
2 parents 88e536c + 90f69fc
commit 857c5ed
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 88 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.vscode/
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
 # Hiraku Sayings
 
-新買的 domain 不知道放什麼的話可以參考看看ㄛ~
+新買的域名不知道放什麼的話可以參考看看ㄛ～
diff --git a/index.html b/index.html
@@ -1,70 +1,65 @@
 <!DOCTYPE html>
-<html>
+<html lang="zh-Hant">
 
-<head>
-    <meta charset="utf-8">
-    <script type="text/javascript">
-    if (!window.location.href.includes('https://')) {
-        window.location.href = "https://" + window.location.hostname;
-    }
-    </script>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
     <title>┌(┌^o^)┐</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.0/css/bulma.min.css" integrity="sha256-D9M5yrVDqFlla7nlELDaYZIpXfFWDytQtiV+TaH6F1I=" crossorigin="anonymous" />
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.min.css" />
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Rubik&display=swap" />
+    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
+    <script type="text/javascript">
+      // HTTP => HTTPS
+      if (location.protocol !== 'https:' && location.hostname !== 'localhost') {
+        location.protocol = 'https:'
+      }
     </script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js" integrity="sha256-ngFW3UnAN0Tnm76mDuu7uUtYEcG3G5H1+zioJw3t+68=" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js" integrity="sha256-T/f7Sju1ZfNNfBh7skWn0idlCBcI3RwdLSS4/I7NQKQ=" crossorigin="anonymous"></script>
-    <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
     <style>
-    .box {
-        margin-top: 10%;
-        /* width: 70%; */
-        margin-left: 20%;
-        margin-right: 20%;
-        font-size: 40px;
-    }
+      html {
+        background-color: #18232c;
+      }
 
-    .content small {
-        color: gray;
-    }
+      [v-cloak] {
+        display: none;
+      }
 
-    #icon > img {
-        border-radius: 50%;
-    }
+      .box {
+        margin: 10% 20% auto 20%;
+        font-size: 40px;
+      }
 
-    [v-cloak] {
-        display: none;
-    }
+      .content small {
+        color: gray;
+      }
 
-    html {
-        background-color: #18232c;
-    }
     </style>
-</head>
+  </head>
 
-<body>
-    <div class="box">
+  <body>
+    <div id="app" class="container">
+      <div class="box">
         <article class="media">
-            <div class="media-left">
-                <figure class="image is-64x64" id="icon">
-                    <img src="./statics/hiraku.jpeg" alt="Image">
-                    <span class="icon">
-                        <i class="fas fa-home"></i>
-                    </span>
-                </figure>
-            </div>
-            <div class="media-content">
-                <div class="content" id="exhibition">
-                    <p>
-                        <strong>Hiraku</strong> <small>@hirakujira</small> <small> · 1m</small>
-                        <br>
-                        <span v-cloak>{{ message }}<span>
-                        <!-- 好ㄉ小ㄉ知道ㄖ -->
-                    </p>
-                </div>
+          <div class="media-left">
+            <figure class="image is-64x64" id="icon">
+              <img :src="avatar" alt="Image">
+              <span class="icon"></span>
+            </figure>
+          </div>
+          <div class="media-content">
+            <div class="content">
+              <p>
+                <strong>{{ name }}</strong> <small>@{{ uname }}</small> <small> · 1m</small>
+                <br>
+                <span v-cloak>{{ message }}</span>
+                <!-- 好ㄉ小ㄉ知道ㄖ -->
+              </p>
             </div>
+          </div>
         </article>
+      </div>
     </div>
-    <script src="./statics/main.js"></script>
-</body>
+    <script src="public/main.js"></script>
+  </body>
 
-</html>
+</html>
diff --git a/statics/hiraku.jpeg → public/hiraku.jpeg b/statics/hiraku.jpeg → public/hiraku.jpeg
diff --git a/public/main.js b/public/main.js
@@ -0,0 +1,35 @@
+/* global Vue */
+(async () => {
+  const gravatar = {
+    hirakujira: { name: 'Hiraku', avatar: 'bf73e08d8bc1db95b62f02d50f8a03e9' }
+  }
+  const hiraku = await fetch('public/saying.txt')
+  const saying = await hiraku.text()
+  const hirakuSaying = saying.split(';').slice(0, -1).map(x => x.trim())
+  new Vue({ // eslint-disable-line no-new
+    el: '#app',
+    data: {
+      hiraku: hirakuSaying,
+      uname: '',
+      name: '',
+      avatar: 'https://www.gravatar.com/avatar/00000000000000000000000000000000',
+      message: ''
+    },
+    methods: {
+      updateHiraku () {
+        const idx = Math.floor(Math.random() * this.hiraku.length)
+        const saying = this.hiraku[idx].split(',')
+        this.uname = saying[0]
+        this.name = gravatar[this.uname].name
+        this.avatar = `https://www.gravatar.com/avatar/${gravatar[this.uname].avatar}`
+        this.message = saying[1]
+      }
+    },
+    created () {
+      (function f () {
+        this.updateHiraku()
+        return setTimeout(f.bind(this), 5000)
+      }).bind(this)()
+    }
+  })
+})()
diff --git a/public/saying.txt b/public/saying.txt
@@ -0,0 +1,18 @@
+hirakujira,我買的每一個垃圾 domain 都至少放個 index.html ┌(┌^o^)┐;
+hirakujira,因為我都找 Apple 麻煩所以 (´・ω・｀);
+hirakujira,就我笨啊;
+hirakujira,笑死，每個人都質疑你沒 SSL @Shawn_N;
+hirakujira,咬我啊;
+hirakujira,怕爆;
+hirakujira,Ubuntu 20.04 刷爆了，耶 ( ✌️‘ω’)✌️;
+hirakujira,我不會 unix (´・ω・｀);
+hirakujira,我以為 kinta.ma 的網域本身就是彩蛋 (´・ω・｀);
+hirakujira,應該是我智障喔;
+hirakujira,反正寫這個就是抄抄別人的就會了;
+hirakujira,單純我笨而已;
+hirakujira,嗚嗚我辣雞;
+hirakujira,夢遊寫 code;
+hirakujira,原來我才辣雞;
+hirakujira,兩隻 iPhone SE 四萬而已比一隻 11 Pro Max 便宜;
+hirakujira,那是我做的 bot 叫做唐鳳。;
+hirakujira,你以為這個群有 4448 人？其實裡面都是我，不信我等下發一樣訊息給你看看;
diff --git a/statics/hiraku.txt b/statics/hiraku.txt
diff --git a/statics/main.js b/statics/main.js