<script lang="ts">
  import { site } from '$lib/config/site'
  // import { src, width, height } from '/static/assets/avatar.jpg?width=384&metadata'
  // import srcset from '/static/assets/avatar.jpg?w=48;96;192&srcset'
</script>

<div class="sticky flex flex-col gap-4 top-24 xl:ml-auto xl:mr-8 xl:max-w-xs">
  <div class="h-card flex flex-col gap-4  card card-body p-4 items-right xl:border-2 xl:py-8 border-base-content/10 ">
    <a href={site.protocol + site.domain} class="hidden u-url u-uid">{site.author.name}</a>
    <figure class="relative mx-auto group">
      <img
        class="u-photo rounded-full shadow-xl w-32 h-32 hover:rotate-[360deg] transition-transform duration-1000 ease-in-out"
        src={site.author.avatar}
        alt={site.author.name} />
      <!-- <picture>
        <source {srcset} type="image/jpg" />
        <img
          class="u-photo rounded-full shadow-xl transition-shadow z-10 w-24 h-24 md:w-32 md:h-32 hover:rotate-[360deg] transition-transform duration-1000 ease-in-out"
          {src}
          {width}
          {height}
          alt='/assets/avatar.jpg' />
      </picture> -->
      {#if site.author.status}
        <div class="heart absolute rounded-full w-10 h-10 bottom-0 right-0 bg-base-100 shadow-xl text-xl text-center py-1.5">
          {site.author.status}
        </div>
      {/if}
    </figure>
    <div class="text-center flex flex-col gap-2">
      <h2 class="text-2xl font-bold mt-0 mb-2 p-name">{site.author.name}</h2>
      <p class="opacity-75 p-note">{@html site.author.bio}</p>
      <label for="remote-follow" class="btn  btn-active  btn-outline btn-xs modal-button w-fit mx-auto normal-case mt-4 gap-2 ">
        <span class="i-material-symbols-group-add-rounded" />
        Remote Follow
      </label>
      {#if site.author.metadata}
        <div class="flex gap-1 flex-wrap justify-center">
          {#each site.author.metadata as { text, icon, link, rel }}
            {#if link}
              <a
                href={link}
                rel={rel ?? 'me noopener external'}
                class:btn-square={!text}
                class="btn btn-sm btn-ghost normal-case gap-2 u-url"
                target="_blank">
                {#if icon}
                  <span class="{icon} !w-5 !h-5" />
                {/if}
                {#if text}
                  {text}
                {/if}
              </a>
            {:else}
              <button class:btn-square={!text} class="btn btn-sm btn-ghost normal-case gap-2" {rel}>
                {#if icon}
                  <span class="{icon} !w-5 !h-5" />
                {/if}
                {#if text}
                  {text}
                {/if}
              </button>
            {/if}
          {/each}
        </div>
      {/if}
    </div>
  </div>
  <div class="h-card p-4 items-right xl:py-2 xl:max-w-xs btn-group flex gap-2 justify-center">
    <button class="btn btn-ghost btn-xs">
      <a href="https://xn--sr8hvo.ws/%F0%9F%94%9D%F0%9F%9A%B9%F0%9F%9A%90/previous" class="i-ic-round-keyboard-double-arrow-left h-5 w-5 p-0" />
    </button>
    <div class="-mt-1 -mr-2">
      <svg width="478" height="174" viewBox="0 0 478 174" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-7 w-auto">
        <g clip-path="url(#clip0_1356_3)">
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M143.792 75.0454C143.674 74.9308 143.556 74.8162 143.423 74.7295L143.434 74.6909C126.901 59.7718 118.637 36.634 123.788 13.3255C123.814 13.2237 123.837 13.1113 123.864 13.0096C123.985 12.6909 124.057 12.3644 124.073 12.044C124.43 10.4008 123.406 8.78503 121.759 8.41712C120.98 8.24267 120.209 8.39249 119.58 8.76651C119.346 8.84031 119.116 8.92473 118.872 9.00188C96.2767 16.1367 74.075 14.4909 57.7844 -0.399755C57.1778 -1.24792 56.2027 -1.74608 55.1634 -1.74498C55.1093 -1.74885 55.055 -1.74735 55.0012 -1.74051C54.9308 -1.74163 54.8603 -1.74275 54.7932 -1.73325C54.772 -1.72654 54.7507 -1.71983 54.7261 -1.72374C54.5461 -1.70194 54.3694 -1.66952 54.1995 -1.61585L54.1782 -1.60914C54.0083 -1.55547 53.845 -1.48055 53.6851 -1.39501C53.5929 -1.3542 53.5179 -1.2955 53.429 -1.24406L53.3223 -1.1753C52.4461 -0.583226 51.9301 0.409158 51.9239 1.46249C47.1427 22.9837 29.9442 37.0709 7.39183 44.1923C7.15813 44.2661 6.92443 44.3399 6.67675 44.4064C5.94992 44.4724 5.23316 44.7922 4.69194 45.3719C4.21846 45.889 3.93858 46.5541 3.89984 47.2542C3.86109 47.9542 4.06589 48.6461 4.47942 49.2123C4.78748 49.7809 5.24872 50.2428 5.84639 50.5447C5.84639 50.5447 5.84974 50.5553 5.86037 50.552C23.4179 66.643 29.9478 90.2817 25.0374 111.949C24.7372 112.663 24.707 113.455 24.9351 114.177C24.9451 114.209 24.9446 114.244 24.9547 114.276C24.9714 114.329 24.9988 114.379 25.0262 114.429C25.057 114.489 25.0771 114.553 25.1078 114.613C25.4517 115.369 26.07 115.922 26.7985 116.194C26.865 116.22 26.921 116.249 26.9841 116.264C26.9981 116.271 27.0087 116.268 27.0227 116.275C27.8955 116.56 28.8521 116.445 29.6521 115.982L30.0239 115.865C52.5019 108.767 74.5649 110.269 90.8231 124.983C91.1791 125.65 91.7574 126.171 92.4577 126.456C93.158 126.741 93.936 126.771 94.6563 126.542C96.1647 126.065 97.0794 124.597 96.9028 123.075C101.77 101.679 118.99 87.7717 141.511 80.6604L141.808 80.5664C142.538 80.5111 143.205 80.2187 143.731 79.7373C144.217 79.3561 144.575 78.8358 144.759 78.2459C144.942 77.6559 144.941 77.0242 144.756 76.4348C144.595 75.9249 144.309 75.5011 143.945 75.1606C143.889 75.1315 143.84 75.0885 143.792 75.0454ZM75.826 56.1804L69.4258 35.912C76.1114 38.2167 83.0733 39.7683 90.1855 40.5014L75.826 56.1804ZM94.9886 44.8725C96.3566 51.9054 98.5314 58.7185 101.434 65.1733L80.6112 60.5688L94.9886 44.8725ZM69.6435 58.1327L48.8944 53.5399C54.2641 48.8807 59.0778 43.6171 63.24 37.8536L69.6435 58.1327ZM68.2462 64.4733L53.8794 80.1663C52.5523 73.2257 50.4267 66.4204 47.5111 59.8879L68.2462 64.4733ZM40.2614 58.2753C44.6161 66.8613 47.5203 76.1086 48.8564 85.6426L32.4495 103.568C33.9169 85.7223 28.5767 67.4789 16.6017 53.0479L40.2614 58.2753ZM73.0281 68.8511L79.388 88.9921C72.7135 86.6904 65.798 85.1585 58.7759 84.4262L73.0281 68.8511ZM79.2106 66.8989L99.8333 71.4614C94.5037 76.0966 89.7187 81.323 85.5705 87.0398L79.2106 66.8989ZM108.705 66.7792C104.308 58.1932 101.369 48.9357 100.008 39.3856L116.408 21.4736C114.863 40.2206 120.981 58.2649 132.484 72.0507L108.705 66.7792ZM111.486 17.2451L95.223 34.9972C85.5973 34.5022 76.1209 32.4097 67.1817 28.8053L61.2109 9.89659C75.6662 19.2337 93.2765 21.1377 111.486 17.2451ZM55.0317 11.8595L61.0026 30.7682C55.7597 38.8481 49.2108 46.0008 41.6234 51.9341L18.1007 46.7335C35.2365 39.4768 48.56 27.8048 55.0317 11.8595ZM37.554 107.599L53.7529 89.9024C63.409 90.4046 72.8175 92.5271 81.6254 96.0775L87.556 114.859C73.17 105.593 55.6682 103.737 37.554 107.599ZM93.7418 112.917L87.8112 94.1359C93.0405 86.1023 99.5603 78.9873 107.108 73.0779L130.518 78.2555C113.463 85.51 100.201 97.0809 93.7418 112.917Z"
            fill="#2E3440"
            fill-opacity="0.15" />
          <path
            d="M167.496 63.0721L145.992 132H136.776L119.976 80.8801C119.592 79.8561 119.256 78.6241 118.968 77.1841C118.616 78.6561 118.28 79.8881 117.96 80.8801L100.968 132H91.8L70.296 63.0721H78.84C79.736 63.0721 80.488 63.2961 81.096 63.7441C81.704 64.1601 82.104 64.7361 82.296 65.4721L95.88 111.6C96.136 112.496 96.36 113.472 96.552 114.528C96.776 115.584 97 116.688 97.224 117.84C97.448 116.688 97.672 115.584 97.896 114.528C98.152 113.472 98.44 112.496 98.76 111.6L114.312 65.4721C114.504 64.8321 114.904 64.2721 115.512 63.7921C116.152 63.3121 116.904 63.0721 117.768 63.0721H120.696C121.592 63.0721 122.328 63.2961 122.904 63.7441C123.48 64.1921 123.896 64.7681 124.152 65.4721L139.656 111.6C140.232 113.36 140.744 115.36 141.192 117.6C141.576 115.392 141.992 113.392 142.44 111.6L156.072 65.4721C156.232 64.8321 156.632 64.2721 157.272 63.7921C157.912 63.3121 158.664 63.0721 159.528 63.0721H167.496ZM202.099 102.192C202.099 100.336 201.827 98.6241 201.283 97.0561C200.771 95.4881 200.003 94.1281 198.979 92.9761C197.955 91.8241 196.707 90.9281 195.235 90.2881C193.763 89.6481 192.067 89.3281 190.147 89.3281C186.211 89.3281 183.107 90.4641 180.835 92.7361C178.595 95.0081 177.171 98.1601 176.563 102.192H202.099ZM209.827 125.04C208.675 126.384 207.347 127.552 205.843 128.544C204.339 129.504 202.739 130.288 201.043 130.896C199.347 131.504 197.587 131.952 195.763 132.24C193.971 132.528 192.195 132.672 190.435 132.672C187.075 132.672 183.955 132.112 181.075 130.992C178.227 129.84 175.747 128.176 173.635 126C171.555 123.792 169.923 121.072 168.739 117.84C167.587 114.576 167.011 110.832 167.011 106.608C167.011 103.216 167.539 100.064 168.595 97.1521C169.651 94.2081 171.155 91.6481 173.107 89.4721C175.091 87.2961 177.507 85.5841 180.355 84.3361C183.203 83.0881 186.403 82.4641 189.955 82.4641C192.931 82.4641 195.667 82.9601 198.163 83.9521C200.691 84.9121 202.867 86.3201 204.691 88.1761C206.515 90.0321 207.939 92.3201 208.963 95.0401C210.019 97.7601 210.547 100.864 210.547 104.352C210.547 105.792 210.387 106.768 210.067 107.28C209.747 107.76 209.155 108 208.291 108H176.323C176.419 110.912 176.835 113.456 177.571 115.632C178.307 117.776 179.315 119.568 180.595 121.008C181.907 122.448 183.459 123.52 185.251 124.224C187.043 124.928 189.043 125.28 191.251 125.28C193.331 125.28 195.123 125.04 196.627 124.56C198.163 124.08 199.475 123.568 200.563 123.024C201.683 122.448 202.611 121.92 203.347 121.44C204.115 120.96 204.787 120.72 205.363 120.72C206.131 120.72 206.723 121.008 207.139 121.584L209.827 125.04ZM229.967 120C231.503 122.016 233.167 123.424 234.959 124.224C236.751 125.024 238.703 125.424 240.815 125.424C245.167 125.424 248.511 123.872 250.847 120.768C253.215 117.664 254.399 112.976 254.399 106.704C254.399 100.912 253.359 96.6721 251.279 93.9841C249.199 91.2641 246.255 89.9041 242.447 89.9041C239.759 89.9041 237.423 90.5121 235.439 91.7281C233.487 92.9441 231.663 94.6721 229.967 96.9121V120ZM229.967 89.9521C231.983 87.7121 234.271 85.9041 236.831 84.5281C239.391 83.1521 242.303 82.4641 245.567 82.4641C248.415 82.4641 250.975 83.0241 253.247 84.1441C255.551 85.2321 257.503 86.8161 259.103 88.8961C260.703 90.9441 261.935 93.4401 262.799 96.3841C263.663 99.3281 264.095 102.656 264.095 106.368C264.095 110.304 263.599 113.888 262.607 117.12C261.647 120.352 260.255 123.12 258.431 125.424C256.639 127.728 254.447 129.52 251.855 130.8C249.263 132.048 246.351 132.672 243.119 132.672C241.551 132.672 240.111 132.512 238.799 132.192C237.487 131.904 236.271 131.472 235.151 130.896C234.063 130.32 233.055 129.616 232.127 128.784C231.199 127.952 230.319 127.008 229.487 125.952L229.055 130.032C228.799 131.344 227.999 132 226.655 132H220.607V61.1521H229.967V89.9521ZM283.346 92.5921C284.914 89.3921 286.802 86.8801 289.01 85.0561C291.218 83.2321 293.874 82.3201 296.978 82.3201C298.034 82.3201 299.026 82.4481 299.954 82.7041C300.914 82.9281 301.746 83.2801 302.45 83.7601L301.826 90.8161C301.602 91.6801 301.074 92.1121 300.242 92.1121C299.794 92.1121 299.122 92.0321 298.226 91.8721C297.33 91.6801 296.37 91.5841 295.346 91.5841C293.842 91.5841 292.514 91.8081 291.362 92.2561C290.21 92.6721 289.17 93.3121 288.242 94.1761C287.346 95.0081 286.546 96.0481 285.842 97.2961C285.138 98.5121 284.482 99.9041 283.874 101.472V132H274.514V83.2321H279.89C280.914 83.2321 281.602 83.4241 281.954 83.8081C282.338 84.1601 282.61 84.8001 282.77 85.7281L283.346 92.5921ZM319.462 83.2321V132H310.102V83.2321H319.462ZM321.238 68.1601C321.238 69.0241 321.062 69.8561 320.71 70.6561C320.358 71.4241 319.878 72.1121 319.27 72.7201C318.694 73.2961 318.006 73.7601 317.206 74.1121C316.406 74.4321 315.574 74.5921 314.71 74.5921C313.846 74.5921 313.03 74.4321 312.262 74.1121C311.494 73.7601 310.806 73.2961 310.198 72.7201C309.622 72.1121 309.158 71.4241 308.806 70.6561C308.486 69.8561 308.326 69.0241 308.326 68.1601C308.326 67.2641 308.486 66.4321 308.806 65.6641C309.158 64.8641 309.622 64.1761 310.198 63.6001C310.806 62.9921 311.494 62.5281 312.262 62.2081C313.03 61.8561 313.846 61.6801 314.71 61.6801C315.574 61.6801 316.406 61.8561 317.206 62.2081C318.006 62.5281 318.694 62.9921 319.27 63.6001C319.878 64.1761 320.358 64.8641 320.71 65.6641C321.062 66.4321 321.238 67.2641 321.238 68.1601ZM341.798 90.0001C342.854 88.8801 343.958 87.8561 345.11 86.9281C346.262 86.0001 347.478 85.2161 348.758 84.5761C350.07 83.9041 351.462 83.3921 352.934 83.0401C354.438 82.6561 356.038 82.4641 357.734 82.4641C360.422 82.4641 362.774 82.9121 364.79 83.8081C366.838 84.7041 368.55 85.9681 369.926 87.6001C371.302 89.2001 372.342 91.1361 373.046 93.4081C373.75 95.6801 374.102 98.1921 374.102 100.944V132H364.694V100.944C364.694 97.4561 363.894 94.7521 362.294 92.8321C360.694 90.8801 358.246 89.9041 354.95 89.9041C352.55 89.9041 350.294 90.4801 348.182 91.6321C346.102 92.7521 344.166 94.2881 342.374 96.2401V132H333.014V83.2321H338.63C339.942 83.2321 340.758 83.8561 341.078 85.1041L341.798 90.0001ZM403.868 107.664C405.532 107.664 406.988 107.44 408.236 106.992C409.516 106.544 410.572 105.92 411.404 105.12C412.268 104.288 412.908 103.296 413.324 102.144C413.772 100.992 413.996 99.7281 413.996 98.3521C413.996 95.5361 413.132 93.2961 411.404 91.6321C409.708 89.9361 407.196 89.0881 403.868 89.0881C400.572 89.0881 398.06 89.9361 396.332 91.6321C394.636 93.2961 393.788 95.5361 393.788 98.3521C393.788 99.7281 393.996 100.992 394.412 102.144C394.86 103.264 395.5 104.24 396.332 105.072C397.196 105.872 398.252 106.512 399.5 106.992C400.78 107.44 402.236 107.664 403.868 107.664ZM418.796 134.544C418.796 133.392 418.476 132.48 417.836 131.808C417.196 131.104 416.316 130.56 415.196 130.176C414.108 129.76 412.828 129.472 411.356 129.312C409.884 129.12 408.332 128.976 406.7 128.88C405.1 128.784 403.452 128.704 401.756 128.64C400.06 128.544 398.428 128.384 396.86 128.16C395.196 128.992 393.82 130 392.732 131.184C391.676 132.368 391.148 133.76 391.148 135.36C391.148 136.384 391.404 137.344 391.916 138.24C392.46 139.136 393.276 139.904 394.364 140.544C395.484 141.216 396.876 141.728 398.54 142.08C400.236 142.464 402.252 142.656 404.588 142.656C406.892 142.656 408.924 142.448 410.684 142.032C412.444 141.648 413.916 141.088 415.1 140.352C416.316 139.648 417.228 138.8 417.836 137.808C418.476 136.816 418.796 135.728 418.796 134.544ZM428.3 85.0561V88.5601C428.3 89.7121 427.58 90.4321 426.14 90.7201L420.908 91.4881C421.356 92.4801 421.708 93.5361 421.964 94.6561C422.22 95.7441 422.348 96.8961 422.348 98.1121C422.348 100.512 421.884 102.688 420.956 104.64C420.028 106.56 418.748 108.208 417.116 109.584C415.484 110.96 413.532 112.016 411.26 112.752C409.02 113.488 406.556 113.856 403.868 113.856C401.66 113.856 399.596 113.616 397.676 113.136C396.716 113.712 395.98 114.352 395.468 115.056C394.988 115.728 394.748 116.4 394.748 117.072C394.748 118.192 395.212 119.024 396.14 119.568C397.1 120.112 398.332 120.512 399.836 120.768C401.372 120.992 403.116 121.136 405.068 121.2C407.052 121.264 409.052 121.376 411.068 121.536C413.116 121.664 415.116 121.92 417.068 122.304C419.052 122.656 420.796 123.248 422.3 124.08C423.836 124.88 425.068 126 425.996 127.44C426.956 128.848 427.436 130.688 427.436 132.96C427.436 135.072 426.908 137.12 425.852 139.104C424.828 141.088 423.324 142.848 421.34 144.384C419.356 145.92 416.94 147.152 414.092 148.08C411.244 149.008 408.012 149.472 404.396 149.472C400.78 149.472 397.628 149.12 394.94 148.416C392.284 147.712 390.06 146.768 388.268 145.584C386.508 144.4 385.18 143.024 384.284 141.456C383.42 139.888 382.988 138.256 382.988 136.56C382.988 134.192 383.724 132.192 385.196 130.56C386.668 128.896 388.7 127.6 391.292 126.672C389.884 126.032 388.764 125.168 387.932 124.08C387.1 122.96 386.684 121.488 386.684 119.664C386.684 118.96 386.812 118.24 387.068 117.504C387.324 116.736 387.708 115.984 388.22 115.248C388.764 114.48 389.42 113.76 390.188 113.088C390.988 112.416 391.9 111.808 392.924 111.264C390.524 109.92 388.636 108.144 387.26 105.936C385.884 103.696 385.196 101.088 385.196 98.1121C385.196 95.7121 385.66 93.5521 386.588 91.6321C387.516 89.7121 388.796 88.0641 390.428 86.6881C392.092 85.3121 394.06 84.2561 396.332 83.5201C398.636 82.7841 401.148 82.4161 403.868 82.4161C408.092 82.4161 411.724 83.2961 414.764 85.0561H428.3Z"
            fill="#535251" />
        </g>
        <defs>
          <clipPath id="clip0_1356_3">
            <rect width="478" height="174" fill="white" />
          </clipPath>
        </defs>
      </svg>
    </div>
    <button class="btn btn-ghost btn-xs">
      <a href="https://xn--sr8hvo.ws/%F0%9F%94%9D%F0%9F%9A%B9%F0%9F%9A%90/next" class="i-ic-round-keyboard-double-arrow-right h-5 w-5 p-0" />
    </button>
  </div>
</div>

<style>
  .heart {
    -webkit-animation: heartbeat 2s linear 1s infinite;
    -o-animation: heartbeat 2s linear 1s infinite;
    -moz-animation: heartbeat 2s linear 1s infinite;
    -ms-animation: heartbeat 2s linear 1s infinite;
    animation: heartbeat 2s linear 1s infinite;
  }
  @keyframes heartbeat {
    0% {
      -webkit-transform: scale(1);
      -o-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }

    2% {
      -webkit-transform: scale(1);
      -o-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }

    4% {
      -webkit-transform: scale(1.08);
      -o-transform: scale(1.08);
      -moz-transform: scale(1.08);
      -ms-transform: scale(1.08);
      transform: scale(1.08);
    }

    8% {
      -webkit-transform: scale(1.1);
      -o-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1);
    }

    20% {
      -webkit-transform: scale(0.96);
      -o-transform: scale(0.96);
      -moz-transform: scale(0.96);
      -ms-transform: scale(0.96);
      transform: scale(0.96);
    }

    24% {
      -webkit-transform: scale(1.1);
      -o-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1);
    }

    32% {
      -webkit-transform: scale(1.08);
      -o-transform: scale(1.08);
      -moz-transform: scale(1.08);
      -ms-transform: scale(1.08);
      transform: scale(1.08);
    }

    40% {
      -webkit-transform: scale(1);
      -o-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }
  }

  @-webkit-keyframes heartbeat {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    2% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    4% {
      -webkit-transform: scale(1.08);
      transform: scale(1.08);
    }

    8% {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }

    20% {
      -webkit-transform: scale(0.96);
      transform: scale(0.96);
    }

    24% {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }

    32% {
      -webkit-transform: scale(1.08);
      transform: scale(1.08);
    }

    40% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
</style>
