first stab at a profile page

bin/svgs.js

@@ -15,5 +15,7 @@ module.exports = [
   {id:'fa-eye-slash', src:'node_modules/font-awesome-svg-png/white/svg/eye-slash.svg', title: 'Hide Sensitive Content'},
   {id:'fa-hashtag', src:'node_modules/font-awesome-svg-png/white/svg/hashtag.svg', title: 'Hashtag'},
   {id:'fa-lock', src:'node_modules/font-awesome-svg-png/white/svg/lock.svg', title: 'Locked'},
-  {id:'fa-envelope', src:'node_modules/font-awesome-svg-png/white/svg/envelope.svg', title: 'Sealed Envelope'}
+  {id:'fa-envelope', src:'node_modules/font-awesome-svg-png/white/svg/envelope.svg', title: 'Sealed Envelope'},
+  {id:'fa-user-times', src:'node_modules/font-awesome-svg-png/white/svg/user-times.svg', title: 'Stop Following'},
+  {id:'fa-user-plus', src:'node_modules/font-awesome-svg-png/white/svg/user-plus.svg', title: 'Follow'}
 ]

routes/_components/AccountProfile.html

@@ -0,0 +1,127 @@
+<div class="account-profile {{headerIsMissing ? 'header-is-missing' : ''}}" style="background-image: url({{profile.header}});">
+  <div class="account-profile-grid">
+    <div class="account-profile-avatar">
+      <img src="{{profile.avatar}}">
+    </div>
+    <div class="account-profile-name">
+      {{profile.display_name}}
+    </div>
+    <div class="account-profile-following">
+      <span>
+        Follows you
+      </span>
+    </div>
+    <div class="account-profile-follow">
+      <svg>
+        <use xlink:href="#fa-user-plus" />
+      </svg>
+    </div>
+    <div class="account-profile-note">
+      {{{profile.note}}}
+    </div>
+  </div>
+  <div class="account-profile-background"></div>
+</div>
+<style>
+  .account-profile {
+    position: relative;
+    background-size: cover;
+    background-position: center;
+    padding-top: 175px;
+  }
+
+  .account-profile.header-is-missing {
+    padding-top: 0;
+  }
+
+  .account-profile-background {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 5;
+  }
+
+  .account-profile-grid {
+    display: grid;
+    grid-template-areas: "avatar     name        following   follow"
+                         "avatar     note        note        note";
+    grid-template-columns: min-content min-content 1fr min-content;
+    grid-column-gap: 10px;
+    grid-row-gap: 2px;
+    padding: 10px;
+    justify-content: center;
+  }
+
+  @supports (-webkit-backdrop-filter: blur(20px) saturate(130%)) or (backdrop-filter: blur(20px) saturate(130%)) {
+    :global(.account-profile-grid) {
+      -webkit-backdrop-filter: blur(20px) saturate(130%);
+      backdrop-filter: blur(20px) saturate(130%);
+      background-color: rgba(255, 255, 255, 0.5);
+    }
+  }
+
+  @supports not ((-webkit-backdrop-filter: blur(20px) saturate(130%)) or (backdrop-filter: blur(20px) saturate(130%))) {
+    :global(.account-profile-grid) {
+      background-color: rgba(255, 255, 255, 0.9);
+    }
+  }
+
+  .account-profile-following, .account-profile-avatar, .account-profile-follow,
+      .account-profile-name, .account-profile-username, .account-profile-note {
+    z-index: 10;
+  }
+
+  .account-profile-following {
+    grid-area: following;
+    align-self: center;
+    text-transform: uppercase;
+    color: var(--deemphasized-text-color);
+    font-size: 0.8em;
+  }
+  .account-profile-following span {
+    background: rgba(30, 30, 30, 0.2);
+    border-radius: 4px;
+    padding: 3px 5px;
+  }
+  .account-profile-avatar {
+    grid-area: avatar;
+  }
+  .account-profile-avatar img {
+    border-radius: 4px;
+    width: 100px;
+    height: 100px;
+  }
+
+  .account-profile-follow {
+    grid-area: follow;
+    align-self: center;
+  }
+  .account-profile-follow svg {
+    width: 32px;
+    height: 32px;
+    fill: var(--svg-fill);
+  }
+  .account-profile-name {
+    grid-area: name;
+    font-size: 1.5em;
+    align-self: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .account-profile-note {
+    grid-area: note;
+  }
+  :global(.account-profile-note p) {
+    font-size: 1em;
+  }
+</style>
+<script>
+  export default {
+    computed: {
+      headerIsMissing: (profile) => profile.header.endsWith('missing.png')
+    }
+  }
+</script>

routes/accounts/[accountId].html

@@ -11,6 +11,9 @@
         dynamicIcon="#fa-user" >
   {{#if $isUserLoggedIn}}
   <DynamicPageBanner title="{{profileName}}" />
+    {{#if $currentAccountProfile}}
+      <AccountProfile profile="{{$currentAccountProfile}}" />
+    {{/if}}
   <LazyTimeline timeline='account/{{params.accountId}}' />
   {{else}}
   <HiddenFromSSR>
@@ -30,6 +33,7 @@
   import HiddenFromSSR from '../_components/HiddenFromSSR'
   import DynamicPageBanner from '../_components/DynamicPageBanner.html'
   import { showAccountProfile } from './_actions/[accountId]'
+  import AccountProfile from '../_components/AccountProfile.html'
 
   export default {
     oncreate() {
@@ -50,7 +54,8 @@
       LazyTimeline,
       FreeTextLayout,
       HiddenFromSSR,
-      DynamicPageBanner
+      DynamicPageBanner,
+      AccountProfile
     }
   }
 </script>

templates/2xx.html

@@ -81,6 +81,8 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
 <symbol id="fa-hashtag" viewBox="0 0 1792 1792"><title>Hashtag</title><path d="M991 1024l64-256H801l-64 256h254zm768-504l-56 224q-7 24-31 24h-327l-64 256h311q15 0 25 12 10 14 6 28l-56 224q-5 24-31 24h-327l-81 328q-7 24-31 24H873q-16 0-26-12-9-12-6-28l78-312H665l-81 328q-7 24-31 24H328q-15 0-25-12-9-12-6-28l78-312H64q-15 0-25-12-9-12-6-28l56-224q7-24 31-24h327l64-256H200q-15 0-25-12-10-14-6-28l56-224q5-24 31-24h327l81-328q7-24 32-24h224q15 0 25 12 9 12 6 28l-78 312h254l81-328q7-24 32-24h224q15 0 25 12 9 12 6 28l-78 312h311q15 0 25 12 9 12 6 28z"></path></symbol>
 <symbol id="fa-lock" viewBox="0 0 1792 1792"><title>Locked</title><path d="M640 768h512V576q0-106-75-181t-181-75-181 75-75 181v192zm832 96v576q0 40-28 68t-68 28H416q-40 0-68-28t-28-68V864q0-40 28-68t68-28h32V576q0-184 132-316t316-132 316 132 132 316v192h32q40 0 68 28t28 68z"></path></symbol>
 <symbol id="fa-envelope" viewBox="0 0 1792 1792"><title>Sealed Envelope</title><path d="M1792 710v794q0 66-47 113t-113 47H160q-66 0-113-47T0 1504V710q44 49 101 87 362 246 497 345 57 42 92.5 65.5t94.5 48 110 24.5h2q51 0 110-24.5t94.5-48 92.5-65.5q170-123 498-345 57-39 100-87zm0-294q0 79-49 151t-122 123q-376 261-468 325-10 7-42.5 30.5t-54 38-52 32.5-57.5 27-50 9h-2q-23 0-50-9t-57.5-27-52-32.5-54-38T639 1015q-91-64-262-182.5T172 690q-62-42-117-115.5T0 438q0-78 41.5-130T160 256h1472q65 0 112.5 47t47.5 113z"></path></symbol>
+<symbol id="fa-user-times" viewBox="0 0 2048 1792"><title>Stop Following</title><path d="M704 896q-159 0-271.5-112.5T320 512t112.5-271.5T704 128t271.5 112.5T1088 512 975.5 783.5 704 896zm1077 320l249 249q9 9 9 23 0 13-9 22l-136 136q-9 9-22 9-14 0-23-9l-249-249-249 249q-9 9-23 9-13 0-22-9l-136-136q-9-9-9-22 0-14 9-23l249-249-249-249q-9-9-9-23 0-13 9-22l136-136q9-9 22-9 14 0 23 9l249 249 249-249q9-9 23-9 13 0 22 9l136 136q9 9 9 22 0 14-9 23zm-498 0l-181 181q-37 37-37 91 0 53 37 90l83 83q-21 3-44 3H267q-121 0-194-69T0 1405q0-53 3.5-103.5t14-109T44 1084t43-97.5 62-81 85.5-53.5T346 832q19 0 39 17 154 122 319 122t319-122q20-17 39-17 28 0 57 6-28 27-41 50t-13 56q0 54 37 91z"></path></symbol>
+<symbol id="fa-user-plus" viewBox="0 0 2048 1792"><title>Follow</title><path d="M704 896q-159 0-271.5-112.5T320 512t112.5-271.5T704 128t271.5 112.5T1088 512 975.5 783.5 704 896zm960 128h352q13 0 22.5 9.5t9.5 22.5v192q0 13-9.5 22.5t-22.5 9.5h-352v352q0 13-9.5 22.5t-22.5 9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-352h-352q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h352V672q0-13 9.5-22.5t22.5-9.5h192q13 0 22.5 9.5t9.5 22.5v352zm-736 224q0 52 38 90t90 38h256v238q-68 50-171 50H267q-121 0-194-69T0 1405q0-53 3.5-103.5t14-109T44 1084t43-97.5 62-81 85.5-53.5T346 832q19 0 39 17 79 61 154.5 91.5T704 971t164.5-30.5T1023 849q20-17 39-17 132 0 217 96h-223q-52 0-90 38t-38 90v192z"></path></symbol>
 </svg><!-- end insert svg here -->
   </svg>
 	<!-- The application will be rendered inside this element,