Use NE prefix for custom component & Replace External & Internal link…

…s with NELink
usevital · Jul 13, 2024 · f302ba4 · f302ba4
1 parent 848fd21
commit f302ba4
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 38 deletions.
diff --git a/components/InternalLink.vue b/components/InternalLink.vue
diff --git a/components/Button.vue → components/NEButton.vue b/components/Button.vue → components/NEButton.vue
diff --git a/components/ExternalLink.vue → components/NELink.vue b/components/ExternalLink.vue → components/NELink.vue
@@ -1,18 +1,19 @@
 <template>
-  <a
-    :href="to"
-    target="_blank"
-    rel="noopener noreferrer"
-    class="inline-flex flex-row items-center gap-1 font-bold text-[var(--brand-blue)]"
+  <NuxtLink
+    :to="to"
+    :target="external ? '_blank' : ''"
+    :rel="external ? 'noopener noreferrer' : ''"
+    class="inline-flex flex-row items-center gap-1 font-bold text-[var(--brand-blue)] duration-300 active:scale-95"
   >
     <LucideExternalLink v-if="showIcon" />
     <slot />
-  </a>
+  </NuxtLink>
 </template>
 
 <script setup>
 const props = defineProps({
   to: String,
+  external: Boolean,
   showIcon: Boolean,
 })
 </script>
diff --git a/components/Select.vue → components/NESelect.vue b/components/Select.vue → components/NESelect.vue
diff --git a/components/ProjectCard.vue b/components/ProjectCard.vue
@@ -20,9 +20,9 @@
     </div>
     <!-- Buttons -->
     <div class="flex flex-row flex-wrap gap-3 mb-5">
-      <Button v-for="(link, index) in urls" :to="link" secondary external>
+      <NEButton v-for="(link, index) in urls" :to="link" secondary external>
         <LucideDownload />{{ index }}
-      </Button>
+      </NEButton>
     </div>
   </div>
 </template>

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -46,10 +46,11 @@
             <div
               class="flex flex-col gap-1 font-[500] text-[var(--text-colour)] text-sm"
             >
-              <ExternalLink
+              <NELink
                 class="font-medium text-white hover:underline"
                 to="https://github.com/blryface/notessential"
-                >{{ $t("layout.footer.open_source") }}</ExternalLink
+                external
+                >{{ $t("layout.footer.open_source") }}</NELink
               >
             </div>
           </div>
@@ -62,14 +63,14 @@
               }}</span>
               <span
                 >{{ $t("layout.footer.credit_creator") }}
-                <ExternalLink to="https://blurryface.xyz"
-                  >Blurryface</ExternalLink
+                <NELink to="https://blurryface.xyz" external
+                  >Blurryface</NELink
                 ></span
               >
               <span
                 >{{ $t("layout.footer.credit_designed") }}
-                <ExternalLink to="https://worldwidepixel.ca"
-                  >WorldWidePixel</ExternalLink
+                <NELink to="https://worldwidepixel.ca" external
+                  >WorldWidePixel</NELink
                 ></span
               >
             </div>
@@ -79,24 +80,24 @@
               <span class="font-bold text-base">{{
                 $t("layout.footer.resources")
               }}</span>
-              <InternalLink to="/contributing"
+              <NELink to="/contributing"
                 ><LucidePenBox class="h-5" />{{
                   $t("layout.footer.contributing")
                 }}
-              </InternalLink>
+              </NELink>
             </div>
             <div
               class="flex flex-col gap-2 font-[500] text-[var(--text-colour)] text-sm"
             >
               <span class="font-bold text-base">{{
                 $t("layout.footer.interact")
               }}</span>
-              <ExternalLink to="https://crowdin.com/project/notessential"
+              <NELink to="https://crowdin.com/project/notessential" external
                 ><LucideGlobe class="h-5" />Crowdin
-              </ExternalLink>
-              <ExternalLink to="https://discord.gg/wncdz7e8jy"
+              </NELink>
+              <NELink to="https://discord.gg/wncdz7e8jy" external
                 ><LucideMessageCircle class="h-5" />Discord
-              </ExternalLink>
+              </NELink>
             </div>
           </div>
         </div>

diff --git a/pages/flags.vue b/pages/flags.vue
@@ -19,15 +19,15 @@
 
         <p>Available langagues:</p>
 
-        <Select v-on:change="handleLanguageChange">
+        <NESelect v-on:change="handleLanguageChange">
           <option
             v-for="locale in availableLocales"
             :value="locale.code"
             @click="setLocale(locale.code)"
           >
             {{ locale.name }}
           </option>
-        </Select>
+        </NESelect>
       </div>
     </div>
   </div>

diff --git a/pages/index.vue b/pages/index.vue
@@ -11,13 +11,15 @@
     </span>
     <!-- THE WORD 'MINECRAFT' AND THE 'NOTESSENTIAL' NAME SHOULD NOT BE LOCALISED. -->
 
+    <Link to="/" show-icon>test.com</Link>
+
     <p class="text-2xl">
       {{ $t("landing.reason") }}
     </p>
 
-    <Button class="w-fit sm:px-20 px-15 py-8" to="/alternatives">
+    <NEButton class="w-fit sm:px-20 px-15 py-8" to="/alternatives">
       <LucideArrowUpRight /> {{ $t("landing.buttons.alternatives") }}
-    </Button>
+    </NEButton>
   </div>
 </template>