chore: minor housekeeping 🧹

Signed-off-by: Vinayak Kulkarni <19776877+vinayakkulkarni@users.noreply.github.com>
vinayakkulkarni · Sep 14, 2024 · bd931bc · bd931bc
1 parent 9438668
commit bd931bc
Show file tree

Hide file tree

Showing 17 changed files with 96 additions and 150 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,5 @@
 {
   "files.eol": "\n",
-  "editor.formatOnSave": true,
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
@@ -12,4 +11,4 @@
   },
   "editor.bracketPairColorization.enabled": true,
   "editor.guides.bracketPairs": "active",
-}
+}
diff --git a/app/assets/icons/codepen.svg b/app/assets/icons/codepen.svg
diff --git a/app/assets/icons/github.svg b/app/assets/icons/github.svg
diff --git a/app/assets/icons/linkedin.svg b/app/assets/icons/linkedin.svg
diff --git a/app/assets/icons/twitter.svg b/app/assets/icons/twitter.svg
diff --git a/app/assets/icons/v-logo-dark.svg b/app/assets/icons/v-logo-dark.svg
diff --git a/app/assets/icons/v-logo-light.svg b/app/assets/icons/v-logo-light.svg
diff --git a/app/components/VFooter.vue b/app/components/VFooter.vue
@@ -12,20 +12,7 @@
         aria-label="Github"
         class="px-2 transition-colors duration-100 ease-linear hover:text-dark-300"
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 32 32"
-          aria-labelledby="github"
-          role="presentation"
-          class="fill-current text-xl"
-        >
-          <title id="github" lang="en">github</title>
-          <path
-            d="M16 0.395c-8.836 0-16 7.163-16 16 0 7.069 4.585 13.067 10.942 15.182 0.8 0.148 1.094-0.347 1.094-0.77 0-0.381-0.015-1.642-0.022-2.979-4.452 0.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993 0.11-0.973 0.11-0.973 1.606 0.113 2.452 1.649 2.452 1.649 1.427 2.446 3.743 1.739 4.656 1.33 0.143-1.034 0.558-1.74 1.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907 0-1.747 0.625-3.174 1.649-4.295-0.166-0.403-0.714-2.030 0.155-4.234 0 0 1.344-0.43 4.401 1.64 1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070 4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743 7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925 1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z"
-          />
-        </svg>
+        <icon name="base:github" size="16" />
       </a>
       <!-- Twitter -->
       <a
@@ -35,19 +22,7 @@
         aria-label="Twitter"
         class="px-2 transition-colors duration-100 ease-linear hover:text-blue-300"
       >
-        <svg
-          aria-hidden="true"
-          width="24"
-          height="24"
-          viewBox="0 0 512 512"
-          class="fill-current text-2xl"
-        >
-          <g>
-            <path
-              d="M459.4 151.7c0.3 4.5 0.3 9.1 0.3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"
-            />
-          </g>
-        </svg>
+        <icon name="base:twitter" size="16" />
       </a>
       <!-- LinkedIn -->
       <a
@@ -57,19 +32,7 @@
         aria-label="LinkedIn"
         class="px-2 transition-colors duration-100 ease-linear hover:text-blue-400"
       >
-        <svg
-          aria-hidden="true"
-          width="24"
-          height="24"
-          viewBox="0 0 512 512"
-          class="fill-current text-2xl"
-        >
-          <g>
-            <path
-              d="M160.008 423h-70V197h70zm6.984-298.004c0-22.629-18.36-40.996-40.976-40.996C103.312 84 85 102.367 85 124.996 85 147.633 103.313 166 126.016 166c22.617 0 40.976-18.367 40.976-41.004zM422 298.664C422 237.996 409.184 193 338.312 193c-34.054 0-56.914 17.031-66.246 34.742H272V197h-68v226h68V310.79c0-29.388 7.48-57.856 43.906-57.856 35.93 0 37.094 33.605 37.094 59.722V423h69zM512 452V60c0-33.086-26.914-60-60-60H60C26.914 0 0 26.914 0 60v392c0 33.086 26.914 60 60 60h392c33.086 0 60-26.914 60-60zM452 40c11.027 0 20 8.973 20 20v392c0 11.027-8.973 20-20 20H60c-11.027 0-20-8.973-20-20V60c0-11.027 8.973-20 20-20zm0 0"
-            />
-          </g>
-        </svg>
+        <icon name="base:linkedin" size="16" />
       </a>
       <!-- Codepen -->
       <a
@@ -79,19 +42,7 @@
         aria-label="Codepen"
         class="px-2 transition-colors duration-100 ease-linear hover:text-dark-400"
       >
-        <svg
-          aria-hidden="true"
-          width="24"
-          height="24"
-          viewBox="0 0 512 512"
-          class="fill-current text-2xl"
-        >
-          <g>
-            <path
-              d="M502.3 159.7c6 4 9.7 11.1 9.7 18.3v156c0 7.1-3.7 14.3-9.7 18.3l-234 156c-8.1 5-16.6 4.9-24.6 0l-234-156c-6-4-9.7-11.1-9.7-18.3v-156c0-7.1 3.7-14.3 9.7-18.3l234-156c8.1-5 16.6-4.9 24.6 0zM278 63.1v102.6l95.4 63.7 76.9-51.4zM234 63.1l-172.3 114.9 76.9 51.4 95.4-63.7v-102.6zM44 219.1v73.7l55.1-36.9zM234 448.8v-102.6l-95.4-63.7-76.9 51.4zM256 308l77.7-52-77.7-52-77.7 52zM278 448.8l172.3-114.9-76.9-51.4-95.4 63.7v102.6zM468 292.8v-73.7l-55.1 36.9z"
-            />
-          </g>
-        </svg>
+        <icon name="base:codepen" size="16" />
       </a>
     </div>
   </section>

diff --git a/app/components/VHeader.vue b/app/components/VHeader.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-  import { useRouter, useToggle, useDark, useUser } from '#imports';
-
-  const router = useRouter();
   const isDark = useDark();
   const toggleDark = useToggle(isDark);
   const user = useUser();
@@ -21,67 +18,56 @@
 </script>
 
 <template>
-  <section class="invisible min-w-full flex items-center justify-between p-4">
+  <section class="flex items-center justify-between invisible min-w-full p-4">
     <!-- Logo -->
-    <svg
-      class="v-logo visible cursor-pointer text-stone-900 dark:text-stone-100"
-      width="30"
-      height="30"
-      @click="router.push({ name: 'index' })"
-    >
-      <defs />
-      <text y="30" fill="currentColor" class="text-5xl">V.</text>
-    </svg>
-    <div class="visible flex items-center">
+    <nuxt-link to="/" class="visible cursor-pointer pl-4">
+      <icon
+        :name="isDark ? 'base:v-logo-dark' : 'base:v-logo-dark'"
+        size="32"
+        mode="svg"
+        class="v-logo dark:text-white text-black"
+        @click="toggleDark()"
+      />
+    </nuxt-link>
+    <div class="flex items-center justify-center visible gap-4 px-4 py-2">
       <!-- Sign In Button (Only shown when user is not logged in) -->
-      <a v-if="!user" href="/login/github" class="p-4" aria-label="Sign in">
-        <svg
-          class="h-8 w-8"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M7.5 3.75A1.5 1.5 0 006 5.25v13.5a1.5 1.5 0 001.5 1.5h6a1.5 1.5 0 001.5-1.5V15a.75.75 0 011.5 0v3.75a3 3 0 01-3 3h-6a3 3 0 01-3-3V5.25a3 3 0 013-3h6a3 3 0 013 3V9A.75.75 0 0115 9V5.25a1.5 1.5 0 00-1.5-1.5h-6zm10.72 4.72a.75.75 0 011.06 0l3 3a.75.75 0 010 1.06l-3 3a.75.75 0 11-1.06-1.06l1.72-1.72H9a.75.75 0 010-1.5h10.94l-1.72-1.72a.75.75 0 010-1.06z"
-            clip-rule="evenodd"
-          />
-        </svg>
+      <a v-if="!user" href="/login/github" aria-label="Sign in" class="flex">
+        <icon name="mi:log-in" size="16" />
       </a>
       <!-- User Menu (Only shown when user is logged in) -->
       <client-only>
         <template v-if="user">
-          <div class="relative ml-3 p-4">
+          <div class="relative p-4 ml-3">
             <div>
               <button
                 id="user-menu-button"
                 type="button"
-                class="relative flex rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white focus:ring-offset-gray-800 dark:focus:ring-gray-700"
+                class="relative flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white focus:ring-offset-gray-800 dark:focus:ring-gray-700"
                 :aria-expanded="dropdown"
                 aria-haspopup="true"
                 @click="dropdown = !dropdown"
               >
                 <span class="absolute -inset-1.5"></span>
                 <span class="sr-only">Open user menu</span>
                 <img
-                  class="h-8 w-8 rounded-full"
+                  class="w-8 h-8 rounded-full"
                   :src="user.avatarUrl"
                   :alt="`${user.username} Profile picture`"
                   :title="user.username"
                 />
               </button>
             </div>
             <transition
-              enter-active-class="transition ease-out duration-100"
-              enter-from-class="transform opacity-0 scale-95"
-              enter-to-class="transform opacity-100 scale-100"
-              leave-active-class="transition ease-in duration-75"
-              leave-from-class="transform opacity-100 scale-100"
-              leave-to-class="transform opacity-0 scale-95"
+              enter-active-class="transition duration-100 ease-out"
+              enter-from-class="transform scale-95 opacity-0"
+              enter-to-class="transform scale-100 opacity-100"
+              leave-active-class="transition duration-75 ease-in"
+              leave-from-class="transform scale-100 opacity-100"
+              leave-to-class="transform scale-95 opacity-0"
             >
               <div
                 v-if="dropdown"
-                class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md py-1 shadow-lg ring-1 ring-black ring-opacity-5 dark:bg-gray-800 focus:outline-none"
+                class="absolute right-0 z-10 w-48 py-1 mt-2 origin-top-right rounded-md shadow-lg ring-1 ring-black ring-opacity-5 dark:bg-gray-800 focus:outline-none"
                 role="menu"
                 aria-orientation="vertical"
                 aria-labelledby="user-menu-button"
@@ -95,18 +81,7 @@
                   tabindex="-1"
                   @click="logout"
                 >
-                  <svg
-                    class="h-6 w-6"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="currentColor"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M7.5 3.75A1.5 1.5 0 006 5.25v13.5a1.5 1.5 0 001.5 1.5h6a1.5 1.5 0 001.5-1.5V15a.75.75 0 011.5 0v3.75a3 3 0 01-3 3h-6a3 3 0 01-3-3V5.25a3 3 0 013-3h6a3 3 0 013 3V9A.75.75 0 0115 9V5.25a1.5 1.5 0 00-1.5-1.5h-6zm5.03 4.72a.75.75 0 010 1.06l-1.72 1.72h10.94a.75.75 0 010 1.5H10.81l1.72 1.72a.75.75 0 11-1.06 1.06l-3-3a.75.75 0 010-1.06l3-3a.75.75 0 011.06 0z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
+                  <icon name="mi:log-out" size="24" />
                   Sign out
                 </a>
               </div>
@@ -116,31 +91,12 @@
       </client-only>
       <!-- Theme switcher -->
       <client-only>
-        <span class="relative z-0 inline-flex rounded-full">
-          <svg
-            v-if="!isDark"
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-8 w-8 cursor-pointer outline-none"
-            viewBox="0 0 24 24"
+        <span class="relative z-0 inline-flex rounded-full cursor-pointer">
+          <icon
+            :name="isDark ? 'carbon:moon' : 'carbon:sun'"
+            size="16"
             @click="toggleDark()"
-          >
-            <path
-              fill="currentColor"
-              d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z"
-            />
-          </svg>
-          <svg
-            v-else
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-8 w-8 cursor-pointer outline-none"
-            viewBox="0 0 512 512"
-            @click="toggleDark()"
-          >
-            <path
-              fill="currentColor"
-              d="M256 387c-8.5 0-15.4 6.9-15.4 15.4v46.2c0 8.5 6.9 15.4 15.4 15.4s15.4-6.9 15.4-15.4v-46.2c0-8.5-6.9-15.4-15.4-15.4zm0-339c-8.5 0-15.4 6.9-15.4 15.4v46.2c0 8.5 6.9 15.4 15.4 15.4s15.4-6.9 15.4-15.4V63.4c0-8.5-6.9-15.4-15.4-15.4zM125 256c0-8.5-6.9-15.4-15.4-15.4H63.4c-8.5 0-15.4 6.9-15.4 15.4s6.9 15.4 15.4 15.4h46.2c8.5 0 15.4-6.9 15.4-15.4zm323.6-15.4h-46.2c-8.5 0-15.4 6.9-15.4 15.4s6.9 15.4 15.4 15.4h46.2c8.5 0 15.4-6.9 15.4-15.4s-6.9-15.4-15.4-15.4zM152.5 344.1c-4.1 0-8 1.6-10.9 4.5l-32.7 32.7c-2.9 2.9-4.5 6.8-4.5 10.9s1.6 8 4.5 10.9c2.9 2.9 6.8 4.5 10.9 4.5 4.1 0 8-1.6 10.9-4.5l32.7-32.7c6-6 6-15.8 0-21.8-2.9-2.9-6.8-4.5-10.9-4.5zm207-176.2c4.1 0 8-1.6 10.9-4.5l32.7-32.7c2.9-2.9 4.5-6.8 4.5-10.9s-1.6-8-4.5-10.9c-2.9-2.9-6.8-4.5-10.9-4.5-4.1 0-8 1.6-10.9 4.5l-32.7 32.7c-2.9 2.9-4.5 6.8-4.5 10.9s1.6 8 4.5 10.9c2.9 2.9 6.8 4.5 10.9 4.5zm-228.8-59c-2.9-2.9-6.8-4.5-10.9-4.5-4.1 0-8 1.6-10.9 4.5-2.9 2.9-4.5 6.8-4.5 10.9 0 4.1 1.6 8 4.5 10.9l32.7 32.7c2.9 2.9 6.8 4.5 10.9 4.5 4.1 0 8-1.6 10.9-4.5 2.9-2.9 4.5-6.8 4.5-10.9s-1.6-8-4.5-10.9l-32.7-32.7zm239.7 239.7c-2.9-2.9-6.8-4.5-10.9-4.5-4.1 0-8 1.6-10.9 4.5-6 6-6 15.8 0 21.8l32.7 32.7c2.9 2.9 6.8 4.5 10.9 4.5 4.1 0 8-1.6 10.9-4.5 2.9-2.9 4.5-6.8 4.5-10.9s-1.6-8-4.5-10.9l-32.7-32.7zM256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96z"
-            />
-          </svg>
+          />
         </span>
       </client-only>
     </div>

diff --git a/app/middleware/auth.client.ts → app/middleware/auth.global.ts b/app/middleware/auth.client.ts → app/middleware/auth.global.ts
diff --git a/app/pages/articles.vue b/app/pages/articles.vue
@@ -1,11 +1,7 @@
 <template>
   <section class="h-full w-full flex items-center justify-center">
-    <nuxt-page :page-key="route.fullPath">
+    <nuxt-page :key="$route.fullPath">
       <slot></slot>
     </nuxt-page>
   </section>
 </template>
-
-<script setup lang="ts">
-  const route = useRoute();
-</script>
diff --git a/app/pages/articles/[...article].vue → app/pages/articles/[article].vue b/app/pages/articles/[...article].vue → app/pages/articles/[article].vue
diff --git a/app/pages/articles/index.vue b/app/pages/articles/index.vue
@@ -32,7 +32,7 @@
             :key="article.position"
             class="w-full cursor-pointer overflow-hidden rounded bg-stone-900 text-stone-200 shadow md:max-w-lg dark:bg-stone-700 hover:shadow-md"
             :title="article.title"
-            @click="router.push({ path: article._path })"
+            @click="$router.push({ path: article._path })"
           >
             <div class="p-4">
               <div class="mb-2 text-xl font-bold">
@@ -66,7 +66,3 @@
     </content-list>
   </section>
 </template>
-
-<script setup lang="ts">
-  const router = useRouter();
-</script>
diff --git a/bun.lockb b/bun.lockb
diff --git a/...-publish-vue-3-components-using-rollup.md → ...-publish-vue-3-components-using-rollup.md b/...-publish-vue-3-components-using-rollup.md → ...-publish-vue-3-components-using-rollup.md