back round 0 view raw

appview: improve page load #546

merged

opened by

oppi.li 3 months ago targeting master from push-nlnnyywnokyn

preload main font that is inside css files
preconnect to image CDNs
remove redundant alt text and copy bsky instead
add description tag for SEO

Signed-off-by: oppiliappan me@oppi.li

options

unified split

Changed files

+15 -8

appview

pages

templates

layouts

base.html

timeline

timeline.html

user

fragments

picHandle.html

+13 -6

appview/pages/templates/layouts/base.html

···

       3
        
           <html lang="en" class="dark:bg-gray-900">

     

       4
        
               <head>

     

       5
        
                   <meta charset="UTF-8" />

     

       6
       -
                   <meta

     

       7
       -
                       name="viewport"

     

       8
       -
                       content="width=device-width, initial-scale=1.0"

     

       9
       -
                   />

     

       10
        
                   <meta name="htmx-config" content='{"includeIndicatorStyles": false}'>

     

       11
       -
                   <script src="/static/htmx.min.js"></script>

     

       12
       -
                   <script src="/static/htmx-ext-ws.min.js"></script>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       13
        
                   <link rel="stylesheet" href="/static/tw.css?{{ cssContentHash }}" type="text/css" />

     

       14
        
                   <title>{{ block "title" . }}{{ end }} · tangled</title>

     

       15
        
                   {{ block "extrameta" . }}{{ end }}

···

       3
        
           <html lang="en" class="dark:bg-gray-900">

     

       4
        
               <head>

     

       5
        
                   <meta charset="UTF-8" />

     

       6
       +
                   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

     

       7
       +
                   <meta name="description" content="Social coding, but for real this time!"/>

     

       0
        
       
     

       0
        
       
     

       8
        
                   <meta name="htmx-config" content='{"includeIndicatorStyles": false}'>

     

       9
       +
       

     

       10
       +
                   <script defer src="/static/htmx.min.js"></script>

     

       11
       +
                   <script defer src="/static/htmx-ext-ws.min.js"></script>

     

       12
       +
       

     

       13
       +
                   <!-- preconnect to image cdn -->

     

       14
       +
                   <link rel="preconnect" href="https://avatar.tangled.sh" />

     

       15
       +
                   <link rel="preconnect" href="https://camo.tangled.sh" />

     

       16
       +
       

     

       17
       +
                   <!-- preload main font -->

     

       18
       +
                   <link rel="preload" href="/static/fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin />

     

       19
       +
       

     

       20
        
                   <link rel="stylesheet" href="/static/tw.css?{{ cssContentHash }}" type="text/css" />

     

       21
        
                   <title>{{ block "title" . }}{{ end }} · tangled</title>

     

       22
        
                   {{ block "extrameta" . }}{{ end }}

+1 -1

appview/pages/templates/timeline/timeline.html

···

       158
        
         </div>

     

       159
        
         <div class="py-4 px-6 drop-shadow-sm rounded bg-white dark:bg-gray-800 flex items-center gap-4">

     

       160
        
           <div class="flex-shrink-0 max-h-full w-24 h-24">

     

       161
       -
             <img class="object-cover rounded-full p-2" src="{{ fullAvatar $subjectHandle }}" />

     

       162
        
           </div>

     

       163
        
       

     

       164
        
           <div class="flex-1 min-h-0 justify-around flex flex-col">

···

       158
        
         </div>

     

       159
        
         <div class="py-4 px-6 drop-shadow-sm rounded bg-white dark:bg-gray-800 flex items-center gap-4">

     

       160
        
           <div class="flex-shrink-0 max-h-full w-24 h-24">

     

       161
       +
             <img alt="" class="object-cover rounded-full p-2" src="{{ fullAvatar $subjectHandle }}" />

     

       162
        
           </div>

     

       163
        
       

     

       164
        
           <div class="flex-1 min-h-0 justify-around flex flex-col">

+1 -1

appview/pages/templates/user/fragments/picHandle.html

···

       1
        
       {{ define "user/fragments/picHandle" }}

     

       2
        
       <img

     

       3
        
           src="{{ tinyAvatar . }}"

     

       4
       -
           alt="{{ . }}"

     

       5
        
           class="rounded-full h-6 w-6 mr-1 border border-gray-300 dark:border-gray-700"

     

       6
        
       />

     

       7
        
       {{ . | truncateAt30 }}

···

       1
        
       {{ define "user/fragments/picHandle" }}

     

       2
        
       <img

     

       3
        
           src="{{ tinyAvatar . }}"

     

       4
       +
           alt=""

     

       5
        
           class="rounded-full h-6 w-6 mr-1 border border-gray-300 dark:border-gray-700"

     

       6
        
       />

     

       7
        
       {{ . | truncateAt30 }}