From e34bfee4a57f7e609714a36afd2e658f90d4187c Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 11 Jan 2023 23:24:00 +0100
Subject: [PATCH] feat: sponsors in about page and nav footer

---
 README.md                                    |  2 +-
 components/nav/NavFooter.vue                 | 10 +++++
 components/settings/SettingsItem.vue         |  2 +-
 components/settings/SettingsSponsorsList.vue | 31 ++++++++++++++++
 locales/en-US.json                           |  8 +++-
 pages/settings/about/index.vue               | 39 ++++++++++++++++++--
 pages/settings/users/index.vue               |  1 +
 7 files changed, 86 insertions(+), 7 deletions(-)
 create mode 100644 components/settings/SettingsSponsorsList.vue

diff --git a/README.md b/README.md
index 9debeaf7..4da950ff 100644
--- a/README.md
+++ b/README.md
@@ -41,7 +41,7 @@ We are grateful for the generous sponsorship and help of:
 </a>
 <br><br>
 
-And all the companies and individuals sponsoring Elk Team members. If you're enjoying the app, consider sponsoring our team:
+And all the companies and individuals sponsoring Elk Team and the members. If you're enjoying the app, consider sponsoring us:
 
 - [Elk Team's GitHub Sponsors](https://github.com/sponsors/elk-zone)
 
diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index a14a72f6..4da9a96c 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -26,6 +26,16 @@ function toggleDark() {
           @click="userSettings.zenMode = !userSettings.zenMode"
         />
       </CommonTooltip>
+      <CommonTooltip :content="$t('settings.about.sponsor_action')">
+        <NuxtLink
+          flex
+          text-lg
+          i-ri-heart-3-line hover="i-ri-heart-3-fill text-rose"
+          :aria-label="$t('settings.about.sponsor_action')"
+          href="https://github.com/sponsors/elk-zone"
+          target="_blank"
+        />
+      </CommonTooltip>
     </div>
     <div>
       <i18n-t v-if="isHydrated" keypath="nav.built_at">
diff --git a/components/settings/SettingsItem.vue b/components/settings/SettingsItem.vue
index cda8029b..59b62882 100644
--- a/components/settings/SettingsItem.vue
+++ b/components/settings/SettingsItem.vue
@@ -62,7 +62,7 @@ useCommand({
             />
           </slot>
         </div>
-        <div space-y-1>
+        <div flex="~ col gap-0.5">
           <p>
             <slot>
               <span>{{ text }}</span>
diff --git a/components/settings/SettingsSponsorsList.vue b/components/settings/SettingsSponsorsList.vue
new file mode 100644
index 00000000..4f7de041
--- /dev/null
+++ b/components/settings/SettingsSponsorsList.vue
@@ -0,0 +1,31 @@
+<template>
+  <div flex="~ col gap3" py5>
+    <NuxtLink href="https://nuxtlabs.com" target="_blank">
+      <svg width="300" viewBox="0 0 400 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g transform="translate(40 20)">
+          <path
+            d="M90.8236 48.7106V11.3546H97.6546L115.212 37.6646V11.3546H122.043V48.7106H115.212L97.6546 22.4546V48.7106H90.8236ZM139.051 49.3506C135.742 49.3506 133.181 48.3196 131.366 46.2556C129.587 44.1926 128.698 41.1686 128.698 37.1836V22.2416H135.475V36.5436C135.475 38.8206 135.938 40.5636 136.863 41.7736C137.788 42.9836 139.247 43.5876 141.239 43.5876C143.125 43.5876 144.672 42.9116 145.882 41.5596C147.127 40.2076 147.75 38.3226 147.75 35.9026V22.2416H154.581V48.7116H148.55L148.016 44.2286C147.198 45.7936 146.006 47.0386 144.441 47.9636C142.911 48.8886 141.114 49.3516 139.051 49.3516V49.3506ZM159.085 48.7106L168.69 35.4756L159.085 22.2416H166.396L173.12 31.6336L179.791 22.2416H187.155L177.496 35.4756L187.155 48.7106H179.791L173.12 39.3186L166.396 48.7106H159.085ZM203.301 48.7106C200.526 48.7106 198.302 48.0346 196.63 46.6826C194.958 45.3306 194.122 42.9296 194.122 39.4786V27.9506H189.586V22.2406H194.122L194.922 15.1426H200.953V22.2406H208.104V27.9506H200.953V39.5306C200.953 40.8116 201.22 41.7006 201.753 42.1996C202.323 42.6616 203.283 42.8926 204.635 42.8926H207.944V48.7096H203.301V48.7106ZM214.129 48.7106V11.3546H220.96V43.3746H237.503V48.7106H214.129ZM252.488 49.3506C250.211 49.3506 248.343 48.9956 246.884 48.2836C245.425 47.5366 244.34 46.5586 243.629 45.3486C242.917 44.1386 242.561 42.8046 242.561 41.3466C242.561 38.8916 243.522 36.8996 245.443 35.3696C247.364 33.8396 250.246 33.0746 254.089 33.0746H260.813V32.4346C260.813 30.6196 260.297 29.2856 259.265 28.4316C258.233 27.5776 256.952 27.1516 255.423 27.1516C254.035 27.1516 252.826 27.4886 251.794 28.1646C250.762 28.8046 250.122 29.7656 249.873 31.0466H243.202C243.38 29.1256 244.02 27.4536 245.123 26.0306C246.261 24.6076 247.72 23.5216 249.499 22.7746C251.278 21.9926 253.27 21.6006 255.476 21.6006C259.247 21.6006 262.218 22.5436 264.388 24.4296C266.558 26.3146 267.644 28.9836 267.644 32.4346V48.7106H261.827L261.186 44.4416C260.404 45.8646 259.301 47.0386 257.878 47.9636C256.49 48.8886 254.693 49.3516 252.488 49.3516V49.3506ZM254.035 44.0146C255.992 44.0146 257.504 43.3745 258.571 42.0936C259.674 40.8136 260.368 39.2296 260.653 37.3436H254.836C253.021 37.3436 251.723 37.6816 250.94 38.3576C250.157 38.9976 249.766 39.7986 249.766 40.7596C249.766 41.7916 250.157 42.5916 250.94 43.1606C251.723 43.7306 252.754 44.0146 254.035 44.0146ZM289.852 49.3506C287.859 49.3506 286.116 48.9776 284.622 48.2306C283.16 47.5119 281.91 46.427 280.993 45.0816L280.246 48.7116H274.162V10.2866H280.993V26.0306C281.847 24.8566 282.968 23.8246 284.355 22.9346C285.778 22.0456 287.61 21.6006 289.852 21.6006C292.342 21.6006 294.566 22.2056 296.523 23.4156C298.479 24.6256 300.027 26.2796 301.165 28.3786C302.304 30.4776 302.873 32.8616 302.873 35.5286C302.873 38.1986 302.304 40.5816 301.165 42.6806C300.027 44.7436 298.479 46.3806 296.523 47.5906C294.566 48.7646 292.342 49.3506 289.852 49.3506ZM288.411 43.3746C290.581 43.3746 292.378 42.6446 293.801 41.1866C295.224 39.7276 295.936 37.8416 295.936 35.5296C295.936 33.2166 295.224 31.3136 293.801 29.8196C292.378 28.3246 290.581 27.5776 288.411 27.5776C286.205 27.5776 284.391 28.3246 282.968 29.8196C281.58 31.2776 280.886 33.1636 280.886 35.4756C280.886 37.7886 281.58 39.6916 282.968 41.1856C284.391 42.6456 286.205 43.3746 288.411 43.3746ZM319.915 49.3506C317.567 49.3506 315.504 48.9776 313.725 48.2306C311.946 47.4476 310.523 46.3806 309.456 45.0286C308.388 43.6766 307.748 42.1116 307.534 40.3326H314.419C314.632 41.3646 315.201 42.2536 316.126 43.0006C317.087 43.7126 318.314 44.0676 319.809 44.0676C321.303 44.0676 322.388 43.7656 323.064 43.1606C323.775 42.5556 324.131 41.8626 324.131 41.0796C324.131 39.9406 323.633 39.1756 322.637 38.7846C321.641 38.3576 320.253 37.9486 318.474 37.5576C317.306 37.3009 316.149 36.9983 315.006 36.6506C313.832 36.2946 312.746 35.8496 311.75 35.3156C310.79 34.7466 310.007 34.0356 309.402 33.1816C308.797 32.2916 308.495 31.2066 308.495 29.9256C308.495 27.5776 309.42 25.6036 311.27 24.0026C313.156 22.4016 315.788 21.6006 319.168 21.6006C322.299 21.6006 324.789 22.3306 326.639 23.7886C328.525 25.2476 329.646 27.2586 330.002 29.8186H323.544C323.153 27.8626 321.676 26.8846 319.115 26.8846C317.834 26.8846 316.838 27.1336 316.126 27.6316C315.45 28.1296 315.112 28.7516 315.112 29.4986C315.112 30.2816 315.628 30.9046 316.66 31.3666C317.692 31.8296 319.061 32.2566 320.769 32.6476C322.619 33.0746 324.309 33.5546 325.839 34.0886C327.404 34.5866 328.65 35.3516 329.575 36.3836C330.5 37.3796 330.962 38.8206 330.962 40.7056C330.998 42.3426 330.571 43.8186 329.681 45.1356C328.792 46.4516 327.511 47.4836 325.839 48.2306C324.167 48.9776 322.192 49.3506 319.915 49.3506ZM42.0296 49.6906H69.8786C70.7636 49.6906 71.6326 49.4616 72.3986 49.0256C73.1623 48.5916 73.7983 47.9642 74.2426 47.2066C74.6839 46.4529 74.9163 45.5952 74.916 44.7218C74.9156 43.8484 74.6825 42.9909 74.2406 42.2376L55.5376 10.2936C55.0931 9.53625 54.4572 8.90926 53.6936 8.47555C52.9259 8.03841 52.0576 7.80855 51.1741 7.80855C50.2907 7.80855 49.4224 8.03841 48.6546 8.47555C47.8914 8.90936 47.2558 9.53635 46.8116 10.2936L42.0286 18.4676L32.6786 2.48455C32.2338 1.72716 31.5975 1.10016 30.8336 0.666553C30.0658 0.229699 29.1976 0 28.3141 0C27.4307 0 26.5625 0.229699 25.7946 0.666553C25.0308 1.1002 24.3945 1.72719 23.9496 2.48455L0.675641 42.2376C0.233573 42.991 0.000351937 43.8487 3.98001e-07 44.7223C-0.000351141 45.5959 0.232179 46.4537 0.673641 47.2076C1.11811 47.9649 1.75408 48.5919 2.51764 49.0256C3.28563 49.4624 4.15409 49.6919 5.03764 49.6916H22.5196C29.4456 49.6916 34.5536 46.6916 38.0696 40.8386L46.6016 26.2656L51.1726 18.4676L64.8896 41.8926H46.6016L42.0286 49.6916L42.0296 49.6906ZM22.2346 41.8846L10.0346 41.8816L28.3226 10.6506L37.4476 26.2666L31.3376 36.7046C29.0036 40.5016 26.3516 41.8856 22.2346 41.8856V41.8846Z"
+            dark:fill-white fill-black
+          />
+        </g>
+      </svg>
+    </NuxtLink>
+    <NuxtLink href="https://stackblitz.com" target="_blank">
+      <svg width="300" viewBox="0 0 400 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g transform="translate(45 15) scale(0.55)">
+          <path d="M137.5 98.7C130.9 98.7 125.2 97.2 120.6 94.2C116.1 91.3 112.7 86.9 111 81.8L120.7 76.1C123.5 83.8 129.2 87.7 137.8 87.7C142.1 87.7 145.2 86.9 147.3 85.2C149.4 83.7 150.6 81.2 150.6 78.6C150.7 76 149.4 73.5 147.2 72.2C144.9 70.7 140.8 69.1 135 67.3C132.3 66.5 129.6 65.6 127 64.5C124.7 63.5 122.6 62.3 120.5 61C118.4 59.5 116.6 57.5 115.5 55.2C114.3 52.7 113.8 49.9 113.8 47.1C113.8 41 116 36.2 120.3 32.6C124.7 29 130.2 27.1 135.9 27.2C141 27.1 146 28.5 150.4 31.2C154.6 33.9 157.9 37.8 159.9 42.3L150.4 47.8C147.5 41.4 142.7 38.2 135.9 38.2C132.6 38.2 130 39 128 40.6C126.1 42.1 125 44.4 125 46.8C124.9 49.2 126 51.5 128 52.9C130 54.3 133.7 55.9 138.9 57.5C141.5 58.4 143.4 59 144.6 59.5C145.8 59.9 147.6 60.5 149.7 61.5C151.5 62.2 153.2 63.1 154.7 64.3C156 65.4 157.2 66.5 158.3 67.8C159.6 69.1 160.5 70.7 161.1 72.5C161.6 74.5 161.9 76.5 161.9 78.5C161.9 84.7 159.6 89.7 155.1 93.4C150.6 97.1 144.7 98.8 137.5 98.7Z" dark:fill-white fill-black />
+          <path d="M194.5 58.5H182.3V82.1C182.3 84.1 182.8 85.6 183.7 86.5C184.8 87.4 186.3 88 187.7 88C189.5 88.1 191.8 88 194.5 87.9V97.4C186.4 98.4 180.5 97.7 177 95.3C173.5 92.9 171.7 88.5 171.7 82V58.4H162.6V48.2H171.7V37.6L182.3 34.5V48.3H194.5V58.5Z" dark:fill-white fill-black />
+          <path d="M238.6 48.3H249.2V97.5H238.6V90.4C234.6 96 228.9 98.8 221.4 98.8C214.8 98.9 208.5 96.2 204.1 91.3C199.4 86.4 196.8 79.7 196.9 72.9C196.9 65.6 199.3 59.5 204.1 54.5C208.5 49.7 214.8 46.9 221.4 47C228.9 47 234.6 49.7 238.6 55.2V48.3ZM211.9 84.2C218.1 90.1 227.9 90.1 234.1 84.2C237.1 81.2 238.6 77.1 238.5 72.9C238.6 68.7 237 64.6 234.1 61.7C227.9 55.7 218 55.7 211.9 61.7C208.9 64.7 207.3 68.7 207.5 72.9C207.4 77.1 209 81.2 211.9 84.2Z" dark:fill-white fill-black />
+          <path d="M282.4 98.7C275 98.7 268.8 96.2 263.8 91.2C258.9 86.3 256.3 79.7 256.4 72.8C256.4 65.5 258.9 59.3 263.8 54.4C268.7 49.5 274.9 47 282.4 46.9C287 46.8 291.5 48 295.5 50.3C299.3 52.4 302.4 55.7 304.4 59.5L295.3 64.8C294.2 62.5 292.4 60.5 290.2 59.3C287.9 57.9 285.2 57.2 282.4 57.2C278.3 57.1 274.4 58.7 271.5 61.6C265.7 67.8 265.7 77.4 271.5 83.6C276.5 88.5 284.1 89.4 290.2 86C292.5 84.7 294.3 82.8 295.5 80.5L304.6 85.7C302.5 89.6 299.4 92.9 295.5 95C291.5 97.6 287 98.8 282.4 98.7Z" dark:fill-white fill-black />
+          <path d="M353.2 97.5H340.5L320.3 74.8V97.5H309.7V28.6H320.3V70L339.4 48.3H352.4L330.8 72.4L353.2 97.5Z" dark:fill-white fill-black />
+          <path d="M399.2 61.8C405.3 64.8 409 71.1 408.9 77.8C409 83.1 406.8 88.3 402.9 91.9C398.9 95.6 393.7 97.6 388.2 97.5H358.7V28.6H386C391.3 28.5 396.4 30.5 400.2 34.1C404.1 37.5 406.2 42.5 406.1 47.7C406.1 53.6 403.8 58.3 399.2 61.8ZM386 39.2H370V57.3H386C388.4 57.4 390.6 56.4 392.3 54.7C394 53 394.9 50.6 394.9 48.2C395 45.8 394 43.5 392.3 41.8C390.7 40.1 388.4 39.2 386 39.2ZM388.1 86.8C390.6 86.9 393 85.9 394.7 84C396.5 82.2 397.5 79.7 397.5 77.1C397.6 74.6 396.6 72.1 394.7 70.3C393 68.4 390.6 67.4 388.1 67.4H369.9V86.7H388.1V86.8Z" dark:fill-white fill-black />
+          <path d="M415.5 97.5V25.7H426.1V97.5H415.5Z" dark:fill-white fill-black />
+          <path d="M446.1 38.9C444.9 40.2 443.2 40.9 441.4 40.9C437.7 40.9 434.6 37.9 434.6 34.2V34.1C434.7 30.4 437.7 27.4 441.4 27.3C445.1 27.4 448.1 30.4 448.2 34.1C448.2 35.9 447.4 37.6 446.1 38.9ZM436 97.5V48.3H446.6V97.5H436Z" dark:fill-white fill-black />
+          <path d="M484 58.5H471.8V82.1C471.8 84.1 472.3 85.6 473.2 86.5C474.3 87.4 475.8 88 477.2 88C479 88.1 481.3 88 484 87.9V97.4C475.9 98.4 470 97.7 466.5 95.3C463 92.9 461.2 88.5 461.2 82V58.4H452.1V48.2H461.2V37.6L471.8 34.5V48.3H484V58.5Z" dark:fill-white fill-black />
+          <path d="M503.4 87.4H527.3V97.4H488.9V90.3L511.9 58.2H489.9V48.2H526.3V55.3L503.4 87.4Z" dark:fill-white fill-black />
+          <path d="M0.700012 75H38.1L16.3 127.8L87.8 52.6H50.2L71.8 0.199997L0.700012 75Z" fill="#1389FD" />
+        </g>
+      </svg>
+    </NuxtLink>
+  </div>
+</template>
diff --git a/locales/en-US.json b/locales/en-US.json
index a4b372ff..0e5b1580 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -236,7 +236,13 @@
   "settings": {
     "about": {
       "label": "About",
-      "meet_the_team": "Meet the team"
+      "meet_the_team": "Meet the team",
+      "sponsor_action": "Sponsor us",
+      "sponsor_action_desc": "To support the team developing Elk",
+      "sponsors": "Sponsors",
+      "sponsors_body_1": "Elk is made possible thanks the generous sponsoring and help of:",
+      "sponsors_body_2": "And all the companies and individuals sponsoring Elk Team and the members.",
+      "sponsors_body_3": "If you're enjoying the app, consider sponsoring us:"
     },
     "account_settings": {
       "description": "Edit your account settings in Mastodon UI",
diff --git a/pages/settings/about/index.vue b/pages/settings/about/index.vue
index 5651dee5..a4eb67f2 100644
--- a/pages/settings/about/index.vue
+++ b/pages/settings/about/index.vue
@@ -54,7 +54,7 @@ const handleShowCommit = () => {
     <SettingsItem
       :text="$t('nav.show_intro')"
       icon="i-ri:article-line"
-      cursor-pointer
+      cursor-pointer large
       @click="openPreviewHelp"
     />
 
@@ -62,27 +62,58 @@ const handleShowCommit = () => {
       text="Mastodon"
       icon="i-ri:mastodon-line"
       to="/m.webtoo.ls/@elk"
-      external target="_blank"
+      external large target="_blank"
     />
     <SettingsItem
       text="Discord"
       icon="i-ri:discord-fill"
       to="https://chat.elk.zone"
-      external target="_blank"
+      external large target="_blank"
     />
     <SettingsItem
       text="GitHub"
       icon="i-ri:github-fill"
       to="https://github.com/elk-zone"
-      external target="_blank"
+      external large target="_blank"
     />
 
     <div h-1px bg-border my2 />
 
+    <p px5 py3 font-bold text-lg>
+      {{ $t('settings.about.sponsors') }}
+    </p>
+
+    <p px5 text-secondary>
+      {{ $t('settings.about.sponsors_body_1') }}
+    </p>
+
+    <LazySettingsSponsorsList />
+
+    <p px5 mb1 text-secondary>
+      {{ $t('settings.about.sponsors_body_2') }}
+    </p>
+    <p px5 mb2 text-secondary>
+      {{ $t('settings.about.sponsors_body_3') }}
+    </p>
+
+    <SettingsItem
+      :text="$t('settings.about.sponsor_action')"
+      to="https://github.com/sponsors/elk-zone"
+      :description="$t('settings.about.sponsor_action_desc')"
+      external large target="_blank"
+    >
+      <template #icon>
+        <div i-ri-heart-3-fill text-rose rounded-full w-8 h-8 height="32" width="32" />
+      </template>
+    </SettingsItem>
+
+    <div h-1px bg-border my2 />
+
     <template v-if="isHydrated">
       <p px5 py3 font-bold text-lg>
         {{ $t('settings.about.meet_the_team') }}
       </p>
+
       <SettingsItem
         v-for="team in teams" :key="team.github"
         :text="team.display"
diff --git a/pages/settings/users/index.vue b/pages/settings/users/index.vue
index 9eaeacf6..04df33a7 100644
--- a/pages/settings/users/index.vue
+++ b/pages/settings/users/index.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+/* eslint-disable no-alert */
 import { fileOpen } from 'browser-fs-access'
 import type { UserLogin } from '~/types'