Add width and height attributes to profile images

Currently profile images are sized using CSS. If images whose actual size in pixels is larger than the defined pfp-size in CSS pixels is used and the page is viewed on a web browser that does not support the latest CSS standards, the profile images appear larger than intended. This change moves the size information into the HTML code. Since HTML sizes are also in terms of CSS pixels, this does not change the results for browsers that implement modern standards, but will provide better rendering on older or more limited browsers.
3 years ago · a4cd401e2a
--- a/src/main.tsx
+++ b/src/main.tsx
@ -42,6 +42,9 @@ type IrcMessage = {
 const URL = /(((?:https?|gopher):\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/|spotify:track:)((?:\(?[^\s()<>]+\)?)*[^ \s`!\[\]{};:\'".,<>?\xab\xbb\u201c\u201d\u2018\u2019]))/i;
 // NOTE: When chaging, also update --pfp-size in style.css
 const pfp_size = 48;
 function parseMessage(m: string): MessageFrag[] {
  m = m.trimEnd();
  const parts: MessageFrag[] = [];
@ -217,7 +220,7 @@ function renderMessageGroup(m: MsgGroup): HtmlEnt {
  if (u !== undefined) {
    return <div class="mg-user">
      <div class="mg-pfp">
        <img src={`https://offtopia.org/pages/people/${u.name.toLocaleLowerCase()}.jpg`} alt={`${u.name}'s profile picture`} />
        <img src={`https://offtopia.org/pages/people/${u.name.toLocaleLowerCase()}.jpg`} alt={`${u.name}'s profile picture`} width={pfp_size} height={pfp_size} />
      </div>
      <div class="mg-contents">
        <span class="mg-ts-u">
@ -267,4 +270,4 @@ const elem = <html lang="en">
 </html>;
 console.log(elem.toHtmlStr());
 console.log(elem.toHtmlStr());
--- a/style.css
+++ b/style.css
@ -2,6 +2,7 @@ html {
  font-family: sans-serif;
  padding: 2px;
  /* NOTE: When chaging, also update pfp_size in src/main.tsx  */
  --pfp-size: 48px;
  --font-size: 14pt;
  --ts-font-size: calc(var(--font-size) - 2pt);
@ -27,8 +28,6 @@ body {
 }
 .mg-user > .mg-pfp > img {
  width: var(--pfp-size);
  height: var(--pfp-size);
  clip-path: url(#squircle);
 }
@ -141,4 +140,4 @@ body {
  font-weight: bold;
  font-size: calc(1.2 * var(--font-size));
 }
 }