remove all instances of string coercion (#240)

2018-04-29 17:45:03 -07:00 · 2018-04-29 17:45:03 -07:00 · 9629a55a9f
parent 40a9ff957a
commit 9629a55a9f
67 changed files with 235 additions and 232 deletions
--- a/routes/_components/AutoplayVideo.html
+++ b/routes/_components/AutoplayVideo.html
@ -1,6 +1,6 @@
 <video
  class="autoplay-video {{className || ''}}"
-  aria-label="{{ariaLabel || ''}}"
+  aria-label={{ariaLabel || ''}}
  style="background-image: url({{poster}});"
  :poster
  :width
--- a/routes/_components/Avatar.html
+++ b/routes/_components/Avatar.html
@ -1,22 +1,22 @@
 {{#if error}}
-<svg class="{{computedClass}}" aria-hidden="true">
+<svg class={{computedClass}} aria-hidden="true">
  <use xlink:href="#fa-user" />
 </svg>
 {{elseif $autoplayGifs}}
  <img
-    class="{{computedClass}}"
+    class={{computedClass}}
    aria-hidden="true"
    alt=""
-    src="{{account.avatar}}"
+    src={{account.avatar}}
    on:imgLoad="set({loaded: true})"
    on:imgLoadError="set({error: true})" />
 {{else}}
  <NonAutoplayImg
-    className="{{computedClass}}"
+    className={{computedClass}}
    ariaHidden="true"
    alt=""
-    src="{{account.avatar}}"
-    staticSrc="{{account.avatar_static}}"
+    src={{account.avatar}}
+    staticSrc={{account.avatar_static}}
    :isLink
    on:imgLoad="set({loaded: true})"
    on:imgLoadError="set({error: true})"
--- a/routes/_components/DynamicPageBanner.html
+++ b/routes/_components/DynamicPageBanner.html
@ -1,7 +1,7 @@
 <div class="dynamic-page-banner {{icon ? 'dynamic-page-with-icon' : ''}}">
  {{#if icon}}
  <svg class="dynamic-page-banner-svg">
-    <use xlink:href="{{icon}}" />
+    <use xlink:href={{icon}} />
  </svg>
  {{/if}}
  <h1 class="dynamic-page-title">{{title}}</h1>
--- a/routes/_components/ExternalLink.html
+++ b/routes/_components/ExternalLink.html
@ -1,7 +1,7 @@
 <a rel="nofollow noopener"
   target="_blank"
-   href="{{href}}"
-   aria-label="{{ariaLabel || ''}}"
+   href={{href}}
+   aria-label={{ariaLabel || ''}}
   class="{{className || ''}} {{showIcon ? 'external-link-with-icon' : ''}} {{normalIconColor ? 'normal-icon-color' : ''}}">
  <slot></slot>{{#if showIcon}}
    <svg class="external-link-svg">
--- a/routes/_components/IconButton.html
+++ b/routes/_components/IconButton.html
@ -1,27 +1,27 @@
 {{#if delegateKey}}
  <button type="button"
-          title="{{label}}"
-          aria-label="{{label}}"
-          aria-pressed="{{pressable ? !!pressed : ''}}"
-          class="{{computedClass}}"
+          title={{label}}
+          aria-label={{label}}
+          aria-pressed={{pressable ? !!pressed : ''}}
+          class={{computedClass}}
          :disabled
-          delegate-key="{{delegateKey}}"
-          focus-key="{{focusKey || ''}}" >
+          delegate-key={{delegateKey}}
+          focus-key={{focusKey || ''}} >
    <svg class="icon-button-svg {{svgClassName || ''}}" ref:svg>
-      <use xlink:href="{{href}}" />
+      <use xlink:href={{href}} />
    </svg>
  </button>
 {{else}}
  <button type="button"
-          title="{{label}}"
-          aria-label="{{label}}"
-          aria-pressed="{{pressable ? !!pressed : ''}}"
-          class="{{computedClass}}"
-          focus-key="{{focusKey || ''}}"
+          title={{label}}
+          aria-label={{label}}
+          aria-pressed={{pressable ? !!pressed : ''}}
+          class={{computedClass}}
+          focus-key={{focusKey || ''}}
          :disabled
          on:click >
    <svg class="icon-button-svg {{svgClassName || ''}}" ref:svg>
-      <use xlink:href="{{href}}" />
+      <use xlink:href={{href}} />
    </svg>
  </button>
 {{/if}}
--- a/routes/_components/LazyImage.html
+++ b/routes/_components/LazyImage.html
@ -3,10 +3,10 @@
  {{#if displaySrc}}
    <img
      class="{{hidden ? 'hidden' : ''}} {{className || ''}}"
-      aria-hidden="{{ariaHidden || ''}}"
-      alt="{{alt || ''}}"
-      title="{{alt || ''}}"
-      src="{{displaySrc}}"
+      aria-hidden={{ariaHidden || ''}}
+      alt={{alt || ''}}
+      title={{alt || ''}}
+      src={{displaySrc}}
      :width
      :height
    />
--- a/routes/_components/Nav.html
+++ b/routes/_components/Nav.html
@ -20,7 +20,7 @@
      </li>
    {{elseif $pinnedPage.startsWith('/lists/')}}
      <li class="main-nav-li">
-        <NavItem :page name="lists" href="{{$pinnedPage}}" svg="#fa-bars" label="{{$pinnedListTitle}}" />
+        <NavItem :page name="lists" href={{$pinnedPage}} svg="#fa-bars" label={{$pinnedListTitle}} />
      </li>
    {{/if}}
 		<li class="main-nav-li">
--- a/routes/_components/NavItem.html
+++ b/routes/_components/NavItem.html
@ -1,12 +1,12 @@
 <a class='main-nav-link {{selected ? "selected" : ""}}'
-   aria-label='{{ariaLabel}}'
-   aria-current="{{selected}}"
+   aria-label={{ariaLabel}}
+   aria-current={{selected}}
   on:click="onClick(event)"
   :href >
  {{#if name === 'notifications'}}
    <div class="nav-link-svg-wrapper">
      <svg class="nav-link-svg">
-        <use xlink:href="{{svg}}" />
+        <use xlink:href={{svg}} />
      </svg>
      {{#if $hasNotifications}}
        <span class="nav-link-notifications" aria-hidden="true">
@ -16,7 +16,7 @@
    </div>
  {{else}}
    <svg class="nav-link-svg">
-      <use xlink:href="{{svg}}" />
+      <use xlink:href={{svg}} />
    </svg>
  {{/if}}
  <span class="nav-link-label">{{label}}</span>
--- a/routes/_components/NonAutoplayGifv.html
+++ b/routes/_components/NonAutoplayGifv.html
@ -4,8 +4,8 @@
 >
  {{#if playing}}
    <AutoplayVideo
-      className="{{class}}"
-      ariaLabel="{{label}}"
+      className={{class}}
+      ariaLabel={{label}}
      :poster
      :src
      :width
@ -13,17 +13,17 @@
      />
  {{else}}
    <LazyImage
-      alt="{{label || ''}}"
-      title="{{label || ''}}"
-      src="{{staticSrc}}"
-      fallback="{{oneTransparentPixel}}"
+      alt={{label || ''}}
+      title={{label || ''}}
+      src={{staticSrc}}
+      fallback={{oneTransparentPixel}}
      :width
      :height
      background="var(--loading-bg)"
-      className="{{class}}"
+      className={{class}}
    />
  {{/if}}
-  <PlayVideoIcon className="{{playing ? 'hidden' : ''}}"/>
+  <PlayVideoIcon className={{playing ? 'hidden' : ''}}/>
 </div>
 <style>
  .non-autoplay-gifv {
--- a/routes/_components/NonAutoplayImg.html
+++ b/routes/_components/NonAutoplayImg.html
@ -1,17 +1,17 @@
 {{#if staticSrc === src}}
-  <img class="{{className || ''}}"
-       aria-hidden="{{ariaHidden}}"
-       alt="{{alt || ''}}"
-       title="{{alt || ''}}"
-       src="{{src}}"
+  <img class={{className || ''}}
+       aria-hidden={{ariaHidden}}
+       alt={{alt || ''}}
+       title={{alt || ''}}
+       src={{src}}
       on:imgLoad
       on:imgLoadError />
 {{else}}
  <img class="{{className || ''}} non-autoplay-zoom-in {{isLink ? 'is-link' : ''}}"
-       aria-hidden="{{ariaHidden}}"
-       alt="{{alt || ''}}"
-       title="{{alt || ''}}"
-       src="{{staticSrc}}"
+       aria-hidden={{ariaHidden}}
+       alt={{alt || ''}}
+       title={{alt || ''}}
+       src={{staticSrc}}
       on:imgLoad
       on:imgLoadError
       on:mouseover="onMouseOver(event)"
--- a/routes/_components/TimelineHomePage.html
+++ b/routes/_components/TimelineHomePage.html
@ -3,12 +3,12 @@
     without a div wrapper due to sticky-positioned compose button.
     TODO: this is a bit hacky due to code duplication
 -->
-<div class="timeline-home-page" aria-busy="{{hideTimeline}}">
+<div class="timeline-home-page" aria-busy={{hideTimeline}}>
  {{#if hidePage}}
    <LoadingPage />
  {{/if}}
  {{#if $currentVerifyCredentials }}
-    <ComposeBox realm="home" hidden="{{hidePage}}"/>
+    <ComposeBox realm="home" hidden={{hidePage}}/>
  {{/if}}
  <div class="timeline-home-anchor-container">
    {{#if !hidePage && hideTimeline}}
--- a/routes/_components/TimelinePage.html
+++ b/routes/_components/TimelinePage.html
@ -1,4 +1,4 @@
-<div class="timeline-page" aria-busy="{{hideTimeline}}">
+<div class="timeline-page" aria-busy={{hideTimeline}}>
  {{#if hidePage}}
    <LoadingPage />
  {{/if}}
--- a/routes/_components/Toast.html
+++ b/routes/_components/Toast.html
@ -1,4 +1,4 @@
-<div class="toast-modal {{shown ? 'shown' : ''}}" role="alert" aria-hidden="{{shown}}">
+<div class="toast-modal {{shown ? 'shown' : ''}}" role="alert" aria-hidden={{shown}}>
  <div class="toast-container">
    {{text}}
  </div>
--- a/routes/_components/community/PageList.html
+++ b/routes/_components/community/PageList.html
@ -1,6 +1,6 @@
 <div class="page-list-wrapper">
  {{#if label}}
-  <ul class="page-list" aria-label="{{label}}">
+  <ul class="page-list" aria-label={{label}}>
    <slot></slot>
  </ul>
  {{else}}
--- a/routes/_components/community/PageListItem.html
+++ b/routes/_components/community/PageListItem.html
@ -1,15 +1,15 @@
 <li class="page-list-item">
  <a :href>
    <svg class="page-list-item-svg">
-      <use xlink:href="{{icon}}" />
+      <use xlink:href={{icon}} />
    </svg>
    <span aria-label="{{label}} {{$pinnedPage === href ? 'Pinned page' : 'Unpinned page'}}">
      {{label}}
    </span>
    {{#if pinnable}}
      <IconButton pressable="true"
-                  pressed="{{$pinnedPage === href}}"
-                  label="{{$pinnedPage === href ? 'Unpin timeline' : 'Pin timeline'}}"
+                  pressed={{$pinnedPage === href}}
+                  label={{$pinnedPage === href ? 'Unpin timeline' : 'Pin timeline'}}
                  href="#fa-thumb-tack"
                  on:click="onPinClick(event)" />
    {{/if}}
--- a/routes/_components/compose/ComposeAuthor.html
+++ b/routes/_components/compose/ComposeAuthor.html
@ -1,7 +1,7 @@
 <a href="/accounts/{{verifyCredentials.id}}"
   class="compose-box-avatar"
   aria-label="Profile for {{verifyCredentials.display_name || verifyCredentials.acct}}">
-  <Avatar account="{{verifyCredentials}}" size="small"/>
+  <Avatar account={{verifyCredentials}} size="small"/>
 </a>
 <a class="compose-box-display-name" href="/accounts/{{verifyCredentials.id}}">
  {{verifyCredentials.display_name || verifyCredentials.acct}}
--- a/routes/_components/compose/ComposeAutosuggest.html
+++ b/routes/_components/compose/ComposeAutosuggest.html
@ -1,7 +1,7 @@
 <div class="compose-autosuggest {{shown ? 'shown' : ''}} {{realm === 'dialog' ? 'is-dialog' : ''}}"
       aria-hidden="true" >
  <ComposeAutosuggestionList
-    items="{{searchResults}}"
+    items={{searchResults}}
    on:click="onClick(event)"
    :type
    :selected
--- a/routes/_components/compose/ComposeAutosuggestionList.html
+++ b/routes/_components/compose/ComposeAutosuggestionList.html
@ -9,7 +9,7 @@
        <Avatar
          className="compose-autosuggest-list-item-avatar"
          size="small"
-          account="{{item}}"
+          account={{item}}
        />
        <span class="compose-autosuggest-list-display-name">
            {{item.display_name || item.acct}}
@ -18,7 +18,7 @@
            {{'@' + item.acct}}
        </span>
        {{else}}
-          <img src="{{$autoplayGifs ? item.url : item.static_url}}"
+          <img src={{$autoplayGifs ? item.url : item.static_url}}
               class="compose-autosuggest-list-item-icon"
               alt="{{':' + item.shortcode + ':'}}"
          />
--- a/routes/_components/compose/ComposeButton.html
+++ b/routes/_components/compose/ComposeButton.html
@ -1,9 +1,9 @@
 <div class="compose-box-button-halo">
  <button class="primary compose-box-button"
          :disabled
-          aria-label="{{sticky ? 'Compose' : 'Toot!'}}"
+          aria-label={{sticky ? 'Compose' : 'Toot!'}}
          on:click>
-    <span class="{{$postingStatus || sticky ? 'hidden' : ''}}">
+    <span class={{$postingStatus || sticky ? 'hidden' : ''}}>
      Toot!
    </span>
    <div class="compose-box-button-spinner"
--- a/routes/_components/compose/ComposeLengthIndicator.html
+++ b/routes/_components/compose/ComposeLengthIndicator.html
@ -1,5 +1,5 @@
 <span class="compose-box-length {{overLimit ? 'over-char-limit' : ''}}"
-      aria-label="{{lengthLabel}}">
+      aria-label={{lengthLabel}}>
      {{lengthToDisplayDeferred || '0'}}
    </span>
 <style>
--- a/routes/_components/compose/ComposeMediaItem.html
+++ b/routes/_components/compose/ComposeMediaItem.html
@ -1,5 +1,5 @@
 <div class="compose-media">
-  <img src="{{mediaItem.data.preview_url}}" alt="{{mediaItem.file.name}}"/>
+  <img src={{mediaItem.data.preview_url}} alt={{mediaItem.file.name}}/>
  <div class="compose-media-delete">
    <button class="compose-media-delete-button"
            aria-label="Delete {{mediaItem.file.name}}"
--- a/routes/_components/compose/ComposeToolbar.html
+++ b/routes/_components/compose/ComposeToolbar.html
@ -6,23 +6,23 @@
      on:click="onEmojiClick()"
    />
    <IconButton
-      svgClassName="{{$uploadingMedia ? 'spin' : ''}}"
+      svgClassName={{$uploadingMedia ? 'spin' : ''}}
      label="Add media"
-      href="{{$uploadingMedia ? '#fa-spinner' : '#fa-camera'}}"
+      href={{$uploadingMedia ? '#fa-spinner' : '#fa-camera'}}
      on:click="onMediaClick()"
-      disabled="{{$uploadingMedia || (media.length === 4)}}"
+      disabled={{$uploadingMedia || (media.length === 4)}}
    />
    <IconButton
      label="Adjust privacy (currently {{postPrivacy.label}})"
-      href="{{postPrivacy.icon}}"
+      href={{postPrivacy.icon}}
      on:click="onPostPrivacyClick()"
    />
    <IconButton
-      label="{{contentWarningShown ? 'Remove content warning' : 'Add content warning'}}"
+      label={{contentWarningShown ? 'Remove content warning' : 'Add content warning'}}
      href="#fa-exclamation-triangle"
      on:click="onContentWarningClick()"
      pressable="true"
-      pressed="{{contentWarningShown}}"
+      pressed={{contentWarningShown}}
    />
  </div>
  <input ref:input
--- a/routes/_components/dialog/components/EmojiDialog.html
+++ b/routes/_components/dialog/components/EmojiDialog.html
@ -10,7 +10,7 @@
        {{#each emojis as emoji}}
          <li class="custom-emoji">
            <button type="button" on:click="onClickEmoji(emoji)">
-              <img src="{{$autoplayGifs ? emoji.url : emoji.static_url}}"
+              <img src={{$autoplayGifs ? emoji.url : emoji.static_url}}
                   alt=":{{emoji.shortcode}}:"
                   title=":{{emoji.shortcode}}:"
              />
--- a/routes/_components/dialog/components/GenericDialogList.html
+++ b/routes/_components/dialog/components/GenericDialogList.html
@ -3,12 +3,12 @@
  <li class="generic-dialog-list-item">
    <button class="generic-dialog-list-button" on:click="fire('click', item)">
      <svg class="generic-dialog-list-item-svg">
-        <use xlink:href="{{item.icon}}" />
+        <use xlink:href={{item.icon}} />
      </svg>
      <span>
            {{item.label}}
          </span>
-      <svg class="generic-dialog-list-item-svg {{item.selected ? '' : 'hidden'}}" aria-hidden="{{!item.selected}}">
+      <svg class="generic-dialog-list-item-svg {{item.selected ? '' : 'hidden'}}" aria-hidden={{!item.selected}}>
        <use xlink:href="#fa-check" />
      </svg>
    </button>
--- a/routes/_components/dialog/components/ImageDialog.html
+++ b/routes/_components/dialog/components/ImageDialog.html
@ -15,11 +15,11 @@
    />
  {{else}}
    <img
-      src="{{src}}"
-      width="{{width}}"
-      height="{{height}}"
-      alt="{{description || ''}}"
-      title="{{description || ''}}"
+      src={{src}}
+      width={{width}}
+      height={{height}}
+      alt={{description || ''}}
+      title={{description || ''}}
    />
  {{/if}}
 </ModalDialog>
--- a/routes/_components/dialog/components/ModalDialog.html
+++ b/routes/_components/dialog/components/ModalDialog.html
@ -1,10 +1,10 @@
-<div class="{{backdropClass}}"
+<div class={{backdropClass}}
     tabindex="-1"
     data-a11y-dialog-hide
 ></div>
-<div class="{{contentsClass}}"
+<div class={{contentsClass}}
     role="dialog"
-     aria-label="{{label || ''}}"
+     aria-label={{label || ''}}
     ref:node
 >
  <div class="modal-dialog-document" role="document" style="background: {{background || '#000'}};">
--- a/routes/_components/profile/AccountProfileDetails.html
+++ b/routes/_components/profile/AccountProfileDetails.html
@ -9,7 +9,7 @@
  </div>
  <a class="account-profile-details-item"
     href='/accounts/{{account.id}}/follows'
-     aria-label="{{followingLabel}}"
+     aria-label={{followingLabel}}
  >
    <span class="account-profile-details-item-title">
      Follows
@ -20,7 +20,7 @@
  </a>
  <a class="account-profile-details-item"
     href='/accounts/{{account.id}}/followers'
-     aria-label="{{followersLabel}}"
+     aria-label={{followersLabel}}
  >
    <span class="account-profile-details-item-title">
      Followers
--- a/routes/_components/profile/AccountProfileFollow.html
+++ b/routes/_components/profile/AccountProfileFollow.html
@ -1,9 +1,9 @@
 <div class="account-profile-follow {{shown ? 'shown' : ''}}">
  <IconButton
-    label="{{followLabel}}"
-    href="{{followIcon}}"
+    label={{followLabel}}
+    href={{followIcon}}
    pressable="true"
-    pressed="{{following}}"
+    pressed={{following}}
    big="true"
    on:click="onFollowButtonClick(event)"
    ref:icon
--- a/routes/_components/profile/AccountProfileHeader.html
+++ b/routes/_components/profile/AccountProfileHeader.html
@ -2,7 +2,7 @@
  <Avatar :account size="big" />
 </div>
 <div class="account-profile-name">
-  <ExternalLink href="{{account.url}}"
+  <ExternalLink href={{account.url}}
                showIcon="true"
                normalIconColor="true"
                ariaLabel="{{account.display_name || account.acct}} (opens in new window)"
--- a/routes/_components/pseudoVirtualList/PseudoVirtualList.html
+++ b/routes/_components/pseudoVirtualList/PseudoVirtualList.html
@ -1,15 +1,15 @@
 <div class="pseudo-virtual-list" on:initialized ref:node>
  {{#each wrappedItems as wrappedItem, i @item}}
    <PseudoVirtualListLazyItem
-      component="{{component}}"
-      index="{{i}}"
-      length="{{wrappedItems.length}}"
-      makeProps="{{makeProps}}"
-      key="{{wrappedItem.item}}"
-      intersectionObserver="{{intersectionObserver}}"
-      isIntersecting="{{isIntersecting(wrappedItem.item, $intersectionStates)}}"
-      isCached="{{isCached(wrappedItem.item, $intersectionStates)}}"
-      height="{{getHeight(wrappedItem.item, $intersectionStates)}}"
+      component={{component}}
+      index={{i}}
+      length={{wrappedItems.length}}
+      makeProps={{makeProps}}
+      key={{wrappedItem.item}}
+      intersectionObserver={{intersectionObserver}}
+      isIntersecting={{isIntersecting(wrappedItem.item, $intersectionStates)}}
+      isCached={{isCached(wrappedItem.item, $intersectionStates)}}
+      height={{getHeight(wrappedItem.item, $intersectionStates)}}
    />
  {{/each}}
 </div>
--- a/routes/_components/pseudoVirtualList/PseudoVirtualListItem.html
+++ b/routes/_components/pseudoVirtualList/PseudoVirtualListItem.html
@ -1,13 +1,13 @@
 <div class="pseudo-virtual-list-item"
-     aria-hidden="{{hide}}"
-     pseudo-virtual-list-key="{{key}}"
+     aria-hidden={{hide}}
+     pseudo-virtual-list-key={{key}}
     style="height: {{shouldHide ? `${height}px` : ''}};"
     ref:node>
  {{#if !shouldHide}}
    <:Component {component}
-                virtualProps="{{props}}"
-                virtualIndex="{{index}}"
-                virtualLength="{{length}}"
+                virtualProps={{props}}
+                virtualIndex={{index}}
+                virtualLength={{length}}
    />
  {{/if}}
 </div>
--- a/routes/_components/search/AccountSearchResult.html
+++ b/routes/_components/search/AccountSearchResult.html
@ -11,9 +11,9 @@
      <div class="search-result-account-buttons">
        {{#each actions as action}}
          <IconButton
-            label="{{action.label}}"
+            label={{action.label}}
            on:click="onButtonClick(event, action, account.id)"
-            href="{{action.icon}}"
+            href={{action.icon}}
            big="true"
          />
        {{/each}}
--- a/routes/_components/search/Search.html
+++ b/routes/_components/search/Search.html
@ -7,7 +7,7 @@
           required
           bind:value="$queryInSearch">
  </div>
-  <button type="submit" class="primary search-button" aria-label="Search" disabled="{{$searchLoading}}">
+  <button type="submit" class="primary search-button" aria-label="Search" disabled={{$searchLoading}}>
    <svg class="search-button-svg">
      <use xlink:href="#fa-search" />
    </svg>
--- a/routes/_components/search/SearchResult.html
+++ b/routes/_components/search/SearchResult.html
@ -1,5 +1,5 @@
 <li class="search-result">
-  <a href="{{href}}" class="search-result-anchor">
+  <a href={{href}} class="search-result-anchor">
    <slot></slot>
  </a>
 </li>
--- a/routes/_components/search/SearchResults.html
+++ b/routes/_components/search/SearchResults.html
@ -6,7 +6,7 @@
    <AccountSearchResult :account />
  {{/each}}
  {{#each $searchResults.statuses as status, index}}
-  <StatusSearchResult :status :index length="{{$searchResults.statuses.length}}"/>
+  <StatusSearchResult :status :index length={{$searchResults.statuses.length}}/>
  {{/each}}
 </ul>
 <style>
--- a/routes/_components/search/StatusSearchResult.html
+++ b/routes/_components/search/StatusSearchResult.html
@ -1,7 +1,7 @@
 <SearchResult href="/statuses/{{status.id}}">
  <Status :index :length
          timelineType="search" timelineValue="search"
-          status="{{status}}" />
+          status={{status}} />
 </SearchResult>
 <style>
 </style>
--- a/routes/_components/settings/SettingsList.html
+++ b/routes/_components/settings/SettingsList.html
@ -1,6 +1,6 @@
 <div class="settings-list-wrapper">
  {{#if label}}
-  <ul class="settings-list" aria-label="{{label}}">
+  <ul class="settings-list" aria-label={{label}}>
    <slot></slot>
  </ul>
  {{else}}
--- a/routes/_components/settings/SettingsListItem.html
+++ b/routes/_components/settings/SettingsListItem.html
@ -2,15 +2,15 @@
  <a :href>
    {{#if icon}}
    <svg class="settings-list-item-svg">
-      <use xlink:href="{{icon}}" />
+      <use xlink:href={{icon}} />
    </svg>
    {{/if}}
    {{#if ariaLabel}}
-    <span aria-label="{{ariaLabel}}" class="{{offsetForIcon ? 'offset-for-icon' : ''}}">
+    <span aria-label={{ariaLabel}} class={{offsetForIcon ? 'offset-for-icon' : ''}}>
      {{label}}
    </span>
    {{else}}
-    <span class="{{offsetForIcon ? 'offset-for-icon' : ''}}">
+    <span class={{offsetForIcon ? 'offset-for-icon' : ''}}>
      {{label}}
    </span>
    {{/if}}
--- a/routes/_components/settings/SettingsNav.html
+++ b/routes/_components/settings/SettingsNav.html
@ -2,11 +2,11 @@
  <ul>
    {{#each navItems as navItem}}
    <li>
-      <SettingsNavItem :page name="{{navItem.name}}" href="{{navItem.href}}" label="{{navItem.label}}" />
+      <SettingsNavItem :page name={{navItem.name}} href={{navItem.href}} label={{navItem.label}} />
    </li>
    {{/each}}
    <li>
-      <SettingsNavItem :page name="{{page}}" href="/{{page}}" :label />
+      <SettingsNavItem :page name={{page}} href="/{{page}}" :label />
    </li>
  </ul>
 </nav>
--- a/routes/_components/settings/SettingsNavItem.html
+++ b/routes/_components/settings/SettingsNavItem.html
@ -1,4 +1,7 @@
-<a class='settings-nav-item {{getCurrentClass(page, name)}}' aria-label='{{getAriaLabel(page, name, label)}}' href='{{href}}'>
+<a class="settings-nav-item {{getCurrentClass(page, name)}}"
+   aria-label={{getAriaLabel(page, name, label)}}
+   :href
+>
  {{label}}
 </a>
 <style>
--- a/routes/_components/status/Media.html
+++ b/routes/_components/status/Media.html
@ -2,59 +2,59 @@
  <button type="button"
          class="play-video-button"
          aria-label="Play video: {{description}}"
-          delegate-key="{{delegateKey}}"
+          delegate-key={{delegateKey}}
          style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;">
    <PlayVideoIcon />
    <LazyImage
-      alt="{{description}}"
-      title="{{description}}"
-      src="{{previewUrl}}"
-      fallback="{{oneTransparentPixel}}"
-      width="{{inlineWidth}}"
-      height="{{inlineHeight}}"
+      alt={{description}}
+      title={{description}}
+      src={{previewUrl}}
+      fallback={{oneTransparentPixel}}
+      width={{inlineWidth}}
+      height={{inlineHeight}}
      background="var(--loading-bg)"
-      className="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
+      className={{noNativeWidthHeight ? 'no-native-width-height' : ''}}
    />
  </button>
 {{else}}
  <button type="button"
          class="show-image-button"
          aria-label="Show image: {{description}}"
-          title="{{description}}"
-          delegate-key="{{delegateKey}}"
+          title={{description}}
+          delegate-key={{delegateKey}}
          on:mouseover="set({mouseover: event})"
          style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;"
  >
  {{#if type === 'gifv' && $autoplayGifs}}
    <AutoplayVideo
-      className="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
+      className={{noNativeWidthHeight ? 'no-native-width-height' : ''}}
      ariaLabel="Animated GIF: {{description}}"
-      poster="{{previewUrl}}"
-      src="{{url}}"
-      width="{{inlineWidth}}"
-      height="{{inlineHeight}}"
+      poster={{previewUrl}}
+      src={{url}}
+      width={{inlineWidth}}
+      height={{inlineHeight}}
    />
  {{elseif type === 'gifv' && !$autoplayGifs}}
    <NonAutoplayGifv
-      class="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
+      class={{noNativeWidthHeight ? 'no-native-width-height' : ''}}
      label="Animated GIF: {{description}}"
-      poster="{{previewUrl}}"
-      src="{{url}}"
-      staticSrc="{{previewUrl}}"
-      width="{{inlineWidth}}"
-      height="{{inlineHeight}}"
-      playing="{{mouseover}}"
+      poster={{previewUrl}}
+      src={{url}}
+      staticSrc={{previewUrl}}
+      width={{inlineWidth}}
+      height={{inlineHeight}}
+      playing={{mouseover}}
    />
  {{else}}
    <LazyImage
-      alt="{{description}}"
-      title="{{description}}"
-      src="{{previewUrl}}"
-      fallback="{{oneTransparentPixel}}"
-      width="{{inlineWidth}}"
-      height="{{inlineHeight}}"
+      alt={{description}}
+      title={{description}}
+      src={{previewUrl}}
+      fallback={{oneTransparentPixel}}
+      width={{inlineWidth}}
+      height={{inlineHeight}}
      background="var(--loading-bg)"
-      className="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
+      className={{noNativeWidthHeight ? 'no-native-width-height' : ''}}
    />
  {{/if}}
 </button>
--- a/routes/_components/status/Notification.html
+++ b/routes/_components/status/Notification.html
@ -1,13 +1,13 @@
 {{#if notification.type === 'mention' || notification.type === 'reblog' || notification.type === 'favourite'}}
  <Status :index :length :timelineType :timelineValue :focusSelector
-          status="{{notification.status}}"
+          status={{notification.status}}
          :notification
          on:recalculateHeight
  />
 {{else}}
  <article class="notification-article"
           tabindex="0"
-           aria-posinset="{{index}}" aria-setsize="{{length}}" >
+           aria-posinset={{index}} aria-setsize={{length}} >
    <StatusHeader :notification :notificationId :status :statusId :timelineType
                  :account :accountId :uuid isStatusInNotification="true" />
  </article>
--- a/routes/_components/status/Status.html
+++ b/routes/_components/status/Status.html
@ -1,10 +1,10 @@
-<article class="{{className}}"
+<article class={{className}}
         tabindex="0"
-         delegate-key="{{delegateKey}}"
-         focus-key="{{delegateKey}}"
-         aria-posinset="{{index}}"
-         aria-setsize="{{length}}"
-         aria-label="{{ariaLabel}}"
+         delegate-key={{delegateKey}}
+         focus-key={{delegateKey}}
+         aria-posinset={{index}}
+         aria-setsize={{length}}
+         aria-label={{ariaLabel}}
         on:recalculateHeight>
  {{#if showHeader}}
    <StatusHeader {{...params}} />
@ -19,7 +19,7 @@
    <StatusSpoiler {{...params}} on:recalculateHeight />
  {{/if}}
  {{#if showContent || contentPreloaded}}
-    <StatusContent {{...params}} shown="{{showContent}}"/>
+    <StatusContent {{...params}} shown={{showContent}}/>
  {{/if}}
  {{#if showMedia }}
    <StatusMediaAttachments {{...params}} on:recalculateHeight />
--- a/routes/_components/status/StatusAuthorName.html
+++ b/routes/_components/status/StatusAuthorName.html
@ -1,7 +1,7 @@
 <a class="status-author-name {{isStatusInNotification ? 'status-in-notification' : '' }} {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}"
   href="/accounts/{{originalAccountId}}"
   title="{{'@' + originalAccount.acct}}"
-   focus-key="{{focusKey}}"
+   focus-key={{focusKey}}
 >
  {{originalAccount.display_name || originalAccount.username}}
 </a>
--- a/routes/_components/status/StatusComposeBox.html
+++ b/routes/_components/status/StatusComposeBox.html
@ -1,12 +1,12 @@
 <div class="status-article-compose-box">
-  <ComposeBox realm="{{originalStatusId}}"
+  <ComposeBox realm={{originalStatusId}}
              size="slim"
              autoFocus="true"
              hideBottomBorder="true"
              isReply="true"
-              replyVisibility="{{visibility}}"
-              replySpoiler="{{spoilerText}}"
-              inReplyToUuid="{{uuid}}"
+              replyVisibility={{visibility}}
+              replySpoiler={{spoilerText}}
+              inReplyToUuid={{uuid}}
  />
 </div>
 <style>
--- a/routes/_components/status/StatusContent.html
+++ b/routes/_components/status/StatusContent.html
@ -1,4 +1,4 @@
-<div class="{{computedClass}}" ref:node>
+<div class={{computedClass}} ref:node>
    {{{massagedContent}}}
 </div>
 <style>
--- a/routes/_components/status/StatusDetails.html
+++ b/routes/_components/status/StatusDetails.html
@ -1,14 +1,14 @@
 <div class="status-details">
  <ExternalLink className="status-absolute-date"
-                href="{{originalStatus.url}}"
+                href={{originalStatus.url}}
                showIcon="true"
                ariaLabel="{{formattedDate}} (opens in new window)"
  >
-    <time datetime={{createdAtDate}} title="{{formattedDate}}">{{formattedDate}}</time>
+    <time datetime={{createdAtDate}} title={{formattedDate}}>{{formattedDate}}</time>
  </ExternalLink>
  <a class="status-favs-reblogs"
     href="/statuses/{{originalStatusId}}/reblogs"
-     aria-label="{{reblogsLabel}}">
+     aria-label={{reblogsLabel}}>
    <svg class="status-favs-reblogs-svg">
      <use xlink:href="#fa-retweet"/>
    </svg>
@ -16,7 +16,7 @@
  </a>
  <a class="status-favs-reblogs"
     href="/statuses/{{originalStatusId}}/favorites"
-     aria-label="{{favoritesLabel}}">
+     aria-label={{favoritesLabel}}>
    <svg class="status-favs-reblogs-svg">
      <use xlink:href="#fa-star" />
    </svg>
--- a/routes/_components/status/StatusHeader.html
+++ b/routes/_components/status/StatusHeader.html
@ -3,7 +3,7 @@
    <Avatar :account size="extra-small"/>
  </div>
  <svg class="status-header-svg">
-    <use xlink:href="{{icon}}"/>
+    <use xlink:href={{icon}}/>
  </svg>
  <span class="status-header-span">
    {{#if timelineType === 'pinned'}}
@ -12,7 +12,7 @@
      <a href="/accounts/{{accountId}}"
         class="status-header-a"
         title="{{'@' + account.acct}}"
-         focus-key="{{focusKey}}" >
+         focus-key={{focusKey}} >
        {{account.display_name || account.username}}
      </a>
      {{#if notification && notification.type === 'reblog'}}
--- a/routes/_components/status/StatusMediaAttachments.html
+++ b/routes/_components/status/StatusMediaAttachments.html
@ -5,7 +5,7 @@
  <button type="button"
          class="status-sensitive-media-button"
          aria-label="Hide sensitive media"
-          delegate-key="{{delegateKey}}" >
+          delegate-key={{delegateKey}} >
    <div class="svg-wrapper">
      <svg class="status-sensitive-media-svg">
        <use xlink:href="#fa-eye-slash" />
@ -17,7 +17,7 @@
    <button type="button"
            class="status-sensitive-media-button"
            aria-label="Show sensitive media"
-            delegate-key="{{delegateKey}}" >
+            delegate-key={{delegateKey}} >

      <div class="status-sensitive-media-warning">
        <span>Sensitive content. Click to show.</span>
--- a/routes/_components/status/StatusRelativeDate.html
+++ b/routes/_components/status/StatusRelativeDate.html
@ -1,8 +1,8 @@
 <a class="status-relative-date {{isStatusInNotification ? 'status-in-notification' : '' }}"
   href="/statuses/{{originalStatusId}}"
-   focus-key="{{focusKey}}"
+   focus-key={{focusKey}}
 >
-  <time datetime={{createdAtDate}} title="{{relativeDate}}"
+  <time datetime={{createdAtDate}} title={{relativeDate}}
        aria-label="{{relativeDate}} – click to show thread">
    {{relativeDate}}
  </time>
--- a/routes/_components/status/StatusSidebar.html
+++ b/routes/_components/status/StatusSidebar.html
@ -1,6 +1,6 @@
 <a class="status-sidebar size-{{size}}"
   href="/accounts/{{originalAccountId}}"
-   focus-key="{{focusKey}}"
+   focus-key={{focusKey}}
   aria-hidden="true"
 >
  <Avatar account={{originalAccount}}
--- a/routes/_components/status/StatusSpoiler.html
+++ b/routes/_components/status/StatusSpoiler.html
@ -2,7 +2,7 @@
  <p>{{{massagedSpoilerText}}}</p>
 </div>
 <div class="status-spoiler-button {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
-  <button type="button" delegate-key="{{delegateKey}}">
+  <button type="button" delegate-key={{delegateKey}}>
    {{spoilerShown ? 'Show less' : 'Show more'}}
  </button>
 </div>
--- a/routes/_components/status/StatusToolbar.html
+++ b/routes/_components/status/StatusToolbar.html
@ -1,34 +1,34 @@
 <div class="status-toolbar {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}" ref:node>
  <IconButton
    className="status-toolbar-reply-button"
-    label="{{replyLabel}}"
+    label={{replyLabel}}
    pressable="true"
-    pressed="{{replyShown}}"
+    pressed={{replyShown}}
    href="#fa-reply"
-    delegateKey="{{replyKey}}"
-    focusKey="{{replyKey}}"
+    delegateKey={{replyKey}}
+    focusKey={{replyKey}}
    />
  <IconButton
-    label="{{reblogLabel}}"
-    pressable="{{!reblogDisabled}}"
-    pressed="{{reblogged}}"
-    disabled="{{reblogDisabled}}"
-    href="{{reblogIcon}}"
-    delegateKey="{{reblogKey}}"
+    label={{reblogLabel}}
+    pressable={{!reblogDisabled}}
+    pressed={{reblogged}}
+    disabled={{reblogDisabled}}
+    href={{reblogIcon}}
+    delegateKey={{reblogKey}}
    ref:reblogIcon
  />
  <IconButton
    label="Favorite"
    pressable="true"
-    pressed="{{favorited}}"
+    pressed={{favorited}}
    href="#fa-star"
-    delegateKey="{{favoriteKey}}"
+    delegateKey={{favoriteKey}}
    ref:favoriteIcon
  />
  <IconButton
    label="Show more options"
    href="#fa-ellipsis-h"
-    delegateKey="{{optionsKey}}"
+    delegateKey={{optionsKey}}
  />
 </div>
 <style>
--- a/routes/_components/timeline/MoreHeaderVirtualWrapper.html
+++ b/routes/_components/timeline/MoreHeaderVirtualWrapper.html
@ -1,5 +1,5 @@
-<MoreHeader count="{{virtualProps.count}}"
-            onClick="{{virtualProps.onClick}}"
+<MoreHeader count={{virtualProps.count}}
+            onClick={{virtualProps.onClick}}
 />
 <script>
  import MoreHeader from './MoreHeader.html'
--- a/routes/_components/timeline/NotificationVirtualListItem.html
+++ b/routes/_components/timeline/NotificationVirtualListItem.html
@ -1,10 +1,10 @@
 <Notification
-  notification="{{virtualProps.notification}}"
-  timelineType="{{virtualProps.timelineType}}"
-  timelineValue="{{virtualProps.timelineValue}}"
-  focusSelector="{{virtualProps.focusSelector}}"
-  index="{{virtualIndex}}"
-  length="{{virtualLength}}"
+  notification={{virtualProps.notification}}
+  timelineType={{virtualProps.timelineType}}
+  timelineValue={{virtualProps.timelineValue}}
+  focusSelector={{virtualProps.focusSelector}}
+  index={{virtualIndex}}
+  length={{virtualLength}}
  on:recalculateHeight />
 <script>
  import Notification from '../status/Notification.html'
--- a/routes/_components/timeline/PinnedStatuses.html
+++ b/routes/_components/timeline/PinnedStatuses.html
@ -2,9 +2,9 @@
  {{#each pinnedStatuses as status, index @id}}
    <Status :status
            timelineType="pinned"
-            timelineValue="{{accountId}}"
+            timelineValue={{accountId}}
            :index
-            length="{{pinnedStatuses.length}}"
+            length={{pinnedStatuses.length}}
    />
  {{/each}}
 </div>
--- a/routes/_components/timeline/StatusVirtualListItem.html
+++ b/routes/_components/timeline/StatusVirtualListItem.html
@ -1,9 +1,9 @@
-<Status status="{{virtualProps.status}}"
-        timelineType="{{virtualProps.timelineType}}"
-        timelineValue="{{virtualProps.timelineValue}}"
-        focusSelector="{{virtualProps.focusSelector}}"
-        index="{{virtualIndex}}"
-        length="{{virtualLength}}"
+<Status status={{virtualProps.status}}
+        timelineType={{virtualProps.timelineType}}
+        timelineValue={{virtualProps.timelineValue}}
+        focusSelector={{virtualProps.focusSelector}}
+        index={{virtualIndex}}
+        length={{virtualLength}}
        on:recalculateHeight />
 <script>
  import Status from '../status/Status.html'
--- a/routes/_components/timeline/Timeline.html
+++ b/routes/_components/timeline/Timeline.html
@ -7,15 +7,15 @@
  {{#await componentsPromise}}
  {{then result}}
    <:Component {result.listComponent}
-                component="{{result.listItemComponent}}"
+                component={{result.listItemComponent}}
                realm="{{$currentInstance + '/' + timeline}}"
                containerQuery=".container"
                :makeProps
-                items="{{$timelineItemIds}}"
-                showFooter="{{$timelineInitialized && $runningUpdate}}"
-                footerComponent="{{LoadingFooter}}"
-                showHeader="{{$showHeader}}"
-                headerComponent="{{MoreHeaderVirtualWrapper}}"
+                items={{$timelineItemIds}}
+                showFooter={{$timelineInitialized && $runningUpdate}}
+                footerComponent={{LoadingFooter}}
+                showHeader={{$showHeader}}
+                headerComponent={{MoreHeaderVirtualWrapper}}
                :headerProps
                :scrollToItem
                on:scrollToBottom="onScrollToBottom()"
--- a/routes/_components/virtualList/VirtualList.html
+++ b/routes/_components/virtualList/VirtualList.html
@ -2,19 +2,19 @@
  <div class="virtual-list"
       style="height: {{$height}}px;"
       ref:node >
-    <VirtualListHeader component="{{headerComponent}}" virtualProps="{{headerProps}}" shown="{{$showHeader}}"/>
+    <VirtualListHeader component={{headerComponent}} virtualProps={{headerProps}} shown={{$showHeader}}/>
    {{#if $visibleItems}}
      {{#each $visibleItems as visibleItem @key}}
        <VirtualListLazyItem :component
-                             offset="{{visibleItem.offset}}"
-                             makeProps="{{makeProps}}"
-                             key="{{visibleItem.key}}"
-                             index="{{visibleItem.index}}"
+                             offset={{visibleItem.offset}}
+                             makeProps={{makeProps}}
+                             key={{visibleItem.key}}
+                             index={{visibleItem.index}}
        />
      {{/each}}
    {{/if}}
    {{#if $showFooter}}
-      <VirtualListFooter component="{{footerComponent}}" />
+      <VirtualListFooter component={{footerComponent}} />
    {{/if}}
  </div>
 </VirtualListContainer>
--- a/routes/_components/virtualList/VirtualListItem.html
+++ b/routes/_components/virtualList/VirtualListItem.html
@ -1,12 +1,12 @@
 <div class="virtual-list-item {{shown ? 'shown' : ''}}"
-     aria-hidden="{{!shown}}"
-     virtual-list-key="{{key}}"
+     aria-hidden={{!shown}}
+     virtual-list-key={{key}}
     ref:node
     style="transform: translateY({{offset}}px);" >
  <:Component {component}
-              virtualProps="{{props}}"
-              virtualIndex="{{index}}"
-              virtualLength="{{$length}}"
+              virtualProps={{props}}
+              virtualIndex={{index}}
+              virtualLength={{$length}}
              on:recalculateHeight="doRecalculateHeight()"/>
 </div>
 <style>
--- a/routes/_pages/accounts/[accountId].html
+++ b/routes/_pages/accounts/[accountId].html
@ -2,12 +2,12 @@
  <TimelinePage timeline="account/{{params.accountId}}">
    <DynamicPageBanner title="" />
    {{#if $currentAccountProfile && $currentVerifyCredentials}}
-    <AccountProfile account="{{$currentAccountProfile}}"
-                    relationship="{{$currentAccountRelationship}}"
-                    verifyCredentials="{{$currentVerifyCredentials}}"
+    <AccountProfile account={{$currentAccountProfile}}
+                    relationship={{$currentAccountRelationship}}
+                    verifyCredentials={{$currentVerifyCredentials}}
    />
    {{/if}}
-    <PinnedStatuses accountId="{{params.accountId}}" />
+    <PinnedStatuses accountId={{params.accountId}} />
  </TimelinePage>
 {{else}}
  <HiddenFromSSR>
--- a/routes/_pages/community/index.html
+++ b/routes/_pages/community/index.html
@ -32,7 +32,7 @@
    <PageList label="Lists">
      {{#each $lists as list}}
      <PageListItem href="/lists/{{list.id}}"
-                    label="{{list.title}}"
+                    label={{list.title}}
                    icon="#fa-bars"
                    pinnable="true"
      />
--- a/routes/_pages/lists/[listId].html
+++ b/routes/_pages/lists/[listId].html
@ -1,7 +1,7 @@
 {{#if $isUserLoggedIn}}
  <TimelinePage timeline="list/{{params.listId}}">
    {{#if $pinnedPage !== `/lists/${params.listId}`}}
-      <DynamicPageBanner title="{{listTitle}}" icon="#fa-bars"/>
+      <DynamicPageBanner title={{listTitle}} icon="#fa-bars"/>
    {{/if}}
  </TimelinePage>
 {{else}}
--- a/routes/_pages/pinned.html
+++ b/routes/_pages/pinned.html
@ -5,7 +5,7 @@
  {{elseif statuses && statuses.length}}
  <ul class="pinned-toots-results">
    {{#each statuses as status, index}}
-    <StatusSearchResult :status :index length="{{statuses.length}}" />
+    <StatusSearchResult :status :index length={{statuses.length}} />
    {{/each}}
  </ul>
  {{/if}}
--- a/routes/_pages/settings/instances/[instanceName].html
+++ b/routes/_pages/settings/instances/[instanceName].html
@ -1,12 +1,12 @@
-<SettingsLayout page='settings/instances/{{params.instanceName}}' label="{{params.instanceName}}">
+<SettingsLayout page='settings/instances/{{params.instanceName}}' label={{params.instanceName}}>
  <h1 class="instance-name-h1">{{params.instanceName}}</h1>

  {{#if verifyCredentials}}
    <h2>Logged in as:</h2>
    <div class="acct-current-user">
-      <Avatar account="{{verifyCredentials}}" className="acct-avatar" size="big"/>
+      <Avatar account={{verifyCredentials}} className="acct-avatar" size="big"/>
      <ExternalLink className="acct-handle"
-                    href="{{verifyCredentials.url}}">
+                    href={{verifyCredentials.url}}>
        {{'@' + verifyCredentials.acct}}
      </ExternalLink>
      <span class="acct-display-name">{{verifyCredentials.display_name || verifyCredentials.acct}}</span>
@ -16,7 +16,7 @@
      {{#each themes as theme}}
        <div class="theme-group">
          <input type="radio" id="choice-theme-{{theme.name}}"
-                 value="{{theme.name}}" checked="$currentTheme === theme.name"
+                 value={{theme.name}} checked="$currentTheme === theme.name"
                 bind:group="selectedTheme" on:change="onThemeChange()">
          <label for="choice-theme-{{theme.name}}">{{theme.label}}</label>
        </div>
--- a/routes/_pages/settings/instances/add.html
+++ b/routes/_pages/settings/instances/add.html
@ -20,7 +20,7 @@
           bind:value='$instanceNameInSearch' placeholder='' required
    >
    <button class="primary" type="submit" id="submitButton"
-            disabled="{{!$instanceNameInSearch || $logInToInstanceLoading}}">
+            disabled={{!$instanceNameInSearch || $logInToInstanceLoading}}>
      Add instance
    </button>
  </form>
--- a/routes/_pages/settings/instances/index.html
+++ b/routes/_pages/settings/instances/index.html
@ -5,10 +5,10 @@
  <p>Instances you've logged in to:</p>
  <SettingsList label="Instances">
    {{#each $loggedInInstancesAsList as instance}}
-      <SettingsListItem offsetForIcon="{{instance.name !== $currentInstance}}"
-                        icon="{{instance.name === $currentInstance ? '#fa-star' : ''}}"
+      <SettingsListItem offsetForIcon={{instance.name !== $currentInstance}}
+                        icon={{instance.name === $currentInstance ? '#fa-star' : ''}}
                        href="/settings/instances/{{instance.name}}"
-                        label="{{instance.name}}"
+                        label={{instance.name}}
                        ariaLabel="{{instance.name}} {{instance.name === $currentInstance ? '(current instance)' : ''}}" />
    {{/each}}
  </SettingsList>