feat(sponsor): added sponsor button to navbar

technikhil314 · Sep 25, 2024 · 55d965e · 55d965e
1 parent a703a17
commit 55d965e
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 2 deletions.
diff --git a/components/icons/sponsor.vue b/components/icons/sponsor.vue
@@ -0,0 +1,54 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    shape-rendering="geometricPrecision"
+    text-rendering="geometricPrecision"
+    image-rendering="optimizeQuality"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    width="40"
+    height="40"
+    viewBox="0 0 512 488.783"
+  >
+    <path
+      fill="#2D2222"
+      fill-rule="nonzero"
+      d="M120.009 270.449l12.051-.014c63.731-.22 80.084-.266 144.202 39.975h52.865l.607.039c8.199.556 15.303 3.464 20.534 7.766 4.12 3.387 7.117 7.671 8.624 12.394 1.539 4.827 1.532 10.065-.369 15.239-2.039 5.543-6.262 11.001-13.1 15.714-10.245 7.504-22.03 11.037-34.651 12.373-12.143 1.284-25.049.511-38.085-.652-4.146-.202-6.802 1.433-7.954 3.645a6.503 6.503 0 00-.727 2.848 6.68 6.68 0 00.606 2.937c1.092 2.365 3.823 4.231 8.313 4.248l.329.014c3.377.249 7.065-.117 10.654-.464 2.851-.28 5.663-.557 8.494-.56 15.522-.011 29.622-1.483 41.658-5.966 11.593-4.315 21.385-11.5 28.832-23.019l7.983-18.636a4.658 4.658 0 012.235-2.362l80.598-39.96.61-.249c13.809-4.557 26.473-3.163 36.382 1.894 6.5 3.313 11.824 8.221 15.519 14.076 3.709 5.866 5.784 12.71 5.78 19.859-.003 10.115-4.146 20.807-13.653 30.198l-.536.454c-29.243 21.285-58.94 40.726-89.052 58.412-30.024 17.639-60.374 33.481-91.007 47.61-45.933 27.828-91.851 26.888-137.744.007l-59.998-30.928a16.68 16.68 0 01-4.904 11.795l-.529.479c-2.982 2.741-6.951 4.426-11.292 4.426H16.725c-4.585 0-8.76-1.88-11.792-4.905A16.588 16.588 0 010 437.32V268.736c0-4.582 1.883-8.763 4.922-11.802a16.577 16.577 0 0111.803-4.919h86.559a16.68 16.68 0 0111.817 4.905l.475.525c2.752 2.989 4.433 6.961 4.433 11.291v1.713z"
+    />
+    <path
+      fill="#F6CD45"
+      d="M317.148 0c75.35 0 136.432 61.082 136.432 136.432s-61.082 136.432-136.432 136.432-136.432-61.082-136.432-136.432S241.798 0 317.148 0z"
+    />
+    <path
+      fill="#D19632"
+      d="M317.148 23.867c62.168 0 112.565 50.397 112.565 112.565s-50.397 112.565-112.565 112.565S204.583 198.6 204.583 136.432 254.98 23.867 317.148 23.867z"
+    />
+    <path
+      fill="#A87927"
+      fill-rule="nonzero"
+      d="M306.476 187.961c-1.478-.104-2.383-.254-3.469-.429l-6.084-.873-3.756-.63a87.729 87.729 0 01-3.633-.728 79.382 79.382 0 01-3.51-.855l-1.43-.384v-23.498l6.645.541 4.879.289 5.12.227 5.186.162 5.04.097 4.683.023c1.423 0 2.671-.05 3.738-.146a22.315 22.315 0 002.957-.445 9.754 9.754 0 002.076-.7 4.591 4.591 0 001.253-.862c.277-.277.488-.605.623-.975.156-.432.236-.951.236-1.544v-1.553c0-1.239-.398-2.143-1.191-2.705a5.52 5.52 0 00-1.619-.789c-.593-.184-1.259-.273-1.991-.273h-6.857c-5.165 0-9.747-.579-13.732-1.735-4.062-1.177-7.491-2.955-10.283-5.324-2.853-2.435-4.985-5.656-6.39-9.664-1.369-3.901-2.055-8.546-2.055-13.925v-4.27c0-4.981.761-9.366 2.277-13.151 1.544-3.85 3.868-7.057 6.962-9.613 2.242-1.846 4.36-3.357 6.877-4.54 2.126-.998 4.508-1.746 7.448-2.237V77.029h21.67v10.003c3.586.286 6.364.786 9.872 1.421l1.821.318c1.521.268 3.037.561 4.537.873 1.408.288 2.763.591 4.049.902l1.476.36v23.53l-2.092-.184a249.02 249.02 0 00-6.27-.469c-2.289-.143-4.637-.27-7.036-.372a360.97 360.97 0 00-7.043-.242 274.567 274.567 0 00-6.395-.072c-1.183 0-2.278.041-3.279.12a28.646 28.646 0 00-2.853.357 8.255 8.255 0 00-2.044.628 4.724 4.724 0 00-1.332.918 3.014 3.014 0 00-.707 1.169c-.186.547-.282 1.216-.282 1.998v1.294c0 .832.121 1.536.359 2.1.221.523.555.966.996 1.325.473.385 1.11.685 1.898.894.883.232 1.962.353 3.231.353h8.539c3.137 0 6.047.306 8.719.911 2.7.614 5.137 1.542 7.302 2.774 4.345 2.476 7.621 5.847 9.817 10.105a28.273 28.273 0 012.443 6.75c.542 2.389.817 4.899.817 7.521v4.269c0 4.213-.378 7.969-1.123 11.254-.762 3.351-1.923 6.206-3.474 8.559-1.553 2.355-3.444 4.334-5.659 5.925-2.212 1.589-4.744 2.794-7.577 3.605l-.725.203c-2.765.796-4.765 1.373-7.985 1.725v11.281h-21.67v-11.174z"
+    />
+    <path
+      fill="#FCD553"
+      fill-rule="nonzero"
+      d="M303.176 184.662c-1.477-.105-2.382-.255-3.469-.43l-6.084-.873-3.755-.63a85.787 85.787 0 01-3.633-.727 80.882 80.882 0 01-3.511-.855l-1.429-.384v-23.498l6.645.541 4.878.288 5.12.228 5.186.161 5.041.098 4.683.023c1.423 0 2.671-.051 3.737-.146a22.667 22.667 0 002.958-.445 9.753 9.753 0 002.076-.701 4.561 4.561 0 001.252-.861 2.64 2.64 0 00.623-.976c.157-.432.237-.95.237-1.543v-1.553c0-1.239-.398-2.144-1.192-2.706a5.512 5.512 0 00-1.618-.788c-.594-.184-1.26-.273-1.992-.273h-6.856c-5.166 0-9.747-.58-13.732-1.735-4.063-1.177-7.491-2.955-10.283-5.324-2.853-2.435-4.985-5.656-6.391-9.665-1.368-3.901-2.055-8.546-2.055-13.925v-4.269c0-4.981.762-9.367 2.278-13.152 1.544-3.849 3.867-7.057 6.961-9.612 2.242-1.846 4.361-3.358 6.878-4.54 2.125-.998 4.508-1.746 7.447-2.237V73.729h21.671v10.003c3.585.287 6.363.787 9.871 1.421l1.821.318c1.521.269 3.038.562 4.538.873 1.407.289 2.762.592 4.049.903l1.475.359v23.53l-2.091-.184c-2.064-.18-4.165-.339-6.27-.468-2.29-.144-4.638-.271-7.036-.373a360.691 360.691 0 00-7.044-.241 268.89 268.89 0 00-6.395-.073c-1.182 0-2.278.041-3.278.121a28.354 28.354 0 00-2.853.357 8.242 8.242 0 00-2.044.627 4.748 4.748 0 00-1.332.919 3.016 3.016 0 00-.708 1.168c-.186.548-.281 1.216-.281 1.998v1.294c0 .832.12 1.537.359 2.101.22.523.555.966.996 1.325.473.384 1.109.684 1.898.894.882.231 1.962.352 3.231.352h8.539c3.137 0 6.047.307 8.718.912 2.701.613 5.138 1.541 7.302 2.773 4.345 2.476 7.621 5.848 9.817 10.106a28.2 28.2 0 012.444 6.75 33.98 33.98 0 01.816 7.52v4.27c0 4.212-.377 7.968-1.123 11.253-.761 3.351-1.923 6.207-3.473 8.56-1.553 2.355-3.445 4.333-5.659 5.925-2.212 1.589-4.745 2.793-7.577 3.605l-.726.202c-2.764.796-4.765 1.374-7.984 1.726v11.281h-21.671v-11.174z"
+    />
+    <path
+      fill="#DBA47B"
+      fill-rule="nonzero"
+      d="M121.148 279.819v147.578l63.369 32.68c42.858 25.182 85.713 26.094 128.531.092l.568-.312a1027.695 1027.695 0 0090.411-47.27c29.629-17.405 58.983-36.62 88.02-57.738 7.377-7.401 10.604-15.608 10.604-23.261 0-5.337-1.56-10.462-4.348-14.873-2.794-4.43-6.862-8.164-11.852-10.707-7.773-3.964-17.827-5.032-28.966-1.429l-78.68 39.01-7.444 17.374-.365.677c-8.682 13.608-20.115 22.059-33.673 27.105-13.224 4.926-28.381 6.54-44.921 6.554-2.27 0-4.909.262-7.579.525-4.057.393-8.206.801-12.264.486-8.525-.146-13.99-4.348-16.451-9.675a15.95 15.95 0 01-1.45-7.061 15.946 15.946 0 011.79-6.972c2.71-5.195 8.345-9.079 16.679-8.667l.184.018c12.579 1.127 25.006 1.886 36.51.67 11.075-1.171 21.331-4.213 30.084-10.625l.128-.089c5.167-3.539 8.284-7.447 9.695-11.288 1.156-3.149 1.174-6.312.256-9.189-.951-2.982-2.919-5.748-5.653-7.996-3.781-3.107-9.033-5.221-15.204-5.643h-54.188a4.792 4.792 0 01-2.493-.734c-62.813-39.542-78.421-39.485-140.386-39.276l-10.912.036z"
+    />
+    <path
+      fill="#43494C"
+      d="M16.725 259.147h86.559c5.277 0 9.593 4.316 9.593 9.589V437.32c0 5.277-4.316 9.589-9.593 9.589H16.725c-5.277 0-9.593-4.312-9.593-9.589V268.736c0-5.273 4.316-9.589 9.593-9.589z"
+    />
+    <path
+      fill="#34393E"
+      d="M112.877 333.785v103.534c0 5.277-4.316 9.594-9.594 9.594H16.726c-5.277 0-9.594-4.317-9.594-9.594v-21.536l105.745-81.998z"
+    />
+  </svg>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({})
+</script>
diff --git a/components/navbar.vue b/components/navbar.vue
@@ -79,6 +79,14 @@
               <Github />
             </a>
           </li>
+          <li class="relative inline-block ml-2 lg:ml-4">
+            <a
+              href="https://github.com/sponsors/technikhil314"
+              title="If you like and enjoy using this product then please considering sponsoring my work."
+            >
+              <Sponsor />
+            </a>
+          </li>
         </ul>
       </nav>
     </div>
@@ -92,9 +100,10 @@ import Back from '~/components/icons/back.vue'
 import Sun from '~/components/icons/sun.vue'
 import Moon from '~/components/icons/moon.vue'
 import Brand from '~/components/icons/brand.vue'
+import Sponsor from '~/components/icons/sponsor.vue'
 let darkMode: Boolean | null = null
 export default Vue.extend({
-  components: { Github, Sun, Moon, Back, Brand },
+  components: { Github, Sun, Moon, Back, Brand, Sponsor },
   props: {
     showBackButton: {
       type: Boolean,

diff --git a/components/v2/navbar.vue b/components/v2/navbar.vue
@@ -81,6 +81,14 @@
               <Github />
             </a>
           </li>
+          <li class="relative inline-block ml-2 lg:ml-4">
+            <a
+              href="https://github.com/sponsors/technikhil314"
+              title="If you like and enjoy using this product then please considering sponsoring my work."
+            >
+              <Sponsor />
+            </a>
+          </li>
         </ul>
       </nav>
     </div>
@@ -94,9 +102,10 @@ import Back from '~/components/icons/back.vue'
 import Sun from '~/components/icons/sun.vue'
 import Moon from '~/components/icons/moon.vue'
 import Brand from '~/components/icons/brand.vue'
+import Sponsor from '~/components/icons/sponsor.vue'
 let darkMode: Boolean | null = null
 export default Vue.extend({
-  components: { Github, Sun, Moon, Back, Brand },
+  components: { Github, Sun, Moon, Back, Brand, Sponsor },
   props: {
     showBackButton: {
       type: Boolean,