Merge pull request #3 from hinaloe/v0.2.x

Version 0.2.1
hinaloe · Jun 16, 2018 · 869f973 · 869f973
2 parents 76abc8d + fbe721c
commit 869f973
Show file tree

Hide file tree

Showing 7 changed files with 1,896 additions and 996 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,18 +2,21 @@
 
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
   parserOptions: {
+    parser: 'babel-eslint',
     sourceType: 'module'
   },
   env: {
     browser: true,
   },
   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
-  extends: 'standard',
+  extends: [
+    'plugin:vue/essential',
+    'standard',
+  ],
   // required to lint *.vue files
   plugins: [
-    'html'
+    'vue'
   ],
   // add your custom rules here
   'rules': {

diff --git a/.travis.yml b/.travis.yml
@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-- 6
+- 10
 
 script:
 - yarn lint

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "public-toot-viewer",
-  "version": "1.0.0",
+  "version": "0.2.1-dev",
   "description": "A Vue.js project",
   "author": "hina <[email protected]>",
   "private": true,
@@ -13,17 +13,17 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs"
   },
   "dependencies": {
-    "axios": "^0.17.1",
-    "bootstrap": "v4.0.0-beta.2",
+    "axios": "^0.18.0",
+    "bootstrap": "4.1.1",
     "sanitize-html": "^1.16.1",
     "striptags": "^2.2",
     "vue": "^2.5.9"
   },
   "devDependencies": {
-    "autoprefixer": "^7.1.6",
+    "autoprefixer": "^8.4.1",
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.2.10",
+    "babel-loader": "^7.1.2",
     "babel-plugin-istanbul": "^4.1.1",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-env": "^1.3.2",
@@ -35,19 +35,22 @@
     "copy-webpack-plugin": "^4.0.1",
     "cross-env": "^4.0.0",
     "css-loader": "^0.28.0",
-    "eslint": "^3.19.0",
-    "eslint-config-standard": "^6.2.1",
-    "eslint-friendly-formatter": "^2.0.7",
-    "eslint-loader": "^1.7.1",
-    "eslint-plugin-html": "^2.0.0",
+    "eslint": "^4.19.1",
+    "eslint-config-standard": "^12.0.0-alpha.0",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-loader": "^2.0.0",
+    "eslint-plugin-html": "^4.0.3",
+    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-node": "^6.0.1",
     "eslint-plugin-promise": "^3.4.0",
-    "eslint-plugin-standard": "^2.0.1",
+    "eslint-plugin-standard": "^3.1.0",
+    "eslint-plugin-vue": "^4.5.0",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.14.1",
-    "extract-text-webpack-plugin": "^2.0.0",
+    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.5",
     "friendly-errors-webpack-plugin": "^1.1.3",
-    "html-webpack-plugin": "^2.28.0",
+    "html-webpack-plugin": "^3.2.0",
     "http-proxy-middleware": "^0.17.3",
     "inject-loader": "^3.0.0",
     "karma": "^1.4.1",
@@ -70,9 +73,9 @@
     "shelljs": "^0.7.6",
     "sinon": "^2.1.0",
     "sinon-chai": "^2.8.0",
-    "url-loader": "^0.6.2",
-    "vue-loader": "^13.5.0",
-    "vue-style-loader": "^3.0.3",
+    "url-loader": "^1.0.1",
+    "vue-loader": "^14.0.0",
+    "vue-style-loader": "^4.1.0",
     "vue-template-compiler": "^2.5.9",
     "webpack": "^3.8.1",
     "webpack-bundle-analyzer": "^2.2.1",
@@ -86,7 +89,6 @@
   },
   "browserslist": [
     "> 1%",
-    "last 2 versions",
     "not ie <= 8"
   ]
 }
diff --git a/src/App.vue b/src/App.vue
@@ -10,7 +10,7 @@
       <div class="alert alert-warning" v-if="error">{{error}}</div>
         <form action="/" method="post" @submit.prevent="submit">
             <div class="form-group row">
-                <label for="domain" class="col-4 col-md-2">Domain</label>
+                <label for="domain" class="col-4 col-md-2 col-form-label">Domain</label>
                 <div class="col-8 col-md-4">
                     <input type="text" class="form-control" placeholder="mstdn.jp" id="domain" v-model="domain" @input="inputDomain">
                     <div class="dropdown-menu" style="display: block;right: 0" v-show="suggestEnabled && filteredInstances.length">
@@ -19,11 +19,10 @@
                 </div>
                 <div class="col-12 col-md-6">
                     <input type="submit" class="btn btn-primary" value="Load">
-                    <label class="custom-control custom-checkbox ml-3">
-                        <input type="checkbox" class="custom-control-input" v-model="local">
-                        <span class="custom-control-indicator"></span>
-                        <span class="custom-control-description">Local</span>
-                    </label>
+                    <div class="custom-control custom-checkbox custom-control-inline ml-3">
+                        <input type="checkbox" class="custom-control-input" id="is-local" v-model="local">
+                        <label class="custom-control-label" for="is-local">Local</label>
+                    </div>
 
                 </div>
             </div>
@@ -76,7 +75,7 @@ export default {
         })
       }
     }, 30000)
-    axios.get('https://instances.mastodon.xyz/instances.json').then(res => {
+    axios.get('https://instances.social/instances.json').then(res => {
       if (!Array.isArray(res.data)) {
         return Promise.reject(new Error('Invalid response'))
       }

diff --git a/src/components/Instance.vue b/src/components/Instance.vue
@@ -10,9 +10,9 @@
     </a>
 </template>
 <script>
-    export default {
-      props: {
-        instance: Object
-      }
-    }
+export default {
+  props: {
+    instance: Object
+  }
+}
 </script>
diff --git a/src/components/Toot.vue b/src/components/Toot.vue
@@ -21,17 +21,17 @@
                         Close
                     </button>
                 </p>
-                <div v-html="content" v-if="!toot.spoiler_text||more" class="content"></div>
-                <div v-if="toot.media_attachments.length">
-                    <div v-if="toot.sensitive && !allowSensitive" class="text-center sensitive" @click="allowSensitive=true">
-                        Sensitive content (click to show)
-                    </div>
-                    <div v-else>
-                        <a :href="media.url" v-for="media in toot.media_attachments">
-                            <img :src="media.preview_url" alt="" class="img-fluid img-thumbnail">
-                        </a>
-                    </div>
+              <div v-html="content" v-if="!toot.spoiler_text||more" class="content"></div>
+              <div v-if="toot.media_attachments.length">
+                <div v-if="toot.sensitive && !allowSensitive" class="text-center sensitive" @click="allowSensitive=true">
+                  Sensitive content (click to show)
                 </div>
+                <div v-else>
+                  <a :href="media.url" v-for="media in toot.media_attachments" :key="media.id">
+                    <img :src="media.preview_url" alt="" class="img-fluid img-thumbnail">
+                  </a>
+                </div>
+              </div>
             </div>
         </div>
     </article>
@@ -87,60 +87,60 @@
     }
 </style>
 <script>
-  import striptags from 'striptags'
-  import sanitize from 'sanitize-html'
+import striptags from 'striptags'
+import sanitize from 'sanitize-html'
 
-  export default {
-    props: {
-      toot: {
-        type: Object, required: true
-      }
+export default {
+  props: {
+    toot: {
+      type: Object, required: true
+    }
+  },
+  data () {
+    return {
+      allowSensitive: false,
+      more: false
+    }
+  },
+  computed: {
+    date () {
+      const date = new Date(this.toot.created_at)
+      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${`00${date.getMinutes()}`.slice(-2)}:${`0${date.getSeconds()}`.slice(-2)}`
     },
-    data () {
-      return {
-        allowSensitive: false,
-        more: false
-      }
+    note () {
+      return striptags(this.toot.account.note.replace(/<br(?: \/)?>/g, '\n'))
     },
-    computed: {
-      date () {
-        const date = new Date(this.toot.created_at)
-        return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${`00${date.getMinutes()}`.slice(-2)}:${`0${date.getSeconds()}`.slice(-2)}`
-      },
-      note () {
-        return striptags(this.toot.account.note.replace(/<br(?: \/)?>/g, '\n'))
-      },
-      content () {
-        /** @type {String} sanitized */
-        let sanitized = sanitize(this.toot.content, {
-          allowedTags: ['h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol',
-            'nl', 'li', 'b', 'i', 'strong', 'em', 'strike', 'code', 'hr', 'br', 'div',
-            'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'span'],
-          allowedAttributes: {
-            a: ['href', 'target'],
-            // We don't currently allow img itself by default, but this
-            // would make sense if we did
-            img: ['src', 'alt'],
-            '*': ['class', 'title', 'rel']
-          }
-        })
+    content () {
+      /** @type {String} sanitized */
+      let sanitized = sanitize(this.toot.content, {
+        allowedTags: ['h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol',
+          'nl', 'li', 'b', 'i', 'strong', 'em', 'strike', 'code', 'hr', 'br', 'div',
+          'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'span'],
+        allowedAttributes: {
+          a: ['href', 'target'],
+          // We don't currently allow img itself by default, but this
+          // would make sense if we did
+          img: ['src', 'alt'],
+          '*': ['class', 'title', 'rel']
+        }
+      })
 
-        if (Array.isArray(this.toot.emojis) && this.toot.emojis.length) {
-          for (const emoji of this.toot.emojis) {
-            if (!emoji.shortcode || !emoji.url || !this.validateShortCode(emoji.shortcode)) {
-              continue
-            }
-            sanitized = sanitized.replace(new RegExp(`:${emoji.shortcode}:`, 'g'), `<img src="${emoji.url}" draggable="false" alt=":${emoji.shortcode}:" title=":${emoji.shortcode}:" class="inline-emoji">`)
+      if (Array.isArray(this.toot.emojis) && this.toot.emojis.length) {
+        for (const emoji of this.toot.emojis) {
+          if (!emoji.shortcode || !emoji.url || !this.validateShortCode(emoji.shortcode)) {
+            continue
           }
+          sanitized = sanitized.replace(new RegExp(`:${emoji.shortcode}:`, 'g'), `<img src="${emoji.url}" draggable="false" alt=":${emoji.shortcode}:" title=":${emoji.shortcode}:" class="inline-emoji">`)
         }
-
-        return sanitized
-      }
-    },
-    methods: {
-      validateShortCode (name) {
-        return /^[a-zA-Z0-9_]+$/.test(name)
       }
+
+      return sanitized
+    }
+  },
+  methods: {
+    validateShortCode (name) {
+      return /^[a-zA-Z0-9_]+$/.test(name)
     }
   }
+}
 </script>