use standard to lint HTML too (#186)

CONTRIBUTING.md

@@ -32,6 +32,7 @@ Lint:
 Automatically fix most linting issues:
 
     npx standard --fix
+    npx standard --fix --plugin html 'routes/**/*.html'
 
 ## Testing
 

package-lock.json

@@ -3084,6 +3084,15 @@
         }
       }
     },
+    "eslint-plugin-html": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-4.0.3.tgz",
+      "integrity": "sha512-ArFnlfQxwYSz/CP0zvk8Cy3MUhcDpT3o6jgO8eKD/b8ezcLVBrgkYzmMv+7S/ya+Yl9pN+Cz2tsgYp/zElkQzA==",
+      "dev": true,
+      "requires": {
+        "htmlparser2": "3.9.2"
+      }
+    },
     "eslint-plugin-import": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.9.0.tgz",

package.json

@@ -3,7 +3,7 @@
   "description": "Alternative web client for Mastodon",
   "version": "0.2.2",
   "scripts": {
-    "lint": "standard",
+    "lint": "standard && standard --plugin html 'routes/**/*.html'",
     "dev": "run-s build-svg build-inline-script serve-dev",
     "serve-dev": "run-p --race build-sass-watch serve",
     "serve": "node server.js",
@@ -83,6 +83,7 @@
     "yargs": "11.0.0"
   },
   "devDependencies": {
+    "eslint-plugin-html": "4.0.3",
     "now": "11.1.7",
     "standard": "11.0.1",
     "testcafe": "0.19.1"
@@ -117,7 +118,8 @@
       "atob",
       "btoa",
       "Blob",
-      "Element"
+      "Element",
+      "Image"
     ],
     "ignore": [
       "dist",

routes/_components/Layout.html

@@ -9,7 +9,7 @@
   {{/if}}
 </div>
 <script>
-	import Nav from './Nav.html';
+  import Nav from './Nav.html'
   import { store } from '../_store/store'
   import InformationalFooter from './InformationalFooter.html'
 

routes/_components/LazyImage.html

@@ -21,7 +21,6 @@
   }
 </style>
 <script>
-
   import { mark, stop } from '../_utils/marks'
 
   export default {

routes/_components/NavItem.html

@@ -146,5 +146,4 @@
       }
     }
   }
-
 </script>

routes/_components/TimelineHomePage.html

@@ -42,7 +42,7 @@
     },
     computed: {
       hidePage: ($timelineInitialized, $timelinePreinitialized) => !$timelineInitialized && !$timelinePreinitialized,
-      hideTimeline: ($timelineInitialized) => !$timelineInitialized,
+      hideTimeline: ($timelineInitialized) => !$timelineInitialized
     },
     store: () => store,
     components: {

routes/_components/TimelinePage.html

@@ -36,7 +36,7 @@
     },
     computed: {
       hidePage: ($timelineInitialized, $timelinePreinitialized) => !$timelineInitialized && !$timelinePreinitialized,
-      hideTimeline: ($timelineInitialized) => !$timelineInitialized,
+      hideTimeline: ($timelineInitialized) => !$timelineInitialized
     },
     store: () => store,
     components: {

routes/_components/compose/ComposeAutosuggest.html

@@ -94,7 +94,7 @@
           composeAutosuggestionSelected: 0,
           composeAutosuggestionSearchText: searchText,
           composeAutosuggestionSearchResults: results,
-          composeAutosuggestionType: type,
+          composeAutosuggestionType: type
         })
       })
       this.observe('shown', shown => {
@@ -114,7 +114,6 @@
         } else {
           /* no await */ insertEmojiAtPosition(realm, item, startIndex, endIndex)
         }
-
       },
       async searchAccounts (searchText) {
         searchText = searchText.substring(1)

routes/_components/compose/ComposeBox.html

@@ -197,7 +197,7 @@
           dialogs.showComposeDialog()
         } else {
           // else we're actually posting a new toot
-          this.doPostStatus();
+          this.doPostStatus()
         }
       },
       doPostStatus () {

routes/_components/dialog/components/AccountProfileOptionsDialog.html

@@ -126,6 +126,6 @@ export default {
   components: {
     ModalDialog,
     GenericDialogList
-  },
+  }
 }
 </script>

routes/_components/profile/AccountProfileNote.html

@@ -39,7 +39,7 @@
           note = `<p>${note}</p>`
         }
         return note
-      },
+      }
     }
   }
 </script>

routes/_components/pseudoVirtualList/PseudoVirtualList.html

@@ -19,7 +19,6 @@
   }
 </style>
 <script>
-
   import PseudoVirtualListLazyItem from './PseudoVirtualListLazyItem.html'
   import { getRectFromEntry } from '../../_utils/getRectFromEntry'
   import { mark, stop } from '../../_utils/marks'

routes/_components/settings/SettingsLayout.html

@@ -22,7 +22,7 @@
   }
 </style>
 <script>
-  import SettingsNav from './SettingsNav.html';
+  import SettingsNav from './SettingsNav.html'
   import FreeTextLayout from '../../_components/FreeTextLayout'
 
   export default {
@@ -30,5 +30,5 @@
       FreeTextLayout,
       SettingsNav
     }
-  };
+  }
 </script>

routes/_components/settings/SettingsNavItem.html

@@ -14,7 +14,7 @@
   export default {
     helpers: {
       getCurrentClass (page, name) {
-        return page === name  ? "selected" : ""
+        return page === name ? 'selected' : ''
       },
       getAriaLabel (page, name, label) {
         return page === name ? `${label} (current page)` : label

routes/_components/status/Media.html

@@ -98,12 +98,11 @@
   }
 </style>
 <script>
-  import { DEFAULT_MEDIA_WIDTH, DEFAULT_MEDIA_HEIGHT } from '../../_static/media'
+  import { DEFAULT_MEDIA_WIDTH, DEFAULT_MEDIA_HEIGHT, ONE_TRANSPARENT_PIXEL } from '../../_static/media'
   import { importDialogs } from '../../_utils/asyncModules'
   import { mouseover } from '../../_utils/events'
   import NonAutoplayGifv from '../NonAutoplayGifv.html'
   import PlayVideoIcon from '../PlayVideoIcon.html'
-  import { ONE_TRANSPARENT_PIXEL } from '../../_static/media'
   import { store } from '../../_store/store'
   import LazyImage from '../LazyImage.html'
   import AutoplayVideo from '../AutoplayVideo.html'

routes/_components/status/Notification.html

@@ -46,7 +46,7 @@
       statusId: (status) => status && status.id,
       uuid: ($currentInstance, timelineType, timelineValue, notificationId, statusId) => {
         return `${$currentInstance}/${timelineType}/${timelineValue}/${notificationId}/${statusId || ''}`
-      },
+      }
     }
   }
 </script>

routes/_components/status/Status.html

@@ -202,18 +202,18 @@
       spoilerShown: ($spoilersShown, uuid) => !!$spoilersShown[uuid],
       replyShown: ($repliesShown, uuid) => !!$repliesShown[uuid],
       showMedia: (originalStatus, isStatusInNotification) => {
-        return !isStatusInNotification
-          && originalStatus.media_attachments
-          && originalStatus.media_attachments.length
+        return !isStatusInNotification &&
+        originalStatus.media_attachments &&
+        originalStatus.media_attachments.length
       },
       ariaLabel: (originalAccount, originalStatus, visibility) => {
         return (visibility === 'direct' ? 'Direct message' : 'Status') +
           ` by ${originalAccount.display_name || originalAccount.username}`
       },
       showHeader: (notification, status, timelineType) => {
-        return (notification && (notification.type === 'reblog' || notification.type === 'favourite'))
-          || status.reblog
-          || timelineType === 'pinned'
+        return (notification && (notification.type === 'reblog' || notification.type === 'favourite')) ||
+        status.reblog ||
+        timelineType === 'pinned'
       },
       className: (visibility, timelineType, isStatusInOwnThread) => {
         return classname(

routes/_components/status/StatusHeader.html

@@ -81,7 +81,6 @@
   }
 </style>
 <script>
-
   import Avatar from '../Avatar.html'
 
   export default {

routes/_components/status/StatusMediaAttachments.html

@@ -141,7 +141,7 @@
       mediaAttachments: (originalStatus) => originalStatus.media_attachments,
       sensitiveShown: ($sensitivesShown, uuid) => !!$sensitivesShown[uuid],
       sensitive: (originalStatus, $markMediaAsSensitive) => originalStatus.sensitive || $markMediaAsSensitive,
-      delegateKey: (uuid) => `sensitive-${uuid}`,
+      delegateKey: (uuid) => `sensitive-${uuid}`
     },
     methods: {
       onClickSensitiveMediaButton () {

routes/_components/status/StatusToolbar.html

@@ -166,7 +166,7 @@
       favoriteKey: (uuid) => `fav-${uuid}`,
       reblogKey: (uuid) => `reblog-${uuid}`,
       replyKey: (uuid) => `reply-${uuid}`,
-      optionsKey: (uuid) => `options-${uuid}`,
+      optionsKey: (uuid) => `options-${uuid}`
     }
   }
 </script>

routes/_components/timeline/Timeline.html

@@ -123,14 +123,12 @@
       // for threads, it's simpler to just render all items as a pseudo-virtual list
       // due to need to scroll to the right item and thus calculate all item heights up-front
       virtual: (timelineType) => timelineType !== 'status',
-      scrollToItem: (timelineType, timelineValue, $firstTimelineItemId) => {
       // Scroll to the first item if this is a "status in own thread" timeline.
       // Don't scroll to the first item because it obscures the "back" button.
-        return timelineType === 'status'
-          && $firstTimelineItemId
-          && timelineValue !== $firstTimelineItemId
-          && timelineValue
-      },
+      scrollToItem: (timelineType, timelineValue, $firstTimelineItemId) => (
+        timelineType === 'status' && $firstTimelineItemId &&
+        timelineValue !== $firstTimelineItemId && timelineValue
+      ),
       itemIdsToAdd: ($itemIdsToAdd) => $itemIdsToAdd,
       headerProps: (itemIdsToAdd) => {
         return {

routes/_components/virtualList/VirtualList.html

@@ -105,7 +105,7 @@
       },
       scrollTop: ($scrollTop) => $scrollTop,
       // TODO: bug in svelte store, shouldn't need to do this
-      allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight,
+      allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight
     },
     methods: {
       calculateListOffset () {

routes/_components/virtualList/VirtualListContainer.html

@@ -115,5 +115,5 @@
       // TODO: bug in svelte/store – the observer in oncreate() never get removed without this hack
       allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight
     }
-  };
+  }
 </script>

routes/_components/virtualList/VirtualListFooter.html

@@ -22,6 +22,6 @@
         this.store.setForRealm({footerHeight: rect.height})
       })
     },
-    store: () => virtualListStore,
+    store: () => virtualListStore
   }
 </script>

routes/_pages/community/index.html

@@ -111,5 +111,5 @@
     computed: {
       isLockedAccount: ($currentVerifyCredentials) => $currentVerifyCredentials && $currentVerifyCredentials.locked
     }
-  };
+  }
 </script>

routes/_pages/notifications.html

@@ -22,5 +22,5 @@
       HiddenFromSSR,
       TimelinePage
     }
-  };
+  }
 </script>

routes/_pages/settings/about.html

@@ -27,5 +27,5 @@
     data: () => ({
       version
     })
-  };
+  }
 </script>

routes/_pages/settings/general.html

@@ -42,5 +42,5 @@
       SettingsLayout
     },
     store: () => store
-  };
+  }
 </script>

routes/_pages/settings/index.html

@@ -19,5 +19,5 @@
       SettingsList,
       SettingsListItem
     }
-  };
+  }
 </script>

routes/_pages/settings/instances/[instanceName].html

@@ -112,7 +112,7 @@
     },
     store: () => store,
     data: () => ({
-      themes: themes,
+      themes: themes
     }),
     async oncreate () {
       let { instanceName } = this.get()