From 797b12a1fafe3d86d617771c01608ce9c28bd2e3 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 18 Oct 2022 22:39:47 +0100
Subject: [PATCH] feat: add sponsor star

---
 src/components/layout/TheSiteHeader.vue | 12 +++++++++++-
 src/server/plugins/sprite.ts            |  1 +
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/layout/TheSiteHeader.vue b/src/components/layout/TheSiteHeader.vue
index cb09f456..f02882d3 100644
--- a/src/components/layout/TheSiteHeader.vue
+++ b/src/components/layout/TheSiteHeader.vue
@@ -79,7 +79,7 @@ const loginURL = `https://github.com/login/oauth/authorize?client_id=${config.pu
       </NuxtLink>
       <button
         v-else-if="$auth.status === 'logged-in'"
-        class="ml-2 flex-shrink-0"
+        class="relative ml-2 flex-shrink-0"
         @click="$auth.logout"
       >
         <img
@@ -87,6 +87,16 @@ const loginURL = `https://github.com/login/oauth/authorize?client_id=${config.pu
           :class="{ 'border-[1px] border-yellow-400': $auth.user.sponsor }"
           :src="$auth.user.avatar"
         />
+        <svg
+          v-if="$auth.user.sponsor"
+          class="absolute top-[-0.4rem] right-[-0.65rem] h-5 w-5 text-yellow-400 fill-current"
+          alt=""
+        >
+          <use
+            xlink:href="#star"
+            class="border-solid border-[1px] border-gray-800"
+          />
+        </svg>
         <span class="sr-only"> Log out {{ $auth.user.name }} </span>
       </button>
       <ToggleColorMode />
diff --git a/src/server/plugins/sprite.ts b/src/server/plugins/sprite.ts
index a9c67828..421cf8bd 100644
--- a/src/server/plugins/sprite.ts
+++ b/src/server/plugins/sprite.ts
@@ -12,6 +12,7 @@ const sprite =
   <symbol id="linkedin" viewBox="0 0 128 128">
     <path d="M116 3H12a8.91 8.91 0 0 0-9 8.8v104.42a8.91 8.91 0 0 0 9 8.78h104a8.93 8.93 0 0 0 9-8.81V11.77A8.93 8.93 0 0 0 116 3ZM39.17 107H21.06V48.73h18.11Zm-9-66.21a10.5 10.5 0 1 1 10.49-10.5 10.5 10.5 0 0 1-10.54 10.48ZM107 107H88.89V78.65c0-6.75-.12-15.44-9.41-15.44s-10.87 7.36-10.87 15V107H50.53V48.73h17.36v8h.24c2.42-4.58 8.32-9.41 17.13-9.41C103.6 47.28 107 59.35 107 75Z"/>
   </symbol>
+  <symbol viewbox="0 0 24 24" id="star"><path stroke="#111827" stroke-width="2" fill="currentColor" d="m14.43 10l-1.47-4.84c-.29-.95-1.63-.95-1.91 0L9.57 10H5.12c-.97 0-1.37 1.25-.58 1.81l3.64 2.6l-1.43 4.61c-.29.93.79 1.68 1.56 1.09l3.69-2.8l3.69 2.81c.77.59 1.85-.16 1.56-1.09l-1.43-4.61l3.64-2.6c.79-.57.39-1.81-.58-1.81h-4.45z"></path></symbol>
 </svg>
 `.replace(/\s+/g, ' ')
 
-- 
2.54.0