Add image metadata for URL previews

[MadLittleMods]

Add image metadata for URL previews:

• Default to a nice [matrix] banner
  • There is room for improvement here when the Matrix Public Archive gets it's own logo (Add custom favicon #94) and maybe says "Matrix Public Archive" somewhere in the banner.
  • This is good enough for now (and certainly better than downstream previews using the first image on the page).
• For rooms, it will use the room avatar

Part of #202

These changes result in some nice URL previews in Element when you link to the Matrix Public Archive:

Banner image details

Uncompressed (391.6 KB)	Compressed with OxiPNG (233.9 KB)

Image is sized to 1200x630 to match conventions of og:image.

Crafted the banner image by modifying the header on the room directory homepage and taking a node screenshot. Page zoom @ 175%

Room directory header HTML modifications

<header class="RoomDirectoryView_header" style="
    background-size: 102% 166%, 400% 400%;
    background-position: 145% 50%, 0% 50%;
"><form class="RoomDirectoryView_headerForm" method="GET"><a class="RoomDirectoryView_matrixLogo" title="Matrix Public Archive" href="http://192.168.1.222:3050" style="
    max-width: 230px;
"><svg viewBox="0 0 68 29" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M0.764665 0.663852V28.3361H2.75731V29H0V0H2.75731V0.663852H0.764665Z"></path><path d="M8.44181 9.43626V10.8366H8.4817C8.85542 10.3036 9.30555 9.88967 9.83287 9.59623C10.3598 9.30331 10.9639 9.15625 11.6443 9.15625C12.298 9.15625 12.8953 9.28325 13.4357 9.53639C13.9762 9.78997 14.3866 10.2365 14.6668 10.8768C14.9735 10.4234 15.3905 10.0232 15.9178 9.67648C16.4448 9.32992 17.0686 9.15625 17.7893 9.15625C18.3365 9.15625 18.8433 9.22307 19.3107 9.35644C19.7775 9.48981 20.1778 9.70317 20.5115 9.99653C20.8448 10.2901 21.105 10.6736 21.2922 11.1466C21.4789 11.6205 21.5724 12.1903 21.5724 12.8574V19.7787H18.73V13.9174C18.73 13.5708 18.7167 13.2441 18.6899 12.9371C18.663 12.6306 18.5899 12.364 18.4698 12.137C18.3496 11.9104 18.1726 11.7302 17.9394 11.5967C17.7058 11.4639 17.3888 11.3968 16.9886 11.3968C16.5883 11.3968 16.2646 11.474 16.0177 11.6268C15.7707 11.7804 15.5773 11.9806 15.4373 12.227C15.2973 12.474 15.2038 12.754 15.1572 13.0676C15.1102 13.3808 15.0871 13.6977 15.0871 14.0177V19.7788H12.2449V13.9777C12.2449 13.671 12.2379 13.3674 12.2251 13.0676C12.2115 12.7673 12.155 12.4907 12.0547 12.2371C11.9546 11.9839 11.7877 11.7804 11.5542 11.6268C11.3207 11.474 10.9771 11.3968 10.5234 11.3968C10.3898 11.3968 10.213 11.4269 9.99311 11.4871C9.77291 11.5471 9.55926 11.6606 9.35259 11.8271C9.14548 11.9939 8.96887 12.234 8.82208 12.5471C8.67519 12.8607 8.60188 13.2706 8.60188 13.7773V19.7787H5.7598V9.43626H8.44181Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M24.5141 9.89648C24.0603 10.1635 23.6865 10.5167 23.3932 10.9569C23.0992 11.3967 22.9327 11.9505 22.8929 12.6171H25.7351C25.7882 12.0571 25.9754 11.6568 26.2955 11.4168C26.6158 11.1767 27.0562 11.0566 27.6167 11.0566C27.8698 11.0566 28.1069 11.0737 28.3272 11.1066C28.5472 11.1401 28.7407 11.2068 28.9076 11.3068C29.0743 11.4067 29.2078 11.547 29.3079 11.7269C29.408 11.9069 29.4579 12.1505 29.4579 12.457C29.471 12.7506 29.3843 12.974 29.1978 13.1273C29.0107 13.2808 28.7574 13.3973 28.4371 13.4773C28.1169 13.5573 27.7498 13.6174 27.3362 13.6575C26.9225 13.6975 26.5022 13.7509 26.0752 13.8174C25.6481 13.8845 25.2245 13.9743 24.8043 14.0875C24.3838 14.2008 24.0102 14.3709 23.6835 14.5975C23.3561 14.8245 23.0894 15.1277 22.8827 15.508C22.6755 15.8878 22.5722 16.3714 22.5722 16.958C22.5722 17.4913 22.6624 17.9518 22.8426 18.3385C23.0227 18.7252 23.2729 19.0453 23.5932 19.2983C23.9134 19.5521 24.2869 19.7387 24.714 19.8588C25.141 19.9787 25.6013 20.0388 26.0952 20.0388C26.7358 20.0388 27.3629 19.9451 27.9769 19.7589C28.5903 19.5721 29.1243 19.2453 29.578 18.7785C29.5911 18.952 29.6145 19.122 29.6481 19.2885C29.6812 19.4553 29.7247 19.6185 29.7782 19.7787H32.6604C32.5268 19.5654 32.4333 19.2453 32.3803 18.8184C32.3268 18.3916 32.3001 17.9454 32.3001 17.478V12.0971C32.3001 11.4702 32.16 10.9666 31.8798 10.5866C31.5994 10.2067 31.2392 9.90973 30.7989 9.69646C30.3585 9.48335 29.8714 9.33982 29.3377 9.2662C28.8039 9.1931 28.277 9.15625 27.7565 9.15625C27.1827 9.15625 26.6121 9.21316 26.0451 9.32639C25.4778 9.43987 24.9676 9.62981 24.5141 9.89648ZM28.4273 15.118C28.6339 15.0779 28.8275 15.028 29.0076 14.9681C29.1878 14.908 29.3379 14.8247 29.4581 14.7177V15.7781C29.4581 15.9381 29.4412 16.1516 29.4082 16.4182C29.3747 16.6853 29.2845 16.9482 29.1379 17.2081C28.9908 17.4684 28.7642 17.6919 28.4574 17.8784C28.1502 18.0654 27.7167 18.1585 27.1563 18.1585C26.9294 18.1585 26.7092 18.1385 26.4959 18.0984C26.2821 18.0586 26.0954 17.9885 25.9354 17.8885C25.7753 17.7885 25.6483 17.6519 25.5549 17.4782C25.4615 17.3052 25.4149 17.0915 25.4149 16.8384C25.4149 16.5717 25.4615 16.3516 25.5549 16.1782C25.6483 16.0052 25.7717 15.8616 25.9254 15.7482C26.0786 15.6348 26.2588 15.545 26.4659 15.478C26.6725 15.4116 26.8826 15.3578 27.0962 15.3181C27.3229 15.278 27.5497 15.2449 27.7767 15.2179C28.0036 15.1914 28.2203 15.158 28.4273 15.118Z"></path><path d="M39.7861 9.43716V11.3376H37.7046V16.4589C37.7046 16.9388 37.7846 17.259 37.9448 17.4189C38.1047 17.5789 38.4252 17.6589 38.9055 17.6589C39.0657 17.6589 39.2189 17.6524 39.3658 17.639C39.5125 17.6259 39.6527 17.6055 39.7861 17.579V19.7796C39.5459 19.8196 39.2789 19.8461 38.9855 19.8597C38.692 19.8725 38.4051 19.8795 38.1248 19.8795C37.6845 19.8795 37.2674 19.8494 36.8739 19.7893C36.4801 19.7294 36.1332 19.613 35.8331 19.4395C35.5328 19.2663 35.2959 19.0193 35.1225 18.6992C34.9488 18.3794 34.8623 17.9592 34.8623 17.4388V11.3376H33.141V9.43716H34.8623V6.33643H37.7045V9.43716H39.7861Z"></path><path d="M43.8493 9.43643V11.3569H43.8893C44.0225 11.0366 44.2026 10.7402 44.4297 10.4666C44.6566 10.1934 44.9166 9.95985 45.2102 9.76646C45.5035 9.57342 45.8173 9.42334 46.1512 9.31631C46.4844 9.20981 46.8316 9.15625 47.192 9.15625C47.3787 9.15625 47.5853 9.18983 47.8124 9.25639V11.8972C47.6788 11.8703 47.5187 11.8469 47.3321 11.8271C47.1451 11.807 46.9651 11.7969 46.7916 11.7969C46.2711 11.7969 45.8308 11.8839 45.4707 12.0571C45.1104 12.2305 44.8203 12.467 44.6 12.7671C44.3799 13.0674 44.2227 13.4172 44.1294 13.8174C44.0361 14.2174 43.9894 14.6511 43.9894 15.1177V19.7787H41.1473V9.43643H43.8493Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M49.0138 5.49609V7.83662H51.8562V5.49609H49.0138ZM51.8557 19.7797V9.43726H49.0133V19.7797H51.8557Z"></path><path d="M53.3362 9.43604H56.5786L58.4002 12.1366L60.2016 9.43604H63.344L59.9415 14.2772L63.7645 19.7785H60.5219L58.3601 16.5178L56.1983 19.7785H53.0161L56.7388 14.3374L53.3362 9.43604Z"></path><path d="M67.2351 28.3361V0.663852H65.2424V0H67.9999V29H65.2424V28.3361H67.2351Z"></path></svg></a><h3 class="RoomDirectoryView_subHeader" style="
    /* font-size: 17px; */
">Browse thousands of rooms using Matrix...</h3><div class="RoomDirectoryView_search"><svg class="RoomDirectoryView_searchIcon" viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.1333 8.06667C12.1333 10.3126 10.3126 12.1333 8.06667 12.1333C5.82071 12.1333 4 10.3126 4 8.06667C4 5.82071 5.82071 4 8.06667 4C10.3126 4 12.1333 5.82071 12.1333 8.06667ZM12.9992 11.5994C13.7131 10.6044 14.1333 9.38463 14.1333 8.06667C14.1333 4.71614 11.4172 2 8.06667 2C4.71614 2 2 4.71614 2 8.06667C2 11.4172 4.71614 14.1333 8.06667 14.1333C9.38457 14.1333 10.6043 13.7131 11.5992 12.9993C11.6274 13.0369 11.6586 13.0729 11.6928 13.1071L14.2928 15.7071C14.6833 16.0977 15.3165 16.0977 15.707 15.7071C16.0975 15.3166 16.0975 14.6834 15.707 14.2929L13.107 11.6929C13.0728 11.6587 13.0368 11.6276 12.9992 11.5994Z"></path></svg><input type="search" class="RoomDirectoryView_searchInput" placeholder="Search rooms" name="search" value="" autocomplete="off" autocapitalize="off" data-testid="room-directory-search-input"></div><div class="RoomDirectoryView_homeserverSelectSection" style="
    display: none;
"><div>Show: Matrix rooms on</div><select class="RoomDirectoryView_homeserverSelector" name="homeserver" data-testid="homeserver-select"><optgroup label="Defaults"><option value="my.synapse.server">my.synapse.server</option><option value="matrix.org" selected="selected">matrix.org</option><option value="gitter.im">gitter.im</option><option value="libera.chat">libera.chat</option></optgroup><optgroup label="Actions"><option value="action:add-new-server">Add new server...</option><option value="action:clear-servers" disabled="disabled">Clear servers...</option></optgroup></select><dialog class="ModalView_modal"><div class="ModalView_modalInner"><header class="ModalView_modalHeader"><h3>Add a new server</h3><form method="dialog" class="ModalView_modalDismissForm"><button class="ModalView_modalDismissButton"><svg width="16" height="16" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.33313 1.33313L6.66646 6.66646" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><path d="M6.66699 1.33313L1.33366 6.66646" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg></button></form></header><div><form method="dialog"><section><p>Enter the name of a new server you want to explore.</p><input type="text" class="GeneralForm_textField" placeholder="Server name (matrix.org)" autofocus="autofocus"><footer class="ModalView_footerActionBar"><button class="PrimaryActionButton">Add</button></footer></section></form></div></div></dialog></div></form></header>

Dev notes

• https://squoosh.app/editor (image optimization app)
• 1200x630 matches what Element uses: res/themes/element/img/logos/opengraph.png
• https://andrejgajdos.com/how-to-create-a-link-preview/